:root { --nf-radius-xl: 1.25rem; --nf-radius-2xl: 1.75rem; --accent-color: #0010b9; --secondary-color: ; --dark-color: #2D2D2D; --white-color: #FFFFFF; --grey-color: #777777; --body-text-color: #333333; --light-text-color: #929292; --link-color: #0010b9; --background-color: #FAFAFA; --bs-dark-rgb: 80, 80, 80; --bs-gray-100: #EAE5DD; --bs-gray-300: #DCDCDC; --bs-body-color-rgb: 53, 53, 53; --bs-primary-rgb: 0, 16, 185; --bs-secondary-rgb: 249, 246, 243; --color-accent-rgb: 0, 45, 204; --card-glow: rgba(0, 41, 200, 0.25); --loader-bg: #0b1220; --loader-accent: var(--accent-color); --loader-fg: #ffffff; --fade-duration: 450ms; }

::selection { background: rgba(59, 130, 246, 0.3); color: rgb(229, 240, 255); }

body { overscroll-behavior: none; }

html { scroll-behavior: smooth; }

body::-webkit-scrollbar { width: 10px; }

body::-webkit-scrollbar-track { background: rgb(2, 6, 23); }

body::-webkit-scrollbar-thumb { background: rgb(30, 41, 59); border-radius: 999px; }

body::-webkit-scrollbar-thumb:hover { background: rgb(51, 65, 85); }

.font-display { font-family: Outfit !important; }

.logo-header { max-width: 150px; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); border: 0px; }

@keyframes floatUpDown { 
  0% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
  100% { transform: translateY(0px); }
}

@keyframes floatDownUp { 
  0% { transform: translateY(0px); }
  50% { transform: translateY(10px); }
  100% { transform: translateY(0px); }
}

.float-animation { animation: 3s ease-in-out 0s infinite normal none running floatUpDown; }

.float-animation-down-up { animation: 3s ease-in-out 0s infinite normal none running floatDownUp; }

.card-image { position: relative; display: flex; overflow: hidden; border-radius: 0px; }

.th-post-card-image { display: block; width: 100%; height: auto; transition: 0.5s; }

:root { --glass-bg: rgba(255, 255, 255, 0.35); --glass-bg-dark: rgba(16, 18, 20, 0.35); --glass-border: rgba(255, 255, 255, 0.28); --glass-border-dark: rgba(0, 0, 0, 0.28); --glass-blur: 10px; --glass-blur-4: 4px; --glass-saturate: 120%; --glass-contrast: 95%; --glass-radius: 14px; --glass-padding: 1rem; --glass-shadow: 0 6px 20px rgba(13, 14, 18, 0.16); --glass-transition: 240ms cubic-bezier(.2, .9, .2, 1); }

.glass { position: relative; overflow: hidden; transition: background var(--glass-transition), transform var(--glass-transition), box-shadow var(--glass-transition); isolation: isolate; }

.glass { backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)) contrast(var(--glass-contrast)); }

.glass-4 { backdrop-filter: blur(var(--glass-blur-4)) saturate(var(--glass-saturate)) contrast(var(--glass-contrast)); }

.glass.strong { --glass-blur: 18px; --glass-bg: rgba(255, 255, 255, 0.22); --glass-shadow: 0 10px 32px rgba(13, 14, 18, 0.22); }

.glass.dark { background: var(--glass-bg-dark); border: 1px solid var(--glass-border-dark); color: rgb(255, 255, 255); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)) contrast(1.05); }

.glass.frosted { background: linear-gradient(rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.06)); pointer-events: none; }

.glass.nav { --glass-radius: 0; border: 0px; background: rgba(255, 255, 255, 0.08); box-shadow: none; }

.glass.outline { box-shadow: none; border: 1px solid rgba(255, 255, 255, 0.12); background: linear-gradient(rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.02)); }

.glass:hover { box-shadow: rgba(13, 14, 18, 0.18) 0px 14px 36px; }

.glass.sm { --glass-padding: 0.6rem; --glass-radius: 10px; }

.glass.lg { --glass-padding: 1.6rem; --glass-radius: 18px; }

.glass > * { position: relative; z-index: 1; }

.no-backdrop .glass { background: linear-gradient(rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.35)); border: 1px solid rgba(255, 255, 255, 0.12); backdrop-filter: none; }

.no-backdrop .glass::before { content: ""; position: absolute; inset: 0px; z-index: 0; background: inherit; filter: blur(6px); opacity: 0.9; pointer-events: none; border-radius: inherit; }

@media (prefers-reduced-motion: reduce) {
  .glass, .glass:hover { transition: none; transform: none; }
  .glass::before { transition: none; }
}

.th-rotate { animation: 8s linear 0s infinite normal none running rotation; }

@keyframes rotation { 
  0% { transform: rotate(0deg); }
  100% { transform: rotate(359deg); }
}

#GoToTop { position: fixed; z-index: 99; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; outline: none; cursor: pointer; border-radius: 100px; width: 50px; height: 50px; opacity: 0; transition: 0.3s; padding: 13px; }

.gototop, .gototop svg { color: rgb(255, 255, 255); }

.gototop { background: -webkit-linear-gradient(0deg, rgb(0, 14, 184) 0%, rgb(0, 96, 253) 100%); }

.round-btn::before { content: ""; position: absolute; inset: -3px; border-radius: 50%; padding: 3px; background: conic-gradient(from 0deg, rgba(var(--color-accent-rgb), 0) 0%, rgba(var(--color-accent-rgb), .95) 15%, rgba(var(--color-accent-rgb), .95) 35%, rgba(var(--color-accent-rgb), .95) 55%, rgba(var(--color-accent-rgb), 0) 70% 100%); mask: radial-gradient(farthest-side, transparent calc(100% - 6px), rgb(0, 0, 0) calc(100% - 6px)); filter: blur(0.3px); animation: 2.4s linear 0s infinite normal none running spin; }

.round-btn::after { content: ""; position: absolute; inset: -10px; border-radius: 50%; background: radial-gradient(closest-side, rgba(79, 140, 255, 0.35), rgba(79, 140, 255, 0) 70%); opacity: 0.6; filter: blur(10px); transition: opacity 0.25s; }

@keyframes spin { 
  100% { transform: rotate(360deg); }
}

.cursor { position: fixed; width: 40px; height: 40px; margin-left: -20px; margin-top: -20px; border-radius: 50%; border: 2px solid rgb(128, 0, 0); transition: 0.3s; transform: translate(-50%, -50%); pointer-events: none; z-index: 1000; }

.cursor2 { position: fixed; width: 4px; height: 4px; margin-left: -20px; margin-top: -20px; border-radius: 50%; background-color: rgb(255, 255, 255); transform: translate(-50%, -50%); transition: 0.1s; pointer-events: none; z-index: 1000; }

.grow, .grow-small { transform: scale(4); background: white; mix-blend-mode: difference; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; }

.grow-small { transform: scale(2); }

.hidden-text { position: absolute; z-index: 200; }

.container-heading { display: flex; }

.text-anim div { display: inline-block; }

.shift-btn { overflow: hidden; contain: content; display: inline-block; position: relative; transition: 1s ease-in; }

.shift-btn .clone { position: absolute; top: 20px; }

.magnetic-wrap { display: inline-block; }

.magnetic-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 160px; height: 54px; border-radius: 9999px; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; background: rgb(31, 41, 55); color: rgb(255, 255, 255); font-size: 1rem; letter-spacing: 0.05em; cursor: pointer; will-change: transform; transition: background 0.25s, box-shadow 0.25s; }

.magnetic-btn:hover { background: rgb(5, 43, 206); box-shadow: rgba(5, 43, 206, 0.25) 0px 10px 25px; }

.magnetic-btn.primary { background: rgb(37, 99, 235); }

.magnetic-btn.ghost { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.25); backdrop-filter: blur(8px); }

.service-card::before { content: ""; position: absolute; top: 0px; left: 0px; right: 0px; height: 100%; background: linear-gradient(45deg, var(--card-glow), transparent 40%); opacity: 0; transition: opacity 0.3s; z-index: -1; }

.service-card:hover { transform: translateY(0px); box-shadow: 0 20px 40px rgba(var(--color-accent-rgb), 0.1); }

