/* ==========================================================================
Stark - FAQ Page Widget Styles
========================================================================== */
/* Google Fonts (moved here from the old tag in the widget) */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Inter:wght@400;500;600&display=swap');
/* --- Root & resets --- */
.fq-wrap { --fq-c1: #2EE27A; --fq-c2: #28B45A; --fq-line: rgba(255,255,255,.05); --fq-glow1: rgba(46, 226, 122, 0.15); --fq-glow2: rgba(12, 21, 38, 0.8); --fq-ov: .85; --fq-sbg: .15; position: relative; overflow: hidden; overflow: clip; background: #04070d; color: #fff; font-family: 'Inter', sans-serif; }
.fq-wrap * { box-sizing: border-box; }
.fq-wrap a, .fq-wrap a:hover, .fq-wrap a:focus { text-decoration: none; }
.fq-wrap h1, .fq-wrap h2, .fq-wrap h3, .fq-wrap p { margin: 0; }
.fq-wrap button { font: inherit; }
/* --- Banner --- */
.fq-wrap .fq-banner { position: relative; display: flex; align-items: center; justify-content: center; text-align: center; min-height: 262px; overflow: hidden; background: #050709; isolation: isolate; }
.fq-wrap .fq-bn-bg { position: absolute; inset: -6%; z-index: -4; background-size: cover; background-position: center; background-color: #070a10; background-image: radial-gradient(ellipse 50% 70% at 50% 100%, color-mix(in srgb, var(--fq-c1) 22%, transparent), transparent 70%), repeating-linear-gradient(115deg, #05070b 0, #05070b 18px, #0b1118 18px, #0b1118 36px); animation: fqKen 24s ease-in-out infinite alternate; }
.fq-wrap .fq-bn-bg.has-img { inset: 0; }
.fq-wrap .fq-bn-ov { position: absolute; inset: 0; z-index: -3; background: #04070d; opacity: var(--fq-ov); pointer-events: none; }
.fq-wrap .fq-bn-fade { position: absolute; inset: 0; z-index: -2; pointer-events: none; background: linear-gradient(180deg, rgba(4,7,13,.35) 0, transparent 35%, rgba(4,7,13,.85) 100%); }
.fq-wrap .fq-bn-dots { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.fq-wrap .fq-bn-dots i { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: var(--fq-c1); box-shadow: 0 0 12px var(--fq-c1); opacity: 0; animation: fqDrift 7s ease-in-out infinite; }
.fq-wrap .fq-bn-inner { position: relative; padding: 36px 20px; }
.fq-wrap .fq-bn-title { color: #fff; font-family: 'Poppins', sans-serif; font-size: 30px; font-weight: 700; line-height: 1.2; perspective: 600px; }
.fq-wrap .fq-bn-title .w { display: inline-block; white-space: nowrap; }
.fq-wrap .fq-bn-title .ch { display: inline-block; }
.fq-wrap .fq-crumb { display: inline-flex; align-items: center; gap: 12px; margin-top: 18px; padding: 11px 26px; background: rgba(255,255,255,.07); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border-radius: 3px; color: #fff; font-size: 12px; font-weight: 500; }
.fq-wrap .fq-crumb a { color: #fff; transition: color .3s ease; }
.fq-wrap .fq-crumb a:hover { color: var(--fq-c1); }
.fq-wrap .fq-crumb-arrow { flex: none; width: 12px; height: 12px; }
.fq-wrap .fq-crumb .cur { color: var(--fq-c1); text-decoration: underline; text-underline-offset: 3px; }
/* --- Main section --- */
.fq-wrap .fq-main { position: relative; overflow: hidden; padding: 80px 0 100px; background: #04070d; }
.fq-wrap .fq-sbg { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center; opacity: var(--fq-sbg); pointer-events: none; -webkit-mask-image: radial-gradient(ellipse 90% 90% at 50% 50%, #000 30%, transparent 85%); mask-image: radial-gradient(ellipse 90% 90% at 50% 50%, #000 30%, transparent 85%); }
.fq-wrap .fq-glow { position: absolute; border-radius: 50%; pointer-events: none; filter: blur(34px); z-index: 0; }
.fq-wrap .fq-glow-1 { top: -6%; left: -4%; width: 760px; height: 760px; background: radial-gradient(circle, var(--fq-glow1), transparent 68%); }
.fq-wrap .fq-glow-2 { bottom: -14%; right: -10%; width: 760px; height: 760px; background: radial-gradient(circle, var(--fq-glow2), transparent 68%); }
.fq-wrap .fq-container { position: relative; z-index: 1; width: 92%; max-width: 1020px; margin-inline: auto; }
.fq-wrap .fq-grid { display: grid; grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr); gap: 44px 64px; align-items: start; }
/* --- Left column --- */
.fq-wrap .fq-left { position: relative; align-self: start; }
.fq-wrap .fq-blob { position: absolute; left: -40px; top: 240px; width: 380px; height: 380px; z-index: 0; pointer-events: none; opacity: .2; }
.fq-wrap .fq-blob g { fill: #0c1526; }
.fq-wrap .fq-blob circle { transform-box: fill-box; transform-origin: center; }
.fq-wrap .fq-heading, .fq-wrap .fq-desc, .fq-wrap .fq-left > div { position: relative; z-index: 1; }
.fq-wrap .fq-heading { color: #fff; font-family: 'Poppins', sans-serif; font-size: 36px; font-weight: 700; line-height: 1.2; }
.fq-wrap .fq-line { display: block; }
.fq-wrap .fq-heading .w { display: inline-block; }
.fq-wrap .fq-heading .w.acc { background: linear-gradient(90deg, var(--fq-c1), var(--fq-c2)); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.fq-wrap .fq-desc { max-width: 390px; margin-top: 28px; color: rgba(255,255,255,0.6); font-size: 13px; line-height: 1.75; }
.fq-wrap .fq-btn { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; height: 38px; margin-top: 36px; padding: 0 32px; border-radius: 999px; color: #04070d; font-family: 'Poppins', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: .8px; text-transform: uppercase; white-space: nowrap; background: linear-gradient(90deg, var(--fq-c1), var(--fq-c2)); box-shadow: 0 14px 28px -12px color-mix(in srgb, var(--fq-c2) 70%, transparent); transition: transform .3s ease, box-shadow .3s ease, filter .3s ease; }
.fq-wrap .fq-btn:hover { transform: translateY(-3px); filter: brightness(1.1); box-shadow: 0 20px 34px -12px color-mix(in srgb, var(--fq-c2) 80%, transparent); }
.fq-wrap .fq-btn:active { transform: translateY(0) scale(.97); }
.fq-wrap .fq-btn::after { content: ''; position: absolute; top: 0; left: -70%; width: 40%; height: 100%; pointer-events: none; background: linear-gradient(100deg, transparent, rgba(255,255,255,.5), transparent); transform: skewX(-20deg); animation: fqShine 4.5s ease-in-out 1.5s infinite; }
/* --- FAQ list --- */
.fq-wrap .fq-list { display: flex; flex-direction: column; gap: 10px; }
.fq-wrap .fq-item { position: relative; }
.fq-wrap .fq-q-h { margin: 0; }
.fq-wrap .fq-q { position: relative; overflow: hidden; display: flex; align-items: center; gap: 16px; width: 100%; margin: 0; padding: 16px 20px; text-align: left; cursor: pointer; outline: none; -webkit-appearance: none; appearance: none; background-color: #0c1526; border: 1px solid var(--fq-line); border-radius: 8px; color: #fff; transition: border-color .35s ease, transform .35s ease, box-shadow .35s ease, background-color .35s ease; }
.fq-wrap .fq-q::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .9; background: linear-gradient(100deg, transparent 38%, color-mix(in srgb, var(--fq-c1) 11%, transparent) 100%); transition: opacity .35s ease; }
.fq-wrap .fq-q::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .35s ease; background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--fq-c1) 16%, transparent), transparent 62%); }
.fq-wrap .fq-q:hover { transform: translateX(4px); border-color: color-mix(in srgb, var(--fq-c1) 38%, transparent); }
.fq-wrap .fq-q:hover::after { opacity: 1; }
.fq-wrap .fq-q:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--fq-c2) 40%, transparent); }
.fq-wrap .fq-item.is-open .fq-q { border-color: color-mix(in srgb, var(--fq-c1) 30%, transparent); box-shadow: 0 18px 40px -22px color-mix(in srgb, var(--fq-c1) 45%, transparent); }
/* --- Icon & question text --- */
.fq-wrap .fq-ic { position: relative; z-index: 1; flex: none; display: grid; place-items: center; width: 27px; height: 27px; border-radius: 3px; color: #04070d; background: linear-gradient(135deg, var(--fq-c1), var(--fq-c2)); transition: transform .45s cubic-bezier(.34,1.56,.64,1), box-shadow .35s ease; }
.fq-wrap .fq-ic svg { width: 13px; height: 13px; transition: transform .45s cubic-bezier(.34,1.56,.64,1); }
.fq-wrap .fq-q:hover .fq-ic { box-shadow: 0 0 18px -2px color-mix(in srgb, var(--fq-c1) 75%, transparent); }
.fq-wrap .fq-item.is-open .fq-ic svg { transform: rotate(90deg); }
.fq-wrap .fq-q-text { position: relative; z-index: 1; color: #fff; font-family: 'Poppins', sans-serif; font-size: 15px; font-weight: 600; line-height: 1.4; }
/* --- Answer --- */
.fq-wrap .fq-a { display: grid; grid-template-rows: 0fr; margin-top: 0; transition: grid-template-rows .55s cubic-bezier(.2,.8,.2,1), margin-top .55s cubic-bezier(.2,.8,.2,1); }
.fq-wrap .fq-item.is-open .fq-a { grid-template-rows: 1fr; margin-top: 4px; }
.fq-wrap .fq-a-clip { min-height: 0; overflow: hidden; visibility: hidden; transition: visibility 0s linear .55s; }
.fq-wrap .fq-item.is-open .fq-a-clip { visibility: visible; transition-delay: 0s; }
.fq-wrap .fq-a-card { padding: 22px 24px; background-color: #0a1120; border: 1px solid color-mix(in srgb, var(--fq-c1) 14%, transparent); border-radius: 8px; }
.fq-wrap .fq-a-text { color: rgba(255,255,255,0.6); font-family: 'Inter', sans-serif; font-size: 13px; line-height: 1.75; opacity: 0; transform: translateY(10px); transition: opacity .5s ease, transform .5s ease; }
.fq-wrap .fq-item.is-open .fq-a-text { opacity: 1; transform: none; transition-delay: .18s; }
.fq-wrap .fq-pre { color: inherit; }
.fq-wrap .fq-a-text .fq-pre { color: var(--fq-c1); font-weight: 600; }
/* --- Animations --- */
.fq-wrap.fq-anim .fq-rv, .fq-wrap.fq-anim .fq-heading .w, .fq-wrap.fq-anim .fq-bn-title .ch { opacity: 0; }
.fq-wrap.fq-anim .fq-item.fq-rv { transform: translateX(46px); }
.fq-wrap.fq-anim.fq-in .fq-bn-title .ch { opacity: 1; animation: fqChar .8s cubic-bezier(.2,.7,.2,1) calc(.12s + var(--c, 0) * .06s) backwards; }
.fq-wrap.fq-anim.fq-in .fq-crumb.fq-rv { opacity: 1; animation: fqUp .8s cubic-bezier(.2,.7,.2,1) var(--d, 0s) backwards; }
.fq-wrap.fq-anim.fq-in .fq-heading .w { opacity: 1; animation: fqWord .85s cubic-bezier(.2,.7,.2,1) calc(.15s + var(--w, 0) * .1s) backwards; }
.fq-wrap.fq-anim.fq-in .fq-left .fq-rv { opacity: 1; animation: fqUp .85s cubic-bezier(.2,.7,.2,1) var(--d, 0s) backwards; }
.fq-wrap.fq-anim.fq-in .fq-item.fq-rv { opacity: 1; transform: none; animation: fqSlide .9s cubic-bezier(.2,.8,.2,1) var(--d, 0s) backwards; }
.fq-wrap.fq-anim .fq-crumb-arrow { animation: fqNudge 1.8s ease-in-out infinite; }
.fq-wrap.fq-anim .fq-glow-1 { animation: fqGlowA 14s ease-in-out infinite alternate; }
.fq-wrap.fq-anim .fq-glow-2 { animation: fqGlowB 16s ease-in-out infinite alternate; }
.fq-wrap.fq-anim .fq-item.is-open .fq-ic { animation: fqIcPop .6s cubic-bezier(.34,1.56,.64,1); }
.fq-wrap.fq-anim .fq-blob .b1 { animation: fqB1 9s ease-in-out infinite alternate; }
.fq-wrap.fq-anim .fq-blob .b2 { animation: fqB2 11s ease-in-out infinite alternate; }
.fq-wrap.fq-anim .fq-blob .b3 { animation: fqB3 10s ease-in-out infinite alternate; }
.fq-wrap.fq-anim .fq-blob .b4 { animation: fqB4 12s ease-in-out infinite alternate; }
.fq-wrap.fq-anim .fq-blob .b5 { animation: fqB5 8s ease-in-out infinite alternate; }
.fq-wrap.fq-anim .fq-blob .b6 { animation: fqB6 13s ease-in-out infinite alternate; }
.fq-wrap.fq-anim .fq-blob .b7 { animation: fqB7 10s ease-in-out infinite alternate; }
.fq-wrap.fq-anim .fq-blob .b8 { animation: fqB8 9s ease-in-out infinite alternate; }
.fq-wrap.fq-anim .fq-blob .b9 { animation: fqB9 12s ease-in-out infinite alternate; }
/* --- Keyframes --- */
@keyframes fqKen { from { transform: scale(1); } to { transform: scale(1.1) translate(-1.5%, 1%); } }
@keyframes fqDrift { 0% { opacity: 0; transform: translateY(0) scale(.6); } 25% { opacity: .9; } 100% { opacity: 0; transform: translateY(-70px) scale(1.2); } }
@keyframes fqChar { from { opacity: 0; transform: translateY(44px) rotateX(-80deg); filter: blur(6px); } to { opacity: 1; transform: translateY(0) rotateX(0); filter: blur(0); } }
@keyframes fqUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fqWord { from { opacity: 0; transform: translateY(26px) rotate(2deg); filter: blur(5px); } to { opacity: 1; transform: translateY(0) rotate(0); filter: blur(0); } }
@keyframes fqSlide { from { opacity: 0; transform: translateX(60px); } to { opacity: 1; transform: translateX(0); } }
@keyframes fqNudge { 0%,100% { transform: translateX(0); } 50% { transform: translateX(4px); } }
@keyframes fqShine { 0% { left: -70%; } 35%,100% { left: 130%; } }
@keyframes fqGlowA { from { transform: translate(0,0) scale(1); opacity: .8; } to { transform: translate(60px, 40px) scale(1.12); opacity: 1; } }
@keyframes fqGlowB { from { transform: translate(0,0) scale(1); opacity: .75; } to { transform: translate(-60px, -34px) scale(1.14); opacity: 1; } }
@keyframes fqIcPop { 0% { transform: scale(.7) rotate(-20deg); } 100% { transform: scale(1) rotate(0); } }
@keyframes fqB1 { to { transform: translate(30px, 28px) scale(1.12); } }
@keyframes fqB2 { to { transform: translate(-34px, 22px) scale(.9); } }
@keyframes fqB3 { to { transform: translate(26px, -22px) scale(1.1); } }
@keyframes fqB4 { to { transform: translate(-28px, -18px) scale(1.12); } }
@keyframes fqB5 { to { transform: translate(34px, 30px) scale(.92); } }
@keyframes fqB6 { to { transform: translate(-30px, 24px) scale(1.15); } }
@keyframes fqB7 { to { transform: translate(32px, -26px) scale(.9); } }
@keyframes fqB8 { to { transform: translate(-26px, -30px) scale(1.1); } }
@keyframes fqB9 { to { transform: translate(24px, -22px) scale(1.14); } }
/* --- Responsive & accessibility --- */
@media (prefers-reduced-motion: reduce) { .fq-wrap *, .fq-wrap *::before, .fq-wrap *::after { animation: none !important; } .fq-wrap.fq-anim .fq-rv, .fq-wrap.fq-anim .fq-heading .w, .fq-wrap.fq-anim .fq-bn-title .ch { opacity: 1 !important; transform: none !important; } }
@media (max-width: 1024px) { .fq-wrap .fq-grid { grid-template-columns: 1fr; } .fq-wrap .fq-desc { max-width: none; } .fq-wrap .fq-blob { left: auto; right: -40px; top: -30px; width: 300px; height: 300px; } }
@media (max-width: 640px) { .fq-wrap .fq-q { gap: 12px; padding: 14px 14px; } .fq-wrap .fq-a-card { padding: 18px 16px; } .fq-wrap .fq-crumb { padding: 10px 18px; gap: 10px; } }
/* ==========================================================================
Hektrova - About Company Widget Styles
========================================================================== */
/* Google Fonts (moved here from the old tag in the widget) */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Inter:wght@400;500;600&display=swap');
/* Low-specificity selectors so Elementor Typography / Spacing / Color controls always win */
.ab-wrap {
--ab-accent: #2EE27A;
--ab-c1: #2EE27A;
--ab-c2: #28B45A;
--ab-bar: #2EE27A;
--ab-track: #0c1526;
position: relative; overflow: hidden; overflow: clip;
padding: 70px 0 90px; background: #04070d; color: #fff;
font-family: 'Inter', sans-serif;
}
.ab-wrap * { box-sizing: border-box; }
.ab-wrap a, .ab-wrap a:hover, .ab-wrap a:focus { text-decoration: none; }
.ab-wrap h2, .ab-wrap p { margin: 0; }
/* --- Background curves --- */
.ab-wrap .ab-rings { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.ab-wrap .ab-rings path { stroke: rgba(46, 226, 122, 0.1); }
.ab-wrap .ab-container { position: relative; z-index: 1; width: 92%; max-width: 1140px; margin-inline: auto; }
.ab-wrap .ab-grid { display: grid; grid-template-columns: minmax(0, 470px) minmax(0, 1fr); gap: 84px; align-items: center; }
/* ============ VISUAL ============ */
.ab-wrap .ab-visual { position: relative; width: 100%; max-width: 470px; margin-inline: auto; padding: 0 0 0 11.3%; }
.ab-wrap .ab-main { position: relative; width: 71%; aspect-ratio: 334 / 395; transform: translate(calc(var(--mx,0) * 10px), calc(var(--my,0) * 8px)); transition: transform .35s ease-out; }
.ab-wrap .ab-main-in { position: absolute; inset: 0; overflow: hidden; border-radius: 12px; background: #0b1114; box-shadow: 0 30px 60px -24px rgba(0,0,0,.9); }
.ab-wrap .ab-main-in img, .ab-wrap .ab-small-in img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.ab-wrap .ab-visual:hover .ab-main-in img { transform: scale(1.05); }
.ab-wrap .ab-small:hover .ab-small-in img { transform: scale(1.08); }
.ab-wrap .ab-small { position: absolute; right: 0; bottom: 7.5%; width: 42%; aspect-ratio: 1; z-index: 2; transform: translate(calc(var(--mx,0) * -16px), calc(var(--my,0) * -12px)); transition: transform .35s ease-out; }
.ab-wrap .ab-small-in { position: absolute; inset: 0; overflow: hidden; border-radius: 12px; background: #11181c; box-shadow: 0 28px 54px -20px rgba(0,0,0,.95); }
.ab-wrap .ab-badge { position: absolute; left: 0; top: 8%; width: 133px; z-index: 3; transform: translate(calc(var(--mx,0) * -8px), calc(var(--my,0) * 10px)); transition: transform .35s ease-out; }
.ab-wrap .ab-badge-in {
padding: 20px 10px 18px; text-align: center; color: #04070d; border-radius: 10px;
background: linear-gradient(200deg, var(--ab-c2) 0%, var(--ab-c1) 100%);
box-shadow: 0 22px 44px -16px color-mix(in srgb, var(--ab-c2) 55%, transparent);
}
.ab-wrap .ab-badge-num { margin: 0 0 8px; font-family: 'Poppins', sans-serif; font-size: 44px; font-weight: 700; line-height: 1; }
.ab-wrap .ab-badge-label { font-size: 13px; font-weight: 400; line-height: 1.45; }
.ab-wrap .ab-dots {
position: absolute; left: 3.5%; top: 49%; width: 38px; height: 38px; z-index: 1; pointer-events: none;
background-image: radial-gradient(color-mix(in srgb, var(--ab-accent) 70%, transparent) 1.2px, transparent 1.6px);
background-size: 7px 7px;
}
/* ============ CONTENT ============ */
.ab-wrap .ab-eyebrow { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 6px; color: var(--ab-accent); font-size: 12px; font-weight: 500; letter-spacing: .3px; }
.ab-wrap .ab-lines { position: relative; display: inline-block; width: 40px; height: 6px; flex: none; }
.ab-wrap .ab-lines i { position: absolute; left: 0; display: block; height: 1.5px; background: var(--ab-accent); transform-origin: left; }
.ab-wrap .ab-lines i:first-child { top: 0; width: 40px; }
.ab-wrap .ab-lines i:last-child { top: 4px; width: 28px; opacity: .75; }
.ab-wrap .ab-heading { color: #fff; font-family: 'Poppins', sans-serif; font-size: 36px; font-weight: 700; line-height: 1.2; }
.ab-wrap .ab-heading .w { display: inline-block; }
.ab-wrap .ab-desc { max-width: 470px; margin-top: 22px; color: rgba(255,255,255,0.6); font-size: 14px; line-height: 1.75; }
/* --- Progress bars --- */
.ab-wrap .ab-skills { display: flex; flex-direction: column; gap: 22px; margin-top: 30px; }
.ab-wrap .ab-skill-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.ab-wrap .ab-skill-label { color: #fff; font-family: 'Poppins', sans-serif; font-size: 12px; font-weight: 600; }
.ab-wrap .ab-skill-pct { color: rgba(255,255,255,0.6); font-size: 11px; font-weight: 400; }
.ab-wrap .ab-track { position: relative; height: 8px; border-radius: 6px; background: var(--ab-track); }
.ab-wrap .ab-fill {
position: absolute; left: 0; top: 0; height: 100%; width: var(--p, 80%); border-radius: 6px;
background: linear-gradient(90deg, color-mix(in srgb, var(--ab-bar) 75%, #000), var(--ab-bar));
box-shadow: 0 0 14px -2px color-mix(in srgb, var(--ab-bar) 55%, transparent);
}
.ab-wrap .ab-fill::after {
content: ''; position: absolute; right: 0; top: 50%; width: 3px; height: 150%; transform: translateY(-50%);
background: #fff; border-radius: 1px;
}
/* --- Call + button --- */
.ab-wrap .ab-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 20px 34px; margin-top: 38px; }
.ab-wrap .ab-call { display: inline-flex; align-items: center; gap: 12px; color: #fff; }
.ab-wrap .ab-call-ic {
position: relative; display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 50%; color: #04070d;
background: linear-gradient(135deg, var(--ab-c1), var(--ab-c2)); transition: transform .4s cubic-bezier(.34,1.56,.64,1);
}
.ab-wrap .ab-call-ic svg { width: 18px; height: 18px; }
.ab-wrap .ab-call-ic::after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid var(--ab-c1); opacity: 0; pointer-events: none; }
.ab-wrap .ab-call:hover .ab-call-ic { transform: rotate(-12deg) scale(1.12); }
.ab-wrap .ab-call-txt { display: flex; flex-direction: column; gap: 3px; }
.ab-wrap .ab-call-label { color: rgba(255,255,255,0.6); font-size: 13px; font-weight: 400; line-height: 1.2; }
.ab-wrap .ab-call-num { color: #fff; font-family: 'Poppins', sans-serif; font-size: 14px; font-weight: 600; line-height: 1.2; transition: color .3s ease; }
.ab-wrap .ab-call:hover .ab-call-num { color: var(--ab-accent); }
.ab-wrap .ab-btn {
position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; height: 38px; padding: 0 32px;
border-radius: 999px; color: #04070d; font-family: 'Poppins', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: .8px; text-transform: uppercase; white-space: nowrap;
background: linear-gradient(90deg, var(--ab-c1), var(--ab-c2));
box-shadow: 0 14px 28px -12px color-mix(in srgb, var(--ab-c2) 70%, transparent);
transition: transform .3s ease, box-shadow .3s ease, filter .3s ease;
}
.ab-wrap .ab-btn:hover { transform: translateY(-3px); filter: brightness(1.1); box-shadow: 0 20px 34px -12px color-mix(in srgb, var(--ab-c2) 80%, transparent); }
.ab-wrap .ab-btn:active { transform: translateY(0) scale(.97); }
.ab-wrap .ab-btn::after {
content: ''; position: absolute; top: 0; left: -70%; width: 40%; height: 100%; pointer-events: none;
background: linear-gradient(100deg, transparent, rgba(255,255,255,.5), transparent); transform: skewX(-20deg);
}
/* =====================================================
ANIMATIONS (only when "Enable Animations" is on)
===================================================== */
.ab-wrap.ab-anim .ab-rv { opacity: 0; }
.ab-wrap.ab-anim .ab-heading .w { opacity: 0; }
.ab-wrap.ab-anim .ab-main-in { clip-path: inset(0 100% 0 0); }
.ab-wrap.ab-anim .ab-main-in img { transform: scale(1.3); }
.ab-wrap.ab-anim .ab-small-in, .ab-wrap.ab-anim .ab-badge-in, .ab-wrap.ab-anim .ab-dots { opacity: 0; }
.ab-wrap.ab-anim .ab-lines i { transform: scaleX(0); }
.ab-wrap.ab-anim .ab-fill { width: 0; }
.ab-wrap.ab-anim .ab-rings path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.ab-wrap.ab-anim.ab-in .ab-main-in { animation: abWipe 1.2s cubic-bezier(.65,.05,.2,1) .1s forwards; }
.ab-wrap.ab-anim.ab-in .ab-main-in img { transform: scale(1); transition: transform 1.8s cubic-bezier(.2,.7,.2,1) .1s; }
.ab-wrap.ab-anim.ab-in .ab-small-in { animation: abSlide 1s cubic-bezier(.2,.8,.2,1) .7s both, abFloatB 6.5s ease-in-out 1.9s infinite; }
.ab-wrap.ab-anim.ab-in .ab-badge-in { animation: abPop .95s cubic-bezier(.34,1.56,.64,1) .95s both, abFloatA 5.5s ease-in-out 2s infinite; }
.ab-wrap.ab-anim.ab-in .ab-dots { animation: abFade .9s ease 1.4s forwards, abBlink 3.2s ease-in-out 2.4s infinite; }
.ab-wrap.ab-anim.ab-in .ab-rings path { animation: abDraw 3.2s cubic-bezier(.4,.1,.2,1) forwards; }
.ab-wrap.ab-anim.ab-in .ab-rings path:nth-child(2) { animation-delay: .4s; }
.ab-wrap.ab-anim.ab-in .ab-rings path:nth-child(3) { animation-delay: .8s; }
.ab-wrap.ab-anim.ab-in .ab-rv { animation: abUp .85s cubic-bezier(.2,.7,.2,1) var(--d, 0s) forwards; }
.ab-wrap.ab-anim.ab-in .ab-eyebrow .ab-lines i { transform: scaleX(1); transition: transform .9s cubic-bezier(.2,.7,.2,1) .25s; }
.ab-wrap.ab-anim.ab-in .ab-eyebrow .ab-lines i:last-child { transition-delay: .4s; }
.ab-wrap.ab-anim.ab-in .ab-heading .w { animation: abWord .85s cubic-bezier(.2,.7,.2,1) calc(.2s + var(--w, 0) * .09s) forwards; }
.ab-wrap.ab-anim.ab-in .ab-fill { width: var(--p, 80%); transition: width 1.7s cubic-bezier(.2,.7,.2,1) calc(1s + var(--i, 0) * .2s); }
.ab-wrap.ab-anim.ab-in .ab-call-ic::after { animation: abRing 2.8s ease-out 2s infinite; }
.ab-wrap.ab-anim.ab-in .ab-btn::after { animation: abShine 4.5s ease-in-out 2s infinite; }
/* --- Keyframes --- */
@keyframes abWipe { to { clip-path: inset(0 0 0 0); } }
@keyframes abSlide { from { opacity: 0; transform: translate(70px, 50px) scale(.82); } to { opacity: 1; transform: translate(0,0) scale(1); } }
@keyframes abPop { from { opacity: 0; transform: scale(.35) rotate(-14deg); } to { opacity: 1; transform: scale(1) rotate(0); } }
@keyframes abFade { to { opacity: 1; } }
@keyframes abBlink { 0%,100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes abDraw { to { stroke-dashoffset: 0; } }
@keyframes abUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
@keyframes abWord { from { opacity: 0; transform: translateY(26px) rotate(2deg); filter: blur(5px); } to { opacity: 1; transform: translateY(0) rotate(0); filter: blur(0); } }
@keyframes abFloatA{ 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes abFloatB{ 0%,100% { transform: translateY(0); } 50% { transform: translateY(9px); } }
@keyframes abRing { 0% { opacity: .6; transform: scale(1); } 70%,100% { opacity: 0; transform: scale(1.7); } }
@keyframes abShine { 0% { left: -70%; } 35%,100% { left: 130%; } }
/* --- Accessibility --- */
@media (prefers-reduced-motion: reduce) {
.ab-wrap.ab-anim *, .ab-wrap.ab-anim *::before, .ab-wrap.ab-anim *::after { animation: none !important; transition: none !important; }
.ab-wrap.ab-anim .ab-rv, .ab-wrap.ab-anim .ab-heading .w, .ab-wrap.ab-anim .ab-small-in,
.ab-wrap.ab-anim .ab-badge-in, .ab-wrap.ab-anim .ab-dots { opacity: 1 !important; }
.ab-wrap.ab-anim .ab-main-in { clip-path: none; }
.ab-wrap.ab-anim .ab-main-in img { transform: none; }
.ab-wrap.ab-anim .ab-lines i { transform: scaleX(1); }
.ab-wrap.ab-anim .ab-fill { width: var(--p, 80%); }
.ab-wrap.ab-anim .ab-rings path { stroke-dashoffset: 0; }
}
/* =====================================================
RESPONSIVE
===================================================== */
@media (max-width: 1024px) {
.ab-wrap .ab-grid { grid-template-columns: 1fr; gap: 50px; }
.ab-wrap .ab-visual { max-width: 520px; }
.ab-wrap .ab-desc { max-width: none; }
}
@media (max-width: 640px) {
.ab-wrap .ab-visual { padding-left: 8%; }
.ab-wrap .ab-main { width: 76%; }
.ab-wrap .ab-small { width: 46%; }
.ab-wrap .ab-badge { width: 116px; }
.ab-wrap .ab-actions { gap: 18px 24px; }
}
/* ==========================================================================
Hektrova - Page Banner Widget Styles
========================================================================== */
/* Google Fonts (moved here from the old tag in the widget) */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Inter:wght@400;500;600&display=swap');
/* Low-specificity selectors so Elementor Typography / Spacing / Color controls always win */
.pb-wrap {
--pb-accent: #2EE27A;
--pb-ov: .65;
position: relative; display: flex; align-items: center; justify-content: center; text-align: center;
min-height: 300px; overflow: hidden; overflow: clip; background: #030303; isolation: isolate;
font-family: 'Inter', sans-serif; color: #fff;
}
.pb-wrap * { box-sizing: border-box; }
.pb-wrap a, .pb-wrap a:hover, .pb-wrap a:focus { text-decoration: none; }
.pb-wrap h1, .pb-wrap h2, .pb-wrap h3, .pb-wrap div.pb-title { margin: 0; }
/* --- Background swirl (default) or your image --- */
.pb-wrap .pb-art {
position: absolute; inset: -20%; z-index: -4; transform-origin: 100% 0;
background:
radial-gradient(ellipse 40% 55% at 48% 72%, rgba(46,226,122,.20), transparent 70%),
repeating-radial-gradient(ellipse 130% 190% at 112% -25%, #060607 0, #060607 14px, #1d1e21 26px, #2c2d31 34px, #0c0c0e 50px, #060607 62px);
animation: pbSwirl 22s ease-in-out infinite alternate;
}
.pb-wrap .pb-art.has-img { inset: 0; background-size: cover; background-position: center; animation: pbKen 26s ease-in-out infinite alternate; }
.pb-wrap .pb-ov { position: absolute; inset: 0; z-index: -3; background: #000; opacity: var(--pb-ov, .65); pointer-events: none; }
.pb-wrap .pb-glow {
position: absolute; inset: 0; z-index: -2; pointer-events: none;
background: radial-gradient(ellipse 36% 60% at 50% 100%, rgba(46,226,122,.3), transparent 70%);
background: radial-gradient(ellipse 36% 60% at 50% 100%, color-mix(in srgb, var(--pb-accent) 30%, transparent), transparent 70%);
animation: pbPulse 6s ease-in-out infinite;
}
.pb-wrap .pb-shade {
position: absolute; inset: 0; z-index: -1; pointer-events: none;
background: linear-gradient(90deg, rgba(0,0,0,.94) 0%, rgba(0,0,0,.6) 38%, transparent 78%), linear-gradient(180deg, transparent 55%, rgba(0,0,0,.7));
}
.pb-wrap .pb-dots { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.pb-wrap .pb-dots i {
position: absolute; width: 4px; height: 4px; border-radius: 50%; background: var(--pb-accent); opacity: 0;
box-shadow: 0 0 12px var(--pb-accent); animation: pbDrift 7s ease-in-out infinite;
}
/* --- Inner content --- */
.pb-wrap .pb-inner { position: relative; padding: 40px 20px; }
.pb-wrap .pb-title { color: #fff; font-family: 'Poppins', sans-serif; font-size: 44px; font-weight: 700; line-height: 1.15; perspective: 600px; }
.pb-wrap .pb-title .w { display: inline-block; white-space: nowrap; }
.pb-wrap .pb-title .ch { display: inline-block; }
.pb-wrap .pb-crumb {
display: inline-flex; align-items: center; gap: 14px; margin-top: 22px; padding: 12px 26px;
background-color: rgba(255,255,255,.07); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
border-radius: 3px; color: #fff; font-size: 14px; font-weight: 500;
}
.pb-wrap .pb-crumb a { color: #fff; transition: color .3s ease; }
.pb-wrap .pb-crumb a:hover { color: var(--pb-accent); }
.pb-wrap .pb-arrow { flex: none; width: 13px; height: 13px; }
.pb-wrap .pb-crumb .cur { color: var(--pb-accent); }
.pb-wrap.pb-ul .pb-crumb a, .pb-wrap.pb-ul .pb-crumb .cur { text-decoration: underline; text-underline-offset: 3px; }
/* =====================================================
ANIMATIONS (only when "Enable Animations" is on)
===================================================== */
.pb-wrap.pb-anim .pb-title .ch, .pb-wrap.pb-anim .pb-rv { opacity: 0; }
.pb-wrap.pb-anim.pb-in .pb-title .ch { opacity: 1; animation: pbChar .8s cubic-bezier(.2,.7,.2,1) calc(.12s + var(--c, 0) * .06s) backwards; }
.pb-wrap.pb-anim.pb-in .pb-rv { opacity: 1; animation: pbUp .85s cubic-bezier(.2,.7,.2,1) var(--d, 0s) backwards; }
.pb-wrap.pb-anim .pb-arrow { animation: pbNudge 1.8s ease-in-out infinite; }
.pb-wrap:not(.pb-anim) .pb-art, .pb-wrap:not(.pb-anim) .pb-glow { animation: none; }
.pb-wrap:not(.pb-anim) .pb-dots { display: none; }
/* --- Keyframes --- */
@keyframes pbSwirl { 0% { transform: rotate(-2deg) scale(1); } 100% { transform: rotate(3deg) scale(1.08); } }
@keyframes pbKen { 0% { transform: scale(1); } 100% { transform: scale(1.1); } }
@keyframes pbPulse { 0%,100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes pbDrift { 0% { opacity: 0; transform: translateY(0) scale(.6); } 25% { opacity: .9; } 100% { opacity: 0; transform: translateY(-70px) scale(1.2); } }
@keyframes pbChar { from { opacity: 0; transform: translateY(44px) rotateX(-80deg); filter: blur(6px); } to { opacity: 1; transform: translateY(0) rotateX(0); filter: blur(0); } }
@keyframes pbUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
@keyframes pbNudge { 0%,100% { transform: translateX(0); } 50% { transform: translateX(4px); } }
/* --- Accessibility --- */
@media (prefers-reduced-motion: reduce) {
.pb-wrap.pb-anim *, .pb-wrap.pb-anim *::before, .pb-wrap.pb-anim *::after { animation: none !important; transition: none !important; }
.pb-wrap.pb-anim .pb-title .ch, .pb-wrap.pb-anim .pb-rv { opacity: 1 !important; }
}
/* ==========================================================================
Hektrova - Company History Widget Styles
========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Inter:wght@400;500;600&family=Allura&display=swap');
/* Low-specificity selectors so Elementor Typography / Spacing / Color controls always win */
.ch-wrap {
--ch-c1: #2EE27A;
--ch-c2: #28B45A;
--ch-eyebrow: #2EE27A;
--ch-frame: #2EE27A;
--ch-neon: rgba(46,226,122,.28);
--ch-glow1: rgba(46,226,122,.14);
--ch-glow2: rgba(46,226,122,.07);
position: relative; overflow: hidden; overflow: clip; padding: 90px 0; background: #04070d; color: #fff;
font-family: 'Inter', sans-serif;
}
.ch-wrap * { box-sizing: border-box; }
.ch-wrap a, .ch-wrap a:hover, .ch-wrap a:focus { text-decoration: none; }
.ch-wrap h2, .ch-wrap h3, .ch-wrap p { margin: 0; padding: 0; }
/* --- Background --- */
.ch-wrap .ch-glow { position: absolute; border-radius: 50%; pointer-events: none; filter: blur(36px); z-index: 0; }
.ch-wrap .ch-glow-1 { top: 50%; left: 12%; width: 820px; height: 820px; margin: -410px 0 0 -300px; background: radial-gradient(circle, var(--ch-glow1), transparent 66%); }
.ch-wrap .ch-glow-2 { bottom: -22%; right: -10%; width: 760px; height: 760px; background: radial-gradient(circle, var(--ch-glow2), transparent 68%); }
.ch-wrap .ch-dots { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.ch-wrap .ch-dots i { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: var(--ch-c1); box-shadow: 0 0 14px var(--ch-c1); opacity: .0; animation: chDrift 8s ease-in-out infinite; }
.ch-wrap .ch-container { position: relative; z-index: 1; width: 92%; max-width: 1020px; margin-inline: auto; }
.ch-wrap .ch-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 50px 70px; align-items: center; }
/* ============ VISUAL ============ */
.ch-wrap .ch-visual { position: relative; width: 100%; max-width: 460px; aspect-ratio: 345 / 310; margin-inline: 0 auto; }
.ch-wrap .ch-neon { position: absolute; left: -6%; top: 2%; width: 78%; height: 96%; z-index: 0; pointer-events: none; border-radius: 40%; filter: blur(46px); background: radial-gradient(circle at 50% 45%, var(--ch-neon), transparent 70%); }
.ch-wrap .ch-main { position: absolute; left: 0; top: 0; width: 75.65%; height: 100%; z-index: 1; translate: calc(var(--mx, 0) * 10px) calc(var(--my, 0) * 8px); transition: translate .35s ease-out; }
.ch-wrap .ch-main-in { position: absolute; inset: 0; overflow: hidden; border-radius: 8px; background: #0c1526; box-shadow: 0 30px 60px -26px rgba(0,0,0,.9); }
.ch-wrap .ch-main-in img, .ch-wrap .ch-tile-in img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .9s cubic-bezier(.2,.7,.2,1); }
.ch-wrap .ch-visual:hover .ch-main-in img { transform: scale(1.05); }
.ch-wrap .ch-since { position: absolute; left: 77.6%; top: 3.5%; z-index: 2; writing-mode: vertical-rl; color: rgba(255,255,255,.55); font-family: 'Poppins', sans-serif; font-size: 17px; font-weight: 500; letter-spacing: 1.8px; white-space: nowrap; line-height: 1; }
.ch-wrap .ch-l { display: inline-block; }
.ch-wrap .ch-tile { position: absolute; z-index: 3; }
.ch-wrap .ch-tile-in { position: absolute; inset: 0; overflow: hidden; border-radius: 8px; background: #0c1526; box-shadow: 0 20px 40px -18px rgba(0,0,0,.95); }
.ch-wrap .ch-tile-b { left: 60%; top: 39%; width: 39.1%; height: 45.5%; z-index: 4; translate: calc(var(--mx, 0) * -20px) calc(var(--my, 0) * -14px); transition: translate .35s ease-out; }
.ch-wrap .ch-tile:hover .ch-tile-in img { transform: scale(1.12); }
/* ============ CONTENT ============ */
.ch-wrap .ch-eyebrow { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 8px; color: var(--ch-eyebrow); font-size: 12px; font-weight: 500; letter-spacing: .2px; }
.ch-wrap .ch-lines { position: relative; display: inline-block; width: 40px; height: 6px; flex: none; }
.ch-wrap .ch-lines i { position: absolute; left: 0; display: block; height: 1.5px; background: var(--ch-eyebrow); transform-origin: left; }
.ch-wrap .ch-lines i:first-child { top: 0; width: 40px; }
.ch-wrap .ch-lines i:last-child { top: 4px; width: 28px; opacity: .75; }
.ch-wrap .ch-heading { max-width: 400px; color: #fff; font-family: 'Poppins', sans-serif; font-size: 30px; font-weight: 700; line-height: 1.18; }
.ch-wrap .ch-heading .w { display: inline-block; }
.ch-wrap .ch-feats { display: flex; flex-direction: column; gap: 24px; margin-top: 30px; }
.ch-wrap .ch-feat { display: flex; align-items: flex-start; gap: 16px; }
.ch-wrap .ch-fi {
position: relative; flex: none; display: grid; place-items: center; width: 33px; height: 33px; border-radius: 4px; color: #fff;
background: linear-gradient(135deg, var(--ch-c1), var(--ch-c2)); box-shadow: 0 10px 22px -10px var(--ch-c2);
transition: transform .45s cubic-bezier(.34,1.56,.64,1), box-shadow .35s ease;
}
.ch-wrap .ch-fi::after { content: ''; position: absolute; inset: 0; border-radius: inherit; border: 1.5px solid var(--ch-c1); opacity: 0; pointer-events: none; }
.ch-wrap .ch-fi svg { display: block; width: 18px; height: 18px; overflow: visible; }
.ch-wrap .ch-fi i { font-size: 16px; color: #fff; }
.ch-wrap .ch-fi svg:not(.ch-svg) { fill: #fff; }
.ch-wrap .ch-feat:hover .ch-fi { transform: rotate(-8deg) scale(1.12); box-shadow: 0 14px 28px -8px var(--ch-c2); }
.ch-wrap .ch-ft-title { margin-bottom: 7px; color: #fff; font-family: 'Poppins', sans-serif; font-size: 13px; font-weight: 700; line-height: 1.3; }
.ch-wrap .ch-ft-text { max-width: 330px; color: rgba(255,255,255,.6); font-size: 11px; line-height: 1.6; }
.ch-wrap .ch-founder-row { display: flex; align-items: center; flex-wrap: wrap; gap: 20px 34px; margin-top: 34px; }
.ch-wrap .ch-founder { display: flex; align-items: center; gap: 22px; }
.ch-wrap .ch-ph { position: relative; flex: none; width: 38px; height: 38px; }
.ch-wrap .ch-ph img { position: relative; z-index: 1; display: block; width: 100%; height: 100%; object-fit: cover; }
.ch-wrap .ch-ph::after { content: ''; position: absolute; z-index: 0; top: -3px; bottom: -3px; left: 15px; right: -9px; border: 1px solid var(--ch-frame); transform-origin: left center; }
.ch-wrap .ch-fd-txt { display: flex; flex-direction: column; gap: 4px; }
.ch-wrap .ch-sig { color: #2EE27A; font-family: 'Allura', cursive; font-size: 26px; font-weight: 400; line-height: 1.1; white-space: nowrap; }
.ch-wrap .ch-role { color: rgba(255,255,255,.6); font-size: 12px; line-height: 1.2; }
.ch-wrap .ch-btn {
position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; height: 34px; padding: 0 30px; border-radius: 999px; color: #fff;
font-family: 'Poppins', sans-serif; font-size: 10px; font-weight: 600; letter-spacing: .8px; text-transform: uppercase; white-space: nowrap;
background: linear-gradient(90deg, var(--ch-c1), var(--ch-c2)); box-shadow: 0 14px 28px -12px var(--ch-c2);
transition: transform .3s ease, box-shadow .3s ease, filter .3s ease;
}
.ch-wrap .ch-btn:hover { transform: translateY(-3px); filter: brightness(1.1); box-shadow: 0 20px 34px -12px var(--ch-c2); }
.ch-wrap .ch-btn:active { transform: translateY(0) scale(.97); }
.ch-wrap .ch-btn::after { content: ''; position: absolute; top: 0; left: -70%; width: 40%; height: 100%; pointer-events: none; background: linear-gradient(100deg, transparent, rgba(255,255,255,.5), transparent); transform: skewX(-20deg); animation: chShine 4.5s ease-in-out 1.8s infinite; }
/* =====================================================
ANIMATIONS (only when "Enable Animations" is on)
===================================================== */
.ch-wrap.ch-anim .ch-glow-1 { animation: chGlowA 15s ease-in-out infinite alternate; }
.ch-wrap.ch-anim .ch-glow-2 { animation: chGlowB 17s ease-in-out infinite alternate; }
.ch-wrap.ch-anim .ch-neon { animation: chNeon 6s ease-in-out infinite alternate; }
.ch-wrap.ch-anim .ch-rv, .ch-wrap.ch-anim .ch-heading .w, .ch-wrap.ch-anim .ch-l,
.ch-wrap.ch-anim .ch-tile-in { opacity: 0; }
.ch-wrap.ch-anim .ch-main-in { clip-path: inset(0 100% 0 0); }
.ch-wrap.ch-anim .ch-main-in img { transform: scale(1.35); }
.ch-wrap.ch-anim .ch-lines i { transform: scaleX(0); }
.ch-wrap.ch-anim .ch-svg * { stroke-dasharray: 1; stroke-dashoffset: 1; }
.ch-wrap.ch-anim .ch-ph::after { transform: scale(0); }
.ch-wrap.ch-anim .ch-sig { clip-path: inset(0 100% 0 0); }
.ch-wrap.ch-anim.ch-in .ch-main-in { animation: chWipe 1.3s cubic-bezier(.65,.05,.2,1) .1s forwards; }
.ch-wrap.ch-anim.ch-in .ch-main-in img { transform: scale(1); transition: transform 2.2s cubic-bezier(.2,.7,.2,1) .1s; }
.ch-wrap.ch-anim.ch-in .ch-tile-b .ch-tile-in { opacity: 1; animation: chTileB .95s cubic-bezier(.34,1.56,.64,1) .9s backwards, chFloatB 7.5s ease-in-out 2.1s infinite; }
.ch-wrap.ch-anim.ch-in .ch-l { animation: chLetter .6s cubic-bezier(.2,.7,.2,1) calc(1.3s + var(--l, 0) * .07s) forwards; }
.ch-wrap.ch-anim.ch-in .ch-rv { opacity: 1; animation: chUp .85s cubic-bezier(.2,.7,.2,1) var(--d, 0s) backwards; }
.ch-wrap.ch-anim.ch-in .ch-eyebrow .ch-lines i { transform: scaleX(1); transition: transform .9s cubic-bezier(.2,.7,.2,1) .3s; }
.ch-wrap.ch-anim.ch-in .ch-eyebrow .ch-lines i:last-child { transition-delay: .45s; }
.ch-wrap.ch-anim.ch-in .ch-heading .w { opacity: 1; animation: chWord .9s cubic-bezier(.2,.7,.2,1) calc(.2s + var(--w, 0) * .1s) backwards; }
.ch-wrap.ch-anim.ch-in .ch-feat .ch-fi { animation: chPop .8s cubic-bezier(.34,1.56,.64,1) calc(var(--d, 0s) + .1s) backwards; }
.ch-wrap.ch-anim.ch-in .ch-feat .ch-fi::after { animation: chRing 3s ease-out calc(var(--d, 0s) + 1.6s) infinite; }
.ch-wrap.ch-anim.ch-in .ch-feat .ch-svg * { animation: chDraw 1.1s cubic-bezier(.4,.1,.2,1) calc(var(--d, 0s) + .45s) forwards; }
.ch-wrap.ch-anim.ch-in .ch-feat .ch-ft-title { animation: chUp .7s ease calc(var(--d, 0s) + .25s) backwards; }
.ch-wrap.ch-anim.ch-in .ch-feat .ch-ft-text { animation: chUp .7s ease calc(var(--d, 0s) + .38s) backwards; }
.ch-wrap.ch-anim.ch-in .ch-ph { animation: chPop .8s cubic-bezier(.34,1.56,.64,1) 1.25s backwards; }
.ch-wrap.ch-anim.ch-in .ch-ph::after { transform: scale(1); transition: transform .9s cubic-bezier(.2,.7,.2,1) 1.55s; }
.ch-wrap.ch-anim.ch-in .ch-sig { animation: chWipe 1.5s steps(26, end) 1.7s forwards; }
.ch-wrap.ch-anim.ch-in .ch-role { animation: chUp .7s ease 2.2s backwards; }
/* --- Keyframes --- */
@keyframes chGlowA { from { transform: translate(0,0) scale(1); opacity: .8; } to { transform: translate(60px, 40px) scale(1.12); opacity: 1; } }
@keyframes chGlowB { from { transform: translate(0,0) scale(1); opacity: .75; } to { transform: translate(-60px, -34px) scale(1.14); opacity: 1; } }
@keyframes chNeon { from { opacity: .55; transform: scale(.96); } to { opacity: 1; transform: scale(1.06); } }
@keyframes chDrift { 0% { opacity: 0; transform: translateY(0) scale(.6); } 25% { opacity: .9; } 100% { opacity: 0; transform: translateY(-80px) scale(1.2); } }
@keyframes chWipe { to { clip-path: inset(0 0 0 0); } }
@keyframes chTileB { from { opacity: 0; transform: translate(56px, 6px) scale(.5) rotate(10deg); } to { opacity: 1; transform: translate(0,0) scale(1) rotate(0); } }
@keyframes chFloatB { 0%,100% { transform: translateY(0); } 50% { transform: translateY(8px); } }
@keyframes chLetter { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes chDraw { to { stroke-dashoffset: 0; } }
@keyframes chUp { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: translateY(0); } }
@keyframes chWord { from { opacity: 0; transform: translateY(32px) rotate(2deg); filter: blur(6px); } to { opacity: 1; transform: translateY(0) rotate(0); filter: blur(0); } }
@keyframes chPop { from { opacity: 0; transform: scale(.3) rotate(-18deg); } to { opacity: 1; transform: scale(1) rotate(0); } }
@keyframes chRing { 0% { opacity: .6; transform: scale(1); } 70%,100% { opacity: 0; transform: scale(1.7); } }
@keyframes chShine { 0% { left: -70%; } 35%,100% { left: 130%; } }
/* --- Accessibility --- */
@media (prefers-reduced-motion: reduce) {
.ch-wrap *, .ch-wrap *::before, .ch-wrap *::after { animation: none !important; transition: none !important; }
.ch-wrap.ch-anim .ch-rv, .ch-wrap.ch-anim .ch-heading .w, .ch-wrap.ch-anim .ch-l, .ch-wrap.ch-anim .ch-tile-in { opacity: 1; }
.ch-wrap.ch-anim .ch-main-in, .ch-wrap.ch-anim .ch-sig { clip-path: none; }
.ch-wrap.ch-anim .ch-main-in img { transform: none; }
.ch-wrap.ch-anim .ch-lines i, .ch-wrap.ch-anim .ch-ph::after { transform: none; }
.ch-wrap.ch-anim .ch-svg * { stroke-dashoffset: 0; }
}
/* =====================================================
>>> EVERYTHING ABOVE = DESKTOP (unchanged) <<<
===================================================== */
/* =====================================================
TABLET (768px - 1024px)
image and text stay side by side, just a bit larger text
===================================================== */
@media (max-width: 1024px) {
.ch-wrap .ch-container { width: 90%; }
.ch-wrap .ch-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.ch-wrap .ch-eyebrow { margin-bottom: 10px; }
.ch-wrap .ch-feats { margin-top: 26px; }
.ch-wrap .ch-fi svg { width: 19px; height: 19px; }
.ch-wrap .ch-founder-row { gap: 18px 24px; margin-top: 30px; }
.ch-wrap .ch-founder { gap: 18px; }
.ch-wrap .ch-ph { width: 42px; height: 42px; }
.ch-wrap .ch-btn { height: 38px; }
.ch-wrap .ch-glow-1 { width: 600px; height: 600px; margin: -300px 0 0 -240px; }
.ch-wrap .ch-glow-2 { width: 520px; height: 520px; }
}
/* =====================================================
MOBILE (up to 767px)
image on top, text below, big touch-friendly button
===================================================== */
@media (max-width: 767px) {
.ch-wrap .ch-container { width: 90%; }
.ch-wrap .ch-grid { grid-template-columns: minmax(0, 1fr); }
/* image block: full width of the phone, centred */
.ch-wrap .ch-visual { margin-inline: auto; }
.ch-wrap .ch-neon { filter: blur(34px); }
/* text block */
.ch-wrap .ch-eyebrow { margin-bottom: 10px; }
.ch-wrap .ch-feats { margin-top: 24px; }
.ch-wrap .ch-feat { gap: 14px; }
.ch-wrap .ch-fi svg { width: 21px; height: 21px; }
.ch-wrap .ch-ft-title { margin-bottom: 6px; }
/* founder + button: stacked, button full width */
.ch-wrap .ch-founder-row { flex-direction: column; align-items: stretch; gap: 22px; margin-top: 30px; }
.ch-wrap .ch-founder { gap: 18px; }
.ch-wrap .ch-ph { width: 46px; height: 46px; }
.ch-wrap .ch-btn { width: 100%; height: 50px; }
/* lighter background effects on phones */
.ch-wrap .ch-glow-1 { width: 380px; height: 380px; top: 12%; left: -18%; margin: 0; }
.ch-wrap .ch-glow-2 { width: 340px; height: 340px; bottom: -12%; right: -22%; }
.ch-wrap .ch-dots i:nth-child(n+5) { display: none; }
}
/* very small phones */
@media (max-width: 360px) {
.ch-wrap .ch-container { width: 92%; }
.ch-wrap .ch-feat { gap: 12px; }
}
/* touch screens: no sticky hover effects after a tap */
@media (hover: none) {
.ch-wrap .ch-visual:hover .ch-main-in img { transform: none; }
.ch-wrap .ch-tile:hover .ch-tile-in img { transform: none; }
.ch-wrap .ch-feat:hover .ch-fi { transform: none; box-shadow: 0 10px 22px -10px var(--ch-c2); }
.ch-wrap .ch-btn:hover { transform: none; filter: none; box-shadow: 0 14px 28px -12px var(--ch-c2); }
}
/* ==========================================================================
Hektrova - Company Timeline Widget Styles
========================================================================== */
/* Google Fonts (moved here from the old tag in the widget) */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&family=Inter:wght@400;500;600&display=swap');
.tl-wrap {
--tl-bg: #04070d;
--tl-ink: rgba(255,255,255,.7);
--tl-lime: #2EE27A;
--tl-lime2: #28B45A;
--tl-cs: 62px;
position: relative; overflow: hidden; overflow: clip; padding: 30px 0 80px; background: #04070d; color: #fff;
font-family: 'Inter', sans-serif;
}
.tl-wrap * { box-sizing: border-box; }
.tl-wrap a, .tl-wrap a:hover, .tl-wrap a:focus { text-decoration: none; }
.tl-wrap h2, .tl-wrap h3, .tl-wrap p { margin: 0; padding: 0; }
.tl-wrap button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; -webkit-appearance: none; appearance: none; border-radius: 0; box-shadow: none; text-transform: none; -webkit-tap-highlight-color: transparent; }
.tl-wrap button:hover, .tl-wrap button:focus { background: none; color: inherit; }
.tl-wrap .tl-container { position: relative; z-index: 1; width: 92%; max-width: 1200px; margin-inline: auto; }
/* ============ FLOATING GLOW BACKGROUND ============ */
.tl-wrap .tl-orb { position: absolute; z-index: 0; border-radius: 50%; background: var(--tl-lime); filter: blur(120px); opacity: .10; pointer-events: none; will-change: transform; }
.tl-wrap .tl-orb-1 { width: 380px; height: 380px; top: -120px; right: -80px; animation: tlOrbA 16s ease-in-out infinite alternate; }
.tl-wrap .tl-orb-2 { width: 320px; height: 320px; bottom: -120px; left: -80px; animation: tlOrbB 20s ease-in-out infinite alternate; }
@keyframes tlOrbA { from { transform: translate(0,0) scale(1); } to { transform: translate(-120px, 140px) scale(1.25); } }
@keyframes tlOrbB { from { transform: translate(0,0) scale(1); } to { transform: translate(160px, -100px) scale(1.2); } }
/* ============ HEADER ============ */
.tl-wrap .tl-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 30px; margin-bottom: 110px; }
.tl-wrap .tl-heading { max-width: 860px; color: #fff; font-family: 'Poppins', sans-serif; font-size: 52px; font-weight: 700; line-height: 1.25; letter-spacing: -.02em; }
.tl-wrap .tl-heading .wm { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .14em; margin-bottom: -.14em; }
.tl-wrap .tl-heading .w { display: inline-block; will-change: transform; }
.tl-wrap .tl-btn {
position: relative; flex: none; display: inline-flex; align-items: center; gap: 14px; margin-top: 19px; padding: 17px 28px 17px 22px; border-radius: 999px;
background: linear-gradient(90deg, var(--tl-lime), var(--tl-lime2)); color: #fff; font-family: 'Poppins', sans-serif; font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; line-height: 1; white-space: nowrap; overflow: hidden;
box-shadow: 0 14px 28px -12px rgba(46,226,122,.4);
transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease, filter .3s ease;
}
.tl-wrap .tl-btn::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: rgba(255,255,255,.22); transform: translateY(101%); transition: transform .45s cubic-bezier(.2,.7,.2,1); }
.tl-wrap .tl-btn > span { position: relative; z-index: 1; }
.tl-wrap .tl-btn-ico { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: rgba(4,7,13,.25); color: #fff; transition: background .35s ease, color .35s ease, transform .5s cubic-bezier(.34,1.56,.64,1); }
.tl-wrap .tl-btn-ico svg { display: block; width: 12px; height: 12px; }
.tl-wrap .tl-btn-tx { transition: color .35s ease; }
.tl-wrap .tl-btn:hover { transform: translateY(-3px); box-shadow: 0 20px 34px -12px rgba(46,226,122,.55); filter: brightness(1.06); }
.tl-wrap .tl-btn:hover::before { transform: translateY(0); }
.tl-wrap .tl-btn:hover .tl-btn-tx { color: #fff; }
.tl-wrap .tl-btn:hover .tl-btn-ico { background: #04070d; color: var(--tl-lime); transform: rotate(180deg); }
/* button shine sweep */
.tl-wrap.tl-shine .tl-btn::after { content: ''; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent); transform: skewX(-20deg); animation: tlShine 4.5s ease-in-out 2.5s infinite; pointer-events: none; z-index: 2; }
@keyframes tlShine { 0% { left: -60%; } 28%, 100% { left: 140%; } }
/* ============ TIMELINE NAV ============ */
.tl-wrap .tl-nav { position: relative; display: flex; align-items: center; justify-content: space-between; height: var(--tl-cs); }
.tl-wrap .tl-line { position: absolute; z-index: 0; left: calc(var(--tl-cs) / 2); right: calc(var(--tl-cs) / 2); top: 50%; height: 1.5px; margin-top: -.75px; background: var(--tl-ink); opacity: .5; transform-origin: left center; pointer-events: none; }
.tl-wrap .tl-arrow {
position: relative; z-index: 2; flex: none; display: grid; place-items: center; width: var(--tl-cs); height: var(--tl-cs); border-radius: 50%;
border: 1px solid var(--tl-ink); color: var(--tl-ink); background: transparent;
transition: background-color .3s ease, border-color .3s ease, color .3s ease, opacity .3s ease, transform .35s cubic-bezier(.34,1.56,.64,1);
}
.tl-wrap .tl-arrow svg { display: block; width: 9px; height: 9px; overflow: visible; }
.tl-wrap .tl-arrow:hover:not(:disabled), .tl-wrap .tl-arrow:focus-visible { background-color: var(--tl-lime); border-color: var(--tl-lime); color: #04070d; transform: scale(1.06); }
.tl-wrap .tl-arrow:active:not(:disabled) { transform: scale(.94); }
.tl-wrap .tl-arrow:disabled { opacity: .35; cursor: default; }
.tl-wrap .tl-prev svg { transform: translateX(-4px); }
.tl-wrap .tl-next svg { transform: translateX(4px); }
.tl-wrap .tl-track { position: relative; flex: 1 1 auto; height: 100%; }
/* progress fill (grows to the active dot) */
.tl-wrap .tl-fill { position: absolute; z-index: 0; left: 0; top: 50%; height: 2px; margin-top: -1px; background: linear-gradient(90deg, var(--tl-lime2), var(--tl-lime)); box-shadow: 0 0 12px var(--tl-lime); pointer-events: none; transition: width .8s cubic-bezier(.65,.05,.2,1); }
.tl-wrap .tl-item {
position: absolute; z-index: 1; top: 0; height: 100%; width: 96px; margin-left: -48px; display: flex; align-items: center; justify-content: center; text-align: center;
}
.tl-wrap .tl-label { position: absolute; left: 0; right: 0; bottom: calc(50% + 25px); color: var(--tl-ink); font-family: 'Poppins', sans-serif; font-size: 19px; font-weight: 700; line-height: 1.2; white-space: nowrap; transition: transform .4s cubic-bezier(.2,.7,.2,1), opacity .3s ease; }
.tl-wrap .tl-item:hover .tl-label { transform: translateY(-3px); }
.tl-wrap .tl-item.is-current .tl-label { transform: translateY(-4px) scale(1.12); }
.tl-wrap .tl-dot { position: relative; display: grid; place-items: center; width: 30px; height: 22px; background: var(--tl-bg); }
.tl-wrap .tl-dot::after { content: ''; width: 3px; height: 3px; border-radius: 50%; background: var(--tl-lime); transition: transform .3s ease; }
.tl-wrap .tl-item:hover .tl-dot::after { transform: scale(1.8); }
.tl-wrap .tl-item:focus-visible { outline: 2px solid var(--tl-lime); outline-offset: -6px; }
.tl-wrap .tl-ring {
position: absolute; z-index: 3; top: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%;
border: 1.5px solid var(--tl-lime); background: var(--tl-bg); display: grid; place-items: center; pointer-events: none;
transition: left .8s cubic-bezier(.65,.05,.2,1);
}
.tl-wrap .tl-ring i { display: block; width: 4px; height: 4px; border-radius: 50%; background: var(--tl-lime); }
/* pulsing halo around the ring */
.tl-wrap.tl-anim .tl-ring::after { content: ''; position: absolute; inset: -2px; border-radius: 50%; border: 1.5px solid var(--tl-lime); opacity: 0; animation: tlHalo 2.2s ease-out 2s infinite; }
@keyframes tlHalo { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(2.4); opacity: 0; } }
/* ============ CONTENT ============ */
/* image width comes from the Elementor "Image Width" slider through --tl-mw (default = original 53.4%) */
.tl-wrap .tl-body { display: grid; grid-template-columns: var(--tl-mw, 53.4%) minmax(0, 1fr); column-gap: 74px; align-items: center; margin-top: 52px; }
.tl-wrap .tl-media { position: relative; width: 100%; aspect-ratio: 655 / 376; overflow: hidden; background: #0c1526; transform-style: preserve-3d; will-change: transform; transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.tl-wrap .tl-media.is-tilting { transition: transform .12s linear; }
.tl-wrap .tl-media::after { content: ''; position: absolute; inset: 0; z-index: 5; pointer-events: none; background: radial-gradient(500px circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.12), transparent 60%); opacity: 0; transition: opacity .4s ease; }
.tl-wrap .tl-media.is-tilting::after { opacity: 1; }
.tl-wrap .tl-img { position: absolute; inset: 0; overflow: hidden; visibility: hidden; }
.tl-wrap .tl-img img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.tl-wrap .tl-img.is-active { z-index: 2; }
.tl-wrap .tl-img.is-active, .tl-wrap .tl-img.is-leaving { visibility: visible; }
.tl-wrap .tl-img.is-leaving { z-index: 1; }
.tl-wrap .tl-info { display: grid; min-width: 0; }
.tl-wrap .tl-slide { grid-area: 1 / 1; min-width: 0; visibility: hidden; }
.tl-wrap .tl-slide.is-active, .tl-wrap .tl-slide.is-leaving { visibility: visible; }
/* masks (padding/negative margin keeps outline + descenders un-clipped without shifting layout) */
.tl-wrap .tl-m { overflow: hidden; display: block; padding-block: .1em; margin-block: -.1em; }
.tl-wrap .tl-mi { display: block; will-change: transform; }
.tl-wrap .tl-year {
color: transparent; -webkit-text-stroke: 2px #2EE27A; font-family: 'Poppins', sans-serif; font-size: 92px; font-weight: 800; line-height: 1; letter-spacing: -.04em;
paint-order: stroke fill;
}
.tl-wrap .tl-m-y { margin-bottom: 26px; }
.tl-wrap .tl-title { max-width: 420px; margin-bottom: 18px; color: #fff; font-family: 'Poppins', sans-serif; font-size: 34px; font-weight: 700; line-height: 1.3; }
.tl-wrap .tl-title.tl-m { padding-block: .08em; margin-block: -.08em 18px; }
.tl-wrap .tl-text { max-width: 440px; color: rgba(255,255,255,.6); font-family: 'Inter', sans-serif; font-size: 17px; font-weight: 400; line-height: 1.7; }
.tl-wrap .tl-text.tl-m { padding-block: .06em; margin-block: -.06em; }
/* =====================================================
ANIMATIONS (only when "Enable Animations" is on)
===================================================== */
/* hidden start states */
.tl-wrap.tl-anim .tl-heading .w { transform: translateY(112%); }
.tl-wrap.tl-anim .tl-btn { opacity: 0; transform: scale(.7); }
.tl-wrap.tl-anim .tl-line { transform: scaleX(0); }
.tl-wrap.tl-anim .tl-fill { opacity: 0; }
.tl-wrap.tl-anim .tl-arrow { opacity: 0; transform: scale(.4); }
.tl-wrap.tl-anim .tl-label { opacity: 0; transform: translateY(14px); }
.tl-wrap.tl-anim .tl-dot { opacity: 0; }
.tl-wrap.tl-anim .tl-ring { opacity: 0; transform: scale(.2); transition: left .8s cubic-bezier(.65,.05,.2,1); }
.tl-wrap.tl-anim .tl-img img { transform: scale(1.3); }
.tl-wrap.tl-anim .tl-slide .tl-mi { transform: translateY(115%); }
/* image start states per transition style */
.tl-wrap.tl-anim.tl-fx-wipe .tl-img { clip-path: inset(0 100% 0 0); }
.tl-wrap.tl-anim.tl-fx-curtain .tl-img { clip-path: inset(100% 0 0 0); }
.tl-wrap.tl-anim.tl-fx-blinds .tl-img { clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); }
.tl-wrap.tl-anim.tl-fx-zoom .tl-img { opacity: 0; }
.tl-wrap.tl-anim.tl-fx-zoom .tl-img img { transform: scale(1.15); }
/* intro (runs once when scrolled into view) */
.tl-wrap.tl-anim.tl-in .tl-heading .w { animation: tlMaskUp 1s cubic-bezier(.2,.7,.2,1) calc(.1s + var(--w, 0) * .08s) forwards; }
.tl-wrap.tl-anim.tl-in .tl-btn { animation: tlPop .9s cubic-bezier(.34,1.56,.64,1) .7s forwards; }
.tl-wrap.tl-anim.tl-in .tl-line { animation: tlLine 1.3s cubic-bezier(.65,.05,.2,1) .5s forwards; }
.tl-wrap.tl-anim.tl-in .tl-fill { animation: tlFade .8s ease 1.5s forwards; }
.tl-wrap.tl-anim.tl-in .tl-arrow { animation: tlPop .8s cubic-bezier(.34,1.56,.64,1) .7s forwards; }
.tl-wrap.tl-anim.tl-in .tl-next { animation-delay: .85s; }
.tl-wrap.tl-anim.tl-in .tl-label { animation: tlLabel .8s cubic-bezier(.2,.7,.2,1) calc(.8s + var(--k, 0) * .09s) forwards; }
.tl-wrap.tl-anim.tl-in .tl-dot { animation: tlFade .6s ease calc(.9s + var(--k, 0) * .09s) forwards; }
.tl-wrap.tl-anim.tl-in .tl-ring { animation: tlRingIn .9s cubic-bezier(.34,1.56,.64,1) 1.1s forwards; }
/* the active label stays slightly raised even after the intro animation (forwards fill) */
.tl-wrap.tl-anim.tl-in .tl-item.is-current .tl-label { animation: tlLabelCur .8s cubic-bezier(.2,.7,.2,1) calc(.8s + var(--k, 0) * .09s) forwards; }
.tl-wrap.tl-anim.tl-in .tl-item:not(.is-current) .tl-label { animation: tlLabel .8s cubic-bezier(.2,.7,.2,1) calc(.8s + var(--k, 0) * .09s) forwards; }
/* slide in - image */
.tl-wrap.tl-anim.tl-in.tl-fx-wipe .tl-img.is-active { animation: tlImgIn .95s cubic-bezier(.65,.05,.2,1) .45s forwards; }
.tl-wrap.tl-anim.tl-in.tl-fx-curtain .tl-img.is-active { animation: tlImgInUp 1s cubic-bezier(.65,.05,.2,1) .45s forwards; }
.tl-wrap.tl-anim.tl-in.tl-fx-blinds .tl-img.is-active { animation: tlImgInBlinds 1.05s cubic-bezier(.65,.05,.2,1) .45s forwards; }
.tl-wrap.tl-anim.tl-in.tl-fx-zoom .tl-img.is-active { animation: tlImgInFade .9s ease .45s forwards; }
.tl-wrap.tl-anim.tl-in .tl-img.is-active img { animation: tlImgSettle 1.6s cubic-bezier(.2,.7,.2,1) .45s forwards; }
.tl-wrap.tl-anim.tl-in.tl-ken .tl-img.is-active img { animation: tlImgSettle 1.6s cubic-bezier(.2,.7,.2,1) .45s forwards, tlKen 9s ease-in-out 2.1s infinite alternate; }
/* slide in - text */
.tl-wrap.tl-anim.tl-in .tl-slide.is-active .tl-m-y .tl-mi { animation: tlMaskUp .9s cubic-bezier(.2,.7,.2,1) .35s forwards; }
.tl-wrap.tl-anim.tl-in .tl-slide.is-active .tl-m-t .tl-mi { animation: tlMaskUp .9s cubic-bezier(.2,.7,.2,1) .5s forwards; }
.tl-wrap.tl-anim.tl-in .tl-slide.is-active .tl-m-p .tl-mi { animation: tlMaskUp .95s cubic-bezier(.2,.7,.2,1) .65s forwards; }
/* slide out */
.tl-wrap.tl-anim.tl-fx-wipe .tl-img.is-leaving { animation: tlImgOut .55s cubic-bezier(.65,.05,.2,1) forwards; }
.tl-wrap.tl-anim.tl-fx-curtain .tl-img.is-leaving { animation: tlImgOutUp .55s cubic-bezier(.65,.05,.2,1) forwards; }
.tl-wrap.tl-anim.tl-fx-blinds .tl-img.is-leaving { animation: tlImgOutBlinds .55s cubic-bezier(.65,.05,.2,1) forwards; }
.tl-wrap.tl-anim.tl-fx-zoom .tl-img.is-leaving { animation: tlImgOutFade .55s ease forwards; }
.tl-wrap.tl-anim .tl-img.is-leaving img { animation: none; transform: scale(1); }
.tl-wrap.tl-anim .tl-slide.is-leaving .tl-mi { animation: tlMaskOut .5s cubic-bezier(.5,0,.75,0) forwards; }
.tl-wrap.tl-anim .tl-slide.is-leaving .tl-m-t .tl-mi { animation-delay: .05s; }
.tl-wrap.tl-anim .tl-slide.is-leaving .tl-m-p .tl-mi { animation-delay: .1s; }
/* --- Keyframes --- */
@keyframes tlMaskUp { from { transform: translateY(115%); } to { transform: translateY(0); } }
@keyframes tlMaskOut { from { transform: translateY(0); } to { transform: translateY(-115%); } }
@keyframes tlImgIn { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes tlImgOut { from { clip-path: inset(0 0 0 0); } to { clip-path: inset(0 0 0 100%); } }
@keyframes tlImgInUp { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes tlImgOutUp { from { clip-path: inset(0 0 0 0); } to { clip-path: inset(0 0 100% 0); } }
@keyframes tlImgInBlinds { from { clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); } to { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); } }
@keyframes tlImgOutBlinds { from { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); } to { clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%); } }
@keyframes tlImgInFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes tlImgOutFade { from { opacity: 1; } to { opacity: 0; } }
@keyframes tlImgSettle{ from { transform: scale(1.3); } to { transform: scale(1); } }
@keyframes tlKen { from { transform: scale(1); } to { transform: scale(1.07) translate(-1.2%, -1%); } }
@keyframes tlPop { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: scale(1); } }
@keyframes tlLine { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes tlLabel { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes tlLabelCur { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(-4px) scale(1.12); } }
@keyframes tlFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes tlRingIn { from { opacity: 0; transform: scale(.2); } to { opacity: 1; transform: scale(1); } }
/* --- Accessibility --- */
@media (prefers-reduced-motion: reduce) {
.tl-wrap *, .tl-wrap *::before, .tl-wrap *::after { animation: none !important; transition: none !important; }
.tl-wrap.tl-anim .tl-heading .w, .tl-wrap.tl-anim .tl-slide .tl-mi, .tl-wrap.tl-anim .tl-img img { transform: none; }
.tl-wrap.tl-anim .tl-btn, .tl-wrap.tl-anim .tl-arrow, .tl-wrap.tl-anim .tl-label, .tl-wrap.tl-anim .tl-dot, .tl-wrap.tl-anim .tl-ring, .tl-wrap.tl-anim .tl-fill { opacity: 1; transform: none; }
.tl-wrap.tl-anim .tl-line { transform: none; }
.tl-wrap.tl-anim .tl-img { clip-path: none; opacity: 1; }
.tl-wrap .tl-prev svg { transform: translateX(-4px); }
.tl-wrap .tl-next svg { transform: translateX(4px); }
}
/* =====================================================
>>> EVERYTHING ABOVE = DESKTOP (unchanged) <<<
===================================================== */
/* =====================================================
TABLET (up to 1024px)
image + text stay side by side while there is room
===================================================== */
@media (max-width: 1024px) {
.tl-wrap .tl-head { gap: 24px; margin-bottom: 84px; }
.tl-wrap .tl-btn { margin-top: 4px; gap: 12px; }
.tl-wrap .tl-btn-ico { width: 22px; height: 22px; }
.tl-wrap .tl-label { bottom: calc(50% + 20px); }
.tl-wrap .tl-dot { width: 24px; }
.tl-wrap .tl-ring { width: 24px; height: 24px; margin: -12px 0 0 -12px; }
.tl-wrap .tl-arrow svg { width: 8px; height: 8px; }
.tl-wrap .tl-body { row-gap: 32px; touch-action: pan-y; }
.tl-wrap .tl-m-y { margin-bottom: 20px; }
.tl-wrap .tl-title.tl-m { margin-block: -.08em 14px; }
/* labels: no blink when the active item changes on touch / small screens */
.tl-wrap.tl-anim .tl-label { opacity: 1; transform: translateY(0); animation: none !important; }
.tl-wrap.tl-anim .tl-item.is-current .tl-label { transform: translateY(-4px) scale(1.12); }
.tl-wrap .tl-orb-1 { width: 300px; height: 300px; filter: blur(90px); }
.tl-wrap .tl-orb-2 { width: 260px; height: 260px; filter: blur(90px); }
}
/* =====================================================
SMALL TABLET (up to 899px) -> image on top, text below
===================================================== */
@media (max-width: 899px) {
.tl-wrap .tl-body { grid-template-columns: minmax(0, 1fr); row-gap: 30px; }
.tl-wrap .tl-info { max-width: 640px; }
}
/* =====================================================
MOBILE (up to 767px)
===================================================== */
@media (max-width: 767px) {
.tl-wrap .tl-container { width: 90%; }
/* header: heading, then a compact button underneath */
.tl-wrap .tl-head { flex-direction: column; align-items: flex-start; gap: 20px; }
.tl-wrap .tl-heading { line-height: 1.22; }
.tl-wrap .tl-btn { margin-top: 0; gap: 10px; }
.tl-wrap .tl-btn-ico { width: 20px; height: 20px; }
.tl-wrap .tl-btn-ico svg { width: 10px; height: 10px; }
/* timeline: compact arrows, breathing room around the track */
.tl-wrap .tl-track { margin-inline: 6px; }
.tl-wrap .tl-item { width: 56px; margin-left: -28px; }
.tl-wrap .tl-label { bottom: calc(50% + 17px); }
.tl-wrap .tl-dot { width: 18px; }
.tl-wrap .tl-ring { width: 20px; height: 20px; margin: -10px 0 0 -10px; }
.tl-wrap .tl-ring i { width: 3px; height: 3px; }
.tl-wrap .tl-arrow svg { width: 7px; height: 7px; }
.tl-wrap .tl-prev svg { transform: translateX(-3px); }
.tl-wrap .tl-next svg { transform: translateX(3px); }
.tl-wrap .tl-item.is-current .tl-label { transform: translateY(-3px) scale(1.1); }
.tl-wrap.tl-anim .tl-item.is-current .tl-label { transform: translateY(-3px) scale(1.1); }
/* more than 6 items: show only the active label so nothing overlaps */
.tl-wrap.tl-many .tl-item:not(.is-current) .tl-label { display: none; }
/* content */
.tl-wrap .tl-body { row-gap: 26px; }
.tl-wrap .tl-m-y { margin-bottom: 16px; }
.tl-wrap .tl-title.tl-m { margin-block: -.08em 12px; }
.tl-wrap .tl-text { max-width: 100%; }
/* lighter background glow on phones */
.tl-wrap .tl-orb-1 { width: 220px; height: 220px; filter: blur(70px); top: -80px; right: -70px; }
.tl-wrap .tl-orb-2 { width: 200px; height: 200px; filter: blur(70px); bottom: -80px; left: -70px; }
}
/* very small phones */
@media (max-width: 380px) {
.tl-wrap .tl-container { width: 92%; }
.tl-wrap .tl-item { width: 48px; margin-left: -24px; }
}
/* touch screens: no sticky hover colours after a tap */
@media (hover: none) {
.tl-wrap .tl-arrow:hover:not(:disabled) { background-color: transparent; border-color: var(--tl-ink); color: var(--tl-ink); transform: none; }
.tl-wrap .tl-arrow:active:not(:disabled) { background-color: var(--tl-lime); border-color: var(--tl-lime); color: #04070d; transform: scale(.94); }
.tl-wrap .tl-btn:hover { transform: none; box-shadow: 0 14px 28px -12px rgba(46,226,122,.4); filter: none; }
.tl-wrap .tl-btn:hover::before { transform: translateY(101%); }
.tl-wrap .tl-btn:hover .tl-btn-ico { background: rgba(4,7,13,.25); color: #fff; transform: none; }
.tl-wrap .tl-item:hover .tl-label { transform: none; }
.tl-wrap .tl-item.is-current:hover .tl-label { transform: translateY(-4px) scale(1.12); }
}
/* home page banner*/
/* ==========================================================================
Hektrova - Digital Agency Showcase Widget Styles
========================================================================== */
/* ============================================================
Hektrova - Digital Agency Showcase | v2
v2 changes: premium TABLET + MOBILE layout added.
Desktop (>1024px) is 100% UNTOUCHED — every change below
lives inside @media queries, and the mobile/tablet blocks
use slightly higher specificity (.ag-wrap .ag-grid ...) so
the premium layout reliably wins over Elementor's default
control output on phones/tablets only.
============================================================ */
/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Inter:wght@400;500;600&display=swap');
/* Low-specificity selectors so Elementor Typography / Spacing / Color controls always win */
.ag-wrap {
--ag-num: #2EE27A;
--ag-check: #2EE27A;
--ag-glow1: rgba(46, 226, 122, 0.15);
--ag-glow2: rgba(12, 21, 38, 0.8);
--ag-btn-bg: #2EE27A;
--ag-btn-text: #04100a;
position: relative; overflow: hidden; overflow: clip;
padding: 70px 0; background: #04070d; color: #fff;
font-family: 'Inter', sans-serif;
}
.ag-wrap * { box-sizing: border-box; }
.ag-wrap h2, .ag-wrap p, .ag-wrap ul { margin: 0; padding: 0; }
.ag-wrap ul { list-style: none; }
/* --- Wavy background --- */
.ag-wrap .ag-waves { position: absolute; inset: -4% 0; width: 100%; height: 108%; pointer-events: none; z-index: 0; }
.ag-wrap .ag-waves path { stroke: rgba(46, 226, 122, 0.05); }
.ag-wrap .ag-container { position: relative; z-index: 1; width: 92%; max-width: 1000px; margin-inline: auto; }
/* --- Glows --- */
.ag-wrap .ag-glow { position: absolute; border-radius: 50%; pointer-events: none; filter: blur(34px); z-index: 0; }
.ag-wrap .ag-glow-1 { left: 4%; top: -4%; width: 280px; height: 280px; background: radial-gradient(circle, var(--ag-glow1), transparent 68%); }
.ag-wrap .ag-glow-2 { right: 2%; bottom: -10%; width: 340px; height: 340px; background: radial-gradient(circle, var(--ag-glow2), transparent 68%); }
.ag-wrap .ag-grid { position: relative; z-index: 1; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 40px 56px; align-items: center; }
/* ============ CAPSULE ============ */
.ag-wrap .ag-pillwrap { transform: translate(calc(var(--mx,0) * 10px), calc(var(--my,0) * 8px)); transition: transform .35s ease-out; }
.ag-wrap .ag-pill {
position: relative; width: 187px; aspect-ratio: 1 / 2.07; overflow: hidden; border-radius: 999px; background: #0c1526;
box-shadow: 0 34px 60px -26px rgba(0,0,0,.9);
}
.ag-wrap .ag-pill img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .9s cubic-bezier(.2,.7,.2,1); }
.ag-wrap .ag-pill:hover img { transform: scale(1.07); }
/* ============ CONTENT ============ */
.ag-wrap .ag-content { position: relative; }
.ag-wrap .ag-star { position: absolute; right: -36px; top: -34px; width: 118px; height: 118px; z-index: 0; pointer-events: none; transform-origin: 50% 50%; }
.ag-wrap .ag-star polygon { fill: #0c1526; }
.ag-wrap .ag-heading { position: relative; z-index: 1; color: #fff; font-family: 'Poppins', sans-serif; font-size: 54px; font-weight: 700; line-height: 1.15; }
.ag-wrap .ag-heading .w { display: inline-block; }
.ag-wrap .ag-desc { position: relative; z-index: 1; max-width: 420px; margin-top: 30px; color: rgba(255,255,255,0.6); font-size: 15px; line-height: 1.55; }
.ag-wrap .ag-row { position: relative; z-index: 1; display: flex; align-items: center; flex-wrap: wrap; gap: 18px 36px; margin-top: 34px; }
.ag-wrap .ag-small { flex: none; width: 146px; height: 61px; overflow: hidden; border-radius: 999px; background: #0c1526; box-shadow: 0 16px 30px -14px rgba(0,0,0,.9); }
.ag-wrap .ag-small img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.ag-wrap .ag-small:hover img { transform: scale(1.12); }
.ag-wrap .ag-list { display: flex; flex-direction: column; gap: 9px; }
.ag-wrap .ag-li { display: flex; align-items: center; gap: 9px; color: #fff; font-size: 12px; line-height: 1.4; }
.ag-wrap .ag-chk { flex: none; width: 15px; height: 15px; color: var(--ag-check); }
/* CTA button: phones only (see mobile section) */
.ag-wrap .ag-btn { display: none; }
/* ============ STATS ============ */
.ag-wrap .ag-stats { display: flex; flex-direction: column; gap: 22px; }
.ag-wrap .ag-stat { display: flex; align-items: center; gap: 22px; }
.ag-wrap .ag-stat-num { min-width: 96px; color: var(--ag-num); font-family: 'Poppins', sans-serif; font-size: 44px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.ag-wrap .ag-stat-label { color: rgba(255,255,255,0.6); font-size: 15px; font-weight: 400; line-height: 1.3; }
/* =====================================================
ANIMATIONS (only when "Enable Animations" is on)
===================================================== */
.ag-wrap .ag-waves g { animation: none; }
.ag-wrap.ag-anim .ag-waves g { animation: agWave 18s ease-in-out infinite alternate; }
.ag-wrap.ag-anim .ag-glow-1 { animation: agGlowA 9s ease-in-out infinite alternate; }
.ag-wrap.ag-anim .ag-glow-2 { animation: agGlowB 11s ease-in-out infinite alternate; }
.ag-wrap.ag-anim .ag-star { animation: agSpin 40s linear infinite; }
.ag-wrap.ag-anim .ag-rv { opacity: 0; }
.ag-wrap.ag-anim .ag-heading .w { opacity: 0; }
.ag-wrap.ag-anim .ag-pill { clip-path: inset(100% 0 0 0 round 999px); }
.ag-wrap.ag-anim .ag-pill img { transform: scale(1.35); }
.ag-wrap.ag-anim .ag-star { opacity: 0; }
.ag-wrap.ag-anim .ag-chk .tick { stroke-dasharray: 30; stroke-dashoffset: 30; }
.ag-wrap.ag-anim.ag-in .ag-pill { animation: agRise 1.3s cubic-bezier(.65,.05,.2,1) .1s forwards, agFloat 7s ease-in-out 1.6s infinite; }
.ag-wrap.ag-anim.ag-in .ag-pill img { transform: scale(1); transition: transform 2s cubic-bezier(.2,.7,.2,1) .1s; }
.ag-wrap.ag-anim.ag-in .ag-star { animation: agStarIn 1.1s cubic-bezier(.34,1.56,.64,1) .3s forwards, agSpin 40s linear 1.4s infinite; }
.ag-wrap.ag-anim.ag-in .ag-heading .w { animation: agWord .85s cubic-bezier(.2,.7,.2,1) calc(.15s + var(--w, 0) * .1s) forwards; }
.ag-wrap.ag-anim.ag-in .ag-rv { animation: agUp .85s cubic-bezier(.2,.7,.2,1) var(--d, 0s) forwards; }
.ag-wrap.ag-anim.ag-in .ag-stat.ag-rv { animation-name: agLeft; }
.ag-wrap.ag-anim.ag-in .ag-li.ag-rv { animation-name: agLeft; }
.ag-wrap.ag-anim.ag-in .ag-small.ag-rv { animation-name: agPill; }
.ag-wrap.ag-anim.ag-in .ag-chk .tick { animation: agTick .6s ease calc(1s + var(--d, 0s)) forwards; }
.ag-wrap.ag-anim.ag-in .ag-li:nth-child(1) .tick { animation-delay: 1.1s; }
.ag-wrap.ag-anim.ag-in .ag-li:nth-child(2) .tick { animation-delay: 1.25s; }
.ag-wrap.ag-anim.ag-in .ag-li:nth-child(3) .tick { animation-delay: 1.4s; }
.ag-wrap.ag-anim.ag-in .ag-li:nth-child(4) .tick { animation-delay: 1.55s; }
.ag-wrap.ag-anim .ag-stat:hover .ag-stat-num { text-shadow: 0 0 24px color-mix(in srgb, var(--ag-num) 70%, transparent); }
/* --- Keyframes --- */
@keyframes agWave { from { transform: translate(-26px, -8px); } to { transform: translate(26px, 10px); } }
@keyframes agGlowA { from { transform: translate(0,0) scale(1); opacity: .75; } to { transform: translate(30px, 24px) scale(1.18); opacity: 1; } }
@keyframes agGlowB { from { transform: translate(0,0) scale(1); opacity: .7; } to { transform: translate(-34px, -24px) scale(1.2); opacity: 1; } }
@keyframes agSpin { to { transform: rotate(360deg); } }
@keyframes agRise { to { clip-path: inset(0 0 0 0 round 999px); } }
@keyframes agFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes agStarIn { from { opacity: 0; transform: scale(.2) rotate(-90deg); } to { opacity: 1; transform: scale(1) rotate(0); } }
@keyframes agWord { from { opacity: 0; transform: translateY(28px) rotate(2deg); filter: blur(6px); } to { opacity: 1; transform: translateY(0) rotate(0); filter: blur(0); } }
@keyframes agUp { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } }
@keyframes agLeft { from { opacity: 0; transform: translateX(34px); } to { opacity: 1; transform: translateX(0); } }
@keyframes agPill { from { opacity: 0; transform: translateX(-30px) scale(.8); } to { opacity: 1; transform: translateX(0) scale(1); } }
@keyframes agTick { to { stroke-dashoffset: 0; } }
@keyframes agNudge { 0%,100% { transform: translateX(0); } 50% { transform: translateX(3px); } }
/* --- Accessibility --- */
@media (prefers-reduced-motion: reduce) {
.ag-wrap.ag-anim *, .ag-wrap.ag-anim *::before, .ag-wrap.ag-anim *::after { animation: none !important; transition: none !important; }
.ag-wrap.ag-anim .ag-rv, .ag-wrap.ag-anim .ag-heading .w, .ag-wrap.ag-anim .ag-star { opacity: 1 !important; }
.ag-wrap.ag-anim .ag-pill { clip-path: none; }
.ag-wrap.ag-anim .ag-pill img { transform: none; }
.ag-wrap.ag-anim .ag-chk .tick { stroke-dashoffset: 0; }
.ag-wrap.ag-anim .ag-pillwrap::before { opacity: 1; }
}
/* Phones wait for the stats to scroll into view before revealing them (set by JS) */
.ag-wrap.ag-hold .ag-stat.ag-rv { animation-play-state: paused !important; }
/* =====================================================================
RESPONSIVE — v3
Desktop (>1024px) is untouched.
Note: Elementor outputs its control values with higher specificity than
this file, so sizes/fonts are set by the control defaults in the PHP;
this file handles layout, spacing, decoration and animation.
===================================================================== */
/* -----------------------------------------------------
TABLET (≤ 1024px)
Larger capsule + content side by side (vertically
centred). Stats become 3 equal glass cards below.
----------------------------------------------------- */
@media (max-width: 1024px) {
.ag-wrap .ag-grid { grid-template-columns: auto minmax(0, 1fr); row-gap: 48px; align-items: center; }
/* Capsule: offset outline ring gives depth */
.ag-wrap .ag-pillwrap { position: relative; }
.ag-wrap .ag-pillwrap::before {
content: ""; position: absolute; inset: 16px -14px -16px 14px; z-index: 0;
border-radius: 999px; pointer-events: none;
border: 1px solid color-mix(in srgb, var(--ag-check) 38%, transparent);
}
.ag-wrap .ag-pill { z-index: 1; width: 224px; aspect-ratio: 1 / 1.95; }
.ag-wrap.ag-anim .ag-pillwrap::before { opacity: 0; transition: opacity 1.2s ease .9s; }
.ag-wrap.ag-anim.ag-in .ag-pillwrap::before { opacity: 1; }
/* Content rhythm */
.ag-wrap .ag-content .ag-star { right: -8px; top: -34px; width: 104px; height: 104px; }
.ag-wrap .ag-content .ag-desc { margin-top: 24px; }
.ag-wrap .ag-content .ag-row { margin-top: 30px; row-gap: 20px; }
.ag-wrap .ag-content .ag-list { gap: 11px; }
/* Stats → 3 equal glass cards */
.ag-wrap .ag-grid .ag-stats { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ag-wrap .ag-grid .ag-stat {
position: relative; overflow: hidden;
flex-direction: column; justify-content: center; gap: 10px; text-align: center;
padding: 26px 12px 22px; border-radius: 20px;
background:
radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--ag-num) 9%, transparent), transparent 70%),
rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.07);
box-shadow: 0 16px 30px -22px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.ag-wrap .ag-grid .ag-stat::before {
content: ""; position: absolute; top: 0; left: 22%; right: 22%; height: 1px;
background: linear-gradient(90deg, transparent, var(--ag-num), transparent); opacity: .6;
}
.ag-wrap .ag-grid .ag-stat-num { min-width: 0; white-space: nowrap; }
/* Cards rise instead of sliding sideways */
.ag-wrap.ag-anim.ag-in .ag-grid .ag-stat.ag-rv { animation-name: agUp; }
}
/* -----------------------------------------------------
PHONES (≤ 767px)
Single centred column, in this order:
text-first (default): heading → description → button → capsule → checklist → stats
image-first: capsule → heading → description → button → checklist → stats
(the small pill image is hidden on phones unless "show small pill" is on)
.ag-content and .ag-row use display:contents so their children
can be re-ordered inside the main grid.
----------------------------------------------------- */
@media (max-width: 767px) {
.ag-wrap .ag-grid { grid-template-columns: minmax(0, 1fr); row-gap: 0; text-align: center; align-items: start; }
.ag-wrap .ag-grid .ag-content,
.ag-wrap .ag-grid .ag-row { display: contents; }
/* 1 · Heading + description */
.ag-wrap .ag-grid .ag-heading { order: 1; }
.ag-wrap .ag-grid .ag-desc { order: 2; margin: 18px auto 0; max-width: 100%; }
/* Star accent sits at the top-right corner of the block */
.ag-wrap .ag-grid .ag-star { right: 0; top: -30px; width: 68px; height: 68px; }
/* CTA button (replaces the small pill on phones) */
.ag-wrap .ag-grid .ag-btn {
order: 3; justify-self: center; display: inline-flex; align-items: center; justify-content: space-between; gap: 18px;
min-width: 230px; max-width: 100%; min-height: 58px; margin-top: 30px; padding: 7px 7px 7px 28px;
border-radius: 999px; text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
background: var(--ag-btn-bg); color: var(--ag-btn-text);
font-family: 'Inter', sans-serif; font-size: 16px; font-weight: 600; line-height: 1; letter-spacing: .1px;
box-shadow: 0 16px 34px -14px color-mix(in srgb, var(--ag-btn-bg) 75%, transparent), inset 0 1px 0 rgba(255,255,255,.35);
transition: filter .25s ease;
}
.ag-wrap .ag-grid .ag-btn:hover,
.ag-wrap .ag-grid .ag-btn:focus,
.ag-wrap .ag-grid .ag-btn:visited { color: var(--ag-btn-text); text-decoration: none; }
.ag-wrap .ag-grid .ag-btn:active { filter: brightness(.92); }
.ag-wrap .ag-grid .ag-btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.ag-wrap .ag-btn-ic { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--ag-btn-text); color: var(--ag-btn-bg); }
.ag-wrap .ag-btn-ic svg { width: 20px; height: 20px; }
.ag-wrap.ag-anim.ag-in .ag-btn-ic svg { animation: agNudge 1.8s ease-in-out 2s infinite; }
/* 2 · Capsule */
.ag-wrap .ag-grid .ag-pillwrap { order: 4; justify-self: center; margin: 46px 0 0; }
.ag-wrap .ag-pillwrap::before { inset: 12px -10px -12px 10px; }
.ag-wrap .ag-pill { width: 176px; aspect-ratio: 1 / 1.75; }
/* Image-first variant */
.ag-wrap.ag-mob-image .ag-grid .ag-pillwrap { order: 0; margin: 0 0 44px; }
.ag-wrap.ag-mob-image .ag-grid .ag-star { right: 6%; top: -22px; }
/* 3 · Small pill (hidden on phones unless enabled) + checklist card */
.ag-wrap .ag-grid .ag-small { display: none; order: 5; justify-self: center; width: 132px; height: 56px; margin-top: 36px; }
.ag-wrap.ag-mob-pill .ag-grid .ag-small { display: block; }
.ag-wrap .ag-grid .ag-list {
order: 6; justify-self: center; width: 100%; max-width: 340px; margin-top: 38px;
gap: 14px; padding: 20px 22px; text-align: left;
background: rgba(255, 255, 255, 0.035);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 20px;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.ag-wrap.ag-mob-pill .ag-grid .ag-list { margin-top: 22px; }
.ag-wrap .ag-grid .ag-li { gap: 12px; align-items: flex-start; }
.ag-wrap .ag-grid .ag-chk { width: 17px; height: 17px; margin-top: 1px; }
/* 4 · Stats: 3 compact cards in a row */
.ag-wrap .ag-grid .ag-stats { order: 7; margin-top: 40px; }
.ag-wrap .ag-grid .ag-stat { gap: 8px; padding: 20px 6px 17px; border-radius: 16px; }
.ag-wrap .ag-grid .ag-stat-label { line-height: 1.35; }
/* Glows follow the capsule */
.ag-wrap .ag-glow-1 { left: 50%; top: 38%; margin-left: -140px; }
.ag-wrap.ag-mob-image .ag-glow-1 { top: 0; }
.ag-wrap .ag-glow-2 { right: -18%; bottom: -6%; }
/* Lighter background = smoother scrolling on phones */
.ag-wrap .ag-glow { filter: blur(26px); }
.ag-wrap .ag-waves { opacity: 0.85; }
.ag-wrap .ag-waves path:nth-child(even) { display: none; }
.ag-wrap.ag-anim .ag-waves g { will-change: transform; }
/* Everything rises vertically on phones */
.ag-wrap.ag-anim.ag-in .ag-grid .ag-stat.ag-rv,
.ag-wrap.ag-anim.ag-in .ag-grid .ag-li.ag-rv,
.ag-wrap.ag-anim.ag-in .ag-grid .ag-small.ag-rv { animation-name: agUp; }
}
/* Large phones / small tablets in portrait (520–767px) */
@media (min-width: 520px) and (max-width: 767px) {
.ag-wrap .ag-grid .ag-list { max-width: 400px; }
.ag-wrap .ag-grid .ag-desc { max-width: 460px; }
.ag-wrap .ag-grid .ag-stats { gap: 14px; }
.ag-wrap .ag-grid .ag-stat { padding: 24px 10px 20px; }
}
/* -----------------------------------------------------
SMALL PHONES (≤ 400px)
!important is intentional here: Elementor's generated
font-size rules would otherwise win, and "1,200+" must
never overflow its card.
----------------------------------------------------- */
@media (max-width: 400px) {
.ag-wrap .ag-pill { width: 164px; }
.ag-wrap .ag-grid .ag-star { width: 60px; height: 60px; top: -26px; }
.ag-wrap .ag-grid .ag-stat { padding: 17px 4px 15px; border-radius: 14px; }
.ag-wrap .ag-grid .ag-stat-num { font-size: 26px !important; }
.ag-wrap .ag-grid .ag-stat-label { font-size: 11px !important; }
.ag-wrap .ag-grid .ag-btn { min-width: 210px; font-size: 15px; }
}
@media (max-width: 340px) {
.ag-wrap .ag-grid .ag-stat-num { font-size: 22px !important; }
.ag-wrap .ag-grid .ag-list { padding: 16px 16px; }
}
/* ==========================================================================
Stark - Brands Marquee Widget Styles
========================================================================== */
/* NOTE: The original inline CSS used dynamic #widget-id selectors. They were
converted to the .stark-brands class so the file works for every instance
and Elementor's Color / Typography controls can override the defaults. */
/* Hektrova - Brands Marquee
Keep this file in the SAME folder as the widget PHP file.
Fonts: uses Inter (load it in your theme, or uncomment the next line). */
/* @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap'); */
.hbm-wrap {
--hbm-speed: 30s;
--hbm-accent: #2EE27A;
--hbm-blue: #1f6fe0;
--hbm-border: rgba(255, 255, 255, 0.08);
--hbm-gap: 80px;
--hbm-op: .6;
--hbm-fade: 8%;
position: relative; overflow: hidden; overflow: clip;
padding: 34px 30px; background: #04050d; color: #fff;
border-bottom: 1px solid var(--hbm-border);
font-family: 'Inter', sans-serif;
}
.hbm-wrap * { box-sizing: border-box; }
/* ---------- Glowing top line ---------- */
.hbm-wrap.hbm-line::before {
content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; z-index: 2; pointer-events: none;
background: linear-gradient(90deg, transparent, var(--hbm-blue) 25%, var(--hbm-accent) 50%, var(--hbm-blue) 75%, transparent);
box-shadow: 0 0 14px 1px color-mix(in srgb, var(--hbm-accent) 45%, transparent);
}
/* ---------- Layout ---------- */
.hbm-wrap .hbm-inner {
position: relative; z-index: 1; display: grid; grid-template-columns: auto minmax(0, 1fr);
align-items: center; gap: 34px; max-width: 1320px; margin-inline: auto;
}
.hbm-wrap .hbm-label {
color: var(--hbm-accent); font-size: 13px; font-weight: 700; letter-spacing: 2px; line-height: 1.5;
text-transform: uppercase; white-space: nowrap;
padding-right: 34px; border-right: 1px solid var(--hbm-border);
}
/* ---------- Marquee ---------- */
.hbm-wrap .hbm-marquee { display: flex; overflow: hidden; min-width: 0; }
.hbm-wrap.hbm-fade .hbm-marquee {
-webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--hbm-fade), #000 calc(100% - var(--hbm-fade)), transparent);
mask-image: linear-gradient(90deg, transparent, #000 var(--hbm-fade), #000 calc(100% - var(--hbm-fade)), transparent);
}
.hbm-wrap .hbm-group {
flex: none; display: flex; align-items: center; gap: var(--hbm-gap); padding-right: var(--hbm-gap);
animation: hbmScroll var(--hbm-speed) linear infinite; will-change: transform;
}
.hbm-wrap.hbm-rev .hbm-group { animation-direction: reverse; }
@media (hover: hover) {
.hbm-wrap.hbm-pause .hbm-marquee:hover .hbm-group { animation-play-state: paused; }
}
/* touch: press & hold pauses */
.hbm-wrap.hbm-pause .hbm-marquee:active .hbm-group { animation-play-state: paused; }
@keyframes hbmScroll { to { transform: translateX(-100%); } }
.hbm-wrap .hbm-item { flex: none; display: flex; align-items: center; text-decoration: none; -webkit-tap-highlight-color: transparent; }
.hbm-wrap .hbm-item img {
display: block; width: auto; height: 40px; max-width: 160px; object-fit: contain;
opacity: var(--hbm-op); transition: opacity .3s ease, transform .3s ease; user-select: none; -webkit-user-drag: none;
}
@media (hover: hover) {
.hbm-wrap .hbm-item:hover img { opacity: 1; transform: scale(1.06); }
}
/* ---------- Entrance animation (only with "Enable Animations") ---------- */
.hbm-wrap.hbm-anim .hbm-label,
.hbm-wrap.hbm-anim .hbm-marquee { opacity: 0; transform: translateY(14px); transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); }
.hbm-wrap.hbm-anim .hbm-marquee { transition-delay: .2s; }
.hbm-wrap.hbm-anim.hbm-in .hbm-label,
.hbm-wrap.hbm-anim.hbm-in .hbm-marquee { opacity: 1; transform: none; }
.hbm-wrap.hbm-anim.hbm-line::before { transform: scaleX(0); transition: transform 1.4s cubic-bezier(.2,.7,.2,1); }
.hbm-wrap.hbm-anim.hbm-line.hbm-in::before { transform: scaleX(1); }
/* ---------- Accessibility ---------- */
@media (prefers-reduced-motion: reduce) {
.hbm-wrap .hbm-group { animation: none; }
.hbm-wrap .hbm-marquee { overflow-x: auto; scrollbar-width: none; }
.hbm-wrap .hbm-marquee::-webkit-scrollbar { display: none; }
.hbm-wrap .hbm-group[aria-hidden="true"] { display: none; }
.hbm-wrap.hbm-anim .hbm-label, .hbm-wrap.hbm-anim .hbm-marquee { opacity: 1; transform: none; transition: none; }
.hbm-wrap.hbm-anim.hbm-line::before { transform: none; transition: none; }
}
/* =====================================================================
RESPONSIVE
Elementor writes its control values with higher specificity, so sizes
(logo height, gaps, padding) come from the control defaults in the PHP.
This file handles layout, label styling, fades and touch behaviour.
===================================================================== */
/* ---------- TABLET (≤ 1024px) ----------
Label stays on the left but wraps to two lines so the logos get more room. */
@media (max-width: 1024px) {
.hbm-wrap { --hbm-fade: 10%; }
.hbm-wrap .hbm-label { white-space: normal; max-width: 190px; font-size: 12.5px; letter-spacing: 1.8px; padding-right: 26px; }
}
/* ---------- PHONES (≤ 767px) ----------
Stacked: label centred between two fading lines, logos run full width below. */
@media (max-width: 767px) {
.hbm-wrap { --hbm-fade: 14%; }
.hbm-wrap .hbm-inner { grid-template-columns: minmax(0, 1fr); }
.hbm-wrap .hbm-label {
display: flex; align-items: center; justify-content: center; gap: 14px;
max-width: 100%; padding: 0; border: 0; text-align: center; white-space: normal;
font-size: 11.5px; letter-spacing: 2px;
}
.hbm-wrap .hbm-label::before,
.hbm-wrap .hbm-label::after {
content: ""; flex: 1 1 0; min-width: 18px; height: 1px;
background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--hbm-accent) 45%, transparent));
}
.hbm-wrap .hbm-label::after { transform: scaleX(-1); }
.hbm-wrap .hbm-item img { max-width: 120px; }
}
/* ---------- SMALL PHONES (≤ 380px) ---------- */
@media (max-width: 380px) {
.hbm-wrap .hbm-label { font-size: 10.5px; letter-spacing: 1.6px; gap: 10px; }
}
/* Contact page real*/
/* ==========================================================================
Hektrova - Contact Page Widget Styles
========================================================================== */
/* Google Fonts (moved here from the old tag in the widget) */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Inter:wght@400;500;600&display=swap');
/* Low-specificity selectors so Elementor Typography / Spacing / Color controls always win */
.ct-wrap {
--ct-accent: #2EE27A;
--ct-g1: #2EE27A;
--ct-g2: #28B45A;
--ct-eyebrow: #2EE27A;
--ct-line: rgba(255,255,255,.05);
--ct-glow1: rgba(46, 226, 122, 0.15);
--ct-glow2: rgba(12, 21, 38, 0.8);
/* ==========================================================================
vvv RECONSTRUCTED (original file was cut off here) vvv
========================================================================== */
position: relative; overflow: hidden; overflow: clip; background: #04070d; color: #fff;
font-family: 'Inter', sans-serif;
}
.ct-wrap * { box-sizing: border-box; }
.ct-wrap a, .ct-wrap a:hover, .ct-wrap a:focus { text-decoration: none; }
.ct-wrap h1, .ct-wrap h2, .ct-wrap h3, .ct-wrap p { margin: 0; padding: 0; }
.ct-wrap button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; -webkit-appearance: none; appearance: none; box-shadow: none; text-transform: none; }
/* ============ BANNER ============ */
.ct-wrap .ct-banner { position: relative; display: flex; align-items: center; justify-content: center; text-align: center; min-height: 300px; overflow: hidden; background: #030303; isolation: isolate; }
.ct-wrap .ct-bn-art {
position: absolute; inset: -20%; z-index: -4; transform-origin: 100% 0;
background:
radial-gradient(ellipse 40% 55% at 48% 72%, rgba(46,226,122,.20), transparent 70%),
repeating-radial-gradient(ellipse 130% 190% at 112% -25%, #060607 0, #060607 14px, #1d1e21 26px, #2c2d31 34px, #0c0c0e 50px, #060607 62px);
animation: ctSwirl 22s ease-in-out infinite alternate;
}
.ct-wrap .ct-bn-art.has-img { inset: 0; background-size: cover; background-position: center; animation: ctKen 26s ease-in-out infinite alternate; }
.ct-wrap .ct-bn-glow {
position: absolute; inset: 0; z-index: -2; pointer-events: none;
background: radial-gradient(ellipse 36% 60% at 50% 100%, color-mix(in srgb, var(--ct-accent) 30%, transparent), transparent 70%);
animation: ctPulse 6s ease-in-out infinite;
}
.ct-wrap .ct-bn-shade {
position: absolute; inset: 0; z-index: -1; pointer-events: none;
background: linear-gradient(90deg, rgba(0,0,0,.94) 0%, rgba(0,0,0,.6) 38%, transparent 78%), linear-gradient(180deg, transparent 55%, rgba(0,0,0,.7));
}
.ct-wrap .ct-bn-dots { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.ct-wrap .ct-bn-dots i { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: var(--ct-accent); opacity: 0; box-shadow: 0 0 12px var(--ct-accent); animation: ctDrift 7s ease-in-out infinite; }
.ct-wrap .ct-bn-inner { position: relative; padding: 40px 20px; }
.ct-wrap .ct-bn-title { color: #fff; font-family: 'Poppins', sans-serif; font-size: 44px; font-weight: 700; line-height: 1.15; perspective: 600px; }
.ct-wrap .ct-bn-title .w { display: inline-block; white-space: nowrap; }
.ct-wrap .ct-bn-title .ch { display: inline-block; }
.ct-wrap .ct-crumb {
display: inline-flex; align-items: center; gap: 14px; margin-top: 22px; padding: 12px 26px;
background-color: rgba(255,255,255,.07); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
border-radius: 3px; color: #fff; font-size: 14px; font-weight: 500;
}
.ct-wrap .ct-crumb a { color: #fff; transition: color .3s ease; }
.ct-wrap .ct-crumb a:hover { color: var(--ct-accent); }
.ct-wrap .ct-crumb-arrow { flex: none; width: 13px; height: 13px; }
.ct-wrap .ct-crumb .cur { color: var(--ct-accent); text-decoration: underline; text-underline-offset: 3px; }
/* ============ MAIN ============ */
.ct-wrap .ct-main { position: relative; overflow: hidden; padding: 80px 0 100px; background: #04070d; }
.ct-wrap .ct-glow { position: absolute; border-radius: 50%; pointer-events: none; filter: blur(40px); z-index: 0; }
.ct-wrap .ct-glow-1 { top: 20%; left: -12%; width: 640px; height: 640px; background: radial-gradient(circle, var(--ct-glow1), transparent 66%); }
.ct-wrap .ct-glow-2 { bottom: -20%; right: -10%; width: 700px; height: 700px; background: radial-gradient(circle, var(--ct-glow2), transparent 68%); }
.ct-wrap .ct-container { position: relative; z-index: 1; width: 92%; max-width: 1140px; margin-inline: auto; }
/* ============ INTRO + SOCIAL ============ */
.ct-wrap .ct-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 40px; align-items: center; }
.ct-wrap .ct-eyebrow { display: inline-flex; align-items: center; gap: 12px; color: var(--ct-eyebrow); font-family: 'Poppins', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: .4px; }
.ct-wrap .ct-lines { position: relative; display: inline-block; width: 40px; height: 6px; flex: none; }
.ct-wrap .ct-lines i { position: absolute; left: 0; display: block; height: 1.5px; background: var(--ct-eyebrow); transform-origin: left; }
.ct-wrap .ct-lines i:first-child { top: 0; width: 40px; }
.ct-wrap .ct-lines i:last-child { top: 4px; width: 28px; opacity: .75; }
.ct-wrap .ct-heading { color: #fff; font-family: 'Poppins', sans-serif; font-size: 38px; font-weight: 700; line-height: 1.2; }
.ct-wrap .ct-heading .w { display: inline-block; }
.ct-wrap .ct-social { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.ct-wrap .ct-social a {
display: grid; place-items: center; width: 31px; height: 31px; border-radius: 50%;
border: 1px solid var(--ct-line); color: rgba(255,255,255,.6); background: transparent;
transition: color .3s ease, background-color .3s ease, border-color .3s ease, transform .35s cubic-bezier(.34,1.56,.64,1);
}
.ct-wrap .ct-social a:hover { color: #04070d; background: linear-gradient(135deg, var(--ct-g1), var(--ct-g2)); border-color: transparent; transform: translateY(-3px); }
.ct-wrap .ct-social svg { width: 14px; height: 14px; }
/* ============ INFO CARDS ============ */
.ct-wrap .ct-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ct-wrap .ct-card {
display: flex; align-items: center; gap: 16px; padding: 20px; border: 1px solid var(--ct-line); border-radius: 4px; background: #0c1526;
transition: transform .4s cubic-bezier(.2,.7,.2,1), border-color .35s ease, box-shadow .35s ease;
}
.ct-wrap .ct-card:hover {
transform: translateY(-5px);
border-color: rgba(46,226,122,.35);
box-shadow: 0 18px 34px -18px rgba(0,0,0,.75), 0 0 24px -8px rgba(46,226,122,.14);
}
.ct-wrap .ct-card-ic {
position: relative; flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 4px; color: #fff;
background: linear-gradient(135deg, var(--ct-g1), var(--ct-g2)); box-shadow: 0 10px 22px -10px rgba(46,226,122,.5);
transition: transform .45s cubic-bezier(.34,1.56,.64,1), box-shadow .35s ease;
}
.ct-wrap .ct-card-ic::after { content: ''; position: absolute; inset: 0; border-radius: inherit; border: 1.5px solid var(--ct-accent); opacity: 0; pointer-events: none; }
.ct-wrap .ct-card-ic svg { display: block; width: 20px; height: 20px; overflow: visible; }
.ct-wrap .ct-card-ic i { font-size: 18px; color: #fff; }
.ct-wrap .ct-card-ic svg:not(.ct-ic-svg) { fill: #fff; }
.ct-wrap .ct-card:hover .ct-card-ic { transform: rotate(-8deg) scale(1.1); box-shadow: 0 14px 28px -10px rgba(46,226,122,.55); }
.ct-wrap .ct-card-body { min-width: 0; }
.ct-wrap .ct-card-title { margin-bottom: 4px; color: #fff; font-family: 'Poppins', sans-serif; font-size: 13px; font-weight: 600; }
.ct-wrap .ct-card-text { color: rgba(255,255,255,.6); font-size: 14px; line-height: 1.5; word-break: break-word; }
.ct-wrap .ct-card-text a { color: rgba(255,255,255,.6); transition: color .3s ease; }
.ct-wrap .ct-card-text a:hover { color: var(--ct-accent); }
/* ============ BOTTOM : FORM + MAP ============ */
.ct-wrap .ct-bottom { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 40px; margin-top: 70px; align-items: stretch; }
.ct-wrap .ct-form-card {
position: relative; z-index: 1; padding: 40px; border: 1px solid var(--ct-line); border-radius: 4px; background: #0c1526;
box-shadow: 0 34px 70px -30px rgba(0,0,0,.85);
}
.ct-wrap .ct-form-card::before {
content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
background: linear-gradient(90deg, var(--ct-g1), var(--ct-g2)); transform-origin: left;
}
.ct-wrap .ct-form-title { color: #fff; font-family: 'Poppins', sans-serif; font-size: 30px; font-weight: 700; line-height: 1.2; }
.ct-wrap .ct-sc { width: 100%; }
.ct-wrap .ct-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 26px; }
.ct-wrap .ct-field.full { grid-column: 1 / -1; }
.ct-wrap .ct-field { position: relative; min-width: 0; }
.ct-wrap .ct-field input, .ct-wrap .ct-field select, .ct-wrap .ct-field textarea {
width: 100%; height: 42px; padding: 0 16px; border: 1px solid var(--ct-line); border-radius: 4px;
background: rgba(255,255,255,.02); color: #fff; font-family: 'Poppins', sans-serif; font-size: 13px; font-weight: 400;
outline: none; transition: border-color .3s ease, box-shadow .3s ease, background-color .3s ease;
}
.ct-wrap .ct-field textarea { height: auto; padding: 13px 16px; resize: vertical; min-height: 90px; }
.ct-wrap .ct-field input::placeholder, .ct-wrap .ct-field textarea::placeholder { color: rgba(255,255,255,.35); }
.ct-wrap .ct-field input:focus, .ct-wrap .ct-field select:focus, .ct-wrap .ct-field textarea:focus {
border-color: rgba(46,226,122,.55);
box-shadow: 0 0 0 3px rgba(46,226,122,.12);
background: rgba(46,226,122,.04);
}
.ct-wrap .ct-field select {
-webkit-appearance: none; appearance: none; cursor: pointer; padding-right: 38px; color: #fff;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%232EE27A' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-position: right 14px center; background-size: 12px;
}
.ct-wrap .ct-field select option { background: #0c1526; color: #fff; }
.ct-wrap .ct-hp { position: absolute !important; left: -9999px !important; height: 1px; width: 1px; overflow: hidden; }
/* ============ STATUS ============ */
.ct-wrap .ct-status {
display: flex; align-items: center; gap: 10px; max-height: 0; opacity: 0; overflow: hidden; transform: translateY(-6px);
transition: max-height .45s ease, opacity .4s ease, transform .4s ease, margin .4s ease;
font-size: 14px; font-weight: 500;
}
.ct-wrap .ct-status.is-show { max-height: 80px; opacity: 1; transform: translateY(0); margin-top: 16px; }
.ct-wrap .ct-status[data-status="ok"] { color: var(--ct-accent); }
.ct-wrap .ct-status[data-status="error"] { color: #ff6b6b; }
.ct-wrap .ct-status-ic { flex: none; width: 20px; height: 20px; overflow: visible; }
.ct-wrap .ct-status .ring { stroke-dasharray: 1; stroke-dashoffset: 1; }
.ct-wrap .ct-status .tick, .ct-wrap .ct-status .cross { stroke-dasharray: 1; stroke-dashoffset: 1; }
.ct-wrap .ct-status[data-status="error"] .tick,
.ct-wrap .ct-status[data-status="ok"] .cross { display: none; }
.ct-wrap .ct-status.is-show .ring { animation: ctDraw .7s ease .1s forwards; }
.ct-wrap .ct-status.is-show .tick,
.ct-wrap .ct-status.is-show .cross { animation: ctDraw .5s ease .55s forwards; }
/* ============ BUTTON ============ */
.ct-wrap .ct-btn {
position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
height: 46px; margin-top: 20px; padding: 0 36px; border-radius: 4px; color: #fff;
font-family: 'Poppins', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: .8px; text-transform: uppercase; white-space: nowrap;
background: linear-gradient(90deg, var(--ct-g1), var(--ct-g2));
box-shadow: 0 14px 30px -12px rgba(46,226,122,.45);
transition: transform .3s ease, box-shadow .3s ease, filter .3s ease;
}
.ct-wrap .ct-btn:hover { transform: translateY(-3px); filter: brightness(1.08); box-shadow: 0 20px 38px -12px rgba(46,226,122,.55); }
.ct-wrap .ct-btn:active { transform: translateY(0) scale(.97); }
.ct-wrap .ct-btn::after {
content: ''; position: absolute; top: 0; left: -70%; width: 40%; height: 100%; pointer-events: none;
background: linear-gradient(100deg, transparent, rgba(255,255,255,.5), transparent); transform: skewX(-20deg);
animation: ctShine 4.5s ease-in-out 2s infinite;
}
.ct-wrap .ct-btn-label { position: relative; z-index: 1; transition: opacity .25s ease; }
.ct-wrap .ct-spin {
position: absolute; left: 50%; top: 50%; z-index: 1; width: 18px; height: 18px; margin: -9px 0 0 -9px;
border: 2px solid rgba(255,255,255,.35); border-top-color: #fff; border-radius: 50%;
opacity: 0; transition: opacity .25s ease;
}
.ct-wrap .ct-btn.is-loading { pointer-events: none; filter: brightness(.9); }
.ct-wrap .ct-btn.is-loading .ct-btn-label { opacity: 0; }
.ct-wrap .ct-btn.is-loading .ct-spin { opacity: 1; animation: ctSpin .7s linear infinite; }
/* ============ MAP ============ */
.ct-wrap .ct-map-frame { position: relative; min-height: 347px; overflow: hidden; border: 1px solid var(--ct-line); border-radius: 4px; background: #0c1526; }
.ct-wrap .ct-map-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.ct-wrap .ct-map-frame.is-dark iframe { filter: invert(92%) hue-rotate(180deg) grayscale(.25) contrast(.92); }
.ct-wrap .ct-map-empty { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 14px; padding: 30px; color: rgba(255,255,255,.5); text-align: center; }
.ct-wrap .ct-map-empty svg { width: 34px; height: 34px; color: var(--ct-accent); }
.ct-wrap .ct-map-empty p { font-size: 13px; }
/* =====================================================
ANIMATIONS (only when "Enable Animations" is on)
===================================================== */
.ct-wrap.ct-anim .ct-glow-1 { animation: ctGlowA 16s ease-in-out infinite alternate; }
.ct-wrap.ct-anim .ct-glow-2 { animation: ctGlowB 19s ease-in-out infinite alternate; }
/* hidden start states */
.ct-wrap.ct-anim .ct-rv { opacity: 0; }
.ct-wrap.ct-anim .ct-heading .w { opacity: 0; }
.ct-wrap.ct-anim .ct-bn-title .ch { opacity: 0; }
.ct-wrap.ct-anim .ct-lines i { transform: scaleX(0); }
.ct-wrap.ct-anim .ct-ic-svg * { stroke-dasharray: 1; stroke-dashoffset: 1; }
.ct-wrap.ct-anim .ct-form-card::before { transform: scaleX(0); }
/* intro (runs once when scrolled into view) */
.ct-wrap.ct-anim.ct-in .ct-bn-title .ch { opacity: 1; animation: ctChar .8s cubic-bezier(.2,.7,.2,1) calc(.12s + var(--c, 0) * .06s) backwards; }
.ct-wrap.ct-anim.ct-in .ct-crumb.ct-rv { opacity: 1; animation: ctUp .85s cubic-bezier(.2,.7,.2,1) var(--d, 0s) backwards; }
.ct-wrap.ct-anim.ct-in .ct-rv { opacity: 1; animation: ctUp .85s cubic-bezier(.2,.7,.2,1) var(--d, 0s) backwards; }
.ct-wrap.ct-anim.ct-in .ct-heading .w { opacity: 1; animation: ctWord .9s cubic-bezier(.2,.7,.2,1) calc(.15s + var(--w, 0) * .1s) backwards; }
.ct-wrap.ct-anim.ct-in .ct-lines i { transform: scaleX(1); transition: transform .9s cubic-bezier(.2,.7,.2,1) .3s; }
.ct-wrap.ct-anim.ct-in .ct-lines i:last-child { transition-delay: .45s; }
.ct-wrap.ct-anim.ct-in .ct-form-card::before { transform: scaleX(1); transition: transform 1.1s cubic-bezier(.65,.05,.2,1) .35s; }
.ct-wrap.ct-anim.ct-in .ct-card .ct-card-ic { animation: ctPop .8s cubic-bezier(.34,1.56,.64,1) calc(var(--d, 0s) + .1s) backwards; }
.ct-wrap.ct-anim.ct-in .ct-card .ct-card-ic::after { animation: ctRing 3s ease-out calc(var(--d, 0s) + 1.4s) infinite; }
.ct-wrap.ct-anim.ct-in .ct-card .ct-ic-svg * { animation: ctDraw 1.1s cubic-bezier(.4,.1,.2,1) calc(var(--d, 0s) + .35s) forwards; }
.ct-wrap.ct-anim .ct-crumb-arrow { animation: ctNudge 1.8s ease-in-out infinite; }
/* --- Keyframes --- */
@keyframes ctSwirl { 0% { transform: rotate(-2deg) scale(1); } 100% { transform: rotate(3deg) scale(1.08); } }
@keyframes ctKen { 0% { transform: scale(1); } 100% { transform: scale(1.1); } }
@keyframes ctPulse { 0%,100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes ctDrift { 0% { opacity: 0; transform: translateY(0) scale(.6); } 25% { opacity: .9; } 100% { opacity: 0; transform: translateY(-70px) scale(1.2); } }
@keyframes ctChar { from { opacity: 0; transform: translateY(44px) rotateX(-80deg); filter: blur(6px); } to { opacity: 1; transform: translateY(0) rotateX(0); filter: blur(0); } }
@keyframes ctWord { from { opacity: 0; transform: translateY(28px) rotate(2deg); filter: blur(6px); } to { opacity: 1; transform: translateY(0) rotate(0); filter: blur(0); } }
@keyframes ctUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
@keyframes ctDraw { to { stroke-dashoffset: 0; } }
@keyframes ctPop { from { opacity: 0; transform: scale(.3) rotate(-18deg); } to { opacity: 1; transform: scale(1) rotate(0); } }
@keyframes ctRing { 0% { opacity: .6; transform: scale(1); } 70%,100% { opacity: 0; transform: scale(1.7); } }
@keyframes ctShine { 0% { left: -70%; } 35%,100% { left: 130%; } }
@keyframes ctSpin { to { transform: rotate(360deg); } }
@keyframes ctGlowA { from { transform: translate(0,0) scale(1); opacity: .8; } to { transform: translate(60px, 40px) scale(1.12); opacity: 1; } }
@keyframes ctGlowB { from { transform: translate(0,0) scale(1); opacity: .75; } to { transform: translate(-60px, -34px) scale(1.14); opacity: 1; } }
@keyframes ctNudge { 0%,100% { transform: translateX(0); } 50% { transform: translateX(4px); } }
/* --- Accessibility --- */
@media (prefers-reduced-motion: reduce) {
.ct-wrap *, .ct-wrap *::before, .ct-wrap *::after { animation: none !important; transition: none !important; }
.ct-wrap.ct-anim .ct-rv, .ct-wrap.ct-anim .ct-heading .w, .ct-wrap.ct-anim .ct-bn-title .ch { opacity: 1 !important; transform: none; }
.ct-wrap.ct-anim .ct-lines i, .ct-wrap.ct-anim .ct-form-card::before { transform: none; }
.ct-wrap.ct-anim .ct-ic-svg * { stroke-dashoffset: 0; }
}
/* =====================================================
RESPONSIVE
===================================================== */
@media (max-width: 1024px) {
.ct-wrap .ct-intro { grid-template-columns: 1fr; row-gap: 40px; }
.ct-wrap .ct-bottom { grid-template-columns: 1fr; row-gap: 40px; }
.ct-wrap .ct-cards { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
.ct-wrap .ct-cards { grid-template-columns: 1fr; }
.ct-wrap .ct-fields { grid-template-columns: 1fr; }
.ct-wrap .ct-form-card { padding: 26px 22px 28px; }
.ct-wrap .ct-map-frame { min-height: 300px; }
.ct-wrap .ct-btn { width: 100%; }
}
/* ==========================================================================
^^^ RECONSTRUCTED ^^^
========================================================================== */
/* founder */
/* ==========================================================================
Hektrova - Meet the Founder Widget Styles
========================================================================== */
/* ============================================================
HEKTROVA — MEET THE FOUNDER · v2 (premium tablet + mobile)
------------------------------------------------------------
· Desktop (>991.98px): UNCHANGED — the base rules below are
byte-identical to the original file.
· All v2 work lives inside @media queries only.
· The old responsive block used !important hacks that locked
out Elementor controls. v2 uses higher-specificity selectors
inside the media queries instead (no !important), so the
premium sizes always apply on tablet/mobile while base
selectors stay low-specificity for desktop controls.
============================================================ */
/* ================= BASE (original, untouched) ================= */
/* NOTE: The original inline CSS used dynamic #widget-id selectors. They were
converted to the .hektrova-founder-section class so the file works for every
instance and Elementor's controls can override the defaults. */
.hektrova-founder-section {
position: relative;
overflow: hidden;
}
.hektrova-founder-section .founder-container {
max-width: 1280px;
margin: 0 auto;
padding: 0 15px;
box-sizing: border-box;
}
.hektrova-founder-section .founder-row {
display: flex;
align-items: stretch;
gap: 60px;
}
.hektrova-founder-section .founder-left {
flex: 1 1 45%;
max-width: 45%;
display: flex;
}
.hektrova-founder-section .founder-image-wrap {
width: 100%;
overflow: hidden;
position: relative;
box-sizing: border-box;
}
.hektrova-founder-section .founder-image {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.hektrova-founder-section .founder-right {
flex: 1 1 55%;
max-width: 55%;
display: flex;
flex-direction: column;
justify-content: center;
}
.hektrova-founder-section .founder-eyebrow {
margin-bottom: 20px;
}
.hektrova-founder-section .founder-name {
margin: 0 0 10px 0;
line-height: 1.1;
}
.hektrova-founder-section .founder-role {
margin-bottom: 35px;
}
.hektrova-founder-section .founder-quote {
margin: 0;
font-style: italic;
position: relative;
padding-left: 20px;
border-left: 3px solid #30D56C;
}
/* ============ RESPONSIVE LAYOUTS — v2 premium rebuild ============ */
/* ---------------- TABLET · ≤991.98px ---------------- */
@media (max-width: 991.98px) {
/* Stack: portrait on top, content below */
.hektrova-founder-section .founder-container .founder-row {
flex-direction: column;
gap: 48px;
align-items: stretch;
}
.hektrova-founder-section .founder-container .founder-row .founder-left,
.hektrova-founder-section .founder-container .founder-row .founder-right {
flex: 1 1 100%;
max-width: 100%;
}
/* Framed portrait with ambient green glow */
.hektrova-founder-section .founder-container .founder-row .founder-left {
position: relative;
}
.hektrova-founder-section .founder-container .founder-row .founder-left::before {
content: "";
position: absolute;
left: 50%;
top: 50%;
width: 72%;
height: 62%;
transform: translate(-50%, -50%);
background: radial-gradient(closest-side, rgba(48, 213, 108, 0.16), rgba(48, 213, 108, 0));
filter: blur(30px);
z-index: 0;
pointer-events: none;
}
.hektrova-founder-section .founder-container .founder-row .founder-left .founder-image-wrap {
height: 480px;
z-index: 1;
border: 1px solid rgba(255, 255, 255, 0.09);
border-radius: 14px;
background: rgba(255, 255, 255, 0.02);
box-shadow: 0 34px 70px -34px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.hektrova-founder-section .founder-container .founder-row .founder-left .founder-image {
border-radius: 13px;
}
/* Green edge accent across the top of the photo */
.hektrova-founder-section .founder-container .founder-row .founder-left .founder-image-wrap::after {
content: "";
position: absolute;
left: 0;
top: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, #30D56C, rgba(48, 213, 108, 0));
z-index: 2;
}
/* Content rhythm */
.hektrova-founder-section .founder-right .founder-content .founder-eyebrow {
font-size: 13px;
margin-bottom: 18px;
}
.hektrova-founder-section .founder-right .founder-content .founder-name {
font-size: 30px;
line-height: 1.15;
}
.hektrova-founder-section .founder-right .founder-content .founder-role {
margin-bottom: 28px;
}
.hektrova-founder-section .founder-right .founder-content .founder-quote {
font-size: 18px;
line-height: 1.65;
}
}
/* ---------------- MOBILE · ≤767.98px ---------------- */
@media (max-width: 767.98px) {
/* Section padding fallback (the widget now also ships a
64px mobile default, so these agree) */
.elementor .elementor-widget .hektrova-founder-section {
padding-top: 64px;
padding-bottom: 64px;
}
.hektrova-founder-section .founder-container .founder-row {
gap: 34px;
}
/* Portrait: taller, rounder, glass frame */
.hektrova-founder-section .founder-container .founder-row .founder-left .founder-image-wrap {
height: 420px;
border-radius: 16px;
}
.hektrova-founder-section .founder-container .founder-row .founder-left .founder-image {
border-radius: 15px;
}
/* Eyebrow with green dash */
.hektrova-founder-section .founder-right .founder-content .founder-eyebrow {
font-size: 12px;
letter-spacing: 2.5px;
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 16px;
}
.hektrova-founder-section .founder-right .founder-content .founder-eyebrow::before {
content: "";
width: 22px;
height: 2px;
background: #30D56C;
border-radius: 2px;
flex: none;
}
.hektrova-founder-section .founder-right .founder-content .founder-name {
font-size: 28px;
line-height: 1.18;
margin-bottom: 8px;
}
.hektrova-founder-section .founder-right .founder-content .founder-role {
font-size: 12px;
letter-spacing: 1.5px;
margin-bottom: 24px;
}
/* Quote becomes a glass card (matches the site's glass language) */
.hektrova-founder-section .founder-right .founder-content .founder-quote {
font-size: 16px;
line-height: 1.7;
padding: 18px 20px;
background: rgba(255, 255, 255, 0.035);
border: 1px solid rgba(255, 255, 255, 0.08);
border-left: 3px solid #30D56C;
border-radius: 14px;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
}
/* ---------------- SMALL PHONES · ≤400px ---------------- */
@media (max-width: 400px) {
.elementor .elementor-widget .hektrova-founder-section {
padding-top: 56px;
padding-bottom: 56px;
}
.hektrova-founder-section .founder-container .founder-row .founder-left .founder-image-wrap {
height: 360px;
}
.hektrova-founder-section .founder-right .founder-content .founder-name {
font-size: 26px;
}
.hektrova-founder-section .founder-right .founder-content .founder-quote {
font-size: 15px;
padding: 16px;
}
}
/* --------- Entrance motion (tablet + mobile only) ---------
Plays once on load, skipped for users who prefer reduced
motion. Desktop is never animated. */
@media (max-width: 991.98px) and (prefers-reduced-motion: no-preference) {
@keyframes hfUp {
from {
opacity: 0;
transform: translateY(26px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.hektrova-founder-section .founder-container .founder-row .founder-left .founder-image-wrap {
animation: hfUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.hektrova-founder-section .founder-right .founder-content .founder-eyebrow {
animation: hfUp 0.6s 0.08s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.hektrova-founder-section .founder-right .founder-content .founder-name {
animation: hfUp 0.6s 0.14s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.hektrova-founder-section .founder-right .founder-content .founder-role {
animation: hfUp 0.6s 0.20s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.hektrova-founder-section .founder-right .founder-content .founder-quote {
animation: hfUp 0.6s 0.26s cubic-bezier(0.22, 1, 0.36, 1) both;
}
}
/* process */
/* ==========================================================================
Stark - Marketing Process Widget Styles
========================================================================== */
/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;600;700;800&display=swap');
/* Low-specificity selectors so Elementor Typography / Spacing / Color controls always win */
.pr-section {
--pr-bg1: #04070d;
--pr-bg2: #04070d;
--pr-accent: #2EE27A;
--pr-line: rgba(46, 226, 122, 0.3);
--pr-num: #2EE27A;
--pr-badge-bg: rgba(46, 226, 122, 0.12);
--pr-badge-bd: rgba(46, 226, 122, 0.25);
--pr-wm: rgba(255, 255, 255, 0.12);
--pr-glow: rgba(46, 226, 122, 0.14);
position: relative;
padding: 60px 0 90px;
overflow: hidden;
overflow: clip;
font-family: 'Figtree', sans-serif;
background:
radial-gradient(ellipse 60% 45% at 50% 0%, var(--pr-glow), transparent 70%),
linear-gradient(180deg, var(--pr-bg1) 0, var(--pr-bg2) 150px, var(--pr-bg2) 100%);
}
.pr-section * { box-sizing: border-box; }
.pr-section .pr-container { width: min(1200px, 92%); margin-inline: auto; }
/* ============ Header ============ */
.pr-section .pr-head {
position: relative; text-align: center; margin-bottom: 26px;
padding: 50px 0 10px; isolation: isolate;
}
/* Outline watermark (text comes from Elementor "Watermark Text") */
.pr-section .pr-watermark {
position: absolute; top: 50px; left: 50%; transform: translateX(-50%);
z-index: -1; width: 100%; text-align: center; white-space: nowrap;
pointer-events: none; user-select: none;
font-size: 150px; font-weight: 800; line-height: 1; letter-spacing: 2px;
color: transparent !important;
-webkit-text-fill-color: transparent !important;
-webkit-text-stroke: 1.5px var(--pr-wm) !important;
text-transform: none;
-webkit-mask-image: linear-gradient(180deg, #000 30%, transparent 100%);
mask-image: linear-gradient(180deg, #000 30%, transparent 100%);
}
/* Pill badge */
.pr-section .pr-eyebrow {
display: inline-flex; align-items: center; margin: 0 0 14px;
padding: 8px 20px; border-radius: 999px;
background: var(--pr-badge-bg); border: 1px solid var(--pr-badge-bd);
color: var(--pr-accent); font-size: 14px; font-weight: 500; letter-spacing: .3px; text-transform: none;
-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.pr-section .pr-title { margin: 0; color: #ffffff; font-size: 48px; font-weight: 700; line-height: 1.2; letter-spacing: -.5px; }
/* ============ Grid ============ */
.pr-section .pr-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px 10px; }
.pr-section .pr-step { display: flex; flex-direction: column; align-items: center; text-align: center; }
/* ============ Visual (arc + circle) ============ */
.pr-section .pr-visual { position: relative; width: 100%; max-width: 300px; aspect-ratio: 300 / 176; }
.pr-section .pr-arcsvg { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--pr-line); overflow: visible; }
.pr-section .pr-circle-pos { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.pr-section .pr-circle { width: 35%; aspect-ratio: 1; pointer-events: auto; }
.pr-section .pr-disc {
position: relative; width: 100%; height: 100%; border-radius: 50%; background: #0c1526;
display: grid; place-items: center; color: var(--pr-accent);
box-shadow: 0 14px 34px -14px rgba(46, 226, 122, 0.28);
transition: transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s ease;
}
.pr-section .pr-disc::after {
content: ''; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
border: 1.5px solid var(--pr-accent); opacity: 0; transform: scale(1);
}
.pr-section .pr-step:hover .pr-disc { transform: translateY(-6px) scale(1.06); box-shadow: 0 22px 40px -14px rgba(46, 226, 122, 0.45); }
.pr-section .pr-icon { display: grid; place-items: center; width: 100%; height: 100%; transition: transform .5s ease; }
.pr-section .pr-step:hover .pr-icon { transform: rotate(-8deg) scale(1.08); }
.pr-section .pr-svg { width: 42%; height: 42%; color: var(--pr-accent); display: block; }
.pr-section .pr-disc i { color: var(--pr-accent); font-size: 36px; }
.pr-section .pr-disc svg:not(.pr-svg) { width: 36px; height: 36px; fill: var(--pr-accent); }
/* ============ Number + text ============ */
.pr-section .pr-num {
margin: 2px 0 8px; font-size: 22px; font-weight: 700; letter-spacing: 1px; line-height: 1;
color: var(--pr-num);
background: linear-gradient(180deg, var(--pr-num) 20%, rgba(46, 226, 122, 0.3) 100%);
background: linear-gradient(180deg, var(--pr-num) 20%, color-mix(in srgb, var(--pr-num) 30%, transparent) 100%);
-webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.pr-section .pr-text { margin: 0; max-width: 250px; color: rgba(255, 255, 255, 0.7); font-size: 17px; font-weight: 500; line-height: 1.4; }
/* Spark dot (only visible in animated mode) */
.pr-section .pr-spark { opacity: 0; }
/* =====================================================
ANIMATIONS (only when "Enable Animations" is on)
===================================================== */
.pr-section.pr-anim .pr-watermark,
.pr-section.pr-anim .pr-eyebrow,
.pr-section.pr-anim .pr-title,
.pr-section.pr-anim .pr-circle,
.pr-section.pr-anim .pr-num,
.pr-section.pr-anim .pr-text,
.pr-section.pr-anim .pr-dot,
.pr-section.pr-anim .pr-chev { opacity: 0; }
.pr-section.pr-anim .pr-arc { stroke-dasharray: 1; stroke-dashoffset: 1; }
.pr-section.pr-anim.pr-in .pr-watermark { animation: prWm 1.4s ease .0s both; }
.pr-section.pr-anim.pr-in .pr-eyebrow { animation: prUp .7s cubic-bezier(.2,.7,.2,1) .05s both; }
.pr-section.pr-anim.pr-in .pr-title { animation: prUp .8s cubic-bezier(.2,.7,.2,1) .18s both; }
.pr-section.pr-anim.pr-in .pr-circle { animation: prPop .9s cubic-bezier(.34,1.56,.64,1) calc(.35s + var(--i) * .18s) both; }
.pr-section.pr-anim.pr-in .pr-dot { animation: prDotIn .5s ease calc(.5s + var(--i) * .18s) both; }
.pr-section.pr-anim.pr-in .pr-arc { animation: prDraw 1.5s cubic-bezier(.4,.1,.2,1) calc(.6s + var(--i) * .18s) forwards; }
.pr-section.pr-anim.pr-in .pr-chev { animation: prFade .5s ease calc(1.9s + var(--i) * .18s) both; }
.pr-section.pr-anim.pr-in .pr-num { animation: prUp .7s cubic-bezier(.2,.7,.2,1) calc(.75s + var(--i) * .18s) both; }
.pr-section.pr-anim.pr-in .pr-text { animation: prUp .7s cubic-bezier(.2,.7,.2,1) calc(.88s + var(--i) * .18s) both; }
/* Loops: gentle icon float, ring pulse, travelling spark */
.pr-section.pr-anim.pr-in .pr-icon { animation: prBob 4.2s ease-in-out calc(1.6s + var(--i) * .4s) infinite; }
.pr-section.pr-anim.pr-in .pr-step:hover .pr-icon { animation: none; }
.pr-section.pr-anim.pr-in .pr-disc::after { animation: prRing 3.4s ease-out calc(2s + var(--i) * .5s) infinite; }
.pr-section.pr-anim.pr-in .pr-spark { animation: prSparkIn .6s ease calc(2.2s + var(--i) * .18s) forwards; }
/* --- Keyframes --- */
@keyframes prUp { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: translateY(0); } }
@keyframes prWm { from { opacity: 0; } to { opacity: 1; } }
@keyframes prPop { from { opacity: 0; transform: scale(.35) rotate(-12deg); } to { opacity: 1; transform: scale(1) rotate(0); } }
@keyframes prDraw { to { stroke-dashoffset: 0; } }
@keyframes prFade { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: translateX(0); } }
@keyframes prDotIn { from { opacity: 0; transform: scale(0); } to { opacity: 1; transform: scale(1); } }
@keyframes prBob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes prRing { 0% { opacity: .5; transform: scale(1); } 70%,100% { opacity: 0; transform: scale(1.35); } }
@keyframes prSparkIn{ to { opacity: .95; } }
.pr-section .pr-dot { transform-box: fill-box; transform-origin: center; }
/* --- Accessibility --- */
@media (prefers-reduced-motion: reduce) {
.pr-section.pr-anim * { animation: none !important; }
.pr-section.pr-anim .pr-watermark, .pr-section.pr-anim .pr-eyebrow, .pr-section.pr-anim .pr-title, .pr-section.pr-anim .pr-circle,
.pr-section.pr-anim .pr-num, .pr-section.pr-anim .pr-text, .pr-section.pr-anim .pr-dot,
.pr-section.pr-anim .pr-chev { opacity: 1; }
.pr-section.pr-anim .pr-arc { stroke-dashoffset: 0; }
}
/* =====================================================
RESPONSIVE
===================================================== */
@media (max-width: 1024px) {
.pr-section .pr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pr-section .pr-title { font-size: 38px; }
.pr-section .pr-watermark { font-size: 110px; }
}
@media (max-width: 767px) {
.pr-section .pr-grid { grid-template-columns: 1fr; }
.pr-section .pr-title { font-size: 30px; }
.pr-section .pr-watermark { font-size: 64px; }
.pr-section .pr-head { padding-top: 36px; }
}
/* SEO services*/
/* ==========================================================================
Stark - SEO Services Widget Styles
========================================================================== */
/* NOTE: The original inline CSS used dynamic #widget-id selectors. They were
converted to the .seo-section class so the file works for every instance
and Elementor's Color / Typography controls can override the defaults. */
/* Fonts: Figtree (header) + Inter (cards) */
@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');
.seo-section {
--sk-accent: #2EE27A;
--sk-badge-bg: rgba(46, 226, 122, 0.12);
--sk-badge-bd: rgba(46, 226, 122, 0.25);
--sk-wm: rgba(255, 255, 255, 0.12);
--sk-glow: rgba(46, 226, 122, 0.14);
--sk-gap: 30px;
position: relative;
padding: 100px 0;
overflow: hidden;
overflow: clip;
font-family: 'Inter', sans-serif;
background-color: #04070d;
background-image: radial-gradient(ellipse 60% 40% at 50% 0%, var(--sk-glow), transparent 70%);
color: #ffffff;
}
.seo-section * { box-sizing: border-box; }
.seo-section .container { width: min(1200px, 92%); margin-inline: auto; position: relative; z-index: 2; }
/* ============ Starry Background ============ */
.seo-section .stars-bg {
position: absolute; inset: 0;
background-image:
radial-gradient(2px 2px at 20px 30px, rgba(255,255,255,0.4), transparent),
radial-gradient(1px 1px at 40px 70px, rgba(255,255,255,0.3), transparent),
radial-gradient(1.5px 1.5px at 90px 40px, rgba(46,226,122,0.2), transparent),
radial-gradient(1px 1px at 130px 80px, rgba(255,255,255,0.2), transparent),
radial-gradient(2px 2px at 160px 30px, rgba(255,255,255,0.3), transparent);
background-repeat: repeat;
background-size: 200px 100px;
opacity: 0.4;
animation: starsScroll 60s linear infinite;
}
@keyframes starsScroll {
from { background-position: 0 0; }
to { background-position: 200px 100px; }
}
/* ============ Header ============ */
.seo-section .seo-head {
position: relative;
isolation: isolate;
text-align: center;
padding: 50px 0 10px;
margin-bottom: 50px;
}
/* Outline watermark (text from Elementor "Watermark Text") */
.seo-section .seo-watermark {
position: absolute; top: 50px; left: 50%; transform: translateX(-50%);
z-index: -1; width: 100%; text-align: center; white-space: nowrap;
pointer-events: none; user-select: none;
font-family: 'Figtree', sans-serif;
font-size: 150px; font-weight: 800; line-height: 1; letter-spacing: 2px; text-transform: none;
color: transparent !important;
-webkit-text-fill-color: transparent !important;
-webkit-text-stroke: 1.5px var(--sk-wm) !important;
-webkit-mask-image: linear-gradient(180deg, #000 30%, transparent 100%);
mask-image: linear-gradient(180deg, #000 30%, transparent 100%);
}
/* Pill badge */
.seo-section .seo-eyebrow {
display: inline-flex; align-items: center; justify-content: center;
margin: 0 0 14px; padding: 8px 20px; border-radius: 999px;
background: var(--sk-badge-bg); border: 1px solid var(--sk-badge-bd);
color: var(--sk-accent);
font-family: 'Figtree', sans-serif;
font-size: 14px; font-weight: 500; letter-spacing: .3px; text-transform: none;
-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.seo-section .seo-main-title {
margin: 0 auto; max-width: 850px; color: #ffffff;
font-family: 'Figtree', sans-serif;
font-size: 48px; font-weight: 700; line-height: 1.2; letter-spacing: -.5px;
}
/* ============ Layout ============ */
.seo-section .services-layout {
display: flex;
flex-direction: column;
align-items: center;
gap: 30px;
}
.seo-section .cards-row {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 30px;
width: 100%;
}
/* ============ Cards ============ */
.seo-section .service-card {
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 16px;
padding: 30px;
text-align: center;
width: 100%;
max-width: 300px;
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
box-shadow: 0 20px 50px -20px rgba(0,0,0,0.5);
transition: all 0.3s ease;
}
.seo-section .service-card:hover {
transform: translateY(-8px);
border-color: var(--sk-accent);
box-shadow: 0 30px 60px -20px color-mix(in srgb, var(--sk-accent) 30%, transparent);
}
.seo-section .service-icon-wrap {
display: flex;
justify-content: center;
margin-bottom: 20px;
}
.seo-section .service-icon {
width: 60px;
height: 60px;
border-radius: 50%;
background: rgba(46, 226, 122, 0.1);
background: color-mix(in srgb, var(--sk-accent) 10%, transparent);
border: 1px solid rgba(46, 226, 122, 0.2);
border: 1px solid color-mix(in srgb, var(--sk-accent) 20%, transparent);
display: grid;
place-items: center;
color: var(--sk-accent);
transition: all 0.3s ease;
}
.seo-section .service-icon svg {
width: 26px;
height: 26px;
color: inherit;
stroke: currentColor;
}
.seo-section .service-card:hover .service-icon {
background: var(--sk-accent);
color: #04070d;
transform: rotate(-8deg) scale(1.05);
}
.seo-section .service-title {
font-size: 18px;
font-weight: 700;
color: #ffffff;
margin: 0 0 10px 0;
}
.seo-section .service-desc {
font-size: 14px;
line-height: 1.6;
color: rgba(255, 255, 255, 0.6);
margin: 0;
}
/* ============ SCROLL ANIMATIONS ============ */
.seo-section .sk-skroll {
opacity: 0;
transform: translateY(40px);
transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
transition-delay: calc(var(--sk-delay, 0) * 1ms);
}
.seo-section .sk-skroll.in {
opacity: 1;
transform: translateY(0);
}
/* After the entrance finishes, let hover animations respond instantly */
.seo-section .service-card.sk-skroll.in:hover { transition-delay: 0ms; }
@media (prefers-reduced-motion: reduce) {
.seo-section .stars-bg { animation: none; }
.seo-section .sk-skroll { opacity: 1; transform: none; transition: none; }
}
/* =====================================================================
RESPONSIVE — v2 (desktop above 1024px is untouched)
Font sizes, gaps and padding come from the Elementor control defaults
(see the PHP file); this section handles layout and polish.
===================================================================== */
/* ---------- TABLET + LARGE PHONES (≤ 1024px) ----------
Cards become an even 2-column grid. With 5 cards the last one is
centred on its own row (2 / 2 / 1) instead of the old 2 / 1 / 2 mess. */
@media (max-width: 1024px) {
.seo-section .seo-main-title { max-width: 640px; text-wrap: balance; }
.seo-section .services-layout { flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: stretch; }
.seo-section .cards-row { display: contents; }
.seo-section .service-card {
flex: 0 1 calc((100% - var(--sk-gap, 22px)) / 2);
width: auto; max-width: none;
display: flex; flex-direction: column; align-items: center;
padding: 32px 26px;
background:
radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--sk-accent) 6%, transparent), transparent 70%),
rgba(255, 255, 255, 0.03);
}
.seo-section .service-icon-wrap { margin-bottom: 18px; }
.seo-section .service-desc { max-width: 34ch; }
}
/* Touch screens: no sticky hover jump, give a pressed state instead */
@media (max-width: 1024px) and (hover: none) {
.seo-section .service-card:hover { transform: none; border-color: rgba(255, 255, 255, 0.06); box-shadow: 0 20px 50px -20px rgba(0,0,0,0.5); }
.seo-section .service-card:hover .service-icon { background: color-mix(in srgb, var(--sk-accent) 10%, transparent); color: var(--sk-accent); transform: none; }
.seo-section .service-card:active { border-color: var(--sk-accent); }
}
/* ---------- PHONES (≤ 767px) ---------- */
@media (max-width: 767px) {
/* lighter on battery: no endless background repaint, no blur layers */
.seo-section .stars-bg { animation: none; }
.seo-section .service-card,
.seo-section .seo-eyebrow { -webkit-backdrop-filter: none; backdrop-filter: none; }
.seo-section .seo-head { padding-top: 36px; }
.seo-section .seo-eyebrow { margin-bottom: 12px; padding: 7px 16px; }
.seo-section .seo-main-title { max-width: 100%; padding-inline: 2%; }
/* each card reveals as it scrolls into view — no stacked delays */
.seo-section .service-card.sk-skroll { transition-delay: 0ms; transform: translateY(24px); }
.seo-section .service-card.sk-skroll.in { transform: translateY(0); }
}
/* ---------- PHONES (≤ 600px): compact horizontal cards ----------
Icon on the left, title + description on the right. Much shorter scroll
than five tall stacked cards, and easier to scan. */
@media (max-width: 600px) {
.seo-section .services-layout { flex-direction: column; flex-wrap: nowrap; align-items: stretch; }
.seo-section .service-card {
flex: none; width: 100%;
display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 16px; align-items: center;
text-align: left; padding: 18px 18px 18px 16px; border-radius: 18px;
background:
linear-gradient(135deg, color-mix(in srgb, var(--sk-accent) 8%, transparent), transparent 55%),
rgba(255, 255, 255, 0.03);
box-shadow: 0 14px 34px -22px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.seo-section .service-icon-wrap { grid-row: 1 / span 2; margin: 0; }
.seo-section .service-icon { width: 54px; height: 54px; }
.seo-section .service-icon svg { width: 24px; height: 24px; }
.seo-section .service-title { grid-column: 2; margin: 0 0 5px; line-height: 1.25; }
.seo-section .service-desc { grid-column: 2; max-width: none; line-height: 1.55; }
}
/* ---------- SMALL PHONES (≤ 380px) ---------- */
@media (max-width: 380px) {
.seo-section .service-card { column-gap: 13px; padding: 16px 14px; }
.seo-section .service-icon { width: 48px; height: 48px; }
.seo-section .service-icon svg { width: 22px; height: 22px; }
}
/*Service page */
/* ==========================================================================
Hektrova - Accordion Services Widget Styles
========================================================================== */
/* Google Fonts (moved here from the old tags in the widget) */
@import url('https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@400;500;600;700&family=Instrument+Serif:ital@0;1&display=swap');
.avx-services {
--avx-bg: #04070d;
--avx-surface: #0c1526;
--avx-line: rgba(255,255,255,.10);
--avx-text: #ffffff;
--avx-muted: rgba(255,255,255,0.6);
--avx-accent: #2EE27A;
--_font-heading: "Instrument Sans", system-ui, sans-serif;
--_font-accent: "Instrument Serif", Georgia, serif;
--_font-body: "Instrument Sans", system-ui, sans-serif;
--_h2-size: clamp(2.2rem, 1.4rem + 3.2vw, 4rem);
--_h2-weight: 600;
--_h2-lh: 1.04;
--_h2-ls: -0.025em;
--_eyebrow-size: .8rem;
--_title-size: clamp(1.05rem, .95rem + .45vw, 1.35rem);
--_title-weight: 500;
--_desc-size: .98rem;
--_desc-lh: 1.65;
--_num-size: .95rem;
--_link-size: .9rem;
--avx-ease: cubic-bezier(.22,.8,.2,1);
--avx-dur: .6s;
position: relative; overflow: hidden; isolation: isolate;
background: var(--avx-bg); color: var(--avx-text);
font-family: var(--_font-body);
padding: clamp(64px,9vw,140px) clamp(20px,5vw,72px);
}
.avx-services *, .avx-services *::before, .avx-services *::after { box-sizing: border-box; }
.avx-services::before { content:""; position:absolute; inset:auto -10% -30% -10%; height:60%; z-index:-1; background:radial-gradient(60% 100% at 50% 100%, rgba(46,226,122,.22), transparent 70%); opacity:0; transition:opacity 1.6s ease .3s; }
.avx-services.is-in::before { opacity:1; }
.avx-wrap { max-width:1200px; margin:0 auto; display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:clamp(32px,6vw,96px); align-items:center; }
.avx-head { display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:20px 32px; margin-bottom:clamp(28px,4vw,48px); padding-top:18px; border-top:1px solid var(--avx-line); position:relative; }
.avx-head::before { content:""; position:absolute; top:-1px; left:0; height:1px; width:0; background:var(--avx-accent); transition:width 1.2s var(--avx-ease) .1s; }
.avx-services.is-in .avx-head::before { width:100%; }
.avx-eyebrow { flex-basis:100%; margin:0 0 14px; color:var(--avx-accent); font-size:var(--_eyebrow-size); font-family:var(--_font-body); font-weight:500; }
.avx-title { margin:0; font-family:var(--_font-heading); font-size:var(--_h2-size); font-weight:var(--_h2-weight); line-height:var(--_h2-lh); letter-spacing:var(--_h2-ls); color:var(--avx-text); }
.avx-title em { font-family:var(--_font-accent); font-style:italic; font-weight:400; letter-spacing:0; padding-right:.06em; }
.avx-title .l { display:block; overflow:hidden; padding-bottom:.12em; margin-bottom:-.12em; }
.avx-title .l > span { display:block; transform:translateY(110%); transition:transform 1s var(--avx-ease); }
.avx-services.is-in .avx-title .l > span { transform:none; }
.avx-services.is-in .avx-title .l:nth-child(2) > span { transition-delay:.12s; }
.avx-more { display:inline-flex; align-items:center; gap:8px; color:var(--avx-accent); font-size:var(--_link-size); text-decoration:none; font-weight:500; padding:6px 0; position:relative; opacity:0; transform:translateY(8px); transition:opacity .8s ease .5s, transform .8s var(--avx-ease) .5s; }
.avx-services.is-in .avx-more { opacity:1; transform:none; }
.avx-more::after { content:""; position:absolute; left:0; bottom:2px; height:1px; width:100%; background:currentColor; transform:scaleX(0); transform-origin:right; transition:transform .5s var(--avx-ease); }
.avx-more:hover::after, .avx-more:focus-visible::after { transform:scaleX(1); transform-origin:left; }
.avx-more svg { width:12px; height:12px; transition:transform .4s var(--avx-ease); }
.avx-more:hover svg { transform:translate(3px,-3px); }
.avx-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.avx-item { position:relative; border:1px solid var(--avx-line); border-radius:8px; background:transparent; overflow:hidden; opacity:0; transform:translateY(24px); transition:opacity .8s ease, transform .9s var(--avx-ease), background .5s ease, border-color .5s ease; transition-delay:calc(var(--i) * 90ms + .35s), calc(var(--i) * 90ms + .35s), 0s, 0s; }
.avx-services.is-in .avx-item { opacity:1; transform:none; }
.avx-item::before { content:""; position:absolute; left:0; top:0; bottom:0; width:2px; background:var(--avx-accent); transform:scaleY(0); transform-origin:top; transition:transform .6s var(--avx-ease); }
.avx-item::after { content:""; position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .4s ease; background:radial-gradient(260px circle at var(--px,50%) var(--py,50%), rgba(46,226,122,.10), transparent 70%); }
.avx-item.is-open { background:var(--avx-surface); border-color:rgba(255,255,255,.16); }
.avx-item.is-open::before { transform:scaleY(1); }
.avx-item.is-open::after { opacity:1; }
.avx-btn { all:unset; box-sizing:border-box; width:100%; cursor:pointer; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:18px; padding:20px 22px; color:var(--avx-text); font-family:var(--_font-body); position:relative; z-index:1; }
.avx-btn:focus-visible { outline:2px solid var(--avx-accent); outline-offset:-2px; border-radius:8px; }
.avx-ico { width:34px; height:34px; color:currentColor; transition:color .4s ease, transform .6s var(--avx-ease); }
.avx-ico * { fill:none; stroke:currentColor; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:1; stroke-dashoffset:0; }
.avx-item.is-open .avx-ico { color:var(--avx-accent); transform:scale(1.08) rotate(-4deg); }
.avx-item.is-open .avx-ico * { animation:avx-draw .9s var(--avx-ease) both; }
@keyframes avx-draw { from{stroke-dashoffset:1} to{stroke-dashoffset:0} }
.avx-name { font-size:var(--_title-size); font-weight:var(--_title-weight); font-family:var(--_font-heading); line-height:1.2; transition:color .4s ease, transform .5s var(--avx-ease); }
.avx-num { font-size:var(--_num-size); font-weight:600; font-variant-numeric:tabular-nums; transition:color .4s ease; }
.avx-item.is-open .avx-name { color:var(--avx-accent); transform:translateX(4px); }
.avx-item.is-open .avx-num { color:var(--avx-accent); }
.avx-panel { display:grid; grid-template-rows:0fr; transition:grid-template-rows .6s var(--avx-ease); }
.avx-item.is-open .avx-panel { grid-template-rows:1fr; }
.avx-panel > div { overflow:hidden; min-height:0; }
.avx-desc { margin:0; padding:0 22px 24px calc(22px + 34px + 18px); max-width:62ch; color:var(--avx-muted); font-size:var(--_desc-size); line-height:var(--_desc-lh); opacity:0; transform:translateY(10px); transition:opacity .4s ease, transform .5s var(--avx-ease); }
.avx-item.is-open .avx-desc { opacity:1; transform:none; transition-delay:.15s; }
/* ============ Orb Visual ============ */
.avx-visual { position:relative; aspect-ratio:1/1; width:100%; max-width:520px; margin-inline:auto; perspective:900px; opacity:0; transform:scale(.88); transition:opacity 1.2s ease .5s, transform 1.4s var(--avx-ease) .5s; }
.avx-services.is-in .avx-visual { opacity:1; transform:none; }
.avx-glow { position:absolute; inset:14%; border-radius:50%; background:radial-gradient(circle, rgba(46,226,122,.35), transparent 65%); filter:blur(30px); transition:transform 1s var(--avx-ease), opacity .8s ease; opacity:.55; }
.avx-services[data-active="-1"] .avx-glow { opacity:.35; }
.avx-tilt { position:absolute; inset:0; transform-style:preserve-3d; transform:rotateX(var(--ry,0deg)) rotateY(var(--rx,0deg)); transition:transform .25s ease-out; }
.avx-state { position:absolute; inset:0; transform-style:preserve-3d; transform:rotateZ(var(--zrot,0deg)) scale(var(--zs,1)); transition:transform 1.2s var(--avx-ease); }
.avx-ring { position:absolute; inset:var(--in,8%); border-radius:50%; transform-style:preserve-3d; background:conic-gradient(from var(--from,0deg), #0b0b0b, #f4f4f4 12%, #3a3a3a 24%, #fff 38%, #0b0b0b 52%, #bdbdbd 66%, #1a1a1a 80%, #fafafa 92%, #0b0b0b); -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - var(--w,16%)), #000 calc(100% - var(--w,16%) + 1px)); mask:radial-gradient(farthest-side, transparent calc(100% - var(--w,16%)), #000 calc(100% - var(--w,16%) + 1px)); filter:drop-shadow(0 0 14px rgba(255,255,255,.12)); animation:var(--anim) linear infinite; }
.avx-ring:nth-child(1) { --in:6%; --w:15%; --from:0deg; --anim:avx-r1 22s; }
.avx-ring:nth-child(2) { --in:14%; --w:13%; --from:120deg; --anim:avx-r2 30s; }
.avx-ring:nth-child(3) { --in:24%; --w:11%; --from:240deg; --anim:avx-r3 18s; }
.avx-ring:nth-child(4) { --in:34%; --w:9%; --from:60deg; --anim:avx-r1 26s reverse; }
@keyframes avx-r1 { from{transform:rotateX(70deg) rotateZ(0)} to{transform:rotateX(70deg) rotateZ(360deg)} }
@keyframes avx-r2 { from{transform:rotateY(70deg) rotateZ(0)} to{transform:rotateY(70deg) rotateZ(-360deg)} }
@keyframes avx-r3 { from{transform:rotateX(35deg) rotateY(35deg) rotateZ(0)} to{transform:rotateX(35deg) rotateY(35deg) rotateZ(360deg)} }
.avx-img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; display:none; }
.avx-services.has-img .avx-img { display:block; }
.avx-services.has-img .avx-state { display:none; }
/* ============ Responsive & Accessibility ============ */
@media (max-width:900px) { .avx-wrap { grid-template-columns:1fr; } .avx-visual { max-width:380px; order:-1; } .avx-desc { padding-left:22px; } }
@media (prefers-reduced-motion:reduce) { .avx-services *, .avx-services *::before, .avx-services *::after { animation:none!important; transition-duration:.01ms!important; transition-delay:0s!important; } .avx-item, .avx-visual, .avx-more, .avx-title .l > span { opacity:1!important; transform:none!important; } }
/*service*/
/* ==========================================================================
Hektrova - Detailed Services Widget Styles
========================================================================== */
/* NOTE: The original inline CSS used dynamic #widget-id selectors. They were
converted to the .hektrova-detailed-services class so the file works for
every instance and Elementor's controls can override the defaults. */
.hektrova-detailed-services {
position: relative;
overflow: hidden;
}
.hektrova-detailed-services .ds-container {
max-width: 1320px;
margin: 0 auto;
padding: 0 15px;
box-sizing: border-box;
}
.hektrova-detailed-services .ds-header {
margin-bottom: 50px;
text-align: center;
}
.hektrova-detailed-services .ds-main-title {
margin: 0 0 15px 0;
line-height: 1.1;
}
.hektrova-detailed-services .ds-main-desc {
margin: 0 auto;
max-width: 600px;
}
.hektrova-detailed-services .ds-grid {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 3 columns top, 2 centered bottom */
gap: 24px;
justify-items: center;
}
.hektrova-detailed-services .ds-card {
box-sizing: border-box;
transition: all 0.3s ease;
position: relative;
display: flex;
flex-direction: column;
width: 100%;
}
.hektrova-detailed-services .ds-card:hover {
transform: translateY(-5px);
box-shadow: 0 15px 40px rgba(0,0,0,0.3);
}
.hektrova-detailed-services .ds-icon {
width: 54px;
height: 54px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 24px;
}
.hektrova-detailed-services .ds-title {
margin: 0 0 10px 0;
}
.hektrova-detailed-services .ds-desc {
margin: 0 0 25px 0;
}
.hektrova-detailed-services .ds-included-title {
margin-bottom: 15px;
padding-bottom: 15px;
border-bottom: 1px solid rgba(255,255,255,0.05);
}
.hektrova-detailed-services .ds-included-list {
list-style: none;
padding: 0;
margin: 0;
}
.hektrova-detailed-services .ds-included-list li {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 10px;
}
.hektrova-detailed-services .ds-check {
color: #30D56C;
font-weight: bold;
font-size: 14px;
}
/* ============ RESPONSIVE LAYOUTS ============ */
@media (max-width: 991.98px) {
.hektrova-detailed-services .ds-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 767.98px) {
.hektrova-detailed-services .ds-grid {
grid-template-columns: 1fr;
}
}
/* Performance Marketing */
/* ==========================================================================
Hektrova - Performance Marketing Banner Widget Styles
(About Us banner jaisi hi functionality — sirf class names alag: pb-* -> pmb-*)
========================================================================== */
.pmb-wrap {
--pmb-accent: #2EE27A;
--pmb-ov: .65;
position: relative; display: flex; align-items: center; justify-content: center; text-align: center;
min-height: 300px; overflow: hidden; overflow: clip; background: #030303; isolation: isolate;
font-family: 'Inter', sans-serif; color: #fff;
}
.pmb-wrap * { box-sizing: border-box; }
.pmb-wrap a, .pmb-wrap a:hover, .pmb-wrap a:focus { text-decoration: none; }
.pmb-wrap h1, .pmb-wrap h2, .pmb-wrap h3, .pmb-wrap div.pmb-title { margin: 0; }
/* --- Background swirl (default) or your image --- */
.pmb-wrap .pmb-art {
position: absolute; inset: -20%; z-index: -4; transform-origin: 100% 0;
background:
radial-gradient(ellipse 40% 55% at 48% 72%, rgba(46,226,122,.20), transparent 70%),
repeating-radial-gradient(ellipse 130% 190% at 112% -25%, #060607 0, #060607 14px, #1d1e21 26px, #2c2d31 34px, #0c0c0e 50px, #060607 62px);
animation: pmbSwirl 22s ease-in-out infinite alternate;
}
.pmb-wrap .pmb-art.has-img { inset: 0; background-size: cover; background-position: center; animation: pmbKen 26s ease-in-out infinite alternate; }
.pmb-wrap .pmb-ov { position: absolute; inset: 0; z-index: -3; background: #000; opacity: var(--pmb-ov, .65); pointer-events: none; }
.pmb-wrap .pmb-glow {
position: absolute; inset: 0; z-index: -2; pointer-events: none;
background: radial-gradient(ellipse 36% 60% at 50% 100%, rgba(46,226,122,.3), transparent 70%);
background: radial-gradient(ellipse 36% 60% at 50% 100%, color-mix(in srgb, var(--pmb-accent) 30%, transparent), transparent 70%);
animation: pmbPulse 6s ease-in-out infinite;
}
.pmb-wrap .pmb-shade {
position: absolute; inset: 0; z-index: -1; pointer-events: none;
background: linear-gradient(90deg, rgba(0,0,0,.94) 0%, rgba(0,0,0,.6) 38%, transparent 78%), linear-gradient(180deg, transparent 55%, rgba(0,0,0,.7));
}
.pmb-wrap .pmb-dots { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.pmb-wrap .pmb-dots i {
position: absolute; width: 4px; height: 4px; border-radius: 50%; background: var(--pmb-accent); opacity: 0;
box-shadow: 0 0 12px var(--pmb-accent); animation: pmbDrift 7s ease-in-out infinite;
}
/* --- Inner content --- */
.pmb-wrap .pmb-inner { position: relative; padding: 40px 20px; }
.pmb-wrap .pmb-title { color: #fff; font-family: 'Poppins', sans-serif; font-size: 44px; font-weight: 700; line-height: 1.15; perspective: 600px; }
.pmb-wrap .pmb-title .pmb-w { display: inline-block; white-space: nowrap; }
.pmb-wrap .pmb-title .pmb-ch { display: inline-block; }
.pmb-wrap .pmb-crumb {
display: inline-flex; align-items: center; gap: 14px; margin-top: 22px; padding: 12px 26px;
background-color: rgba(255,255,255,.07); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
border-radius: 3px; color: #fff; font-size: 14px; font-weight: 500;
}
.pmb-wrap .pmb-crumb a { color: #fff; transition: color .3s ease; }
.pmb-wrap .pmb-crumb a:hover { color: var(--pmb-accent); }
.pmb-wrap .pmb-arrow { flex: none; width: 13px; height: 13px; }
.pmb-wrap .pmb-crumb .pmb-cur { color: var(--pmb-accent); }
.pmb-wrap.pmb-ul .pmb-crumb a, .pmb-wrap.pmb-ul .pmb-crumb .pmb-cur { text-decoration: underline; text-underline-offset: 3px; }
/* =====================================================
ANIMATIONS (only when "Enable Animations" is on)
===================================================== */
.pmb-wrap.pmb-anim .pmb-title .pmb-ch, .pmb-wrap.pmb-anim .pmb-rv { opacity: 0; }
.pmb-wrap.pmb-anim.pmb-in .pmb-title .pmb-ch { opacity: 1; animation: pmbChar .8s cubic-bezier(.2,.7,.2,1) calc(.12s + var(--pmbc, 0) * .06s) backwards; }
.pmb-wrap.pmb-anim.pmb-in .pmb-rv { opacity: 1; animation: pmbUp .85s cubic-bezier(.2,.7,.2,1) var(--pmbd, 0s) backwards; }
.pmb-wrap.pmb-anim .pmb-arrow { animation: pmbNudge 1.8s ease-in-out infinite; }
.pmb-wrap:not(.pmb-anim) .pmb-art, .pmb-wrap:not(.pmb-anim) .pmb-glow { animation: none; }
.pmb-wrap:not(.pmb-anim) .pmb-dots { display: none; }
/* --- Keyframes --- */
@keyframes pmbSwirl { 0% { transform: rotate(-2deg) scale(1); } 100% { transform: rotate(3deg) scale(1.08); } }
@keyframes pmbKen { 0% { transform: scale(1); } 100% { transform: scale(1.1); } }
@keyframes pmbPulse { 0%,100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes pmbDrift { 0% { opacity: 0; transform: translateY(0) scale(.6); } 25% { opacity: .9; } 100% { opacity: 0; transform: translateY(-70px) scale(1.2); } }
@keyframes pmbChar { from { opacity: 0; transform: translateY(44px) rotateX(-80deg); filter: blur(6px); } to { opacity: 1; transform: translateY(0) rotateX(0); filter: blur(0); } }
@keyframes pmbUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
@keyframes pmbNudge { 0%,100% { transform: translateX(0); } 50% { transform: translateX(4px); } }
/* --- Accessibility --- */
@media (prefers-reduced-motion: reduce) {
.pmb-wrap.pmb-anim *, .pmb-wrap.pmb-anim *::before, .pmb-wrap.pmb-anim *::after { animation: none !important; transition: none !important; }
.pmb-wrap.pmb-anim .pmb-title .pmb-ch, .pmb-wrap.pmb-anim .pmb-rv { opacity: 1 !important; }
}
/* Performance logo 2 Marketing */
/* ==========================================================================
Hektrova - Brands Marquee Widget Styles
(Same pattern as the Hektrova widgets: separate CSS file, prefix hbm-*)
Colors: dark base #04050d, accent green #2EE27A, secondary blue #1f6fe0
========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap');
.hbm-wrap {
--hbm-accent: #2EE27A;
--hbm-blue: #1f6fe0;
--hbm-border: rgba(255,255,255,.08);
--hbm-gap: 80px;
--hbm-speed: 30s;
--hbm-op: .6;
position: relative; width: 100%; padding: 34px 30px; overflow: hidden; overflow: clip;
background: #04050d; isolation: isolate;
border-top: 1px solid var(--hbm-border); border-bottom: 1px solid var(--hbm-border);
font-family: 'Inter', sans-serif; color: #fff;
}
.hbm-wrap * { box-sizing: border-box; }
.hbm-wrap a, .hbm-wrap a:hover, .hbm-wrap a:focus { text-decoration: none; }
/* --- soft green glow behind the strip --- */
.hbm-wrap::before {
content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
background: radial-gradient(ellipse 30% 120% at 8% 50%, rgba(46,226,122,.10), transparent 70%);
background: radial-gradient(ellipse 30% 120% at 8% 50%, color-mix(in srgb, var(--hbm-accent) 12%, transparent), transparent 70%);
}
/* --- glowing top line (optional) --- */
.hbm-wrap.hbm-line::after {
content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px; z-index: 1; pointer-events: none;
background: linear-gradient(90deg, transparent, var(--hbm-accent) 25%, var(--hbm-blue) 75%, transparent);
box-shadow: 0 0 14px var(--hbm-accent); opacity: .85;
}
/* --- layout --- */
.hbm-wrap .hbm-inner { display: flex; align-items: center; gap: 34px; }
.hbm-wrap .hbm-label {
flex: none; white-space: nowrap; padding-right: 34px; border-right: 1px solid var(--hbm-border);
color: var(--hbm-accent); font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 700;
letter-spacing: 2px; text-transform: uppercase; line-height: 1.2;
}
/* --- marquee --- */
.hbm-wrap .hbm-marquee { display: flex; flex: 1; min-width: 0; overflow: hidden; user-select: none; }
.hbm-wrap.hbm-fade .hbm-marquee {
-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 70px, #000 calc(100% - 70px), transparent 100%);
mask-image: linear-gradient(90deg, transparent 0, #000 70px, #000 calc(100% - 70px), transparent 100%);
}
.hbm-wrap .hbm-group {
display: flex; flex: none; align-items: center; min-width: 100%;
gap: var(--hbm-gap); padding-right: var(--hbm-gap);
animation: hbmScroll var(--hbm-speed) linear infinite;
}
.hbm-wrap.hbm-rev .hbm-group { animation-direction: reverse; }
.hbm-wrap.hbm-pause .hbm-marquee:hover .hbm-group { animation-play-state: paused; }
/* --- logos --- */
.hbm-wrap .hbm-item { display: flex; flex: none; align-items: center; justify-content: center; }
.hbm-wrap .hbm-item img {
display: block; width: auto; height: 40px; max-width: 160px; object-fit: contain;
opacity: var(--hbm-op); transition: opacity .35s ease, transform .45s cubic-bezier(.34,1.56,.64,1), filter .35s ease;
}
.hbm-wrap .hbm-item:hover img {
opacity: 1; transform: scale(1.1);
filter: drop-shadow(0 0 12px rgba(46,226,122,.55));
filter: drop-shadow(0 0 12px color-mix(in srgb, var(--hbm-accent) 55%, transparent));
}
/* =====================================================
ANIMATIONS (only when "Enable Animations" is on)
===================================================== */
.hbm-wrap.hbm-anim .hbm-label,
.hbm-wrap.hbm-anim .hbm-marquee { opacity: 0; }
.hbm-wrap.hbm-anim.hbm-in .hbm-label { opacity: 1; animation: hbmLeft .85s cubic-bezier(.2,.7,.2,1) .1s backwards; }
.hbm-wrap.hbm-anim.hbm-in .hbm-marquee { opacity: 1; animation: hbmFade 1.1s ease .35s backwards; }
.hbm-wrap.hbm-anim.hbm-line::after { transform-origin: center; }
.hbm-wrap.hbm-anim:not(.hbm-in).hbm-line::after { transform: scaleX(0); }
.hbm-wrap.hbm-anim.hbm-in.hbm-line::after { animation: hbmLine 1.4s cubic-bezier(.65,.05,.2,1) backwards; }
/* --- Keyframes --- */
@keyframes hbmScroll { from { transform: translateX(0); } to { transform: translateX(-100%); } }
@keyframes hbmLeft { from { opacity: 0; transform: translateX(-30px); } to { opacity: 1; transform: translateX(0); } }
@keyframes hbmFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes hbmLine { from { transform: scaleX(0); } to { transform: scaleX(1); } }
/* =====================================================
RESPONSIVE
===================================================== */
@media (max-width: 1024px) {
.hbm-wrap .hbm-inner { gap: 26px; }
.hbm-wrap .hbm-label { padding-right: 26px; }
}
@media (max-width: 767px) {
.hbm-wrap .hbm-inner { flex-direction: column; align-items: flex-start; gap: 18px; }
.hbm-wrap .hbm-label { padding-right: 0; border-right: 0; white-space: normal; font-size: 12px; }
.hbm-wrap .hbm-marquee { width: 100%; flex: none; }
.hbm-wrap.hbm-fade .hbm-marquee {
-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 36px, #000 calc(100% - 36px), transparent 100%);
mask-image: linear-gradient(90deg, transparent 0, #000 36px, #000 calc(100% - 36px), transparent 100%);
}
}
/* --- Accessibility --- */
@media (prefers-reduced-motion: reduce) {
.hbm-wrap *, .hbm-wrap *::before, .hbm-wrap *::after { animation: none !important; transition: none !important; }
.hbm-wrap.hbm-anim .hbm-label, .hbm-wrap.hbm-anim .hbm-marquee { opacity: 1 !important; }
.hbm-wrap .hbm-marquee { overflow-x: auto; }
}
/* Performance 2 Marketing */
/* ==========================================================================
Hektrova - Service Details Widget Styles
Colours follow the Performance Marketing Banner: accent #2EE27A on #030303.
Class prefix: sd-* (widget file: hektrova-service-details-widget.php)
Keep this file in the SAME folder as the widget PHP file.
========================================================================== */
.sd-wrap {
--sd-accent: #2EE27A; --sd-accent2: #28B45A; --sd-on: #04120a; --sd-check: #2EE27A;
--sd-card: #0a0d0c; --sd-item: #141917; --sd-head: #fff; --sd-text: rgba(255,255,255,.7); --sd-side: 380px;
position: relative; overflow: hidden; overflow: clip; padding: 90px 0; background: #030303; color: var(--sd-text); font-family: 'Inter', sans-serif;
}
.sd-wrap::before { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
background: radial-gradient(ellipse 55% 45% at 8% 100%, color-mix(in srgb, var(--sd-accent) 16%, transparent), transparent 70%), radial-gradient(ellipse 45% 35% at 95% 0%, color-mix(in srgb, var(--sd-accent) 9%, transparent), transparent 70%); }
.sd-wrap * { box-sizing: border-box; }
.sd-wrap a, .sd-wrap a:hover, .sd-wrap a:focus { text-decoration: none; }
.sd-wrap h1, .sd-wrap h2, .sd-wrap h3, .sd-wrap h4, .sd-wrap p, .sd-wrap ul, .sd-wrap figure { margin: 0; padding: 0; list-style: none; }
.sd-wrap .sd-glow { position: absolute; z-index: 0; border-radius: 50%; filter: blur(120px); pointer-events: none; will-change: transform; }
.sd-wrap .sd-glow-1 { width: 380px; height: 380px; top: 10%; right: -80px; background: var(--sd-accent); opacity: .09; animation: sdGlowA 20s ease-in-out infinite alternate; }
.sd-wrap .sd-glow-2 { width: 340px; height: 340px; bottom: 5%; left: -60px; background: var(--sd-accent2); opacity: .12; animation: sdGlowB 24s ease-in-out infinite alternate; }
@keyframes sdGlowA { from { transform: translate(0,0) scale(1); } to { transform: translate(-160px, 160px) scale(1.2); } }
@keyframes sdGlowB { from { transform: translate(0,0) scale(1); } to { transform: translate(180px, -120px) scale(1.25); } }
.sd-wrap .sd-dots { position: absolute; z-index: 1; inset: 0; pointer-events: none; overflow: hidden; }
.sd-wrap .sd-dots i { position: absolute; width: var(--sz, 4px); height: var(--sz, 4px); border-radius: 50%; background: var(--sd-accent); box-shadow: 0 0 10px 2px color-mix(in srgb, var(--sd-accent) 70%, transparent); opacity: 0; animation: sdDot var(--dur, 14s) ease-in-out var(--del, 0s) infinite; }
@keyframes sdDot { 0% { opacity: 0; transform: translate(0, 20px) scale(.6); } 25% { opacity: .85; } 65% { opacity: .5; } 100% { opacity: 0; transform: translate(var(--dx, 0px), -90px) scale(1.2); } }
/* ============ LAYOUT ============ */
.sd-wrap .sd-container { position: relative; z-index: 2; width: 92%; max-width: 1240px; margin-inline: auto; }
.sd-wrap .sd-layout { display: grid; grid-template-columns: minmax(0, 1fr) var(--sd-side, 380px); column-gap: 36px; align-items: start; }
.sd-wrap .sd-main { display: flex; flex-direction: column; gap: 34px; min-width: 0; }
.sd-wrap .sd-side { display: flex; flex-direction: column; gap: 34px; min-width: 0; }
.sd-wrap.sd-sticky .sd-side { position: sticky; top: 110px; }
/* main image */
.sd-wrap .sd-media { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: #0a0d0c; transform-style: preserve-3d; will-change: transform; transition: transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .5s ease; }
.sd-wrap .sd-media.is-tilting { transition: transform .12s linear, box-shadow .5s ease; }
.sd-wrap .sd-media img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; transition: transform 1.2s cubic-bezier(.2,.7,.2,1); }
.sd-wrap .sd-media:hover img { transform: scale(1.05); }
.sd-wrap .sd-media-shine { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.12) 50%, transparent 60%); transform: translateX(-120%); }
.sd-wrap .sd-media:hover .sd-media-shine { transform: translateX(120%); transition: transform 1.1s ease; }
/* text blocks */
.sd-wrap .sd-block { min-width: 0; }
.sd-wrap .sd-title { position: relative; display: inline-block; margin-bottom: 18px; color: var(--sd-head); font-family: 'Poppins', sans-serif; font-size: 36px; font-weight: 600; line-height: 1.25; }
.sd-wrap .sd-title-line { display: block; width: 56px; height: 3px; margin-top: 12px; border-radius: 3px; background: linear-gradient(90deg, var(--sd-accent), var(--sd-accent2)); transform-origin: left; }
.sd-wrap .sd-intro { margin-bottom: 18px; color: rgba(255,255,255,.88); font-family: 'Inter', sans-serif; font-size: 18px; line-height: 1.75; }
.sd-wrap .sd-rich, .sd-wrap .sd-rich p { color: var(--sd-text); font-family: 'Inter', sans-serif; font-size: 16px; line-height: 1.8; }
.sd-wrap .sd-rich p + p { margin-top: 16px; }
.sd-wrap .sd-rich a { color: var(--sd-accent); }
/* highlight box */
.sd-wrap .sd-quote { position: relative; padding: 26px 32px 28px; border-radius: 14px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.07); overflow: hidden; }
.sd-wrap .sd-quote-tx { color: var(--sd-head); font-family: 'Inter', sans-serif; font-size: 19px; font-weight: 500; line-height: 1.55; }
.sd-wrap .sd-quote-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--sd-accent) 20%, var(--sd-accent) 80%, transparent); box-shadow: 0 0 14px var(--sd-accent); transform-origin: center; }
/* block headings */
.sd-wrap .sd-sub { margin-bottom: 20px; padding-top: 28px; border-top: 1px solid rgba(255,255,255,.08); color: var(--sd-head); font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
/* checklist */
.sd-wrap .sd-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 28px; }
.sd-wrap .sd-list li { display: flex; align-items: center; gap: 14px; color: rgba(255,255,255,.88); font-family: 'Inter', sans-serif; font-size: 16px; font-weight: 500; line-height: 1.4; transition: transform .4s cubic-bezier(.2,.7,.2,1), color .3s ease; }
.sd-wrap .sd-list li:hover { transform: translateX(6px); color: #fff; }
.sd-wrap .sd-chk { flex: none; display: grid; place-items: center; width: 24px; height: 24px; color: var(--sd-check); }
.sd-wrap .sd-chk svg { display: block; width: 100%; height: 100%; overflow: visible; }
.sd-wrap .sd-tick { stroke-dasharray: 1; stroke-dashoffset: 0; }
/* process */
.sd-wrap .sd-steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.sd-wrap .sd-step { position: relative; padding: 24px 24px 22px; border-radius: 14px; background: var(--sd-card); border: 1px solid rgba(255,255,255,.06); overflow: hidden; transition: transform .45s cubic-bezier(.2,.7,.2,1), border-color .4s ease, box-shadow .4s ease; }
.sd-wrap .sd-step::before { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 2px; background: linear-gradient(90deg, var(--sd-accent), var(--sd-accent2)); transform: scaleX(0); transform-origin: left; transition: transform .6s cubic-bezier(.65,.05,.2,1); }
.sd-wrap .sd-step:hover { transform: translateY(-5px); border-color: color-mix(in srgb, var(--sd-accent) 40%, transparent); box-shadow: 0 20px 36px -22px color-mix(in srgb, var(--sd-accent) 55%, transparent); }
.sd-wrap .sd-step:hover::before { transform: scaleX(1); }
.sd-wrap .sd-num { display: inline-grid; place-items: center; min-width: 40px; height: 28px; padding: 0 10px; margin-bottom: 14px; border-radius: 999px; background: color-mix(in srgb, var(--sd-accent) 16%, transparent); color: var(--sd-accent); font-family: 'Poppins', sans-serif; font-size: 13px; font-weight: 600; }
.sd-wrap .sd-step h4 { margin-bottom: 8px; color: var(--sd-head); font-family: 'Poppins', sans-serif; font-size: 17px; font-weight: 600; line-height: 1.35; }
.sd-wrap .sd-step p { color: var(--sd-text); font-size: 15px; line-height: 1.7; }
/* chips */
.sd-wrap .sd-chips { display: flex; flex-wrap: wrap; gap: 12px; }
.sd-wrap .sd-chip { display: inline-block; padding: 10px 20px; border-radius: 999px; background: var(--sd-item); border: 1px solid rgba(255,255,255,.07); color: rgba(255,255,255,.9); font-family: 'Inter', sans-serif; font-size: 15px; font-weight: 500; line-height: 1.2; transition: transform .35s cubic-bezier(.34,1.56,.64,1), background .3s ease, border-color .3s ease, color .3s ease; }
.sd-wrap .sd-chip:hover { transform: translateY(-3px); background: color-mix(in srgb, var(--sd-accent) 16%, var(--sd-item)); border-color: color-mix(in srgb, var(--sd-accent) 55%, transparent); color: #fff; }
/* ============ SIDEBAR ============ */
.sd-wrap .sd-card { position: relative; padding: 30px; border-radius: 14px; background: var(--sd-card); border: 1px solid rgba(255,255,255,.06); overflow: hidden; }
.sd-wrap .sd-menu { display: flex; flex-direction: column; gap: 12px; padding: 4px 8px; }
.sd-wrap .sd-menu li { position: relative; }
.sd-wrap .sd-menu a { position: relative; display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-radius: 6px; background: var(--sd-item); color: #fff; font-family: 'Inter', sans-serif; font-size: 15px; font-weight: 600; line-height: 1.3; overflow: hidden; transition: transform .4s cubic-bezier(.2,.7,.2,1), color .3s ease, background .35s ease, box-shadow .35s ease; }
.sd-wrap .sd-menu a::before { content: ''; position: absolute; inset: 0; background: var(--sd-accent); transform: translateX(-101%); transition: transform .5s cubic-bezier(.65,.05,.2,1); z-index: 0; }
.sd-wrap .sd-menu a > * { position: relative; z-index: 1; }
.sd-wrap .sd-menu a:hover { transform: translateX(6px); color: var(--sd-on); }
.sd-wrap .sd-menu a:hover::before { transform: translateX(0); }
.sd-wrap .sd-menu .is-active a { background: var(--sd-accent); color: var(--sd-on); box-shadow: 0 14px 26px -14px var(--sd-accent); }
.sd-wrap .sd-chev { display: inline-flex; width: 10px; height: 10px; flex: none; transition: transform .35s cubic-bezier(.34,1.56,.64,1); }
.sd-wrap .sd-chev svg { display: block; width: 100%; height: 100%; }
.sd-wrap .sd-menu a:hover .sd-chev { transform: translateX(4px); }
/* contact card */
.sd-wrap .sd-contact { display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: 38px; padding-bottom: 36px; background-image: linear-gradient(rgba(5,8,7,.84), rgba(5,8,7,.92)), var(--sd-cbg, none); background-size: cover; background-position: center; }
.sd-wrap .sd-phone-ico { position: relative; display: grid; place-items: center; width: 58px; height: 58px; margin-bottom: 18px; border-radius: 50%; background: var(--sd-accent); color: var(--sd-on); }
.sd-wrap .sd-phone-ico svg { display: block; width: 26px; height: 26px; animation: sdRing 2.6s ease-in-out infinite; transform-origin: 50% 50%; }
.sd-wrap .sd-ring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--sd-accent); animation: sdPulse 2.2s ease-out infinite; }
@keyframes sdPulse { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(1.9); opacity: 0; } }
@keyframes sdRing { 0%, 55%, 100% { transform: rotate(0); } 60% { transform: rotate(-14deg); } 70% { transform: rotate(12deg); } 80% { transform: rotate(-9deg); } 90% { transform: rotate(6deg); } }
.sd-wrap .sd-card-title { color: var(--sd-head); font-family: 'Poppins', sans-serif; font-size: 17px; font-weight: 600; line-height: 1.4; }
.sd-wrap .sd-small { margin-top: 14px; color: rgba(255,255,255,.78); font-size: 14px; line-height: 1.6; }
.sd-wrap .sd-phone { display: inline-block; margin-top: 8px; color: #fff; font-family: 'Poppins', sans-serif; font-size: 24px; font-weight: 700; letter-spacing: .01em; transition: color .3s ease, transform .35s cubic-bezier(.34,1.56,.64,1); }
.sd-wrap .sd-phone:hover { color: var(--sd-accent); transform: scale(1.05); }
/* brochure card */
.sd-wrap .sd-bar-title { position: relative; padding-left: 14px; margin-bottom: 14px; }
.sd-wrap .sd-bar-title::before { content: ''; position: absolute; left: 0; top: 50%; width: 3px; height: 18px; margin-top: -9px; border-radius: 3px; background: var(--sd-accent); box-shadow: 0 0 10px var(--sd-accent); }
.sd-wrap .sd-small.sd-left { margin-top: 0; text-align: left; }
.sd-wrap .sd-btn { position: relative; display: inline-flex; align-items: center; gap: 10px; margin-top: 22px; padding: 13px 26px 13px 20px; border-radius: 999px; background: linear-gradient(90deg, var(--sd-accent), var(--sd-accent2)); color: var(--sd-on); font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 700; line-height: 1; overflow: hidden; box-shadow: 0 14px 26px -14px var(--sd-accent); transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease; }
.sd-wrap .sd-btn::after { content: ''; position: absolute; top: 0; left: -70%; width: 40%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.5), transparent); transform: skewX(-20deg); animation: sdShine 4.8s ease-in-out 2.4s infinite; }
@keyframes sdShine { 0% { left: -70%; } 28%, 100% { left: 150%; } }
.sd-wrap .sd-btn:hover { transform: translateY(-3px); box-shadow: 0 20px 32px -14px var(--sd-accent); }
.sd-wrap .sd-btn-ico { display: inline-flex; width: 15px; height: 15px; transition: transform .4s cubic-bezier(.34,1.56,.64,1); }
.sd-wrap .sd-btn-ico svg { display: block; width: 100%; height: 100%; }
.sd-wrap .sd-btn:hover .sd-btn-ico { transform: translateY(2px) scale(1.15); }
/* =====================================================
* ANIMATIONS (only when "Enable Animations" is on)
* ===================================================== */
.sd-wrap.sd-anim .sd-reveal { opacity: 0; transform: translateY(44px); transition: opacity .9s ease, transform 1s cubic-bezier(.2,.7,.2,1); }
.sd-wrap.sd-anim .sd-reveal.is-in { opacity: 1; transform: none; }
.sd-wrap.sd-anim .sd-rv-side { transform: translateX(40px); }
.sd-wrap.sd-anim .sd-rv-img { transform: scale(.94); clip-path: inset(0 100% 0 0 round 10px); transition: opacity .9s ease, transform 1.2s cubic-bezier(.2,.7,.2,1), clip-path 1.2s cubic-bezier(.65,.05,.2,1); }
.sd-wrap.sd-anim .sd-rv-img.is-in { clip-path: inset(0 0 0 0 round 10px); }
.sd-wrap.sd-anim .sd-rv-img.is-in.is-tilting { transition: transform .12s linear; }
.sd-wrap.sd-anim .sd-rv-img.is-in:not(.is-tilting) { transition: transform .6s cubic-bezier(.2,.7,.2,1), clip-path 1.2s cubic-bezier(.65,.05,.2,1), opacity .9s ease; }
.sd-wrap.sd-anim .sd-rv-img img { transform: scale(1.25); }
.sd-wrap.sd-anim .sd-rv-img.is-in img { transform: scale(1); transition: transform 1.8s cubic-bezier(.2,.7,.2,1) .15s; }
.sd-wrap.sd-anim .sd-rv-img.is-in:hover img { transform: scale(1.05); transition: transform 1.2s cubic-bezier(.2,.7,.2,1); }
/* title underline grows */
.sd-wrap.sd-anim .sd-title-line { transform: scaleX(0); }
.sd-wrap.sd-anim .is-in .sd-title-line { transform: scaleX(1); transition: transform 1s cubic-bezier(.65,.05,.2,1) .5s; }
/* highlight bar sweeps in */
.sd-wrap.sd-anim .sd-quote-bar { transform: scaleX(0); }
.sd-wrap.sd-anim .is-in .sd-quote-bar { transform: scaleX(1); transition: transform 1.3s cubic-bezier(.65,.05,.2,1) .45s; }
/* list / steps / chips / menu stagger */
.sd-wrap.sd-anim .sd-list li, .sd-wrap.sd-anim .sd-step, .sd-wrap.sd-anim .sd-chip, .sd-wrap.sd-anim .sd-menu li { opacity: 0; transform: translateY(18px); }
.sd-wrap.sd-anim .sd-menu li { transform: translateX(26px); }
.sd-wrap.sd-anim .is-in .sd-list li, .sd-wrap.sd-anim .is-in .sd-step, .sd-wrap.sd-anim .is-in .sd-chip, .sd-wrap.sd-anim .is-in .sd-menu li { opacity: 1; transform: none; transition: opacity .7s ease calc(.25s + var(--i, 0) * .09s), transform .8s cubic-bezier(.2,.7,.2,1) calc(.25s + var(--i, 0) * .09s); }
.sd-wrap.sd-anim .is-in .sd-list li:hover { transition: transform .4s cubic-bezier(.2,.7,.2,1), color .3s ease; transform: translateX(6px); }
.sd-wrap.sd-anim .is-in .sd-step:hover { transform: translateY(-5px); transition: transform .45s cubic-bezier(.2,.7,.2,1), border-color .4s ease, box-shadow .4s ease; }
.sd-wrap.sd-anim .is-in .sd-chip:hover { transform: translateY(-3px); transition: transform .35s cubic-bezier(.34,1.56,.64,1), background .3s ease, border-color .3s ease, color .3s ease; }
/* check icons draw themselves */
.sd-wrap.sd-anim .sd-tick { stroke-dashoffset: 1; }
.sd-wrap.sd-anim .is-in .sd-tick { stroke-dashoffset: 0; transition: stroke-dashoffset .7s cubic-bezier(.65,.05,.2,1) calc(.55s + var(--i, 0) * .09s); }
.sd-wrap.sd-anim .is-in .sd-list li .sd-chk svg { animation: sdPop .6s cubic-bezier(.34,1.56,.64,1) calc(.3s + var(--i, 0) * .09s) both; }
@keyframes sdPop { from { transform: scale(.4); } to { transform: scale(1); } }
/* active menu pulse */
.sd-wrap.sd-anim .sd-menu .is-active a { animation: sdActive 3.2s ease-in-out 1.8s infinite; }
@keyframes sdActive { 0%, 100% { box-shadow: 0 14px 26px -14px var(--sd-accent); } 50% { box-shadow: 0 14px 34px -8px var(--sd-accent); } }
@media (prefers-reduced-motion: reduce) {
.sd-wrap *, .sd-wrap *::before, .sd-wrap *::after { animation: none !important; transition: none !important; }
.sd-wrap.sd-anim .sd-reveal, .sd-wrap.sd-anim .sd-list li, .sd-wrap.sd-anim .sd-step, .sd-wrap.sd-anim .sd-chip, .sd-wrap.sd-anim .sd-menu li { opacity: 1; transform: none; clip-path: none; }
.sd-wrap.sd-anim .sd-title-line, .sd-wrap.sd-anim .sd-quote-bar, .sd-wrap.sd-anim .sd-rv-img img { transform: none; }
.sd-wrap.sd-anim .sd-tick { stroke-dashoffset: 0; }
.sd-wrap .sd-dots { display: none; }
}
/* =====================================================
* RESPONSIVE
* ===================================================== */
@media (max-width: 1024px) {
.sd-wrap .sd-layout { grid-template-columns: minmax(0, 1fr); row-gap: 34px; }
.sd-wrap.sd-sticky .sd-side { position: static; }
.sd-wrap .sd-title { font-size: 30px; }
.sd-wrap .sd-side { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.sd-wrap .sd-menu-card { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
.sd-wrap .sd-title { font-size: 26px; }
.sd-wrap .sd-intro { font-size: 16px; }
.sd-wrap .sd-rich, .sd-wrap .sd-rich p { font-size: 15px; }
.sd-wrap .sd-quote { padding: 20px 22px 22px; }
.sd-wrap .sd-quote-tx { font-size: 16px; }
.sd-wrap .sd-list, .sd-wrap .sd-steps { grid-template-columns: minmax(0, 1fr); }
.sd-wrap .sd-side { grid-template-columns: minmax(0, 1fr); }
.sd-wrap .sd-card { padding: 22px 20px; }
.sd-wrap .sd-glow { opacity: .08; }
}
/* why choose us */
/* Fonts: Figtree (headings) + Inter (body) */
@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');
.why-choose-section {
--wc-accent: #2EE27A;
--wc-glow: rgba(46, 226, 122, 0.14);
position: relative;
padding: 120px 0;
overflow: hidden;
overflow: clip;
font-family: 'Inter', sans-serif;
background-color: #04070d;
background-image: radial-gradient(ellipse 50% 45% at 0% 0%, var(--wc-glow), transparent 70%);
color: #ffffff;
}
.why-choose-section * { box-sizing: border-box; }
.why-choose-section .container { width: min(1200px, 92%); margin-inline: auto; }
.why-choose-section .why-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 60px;
align-items: center;
}
/* ============ Left Column ============ */
.why-choose-section .left-header { margin-bottom: 40px; }
/* Eyebrow: "Our Services" with double line + glowing dot */
.why-choose-section .why-eyebrow {
display: inline-flex;
align-items: center;
gap: 14px;
margin-bottom: 18px;
}
.why-choose-section .why-eb-deco {
position: relative;
display: block;
width: 58px;
height: 22px;
flex: none;
}
.why-choose-section .eb-line {
position: absolute;
left: 0;
height: 2px;
border-radius: 2px;
background: linear-gradient(90deg, transparent 0%, var(--wc-accent) 100%);
}
.why-choose-section .eb-line-1 { top: 9px; width: 100%; }
.why-choose-section .eb-line-2 { top: 15px; width: 62%; }
.why-choose-section .eb-dot {
position: absolute;
top: 0;
right: 4px;
width: 9px;
height: 9px;
border-radius: 50%;
background: var(--wc-accent);
box-shadow: 0 0 0 3px rgba(46, 226, 122, 0.15), 0 0 14px var(--wc-accent);
animation: wcDot 2.6s ease-in-out infinite;
}
@keyframes wcDot {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.3); opacity: .75; }
}
.why-choose-section .why-eyebrow-text {
color: var(--wc-accent);
font-family: 'Figtree', sans-serif;
font-size: 16px;
font-weight: 500;
letter-spacing: .3px;
text-transform: none;
line-height: 1;
}
.why-choose-section .why-title {
margin: 0 0 18px 0;
color: #ffffff;
font-family: 'Figtree', sans-serif;
font-size: 52px;
font-weight: 700;
line-height: 1.15;
letter-spacing: -.5px;
}
.why-choose-section .main-desc {
font-size: 16px;
line-height: 1.6;
color: rgba(255,255,255,0.6);
margin: 0;
max-width: 450px;
}
/* ============ Features ============ */
.why-choose-section .features-list {
display: flex;
flex-direction: column;
gap: 25px;
}
.why-choose-section .feature-item {
display: flex;
align-items: flex-start;
gap: 20px;
}
.why-choose-section .feature-item:hover { transform: translateX(10px); }
.why-choose-section .feature-icon {
width: 50px;
height: 50px;
min-width: 50px;
border-radius: 12px;
background: rgba(46, 226, 122, 0.1);
background: color-mix(in srgb, var(--wc-accent) 10%, transparent);
border: 1px solid rgba(46, 226, 122, 0.2);
border: 1px solid color-mix(in srgb, var(--wc-accent) 22%, transparent);
color: var(--wc-accent);
display: grid;
place-items: center;
transition: all 0.3s ease;
}
.why-choose-section .feature-icon svg {
width: 24px;
height: 24px;
color: inherit;
stroke: currentColor;
}
.why-choose-section .feature-item:hover .feature-icon {
background: var(--wc-accent);
color: #04070d;
transform: scale(1.05);
}
.why-choose-section .feature-title {
font-size: 18px;
font-weight: 700;
color: #ffffff;
margin: 0 0 5px 0;
}
.why-choose-section .feature-desc {
font-size: 14px;
line-height: 1.5;
color: rgba(255,255,255,0.6);
margin: 0;
}
/* ============ Right Column ============ */
.why-choose-section .why-right {
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.why-choose-section .image-glow {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 90%;
height: 90%;
background: radial-gradient(circle, color-mix(in srgb, var(--wc-accent) 22%, transparent) 0%, transparent 70%);
filter: blur(40px);
z-index: 0;
animation: wcGlow 4s ease-in-out infinite;
}
@keyframes wcGlow {
0%, 100% { opacity: .6; transform: translate(-50%, -50%) scale(1); }
50% { opacity: 1; transform: translate(-50%, -50%) scale(1.1); }
}
.why-choose-section .image-wrap {
position: relative;
z-index: 1;
width: 100%;
max-width: 500px;
border-radius: 20px;
overflow: hidden;
border: 1px solid rgba(255,255,255,0.08);
box-shadow: 0 30px 60px -20px rgba(0,0,0,0.7);
}
.why-choose-section.has-float .image-wrap { animation: wcFloat 5s ease-in-out infinite; }
@keyframes wcFloat {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
.why-choose-section .image-wrap img {
width: 100%;
height: 500px;
object-fit: cover;
display: block;
}
.why-choose-section .img-placeholder {
width: 100%;
height: 500px;
display: flex;
align-items: center;
justify-content: center;
background: #0c1526;
border: 1px dashed rgba(255,255,255,0.1);
color: rgba(255,255,255,0.3);
font-size: 14px;
text-transform: uppercase;
}
/* ============ Scroll animations ============ */
.why-choose-section .sk-skroll {
opacity: 0;
transform: translateY(40px);
transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
transition-delay: calc(var(--sk-delay, 0) * 1ms);
}
.why-choose-section .sk-skroll.in {
opacity: 1;
transform: translateY(0);
}
/* Hover should respond instantly after entrance */
.why-choose-section .feature-item.sk-skroll.in:hover { transform: translateX(10px); transition-delay: 0ms; }
@media (prefers-reduced-motion: reduce) {
.why-choose-section .sk-skroll { opacity: 1; transform: none; transition: none; }
.why-choose-section .eb-dot,
.why-choose-section .image-glow,
.why-choose-section.has-float .image-wrap { animation: none; }
}
/* =====================================================================
RESPONSIVE — v2 (desktop above 1024px is untouched)
Font sizes, gaps, padding and image height come from the Elementor
control defaults (see the PHP file); this section handles layout/polish.
===================================================================== */
/* ---------- TABLET + PHONES (≤ 900px) ----------
Single column, in this order:
heading + description → image → feature cards
.why-left uses display:contents so the image can sit between the two
halves of the left column. */
@media (max-width: 900px) {
.why-choose-section .why-grid { grid-template-columns: minmax(0, 1fr); align-items: start; }
.why-choose-section .why-left { display: contents; }
.why-choose-section .left-header { order: 1; margin-bottom: 0; }
.why-choose-section .why-right { order: 2; }
.why-choose-section .features-list { order: 3; }
.why-choose-section .why-title { text-wrap: balance; }
.why-choose-section .main-desc { max-width: 560px; }
/* Image: full-width banner with soft bottom fade */
.why-choose-section .image-wrap { max-width: 100%; border-radius: 22px; }
.why-choose-section .image-wrap::after {
content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
background: linear-gradient(180deg, transparent 55%, rgba(4, 7, 13, 0.55));
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.why-choose-section .image-glow { width: 96%; }
/* Features: 3 glass cards in a row (auto-fits for 1–4 items) */
.why-choose-section .features-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.why-choose-section .feature-item {
flex-direction: column; align-items: flex-start; gap: 16px;
padding: 26px 22px; border-radius: 20px;
border: 1px solid rgba(255, 255, 255, 0.07);
background:
radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--wc-accent) 7%, transparent), transparent 65%),
rgba(255, 255, 255, 0.03);
box-shadow: 0 18px 40px -26px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.why-choose-section .feature-icon { width: 52px; height: 52px; min-width: 52px; border-radius: 14px; }
.why-choose-section .feature-item:hover,
.why-choose-section .feature-item.sk-skroll.in:hover { transform: translateY(-6px); }
}
/* Touch screens: no sticky hover shift, show a pressed state instead */
@media (max-width: 900px) and (hover: none) {
.why-choose-section .feature-item:hover,
.why-choose-section .feature-item.sk-skroll.in:hover { transform: none; }
.why-choose-section .feature-item:hover .feature-icon { background: color-mix(in srgb, var(--wc-accent) 10%, transparent); color: var(--wc-accent); transform: none; }
.why-choose-section .feature-item:active { border-color: color-mix(in srgb, var(--wc-accent) 55%, transparent); }
}
/* ---------- PHONES (≤ 767px) ---------- */
@media (max-width: 767px) {
/* lighter animations on phones */
.why-choose-section .image-glow { filter: blur(28px); animation: none; opacity: .85; }
.why-choose-section.has-float .image-wrap { animation-name: wcFloatSm; }
.why-choose-section .image-wrap { border-radius: 20px; }
/* each card reveals as it scrolls into view — no stacked delays */
.why-choose-section .feature-item.sk-skroll { transition-delay: 0ms; transform: translateY(24px); }
.why-choose-section .feature-item.sk-skroll.in { transform: translateY(0); }
}
@keyframes wcFloatSm {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-5px); }
}
/* ---------- PHONES (≤ 600px): compact horizontal cards ---------- */
@media (max-width: 600px) {
.why-choose-section .features-list { grid-template-columns: minmax(0, 1fr); }
.why-choose-section .feature-item {
flex-direction: row; align-items: center; gap: 16px;
padding: 18px 18px 18px 16px; border-radius: 18px;
background:
linear-gradient(135deg, color-mix(in srgb, var(--wc-accent) 8%, transparent), transparent 55%),
rgba(255, 255, 255, 0.03);
}
.why-choose-section .feature-icon { width: 48px; height: 48px; min-width: 48px; border-radius: 14px; }
.why-choose-section .feature-icon svg { width: 22px; height: 22px; }
.why-choose-section .feature-title { margin-bottom: 4px; line-height: 1.25; }
.why-choose-section .feature-desc { line-height: 1.55; }
}
/* ---------- SMALL PHONES (≤ 380px) ---------- */
@media (max-width: 380px) {
.why-choose-section .feature-item { gap: 13px; padding: 16px 14px; }
.why-choose-section .feature-icon { width: 44px; height: 44px; min-width: 44px; }
}
/* audit page */
/* ==========================================================================
Hektrova - Step Cards Widget Styles (cards only: no heading block)
Colours follow the Hektrova theme: accent #2EE27A on dark navy.
Class prefix: ps-* (widget file: hektrova-profit-steps-widget.php)
Keep this file in the SAME folder as the widget PHP file.
========================================================================== */
.ps-wrap {
--ps-accent: #2EE27A; --ps-accent2: #28B45A; --ps-on: #04120a; --ps-bs: 40px; --ps-cols: 3; --ps-border: rgba(255,255,255,.08);
position: relative; overflow: hidden; overflow: clip; padding: 60px 0; background: #0a111d; color: #fff; font-family: 'Outfit', sans-serif;
}
.ps-wrap * { box-sizing: border-box; }
.ps-wrap a, .ps-wrap a:hover, .ps-wrap a:focus { text-decoration: none; }
.ps-wrap h3, .ps-wrap p { margin: 0; padding: 0; }
/* --- Background glow + particles --- */
.ps-wrap .ps-glow { position: absolute; z-index: 0; border-radius: 50%; filter: blur(120px); pointer-events: none; will-change: transform; display: none; }
.ps-wrap.ps-anim .ps-glow { display: block; }
.ps-wrap .ps-glow-1 { width: 360px; height: 360px; top: -60px; left: -80px; background: var(--ps-accent); opacity: .08; animation: psGlowA 20s ease-in-out infinite alternate; }
.ps-wrap .ps-glow-2 { width: 320px; height: 320px; bottom: -60px; right: -70px; background: var(--ps-accent2); opacity: .09; animation: psGlowB 24s ease-in-out infinite alternate; }
@keyframes psGlowA { from { transform: translate(0,0) scale(1); } to { transform: translate(180px, 120px) scale(1.2); } }
@keyframes psGlowB { from { transform: translate(0,0) scale(1); } to { transform: translate(-200px, -90px) scale(1.25); } }
.ps-wrap .ps-dots { position: absolute; z-index: 1; inset: 0; pointer-events: none; overflow: hidden; }
.ps-wrap .ps-dots i {
position: absolute; width: var(--sz, 4px); height: var(--sz, 4px); border-radius: 50%; background: var(--ps-accent);
box-shadow: 0 0 10px 2px color-mix(in srgb, var(--ps-accent) 70%, transparent); opacity: 0;
animation: psDot var(--dur, 14s) ease-in-out var(--del, 0s) infinite;
}
@keyframes psDot { 0% { opacity: 0; transform: translate(0, 20px) scale(.6); } 25% { opacity: .85; } 65% { opacity: .5; } 100% { opacity: 0; transform: translate(var(--dx, 0px), -90px) scale(1.2); } }
/* --- Container + grid --- */
.ps-wrap .ps-container { position: relative; z-index: 2; width: 92%; max-width: 1200px; margin-inline: auto; }
.ps-wrap .ps-grid { display: grid; grid-template-columns: repeat(var(--ps-cols, 3), minmax(0, 1fr)); gap: 20px; }
.ps-wrap .ps-cell { position: relative; min-width: 0; perspective: 1000px; }
/* --- Card --- */
.ps-wrap .ps-card {
position: relative; display: flex; flex-direction: column; justify-content: flex-start; width: 100%; height: 100%; min-height: 210px; padding: 28px 28px 30px;
border-radius: 22px; background: #15213a; color: inherit; overflow: hidden; isolation: isolate;
box-shadow: inset 0 0 0 1px var(--ps-border); transform-style: preserve-3d; will-change: transform;
transition: transform .6s cubic-bezier(.2,.7,.2,1), box-shadow .5s ease;
}
.ps-wrap .ps-card.is-tilting { transition: transform .12s linear, box-shadow .5s ease; }
.ps-wrap .ps-card:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ps-accent) 55%, transparent), 0 26px 44px -26px color-mix(in srgb, var(--ps-accent) 60%, transparent); }
/* card background image + overlay */
.ps-wrap .ps-bg { position: absolute; inset: 0; z-index: -3; overflow: hidden; border-radius: inherit; }
.ps-wrap .ps-bg img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center; transform: scale(1.02); transition: transform 1.4s cubic-bezier(.2,.7,.2,1), filter .5s ease; }
.ps-wrap .ps-card:hover .ps-bg img { transform: scale(1.12); }
.ps-wrap .ps-ov { position: absolute; inset: 0; z-index: -2; background: #0a111d; opacity: .72; pointer-events: none; transition: opacity .5s ease; }
.ps-wrap .ps-card:hover .ps-ov { opacity: .58; }
/* light spot that follows the mouse */
.ps-wrap .ps-spot {
position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .4s ease;
background: radial-gradient(300px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--ps-accent) 16%, transparent), transparent 62%);
}
.ps-wrap .ps-card:hover .ps-spot { opacity: 1; }
/* card content */
.ps-wrap .ps-body { position: relative; display: flex; flex-direction: column; align-items: flex-start; }
.ps-wrap .ps-badge {
position: relative; display: grid; place-items: center; width: var(--ps-bs, 40px); height: var(--ps-bs, 40px); margin-bottom: 24px; border-radius: 50%;
background: rgba(46,226,122,.16); color: var(--ps-accent); font-family: 'Outfit', sans-serif; font-size: 16px; font-weight: 600; line-height: 1;
transition: transform .5s cubic-bezier(.34,1.56,.64,1), background .4s ease, color .4s ease;
}
.ps-wrap .ps-ring { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid var(--ps-accent); opacity: 0; }
.ps-wrap.ps-anim .ps-ring { animation: psPulse 3s ease-out infinite; animation-delay: calc(1.4s + var(--k, 0) * .5s); }
@keyframes psPulse { 0% { transform: scale(1); opacity: .6; } 70%, 100% { transform: scale(1.9); opacity: 0; } }
.ps-wrap .ps-card:hover .ps-badge { transform: scale(1.12) rotate(-6deg); background: var(--ps-accent); color: var(--ps-on); }
.ps-wrap .ps-title { margin-bottom: 14px; color: #fff; font-family: 'Outfit', sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.ps-wrap .ps-text { color: rgba(190,201,222,.78); font-family: 'Outfit', sans-serif; font-size: 15px; font-weight: 400; line-height: 1.8; }
.ps-wrap .ps-card:hover .ps-title { transform: translateX(4px); }
/* =====================================================
ANIMATIONS (only when "Enable Animations" is on)
Hidden "before" states live on .ps-anim; the visible state + the
animation (fill-mode: backwards) live on .ps-in, so hover effects
keep working normally once the intro has finished.
===================================================== */
.ps-wrap.ps-anim .ps-cell { opacity: 0; transform: translateY(60px) scale(.94); }
.ps-wrap.ps-anim .ps-badge { scale: .3; }
.ps-wrap.ps-anim .ps-badge-n { opacity: 0; }
.ps-wrap.ps-anim .ps-title { opacity: 0; translate: -18px 0; }
.ps-wrap.ps-anim .ps-text { opacity: 0; translate: 0 16px; }
.ps-wrap.ps-anim.ps-in .ps-cell { opacity: 1; transform: none; animation: psRise 1s cubic-bezier(.2,.7,.2,1) calc(.1s + var(--k, 0) * .16s) backwards; }
.ps-wrap.ps-anim.ps-in .ps-badge { scale: 1; animation: psBadge .8s cubic-bezier(.34,1.56,.64,1) calc(.45s + var(--k, 0) * .16s) backwards; }
.ps-wrap.ps-anim.ps-in .ps-badge-n { opacity: 1; animation: psFade .6s ease calc(.55s + var(--k, 0) * .16s) backwards; }
.ps-wrap.ps-anim.ps-in .ps-title { opacity: 1; translate: none; animation: psTitle .9s cubic-bezier(.2,.7,.2,1) calc(.55s + var(--k, 0) * .16s) backwards; }
.ps-wrap.ps-anim.ps-in .ps-text { opacity: 1; translate: none; animation: psUp .95s cubic-bezier(.2,.7,.2,1) calc(.7s + var(--k, 0) * .16s) backwards; }
@keyframes psRise { from { opacity: 0; transform: translateY(60px) scale(.94); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes psBadge { from { scale: .3; } to { scale: 1; } }
@keyframes psFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes psTitle { from { opacity: 0; translate: -18px 0; } to { opacity: 1; translate: 0 0; } }
@keyframes psUp { from { opacity: 0; translate: 0 16px; } to { opacity: 1; translate: 0 0; } }
/* --- Accessibility --- */
@media (prefers-reduced-motion: reduce) {
.ps-wrap *, .ps-wrap *::before, .ps-wrap *::after { animation: none !important; transition: none !important; }
.ps-wrap.ps-anim .ps-cell { opacity: 1; transform: none; }
.ps-wrap.ps-anim .ps-badge-n, .ps-wrap.ps-anim .ps-title, .ps-wrap.ps-anim .ps-text { opacity: 1; translate: none; }
.ps-wrap.ps-anim .ps-badge { scale: none; }
.ps-wrap .ps-dots { display: none; }
}
/* =====================================================
RESPONSIVE
===================================================== */
@media (max-width: 1024px) {
.ps-wrap .ps-card { padding: 24px 20px 26px; }
.ps-wrap .ps-title { font-size: 20px; }
}
@media (max-width: 767px) {
.ps-wrap .ps-grid { gap: 16px; }
.ps-wrap .ps-card { min-height: 0; padding: 24px 22px 26px; }
.ps-wrap .ps-glow { opacity: .05; }
}
/*audit 1*/
/* ==========================================================================
Hektrova - Audit Request Form Widget Styles
Colours follow the Hektrova theme: accent #2EE27A on dark navy.
Class prefix: af-* (widget file: hektrova-audit-form-widget.php)
Keep this file in the SAME folder as the widget PHP file.
========================================================================== */
.af-wrap {
--af-accent: #2EE27A; --af-accent2: #28B45A; --af-on: #04120a;
--af-card: #15203a; --af-border: rgba(255,255,255,.10);
--af-label: #fff; --af-input: #111b30; --af-input-b: rgba(255,255,255,.09);
--af-text: #fff; --af-ph: rgba(190,201,222,.42); --af-opt: rgba(225,232,245,.86);
--af-err: #ff5a5f; --af-ch-cols: 4;
position: relative; overflow: hidden; overflow: clip; padding: 60px 16px; background: #0a111d; color: #fff; font-family: 'Outfit', sans-serif;
}
.af-wrap * { box-sizing: border-box; }
.af-wrap a, .af-wrap a:hover, .af-wrap a:focus { text-decoration: none; }
.af-wrap h2, .af-wrap h3, .af-wrap h4, .af-wrap p { margin: 0; padding: 0; }
/* --- floating particles --- */
.af-wrap .af-dots { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.af-wrap .af-dots i {
position: absolute; width: var(--sz, 4px); height: var(--sz, 4px); border-radius: 50%; background: var(--af-accent);
box-shadow: 0 0 10px 2px color-mix(in srgb, var(--af-accent) 70%, transparent); opacity: 0;
animation: afDot var(--dur, 14s) ease-in-out var(--del, 0s) infinite;
}
@keyframes afDot { 0% { opacity: 0; transform: translate(0, 20px) scale(.6); } 25% { opacity: .8; } 65% { opacity: .45; } 100% { opacity: 0; transform: translate(var(--dx, 0px), -90px) scale(1.2); } }
/* --- card --- */
.af-wrap .af-card {
position: relative; z-index: 1; width: 100%; max-width: 600px; margin: 0 auto; padding: 32px; border-radius: 24px; background: var(--af-card);
box-shadow: inset 0 0 0 1px var(--af-border), 0 34px 60px -34px rgba(0,0,0,.75); overflow: hidden; isolation: isolate;
transition: box-shadow .5s ease;
}
.af-wrap .af-card:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--af-accent) 28%, var(--af-border)), 0 34px 60px -34px rgba(0,0,0,.75); }
.af-wrap .af-circle { position: absolute; z-index: -2; top: -100px; right: -80px; width: 290px; height: 290px; border-radius: 50%; background: rgba(46,226,122,.10); pointer-events: none; }
.af-wrap.af-anim .af-circle { animation: afCircle 14s ease-in-out infinite alternate; }
@keyframes afCircle { from { transform: translate(0, 0) scale(1); } to { transform: translate(-26px, 22px) scale(1.12); } }
.af-wrap .af-spot {
position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .4s ease;
background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--af-accent) 11%, transparent), transparent 62%);
}
.af-wrap .af-card.is-spot .af-spot { opacity: 1; }
/* --- heading --- */
.af-wrap .af-formwrap { transition: opacity .45s ease, transform .45s ease; }
.af-wrap .af-formwrap.is-out { opacity: 0; transform: translateY(-12px); }
.af-wrap .af-title { margin-bottom: 26px; color: #fff; font-family: 'Outfit', sans-serif; font-size: 26px; font-weight: 700; line-height: 1.25; }
.af-wrap .af-sub { margin: -14px 0 26px; color: rgba(190,201,222,.8); font-family: 'Outfit', sans-serif; font-size: 15px; line-height: 1.7; }
/* --- grid + fields --- */
.af-wrap .af-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.af-wrap .af-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 18px; }
.af-wrap .af-field { position: relative; min-width: 0; }
.af-wrap .af-label { display: block; margin-bottom: 8px; color: var(--af-label); font-family: 'Outfit', sans-serif; font-size: 13px; font-weight: 600; line-height: 1.3; transition: color .3s ease; }
.af-wrap .af-star { margin-left: 3px; color: var(--af-accent); }
.af-wrap .af-field:focus-within > .af-label { color: var(--af-accent); }
.af-wrap .af-input, .af-wrap .af-select, .af-wrap .af-textarea {
display: block; width: 100%; margin: 0; border: 1px solid var(--af-input-b); border-radius: 12px; background: var(--af-input); color: var(--af-text);
font-family: 'Outfit', sans-serif; font-size: 15px; font-weight: 400; outline: none; box-shadow: none;
transition: border-color .3s ease, box-shadow .35s ease, background-color .3s ease, transform .3s cubic-bezier(.2,.7,.2,1);
}
.af-wrap .af-input, .af-wrap .af-select { height: 50px; padding: 0 16px; }
.af-wrap .af-textarea { min-height: 110px; padding: 14px 16px; line-height: 1.6; resize: vertical; }
.af-wrap .af-input::placeholder, .af-wrap .af-textarea::placeholder { color: var(--af-ph); opacity: 1; transition: opacity .3s ease, transform .3s ease; }
.af-wrap .af-input:focus::placeholder, .af-wrap .af-textarea:focus::placeholder { opacity: .45; transform: translateX(4px); }
.af-wrap .af-input:hover, .af-wrap .af-select:hover, .af-wrap .af-textarea:hover { border-color: rgba(255,255,255,.2); }
.af-wrap .af-input:focus, .af-wrap .af-select:focus, .af-wrap .af-textarea:focus {
border-color: var(--af-accent); background-color: color-mix(in srgb, var(--af-input) 88%, var(--af-accent));
box-shadow: 0 0 0 4px color-mix(in srgb, var(--af-accent) 14%, transparent), 0 14px 26px -18px var(--af-accent); transform: translateY(-1px);
}
.af-wrap .af-input:-webkit-autofill { -webkit-text-fill-color: var(--af-text); box-shadow: 0 0 0 100px var(--af-input) inset; }
.af-wrap .af-selectwrap { position: relative; }
.af-wrap .af-select { -webkit-appearance: none; appearance: none; padding-right: 46px; cursor: pointer; }
.af-wrap .af-select option { background: #15203a; color: #fff; }
.af-wrap .af-chev { position: absolute; top: 50%; right: 16px; width: 16px; height: 16px; margin-top: -8px; color: var(--af-text); pointer-events: none; transition: transform .35s cubic-bezier(.34,1.56,.64,1), color .3s ease; }
.af-wrap .af-selectwrap:focus-within .af-chev { transform: rotate(180deg); color: var(--af-accent); }
.af-wrap .af-sep { height: 1px; margin: 24px 0 20px; background: rgba(255,255,255,.07); }
/* --- channel checkboxes (circle style) --- */
.af-wrap .af-opts { display: grid; grid-template-columns: repeat(var(--af-ch-cols, 4), minmax(0, 1fr)); gap: 10px 10px; }
.af-wrap .af-opt { position: relative; display: inline-flex; align-items: center; gap: 10px; min-width: 0; padding: 5px 0; color: var(--af-opt); cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; }
.af-wrap .af-opt input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.af-wrap .af-box {
flex: none; display: grid; place-items: center; width: 19px; height: 19px; border-radius: 50%; border: 1.5px solid color-mix(in srgb, var(--af-accent) 50%, transparent); background: transparent; color: var(--af-on);
transition: background-color .3s ease, border-color .3s ease, box-shadow .35s ease, transform .35s cubic-bezier(.34,1.56,.64,1);
}
.af-wrap .af-box svg { display: block; width: 12px; height: 12px; overflow: visible; }
.af-wrap .af-tick { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .35s cubic-bezier(.65,.05,.2,1) .05s; }
.af-wrap .af-opt:hover .af-box { border-color: var(--af-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--af-accent) 14%, transparent); }
.af-wrap .af-opt input:focus-visible + .af-box { outline: 2px solid var(--af-accent); outline-offset: 3px; }
.af-wrap .af-opt input:checked + .af-box { background: var(--af-accent); border-color: var(--af-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--af-accent) 18%, transparent); animation: afPop .45s cubic-bezier(.34,1.56,.64,1); }
.af-wrap .af-opt input:checked + .af-box .af-tick { stroke-dashoffset: 0; }
.af-wrap .af-opt-t { font-family: 'Outfit', sans-serif; font-size: 13.5px; font-weight: 500; line-height: 1.3; transition: color .3s ease, transform .3s ease; }
.af-wrap .af-opt:hover .af-opt-t { color: #fff; transform: translateX(2px); }
.af-wrap .af-opt input:checked ~ .af-opt-t { color: #fff; }
@keyframes afPop { 0% { transform: scale(.7); } 60% { transform: scale(1.22); } 100% { transform: scale(1); } }
/* --- errors --- */
.af-wrap .af-err { display: block; max-height: 0; margin-top: 0; overflow: hidden; color: var(--af-err); font-family: 'Outfit', sans-serif; font-size: 12.5px; font-weight: 500; line-height: 1.3; opacity: 0; transition: max-height .3s ease, opacity .3s ease, margin .3s ease; }
.af-wrap .af-field.is-invalid .af-err { max-height: 40px; margin-top: 7px; opacity: 1; }
.af-wrap .af-field.is-invalid .af-input, .af-wrap .af-field.is-invalid .af-select, .af-wrap .af-field.is-invalid .af-textarea { border-color: var(--af-err); box-shadow: 0 0 0 4px color-mix(in srgb, var(--af-err) 14%, transparent); }
.af-wrap .af-field.is-invalid > .af-label { color: var(--af-err); }
.af-wrap .af-field.is-invalid .af-box { border-color: var(--af-err); }
.af-wrap .af-field.is-shake { animation: afShake .45s cubic-bezier(.36,.07,.19,.97); }
@keyframes afShake { 10%, 90% { transform: translateX(-2px); } 20%, 80% { transform: translateX(4px); } 30%, 50%, 70% { transform: translateX(-6px); } 40%, 60% { transform: translateX(6px); } }
/* --- submit button --- */
.af-wrap .af-submit { margin-top: 26px; }
.af-wrap .af-btn {
position: relative; display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; height: 56px; margin: 0; padding: 0 24px; border: 0; border-radius: 999px; overflow: hidden; cursor: pointer;
background: linear-gradient(90deg, var(--af-accent), var(--af-accent2)); color: var(--af-on); font-family: 'Outfit', sans-serif; font-size: 16px; font-weight: 600; line-height: 1; text-transform: none; -webkit-appearance: none; appearance: none;
box-shadow: 0 16px 30px -14px var(--af-accent), 0 0 0 0 transparent; transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease, filter .3s ease, opacity .3s ease;
}
.af-wrap .af-btn:hover { transform: translateY(-3px); box-shadow: 0 22px 36px -14px var(--af-accent); filter: brightness(1.06); }
.af-wrap .af-btn:active { transform: translateY(-1px) scale(.985); }
.af-wrap .af-btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.af-wrap .af-btn:disabled { cursor: progress; opacity: .88; transform: none; }
.af-wrap .af-btn-t, .af-wrap .af-spin { position: relative; z-index: 1; }
.af-wrap .af-btn-shine { position: absolute; top: 0; left: -70%; width: 40%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent); transform: skewX(-20deg); pointer-events: none; }
.af-wrap.af-anim .af-btn-shine { animation: afShine 5s ease-in-out 2.6s infinite; }
@keyframes afShine { 0% { left: -70%; } 28%, 100% { left: 150%; } }
.af-wrap .af-spin { display: none; width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid color-mix(in srgb, var(--af-on) 35%, transparent); border-top-color: var(--af-on); animation: afSpin .7s linear infinite; }
.af-wrap .af-btn.is-loading .af-spin { display: block; }
@keyframes afSpin { to { transform: rotate(360deg); } }
.af-wrap .af-ripple { position: absolute; z-index: 0; border-radius: 50%; background: rgba(255,255,255,.4); transform: scale(0); opacity: .7; pointer-events: none; animation: afRipple .7s ease-out forwards; }
@keyframes afRipple { to { transform: scale(1); opacity: 0; } }
.af-wrap .af-formerr { margin-top: 14px; color: var(--af-err); font-family: 'Outfit', sans-serif; font-size: 12.5px; font-weight: 500; text-align: center; }
.af-wrap .af-formerr:empty { display: none; }
/* --- success state --- */
.af-wrap .af-success { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 340px; padding: 20px 10px; text-align: center; }
.af-wrap .af-success[hidden] { display: none; }
.af-wrap .af-ok { display: block; width: 92px; height: 92px; margin-bottom: 22px; color: var(--af-accent); filter: drop-shadow(0 0 18px color-mix(in srgb, var(--af-accent) 55%, transparent)); }
.af-wrap .af-ok-c, .af-wrap .af-ok-t { stroke-dasharray: 1; stroke-dashoffset: 1; }
.af-wrap .af-card.is-done .af-ok-c { animation: afDraw .9s cubic-bezier(.65,.05,.2,1) forwards; }
.af-wrap .af-card.is-done .af-ok-t { animation: afDraw .6s cubic-bezier(.65,.05,.2,1) .7s forwards; }
.af-wrap .af-card.is-done .af-ok { animation: afOkPop .7s cubic-bezier(.34,1.56,.64,1) .2s backwards; }
.af-wrap .af-ok-title { margin-bottom: 12px; color: #fff; font-family: 'Outfit', sans-serif; font-size: 26px; font-weight: 700; line-height: 1.25; }
.af-wrap .af-ok-text { max-width: 420px; color: rgba(190,201,222,.85); font-family: 'Outfit', sans-serif; font-size: 15.5px; line-height: 1.75; }
.af-wrap .af-card.is-done .af-ok-title { animation: afUp2 .8s cubic-bezier(.2,.7,.2,1) 1s backwards; }
.af-wrap .af-card.is-done .af-ok-text { animation: afUp2 .8s cubic-bezier(.2,.7,.2,1) 1.15s backwards; }
@keyframes afDraw { to { stroke-dashoffset: 0; } }
@keyframes afOkPop { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes afUp2 { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
/* =====================================================
INTRO ANIMATION (only when "Enable Animations" is on)
hidden state before .af-in, animation (backwards) after,
so hover / focus effects work normally afterwards.
===================================================== */
.af-wrap.af-anim .af-reveal { opacity: 0; translate: 0 26px; }
.af-wrap.af-anim .af-card.af-reveal { translate: 0 50px; scale: .97; }
.af-wrap.af-anim.af-in .af-reveal { opacity: 1; translate: none; animation: afUp .85s cubic-bezier(.2,.7,.2,1) calc(.15s + var(--i, 0) * .09s) backwards; }
.af-wrap.af-anim.af-in .af-card.af-reveal { scale: 1; animation: afCard 1s cubic-bezier(.2,.7,.2,1) backwards; }
.af-wrap.af-anim.af-in .af-card .af-title { animation: afUp .9s cubic-bezier(.2,.7,.2,1) .35s backwards; }
.af-wrap.af-anim.af-in .af-opt { animation: afOptIn .6s cubic-bezier(.2,.7,.2,1) calc(.7s + var(--o, 0) * .05s) backwards; }
.af-wrap.af-anim.af-in .af-field.is-shake { animation: afShake .45s cubic-bezier(.36,.07,.19,.97); }
@keyframes afUp { from { opacity: 0; translate: 0 26px; } to { opacity: 1; translate: 0 0; } }
@keyframes afCard { from { opacity: 0; translate: 0 50px; scale: .97; } to { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes afOptIn { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: translateX(0); } }
/* --- accessibility --- */
@media (prefers-reduced-motion: reduce) {
.af-wrap *, .af-wrap *::before, .af-wrap *::after { animation: none !important; transition: none !important; }
.af-wrap.af-anim .af-reveal { opacity: 1; translate: none; scale: none; }
.af-wrap .af-ok-c, .af-wrap .af-ok-t { stroke-dashoffset: 0; }
.af-wrap .af-dots { display: none; }
}
/* =====================================================
RESPONSIVE
===================================================== */
@media (max-width: 767px) {
.af-wrap .af-grid { grid-template-columns: minmax(0, 1fr); }
.af-wrap .af-title { font-size: 22px; margin-bottom: 22px; }
.af-wrap .af-btn { height: 52px; font-size: 15px; }
.af-wrap .af-circle { width: 220px; height: 220px; top: -90px; right: -70px; }
.af-wrap .af-success { min-height: 300px; }
}
/*testimonials */
/* Fonts: Figtree (headings) + Inter (body) */
@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');
.tm-section {
--tm-accent: #2EE27A;
--tm-glow: rgba(46, 226, 122, 0.14);
--tm-badge-bg: rgba(46, 226, 122, 0.12);
--tm-badge-bd: rgba(46, 226, 122, 0.25);
--tm-wm: rgba(255, 255, 255, 0.12);
--tm-card-1: rgba(46, 226, 122, 0.07);
--tm-card-2: rgba(255, 255, 255, 0.02);
--tm-card-bd: rgba(255, 255, 255, 0.08);
--tm-quote: rgba(255, 255, 255, 0.1);
--tm-star-on: #FFB43A;
--tm-star-off: rgba(255, 255, 255, 0.22);
--tm-card-w: 380px;
--tm-gap: 24px;
--tm-speed: 45s;
position: relative;
padding: 100px 0;
overflow: hidden;
overflow: clip;
font-family: 'Inter', sans-serif;
background-color: #04070d;
background-image: radial-gradient(ellipse 60% 40% at 50% 0%, var(--tm-glow), transparent 70%);
color: #ffffff;
}
.tm-section * { box-sizing: border-box; }
.tm-section .tm-container { width: min(1200px, 92%); margin-inline: auto; }
/* ============ Header ============ */
.tm-section .tm-head {
position: relative; isolation: isolate; text-align: center;
padding: 50px 0 10px; margin-bottom: 50px;
}
.tm-section .tm-watermark {
position: absolute; top: 50px; left: 50%; transform: translateX(-50%);
z-index: -1; width: 100%; text-align: center; white-space: nowrap;
pointer-events: none; user-select: none;
font-family: 'Figtree', sans-serif;
font-size: 150px; font-weight: 800; line-height: 1; letter-spacing: 2px; text-transform: none;
color: transparent !important;
-webkit-text-fill-color: transparent !important;
-webkit-text-stroke: 1.5px var(--tm-wm) !important;
-webkit-mask-image: linear-gradient(180deg, #000 30%, transparent 100%);
mask-image: linear-gradient(180deg, #000 30%, transparent 100%);
}
.tm-section .tm-eyebrow {
display: inline-flex; align-items: center; justify-content: center;
margin: 0 0 14px; padding: 8px 20px; border-radius: 999px;
background: var(--tm-badge-bg); border: 1px solid var(--tm-badge-bd);
color: var(--tm-accent);
font-family: 'Figtree', sans-serif; font-size: 14px; font-weight: 500; letter-spacing: .3px; text-transform: none;
-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.tm-section .tm-title {
margin: 0 auto; max-width: 850px; color: #ffffff;
font-family: 'Figtree', sans-serif;
font-size: 48px; font-weight: 700; line-height: 1.2; letter-spacing: -.5px;
}
.tm-section .tm-sub {
margin: 16px auto 0; max-width: 600px;
font-size: 16px; line-height: 1.6; color: rgba(255,255,255,0.6);
}
/* ============ Rows / Marquee ============ */
.tm-section .tm-rows { display: flex; flex-direction: column; gap: 24px; }
.tm-section .tm-row { position: relative; overflow: hidden; padding: 14px 0; }
.tm-section.has-fade .tm-row {
-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.tm-section .tm-track { display: flex; width: max-content; }
.tm-section .tm-row.is-auto .tm-track {
animation: tmScroll var(--tm-speed, 45s) linear infinite;
will-change: transform;
}
.tm-section .tm-row.is-auto.is-reverse .tm-track { animation-direction: reverse; }
.tm-section.pause-hover .tm-row.is-auto:hover .tm-track { animation-play-state: paused; }
@keyframes tmScroll {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
/* Manual mode: swipe / scroll */
.tm-section .tm-row.is-manual {
overflow-x: auto; scroll-snap-type: x mandatory;
padding-inline: max(4%, calc((100% - 1200px) / 2));
scrollbar-width: none;
}
.tm-section .tm-row.is-manual::-webkit-scrollbar { display: none; }
.tm-section .tm-row.is-manual .tm-card { scroll-snap-align: center; }
/* ============ Card ============ */
.tm-section .tm-card {
position: relative; flex: none; overflow: hidden;
width: var(--tm-card-w); margin-right: var(--tm-gap);
padding: 30px; border-radius: 20px;
display: flex; flex-direction: column; gap: 18px;
background: linear-gradient(135deg, var(--tm-card-1) 0%, var(--tm-card-2) 100%);
border: 1px solid var(--tm-card-bd);
box-shadow: 0 20px 50px -25px rgba(0,0,0,0.6);
-webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease;
}
.tm-section .tm-card:hover {
transform: translateY(-6px);
border-color: var(--tm-accent);
box-shadow: 0 28px 55px -22px color-mix(in srgb, var(--tm-accent) 35%, transparent);
}
/* Big outline quote mark */
.tm-section .tm-quote {
position: absolute; right: 22px; top: 6px; z-index: 0;
font-family: 'Figtree', sans-serif; font-size: 150px; font-weight: 800; line-height: 1;
color: transparent;
-webkit-text-fill-color: transparent;
-webkit-text-stroke: 1.5px var(--tm-quote);
pointer-events: none; user-select: none;
}
.tm-section .tm-card > *:not(.tm-quote) { position: relative; z-index: 1; }
/* Stars (supports half stars via clipped overlay) */
.tm-section .tm-stars { position: relative; display: inline-block; line-height: 0; align-self: flex-start; }
.tm-section .tm-stars-off, .tm-section .tm-stars-on { display: flex; gap: 3px; }
.tm-section .tm-stars-on { position: absolute; left: 0; top: 0; overflow: hidden; white-space: nowrap; }
.tm-section .tm-star { width: 18px; height: 18px; flex: none; display: block; }
.tm-section .tm-stars-off .tm-star { fill: var(--tm-star-off); }
.tm-section .tm-stars-on .tm-star { fill: var(--tm-star-on); }
.tm-section .tm-review {
margin: 0; flex: 1 1 auto;
font-size: 16px; line-height: 1.7; color: rgba(255,255,255,0.72);
}
/* Author */
.tm-section .tm-author {
display: flex; align-items: center; gap: 14px;
padding-top: 18px; border-top: 1px solid rgba(255,255,255,0.08);
}
.tm-section .tm-avatar {
width: 46px; height: 46px; min-width: 46px; border-radius: 50%; overflow: hidden;
display: grid; place-items: center;
background: color-mix(in srgb, var(--tm-accent) 14%, transparent);
border: 1px solid color-mix(in srgb, var(--tm-accent) 30%, transparent);
color: var(--tm-accent); font-family: 'Figtree', sans-serif; font-weight: 700; font-size: 18px;
}
.tm-section .tm-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tm-section .tm-name { font-size: 16px; font-weight: 700; color: #ffffff; line-height: 1.3; }
.tm-section .tm-role { font-size: 13px; color: rgba(255,255,255,0.5); margin-top: 2px; }
/* ============ Entrance animation ============ */
.tm-section.tm-anim .tm-head,
.tm-section.tm-anim .tm-reveal { opacity: 0; transform: translateY(30px); }
.tm-section.tm-anim.tm-in .tm-head { animation: tmUp .8s cubic-bezier(.2,.7,.2,1) .05s both; }
.tm-section.tm-anim.tm-in .tm-reveal { animation: tmUp .9s cubic-bezier(.2,.7,.2,1) .25s both; }
@keyframes tmUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
/* ============ Accessibility ============ */
@media (prefers-reduced-motion: reduce) {
.tm-section .tm-row.is-auto { overflow-x: auto; }
.tm-section .tm-row.is-auto .tm-track { animation: none; }
.tm-section.tm-anim .tm-head, .tm-section.tm-anim .tm-reveal { opacity: 1; transform: none; animation: none !important; }
}
/* ============ Responsive ============ */
@media (max-width: 1024px) {
.tm-section .tm-title { font-size: 38px; }
.tm-section .tm-watermark { font-size: 110px; }
}
@media (max-width: 767px) {
.tm-section .tm-title { font-size: 30px; }
.tm-section .tm-watermark { font-size: 64px; }
.tm-section .tm-head { padding-top: 36px; margin-bottom: 36px; }
.tm-section .tm-review { font-size: 15px; }
.tm-section .tm-quote { font-size: 110px; right: 14px; }
}
/* team */
/* Fonts (moved here from the old inline tag) */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&family=Inter:wght@400;500;600&display=swap');
/* =====================================================
* BASE
* ===================================================== */
.tm-wrap {
--tm-bg: #04070d; --tm-glow: #2EE27A; --tm-a: #2EE27A; --tm-b: #28B45A;
--tm-bs: 44px; --tm-mw: 78%; --tm-dot: rgba(255,255,255,.25);
position: relative; overflow: hidden; overflow: clip;
padding: 90px 0 60px; background: #04070d; color: #fff; font-family: 'Inter', sans-serif;
}
.tm-wrap::before {
content: ''; position: absolute; inset: 0; pointer-events: none;
background: radial-gradient(ellipse 70% 55% at 50% 0%, color-mix(in srgb, var(--tm-glow) 12%, transparent), transparent 70%);
}
.tm-wrap * { box-sizing: border-box; }
.tm-wrap a, .tm-wrap a:hover, .tm-wrap a:focus { text-decoration: none; }
.tm-wrap h2, .tm-wrap h3, .tm-wrap p, .tm-wrap ul { margin: 0; padding: 0; list-style: none; }
.tm-wrap button {
font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer;
-webkit-appearance: none; appearance: none; border-radius: 0; box-shadow: none; text-transform: none;
-webkit-tap-highlight-color: transparent;
}
.tm-wrap button:hover, .tm-wrap button:focus { background: none; color: inherit; }
.tm-wrap .tm-container { position: relative; z-index: 2; width: 92%; max-width: 1280px; margin-inline: auto; }
/* floating glow + cursor dot */
.tm-wrap .tm-glow { position: absolute; z-index: 0; border-radius: 50%; filter: blur(110px); opacity: .16; pointer-events: none; will-change: transform; display: none; }
.tm-wrap.tm-glow-on .tm-glow { display: block; }
.tm-wrap .tm-glow-1 { width: 420px; height: 420px; top: -140px; left: -100px; background: var(--tm-glow); animation: tmGlowA 18s ease-in-out infinite alternate; }
.tm-wrap .tm-glow-2 { width: 360px; height: 360px; bottom: -120px; right: -80px; background: var(--tm-a); opacity: .1; animation: tmGlowB 22s ease-in-out infinite alternate; }
@keyframes tmGlowA { from { transform: translate(0,0) scale(1); } to { transform: translate(180px, 120px) scale(1.2); } }
@keyframes tmGlowB { from { transform: translate(0,0) scale(1); } to { transform: translate(-200px, -80px) scale(1.25); } }
.tm-wrap .tm-cursor {
position: absolute; z-index: 5; top: 0; left: 0; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%;
background: linear-gradient(135deg, var(--tm-a), var(--tm-b)); box-shadow: 0 0 16px 4px color-mix(in srgb, var(--tm-a) 55%, transparent);
opacity: 0; pointer-events: none; transition: opacity .3s ease, width .3s ease, height .3s ease, margin .3s ease; will-change: transform;
}
.tm-wrap .tm-cursor.is-on { opacity: .95; }
.tm-wrap .tm-cursor.is-big { width: 34px; height: 34px; margin: -17px 0 0 -17px; opacity: .55; }
/* =====================================================
* HEADER
* ===================================================== */
.tm-wrap .tm-head { display: flex; flex-direction: column; align-items: center; text-align: center; margin-bottom: 64px; }
.tm-wrap .tm-badge {
position: relative; display: inline-flex; align-items: center; padding: 8px 22px; margin-bottom: 22px; border-radius: 999px;
background: rgba(46,226,122,.12); border: 1px solid color-mix(in srgb, var(--tm-a) 28%, transparent);
font-family: 'Inter', sans-serif; font-size: 16px; font-weight: 500; line-height: 1.2; overflow: hidden;
}
.tm-wrap .tm-badge-tx { background: linear-gradient(90deg, var(--tm-a), var(--tm-b)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.tm-wrap .tm-badge::after {
content: ''; position: absolute; top: 0; left: -70%; width: 45%; height: 100%;
background: linear-gradient(100deg, transparent, rgba(255,255,255,.22), transparent); transform: skewX(-20deg); animation: tmShine 5s ease-in-out 2.5s infinite;
}
@keyframes tmShine { 0% { left: -70%; } 30%, 100% { left: 150%; } }
.tm-wrap .tm-heading { max-width: 620px; color: #fff; font-family: 'Poppins', sans-serif; font-size: 56px; font-weight: 700; line-height: 1.2; letter-spacing: -.02em; }
.tm-wrap .tm-heading .wm { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .14em; margin-bottom: -.14em; }
.tm-wrap .tm-heading .w { display: inline-block; will-change: transform; }
/* =====================================================
* GRID / CARD
* ===================================================== */
.tm-wrap .tm-grid { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.tm-wrap .tm-card { position: relative; min-width: 0; perspective: 1000px; }
.tm-wrap .tm-inner { position: relative; transition: transform .6s cubic-bezier(.2,.7,.2,1); transform-style: preserve-3d; will-change: transform; }
.tm-wrap .tm-inner.is-tilting { transition: transform .12s linear; }
.tm-wrap .tm-photo { position: relative; width: 100%; aspect-ratio: 1 / 1.18; overflow: hidden; border-radius: 16px; background: #0c1526; isolation: isolate; }
.tm-wrap .tm-zoom { position: absolute; inset: 0; }
.tm-wrap .tm-photo img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: top center; transition: transform 1.1s cubic-bezier(.2,.7,.2,1), filter .6s ease; }
.tm-wrap .tm-shade { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, transparent 45%, rgba(4,7,13,.78) 100%); pointer-events: none; }
.tm-wrap .tm-spot { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.16), transparent 60%); opacity: 0; transition: opacity .35s ease; }
.tm-wrap .tm-card.is-spot .tm-spot { opacity: 1; }
/* glass info panel */
.tm-wrap .tm-panel {
position: absolute; z-index: 3; left: 14px; right: 14px; bottom: 14px; padding: 16px 18px 15px; border-radius: 14px; text-align: center;
background: rgba(12,21,38,.62); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
border: 1px solid rgba(255,255,255,.08);
transition: transform .5s cubic-bezier(.2,.7,.2,1), border-color .4s ease, box-shadow .4s ease;
}
.tm-wrap .tm-name { color: #fff; font-family: 'Poppins', sans-serif; font-size: 19px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.tm-wrap .tm-name a { color: inherit; transition: color .3s ease; }
.tm-wrap .tm-name a:hover { color: var(--tm-a); }
.tm-wrap .tm-role { margin-top: 3px; color: var(--tm-a); font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 500; }
/* hover effects only on real hover devices (no sticky hover on touch) */
@media (hover: hover) {
.tm-wrap .tm-card:hover .tm-photo img { transform: scale(1.09); }
.tm-wrap .tm-card:hover .tm-panel { transform: translateY(-4px); border-color: color-mix(in srgb, var(--tm-a) 55%, transparent); box-shadow: 0 16px 34px -16px color-mix(in srgb, var(--tm-a) 60%, transparent); }
.tm-wrap .tm-card:hover .tm-social { pointer-events: auto; }
.tm-wrap .tm-card:hover .tm-social li { opacity: 1; transform: translateY(0) scale(1); }
.tm-wrap .tm-share:hover { transform: scale(1.1); }
.tm-wrap .tm-share:hover svg { transform: rotate(360deg); }
.tm-wrap .tm-marquee:hover .tm-mq-track { animation-play-state: paused; }
}
/* share button + social stack */
.tm-wrap .tm-share {
position: absolute; z-index: 2; right: 14px; top: calc(var(--tm-bs) / -2); display: grid; place-items: center; width: var(--tm-bs); height: var(--tm-bs); border-radius: 50%;
background: linear-gradient(135deg, var(--tm-a), var(--tm-b)); color: #fff; box-shadow: 0 10px 22px -8px color-mix(in srgb, var(--tm-a) 70%, transparent);
transition: transform .45s cubic-bezier(.34,1.56,.64,1), box-shadow .3s ease;
}
.tm-wrap .tm-share svg { display: block; width: 38%; height: 38%; transition: transform .6s cubic-bezier(.34,1.56,.64,1); }
.tm-wrap .tm-share:focus-visible { transform: scale(1.1); outline: 2px solid #fff; outline-offset: 2px; }
.tm-wrap .tm-card.is-open .tm-share svg { transform: rotate(360deg); }
.tm-wrap .tm-social { position: absolute; z-index: 1; right: 14px; bottom: calc(100% + var(--tm-bs) / 2 + 10px); display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.tm-wrap .tm-social li { opacity: 0; transform: translateY(18px) scale(.6); transition: opacity .35s ease, transform .5s cubic-bezier(.34,1.56,.64,1); transition-delay: calc(var(--s, 0) * 70ms); }
.tm-wrap .tm-social a {
display: grid; place-items: center; width: var(--tm-bs); height: var(--tm-bs); border-radius: 10px;
background: linear-gradient(135deg, var(--tm-a), var(--tm-b)); color: #fff; box-shadow: 0 10px 20px -10px color-mix(in srgb, var(--tm-a) 70%, transparent);
transition: transform .35s cubic-bezier(.34,1.56,.64,1), filter .3s ease;
}
.tm-wrap .tm-social a:hover { transform: translateY(-3px) scale(1.08); filter: brightness(1.12); }
.tm-wrap .tm-social svg { display: block; width: 42%; height: 42%; }
.tm-wrap .tm-card.is-open .tm-social, .tm-wrap.tm-soc-always .tm-social { pointer-events: auto; }
.tm-wrap .tm-card.is-open .tm-social li, .tm-wrap.tm-soc-always .tm-social li { opacity: 1; transform: translateY(0) scale(1); }
.tm-wrap .tm-card:focus-within .tm-social { pointer-events: auto; }
.tm-wrap .tm-card:focus-within .tm-social li { opacity: 1; transform: translateY(0) scale(1); }
/* slider dots (visible only in mobile swipe mode) */
.tm-wrap .tm-dots { display: none; }
/* =====================================================
* SCROLLING OUTLINE TEXT
* ===================================================== */
.tm-wrap .tm-marquee { position: relative; z-index: 1; margin-top: 70px; overflow: hidden; white-space: nowrap; user-select: none; }
.tm-wrap .tm-mq-track { display: inline-flex; width: max-content; animation: tmMarquee var(--mq-dur, 40s) linear infinite; animation-direction: var(--mq-dir, normal); }
.tm-wrap .tm-mq-group { display: inline-flex; align-items: center; flex: none; }
.tm-wrap .tm-mq-item { color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.28); font-family: 'Poppins', sans-serif; font-size: 76px; font-weight: 700; line-height: 1.1; padding: 0 .3em; }
.tm-wrap .tm-mq-star { color: var(--tm-a); font-size: 34px; line-height: 1; opacity: .85; }
@keyframes tmMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* =====================================================
* INTRO ANIMATIONS (only when "Enable Animations" is on)
* ===================================================== */
.tm-wrap.tm-anim .tm-badge { opacity: 0; transform: scale(.7) translateY(10px); }
.tm-wrap.tm-anim .tm-heading .w { transform: translateY(112%); }
.tm-wrap.tm-anim .tm-card { opacity: 0; transform: translateY(70px); }
.tm-wrap.tm-anim .tm-photo { clip-path: inset(100% 0 0 0 round 16px); }
.tm-wrap.tm-anim .tm-zoom { transform: scale(1.35); }
.tm-wrap.tm-anim .tm-panel { opacity: 0; translate: 0 30px; }
.tm-wrap.tm-anim .tm-marquee { opacity: 0; }
.tm-wrap.tm-anim.tm-in .tm-badge { animation: tmPop .9s cubic-bezier(.34,1.56,.64,1) .1s forwards; }
.tm-wrap.tm-anim.tm-in .tm-heading .w { animation: tmMaskUp 1s cubic-bezier(.2,.7,.2,1) calc(.25s + var(--w, 0) * .09s) forwards; }
.tm-wrap.tm-anim.tm-in .tm-card { animation: tmRise 1s cubic-bezier(.2,.7,.2,1) calc(.55s + var(--k, 0) * .13s) forwards; }
.tm-wrap.tm-anim.tm-in .tm-photo { animation: tmReveal 1.1s cubic-bezier(.65,.05,.2,1) calc(.55s + var(--k, 0) * .13s) forwards; }
.tm-wrap.tm-anim.tm-in .tm-zoom { animation: tmSettle 1.7s cubic-bezier(.2,.7,.2,1) calc(.55s + var(--k, 0) * .13s) forwards; }
.tm-wrap.tm-anim.tm-in .tm-panel { animation: tmPanel .9s cubic-bezier(.2,.7,.2,1) calc(1.05s + var(--k, 0) * .13s) forwards; }
.tm-wrap.tm-anim.tm-in .tm-marquee { animation: tmFade 1.2s ease 1.4s forwards; }
@keyframes tmPop { from { opacity: 0; transform: scale(.7) translateY(10px); } to { opacity: 1; transform: scale(1) translateY(0); } }
@keyframes tmMaskUp { from { transform: translateY(112%); } to { transform: translateY(0); } }
@keyframes tmRise { from { opacity: 0; transform: translateY(70px); } to { opacity: 1; transform: translateY(0); } }
@keyframes tmReveal { from { clip-path: inset(100% 0 0 0 round 16px); } to { clip-path: inset(0 0 0 0 round 16px); } }
@keyframes tmSettle { from { transform: scale(1.35); } to { transform: scale(1); } }
@keyframes tmPanel { from { opacity: 0; translate: 0 30px; } to { opacity: 1; translate: 0 0; } }
@keyframes tmFade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
.tm-wrap *, .tm-wrap *::before, .tm-wrap *::after { animation: none !important; transition: none !important; }
.tm-wrap.tm-anim .tm-badge, .tm-wrap.tm-anim .tm-card, .tm-wrap.tm-anim .tm-panel, .tm-wrap.tm-anim .tm-marquee { opacity: 1; transform: none; translate: none; }
.tm-wrap.tm-anim .tm-heading .w, .tm-wrap.tm-anim .tm-zoom { transform: none; }
.tm-wrap.tm-anim .tm-photo { clip-path: none; }
}
/* =====================================================
* TABLET (768px - 1024px): 2 clean columns, tighter spacing
* ===================================================== */
@media (max-width: 1024px) {
.tm-wrap .tm-container { width: 90%; }
.tm-wrap .tm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.tm-wrap .tm-head { margin-bottom: 52px; }
.tm-wrap .tm-heading { font-size: 44px; max-width: 560px; }
.tm-wrap .tm-badge { font-size: 15px; margin-bottom: 18px; }
.tm-wrap .tm-panel { left: 12px; right: 12px; bottom: 12px; padding: 14px 16px 13px; }
.tm-wrap .tm-name { font-size: 18px; }
.tm-wrap .tm-marquee { margin-top: 56px; }
.tm-wrap .tm-mq-item { font-size: 60px; }
.tm-wrap .tm-mq-star { font-size: 28px; }
.tm-wrap .tm-glow-1 { width: 320px; height: 320px; filter: blur(90px); }
.tm-wrap .tm-glow-2 { width: 280px; height: 280px; filter: blur(90px); }
}
/* =====================================================
* MOBILE (up to 767px)
* ===================================================== */
@media (max-width: 767px) {
.tm-wrap .tm-container { width: 92%; }
.tm-wrap .tm-head { margin-bottom: 36px; }
.tm-wrap .tm-heading { font-size: 32px; max-width: 100%; line-height: 1.22; }
.tm-wrap .tm-badge { font-size: 14px; padding: 7px 18px; margin-bottom: 16px; }
/* default (slider OFF): stacked cards, capped width so they never get huge */
.tm-wrap .tm-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
.tm-wrap:not(.tm-m-slider) .tm-card { max-width: 420px; width: 100%; margin-inline: auto; }
.tm-wrap .tm-panel { left: 10px; right: 10px; bottom: 10px; padding: 12px 12px 11px; border-radius: 12px; }
.tm-wrap .tm-name { font-size: 17px; }
.tm-wrap .tm-role { font-size: 13px; margin-top: 2px; }
.tm-wrap .tm-share { right: 12px; }
.tm-wrap .tm-social { right: 12px; gap: 7px; }
/* ---------- SWIPE SLIDER (default on mobile) ---------- */
.tm-wrap.tm-m-slider .tm-grid {
display: flex; flex-wrap: nowrap; grid-template-columns: none;
overflow-x: auto; overflow-y: hidden;
-webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
scroll-snap-type: x mandatory; scroll-behavior: smooth;
scrollbar-width: none; -ms-overflow-style: none;
margin-inline: -4.35%;
padding: 12px 4.35% 26px;
scroll-padding-inline: 4.35%;
}
.tm-wrap.tm-m-slider .tm-grid::-webkit-scrollbar { display: none; }
.tm-wrap.tm-m-slider .tm-card {
flex: 0 0 min(var(--tm-mw, 78%), 360px);
scroll-snap-align: start; scroll-snap-stop: always;
}
/* dots */
.tm-wrap.tm-m-slider .tm-dots { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: -6px; }
.tm-wrap .tm-dot {
width: 8px; height: 8px; border-radius: 999px; background: var(--tm-dot); transition: width .35s ease, background .35s ease;
position: relative;
}
/* bigger invisible tap area */
.tm-wrap .tm-dot::after { content: ''; position: absolute; inset: -10px -6px; }
.tm-wrap .tm-dot.is-active { width: 26px; background: linear-gradient(90deg, var(--tm-a), var(--tm-b)); }
.tm-wrap .tm-marquee { margin-top: 40px; }
.tm-wrap .tm-mq-item { font-size: 42px; }
.tm-wrap .tm-mq-star { font-size: 22px; }
.tm-wrap .tm-glow-1 { width: 240px; height: 240px; filter: blur(70px); top: -90px; left: -80px; }
.tm-wrap .tm-glow-2 { width: 220px; height: 220px; filter: blur(70px); }
}
/* small phones */
@media (max-width: 400px) {
.tm-wrap .tm-heading { font-size: 28px; }
.tm-wrap.tm-m-slider .tm-card { flex-basis: min(var(--tm-mw, 78%), 360px); }
.tm-wrap .tm-mq-item { font-size: 36px; }
}
@media (hover: none) { .tm-wrap .tm-cursor { display: none; } }