/* ============================================================
   CALLOWAY & FROST INC  —  "Aurora" Premium UI
   Distinct, modern section layouts (not the source template).
   Palette: Violet / Indigo primary  +  Cyan accent (light UI)
   Loads LAST — visual identity + layout layer over the base
   framework. JS class hooks preserved.
   ============================================================ */

:root {
    --primary:        #7C3AED;
    --primary-2:      #5B34E0;
    --primary-3:      #4338CA;
    --accent:         #06B6D4;
    --accent-2:       #22D3EE;
    --accent-3:       #0EA5E9;

    --ink:            #1A1633;
    --ink-soft:       #2A2450;
    --text:           #4B4A63;
    --muted:          #8A88A3;

    --bg:             #ffffff;
    --bg-soft:        #F7F6FD;
    --bg-tint:        #FBFBFE;
    --bg-lavender:    #F3F1FE;
    --band:           #EEF3FB;      /* step band base (for connector gaps) */

    --border:         #ECE9F8;
    --border-2:       #E3DFF6;

    --grad-primary:   linear-gradient(135deg, #7C3AED 0%, #4338CA 100%);
    --grad-accent:    linear-gradient(135deg, #22D3EE 0%, #0EA5E9 100%);
    --grad-cta:       linear-gradient(120deg, #6D28D9 0%, #4338CA 52%, #0EA5E9 120%);
    --grad-line:      linear-gradient(90deg, #7C3AED, #06B6D4);

    --shadow-sm:      0 4px 18px rgba(67, 56, 202, 0.06);
    --shadow-md:      0 12px 34px rgba(67, 56, 202, 0.10);
    --shadow-lg:      0 26px 60px rgba(67, 56, 202, 0.16);

    --radius:         18px;
    --radius-lg:      24px;

    --font: 'Inter', 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
}

html { scroll-behavior: smooth; }
body { font-family: var(--font); color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
/* Sticky fix: base set body{overflow-x:hidden; height:100%} — the overflow made body a
   scroll container AND height:100% capped body to one viewport, so the sticky header only
   pinned for one screenful. Clear both so the viewport scrolls and the header pins fully. */
html { overflow-x: hidden !important; height: auto !important; }
body { overflow: visible !important; height: auto !important; min-height: 100vh; }
h1,h2,h3,h4,h5,h6 { color: var(--ink); font-family: var(--font); }
a { transition: color .3s ease; }
::selection { background: rgba(124, 58, 237, 0.16); color: var(--ink); }
.cl-iPrimary { color: var(--primary) !important; }

/* Container */
.container { width: 100%; max-width: 1200px; margin: 0 auto; padding-left: 15px; padding-right: 15px; }
@media (min-width: 1200px) { .container { max-width: 1180px; } }
@media (min-width: 992px) and (max-width: 1199px) { .container { max-width: 960px; } }
@media (min-width: 768px) and (max-width: 991px) { .container { max-width: 720px; } }
@media (min-width: 576px) and (max-width: 767px) { .container { max-width: 540px; } }

/* ============================================================
   SCROLL REVEAL (classes added by scripts.asp)
   ============================================================ */
.cf-reveal { opacity: 0; transform: translateY(30px); transition: opacity .8s cubic-bezier(.22,.61,.36,1), transform .8s cubic-bezier(.22,.61,.36,1); will-change: opacity, transform; }
.cf-reveal.cf-left  { transform: translateX(-46px); }
.cf-reveal.cf-right { transform: translateX(46px); }
.cf-reveal.cf-scale { transform: scale(.93); }
.cf-reveal.cf-in    { opacity: 1; transform: none; }
.cf-reveal.cf-d1 { transition-delay: .10s; }
.cf-reveal.cf-d2 { transition-delay: .20s; }
.cf-reveal.cf-d3 { transition-delay: .30s; }
@media (prefers-reduced-motion: reduce) { .cf-reveal { opacity: 1 !important; transform: none !important; transition: none !important; } html { scroll-behavior: auto; } }

/* ============================================================
   HEADER TOP BAR
   ============================================================ */
.header-topbar { background: var(--grad-primary) !important; padding: 9px 0; border-bottom: 1px solid rgba(255,255,255,.08); position: relative; overflow: hidden; }
.header-topbar::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(34,211,238,.18), transparent); animation: cf-sheen 6s linear infinite; pointer-events: none; }
@keyframes cf-sheen { 0%{transform:translateX(-100%);} 100%{transform:translateX(100%);} }
.topbar-inner { display: flex; align-items: center; justify-content: flex-end; position: relative; z-index: 1; }
.topbar-left { display: flex; align-items: center; gap: 26px; }
.topbar-left a { color: rgba(255,255,255,.82) !important; font-size: 12.5px; text-decoration: none; transition: color .3s ease; display: flex; align-items: center; gap: 7px; }
.topbar-left a:hover { color: #fff !important; }
.topbar-left a i { font-size: 12px; color: var(--accent-2); }

/* ============================================================
   HEADER
   ============================================================ */
/* Solid header (no backdrop blur) + constant height => smooth, no scroll jank */
.header { background: #ffffff !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; border-bottom: 1px solid var(--border) !important; box-shadow: 0 2px 16px rgba(67,56,202,.05) !important; transition: box-shadow .3s ease; padding: 10px 0; position: sticky; top: 0; z-index: 1000; will-change: box-shadow; }
.header.is--scrolled, .header.sticky-header { background: #ffffff !important; box-shadow: 0 6px 26px rgba(67,56,202,.13) !important; padding: 10px 0; }
.header .fflex { display: flex; align-items: center; justify-content: space-between; }
/* Keep the logo container natural width in ALL states (base CSS clamps it to 120px on scroll, which squished the logo) */
.header .logo, .header.is--scrolled .logo, .header.sticky-header .logo { flex: 0 0 auto !important; max-width: none !important; width: auto !important; display: flex; align-items: center; }
.header .navigation { flex-grow: 1; display: flex; justify-content: flex-end; align-items: center; }
/* Logo: fixed height, natural width, never capped -> aspect ratio preserved on scroll */
.header .logo img, .header.is--scrolled .logo img, .header.sticky-header .logo img { height: 46px !important; max-height: 46px !important; width: auto !important; max-width: none !important; min-width: 0 !important; transition: none !important; transform: none !important; display: block; }
.nav-hamburger { display: none; }

.navigation > ul > li > a { letter-spacing: .2px; font-size: 14px !important; font-weight: 600 !important; color: var(--ink-soft) !important; transition: color .3s ease !important; position: relative; }
.navigation > ul > li > a::before { display: none !important; content: none !important; }
.navigation > ul > li:not(.dropdown) > a::after { content: '' !important; display: block !important; position: absolute; left: 16px; right: 16px; bottom: 2px; height: 2px; border-radius: 2px; background: var(--grad-line); transform: scaleX(0); transform-origin: left; transition: transform .3s ease; }
.navigation > ul > li:not(.dropdown):hover > a::after, .navigation > ul > li:not(.dropdown).is--active > a::after { transform: scaleX(1); }
.navigation > ul > li:hover > a, .navigation > ul > li.is--active > a { color: var(--primary) !important; }
.navigation > ul > li.dropdown > a > i { transition: transform .3s ease; font-size: 10px !important; margin-left: 4px; color: var(--primary) !important; }
.navigation > ul > li.dropdown:hover > a > i, .navigation > ul > li.dropdown.is--active > a > i { transform: rotate(180deg); }
.navigation .dropdown ul { border-radius: 14px !important; box-shadow: var(--shadow-lg) !important; background: #fff !important; border: 1px solid var(--border) !important; padding: 8px !important; overflow: hidden; margin-top: 0 !important; }
.navigation .dropdown ul li { min-width: 248px; }
.navigation .dropdown ul li a, .navigation .dropdown ul a { padding: 11px 16px !important; font-size: 13.5px !important; color: #55536b !important; font-weight: 500 !important; border-radius: 10px; transition: all .25s ease !important; position: relative; border-left: 3px solid transparent; text-align: left; }
.navigation .dropdown ul li a:hover, .navigation .dropdown ul a:hover { color: var(--primary) !important; background: var(--bg-lavender) !important; padding-left: 20px !important; }
.navigation .dropdown ul li.is--active a { color: var(--primary) !important; font-weight: 600 !important; background: var(--bg-lavender) !important; }

.header-cta-btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; line-height: 1 !important; background: var(--grad-primary) !important; background-image: var(--grad-primary) !important; color: #fff !important; padding: 12px 26px !important; border-radius: 40px !important; font-size: 13.5px !important; font-weight: 700 !important; letter-spacing: .3px; white-space: nowrap; border: none !important; box-shadow: 0 8px 20px rgba(124,58,237,.35) !important; transition: transform .3s ease, box-shadow .3s ease, filter .3s ease !important; text-decoration: none !important; }
.header-cta-btn:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(124,58,237,.48) !important; filter: brightness(1.07); color: #fff !important; }
.header-cta-btn:active { transform: translateY(0); }
/* Force white label in every state (base turns nav links copper on hover) */
.header-cta-btn, a.header-cta-btn, .navigation .gesture-nav li a.header-cta-btn,
.header-cta-btn:link, .header-cta-btn:visited, .header-cta-btn:hover, .header-cta-btn:focus, .header-cta-btn:active,
.navigation .gesture-nav li a.header-cta-btn:hover, .header.sticky-header .gesture-nav li a.header-cta-btn { color: #fff !important; }
.navigation .gesture-nav { background: none !important; }
.navigation .gesture-nav::before { display: none !important; content: none !important; }

@media (min-width: 992px) {
    .nav-hamburger { display: none !important; }
    .header .navigation { display: flex !important; position: static !important; left: auto !important; width: auto !important; height: auto !important; max-height: none !important; background: transparent !important; padding: 0 !important; box-shadow: none !important; overflow: visible !important; flex-direction: row !important; align-items: center !important; justify-content: flex-end !important; flex-grow: 1 !important; }
    .navigation > ul { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: flex-end !important; margin: 0 !important; padding: 0 !important; list-style: none !important; }
    .navigation > ul > li { border: none !important; margin: 0 !important; position: relative; display: inline-block !important; }
    .navigation > ul > li > a { display: inline-block !important; padding: 12px 16px !important; }
    .navigation .gesture-nav { display: flex !important; align-items: center !important; margin: 0 0 0 22px !important; padding: 0 !important; border: none !important; background: none !important; list-style: none !important; }
    .navigation .gesture-nav li { display: inline-block !important; border: none !important; }
    .navigation .gesture-nav .header-cta-btn { display: inline-block !important; width: auto !important; }
    .navigation .dropdown ul { position: absolute !important; max-height: none !important; overflow: visible !important; padding: 8px !important; }
}

/* ============================================================
   HERO — full-bleed photo with a left-fading scrim
   (the whole image stays visible; text sits on the shaded left)
   ============================================================ */
.banner {
    position: relative; overflow: hidden; min-height: 640px; display: flex; align-items: center;
    background-size: cover !important; background-position: center !important;
    background-repeat: no-repeat !important; background-attachment: scroll !important;
    background-color: #0e0b1f;
}
.banner::before {
    content: ''; position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(90deg, rgba(18,12,38,.97) 0%, rgba(34,22,92,.95) 38%, rgba(28,19,74,.72) 52%, rgba(20,14,42,.36) 68%, rgba(20,14,42,.10) 85%, rgba(20,14,42,0) 100%);
}
.banner::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 42%; z-index: 1;
    background: linear-gradient(0deg, rgba(16,11,31,.5), transparent);
}
.banner .container { position: relative; z-index: 3; }
.banner .row { min-height: 540px; align-items: center; }
.banner .row.justify-content-end { justify-content: flex-start !important; }
@media (min-width: 992px) { .banner .col-lg-6 { flex: 0 0 52% !important; max-width: 560px !important; } }

.banner-content { background: transparent !important; background-image: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; padding: 0 !important; overflow: visible !important; text-align: left !important; animation: cf-slideUp .9s cubic-bezier(.22,.61,.36,1) both; }
.banner-content::before { display: none !important; content: none !important; }
@keyframes cf-slideUp { from { opacity: 0; transform: translateY(34px); } to { opacity: 1; transform: none; } }
@keyframes cf-fadeUp  { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

.banner-content h5 { color: #fff !important; font-size: 12.5px !important; font-weight: 700 !important; text-transform: uppercase; letter-spacing: 3px; margin-bottom: 22px !important; display: inline-flex; align-items: center; gap: 12px; padding: 8px 18px 8px 14px; background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.22); border-radius: 40px; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: cf-fadeUp .8s ease-out .15s both; }
.banner-content h5::before { content: ''; width: 20px; height: 20px; border-radius: 50%; background: var(--grad-accent); box-shadow: 0 0 16px rgba(34,211,238,.6); flex-shrink: 0; }
.banner-content h2 { color: rgba(255,255,255,.94) !important; font-size: calc(20px + (28 - 20) * (100vw - 320px) / (1920 - 320)) !important; font-weight: 300 !important; margin-bottom: 6px !important; line-height: 1.3 !important; letter-spacing: .2px; text-shadow: 0 2px 14px rgba(0,0,0,.5); animation: cf-fadeUp .8s ease-out .28s both; }
.banner-content h1 { color: #fff !important; font-size: calc(34px + (56 - 34) * (100vw - 320px) / (1920 - 320)) !important; font-weight: 800 !important; line-height: 1.12 !important; margin-bottom: 28px !important; letter-spacing: -0.5px; text-shadow: 0 2px 4px rgba(0,0,0,.4), 0 6px 30px rgba(0,0,0,.5); animation: cf-fadeUp .8s ease-out .4s both; }
.banner-content h1 strong { font-weight: 800; background: linear-gradient(100deg, #C4B5FD 0%, #67E8F9 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 2px 10px rgba(0,0,0,.55)); }
.banner .banner-list { padding-top: 6px !important; list-style: none !important; margin: 0 !important; padding-left: 0 !important; display: flex; flex-direction: column; gap: 13px; }
.banner .banner-list li { padding: 0 0 0 38px !important; position: relative; animation: cf-fadeUp .8s ease-out both; }
.banner .banner-list li:nth-child(1) { animation-delay: .52s; }
.banner .banner-list li:nth-child(2) { animation-delay: .62s; }
.banner .banner-list li:nth-child(3) { animation-delay: .72s; }
.banner .banner-list li::before { content: ''; position: absolute; left: 0; top: 1px; width: 23px; height: 23px; border-radius: 7px; background: var(--grad-accent); box-shadow: 0 6px 16px rgba(14,165,233,.4); }
.banner .banner-list li::after { content: '\2713'; position: absolute; left: 6px; top: 2px; color: #fff; font-size: 12px; font-weight: 800; }
.banner .banner-list li p { color: rgba(255,255,255,.94) !important; font-size: 14.5px !important; font-weight: 400 !important; line-height: 1.5 !important; margin: 0 !important; }
.banner .banner-list li strong { color: #fff !important; font-weight: 700 !important; }

/* Inner-page banner — slim centered band */
.banner.inner-banner { min-height: 360px; text-align: center; background-position: center !important; }
.banner.inner-banner::before { width: 100%; -webkit-clip-path: none; clip-path: none; background: linear-gradient(120deg, rgba(26,18,51,.92), rgba(67,56,202,.86) 55%, rgba(6,182,212,.62)); }
.banner.inner-banner::after { display: none; }
.banner.inner-banner .row { min-height: 260px; }
.banner.inner-banner .row.justify-content-end { justify-content: center !important; }
.banner.inner-banner h2 { color: #fff !important; font-size: calc(28px + (46 - 28) * (100vw - 320px) / (1920 - 320)) !important; font-weight: 800 !important; letter-spacing: -0.5px; position: relative; display: inline-block; padding-bottom: 20px; animation: cf-slideUp .8s ease-out both; }
.banner.inner-banner h2::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 70px; height: 4px; border-radius: 4px; background: var(--grad-accent); }

.banner .shapes { opacity: .22; animation: cf-float 7s ease-in-out infinite; }
.banner .shapes.position-2 { animation-delay: 2s; }
.banner .shapes.position-3 { animation-delay: 4s; }
@keyframes cf-float { 0%,100%{transform:translateY(0) rotate(0);} 50%{transform:translateY(-22px) rotate(6deg);} }

@media (max-width: 991px) {
    .banner { min-height: 520px; background-position: center !important; }
    .banner::before { background: linear-gradient(160deg, rgba(20,14,42,.94) 0%, rgba(45,32,120,.86) 60%, rgba(20,14,42,.8) 100%); }
    .banner .row { min-height: 440px; }
    .banner .col-lg-6 { max-width: 100% !important; }
}
@media (max-width: 767px) {
    .banner { min-height: 500px; }
    .banner-content h1 { font-size: 30px !important; }
    .banner-content h2 { font-size: 17px !important; }
    .banner .banner-list li p { font-size: 14px !important; }
}

/* ============================================================
   SECTION RHYTHM + HEADINGS
   ============================================================ */
.stripe { position: relative; overflow: hidden; padding: 96px 0; }
.stripe > .container { position: relative; z-index: 1; }
/* default plain section = features section */
section.stripe:not(.bg-gradient):not(.about-parallax):not(.cta-sec):not(.form-sec-new):not(.service-sec):not(.about-sec):not(.inner) { background: var(--bg); }

.top-heading { padding-bottom: 52px !important; position: relative; }
.top-heading h3 { font-size: calc(20px + (32 - 20) * (100vw - 320px) / (1920 - 320)) !important; font-weight: 800 !important; letter-spacing: -0.4px; color: var(--ink) !important; line-height: 1.25; }
.top-heading h3 strong { font-weight: 800 !important; background: var(--grad-primary); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.bdr-line::before { display: none !important; }
.top-heading.text-center::after { content: ''; display: block; width: 70px; height: 4px; margin: 20px auto 0; background: var(--grad-line); border-radius: 4px; }

/* ============================================================
   FEATURES — Bento grid (gradient intro tile + varied cards)
   ============================================================ */
.features-bento .bento { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: auto; gap: 22px; }

/* Intro tile — filled gradient, spans tall on the left */
.bento-intro { grid-column: span 2; grid-row: span 2; background: var(--grad-primary); color: #fff; border-radius: 24px; padding: 46px 36px; display: flex; flex-direction: column; justify-content: center; position: relative; overflow: hidden; box-shadow: 0 22px 46px rgba(124,58,237,.28); }
.bento-intro::before { content: ''; position: absolute; right: -60px; bottom: -70px; width: 230px; height: 230px; background: radial-gradient(circle, rgba(34,211,238,.4), transparent 62%); pointer-events: none; }
.bento-intro::after { content: ''; position: absolute; left: -46px; top: -50px; width: 170px; height: 170px; background: radial-gradient(circle, rgba(255,255,255,.14), transparent 62%); pointer-events: none; }
.bento-eyebrow { position: relative; z-index: 1; align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; color: #fff; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.26); padding: 7px 15px; border-radius: 30px; margin-bottom: 22px; }
.bento-eyebrow::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--accent-2); box-shadow: 0 0 10px rgba(34,211,238,.8); }
.bento-intro h3 { position: relative; z-index: 1; color: #fff !important; font-size: calc(21px + (32 - 21) * (100vw - 320px) / (1920 - 320)) !important; font-weight: 800 !important; line-height: 1.24; letter-spacing: -0.4px; margin: 0; }
.bento-intro h3 strong { color: var(--accent-2) !important; -webkit-text-fill-color: var(--accent-2) !important; background: none !important; font-weight: 800 !important; }

/* Feature cards (markup: .col-lg-4 > .box-wrap.sty1) */
.bento > .col-lg-4 { grid-column: span 2; flex: none !important; max-width: none !important; padding: 0 !important; display: flex; }
.bento > *:nth-child(2) { grid-column: span 4; }   /* first card = wide */
.bento > .col-lg-4 > .box-wrap.sty1 { width: 100%; margin: 0 !important; background: #fff !important; border: 1px solid var(--border) !important; border-radius: 24px !important; padding: 32px 30px !important; box-shadow: var(--shadow-sm) !important; position: relative; overflow: hidden; text-align: left !important; transition: transform .4s cubic-bezier(.22,.61,.36,1), box-shadow .4s ease; }
.bento > .col-lg-4 > .box-wrap.sty1::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--grad-line); transform: scaleY(0); transform-origin: top; transition: transform .45s ease; }
.bento > .col-lg-4:hover > .box-wrap.sty1 { transform: translateY(-7px); box-shadow: var(--shadow-lg) !important; }
.bento > .col-lg-4:hover > .box-wrap.sty1::after { transform: scaleY(1); }
.bento > *:nth-child(2) > .box-wrap.sty1 { display: flex; align-items: center; gap: 28px; }   /* horizontal */
.box-wrap.sty1 .box-ic { width: 64px !important; height: 64px !important; min-width: 64px; margin: 0 0 20px !important; padding: 0 !important; border-radius: 18px; display: flex; align-items: center; justify-content: center; background: var(--grad-primary); box-shadow: 0 12px 26px rgba(124,58,237,.3); transition: transform .4s ease; }
.bento > *:nth-child(2) .box-ic { margin: 0 !important; }
.bento > .col-lg-4:hover .box-ic { transform: rotate(-8deg) scale(1.06); }
.box-wrap.sty1 .box-ic i { font-size: 27px !important; color: #fff !important; -webkit-text-fill-color: #fff !important; background: none !important; -webkit-background-clip: border-box !important; background-clip: border-box !important; }
.box-wrap.sty1 .box-text h5 { font-size: 18.5px !important; font-weight: 800 !important; margin-bottom: 9px !important; color: var(--ink) !important; letter-spacing: -0.2px; }
.box-wrap.sty1 .box-text p { font-size: 14px !important; color: var(--text) !important; line-height: 1.72 !important; margin: 0; }
.bento > *:nth-child(3) .box-ic { background: var(--grad-accent) !important; box-shadow: 0 12px 26px rgba(14,165,233,.3); }
.bento > *:nth-child(3) > .box-wrap.sty1::after { background: linear-gradient(180deg, #06B6D4, #7C3AED); }
.bento > *:nth-child(4) .box-ic { background: linear-gradient(135deg, #5B34E0, #0EA5E9) !important; }

@media (max-width: 991px) {
    .features-bento .bento { grid-template-columns: 1fr 1fr; }
    .bento-intro { grid-column: 1 / -1; grid-row: auto; padding: 36px 30px; }
    .bento > *:nth-child(2) { grid-column: 1 / -1; }
    .bento > *:nth-child(2) > .box-wrap.sty1 { display: block; }
    .bento > *:nth-child(2) .box-ic { margin: 0 0 20px !important; }
    .bento > .col-lg-4 { grid-column: span 1; }
}
@media (max-width: 600px) {
    .features-bento .bento { grid-template-columns: 1fr; }
    .bento > * { grid-column: 1 / -1 !important; }
}

/* ============================================================
   STEPS — Horizontal connected stepper (light band)
   ============================================================ */
.bg-gradient { background: linear-gradient(135deg, #F3F1FE 0%, #EAF7FB 100%) !important; position: relative; }
.bg-gradient .top-heading h3 { color: var(--ink) !important; }
.bg-gradient .top-heading h3 strong { background: var(--grad-primary); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent !important; }
.bg-gradient .top-heading.bdr-line::after { display: none !important; }
.bg-gradient .top-heading.text-center::after { display: block; }

.bg-gradient .row { display: flex !important; flex-wrap: wrap; position: relative; }
.bg-gradient .row > .col-lg-4 { display: flex; }
@media (min-width: 992px) {
    .bg-gradient .row::before { content: ''; position: absolute; top: 42px; left: 18%; right: 18%; height: 3px; background: linear-gradient(90deg, var(--primary), var(--accent)); opacity: .35; z-index: 0; border-radius: 3px; }
}
.steps-arrow::before, .steps-arrow::after { display: none !important; content: none !important; border: none !important; }

.steps-wrap {
    position: relative; width: 100%; z-index: 1;
    background: transparent !important; border: none !important; box-shadow: none !important;
    padding: 0 18px !important; display: flex !important; flex-direction: column !important;
    align-items: center !important; text-align: center; gap: 0;
}
.steps-wrap .steps-ic {
    width: 84px !important; height: 84px !important; min-width: 84px !important; border-radius: 50% !important;
    margin: 0 auto 20px !important; display: flex; align-items: center; justify-content: center;
    background: var(--grad-primary) !important; color: #fff;
    border: 6px solid var(--bg-lavender);
    box-shadow: 0 14px 30px rgba(124,58,237,.28); position: relative; transition: transform .4s ease;
}
.steps-wrap .steps-ic.bgc-iSecondary { background: var(--grad-accent) !important; box-shadow: 0 14px 30px rgba(14,165,233,.28); }
.steps-wrap .steps-ic i { font-size: 30px !important; color: #fff !important; }
.steps-wrap:hover .steps-ic { transform: translateY(-6px) scale(1.05); }
.steps-wrap .steps-ic::after { position: absolute; top: -8px; right: -8px; width: 30px; height: 30px; border-radius: 50%; background: #fff; color: var(--primary); font-weight: 800; font-size: 14px; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 14px rgba(26,18,51,.14); border: 1px solid var(--border); }
.col-lg-4:nth-child(1) .steps-wrap .steps-ic::after { content: "1"; }
.col-lg-4:nth-child(2) .steps-wrap .steps-ic::after { content: "2"; }
.col-lg-4:nth-child(3) .steps-wrap .steps-ic::after { content: "3"; }
.steps-wrap .steps-text { text-align: center !important; }
.steps-wrap .steps-text h4 { font-size: 19px !important; font-weight: 800 !important; margin-bottom: 8px !important; color: var(--ink) !important; }
.steps-wrap .steps-text p { font-size: 14px !important; line-height: 1.7 !important; color: var(--text) !important; margin: 0; max-width: 300px; }
.col-lg-4 .steps-wrap::after { display: none !important; content: none !important; }
@media (max-width: 991px) { .steps-wrap { margin-bottom: 34px !important; } }

/* ============================================================
   ABOUT / PARALLAX — left-aligned glass card
   ============================================================ */
.about-parallax { position: relative; background-size: cover !important; background-position: center !important; background-attachment: fixed !important; background-repeat: no-repeat !important; padding: 120px 0 !important; overflow: hidden; }
.about-parallax-overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(120deg, rgba(26,18,51,.9) 0%, rgba(67,56,202,.7) 55%, rgba(6,182,212,.45) 100%); }
.about-parallax .container { position: relative; z-index: 2; }
.about-parallax-content { margin: 0; max-width: 580px; text-align: left; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.2); border-left: 5px solid var(--accent-2); border-radius: 20px; padding: 44px 42px; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 30px 60px rgba(0,0,0,.28); }
.about-parallax-content h4 { color: #fff !important; font-size: calc(24px + (36 - 24) * (100vw - 320px) / (1920 - 320)) !important; font-weight: 800 !important; margin-bottom: 12px !important; position: relative; display: inline-block; padding-bottom: 18px; letter-spacing: -0.4px; }
.about-parallax-content h4::after { content: ''; position: absolute; bottom: 0; left: 0; width: 56px; height: 4px; border-radius: 4px; background: var(--grad-accent); }
.about-parallax-content p { color: rgba(255,255,255,.92) !important; font-size: 15.5px !important; line-height: 1.9 !important; margin-top: 18px !important; font-weight: 300; }
@media (max-width: 991px) { .about-parallax { background-attachment: scroll !important; padding: 64px 0 !important; } .about-parallax-content { max-width: 100%; padding: 32px 26px; } }

/* ============================================================
   CONTACT FORM — centered card, gradient header, chips
   (new markup: .form-panel / .form-panel-head / .fph-*)
   ============================================================ */
.form-sec-new { background: linear-gradient(160deg, #ECEBFB 0%, #E7F1FB 100%) !important; padding: 96px 0 !important; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.form-panel { max-width: 940px; margin: 0 auto; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); overflow: hidden; }
.form-panel-head { background: var(--grad-cta); padding: 36px 46px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; position: relative; overflow: hidden; }
.form-panel-head::after { content: ''; position: absolute; right: -60px; top: -60px; width: 220px; height: 220px; background: radial-gradient(circle, rgba(255,255,255,.16), transparent 62%); pointer-events: none; }
.fph-text { position: relative; z-index: 1; }
.form-panel-head h4 { color: #fff !important; font-size: 27px !important; font-weight: 800 !important; margin: 0 0 6px !important; letter-spacing: -0.3px; }
.form-panel-head .form-subtitle { color: rgba(255,255,255,.85) !important; font-size: 14.5px !important; margin: 0 !important; }
.fph-contact { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 10px; }
.fph-contact a { display: flex; align-items: center; gap: 10px; color: #fff !important; font-size: 14px; text-decoration: none; padding: 8px 16px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22); border-radius: 40px; transition: background .3s ease, transform .3s ease; }
.fph-contact a:hover { background: rgba(255,255,255,.22); transform: translateY(-2px); }
.fph-contact a i { font-size: 14px; }
.form-panel-body { padding: 40px 46px 44px; }

.form-sec-new .field-wrap { margin-bottom: 16px; }
.form-sec-new .field-wrap > label { display: block; font-size: 13px; font-weight: 600; color: var(--ink-soft); margin-bottom: 7px; letter-spacing: .2px; }
.form-sec-new .field-wrap .form-control { border: 1.5px solid var(--border-2) !important; border-radius: 12px !important; padding: 12px 15px !important; font-size: 14px !important; background: var(--bg-tint) !important; color: var(--ink) !important; height: auto !important; transition: border-color .3s ease, box-shadow .3s ease, background-color .3s ease; }
.form-sec-new .field-wrap .form-control::placeholder { color: #a9a7be; font-size: 13px; }
.form-sec-new .field-wrap .form-control:focus { border-color: var(--primary) !important; box-shadow: 0 0 0 4px rgba(124,58,237,.10); background-color: #fff !important; outline: none; }
.form-sec-new .checkbox-wrap { display: flex; align-items: flex-start; gap: 9px; margin-bottom: 8px; }
.form-sec-new .checkbox-wrap label { font-size: 13px; color: var(--text); cursor: pointer; }
.form-sec-new .note { font-size: 11px !important; color: var(--muted) !important; line-height: 1.55 !important; margin-bottom: 12px !important; }
.form-sec-new .note a { color: var(--primary) !important; }
.form-sec-new .btn-wrap { text-align: center; }

.btn-primary, .form-sec-new .btn-wrap .btn-primary { background: var(--grad-primary) !important; background-image: var(--grad-primary) !important; border: none !important; border-color: transparent !important; border-radius: 40px !important; padding: 14px 46px !important; font-size: 15px !important; font-weight: 700 !important; letter-spacing: .3px; color: #fff !important; text-transform: none !important; box-shadow: 0 10px 26px rgba(124,58,237,.3); transition: transform .3s ease, box-shadow .3s ease, filter .3s ease; }
.btn-primary:hover, .form-sec-new .btn-wrap .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 34px rgba(124,58,237,.42); filter: brightness(1.06); color: #fff !important; }

.form-status { padding: 11px 15px; border-radius: 10px; font-size: 13px; font-weight: 500; margin-bottom: 14px; }
.form-status-success { background: #e8faf1; color: #0f8a54; border: 1px solid #bdecd3; }
.form-status-error { background: #fdf0f2; color: #c8324a; border: 1px solid #f8ccd4; }
.form-sec-new .field-wrap .form-control.is-invalid { border-color: #e53e3e !important; }

@media (max-width: 767px) { .form-panel-head { padding: 28px 26px; } .form-panel-body { padding: 28px 24px; } .fph-contact { width: 100%; } }

/* ============================================================
   SERVICE (product pages) — 3-up numbered card grid
   (new markup: .service-grid / .svc-card / .svc-img / .svc-num / .svc-body)
   ============================================================ */
.service-sec { background: var(--bg-soft) !important; }
.service-grid { display: flex; flex-wrap: wrap; }
.service-grid > .col-lg-4 { display: flex; margin-bottom: 26px; }
.svc-card { width: 100%; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform .4s cubic-bezier(.22,.61,.36,1), box-shadow .4s ease; display: flex; flex-direction: column; }
.svc-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); }
.svc-img { position: relative; height: 210px; overflow: hidden; }
.svc-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s ease; }
.svc-card:hover .svc-img img { transform: scale(1.07); }
.svc-img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(26,18,51,0) 45%, rgba(26,18,51,.4)); }
.svc-num { position: absolute; left: 20px; bottom: 16px; z-index: 1; width: 52px; height: 52px; border-radius: 14px; background: var(--grad-primary); color: #fff; font-size: 20px; font-weight: 800; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 24px rgba(124,58,237,.4); }
.service-grid > .col-lg-4:nth-child(2) .svc-num { background: var(--grad-accent); box-shadow: 0 10px 24px rgba(14,165,233,.4); }
.service-grid > .col-lg-4:nth-child(3) .svc-num { background: linear-gradient(135deg,#5B34E0,#0EA5E9); }
.svc-body { padding: 26px 26px 30px; flex: 1; }
.svc-body p { font-size: 14px !important; line-height: 1.8 !important; color: var(--text) !important; margin: 0 !important; }
@media (max-width: 991px) { .service-grid > .col-lg-4 { flex: 0 0 100% !important; max-width: 100% !important; } }

/* about-sec (product intro headings, if used) */
.about-sec .section-content h4 { font-size: calc(20px + (32 - 20) * (100vw - 320px) / (1920 - 320)) !important; color: var(--ink) !important; }
.about-sec .section-content p { font-size: calc(14px + (16 - 14) * (100vw - 320px) / (1920 - 320)) !important; line-height: 1.85 !important; color: var(--text) !important; }

/* ============================================================
   CTA — contained rounded gradient card on light section
   ============================================================ */
.cta-sec { background: var(--bg) !important; background-image: none !important; padding: 70px 0 !important; }
.cta-sec::before { display: none !important; content: none !important; }
.cta-sec > .container { position: relative; z-index: 1; background: var(--grad-cta); border-radius: 30px; padding: 66px 50px; overflow: hidden; box-shadow: var(--shadow-lg); }
.cta-sec > .container::before { content: ''; position: absolute; right: -80px; top: -80px; width: 300px; height: 300px; background: radial-gradient(circle, rgba(255,255,255,.16), transparent 62%); pointer-events: none; }
.cta-sec > .container::after { content: ''; position: absolute; left: -70px; bottom: -90px; width: 280px; height: 280px; background: radial-gradient(circle, rgba(34,211,238,.22), transparent 62%); pointer-events: none; }
.cta-sec .section-content { position: relative; z-index: 1; }
.cta-sec .section-content h3 { font-size: calc(22px + (34 - 22) * (100vw - 320px) / (1920 - 320)) !important; letter-spacing: -0.4px; color: #fff !important; font-weight: 800 !important; }
.cta-sec .section-content p { font-size: calc(14px + (17 - 14) * (100vw - 320px) / (1920 - 320)) !important; line-height: 1.75 !important; color: rgba(255,255,255,.92) !important; margin: 18px auto 0; max-width: 780px; }

/* ============================================================
   INNER PAGES (privacy / terms)
   ============================================================ */
.stripe.inner { background: var(--bg); }
.stripe.inner > .container { max-width: 900px; }
.stripe.inner h2 { font-size: calc(22px + (30 - 22) * (100vw - 320px) / (1920 - 320)) !important; font-weight: 800 !important; color: var(--ink) !important; margin-bottom: 18px; letter-spacing: -0.3px; }
.stripe.inner h4 { font-size: 19px !important; font-weight: 700 !important; color: var(--ink) !important; margin: 30px 0 12px; padding-left: 16px; position: relative; }
.stripe.inner h4::before { content: ''; position: absolute; left: 0; top: 4px; bottom: 4px; width: 4px; border-radius: 4px; background: var(--grad-line); }
.stripe.inner p { font-size: 14.5px; line-height: 1.85; color: var(--text); margin-bottom: 14px; }
.stripe.inner a { color: var(--primary); font-weight: 600; }
.stripe.inner strong { color: var(--ink-soft); }
.listingterms { background: var(--bg-soft); border: 1px solid var(--border); border-left: 4px solid var(--primary); border-radius: 14px; padding: 22px 26px; margin: 20px 0 26px; }
.listingterms ul { list-style: none !important; padding: 0 !important; margin: 0 !important; }
.listingterms ul li { position: relative; padding: 7px 0 7px 26px; font-size: 14px; color: var(--text); line-height: 1.6; }
.listingterms ul li::before { content: ''; position: absolute; left: 0; top: 14px; width: 9px; height: 9px; border-radius: 50%; background: var(--grad-accent); }
.listingterms ul li strong { color: var(--ink-soft); }

/* ============================================================
   FOOTER — deep violet gradient
   ============================================================ */
.footer-modern { background: linear-gradient(150deg, #211A3B 0%, #14102A 100%) !important; color: #fff; position: relative; overflow: hidden; }
.footer-modern::before { content: ''; position: absolute; top: -120px; left: -80px; width: 380px; height: 380px; background: radial-gradient(circle, rgba(124,58,237,.28), transparent 65%); pointer-events: none; }
.footer-modern::after { content: ''; position: absolute; bottom: -120px; right: -60px; width: 360px; height: 360px; background: radial-gradient(circle, rgba(6,182,212,.2), transparent 65%); pointer-events: none; }
.footer-top { padding: 74px 0 46px !important; position: relative; z-index: 1; }
.footer-brand .footer-logo { display: inline-block; margin-bottom: 20px; }
.footer-brand .footer-logo img { max-height: 52px; }
.footer-brand .footer-desc { color: rgba(255,255,255,.6) !important; font-size: 14px !important; line-height: 1.8 !important; max-width: 300px; margin: 0 !important; }
.footer-widget h5 { color: #fff !important; font-size: 15px !important; font-weight: 700 !important; margin-bottom: 22px !important; position: relative; padding-bottom: 12px; text-transform: none !important; letter-spacing: 0 !important; }
.footer-widget h5::after { content: ''; position: absolute; bottom: 0; left: 0; width: 34px; height: 3px; background: var(--grad-line); border-radius: 3px; }
.footer-widget ul { list-style: none !important; padding: 0 !important; margin: 0 !important; }
.footer-widget ul li { margin-bottom: 11px; }
.footer-widget ul li a { color: rgba(255,255,255,.6) !important; font-size: 14px !important; text-decoration: none !important; transition: color .3s ease, padding-left .3s ease; display: inline-block; }
.footer-widget ul li a:hover { color: #fff !important; padding-left: 5px; }
.footer-contact li a { display: flex !important; align-items: center; gap: 11px; }
.footer-contact li a i { color: var(--accent-2); font-size: 15px; flex-shrink: 0; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.12); padding: 20px 0; position: relative; z-index: 1; }
.footer-bottom-inner { display: flex; align-items: center; justify-content: center; }
.footer-bottom-inner p { color: rgba(255,255,255,.5) !important; font-size: 13px !important; margin: 0 !important; }

/* Popup */
.popup.popup-style1 { border-radius: var(--radius) !important; box-shadow: var(--shadow-lg); }
.popup.popup-style1 .logo-wrap img { max-height: 50px; }

/* Scrollbar */
::-webkit-scrollbar { width: 9px; }
::-webkit-scrollbar-track { background: #f1eefb; }
::-webkit-scrollbar-thumb { background: var(--grad-primary); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { filter: brightness(1.1); }

/* ============================================================
   ANIMATED DECORATIVE SHAPES
   ============================================================ */
.animated-shapes { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; pointer-events: none; z-index: 0; }
.shape { position: absolute; opacity: .1; }
.shape.circle { border-radius: 50%; background: var(--grad-primary); }
.shape.circle-1 { width: 80px; height: 80px; top: 10%; left: 5%; animation: cf-f1 8s ease-in-out infinite; }
.shape.circle-2 { width: 120px; height: 120px; top: 60%; right: 8%; animation: cf-f2 10s ease-in-out infinite; background: var(--grad-accent); }
.shape.circle-3 { width: 60px; height: 60px; bottom: 15%; left: 10%; animation: cf-f3 7s ease-in-out infinite; }
.shape.square { background: linear-gradient(135deg, rgba(124,58,237,.16), rgba(6,182,212,.16)); border-radius: 14px; transform: rotate(45deg); }
.shape.square-1 { width: 100px; height: 100px; top: 25%; right: 5%; animation: cf-rot 14s linear infinite; }
.shape.square-2 { width: 70px; height: 70px; bottom: 20%; right: 12%; animation: cf-rot 17s linear infinite reverse; }
.shape.triangle { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 90px solid rgba(124,58,237,.12); }
.shape.triangle-1 { top: 40%; left: 3%; animation: cf-f1 9s ease-in-out infinite; }
.shape.dots { width: 150px; height: 150px; background-image: radial-gradient(circle, rgba(124,58,237,.26) 2px, transparent 2px); background-size: 20px 20px; }
.shape.dots-1 { top: 5%; right: 15%; animation: cf-f2 11s ease-in-out infinite; }
.shape.dots-2 { bottom: 10%; left: 8%; animation: cf-f3 13s ease-in-out infinite; }
.shape.blob { border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%; background: linear-gradient(135deg, rgba(124,58,237,.12), rgba(6,182,212,.12)); }
.shape.blob-1 { width: 200px; height: 200px; top: 15%; right: 3%; animation: cf-blob 15s ease-in-out infinite; }
.shape.blob-2 { width: 180px; height: 180px; bottom: 25%; left: 5%; animation: cf-blob 18s ease-in-out infinite reverse; }
@keyframes cf-f1 { 0%,100%{transform:translate(0,0);} 25%{transform:translate(10px,-20px);} 50%{transform:translate(-10px,-40px);} 75%{transform:translate(10px,-20px);} }
@keyframes cf-f2 { 0%,100%{transform:translate(0,0);} 33%{transform:translate(-15px,20px);} 66%{transform:translate(15px,-30px);} }
@keyframes cf-f3 { 0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(20px,-25px) scale(1.1);} }
@keyframes cf-rot { 0%{transform:rotate(0) translateY(0);} 50%{transform:rotate(180deg) translateY(0);} 100%{transform:rotate(360deg) translateY(0);} }
@keyframes cf-blob { 0%,100%{ border-radius:40% 60% 70% 30% / 40% 50% 60% 50%; transform:rotate(0);} 50%{ border-radius:30% 70% 40% 60% / 50% 60% 30% 60%; transform:rotate(180deg);} }
@media (max-width: 767px) { .animated-shapes { display: none; } }

/* ============================================================
   MOBILE NAV / RESPONSIVE
   ============================================================ */
@media (max-width: 991px) {
    .header-topbar { display: none; }
    .header { padding: 12px 0 !important; position: sticky; top: 0; z-index: 1001; }
    .header .container { padding: 0 20px; max-width: 100%; }
    .header .fflex { display: flex; align-items: center; justify-content: space-between; width: 100%; position: relative; gap: 15px; }
    .header, .header * { box-sizing: border-box; }
    .header .logo { flex: 0 0 auto; display: flex; align-items: center; }
    .header .logo img { max-height: 40px !important; height: auto; width: auto; }

    .nav-hamburger { display: block !important; width: 30px; height: 24px; cursor: pointer; z-index: 1000; position: relative; padding: 0; margin: 0; flex: 0 0 auto; -webkit-tap-highlight-color: transparent; background: transparent; border: none; }
    .nav-hamburger:active { opacity: .7; }
    .nav-hamburger span { display: block; height: 2.5px; width: 100%; background: var(--primary); border-radius: 3px; transition: all .25s ease-in-out; position: absolute; left: 0; transform-origin: center center; }
    .nav-hamburger span:nth-child(1) { top: 0; }
    .nav-hamburger span:nth-child(2) { top: 11px; }
    .nav-hamburger span:nth-child(3) { top: 22px; }
    .nav-hamburger span:nth-child(4), .nav-hamburger span:nth-child(5), .nav-hamburger span:nth-child(6) { display: none !important; }
    .nav-hamburger.is--active span:nth-child(1) { top: 11px; transform: rotate(45deg); }
    .nav-hamburger.is--active span:nth-child(3) { top: 11px; transform: rotate(-45deg); }

    .navigation, .header .navigation { position: fixed !important; top: 0 !important; left: -100% !important; width: 300px !important; height: 100vh !important; max-height: 100vh !important; background: linear-gradient(160deg, #211A3B, #14102A) !important; z-index: 999 !important; padding-top: 74px !important; padding-bottom: 20px !important; overflow-y: auto !important; overflow-x: hidden !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: flex-start !important; transition: left .4s cubic-bezier(.4,0,.2,1) !important; box-shadow: 6px 0 40px rgba(0,0,0,.5) !important; }
    .navigation.is--open, .header .navigation.is--open { left: 0 !important; }
    .navigation > ul { width: 100% !important; display: flex !important; flex-direction: column !important; padding: 0 !important; margin: 0 !important; }
    .navigation > ul > li { width: 100% !important; border-bottom: 1px solid rgba(255,255,255,.06); margin: 0 !important; }
    .navigation > ul > li > a { color: rgba(255,255,255,.9) !important; padding: 16px 22px !important; font-size: 15px !important; font-weight: 600 !important; justify-content: space-between !important; align-items: center !important; width: 100%; display: flex !important; text-decoration: none; transition: all .3s ease !important; min-height: 48px; -webkit-tap-highlight-color: transparent; }
    .navigation > ul > li > a::after, .navigation > ul > li > a::before { display: none !important; }
    .navigation > ul > li.dropdown > a { position: relative; }
    .navigation > ul > li.dropdown > a > i { margin-left: auto; color: var(--accent-2) !important; }
    .navigation > ul > li:hover > a, .navigation > ul > li.is--active > a { color: #fff !important; background: rgba(124,58,237,.22); }
    .navigation .dropdown ul { position: static !important; opacity: 1 !important; visibility: visible !important; border-radius: 0 !important; box-shadow: none !important; background: rgba(255,255,255,.04) !important; border: none !important; border-top: 1px solid rgba(255,255,255,.05) !important; padding: 0 !important; margin: 0 !important; min-width: 0 !important; max-height: 0; overflow: hidden; transition: max-height .4s cubic-bezier(.4,0,.2,1), padding .4s ease; display: block !important; }
    .navigation .dropdown.is--active > ul { max-height: 600px; padding: 6px 0 !important; }
    .navigation .dropdown.is--active > a > i { transform: rotate(180deg); }
    .navigation .dropdown ul li { min-width: 0 !important; width: 100% !important; border-bottom: 1px solid rgba(255,255,255,.04); }
    .navigation .dropdown ul li:last-child { border-bottom: none; }
    .navigation .dropdown ul li a, .navigation .dropdown ul a { color: rgba(255,255,255,.72) !important; padding: 13px 22px 13px 42px !important; font-size: 13.5px !important; font-weight: 500 !important; border-left: 3px solid transparent !important; background: transparent !important; display: block !important; transition: all .3s ease !important; position: relative; min-height: 44px; border-radius: 0; }
    .navigation .dropdown ul li a::before { content: '\203A'; position: absolute; left: 26px; top: 50%; transform: translateY(-50%); font-size: 18px; opacity: .5; transition: all .3s ease; }
    .navigation .dropdown ul li a:hover, .navigation .dropdown ul a:hover { color: #fff !important; background: rgba(124,58,237,.16) !important; border-left-color: var(--accent-2) !important; padding-left: 46px !important; }
    .navigation .dropdown ul li a:hover::before { opacity: 1; left: 30px; }
    .navigation .dropdown ul li.is--active a { color: #fff !important; font-weight: 600 !important; border-left-color: var(--accent-2) !important; background: rgba(124,58,237,.16) !important; }
    .navigation .gesture-nav { width: 100% !important; padding: 22px !important; background: none !important; margin: 10px 0 0 !important; border-top: 1px solid rgba(255,255,255,.1); }
    .navigation .gesture-nav::before { display: none !important; content: none !important; }
    .navigation .gesture-nav li { width: 100% !important; border: none !important; }
    .header-cta-btn { display: block !important; text-align: center !important; padding: 14px 24px !important; border-radius: 40px !important; font-size: 14px !important; font-weight: 700 !important; width: 100% !important; }
    body.is--menu { overflow: hidden; height: 100vh; }
    .defaultOverlay { position: fixed; inset: 0; width: 100%; height: 100vh; background: rgba(16,12,32,.6) !important; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); z-index: 998; opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility .3s ease; }
    body.is--menu .defaultOverlay { opacity: 1; visibility: visible; }
    .navigation::-webkit-scrollbar { width: 4px; }
    .navigation::-webkit-scrollbar-thumb { background: rgba(124,58,237,.5); border-radius: 10px; }

    .stripe { padding: 60px 0; }
    .footer-brand { margin-bottom: 30px; }
    .footer-widget { margin-bottom: 26px; }
}

@media (max-width: 767px) {
    .bento-card:hover, .steps-wrap:hover, .svc-card:hover { transform: none; }
    .top-heading h3 { font-size: 20px !important; }
    .form-sec-new .col-md-6 { flex: 0 0 100% !important; max-width: 100% !important; }
    .header .logo img { max-height: 36px !important; }
    .navigation { width: 284px !important; }
    .stripe { padding: 50px 0; }
    .cta-sec { padding: 50px 0 !important; }
    .cta-sec > .container { padding: 44px 26px; border-radius: 22px; }
}