.service-card:hover::before { opacity: 1; }

.service-card img::after { content: ""; position: absolute; width: 100%; height: 100%; background: radial-gradient(circle, var(--card-glow), transparent 70%); animation: 2s ease 0s infinite normal none running pulse; }

@keyframes pulse { 
  0% { transform: scale(0.95); opacity: 0.5; }
  50% { transform: scale(1.05); opacity: 0.8; }
  100% { transform: scale(0.95); opacity: 0.5; }
}

.button-wiggle { animation: 4s ease 2s infinite normal none running wiggle; }

@-webkit-keyframes wiggle { 
  5%, 50% { transform: scale(1); }
  10% { transform: scale(0.9); }
  15% { transform: scale(1.15); }
  20% { transform: scale(1.15) rotate(-5deg); }
  25% { transform: scale(1.15) rotate(5deg); }
  30% { transform: scale(1.15) rotate(-3deg); }
  35% { transform: scale(1.15) rotate(2deg); }
  40% { transform: scale(1.15) rotate(0deg); }
}

@keyframes wiggle { 
  5%, 50% { transform: scale(1); }
  10% { transform: scale(0.9); }
  15% { transform: scale(1.15); }
  20% { transform: scale(1.15) rotate(-5deg); }
  25% { transform: scale(1.15) rotate(5deg); }
  30% { transform: scale(1.15) rotate(-3deg); }
  35% { transform: scale(1.15) rotate(2deg); }
  40% { transform: scale(1.15) rotate(0deg); }
}

.button-pulse { animation: 2s cubic-bezier(0.25, 0, 0, 1) 3s infinite normal none running pulse; box-shadow: white 0px 0px 0px 0px; }

@-webkit-keyframes pulse { 
  100% { box-shadow: rgba(255, 255, 255, 0) 0px 0px 0px 18px; }
}

@keyframes pulse { 
  100% { box-shadow: rgba(255, 255, 255, 0) 0px 0px 0px 18px; }
}

.button-float { animation: 1.5s linear 0s infinite alternate none running float; }

@-webkit-keyframes float { 
  50% { }
  100% { transform: translateY(-18px); }
}

@keyframes float { 
  50% { }
  100% { transform: translateY(-18px); }
}

#preloader { position: fixed; inset: 0px; display: grid; place-items: center; background: linear-gradient(180deg, rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.75)), var(--loader-bg); z-index: 99999; transition: opacity var(--fade-duration) ease, visibility var(--fade-duration) ease; opacity: 1; visibility: visible; -webkit-tap-highlight-color: transparent; will-change: opacity, visibility; }

#preloader.hidden { opacity: 0; visibility: hidden; pointer-events: none; }

.preloader__box { text-align: center; color: var(--loader-fg); transform: translateY(-6px); }

.preloader__logo { font-weight: 700; letter-spacing: -0.02em; font-size: 18px; margin-bottom: 14px; display: inline-block; padding: 6px 12px; background: rgba(255, 255, 255, 0.03); border-radius: 10px; }

.preloader__spinner { width: 68px; height: 68px; display: block; margin: 0px auto 12px; }

.preloader__text { font-size: 13px; opacity: 0.9; }

@keyframes rotate { 
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes dash { 
  0% { stroke-dasharray: 1, 200; stroke-dashoffset: 0; }
  50% { stroke-dasharray: 90, 200; stroke-dashoffset: -35px; }
  100% { stroke-dasharray: 90, 200; stroke-dashoffset: -124px; }
}

.preloader__spinner svg { width: 100%; height: 100%; display: block; transform-origin: 50% 50%; animation: 1.6s linear 0s infinite normal none running rotate; }

.preloader__spinner .path { stroke: var(--loader-accent); stroke-linecap: round; stroke-width: 6; fill: none; stroke-dasharray: 90, 200; stroke-dashoffset: 0; animation: 1.6s ease-in-out 0s infinite normal none running dash; }

@media (prefers-reduced-motion: reduce) {
  .preloader__spinner svg, .preloader__spinner .path { animation: auto ease 0s 1 normal none running none; }
}

body.loading { overflow: hidden; }

@media (max-width: 420px) {
  .preloader__spinner { width: 56px; height: 56px; }
  .preloader__logo { font-size: 16px; }
}

.bounce { animation: 2s ease-in-out 0s infinite normal none running bounce; }

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

.float-updown { display: inline-block; animation: 3s ease-in-out 0s infinite normal none running floatUpDown; }

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

.float-updown { animation: 3s ease-in-out 0s infinite normal none running floatUpDown; }

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

.float-leftright { animation: 3s ease-in-out 0s infinite normal none running floatLeftRight; }

@keyframes floatLeftRight { 
  0%, 100% { transform: translateX(0px); }
  50% { transform: translateX(10px); }
}

.float-diagonal { animation: 4s ease-in-out 0s infinite normal none running floatDiagonal; }

@keyframes floatDiagonal { 
  0%, 100% { transform: translate(0px, 0px); }
  50% { transform: translate(10px, -10px); }
}

.fade-in { animation: 1s ease 0s 1 normal forwards running fadeIn; }

@keyframes fadeIn { 
  0% { opacity: 0; }
  100% { opacity: 1; }
}

.fade-out { animation: 1s ease 0s 1 normal forwards running fadeOut; }

@keyframes fadeOut { 
  0% { opacity: 1; }
  100% { opacity: 0; }
}

.fade-in-up { animation: 1.2s ease 0s 1 normal both running fadeInUp; }

@keyframes fadeInUp { 
  0% { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0px); }
}

.fade-in-down { animation: 1.2s ease 0s 1 normal both running fadeInDown; }

@keyframes fadeInDown { 
  0% { opacity: 0; transform: translateY(-20px); }
  100% { opacity: 1; transform: translateY(0px); }
}

.fade-in-left { animation: 1.2s ease 0s 1 normal both running fadeInLeft; }

@keyframes fadeInLeft { 
  0% { opacity: 0; transform: translateX(-20px); }
  100% { opacity: 1; transform: translateX(0px); }
}

.fade-in-right { animation: 1.2s ease 0s 1 normal both running fadeInRight; }

@keyframes fadeInRight { 
  0% { opacity: 0; transform: translateX(20px); }
  100% { opacity: 1; transform: translateX(0px); }
}

.zoom-in { animation: 0.4s ease 0s 1 normal forwards running zoomIn; }

@keyframes zoomIn { 
  0% { transform: scale(0.8); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

.zoom-out { animation: 0.4s ease 0s 1 normal forwards running zoomOut; }

@keyframes zoomOut { 
  0% { transform: scale(1.2); opacity: 1; }
  100% { transform: scale(1); opacity: 0; }
}

.zoom-bounce { animation: 1.2s ease-out 0s infinite normal none running zoomBounce; }

@keyframes zoomBounce { 
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

.rotate { animation: 3s linear 0s infinite normal none running rotate; }

@keyframes rotate { 
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.rotate-reverse { animation: 3s linear 0s infinite normal none running rotateReverse; }

@keyframes rotateReverse { 
  0% { transform: rotate(360deg); }
  100% { transform: rotate(0deg); }
}

.rotate-swing { animation: 2s ease-in-out 0s infinite normal none running rotateSwing; }

@keyframes rotateSwing { 
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(10deg); }
}

.pulse { animation: 1.5s ease-in-out 0s infinite normal none running pulse; }

@keyframes pulse { 
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

.pulse-slow { animation: 3s ease-in-out 0s infinite normal none running pulse; }

.pulse-glow { animation: 2s ease-in-out 0s infinite normal none running pulseGlow; }

@keyframes pulseGlow { 
  0%, 100% { box-shadow: rgba(255, 255, 255, 0) 0px 0px 0px; }
  50% { box-shadow: rgba(255, 255, 255, 0.8) 0px 0px 20px; }
}

.shake { animation: 0.8s linear 0s infinite normal none running shake; }

@keyframes shake { 
  0%, 100% { transform: translateX(0px); }
  25% { transform: translateX(-3px); }
  75% { transform: translateX(3px); }
}

.wobble { animation: 1s ease-in-out 0s infinite normal none running wobble; }

@keyframes wobble { 
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(2deg); }
  75% { transform: rotate(-2deg); }
}

.jelly { animation: 1s ease-in-out 0s infinite normal none running jelly; }

@keyframes jelly { 
  0%, 100% { transform: scale(1, 1); }
  25% { transform: scale(1.1, 0.9); }
  50% { transform: scale(0.9, 1.1); }
  75% { transform: scale(1.05, 0.95); }
}

.slide-up { animation: 1s ease 0s 1 normal both running slideUp; }

@keyframes slideUp { 
  0% { transform: translateY(100%); }
  100% { transform: translateY(0px); }
}

.slide-down { animation: 1s ease 0s 1 normal both running slideDown; }

@keyframes slideDown { 
  0% { transform: translateY(-100%); }
  100% { transform: translateY(0px); }
}

.slide-left { animation: 1s ease 0s 1 normal both running slideLeft; }

@keyframes slideLeft { 
  0% { transform: translateX(100%); }
  100% { transform: translateX(0px); }
}

.slide-right { animation: 1s ease 0s 1 normal both running slideRight; }

@keyframes slideRight { 
  0% { transform: translateX(-100%); }
  100% { transform: translateX(0px); }
}

.flip { animation: 1.2s ease-in-out 0s infinite normal none running flip; transform-style: preserve-3d; }

@keyframes flip { 
  0%, 100% { transform: rotateY(0deg); }
  50% { transform: rotateY(180deg); }
}

.flip-x { animation: 1.5s ease-in-out 0s infinite normal none running flipX; }

@keyframes flipX { 
  0%, 100% { transform: rotateX(0deg); }
  50% { transform: rotateX(180deg); }
}

.tada { animation: 1.5s ease-in-out 0s infinite normal none running tada; }

@keyframes tada { 
  0%, 100% { transform: scale(1); }
  10%, 20% { transform: scale(0.9) rotate(-3deg); }
  30%, 50%, 70%, 90% { transform: scale(1.1) rotate(3deg); }
  40%, 60%, 80% { transform: scale(1.1) rotate(-3deg); }
}

.swing { animation: 2s ease-in-out 0s infinite normal none running swing; transform-origin: center top; }

@keyframes swing { 
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(5deg); }
  75% { transform: rotate(-5deg); }
}

.bounce-slow { animation: 2.5s ease-in-out 0s infinite normal none running bounceSlow; }

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

.blink { animation: 1s step-start 0s infinite normal none running blink; }

@keyframes blink { 
  50% { opacity: 0; }
}

.flash { animation: 1.5s ease-in-out 0s infinite normal none running flash; }

@keyframes flash { 
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

.glow { animation: 2s ease-in-out 0s infinite normal none running glow; }

@keyframes glow { 
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.5); }
}

.wave { animation: 2s linear 0s infinite normal none running wave; transform-origin: center bottom; }

@keyframes wave { 
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(4deg); }
  75% { transform: rotate(-4deg); }
}

.swing-rotate { animation: 3s ease-in-out 0s infinite normal none running swingRotate; }

@keyframes swingRotate { 
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(8deg); }
}

.bounce { animation: 2s ease-in-out 0s infinite normal none running bounce; }

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

.float-updown { display: inline-block; animation: 3s ease-in-out 0s infinite normal none running floatUpDown; }

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

.float-updown { animation: 3s ease-in-out 0s infinite normal none running floatUpDown; }

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

.float-leftright { animation: 3s ease-in-out 0s infinite normal none running floatLeftRight; }

@keyframes floatLeftRight { 
  0%, 100% { transform: translateX(0px); }
  50% { transform: translateX(10px); }
}

.float-diagonal { animation: 4s ease-in-out 0s infinite normal none running floatDiagonal; }

@keyframes floatDiagonal { 
  0%, 100% { transform: translate(0px, 0px); }
  50% { transform: translate(10px, -10px); }
}

.fade-in { animation: 1s ease 0s 1 normal forwards running fadeIn; }

@keyframes fadeIn { 
  0% { opacity: 0; }
  100% { opacity: 1; }
}

.fade-out { animation: 1s ease 0s 1 normal forwards running fadeOut; }

@keyframes fadeOut { 
  0% { opacity: 1; }
  100% { opacity: 0; }
}

.fade-in-up { animation: 1.2s ease 0s 1 normal both running fadeInUp; }

@keyframes fadeInUp { 
  0% { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0px); }
}

.fade-in-down { animation: 1.2s ease 0s 1 normal both running fadeInDown; }

@keyframes fadeInDown { 
  0% { opacity: 0; transform: translateY(-20px); }
  100% { opacity: 1; transform: translateY(0px); }
}

.fade-in-left { animation: 1.2s ease 0s 1 normal both running fadeInLeft; }

@keyframes fadeInLeft { 
  0% { opacity: 0; transform: translateX(-20px); }
  100% { opacity: 1; transform: translateX(0px); }
}

.fade-in-right { animation: 1.2s ease 0s 1 normal both running fadeInRight; }

@keyframes fadeInRight { 
  0% { opacity: 0; transform: translateX(20px); }
  100% { opacity: 1; transform: translateX(0px); }
}

.zoom-in { animation: 0.4s ease 0s 1 normal forwards running zoomIn; }

@keyframes zoomIn { 
  0% { transform: scale(0.8); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

.zoom-out { animation: 0.4s ease 0s 1 normal forwards running zoomOut; }

@keyframes zoomOut { 
  0% { transform: scale(1.2); opacity: 1; }
  100% { transform: scale(1); opacity: 0; }
}

.zoom-bounce { animation: 1.2s ease-out 0s infinite normal none running zoomBounce; }

@keyframes zoomBounce { 
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

.rotate { animation: 3s linear 0s infinite normal none running rotate; }

@keyframes rotate { 
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.rotate-reverse { animation: 3s linear 0s infinite normal none running rotateReverse; }

@keyframes rotateReverse { 
  0% { transform: rotate(360deg); }
  100% { transform: rotate(0deg); }
}

.rotate-swing { animation: 2s ease-in-out 0s infinite normal none running rotateSwing; }

@keyframes rotateSwing { 
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(10deg); }
}

.pulse { animation: 1.5s ease-in-out 0s infinite normal none running pulse; }

@keyframes pulse { 
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

.pulse-slow { animation: 3s ease-in-out 0s infinite normal none running pulse; }

.pulse-glow { animation: 2s ease-in-out 0s infinite normal none running pulseGlow; }

@keyframes pulseGlow { 
  0%, 100% { box-shadow: rgba(255, 255, 255, 0) 0px 0px 0px; }
  50% { box-shadow: rgba(255, 255, 255, 0.8) 0px 0px 20px; }
}

.shake { animation: 0.8s linear 0s infinite normal none running shake; }

@keyframes shake { 
  0%, 100% { transform: translateX(0px); }
  25% { transform: translateX(-3px); }
  75% { transform: translateX(3px); }
}

.wobble { animation: 1s ease-in-out 0s infinite normal none running wobble; }

@keyframes wobble { 
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(2deg); }
  75% { transform: rotate(-2deg); }
}

.jelly { animation: 1s ease-in-out 0s infinite normal none running jelly; }

@keyframes jelly { 
  0%, 100% { transform: scale(1, 1); }
  25% { transform: scale(1.1, 0.9); }
  50% { transform: scale(0.9, 1.1); }
  75% { transform: scale(1.05, 0.95); }
}

.slide-up { animation: 1s ease 0s 1 normal both running slideUp; }

@keyframes slideUp { 
  0% { transform: translateY(100%); }
  100% { transform: translateY(0px); }
}

.slide-down { animation: 1s ease 0s 1 normal both running slideDown; }

@keyframes slideDown { 
  0% { transform: translateY(-100%); }
  100% { transform: translateY(0px); }
}

.slide-left { animation: 1s ease 0s 1 normal both running slideLeft; }

@keyframes slideLeft { 
  0% { transform: translateX(100%); }
  100% { transform: translateX(0px); }
}

.slide-right { animation: 1s ease 0s 1 normal both running slideRight; }

@keyframes slideRight { 
  0% { transform: translateX(-100%); }
  100% { transform: translateX(0px); }
}

.flip { animation: 1.2s ease-in-out 0s infinite normal none running flip; transform-style: preserve-3d; }

@keyframes flip { 
  0%, 100% { transform: rotateY(0deg); }
  50% { transform: rotateY(180deg); }
}

.flip-x { animation: 1.5s ease-in-out 0s infinite normal none running flipX; }

@keyframes flipX { 
  0%, 100% { transform: rotateX(0deg); }
  50% { transform: rotateX(180deg); }
}

.tada { animation: 1.5s ease-in-out 0s infinite normal none running tada; }

@keyframes tada { 
  0%, 100% { transform: scale(1); }
  10%, 20% { transform: scale(0.9) rotate(-3deg); }
  30%, 50%, 70%, 90% { transform: scale(1.1) rotate(3deg); }
  40%, 60%, 80% { transform: scale(1.1) rotate(-3deg); }
}

.swing { animation: 2s ease-in-out 0s infinite normal none running swing; transform-origin: center top; }

@keyframes swing { 
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(5deg); }
  75% { transform: rotate(-5deg); }
}

.bounce-slow { animation: 2.5s ease-in-out 0s infinite normal none running bounceSlow; }

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

.blink { animation: 1s step-start 0s infinite normal none running blink; }

@keyframes blink { 
  50% { opacity: 0; }
}

.flash { animation: 1.5s ease-in-out 0s infinite normal none running flash; }

@keyframes flash { 
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

.glow { animation: 2s ease-in-out 0s infinite normal none running glow; }

@keyframes glow { 
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.5); }
}

.wave { animation: 2s linear 0s infinite normal none running wave; transform-origin: center bottom; }

@keyframes wave { 
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(4deg); }
  75% { transform: rotate(-4deg); }
}

.swing-rotate { animation: 3s ease-in-out 0s infinite normal none running swingRotate; }

@keyframes swingRotate { 
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(8deg); }
}

@keyframes rotate-animate { 
  0% { transform: translateY(0px) rotate(0deg); }
  100% { transform: translateY(50px) rotate(360deg); }
}

@keyframes rotate-animate-reverse { 
  0% { transform: translateY(0px) rotate(0deg); }
  100% { transform: translateY(50px) rotate(-360deg); }
}

@media (min-width: 990px) {
  .dropdown-menu.megamenu { opacity: 0; visibility: hidden; pointer-events: none; transition: 0.4s; transform-origin: center top; display: block !important; }
  .dropdown:hover .dropdown-menu.megamenu { opacity: 1; visibility: visible; pointer-events: auto; }
  .effect-1 { transform: scale(0.9) !important; }
  .dropdown:hover .effect-1 { transform: scale(1) !important; }
  .effect-2 { transform: scale(1.2) !important; }
  .dropdown:hover .effect-2 { transform: scale(1) !important; }
  .effect-3 { transform: none !important; opacity: 0; }
  .dropdown:hover .effect-3 { opacity: 1; }
  .effect-4 { transform: translateY(-15px) !important; }
  .dropdown:hover .effect-4 { transform: translateY(0px) !important; }
  .effect-5 { transform: translateY(15px) !important; }
  .dropdown:hover .effect-5 { transform: translateY(0px) !important; }
  .effect-6 { transform: translateX(20px) !important; }
  .dropdown:hover .effect-6 { transform: translateX(0px) !important; }
  .effect-7 { transform: translateX(-20px) !important; }
  .dropdown:hover .effect-7 { transform: translateX(0px) !important; }
  .effect-8 { transform: scale(0.8) !important; opacity: 0; }
  .dropdown:hover .effect-8 { transform: scale(1) !important; opacity: 1; }
  .effect-9 { transform: scale(0.85) !important; filter: blur(6px); }
  .dropdown:hover .effect-9 { transform: scale(1) !important; filter: blur(0px); }
  .effect-10 { transform: scale(0.8) !important; transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1); }
  .dropdown:hover .effect-10 { transform: scale(1) !important; }
  .effect-11 { transform: rotateX(-90deg) !important; }
  .dropdown:hover .effect-11 { transform: rotateX(0deg) !important; }
  .effect-12 { transform: rotateX(90deg) !important; }
  .dropdown:hover .effect-12 { transform: rotateX(0deg) !important; }
  .effect-13 { transform: rotateY(-90deg) !important; }
  .dropdown:hover .effect-13 { transform: rotateY(0deg) !important; }
  .effect-14 { transform: perspective(600px) rotateX(-10deg) scale(0.9) !important; }
  .dropdown:hover .effect-14 { transform: perspective(600px) rotateX(0deg) scale(1) !important; }
  .effect-15 { transform: rotateX(-20deg) !important; transform-origin: center top; }
  .dropdown:hover .effect-15 { transform: rotateX(0deg) !important; }
  .effect-16 { transform: translateY(-20px) !important; transition-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55); }
  .dropdown:hover .effect-16 { transform: translateY(0px) !important; }
  .effect-17 { transform: scale(0.7) !important; transition-timing-function: cubic-bezier(0.17, 0.67, 0.83, 0.67); }
  .dropdown:hover .effect-17 { transform: scale(1) !important; }
  .effect-18 { transform: perspective(800px) translateY(-20px) rotateX(-10deg) !important; }
  .dropdown:hover .effect-18 { transform: perspective(800px) translateY(0px) rotateX(0deg) !important; }
  .effect-19 { transform: rotateZ(-5deg) !important; }
  .dropdown:hover .effect-19 { transform: rotateZ(0deg) !important; }
  .effect-20 { transform: translateY(-10px) scale(0.9) !important; }
  .dropdown:hover .effect-20 { transform: translateY(0px) scale(1) !important; }
  .effect-21 { transform: translateY(20px) scale(0.95) !important; }
  .dropdown:hover .effect-21 { transform: translateY(0px) scale(1) !important; }
  .effect-22 { transform: scaleY(0) !important; transform-origin: center top; }
  .dropdown:hover .effect-22 { transform: scaleY(1) !important; }
  .effect-23 { transform: skewY(-8deg) !important; }
  .dropdown:hover .effect-23 { transform: skewY(0deg) !important; }
  .effect-24 { transform: rotateX(-180deg) !important; }
  .dropdown:hover .effect-24 { transform: rotateX(0deg) !important; }
  .effect-25 { transform: perspective(600px) scale(0.85) rotateX(-5deg) !important; }
  .dropdown:hover .effect-25 { transform: perspective(600px) scale(1) rotateX(0deg) !important; }
}

@media (min-width: 990px) {
  .hero::before, .hero::after, .hero-content::before, .hero-content::after { content: ""; display: block; position: absolute; width: 110px; height: 110px; background-position: center center !important; background-size: contain !important; }
  .hero::before { left: 5%; top: 15%; background: url("../img/ai-images/3.png") no-repeat; animation: 3s linear 0s infinite alternate none running bounce; z-index: 1; }
  .hero::after { right: 5%; top: 15%; background: url("../img/ai-images/5.png") no-repeat; animation: 3s linear 0s infinite alternate none running bounce; z-index: 1; }
  .hero-content::before { left: -5%; bottom: 10%; background: url("../img/ai-images/8.png") no-repeat; animation: 3s linear 0s infinite alternate none running bounce; z-index: 1; }
  .hero-content::after { right: -8%; bottom: 20%; background: url("../img/ai-images/9.png") no-repeat; animation: 3s linear 0s infinite alternate none running bounce; z-index: 1; }
}

.kb-hide { display: none !important; }

.gallery-columns { columns: 1; gap: 1.25rem; }

@media (min-width: 640px) {
  .gallery-columns { columns: 2; }
}

@media (min-width: 1024px) {
  .gallery-columns { columns: 3; }
}

.gallery-item { break-inside: avoid; margin-bottom: 1.25rem; }

.gallery-item img { width: 100%; display: inline-block; transition: transform 0.5s; }

.gallery-item:hover img { transform: scale(1.03); }

.kb-lightbox { position: fixed; inset: 0px; background: rgba(2, 6, 23, 0.88); display: flex; align-items: center; justify-content: center; z-index: 90; padding: 2rem; }

.kb-lightbox .lb-img { max-width: 1100px; width: 100%; max-height: 85vh; object-fit: contain; border-radius: 12px; }

.kb-lightbox .lb-close, .kb-lightbox .lb-arrow { cursor: pointer; color: rgb(203, 213, 225); }

.kb-mode-toggle { gap: 0.5rem; }

.kb-horizontal { overflow-x: auto; white-space: nowrap; display: flex; gap: 1rem; padding-bottom: 0.5rem; }

.kb-horizontal .gallery-item { display: inline-block; width: calc(60vw); max-width: 480px; vertical-align: top; }

.swiper-slide img { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; }

details .content { overflow: hidden; max-height: 0px; transition: max-height 0.35s; }

details[open] .content { }

.d-none { display: none; }

.filter-btn { padding: 8px 18px; border-radius: 999px; background: rgb(17, 17, 17); border: 1px solid rgba(255, 255, 255, 0.1); font-size: 14px; cursor: pointer; transition: 0.25s; }

.filter-btn:hover { background: rgba(255, 255, 255, 0.08); }

.filter-btn.active { background: rgb(255, 255, 255); color: rgb(0, 0, 0); }

.isotope-container .work-item { transition: 0.3s; }

.work-item { will-change: transform, opacity; }

.mask-b { mask-image: linear-gradient(rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0.4) 70%, rgba(0, 0, 0, 0) 100%); }

.work-item:hover .card-title { transform: translateY(-10px); }

.work-item:hover .card-desc { opacity: 1; transform: translateY(0px); }

.work-item:hover .tags { transform: translateY(0px); }

.work-item { transition: opacity 0.35s, transform 0.35s; will-change: opacity, transform; }

.work-item.is-hidden { opacity: 0; transform: scale(0.9); pointer-events: none; }

.work-item.is-removed { display: none; }

.liquid-glass-card { backdrop-filter: blur(40px) saturate(180%); background: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.08) 30%, rgba(255, 255, 255, 0.04) 70%, rgba(255, 255, 255, 0.06) 100%); border: 1px solid rgba(255, 255, 255, 0.18); box-shadow: rgba(0, 0, 0, 0.4) 0px 32px 64px, rgba(0, 0, 0, 0.2) 0px 8px 32px, rgba(255, 255, 255, 0.2) 0px 1px 0px inset, rgba(0, 0, 0, 0.1) 0px -1px 0px inset; border-radius: 28px; transition: 0.6s cubic-bezier(0.23, 1, 0.32, 1); position: relative; z-index: 10; }

.liquid-glass-card:hover { backdrop-filter: blur(50px) saturate(200%); background: linear-gradient(135deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.12) 30%, rgba(255, 255, 255, 0.08) 70%, rgba(255, 255, 255, 0.1) 100%); transform: translateY(0px) scale(1); box-shadow: rgba(0, 0, 0, 0.5) 0px 48px 80px, rgba(0, 0, 0, 0.3) 0px 16px 40px, rgba(255, 255, 255, 0.25) 0px 1px 0px inset, rgba(0, 0, 0, 0.1) 0px -1px 0px inset; }

.glass-avatar { backdrop-filter: blur(20px); background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.08) 100%); border: 2px solid rgba(255, 255, 255, 0.25); box-shadow: rgba(0, 0, 0, 0.3) 0px 12px 32px, rgba(255, 255, 255, 0.4) 0px 1px 0px inset, rgba(0, 0, 0, 0.1) 0px -1px 0px inset; border-radius: 50%; width: 96px; height: 96px; }

.status-online { background: linear-gradient(135deg, rgb(48, 209, 88) 0%, rgb(40, 205, 65) 100%); box-shadow: rgba(48, 209, 88, 0.5) 0px 0px 24px, rgba(0, 0, 0, 0.2) 0px 2px 8px, rgba(255, 255, 255, 0.4) 0px 1px 0px inset; border-radius: 50%; width: 24px; height: 24px; border: 3px solid rgba(255, 255, 255, 0.9); animation: 3s ease-in-out 0s infinite normal none running pulse-green; }

@keyframes pulse-green { 
  0%, 100% { box-shadow: rgba(48, 209, 88, 0.5) 0px 0px 24px, rgba(0, 0, 0, 0.2) 0px 2px 8px, rgba(255, 255, 255, 0.4) 0px 1px 0px inset; }
  50% { box-shadow: rgba(48, 209, 88, 0.7) 0px 0px 32px, rgba(0, 0, 0, 0.2) 0px 2px 8px, rgba(255, 255, 255, 0.4) 0px 1px 0px inset; }
}

.glass-button { backdrop-filter: blur(16px); background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 16px; transition: 0.4s cubic-bezier(0.23, 1, 0.32, 1); box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 16px, rgba(255, 255, 255, 0.1) 0px 1px 0px inset; }

.glass-button:hover { backdrop-filter: blur(20px); background: rgba(255, 255, 255, 0.12); transform: translateY(-3px); box-shadow: rgba(0, 0, 0, 0.2) 0px 8px 24px, rgba(255, 255, 255, 0.15) 0px 1px 0px inset; }

.glass-button:active { transform: translateY(-1px); transition: transform 0.1s; }

.adaptive-text { font-weight: 300; letter-spacing: -0.03em; transition: 0.4s; }

.liquid-glass-card:hover .adaptive-text { font-weight: 400; letter-spacing: -0.02em; text-shadow: rgba(255, 255, 255, 0.4) 0px 0px 24px; }

.social-icon { backdrop-filter: blur(12px); background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 12px; transition: 0.3s cubic-bezier(0.23, 1, 0.32, 1); width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; text-decoration: none; }

.social-icon:hover { background: rgba(255, 255, 255, 0.12); transform: translateY(-2px) scale(1.05); box-shadow: rgba(0, 0, 0, 0.15) 0px 8px 20px; }

.rounded-apple-xs { border-radius: 8px; }

.rounded-apple-sm { border-radius: 12px; }

.rounded-apple-md { border-radius: 16px; }

.rounded-apple-lg { border-radius: 20px; }

.rounded-apple-xl { border-radius: 24px; }

.rounded-apple-2xl { border-radius: 28px; }

.rounded-apple-3xl { border-radius: 32px; }

.user-card-content { position: relative; z-index: 1; }

.testimonial-slider { position: relative; border-radius: 14px; padding: 32px; min-height: 300px; overflow: hidden; background: rgba(255, 255, 255, 0.08); backdrop-filter: blur(4px); border: 1px solid rgba(255, 255, 255, 0.18); box-shadow: rgba(255, 255, 255, 0.18) 0px 1px 0px inset, rgba(0, 0, 0, 0.25) 0px -12px 28px inset, rgba(0, 0, 0, 0.35) 0px 14px 40px, rgba(255, 255, 255, 0.04) 0px 0px 24px; transition: transform 0.35s, box-shadow 0.35s, background 0.35s; display: flex !important; }

.testimonial-slider::before { content: ""; position: absolute; inset: 0px; border-radius: inherit; pointer-events: none; opacity: 0.9; }

.testimonial-slider:hover { transform: translateY(0px); background: rgba(255, 255, 255, 0.12); box-shadow: rgba(255, 255, 255, 0.25) 0px 1px 0px inset, rgba(0, 0, 0, 0.32) 0px -16px 32px inset, rgba(0, 0, 0, 0.45) 0px 20px 55px, rgba(255, 255, 255, 0.06) 0px 0px 36px; }

.testimonial p { font-size: 1.05rem; line-height: 1.7; color: rgba(255, 255, 255, 0.85); margin-bottom: 1rem; }

.testimonial h4 { margin-top: 0px; font-weight: 600; letter-spacing: 0.3px; color: rgba(255, 255, 255, 0.95); }

.testimonial span { display: block; font-size: 0.85rem; color: rgba(255, 255, 255, 0.6); }

.testimonial .glass-avatar { width: 70px; height: 70px; }

.slick-dots { justify-content: center; gap: 14px; bottom: 15px; display: flex !important; }

.slick-dots li { position: relative; width: 10px; height: 10px; }

.slick-dots li button { width: 10px; height: 10px; padding: 0px; border-radius: 999px; background: rgba(255, 255, 255, 0.35); transition: transform 0.35s, background 0.35s; }

.slick-dots li button::before { display: none; }

.slick-dots li::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid rgba(5, 43, 206, 0.5); transform: scale(0); opacity: 0; transition: transform 0.4s, opacity 0.4s; }

.slick-dots li.slick-active button { background: rgb(5, 43, 206); transform: scale(1.3); }

.slick-dots li.slick-active::after { transform: scale(1); opacity: 1; }

.position-absolute { position: absolute !important; }

.position-relative { position: relative !important; }

details > p { overflow: hidden; }

details.animating > p { transition: height 0.35s, opacity 0.25s; }

details:not([open]) > p { height: 0px; opacity: 0; margin-top: 0px; }

details[open] > p { opacity: 1; }

.hero-bg { position: relative; overflow: hidden; background: linear-gradient(rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.02)), url("../img/bg.jpg") center center / cover no-repeat; backdrop-filter: blur(12px); box-shadow: rgba(255, 255, 255, 0.25) 0px 1px 0px inset, rgba(0, 0, 0, 0.35) 0px -10px 30px inset, rgba(0, 0, 0, 0.45) 0px 20px 50px, rgba(255, 255, 255, 0.05) 0px 0px 25px; }

.main-bg { position: relative; padding: 100px; border-radius: 14px; overflow: hidden; background: linear-gradient(rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.02)), url("../img/bg.jpg") center center / cover no-repeat; border: 1px solid rgba(255, 255, 255, 0.18); backdrop-filter: blur(12px); box-shadow: rgba(255, 255, 255, 0.25) 0px 1px 0px inset, rgba(0, 0, 0, 0.35) 0px -10px 30px inset, rgba(0, 0, 0, 0.45) 0px 20px 50px, rgba(255, 255, 255, 0.05) 0px 0px 25px; }

.main-bg::before { content: ""; position: absolute; inset: 0px; border-radius: inherit; pointer-events: none; background: linear-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.03)), radial-gradient(120% 80% at 20% 10%, rgba(0, 0, 0, 0.35), transparent 40%); opacity: 0.8; }

.btn-glass { border: 1px solid rgba(255, 255, 255, 0.18); backdrop-filter: blur(12px); box-shadow: rgba(255, 255, 255, 0.25) 0px 1px 0px inset, rgba(0, 0, 0, 0.35) 0px -10px 30px inset, rgba(0, 0, 0, 0.45) 0px 20px 50px, rgba(255, 255, 255, 0.05) 0px 0px 25px; }

.cursor { position: fixed; left: 0px; top: 0px; width: 10px; height: 10px; border-radius: 50%; pointer-events: none; z-index: 99999; transform: translate(-50%, -50%); transition: transform 0.18s ease-in-out, width 0.25s ease-in-out, height 0.25s ease-in-out, opacity 0.25s ease-in-out; will-change: transform; backface-visibility: hidden; display: block; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; }

.cursor.grow { width: 200px; height: 200px; }

.cursor::before { content: ""; position: absolute; inset: 0px; border-radius: inherit; backdrop-filter: blur(8px); padding: 2px; box-sizing: border-box; background-image: linear-gradient(rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.06)), linear-gradient(90deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)); background-origin: border-box; background-clip: padding-box, border-box; border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: rgba(0, 0, 0, 0.35) 0px 6px 14px inset, rgba(0, 0, 0, 0.3) 0px 6px 22px, rgba(255, 255, 255, 0.03) 0px 0px 12px; z-index: 0; pointer-events: none; transition: transform 0.28s ease-in-out, opacity 0.18s ease-in-out, background 0.22s ease-in-out, box-shadow 0.22s ease-in-out; }

.cursor::after { content: attr(data-text); position: absolute; left: 50%; top: 50%; width: var(--bubble-size, 120px); height: var(--bubble-size, 120px); min-width: 72px; min-height: 72px; border-radius: 50%; background: linear-gradient(rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)); backdrop-filter: blur(6px); color: rgb(255, 255, 255); font-weight: 600; font-size: 14px; padding: 0px 18px; display: flex; align-items: center; justify-content: center; text-align: center; white-space: nowrap; box-sizing: border-box; box-shadow: rgba(255, 255, 255, 0.12) 0px 1px 0px inset, rgba(0, 0, 0, 0.25) 0px -6px 18px inset, rgba(0, 0, 0, 0.36) 0px 8px 24px; transform: translate(-50%, -50%) scale(0.1); opacity: 0; pointer-events: none; z-index: 2; transition: transform 0.32s ease-in-out, opacity 0.6s ease-in-out; }

.cursor { --cursor-scale: 1; --bubble-compensate: 1; transform: translate(-50%, -50%) scale(var(--cursor-scale)); }

.cursor.cursor--active-text { --cursor-scale: 1.25; --bubble-compensate: 0.85; }

.cursor.cursor--active-text::before { backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.16); box-shadow: rgba(0, 0, 0, 0.42) 0px 6px 18px inset, rgba(0, 0, 0, 0.45) 0px 8px 30px, rgba(255, 255, 255, 0.04) 0px 0px 28px; background-image: linear-gradient(rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.02)), radial-gradient(120% 80% at 20% 20%, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0) 30%), linear-gradient(90deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)); background-clip: padding-box, padding-box, border-box; }

.cursor.cursor--active-text::after { transform: translate(-50%, -50%) scale(1); opacity: 1; }

.cursor::after { transform: translate(-50%, -50%)
    scale(calc(0.1 * var(--bubble-compensate))); }

.cursor.cursor--active-text::after { transform: translate(-50%, -50%)
    scale(calc(1 * var(--bubble-compensate))); }

@media (max-width: 640px) {
  .cursor.cursor--active-text::after { display: none; }
}

.badge { --glass-color: rgba(var(--color-background, 255,255,255), 0.22); --rim-color: rgba(255,255,255, 0.45); --inner-shadow: rgba(0,0,0,0.18); display: inline-flex; align-items: center; justify-content: center; padding: 6px 18px; font-size: 14px; font-weight: 500; border-radius: 3rem; white-space: nowrap; backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.32); box-shadow: inset 0 1px 3px var(--rim-color),          /* top highlight */
    inset 0 -4px 8px var(--inner-shadow),       /* inner bottom shadow */
    0 4px 10px rgba(0,0,0,0.10),                /* outer soft shadow */
    0 0 12px rgba(255,255,255,0.05); color: rgba(var(--color-foreground, 255,255,255), 0.85); backface-visibility: hidden; transition: backdrop-filter 0.3s, box-shadow 0.3s, background 0.3s; background: var(--glass-color) !important; }

.badge:hover { background: rgba(var(--color-background, 255,255,255), 0.32); box-shadow: rgba(255, 255, 255, 0.5) 0px 2px 6px inset, rgba(0, 0, 0, 0.25) 0px -5px 10px inset, rgba(0, 0, 0, 0.15) 0px 6px 14px, rgba(255, 255, 255, 0.1) 0px 0px 16px; }

.text-background-wrapper { --glass-bg: rgba(var(--color-background, 255,255,255), 0.12); --glass-rim: rgba(255,255,255, 0.32); --glass-shadow: rgba(0,0,0,0.25); display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 20px 26px; border-radius: 18px; gap: 12px; background: var(--glass-bg); backdrop-filter: blur(4px) saturate(140%); border: 1px solid var(--glass-rim); box-shadow: inset 0 1px 3px rgba(255,255,255,0.38),   /* top white rim */
    inset 0 -6px 14px var(--glass-shadow),    /* inner depth */
    0 6px 18px rgba(0,0,0,0.28),              /* outer shadow */
    0 0 22px rgba(255,255,255,0.08); backface-visibility: hidden; transition: background 0.3s, box-shadow 0.3s, backdrop-filter 0.3s; }

.text-background-wrapper:hover { background: rgba(var(--color-background, 255,255,255), 0.18); backdrop-filter: blur(18px) saturate(160%); box-shadow: rgba(255, 255, 255, 0.45) 0px 2px 6px inset, rgba(0, 0, 0, 0.32) 0px -8px 18px inset, rgba(0, 0, 0, 0.35) 0px 10px 24px, rgba(255, 255, 255, 0.12) 0px 0px 28px; }

.btn-liquid { transition: background-color var(--duration-long) ease, color var(--duration-long) ease; background: rgba(var(--color-button), 0.2); color: rgb(var(--color-button-text)); fill: rgb(var(--color-button-text)); backdrop-filter: blur(18px); }

.btn-liquid::selection { background: rgba(var(--color-button-text), 0.2); color: rgb(var(--color-button)); backdrop-filter: blur(18px); }

.btn-liquid:hover { background: rgba(var(--color-button-text), 0.2); color: rgb(var(--color-button)); fill: rgb(var(--color-button)); backdrop-filter: blur(18px); }

.glass { position: relative; background: rgba(255, 255, 255, 0.06); backdrop-filter: blur(4px) saturate(140%); overflow: hidden; }

.glass::before { content: ""; position: absolute; inset: 0px; padding: 1px; border-radius: inherit; pointer-events: none; background: linear-gradient(135deg, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.35)); mask: linear-gradient(rgb(255, 255, 255) 0px, rgb(255, 255, 255) 0px) content-box exclude, linear-gradient(rgb(255, 255, 255) 0px, rgb(255, 255, 255) 0px); }

.glass-soft { background: rgba(255, 255, 255, 0.04); backdrop-filter: blur(10px); }

.glass-strong { background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(20px) saturate(160%); }

.glass-dark { background: rgba(0, 0, 0, 0.45); backdrop-filter: blur(18px) saturate(150%); }

.glass-border-thin::before { padding: 1px; }

.glass-border-medium::before { padding: 1.5px; }

.glass-border-thick::before { padding: 2.5px; }

.glass-glow::after { content: ""; position: absolute; inset: -20%; background: radial-gradient(circle at left top, rgba(255, 255, 255, 0.35), transparent 60%); filter: blur(40px); pointer-events: none; }

.glass-hover { transition: transform 0.3s, box-shadow 0.3s; }

.glass-hover:hover { transform: translateY(-4px); box-shadow: rgba(0, 0, 0, 0.35) 0px 20px 50px; }

.glass-border { position: relative; }

.glass-border::before { content: ""; position: absolute; inset: 0px; padding: 1.5px; border-radius: inherit; pointer-events: none; background: linear-gradient(135deg, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.35)); mask: linear-gradient(rgb(255, 255, 255) 0px, rgb(255, 255, 255) 0px) content-box exclude, linear-gradient(rgb(255, 255, 255) 0px, rgb(255, 255, 255) 0px); backdrop-filter: blur(12px); box-shadow: rgba(255, 255, 255, 0.25) 0px 1px 0px inset, rgba(0, 0, 0, 0.35) 0px -10px 30px inset, rgba(0, 0, 0, 0.45) 0px 20px 50px, rgba(255, 255, 255, 0.05) 0px 0px 25px; }

.glass-bg { position: relative; overflow: hidden; background: linear-gradient(rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.02)); border: 1px solid rgba(255, 255, 255, 0.18); backdrop-filter: blur(12px); box-shadow: rgba(255, 255, 255, 0.25) 0px 1px 0px inset, rgba(0, 0, 0, 0.35) 0px -10px 30px inset, rgba(0, 0, 0, 0.45) 0px 20px 50px, rgba(255, 255, 255, 0.05) 0px 0px 25px; }

.glass-bg::before { content: ""; position: absolute; inset: 0px; border-radius: inherit; pointer-events: none; background: linear-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.03)), radial-gradient(120% 80% at 20% 10%, rgba(0, 0, 0, 0.35), transparent 40%); opacity: 0.8; }

.cta-bg { position: relative; background: linear-gradient(rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.02)), url("../img/bg3.jpg") center center / cover no-repeat; border: 0px solid rgba(255, 255, 255, 0.18); backdrop-filter: blur(12px); box-shadow: rgba(255, 255, 255, 0.25) 0px 1px 0px inset, rgba(0, 0, 0, 0.35) 0px -10px 30px inset, rgba(0, 0, 0, 0.45) 0px 20px 50px, rgba(255, 255, 255, 0.05) 0px 0px 25px; }

.cta-bg::before { content: ""; position: absolute; inset: 0px; border-radius: inherit; pointer-events: none; background: linear-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.03)), radial-gradient(120% 80% at 20% 10%, rgba(0, 0, 0, 0.35), transparent 40%); opacity: 0.8; }

.cta-wrapper::before, .cta-wrapper::after { content: ""; display: block; position: absolute; width: 250px; height: 250px; background-position: center center !important; background-size: contain !important; }

.cta-wrapper::before { left: 5%; top: 5%; background: url("../img/shape13.png") no-repeat; animation: 12s linear 0s infinite alternate none running rotate-animate; z-index: -1; }

.cta-wrapper::after { right: 5%; top: 60%; background: url("../img/shape14.png") no-repeat; animation: 12s linear 0s infinite alternate none running rotate-animate-reverse; z-index: -1; }

@media (max-width: 768px) {
  .cta-wrapper::before, .cta-wrapper::after { width: 100px; height: 100px; }
}

.liquid-wrap { padding: 40px; }

.liquid-card { position: relative; width: 320px; padding: 28px; border-radius: 24px; background: linear-gradient(135deg, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.05)); backdrop-filter: blur(18px) saturate(180%); border: 1px solid rgba(255, 255, 255, 0.18); box-shadow: rgba(0, 0, 0, 0.45) 0px 20px 50px, rgba(255, 255, 255, 0.25) 0px 1px 1px inset; color: rgb(248, 250, 252); transition: transform 0.35s, box-shadow 0.35s; }

.liquid-card::before { content: ""; position: absolute; inset: 0px; border-radius: inherit; background: radial-gradient(120% 60% at 20% 0%, rgba(255, 255, 255, 0.45), transparent 50%); opacity: 0.35; pointer-events: none; }

.liquid-card:hover { transform: translateY(-6px) scale(1.01); box-shadow: rgba(0, 0, 0, 0.55) 0px 35px 70px, rgba(255, 255, 255, 0.35) 0px 1px 1px inset; }

.liquid-card h3 { margin: 0px 0px 8px; font-size: 1.35rem; font-weight: 600; }

.liquid-card p { font-size: 0.95rem; line-height: 1.5; color: rgba(255, 255, 255, 0.8); }

.liquid-btn { margin-top: 18px; padding: 10px 18px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.25); background: linear-gradient(rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0.15)); color: rgb(255, 255, 255); cursor: pointer; backdrop-filter: blur(6px); transition: transform 0.2s, background 0.2s; }

.liquid-btn:hover { transform: scale(1.05); background: linear-gradient(rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0.2)); }

@media (max-width: 768px) {
  .main-bg { padding: 20px; }
}

.logo-header { max-height: 42px; width: auto; object-fit: contain; }

.cms-rich-content { color: rgb(203, 213, 225); line-height: 1.8; font-size: 1rem; }

.cms-rich-content h1, .cms-rich-content h2, .cms-rich-content h3 { color: rgb(255, 255, 255); font-family: var(--font-display,inherit); font-weight: 600; line-height: 1.2; margin: 1.2em 0px 0.55em; }

.cms-rich-content p { margin: 0.85em 0px; }

.cms-rich-content a { color: rgb(125, 211, 252); text-decoration: none; }

.cms-rich-content ul, .cms-rich-content ol { margin: 1em 0px 1em 1.25em; }

.cms-rich-content img { border-radius: 1rem; max-width: 100%; height: auto; }

.cms-rich-content table { width: 100%; border-collapse: collapse; margin: 1em 0px; }

.cms-rich-content td, .cms-rich-content th { border: 1px solid rgba(51, 65, 85, 0.75); padding: 0.75rem; }

.cms-product-card { cursor: pointer; text-decoration: none; color: inherit; display: flex; }

.cms-product-card:hover { color: inherit; }

.cms-product-card .th-post-card-image { transition: transform 0.6s, opacity 0.6s; }

.cms-product-meta { min-height: 54px; }

.product-detail-card-image { overflow: hidden; border-radius: 1rem; background: rgba(15, 23, 42, 0.7); }

.product-detail-card-image img { aspect-ratio: 4 / 5; max-height: 720px; }

.social { display: flex; gap: 0.75rem; flex-wrap: wrap; }

.social a { display: inline-flex; align-items: center; justify-content: center; width: 2.35rem; height: 2.35rem; border: 1px solid rgba(51, 65, 85, 0.9); border-radius: 999px; background: rgba(15, 23, 42, 0.85); color: rgb(226, 232, 240); font-weight: 700; transition: 0.25s; }

.social a:hover { border-color: rgba(56, 189, 248, 0.8); color: rgb(255, 255, 255); transform: translateY(-3px); box-shadow: rgba(56, 189, 248, 0.12) 0px 10px 25px; }

.cms-hero-controls { position: absolute; inset: auto 0px 1.5rem; z-index: 5; display: flex; justify-content: center; gap: 0.6rem; }

.cms-hero-dot { width: 10px; height: 10px; border-radius: 999px; border: 1px solid rgba(148, 163, 184, 0.7); background: rgba(15, 23, 42, 0.5); cursor: pointer; }

.cms-hero-dot.active { background: rgb(56, 189, 248); border-color: rgb(56, 189, 248); }

.hero-slide { display: none; }

.hero-slide.active { display: block; }

.hero-slide .hero-content { animation: 0.7s ease 0s 1 normal both running cmsHeroFade; }

@keyframes cmsHeroFade { 
  0% { opacity: 0; transform: translateY(16px); }
  100% { opacity: 1; transform: none; }
}

@media (max-width: 768px) {
  .product-detail-card-image img { aspect-ratio: 1 / 1; }
  .cms-rich-content { font-size: 0.95rem; }
}

:root { --lumatrix-bg: #00304A; --lumatrix-bg-dark: #00263B; --lumatrix-card: rgba(0, 38, 59, 0.72); --lumatrix-card-solid: #062f46; --lumatrix-border: rgba(255,255,255,0.14); --lumatrix-text: #ffffff; --lumatrix-muted: #cbd5e1; --lumatrix-accent: #16b6e8; --loader-bg: #00304A; --loader-accent: #16b6e8; --color-accent-rgb: 22, 182, 232; --card-glow: rgba(22, 182, 232, 0.18); }

html, body, .min-h-screen, .bg-slate-950, .bg-slate-950\/95, .bg-slate-900, .bg-slate-900\/70, .bg-slate-900\/80, .bg-slate-900\/90, .bg-black, .bg-black\/60 { background-color: var(--lumatrix-bg) !important; }

body { color: var(--lumatrix-text); background: var(--lumatrix-bg) !important; }

body::-webkit-scrollbar-track { background: var(--lumatrix-bg-dark) !important; }

body::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.22) !important; }

body::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.34) !important; }

.hero-bg, .main-bg, .cta-bg, .glass-bg { background-image: none !important; border-color: var(--lumatrix-border) !important; }

.hero-bg::before, .hero-bg::after, .main-bg::before, .cta-bg::before, .glass-bg::before { background-image: none !important; }

.hero::before, .hero::after, .hero-content::before, .hero-content::after, .cta-wrapper::before, .cta-wrapper::after { display: none !important; content: none !important; background: none !important; animation: auto ease 0s 1 normal none running none !important; }

header, .header, nav, #mobileSidebar { background-color: var(--lumatrix-bg-dark) !important; border-color: var(--lumatrix-border) !important; }

#mobileOverlay { background: rgba(0, 38, 59, 0.72) !important; }

.hero, #hero, .hero-slide, .hero-slide.active { }

.hero-slide { background-image: none !important; }

.cms-hero-controls { bottom: 1rem !important; }

.cms-hero-dot { background: rgba(255, 255, 255, 0.26) !important; border-color: rgba(255, 255, 255, 0.45) !important; }

.cms-hero-dot.active { background: var(--lumatrix-accent) !important; border-color: var(--lumatrix-accent) !important; }

.rounded-2xl.border, .rounded-3xl.border, .cms-product-card, .product-detail-card-image, .liquid-glass-card, .testimonial-slider, .glass, .glass-dark, .glass-bg, .service-card, .work-item article, article { background-color: var(--lumatrix-card) !important; border-color: var(--lumatrix-border) !important; }

.cms-product-card { background: rgba(0, 38, 59, 0.74) !important; box-shadow: rgba(0, 0, 0, 0.22) 0px 18px 45px !important; }

.cms-product-card:hover { background: rgba(0, 48, 74, 0.92) !important; box-shadow: rgba(0, 0, 0, 0.3) 0px 24px 55px !important; }

footer, .footer { background: var(--lumatrix-bg) !important; border-color: var(--lumatrix-border) !important; }

.text-slate-100, .text-slate-200, .text-slate-300, .text-white, .cms-rich-content h1, .cms-rich-content h2, .cms-rich-content h3 { color: var(--lumatrix-text) !important; }

.text-slate-400, .text-slate-500, .cms-rich-content, .cms-product-meta { color: var(--lumatrix-muted) !important; }

.badge, .filter-btn, .btn-glass, .magnetic-btn, .pdf-toolbar button { background: rgba(255, 255, 255, 0.09) !important; color: rgb(255, 255, 255) !important; border-color: var(--lumatrix-border) !important; }

.badge:hover, .filter-btn:hover, .btn-glass:hover, .magnetic-btn:hover, .pdf-toolbar button:hover { background: rgba(22, 182, 232, 0.2) !important; }

.gototop { background: linear-gradient(90deg, rgb(0, 48, 74) 0%, rgb(22, 182, 232) 100%) !important; }

#preloader { background: var(--lumatrix-bg) !important; }

.preloader__logo { background: rgba(255, 255, 255, 0.07) !important; }

.cursor { border-color: rgba(22, 182, 232, 0.55) !important; }

.cursor::before { background: rgba(22, 182, 232, 0.1) !important; }

@media (max-width: 768px) {
  .main-bg { padding: 20px !important; }
  .hero, #hero { overflow: hidden !important; }
}

#work, section#work, .home-products, .products-section, section:has(.cms-product-card) { background: rgb(0, 48, 74) !important; }

#work .max-w-6xl, section#work .max-w-6xl { background: transparent !important; }

#work.bg-slate-950, #work .bg-slate-950, #work .bg-slate-900, #work .bg-slate-900\/70, #work .bg-slate-950\/95, section#work.bg-slate-950, section#work .bg-slate-950, section#work .bg-slate-900, section#work .bg-slate-900\/70, section#work .bg-slate-950\/95 { background-color: rgb(0, 48, 74) !important; }

#work .cms-product-card, section#work .cms-product-card, #work article, section#work article { background: rgba(0, 31, 49, 0.72) !important; border-color: rgba(255, 255, 255, 0.14) !important; }

.hero, #hero, .hero-bg { position: relative !important; background: rgb(0, 48, 74) !important; overflow: hidden !important; }

.hero-content::before, .hero-content::after { display: none !important; content: none !important; }

.hero::before, #hero::before, .hero-bg::before { content: "" !important; display: block !important; position: absolute !important; left: 0px !important; top: 0px !important; bottom: 0px !important; width: 28% !important; height: 100% !important; z-index: 0 !important; pointer-events: none !important; background-position: center center !important; opacity: 0.8 !important; animation: auto ease 0s 1 normal none running none !important; }

.hero::after, #hero::after, .hero-bg::after { content: "" !important; display: block !important; position: absolute !important; right: 0px !important; top: 0px !important; bottom: 0px !important; width: 28% !important; height: 100% !important; z-index: 0 !important; pointer-events: none !important; background-position: center center !important; opacity: 0.8 !important; animation: auto ease 0s 1 normal none running none !important; }

.hero > *, #hero > *, .hero-bg > * { position: relative; z-index: 1; }

.cms-hero-controls { z-index: 5 !important; }

@media (max-width: 768px) {
  .hero::before, #hero::before, .hero-bg::before, .hero::after, #hero::after, .hero-bg::after { width: 38% !important; opacity: 0.45 !important; }
}

.card-image:has(> .th-post-card-image:nth-child(2)) > .th-post-card-image:nth-child(1) { position: absolute; top: 0px; width: 100%; height: 100%; object-fit: cover; transform: translateX(50%) scaleX(2); opacity: 0; filter: blur(12px); }

.card-image:has(> .th-post-card-image:nth-child(2)):hover > .th-post-card-image:nth-child(1) { transform: translateX(0%) scaleX(1); opacity: 1; filter: blur(0px); }

.card-image:has(> .th-post-card-image:nth-child(2)):hover > .th-post-card-image:nth-child(2) { transform: translateX(-50%) scaleX(2); opacity: 0; filter: blur(12px); }