/*
 Theme Name: Najs
 Theme URI: http://najs360.pl/
 Description: Szablon przygotowany specjalnie dla strony -> http://najs360.pl/
 Author: Natalia Pluta
 Author URI: http://najs360.pl/
 Version: 1.0.21.03.2025
 License: 
 License URI: 
 Text Domain: 
*/

/* Fonty */

.roboto-mono-<uniquifier> {
  font-family: "Roboto Mono", monospace;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}


:root {
  --heading-desktop-h1-font-family: "Roboto Mono", monospace;, Helvetica;
  --heading-desktop-h1-font-weight: 400;
  --heading-desktop-h1-font-size: 8.89vw;
  --heading-desktop-h1-letter-spacing: 0.03vw;
  --heading-desktop-h1-line-height: 120.00000476837158%;
  --heading-desktop-h1-font-style: normal;
  --heading-desktop-h2-font-family: "Roboto Mono", monospace;, Helvetica;
  --heading-desktop-h2-font-weight: 400;
  --heading-desktop-h2-font-size: 2.5vw;
  --heading-desktop-h2-letter-spacing: 0.03vw;
  --heading-desktop-h2-line-height: 120.00000476837158%;
  --heading-desktop-h2-font-style: normal;
  --heading-desktop-h3-font-family: "Roboto Mono", monospace;, Helvetica;
  --heading-desktop-h3-font-weight: 400;
  --heading-desktop-h3-font-size: 2.08vw;
  --heading-desktop-h3-letter-spacing: 0.02vw;
  --heading-desktop-h3-line-height: 129.99999523162842%;
  --heading-desktop-h3-font-style: normal;
  --heading-desktop-h4-font-family: "Roboto Mono", monospace;, Helvetica;
  --heading-desktop-h4-font-weight: 400;
  --heading-desktop-h4-font-size: 1.67vw;
  --heading-desktop-h4-letter-spacing: 0.02vw;
  --heading-desktop-h4-line-height: 139.9999976158142%;
  --heading-desktop-h4-font-style: normal;
  --heading-desktop-h5-font-family: "Roboto Mono", monospace;, Helvetica;
  --heading-desktop-h5-font-weight: 400;
  --heading-desktop-h5-font-size: 1.25vw;
  --heading-desktop-h5-letter-spacing: 0.01vw;
  --heading-desktop-h5-line-height: 139.9999976158142%;
  --heading-desktop-h5-font-style: normal;
  --heading-desktop-h6-font-family: "Roboto Mono", monospace;, Helvetica;
  --heading-desktop-h6-font-weight: 400;
  --heading-desktop-h6-font-size: 1.04vw;
  --heading-desktop-h6-letter-spacing: 0.01vw;
  --heading-desktop-h6-line-height: 139.9999976158142%;
  --heading-desktop-h6-font-style: normal;
  --heading-desktop-tagline-font-family: "Roboto Mono", monospace;, Helvetica;
  --heading-desktop-tagline-font-weight: 400;
  --heading-desktop-tagline-font-size: 0.83vw;
  --heading-desktop-tagline-letter-spacing: 0vw;
  --heading-desktop-tagline-line-height: 150%;
  --heading-desktop-tagline-font-style: normal;
  --heading-mobile-h1-font-family: "Montserrat Alternates", Helvetica;
  --heading-mobile-h1-font-weight: 400;
  --heading-mobile-h1-font-size: 2.08vw;
  --heading-mobile-h1-letter-spacing: 0.02vw;
  --heading-mobile-h1-line-height: 120.00000476837158%;
  --heading-mobile-h1-font-style: normal;
  --heading-mobile-h2-font-family: "Montserrat Alternates", Helvetica;
  --heading-mobile-h2-font-weight: 400;
  --heading-mobile-h2-font-size: 1.88vw;
  --heading-mobile-h2-letter-spacing: 0.02vw;
  --heading-mobile-h2-line-height: 120.00000476837158%;
  --heading-mobile-h2-font-style: normal;
  --heading-mobile-h3-font-family: "Montserrat Alternates", Helvetica;
  --heading-mobile-h3-font-weight: 400;
  --heading-mobile-h3-font-size: 1.67vw;
  --heading-mobile-h3-letter-spacing: 0.02vw;
  --heading-mobile-h3-line-height: 129.99999523162842%;
  --heading-mobile-h3-font-style: normal;
  --heading-mobile-h4-font-family: "Montserrat Alternates", Helvetica;
  --heading-mobile-h4-font-weight: 400;
  --heading-mobile-h4-font-size: 1.25vw;
  --heading-mobile-h4-letter-spacing: 0.01vw;
  --heading-mobile-h4-line-height: 139.9999976158142%;
  --heading-mobile-h4-font-style: normal;
  --heading-mobile-h5-font-family: "Montserrat Alternates", Helvetica;
  --heading-mobile-h5-font-weight: 400;
  --heading-mobile-h5-font-size: 1.04vw;
  --heading-mobile-h5-letter-spacing: 0.01vw;
  --heading-mobile-h5-line-height: 139.9999976158142%;
  --heading-mobile-h5-font-style: normal;
  --heading-mobile-h6-font-family: "Montserrat Alternates", Helvetica;
  --heading-mobile-h6-font-weight: 400;
  --heading-mobile-h6-font-size: 0.94vw;
  --heading-mobile-h6-letter-spacing: 0.01vw;
  --heading-mobile-h6-line-height: 139.9999976158142%;
  --heading-mobile-h6-font-style: normal;
  --text-large-light-font-family: "Roboto Mono", monospace;, Helvetica;
  --text-large-light-font-weight: 400;
  --text-large-light-font-size: 1.04vw;
  --text-large-light-letter-spacing: 0vw;
  --text-large-light-line-height: 160.0000023841858%;
  --text-large-light-font-style: normal;
  --text-large-normal-font-family: "Roboto Mono", monospace;, Helvetica;
  --text-large-normal-font-weight: 400;
  --text-large-normal-font-size: 1.04vw;
  --text-large-normal-letter-spacing: 0vw;
  --text-large-normal-line-height: 160.0000023841858%;
  --text-large-normal-font-style: normal;
  --text-large-medium-font-family: "Roboto Mono", monospace;, Helvetica;
  --text-large-medium-font-weight: 400;
  --text-large-medium-font-size: 1.04vw;
  --text-large-medium-letter-spacing: 0vw;
  --text-large-medium-line-height: 160.0000023841858%;
  --text-large-medium-font-style: normal;
  --text-large-semi-bold-font-family: "Roboto Mono", monospace;, Helvetica;
  --text-large-semi-bold-font-weight: 400;
  --text-large-semi-bold-font-size: 1.04vw;
  --text-large-semi-bold-letter-spacing: 0vw;
  --text-large-semi-bold-line-height: 160.0000023841858%;
  --text-large-semi-bold-font-style: normal;
  --text-large-bold-font-family: "Roboto Mono", monospace;, Helvetica;
  --text-large-bold-font-weight: 400;
  --text-large-bold-font-size: 1.04vw;
  --text-large-bold-letter-spacing: 0vw;
  --text-large-bold-line-height: 160.0000023841858%;
  --text-large-bold-font-style: normal;
  --text-large-extra-bold-font-family: "Roboto Mono", monospace;, Helvetica;
  --text-large-extra-bold-font-weight: 400;
  --text-large-extra-bold-font-size: 1.04vw;
  --text-large-extra-bold-letter-spacing: 0vw;
  --text-large-extra-bold-line-height: 160.0000023841858%;
  --text-large-extra-bold-font-style: normal;
  --text-large-link-font-family: "Roboto Mono", monospace;, Helvetica;
  --text-large-link-font-weight: 400;
  --text-large-link-font-size: 1.04vw;
  --text-large-link-letter-spacing: 0vw;
  --text-large-link-line-height: 160.0000023841858%;
  --text-large-link-font-style: normal;
  --text-medium-light-font-family: "Roboto Mono", monospace;, Helvetica;
  --text-medium-light-font-weight: 400;
  --text-medium-light-font-size: 0.94vw;
  --text-medium-light-letter-spacing: 0vw;
  --text-medium-light-line-height: 160.0000023841858%;
  --text-medium-light-font-style: normal;
  --text-medium-normal-font-family: "Roboto Mono", monospace;, Helvetica;
  --text-medium-normal-font-weight: 400;
  --text-medium-normal-font-size: 0.94vw;
  --text-medium-normal-letter-spacing: 0vw;
  --text-medium-normal-line-height: 160.0000023841858%;
  --text-medium-normal-font-style: normal;
  --text-medium-medium-font-family: "Roboto Mono", monospace;, Helvetica;
  --text-medium-medium-font-weight: 400;
  --text-medium-medium-font-size: 0.94vw;
  --text-medium-medium-letter-spacing: 0vw;
  --text-medium-medium-line-height: 160.0000023841858%;
  --text-medium-medium-font-style: normal;
  --text-medium-semi-bold-font-family: "Roboto Mono", monospace;, Helvetica;
  --text-medium-semi-bold-font-weight: 400;
  --text-medium-semi-bold-font-size: 0.94vw;
  --text-medium-semi-bold-letter-spacing: 0vw;
  --text-medium-semi-bold-line-height: 160.0000023841858%;
  --text-medium-semi-bold-font-style: normal;
  --text-medium-bold-font-family: "Roboto Mono", monospace;, Helvetica;
  --text-medium-bold-font-weight: 400;
  --text-medium-bold-font-size: 0.94vw;
  --text-medium-bold-letter-spacing: 0vw;
  --text-medium-bold-line-height: 160.0000023841858%;
  --text-medium-bold-font-style: normal;
  --text-medium-extra-bold-font-family: "Roboto Mono", monospace;, Helvetica;
  --text-medium-extra-bold-font-weight: 400;
  --text-medium-extra-bold-font-size: 0.94vw;
  --text-medium-extra-bold-letter-spacing: 0vw;
  --text-medium-extra-bold-line-height: 160.0000023841858%;
  --text-medium-extra-bold-font-style: normal;
  --text-medium-link-font-family: "PP Neue Machina", Helvetica;
  --text-medium-link-font-weight: 400;
  --text-medium-link-font-size: 0.94vw;
  --text-medium-link-letter-spacing: 0vw;
  --text-medium-link-line-height: 160.0000023841858%;
  --text-medium-link-font-style: normal;
  --text-regular-light-font-family: "Roboto Mono", monospace;, Helvetica;
  --text-regular-light-font-weight: 400;
  --text-regular-light-font-size: 0.83vw;
  --text-regular-light-letter-spacing: 0vw;
  --text-regular-light-line-height: 160.0000023841858%;
  --text-regular-light-font-style: normal;
  --text-regular-normal-font-family: "Roboto Mono", monospace;, Helvetica;
  --text-regular-normal-font-weight: 400;
  --text-regular-normal-font-size: 0.83vw;
  --text-regular-normal-letter-spacing: 0vw;
  --text-regular-normal-line-height: 160.0000023841858%;
  --text-regular-normal-font-style: normal;
  --text-regular-medium-font-family: "Roboto Mono", monospace;, Helvetica;
  --text-regular-medium-font-weight: 400;
  --text-regular-medium-font-size: 0.83vw;
  --text-regular-medium-letter-spacing: 0vw;
  --text-regular-medium-line-height: 160.0000023841858%;
  --text-regular-medium-font-style: normal;
  --text-regular-semi-bold-font-family: "Roboto Mono", monospace;, Helvetica;
  --text-regular-semi-bold-font-weight: 400;
  --text-regular-semi-bold-font-size: 0.83vw;
  --text-regular-semi-bold-letter-spacing: 0vw;
  --text-regular-semi-bold-line-height: 160.0000023841858%;
  --text-regular-semi-bold-font-style: normal;
  --text-regular-bold-font-family: "Roboto Mono", monospace;, Helvetica;
  --text-regular-bold-font-weight: 400;
  --text-regular-bold-font-size: 0.83vw;
  --text-regular-bold-letter-spacing: 0vw;
  --text-regular-bold-line-height: 160.0000023841858%;
  --text-regular-bold-font-style: normal;
  --text-regular-extra-bold-font-family: "Roboto Mono", monospace;, Helvetica;
  --text-regular-extra-bold-font-weight: 400;
  --text-regular-extra-bold-font-size: 0.83vw;
  --text-regular-extra-bold-letter-spacing: 0vw;
  --text-regular-extra-bold-line-height: 160.0000023841858%;
  --text-regular-extra-bold-font-style: normal;
  --text-regular-link-font-family: "PP Neue Machina", Helvetica;
  --text-regular-link-font-weight: 400;
  --text-regular-link-font-size: 0.83vw;
  --text-regular-link-letter-spacing: 0vw;
  --text-regular-link-line-height: 160.0000023841858%;
  --text-regular-link-font-style: normal;
  --text-small-light-font-family: "Roboto Mono", monospace;, Helvetica;
  --text-small-light-font-weight: 400;
  --text-small-light-font-size: 0.73vw;
  --text-small-light-letter-spacing: 0vw;
  --text-small-light-line-height: 160.0000023841858%;
  --text-small-light-font-style: normal;
  --text-small-normal-font-family: "Roboto Mono", monospace;, Helvetica;
  --text-small-normal-font-weight: 400;
  --text-small-normal-font-size: 0.73vw;
  --text-small-normal-letter-spacing: 0vw;
  --text-small-normal-line-height: 160.0000023841858%;
  --text-small-normal-font-style: normal;
  --text-small-medium-font-family: "PP Neue Machina", Helvetica;
  --text-small-medium-font-weight: 500;
  --text-small-medium-font-size: 0.73vw;
  --text-small-medium-letter-spacing: 0vw;
  --text-small-medium-line-height: 160.0000023841858%;
  --text-small-medium-font-style: normal;
  --text-small-semi-bold-font-family: "PP Neue Machina", Helvetica;
  --text-small-semi-bold-font-weight: 400;
  --text-small-semi-bold-font-size: 0.73vw;
  --text-small-semi-bold-letter-spacing: 0vw;
  --text-small-semi-bold-line-height: 160.0000023841858%;
  --text-small-semi-bold-font-style: normal;
  --text-small-bold-font-family: "PP Neue Machina", Helvetica;
  --text-small-bold-font-weight: 700;
  --text-small-bold-font-size: 0.73vw;
  --text-small-bold-letter-spacing: 0vw;
  --text-small-bold-line-height: 160.0000023841858%;
  --text-small-bold-font-style: normal;
  --text-small-extra-bold-font-family: "PP Neue Machina", Helvetica;
  --text-small-extra-bold-font-weight: 800;
  --text-small-extra-bold-font-size: 0.73vw;
  --text-small-extra-bold-letter-spacing: 0vw;
  --text-small-extra-bold-line-height: 160.0000023841858%;
  --text-small-extra-bold-font-style: normal;
  --text-small-link-font-family: "PP Neue Machina", Helvetica;
  --text-small-link-font-weight: 400;
  --text-small-link-font-size: 0.73vw;
  --text-small-link-letter-spacing: 0vw;
  --text-small-link-line-height: 160.0000023841858%;
  --text-small-link-font-style: normal;
  --text-tiny-light-font-family: "PP Neue Machina", Helvetica;
  --text-tiny-light-font-weight: 400;
  --text-tiny-light-font-size: 0.63vw;
  --text-tiny-light-letter-spacing: 0vw;
  --text-tiny-light-line-height: 160.0000023841858%;
  --text-tiny-light-font-style: normal;
  --text-tiny-normal-font-family: "PP Neue Machina", Helvetica;
  --text-tiny-normal-font-weight: 400;
  --text-tiny-normal-font-size: 0.63vw;
  --text-tiny-normal-letter-spacing: 0vw;
  --text-tiny-normal-line-height: 160.0000023841858%;
  --text-tiny-normal-font-style: normal;
  --text-tiny-medium-font-family: "PP Neue Machina", Helvetica;
  --text-tiny-medium-font-weight: 500;
  --text-tiny-medium-font-size: 0.63vw;
  --text-tiny-medium-letter-spacing: 0vw;
  --text-tiny-medium-line-height: 160.0000023841858%;
  --text-tiny-medium-font-style: normal;
  --text-tiny-semi-bold-font-family: "PP Neue Machina", Helvetica;
  --text-tiny-semi-bold-font-weight: 400;
  --text-tiny-semi-bold-font-size: 0.63vw;
  --text-tiny-semi-bold-letter-spacing: 0vw;
  --text-tiny-semi-bold-line-height: 160.0000023841858%;
  --text-tiny-semi-bold-font-style: normal;
  --text-tiny-bold-font-family: "PP Neue Machina", Helvetica;
  --text-tiny-bold-font-weight: 700;
  --text-tiny-bold-font-size: 0.63vw;
  --text-tiny-bold-letter-spacing: 0vw;
  --text-tiny-bold-line-height: 160.0000023841858%;
  --text-tiny-bold-font-style: normal;
  --text-tiny-extra-bold-font-family: "PP Neue Machina", Helvetica;
  --text-tiny-extra-bold-font-weight: 800;
  --text-tiny-extra-bold-font-size: 0.63vw;
  --text-tiny-extra-bold-letter-spacing: 0vw;
  --text-tiny-extra-bold-line-height: 160.0000023841858%;
  --text-tiny-extra-bold-font-style: normal;
  --text-tiny-link-font-family: "PP Neue Machina", Helvetica;
  --text-tiny-link-font-weight: 400;
  --text-tiny-link-font-size: 0.63vw;
  --text-tiny-link-letter-spacing: 0vw;
  --text-tiny-link-line-height: 160.0000023841858%;
  --text-tiny-link-font-style: normal;
  --xxsmall: 0vw 0.05vw 0.1vw 0vw rgba(0, 0, 0, 0.05);
  --xsmall: 0vw 0.05vw 0.1vw 0vw rgba(0, 0, 0, 0.06), 0vw 0.05vw 0.16vw 0vw
    rgba(0, 0, 0, 0.1);
  --small: 0vw 0.1vw 0.21vw -0.1vw rgba(0, 0, 0, 0.06), 0vw 0.21vw 0.42vw -0.1vw
    rgba(0, 0, 0, 0.1);
  --medium: 0vw 0.21vw 0.31vw -0.1vw rgba(0, 0, 0, 0.03), 0vw 0.63vw 0.83vw -0.21vw
    rgba(0, 0, 0, 0.08);
  --large: 0vw 0.42vw 0.42vw -0.21vw rgba(0, 0, 0, 0.03), 0vw 1.04vw 1.25vw -0.21vw
    rgba(0, 0, 0, 0.08);
  --xlarge: 0vw 1.25vw 2.5vw -0.63vw rgba(0, 0, 0, 0.18);
  --xxlarge: 0vw 1.67vw 3.33vw -0.63vw rgba(0, 0, 0, 0.14);
  --color-schemes-color-scheme-2-text: var(--primitives-color-white);
  --color-schemes-color-scheme-2-background: var(
    --primitives-color-neutral-darker
  );
  --color-schemes-color-scheme-2-border: var(--primitives-color-white);
  --color-schemes-color-scheme-2-accent: var(--primitives-color-white);
  --color-schemes-color-scheme-2-foreground: var(
    --primitives-color-neutral-darker
  );
  --color-schemes-color-scheme-1-text: var(--primitives-color-neutral-darkest);
  --color-schemes-color-scheme-1-foreground: var(--primitives-color-white);
  --color-schemes-color-scheme-1-background: var(--primitives-color-white);
  --color-schemes-color-scheme-1-border: var(--primitives-color-neutral-darkest);
  --color-schemes-color-scheme-1-accent: var(--primitives-color-black);
  --primitives-color-black-lightest: rgba(229, 229, 229, 1);
  --primitives-color-black-lighter: rgba(204, 204, 204, 1);
  --primitives-color-black-light: rgba(76, 76, 76, 1);
  --primitives-color-black: rgba(0, 0, 0, 1);
  --primitives-color-black-dark: rgba(0, 0, 0, 1);
  --primitives-color-black-darker: rgba(0, 0, 0, 1);
  --primitives-color-black-darkest: rgba(0, 0, 0, 1);
  --primitives-color-white: rgba(255, 255, 255, 1);
  --primitives-color-neutral-lightest: rgba(242, 242, 242, 1);
  --primitives-color-neutral-lighter: rgba(216, 216, 216, 1);
  --primitives-color-neutral-light: rgba(178, 178, 178, 1);
  --primitives-color-neutral: rgba(127, 127, 127, 1);
  --primitives-color-neutral-dark: rgba(76, 76, 76, 1);
  --primitives-color-neutral-darker: rgba(25, 25, 25, 1);
  --primitives-color-neutral-darkest: rgba(0, 0, 0, 1);
  --primitives-opacity-transparent: rgba(255, 255, 255, 0);
  --primitives-opacity-white-5: rgba(255, 255, 255, 0.05);
  --primitives-opacity-white-10: rgba(255, 255, 255, 0.1);
  --primitives-opacity-white-15: rgba(255, 255, 255, 0.15);
  --primitives-opacity-white-20: rgba(255, 255, 255, 0.2);
  --primitives-opacity-white-30: rgba(255, 255, 255, 0.3);
  --primitives-opacity-white-40: rgba(255, 255, 255, 0.4);
  --primitives-opacity-white-50: rgba(255, 255, 255, 0.5);
  --primitives-opacity-white-60: rgba(255, 255, 255, 0.6);
  --primitives-opacity-neutral-darkest-5: rgba(0, 0, 0, 0.05);
  --primitives-opacity-neutral-darkest-10: rgba(0, 0, 0, 0.1);
  --primitives-opacity-neutral-darkest-15: rgba(0, 0, 0, 0.15);
  --primitives-opacity-neutral-darkest-20: rgba(0, 0, 0, 0.2);
  --primitives-opacity-neutral-darkest-30: rgba(0, 0, 0, 0.3);
  --primitives-opacity-neutral-darkest-40: rgba(0, 0, 0, 0.4);
  --primitives-opacity-neutral-darkest-50: rgba(0, 0, 0, 0.5);
  --primitives-opacity-neutral-darkest-60: rgba(0, 0, 0, 0.6);
  --UI-styles-radius-small: 0.83vw;
  --UI-styles-radius-medium: 0.83vw;
  --UI-styles-radius-large: 0.83vw;
  --UI-styles-stroke-border-width: 0.1vw;
  --UI-styles-stroke-divider-width: 0.1vw;
  --najs-gradient: linear-gradient(68deg,
    rgba(202, 74, 81, 1) 0%,
    rgba(211, 114, 84, 1) 11%,
    rgba(222, 152, 81, 1) 19%,
    rgba(232, 193, 68, 1) 28%,
    rgba(228, 211, 61, 1) 35%,
    rgba(218, 214, 65, 1) 41%,
    rgba(198, 210, 83, 1) 48%,
    rgba(170, 199, 114, 1) 54%,
    rgba(145, 191, 148, 1) 60%,
    rgba(133, 187, 169, 1) 66%,
    rgba(128, 179, 183, 1) 72%,
    rgba(133, 163, 184, 1) 80%,
    rgba(143, 129, 168, 1) 86%,
    rgba(150, 92, 146, 1) 93%,
    rgba(156, 57, 128, 1) 100%);

   --najs-gradient-1: linear-gradient(68deg,
    rgba(202, 74, 81, 1) 0%,
    rgba(211, 114, 84, 1) 20%,
    rgba(222, 152, 81, 1) 30%,
    rgba(232, 193, 68, 1) 50%,
    rgba(228, 211, 61, 1) 70%,
    rgba(218, 214, 65, 1) 80%,
    rgba(198, 210, 83, 1) 100%,);

    --najs-gradient-2: linear-gradient(68deg,

    rgba(232, 193, 68, 1) 0%,
    rgba(228, 211, 61, 1) 20%,
    rgba(218, 214, 65, 1) 30%,
    rgba(198, 210, 83, 1) 50%,
    rgba(170, 199, 114, 1) 70%,
    rgba(145, 191, 148, 1) 80%,
    rgba(133, 187, 169, 1) 100%,);


    --najs-gradient-3: linear-gradient(68deg,
    rgba(198, 210, 83, 1) 0%,
    rgba(170, 199, 114, 1) 20%,
    rgba(145, 191, 148, 1) 30%,
    rgba(133, 187, 169, 1) 50%,
    rgba(128, 179, 183, 1) 70%,
    rgba(133, 163, 184, 1) 80%,
    rgba(143, 129, 168, 1) 100%,);

    --najs-gradient-4: linear-gradient(68deg,
    rgba(145, 191, 148, 1) 0%,
    rgba(133, 187, 169, 1) 20%,
    rgba(128, 179, 183, 1) 30%,
    rgba(133, 163, 184, 1) 50%,
    rgba(143, 129, 168, 1) 70%,
    rgba(150, 92, 146, 1) 80%,
    rgba(100, 28, 120, 1) 100%,);


    --najs-gradient-5:linear-gradient(
      90deg,
      rgba(205, 91, 49, 0.7) 0%,
      rgba(197, 17, 110, 0.7) 100%
    ),
    linear-gradient(
      0deg,
      rgba(242, 242, 242, 1) 0%,
      rgba(242, 242, 242, 1) 100%
    );


--najs-gradient-6: linear-gradient(68deg,
rgba(202, 74, 81, 1) 0%,
rgba(211, 114, 84, 1) 11%,
rgba(222, 152, 81, 1) 19%,
rgba(232, 193, 68, 1) 28%,
rgba(228, 211, 61, 1) 35%,
rgba(218, 214, 65, 1) 41%,
rgba(198, 210, 83, 1) 48%,
rgba(170, 199, 114, 1) 54%,
rgba(145, 191, 148, 1) 60%,
rgba(133, 187, 169, 1) 66%,
rgba(128, 179, 183, 1) 72%,
rgba(133, 163, 184, 1) 80%,
rgba(143, 129, 168, 1) 86%,
rgba(150, 92, 146, 1) 93%,
rgba(156, 57, 128, 1) 100%);


--najs-gradient-10: linear-gradient(54deg,
rgba(204, 92, 30, 1) 0%,
rgba(225, 158, 34, 1) 23%,
rgba(235, 217, 52, 1) 41%,
rgba(172, 201, 131, 1) 62%,
rgba(152, 191, 185, 1) 81%,
rgba(196, 2, 109, 1) 100%) 1;


--najs-gradient-11:#8193A4;


   --border-radius: 100vw;
    --border-radius-2: 0.42vw;
    --background-krata: url(img/krata_background.svg);
    --color-nag-3: white;
    --color-white-black: white;
    --color-black-white: black;
    --color-white-gray: white;

    --najs-gradient-8: linear-gradient(
272deg,
rgba(255, 246, 251, 1) 0%,
rgba(246, 248, 255, 1) 100%
);


--display: flex;
--display-2: none;
--border-solid-black: 2px solid transparent;
--color-transparent-black: transparent;
--background-transparent-white: linear-gradient(68deg,
rgba(202, 74, 81, 1) 0%,
rgba(211, 114, 84, 1) 11%,
rgba(222, 152, 81, 1) 19%,
rgba(232, 193, 68, 1) 28%,
rgba(228, 211, 61, 1) 35%,
rgba(218, 214, 65, 1) 41%,
rgba(198, 210, 83, 1) 48%,
rgba(170, 199, 114, 1) 54%,
rgba(145, 191, 148, 1) 60%,
rgba(133, 187, 169, 1) 66%,
rgba(128, 179, 183, 1) 72%,
rgba(133, 163, 184, 1) 80%,
rgba(143, 129, 168, 1) 86%,
rgba(150, 92, 146, 1) 93%,
rgba(156, 57, 128, 1) 100%);


--opacity: 0;
--padding: 0;
--background-clip:text;
--box-shadow:0.42vw -0.36vw 0vw black;
--najs-color-1:rgba(170, 199, 114, 1);
--najs-color-2:rgba(133, 187, 169, 1);
--najs-color-3:rgba(143, 129, 168, 1);
--najs-color-4:rgba(156, 57, 128, 1);

--najs-gradient-7: linear-gradient(
90deg,
rgba(235, 217, 52, 1) 0%,
rgba(172, 201, 131, 1) 100%
),
linear-gradient(
0deg,
rgba(242, 242, 242, 1) 0%,
rgba(242, 242, 242, 1) 100%
);
--border-radius-3: 0;
--border-radius-4: 0;

--accent-color: rgba(170, 199, 114, 1);
--accent-color-2: white;
--autofill-color: rgba(156, 57, 128, 1);


--cursor: default;
--cursor-pointer: pointer;
--cursor-grab: grab;
--cursor-grabbing: grab;

}


/* Ciemny motyw */
.biw-mode {
--najs-gradient-5: #F1F1F1;
--najs-gradient: #121212;
--border-radius: 100vw;
--border-radius-2: 0.73vw;
--border-radius-4: 3.73vw;
--background-krata: none;
--najs-gradient-6: #F1F1F1;
--color-nag-3: #7F7F7F;
--najs-gradient-7: none;
--color-white-gray: #A5A8B1;
--najs-gradient-10: #F1F1F1;
--display: none;
--border-solid-black: 1px solid black;
--color-transparent-black:black;
--background-transparent-white: white;
--opacity: 1;
--padding: 0.78vw;
 --background-clip:none;
 --box-shadow:none;
 --color-black-white: white;
 --color-white-black: black;
 --najs-gradient-1: white;
 --najs-gradient-2: white;
 --najs-gradient-3: white;
 --najs-gradient-4: white;
 --najs-color-1:white;
 --najs-color-2:white;
 --najs-color-3:white;
 --najs-color-4:white;
 --najs-gradient-11:black;
 --najs-gradient-8: #F1F1F1;
 --border-radius-3: 0 0 0.73vw 0.73vw;
 --display-2: flex;

  --accent-color: black;
  --accent-color-2: white;

  --autofill-color: black;

  --cursor: default;
  --cursor-pointer: pointer;
  --cursor-grab: grab;
  --cursor-grabbing: grab;

}



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

  @import url("https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css");
  * {
    -webkit-font-smoothing: antialiased;
    box-sizing: border-box;
  }


  *::selection {
    background: #8193A4;
    color: #1E2832;
  }

  html,
  body {
    margin: 0vw;
    overflow-x: hidden;
    cursor: var(--cursor) !important;
    scroll-behavior: smooth;
    background-color: #000000b2;
    transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out, border-radius 0.3s ease-in-out;
  }

  /* a blue color as a generic focus style */
  button:focus-visible {
    outline: 0.1vw solid #4a90e2 !important;
    outline: -webkit-focus-ring-color auto 0.26vw !important;
  }
  a {
    text-decoration: none;
    color: unset;
    cursor: var(--cursor-pointer) !important;
  }
  
h1, h2, h3, h4, h5, h6 {
    all:unset;
  }

.blue-color{
  color:#8193A4 !important;
  font-weight: 600;
}

.span a {
  cursor: var(--cursor-pointer);
}

    .navbar {
        display: flex;
        flex-direction: column;
        height: 2.6vw;
        align-items: center;
        position: relative;
        background: #4c657d8c;
        background-size: cover;
        background-position: 50% 50%;
        overflow-x: hidden;
        width: 100%;
      }

      .navbar-mobile,.navbar-mobile-more {
        display: none; /* domyślnie ukryty */
      }

      

      .logo-najs{
        width: 4vw;
      }

      #bg-video {
        position: fixed;
        top: 0;
        left: 0;
        min-width: 100%;
        min-height: 100%;
        object-fit: cover;
        z-index: -1;
        opacity: 1;
      }
      
      
      .navbar .banner {
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
        align-self: stretch;
        overflow-x: hidden;
        width: 100%;
        flex: 0 0 auto;
        background-size: cover;
        background-position: 50% 50%;
      }
      
      .navbar .container {
        display: flex;
            height: 2.6vw;
            align-items: center;
            gap: 0.83vw;
            position: relative;
            align-self: stretch;
            width: 100%;
            overflow-x: hidden;
            justify-content: flex-start;
            flex-wrap: nowrap;
            flex-direction: row;
        
      }
      
      .navbar .content {
        display: flex;
        justify-content: flex-start;
        gap: 1.25vw;
        padding: 0;
        flex: 1;
        flex-grow: 1;
        margin-top: -0.16vw;
        margin-bottom: -0.16vw;
        align-items: center;
        width: 100%;
        position: relative;
      }
      
      .navbar .div {
        display: inline-flex;
        gap: 0.83vw;
        flex: 0 0 auto;
        align-items: center;
        position: relative;
        transition: transform 0.5s ease;
        flex-shrink: 0;
      }
      
      .navbar .shape {
        position: relative;
        width: 1.67vw;
        height: 1.67vw;
      }
      
      .navbar .layer {
        position: relative;
        width: 1.35vw;
        height: 1.41vw;
        top: 0.1vw;
        left: 0.16vw;
      }
      
      .navbar .element {
        position: absolute;
        width: 1.35vw;
        height: 1.41vw;
        top: 2516.35vw;
        left: -2999.53vw;
      }
      
      .navbar .heading-wrapper {
        display: inline-flex;
        flex-direction: column;
        align-items: flex-start;
        position: relative;
        flex: 0 0 auto;
      }
      
      .navbar .heading {
        position: relative;
        width: fit-content;
        margin-top: -0.05vw;
        font-family: "Roboto Mono", monospace;, Helvetica;
        font-weight: 400;
        color: #D9D9DA;
        font-size: 1vw;
        letter-spacing: 0;
        line-height: 1.17vw;
        white-space: nowrap;
        margin: 0;
        text-transform: uppercase;
      }
      
      .navbar .layer-x {
        position: relative;
        width: 1.35vw;
        height: 1.41vw;
        top: 0.1vw;
        left: 0.16vw;
        background-image: url(img/Y2K-shape/Y2K-shape-38.svg);
        background-size: 100% 100%;
      }
      
      .navbar .text-wrapper {
        position: relative;
        width: fit-content;
        font-family: "Roboto Mono", monospace;, Helvetica;
        font-weight: 400;
        color: var(--color-schemes-color-scheme-2-background);
        font-size: 0.73vw;
        letter-spacing: 0;
        line-height: 1.17vw;
        white-space: nowrap;
      }
      
      .navbar .layer-2 {
        position: relative;
        width: 1.35vw;
        height: 1.41vw;
        top: 0.1vw;
        left: 0.16vw;
        background-image: url(img/Y2K-shape/Y2K-shape-38.svg);
        background-size: 100% 100%;
      }
      
      .navbar .content-wrapper {
        display: inline-flex;
        gap: 0.83vw;
        flex: 0 0 auto;
        align-items: center;
        position: relative;
      }
      
      .navbar .layer-3 {
        position: relative;
        width: 1.35vw;
        height: 1.41vw;
        top: 0.1vw;
        left: 0.16vw;
        background-image: url(img/Y2K-shape/Y2K-shape-38.svg);
        background-size: 100% 100%;
      }
      
      .navbar .img {
        position: relative;
        width: 1.36vw;
        height: 1.41vw;
      }
      
      .navbar .content-2 {
        display: inline-flex;
        gap: 0.83vw;
        flex: 0 0 auto;
        margin-right: -15.57vw;
        align-items: center;
        position: relative;
      }
      
      .navbar .element-2 {
        position: absolute;
        width: 1.35vw;
        height: 1.41vw;
        top: 2516.35vw;
        left: -3118.44vw;
      }
      

      .header {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1.56vw;
        position: relative;
        z-index: 9999999;
        transition: transform 0.3s ease-in-out;
        background-color:rgba(255, 255, 255, 0);
      }
      
      .header.hide {
        transform: translateY(-100%);
      }
      
      .header.show {
        transform: translateY(0);
      }

      .header .frame {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 1.56vw;
        position: relative;
        align-self: stretch;
        width: 100%;
        flex: 0 0 auto;
        background-color:rgba(255, 255, 255, 0);
      }
      
      .header .div {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2.08vw;
        position: relative;
        align-self: stretch;
        width: 100%;
        flex: 0 0 auto;
        background-color:rgba(255, 255, 255, 0);
      }
      
      .header .content {
        display: flex
        ;
        height: 5.5vw;
            align-items: center;
            justify-content: space-between;
            position: relative;
            align-self: stretch;
            width: 100%;
            background: none;
            backdrop-filter: blur(15px) saturate(200%);
            -webkit-backdrop-filter: blur(15px) saturate(200%);
            flex-direction: row;
            flex-wrap: nowrap;
            padding: 0 3vw;
      }
      



      .header .najs-logo-final-wrapper {
        display: inline-flex;
        align-items: center;
        gap: 1.25vw;
        position: relative;
        flex: 0 0 auto;
      }
      
      .header .najs-logo-final {
        position: relative;
        width: 8.18vw;
        height: 3.54vw;
      }
      

      
      .header .overlap-group {
        position: absolute;
        width: 3.49vw;
        height: 0.73vw;
        top: 2.45vw;
        left: 0.47vw;
        background-image: url(./img/vector-3.svg);
        background-size: 100% 100%;
      }
      
      .header .group {
        position: absolute;
        width: 2.86vw;
        height: 0.47vw;
        top: 0.16vw;
        left: 0.31vw;
      }
      
      .header .frame-2 {
        display: flex;
        width: 35vw;
        align-items: center;
        justify-content: space-between;
        padding: 0vw 0.52vw 0vw 0vw;
        position: relative;
      }
      

      .form-policy input[type="checkbox"] {
  accent-color: #1E2832; /* dowolny kolor np. #e91e63, gold, etc. */
}

input[type="file"]::file-selector-button {
    all: unset;
    color: rgba(255, 255, 255, 0.60);
    font-size: 0.94vw;
    cursor: pointer;
    transition: all 0.2s ease;
    background: #1E2832;
    font-family: "Roboto Mono", monospace;
    font-weight: 400;
    text-transform: uppercase;

    padding: 0.52vw;
    border-radius: 0.42vw;
    border: 0;
    transition: border-color 0.3s;

}

.form-file input{
      color: #8193A4;
    font-size: 0.94vw;
    cursor: pointer;
    transition: all 0.2s ease;
    background: #1E2832;
    font-family: "Roboto Mono", monospace;
    font-weight: 400;
    text-transform: uppercase;

    padding: 0.52vw;
    border-radius: 0.42vw;
    border: 0;
    transition: border-color 0.3s;
}


      .header .column {
        display: inline-flex;
        align-items: center;
        gap: 1.67vw;
        position: relative;
        flex: 0 0 auto;
      }
      
      .header .link-text {
        position: relative;
        width: fit-content;
        margin-top: -0.05vw;
        font-family: "Roboto Mono", monospace;, Helvetica;
        font-weight: 400;
        color: #D9D9DA;
        font-size: 0.94vw;
        letter-spacing: 0;
        line-height: 1.5vw;
        white-space: nowrap;
        cursor: var(--cursor-pointer) !important;
      }
      
      .header .clip-path-group{
        cursor: var(--cursor-pointer) !important;
      }
      
      .header .nav-link-dropdown {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.21vw;
        position: relative;
        flex: 0 0 auto;
      }
      
      .header .chevron-down {
        position: relative;
        width: 1.25vw;
        height: 1.25vw;
      }
      

      .header .img {
        position: relative;
        width: 5.87vw;
        height: 0.81vw;
        margin-bottom: -0.03vw;
        object-fit: cover;
      }
      
      .header .tryb-izolacji-wrapper {
        position: relative;
        width: 1.61vw;
        height: 1.09vw;
      }
      
      .header .tryb-izolacji {
        position: relative;
        width: 1.61vw;
        height: 1.09vw;
        overflow: hidden;
        background-image: url(./img/group.png);
        background-size: 100% 100%;
      }
      
      .header .vector {
        position: absolute;
        width: 1.35vw;
        height: 0.57vw;
        top: 2512.08vw;
        left: -3103.96vw;
      }
      
      .header .column-2 {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        position: relative;
        align-self: stretch;
        width: 100%;
        flex: 0 0 auto;
      }
      
      .header .content-2 {
        display: inline-flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.52vw;
        position: relative;
        flex: 0 0 auto;
      }
      
      .header .tagline-wrapper {
        display: inline-flex;
        align-items: center;
        position: relative;
        flex: 0 0 auto;
      }
      
      .header .img-wrapper {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.52vw;
        padding: 0vw 0.26vw;
        position: relative;
        flex: 0 0 auto;
        background: var(--najs-gradient-5);
        background-color: var(--primitives-color-neutral-lightest);
      }
      
      .header .button-2 {
        position: relative;
        width: 8.95vw;
        height: 0.91vw;
        object-fit: cover;
      }
      
      .header .frame-4 {
        display: inline-flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.26vw;
        position: relative;
        flex: 0 0 auto;
      }
      
      .header .frame-5 {
        display: flex;
        align-items: center;
        gap: 1.56vw;
        position: relative;
        align-self: stretch;
        width: 100%;
        flex: 0 0 auto;
      }
      
      .header .medium-length-hero {
        position: relative;
        width: fit-content;
        font-family: "Roboto Mono", monospace;, Helvetica;
        font-weight: 400;
        color: var(--color-schemes-color-scheme-2-background);
        font-size: 5.21vw;
        letter-spacing: 0.05vw;
        line-height: 6.25vw;
        white-space: nowrap;
      }
      
      .header .shape {
        position: relative;
        width: 7.08vw;
        height: 6.88vw;
      }
      
      .header .layer {
        position: relative;
        width: 6.35vw;
        height: 5.47vw;
        top: 0.73vw;
        left: 0.36vw;
        background-image: url(./img/2405256908304.png);
        background-size: 100% 100%;
      }
      
      .header .text-wrapper {
        position: relative;
        width: fit-content;
        font-family: "Roboto Mono", monospace;, Helvetica;
        font-weight: 400;
        color: #222221;
        font-size: 5.21vw;
        letter-spacing: 0.05vw;
        line-height: 6.25vw;
        white-space: nowrap;
      }
      
      .header .yk-shape {
        position: relative;
        width: 6.3vw;
        height: 6.3vw;
      }
      
      .header .layer-x {
        position: relative;
        width: 5.63vw;
        height: 5.63vw;
        top: 0.36vw;
        left: 0.36vw;
        background-image: url(./img/2405256953664-2.png);
        background-size: 100% 100%;
      }
      
      .header .frame-6 {
        display: inline-flex;
        align-items: center;
        gap: 1.56vw;
        position: relative;
        flex: 0 0 auto;
      }
      
      .header .medium-length-hero-2 {
        position: relative;
        flex: 0 0 auto;
      }
      
      .header .medium-length-hero-3 {
        position: relative;
        width: fit-content;
        margin-top: -0.05vw;
        font-family: "Roboto Mono", monospace;, Helvetica;
        font-weight: 400;
        color: var(--color-schemes-color-scheme-2-background);
        font-size: 5.21vw;
        letter-spacing: 0.05vw;
        line-height: 6.25vw;
        white-space: nowrap;
      }
      
      .header .frame-7 {
        display: flex;
        flex-direction: column;
        width: 29.48vw;
        align-items: flex-end;
        gap: 1.56vw;
        position: relative;
      }
      
      .header .div-wrapper {
        display: flex;
        width: 31.88vw;
        align-items: flex-start;
        justify-content: space-around;
        gap: 2.08vw;
        position: relative;
        flex: 0 0 auto;
        margin-left: -2.4vw;
      }
      
      .header .frame-8 {
        display: flex;
        height: 7.14vw;
        align-items: center;
        justify-content: space-between;
        padding: 0vw 2.6vw;
        position: relative;
        flex: 1;
        flex-grow: 1;
        background: linear-gradient(
          272deg,
          rgba(255, 246, 251, 1) 0%,
          rgba(246, 248, 255, 1) 100%
        );
        background-color: var(--color-schemes-color-scheme-2-text);
      }
      
      .header .frame-9 {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 1.56vw;
        position: relative;
        flex: 0 0 auto;
        border-radius: 26.04vw;
      }
      
      .header .group-2 {
        position: relative;
        width: 10.82vw;
        height: 3.98vw;
      }
      
      .header .overlap-group-2 {
        position: relative;
        width: 10.83vw;
        height: 3.96vw;
      }
      
      .header .avatar-image {
        position: absolute;
        width: 3.96vw;
        height: 3.96vw;
        top: 0;
        left: 0;
      }
      
      .header .avatar-image-2 {
        left: 1.46vw;
        position: absolute;
        width: 3.96vw;
        height: 3.96vw;
        top: 0;
      }
      
      .header .avatar-image-3 {
        left: 3.44vw;
        position: absolute;
        width: 3.96vw;
        height: 3.96vw;
        top: 0;
      }
      
      .header .avatar-image-4 {
        left: 5.31vw;
        position: absolute;
        width: 3.96vw;
        height: 3.96vw;
        top: 0;
      }
      
      .header .avatar-image-5 {
        left: 6.88vw;
        position: absolute;
        width: 3.96vw;
        height: 3.96vw;
        top: 0;
      }
      
      .header .content-3 {
        display: flex;
        flex-direction: column;
        width: 5.47vw;
        align-items: flex-start;
        position: relative;
      }
      
      .header .text {
        position: relative;
        width: fit-content;
        margin-top: -0.05vw;
        font-family: "Roboto Mono", monospace;, Helvetica;
        font-weight: 400;
        color: var(--color-schemes-color-scheme-2-foreground);
        font-size: 2.5vw;
        text-align: right;
        letter-spacing: 0;
        line-height: 3vw;
        white-space: nowrap;
      }
      
      .header .text-2 {
        width: 5.47vw;
        position: relative;
        font-family: "Roboto Mono", monospace;, Helvetica;
        font-weight: 400;
        color: var(--color-schemes-color-scheme-2-foreground);
        font-size: 0.83vw;
        letter-spacing: 0;
        line-height: 1.33vw;
      }
      
      .header .content-4 {
        display: flex;
        flex-direction: column;
        width: 5.47vw;
        align-items: center;
        justify-content: center;
        position: relative;
      }
      
      .header .text-3 {
        align-self: stretch;
        position: relative;
        font-family: "Roboto Mono", monospace;, Helvetica;
        font-weight: 400;
        color: var(--color-schemes-color-scheme-2-foreground);
        font-size: 0.83vw;
        letter-spacing: 0;
        line-height: 1.33vw;
      }
      
      .header .frame-10 {
        display: flex;
        flex-wrap: wrap;
        width: 37.29vw;
        align-items: flex-start;
        justify-content: flex-end;
        gap: 0.52vw 0.52vw;
        position: relative;
        flex: 0 0 auto;
        margin-left: -7.81vw;
      }
      
      .header .group-3 {
        position: relative;
        width: 5.68vw;
        height: 1.67vw;
        backdrop-filter: blur(0.1vw) brightness(100%);
        -webkit-backdrop-filter: blur(0.1vw) brightness(100%);
      }
      
      .header .button-3 {
        display: inline-flex;
        height: 1.77vw;
        align-items: center;
        justify-content: center;
        gap: 0.42vw;
        padding: 0.63vw 1.25vw;
        position: relative;
        top: -0.05vw;
        left: -0.05vw;
        border: 2px solid;
        var(--color-white-gray);
        backdrop-filter: blur(0.1vw) brightness(100%);
        -webkit-backdrop-filter: blur(0.1vw) brightness(100%);
        border-image: var(--najs-gradient-7);
      }
      
      .header .vector-2 {
        position: relative;
        width: 1.04vw;
        height: 1.04vw;
        margin-top: -0.31vw;
        margin-bottom: -0.21vw;
      }
      
      .header .button-4 {
        position: relative;
        flex: 0 0 auto;
        margin-top: -0.07vw;
        margin-bottom: -0.01vw;
      }
      
      .header .group-4 {
        position: relative;
        width: 9.53vw;
        height: 1.67vw;
        backdrop-filter: blur(0.1vw) brightness(100%);
        -webkit-backdrop-filter: blur(0.1vw) brightness(100%);
      }
      
      .header .button-5 {
        display: inline-flex;
        height: 1.77vw;
        align-items: center;
        justify-content: center;
        gap: 0.42vw;
        padding: 0.63vw 1.25vw;
        position: relative;
        flex: 0 0 auto;
        margin-top: -0.05vw;
        margin-right: -0.05vw;
        border: 2px solid;
        var(--color-white-gray);
        backdrop-filter: blur(0.1vw) brightness(100%);
        -webkit-backdrop-filter: blur(0.1vw) brightness(100%);
        border-image: var(--najs-gradient-7);
      }
      
      .header .layer-2 {
        position: relative;
        width: 1.15vw;
        height: 1.04vw;
        margin-top: -0.31vw;
        margin-bottom: -0.21vw;
      }
      
      .header .button-6 {
        display: inline-flex;
        height: 1.77vw;
        align-items: center;
        justify-content: center;
        gap: 0.42vw;
        padding: 0.63vw 1.25vw;
        position: relative;
        flex: 0 0 auto;
        border: 2px solid;
        var(--color-white-gray);
        backdrop-filter: blur(0.1vw) brightness(100%);
        -webkit-backdrop-filter: blur(0.1vw) brightness(100%);
        border-image: var(--najs-gradient-7);
      }
      
      .header .layer-3 {
        position: relative;
        width: 1.09vw;
        height: 1.04vw;
        margin-top: -0.31vw;
        margin-bottom: -0.21vw;
        background-image: url(./img/2405256931248.png);
        background-size: 100% 100%;
      }
      
      .header .group-5 {
        position: relative;
        width: 9.17vw;
        height: 1.67vw;
        backdrop-filter: blur(0.1vw) brightness(100%);
        -webkit-backdrop-filter: blur(0.1vw) brightness(100%);
      }
      
      .header .group-6 {
        position: relative;
        width: 7.42vw;
        height: 1.67vw;
        backdrop-filter: blur(0.1vw) brightness(100%);
        -webkit-backdrop-filter: blur(0.1vw) brightness(100%);
      }
      
      .header .layer-4 {
        position: relative;
        width: 1.53vw;
        height: 1.04vw;
        margin-top: -0.31vw;
        margin-bottom: -0.21vw;
        background-image: url(./img/2405256946848.png);
        background-size: 100% 100%;
      }
      
      .header .group-7 {
        position: relative;
        width: 7.6vw;
        height: 1.67vw;
        backdrop-filter: blur(0.1vw) brightness(100%);
        -webkit-backdrop-filter: blur(0.1vw) brightness(100%);
      }
      
      .header .button-7 {
        position: relative;
        flex: 0 0 auto;
        margin-top: -0.07vw;
        margin-bottom: -0.16vw;
      }
      
      .header .group-8 {
        position: relative;
        width: 5.63vw;
        height: 1.67vw;
        backdrop-filter: blur(0.1vw) brightness(100%);
        -webkit-backdrop-filter: blur(0.1vw) brightness(100%);
      }
      
      .header .layer-5 {
        position: relative;
        width: 1.04vw;
        height: 1.04vw;
        margin-top: -0.31vw;
        margin-bottom: -0.21vw;
        background-image: url(./img/2405256953664.png);
        background-size: 100% 100%;
      }
      
      .header .group-9 {
        position: relative;
        width: 10.86vw;
        height: 1.67vw;
        backdrop-filter: blur(0.1vw) brightness(100%);
        -webkit-backdrop-filter: blur(0.1vw) brightness(100%);
      }
      
      .header .layer-6 {
        position: relative;
        width: 1.28vw;
        height: 1.04vw;
        margin-top: -0.31vw;
        margin-bottom: -0.21vw;
        background-image: url(./img/2405256915888.png);
        background-size: 100% 100%;
      }
      
      .header .group-10 {
        position: relative;
        width: 98.18vw;
        height: 56.41vw;
      }
      


      .main {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 1.56vw;
        position: relative;
        width:100%;
        margin-top: 3vw;
      }
      
      .main .column {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        position: relative;
        align-self: stretch;
        width: 100%;
        flex: 0 0 auto;
      }
      
      .main .content {
        display: inline-flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.52vw;
        position: relative;
        flex: 0 0 auto;
      }
      
      .main .tagline-wrapper{
        display: inline-flex;
        align-items: center;
        position: relative;
        flex: 0 0 auto;
      }

      .section-portfolio-project .tagline-wrapper {
        display: inline-flex
        ;
            align-items: flex-start;
            position: relative;
            flex: 0 0 auto;
            flex-direction: column;
            align-content: flex-start;
            justify-content: flex-start;
            flex-wrap: nowrap;
    }
      
      .main .button-wrapper,
      .section-contact .button-wrapper,
      .section-portfolio-project .button-wrapper,
      .section-content-wp .button-wrapper {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.52vw;
        padding: 0.5vw 1vw;
        position: relative;
        flex: 0 0 auto;
        background: var(--najs-gradient-11);
        color: var(--color-nag-3);
        font-size: 1.25vw;
        font-family: "Roboto Mono", monospace;;
        font-weight: 400;
        text-transform: uppercase;
        line-height: 1.88vw;
        word-wrap: break-word;
        border-radius: var(--border-radius);
      }
      
      .main .button {
        position: relative;
        width: 8.95vw;
        height: 0.91vw;
        object-fit: cover;
      }
      
      .main .div {
        display: inline-flex;
        flex-direction: column;
        align-items: flex-start;
        position: relative;
        flex: 0 0 auto;
      }
      
      .main .div-2 {
        display: flex;
        align-items: center;
        gap: 1.56vw;
        position: relative;
        align-self: stretch;
        width: 100%;
        flex: 0 0 auto;
      }
      
      .main .medium-length-hero {
        position: relative;
        width: fit-content;
        font-family: "Roboto Mono", monospace;, Helvetica;
        font-weight: 400;
        color: #8193A4;
        font-size: 3.5vw;
        letter-spacing: 0.05vw;
        white-space: nowrap;
        text-transform: uppercase;
      }

      .footer-main .main .column {
        display: flex
    ;
        align-items: center;
        justify-content: space-between;
        position: relative;
        align-self: stretch;
        width: 100%;
        flex: 0 0 auto;
    }

    .footer-main  .main .medium-length-hero {
      position: relative;
      width: fit-content;
      font-family: "Roboto Mono", monospace;
      font-weight: 400;
      color: #8193A4;
      font-size: 2.5vw;
      letter-spacing: 0.05vw;
      white-space: nowrap;
      text-transform: uppercase;
  }
      
      .main .shape {
        position: relative;
        width: 7.08vw;
        height: 6.88vw;
      }
      
      .main .layer {
        position: relative;
        width: 6.35vw;
        height: 5.47vw;
        top: 0.73vw;
        left: 0.36vw;
        background-image: url(./img/2405256908304.png);
        background-size: 100% 100%;
      }
      
      .main .text-wrapper {
        position: relative;
        width: fit-content;
        font-family: "Roboto Mono", monospace;, Helvetica;
        font-weight: 400;
        color: #222221;
        font-size: 5.21vw;
        letter-spacing: 0.05vw;
        line-height: 6.25vw;
        white-space: nowrap;
      }
      
      .main .yk-shape {
        position: relative;
        width: 6.3vw;
        height: 6.3vw;
      }
      
      .main .layer-x {
        position: relative;
        width: 5.63vw;
        height: 5.63vw;
        top: 0.36vw;
        left: 0.36vw;
        background-image: url(./img/2405256953664-2.png);
        background-size: 100% 100%;
      }
      
      .main .div-3 {
        display: inline-flex;
        align-items: center;
        gap: 2.5vw;
        position: relative;
        flex: 0 0 auto;
      }
      
      .main .img {
        position: relative;
        flex: 0 0 auto;
      }
      
      .main .medium-length-hero-2 {
        position: relative;
        width: fit-content;
        margin-top: -0.05vw;
        font-family: "Roboto Mono", monospace;, Helvetica;
        font-weight: 400;
        color: #8193A4;
        font-size:3.5vw;
        letter-spacing: 0.05vw;
        white-space: nowrap;
      }

   
      
      .main .div-4 {
        display: flex;
        flex-direction: column;
        width: 29.48vw;
        align-items: flex-end;
        gap: 1.56vw;
        position: relative;
      }
      
      .main .frame-wrapper {
        display: flex;
        width: 31.88vw;
        align-items: flex-start;
        justify-content: space-around;
        gap: 2.08vw;
        position: relative;
        flex: 0 0 auto;
      }
      
      .main .div-5 {
        display: flex;
        height: 7.14vw;
        align-items: center;
        justify-content: space-between;
        padding: 0vw 2.6vw;
        position: relative;
        flex: 1;
        flex-grow: 1;
        background: var(--najs-gradient-8);
        border-radius: var(--border-radius);
        background-color: var(--najs-gradient-8);
      }
      
      .main .div-6 {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 1.56vw;
        position: relative;
        flex: 0 0 auto;
        border-radius: 26.04vw;
      }
      
      .main .group {
        position: relative;
        width: 10.82vw;
        height: 3.98vw;
      }
      
      .main .overlap-group {
        position: relative;
        width: 10.83vw;
        height: 3.96vw;
      }
      
      .main .avatar-image {
        position: absolute;
        width: 3.96vw;
        height: 3.96vw;
        top: 0;
        left: 0;
      }
      
      .main .avatar-image-2 {
        left: 1.46vw;
        position: absolute;
        width: 3.96vw;
        height: 3.96vw;
        top: 0;
      }
      
      .main .avatar-image-3 {
        left: 3.44vw;
        position: absolute;
        width: 3.96vw;
        height: 3.96vw;
        top: 0;
      }
      
      .main .avatar-image-4 {
        left: 5.31vw;
        position: absolute;
        width: 3.96vw;
        height: 3.96vw;
        top: 0;
      }
      
      .main .avatar-image-5 {
        left: 6.88vw;
        position: absolute;
        width: 3.96vw;
        height: 3.96vw;
        top: 0;
      }
      
      .main .content-2 {
        align-items: flex-start;
        display: flex;
        flex-direction: column;
        width: 5.47vw;
        position: relative;
      }
      .main .text{
        width: 25.94vw;
        color:  rgba(255, 255, 255, 0.60);
        font-size: 1.04vw;
        font-family: Roboto Mono;
        font-weight: 400;
        text-transform: uppercase;
        line-height: 1.67vw;
        word-wrap: break-word;
      }

      .main .buttons{
        justify-content: flex-start;
        align-items: center;
        gap: 0.83vw;
        display: inline-flex
    ;
        flex-direction: row;
        flex-wrap: nowrap;
      }

      .main .buttons .frame-wrapper{
        width:8.33vw;
      }
      
      .main  .text-2 {
        width: 5.47vw;
        position: relative;
        font-family: "Roboto Mono", monospace;, Helvetica;
        font-weight: 400;
        color: var(--color-schemes-color-scheme-2-foreground);
        font-size: 0.83vw;
        letter-spacing: 0;
        line-height: 1.33vw;
      }
      
      .main  .content-3 {
        align-items: center;
        justify-content: center;
        display: flex;
        flex-direction: column;
        width: 5.47vw;
        position: relative;
      }
      
      .main .text-3 {
        align-self: stretch;
        position: relative;
        font-family: "Roboto Mono", monospace;, Helvetica;
        font-weight: 400;
        color: var(--color-schemes-color-scheme-2-foreground);
        font-size: 0.83vw;
        letter-spacing: 0;
        line-height: 1.33vw;
      }
      
      .main .div-7 {
        display: flex;
        flex-wrap: wrap;
        width: 37.29vw;
        align-items: flex-start;
        justify-content: flex-end;
        gap: 0.52vw 0.52vw;
        position: relative;
        flex: 0 0 auto;
        margin-left: -7.81vw;
      }
      
      .main .div-wrapper {
        position: relative;
        height: 1.67vw;
        backdrop-filter: blur(0.1vw) brightness(100%);
        -webkit-backdrop-filter: blur(0.1vw) brightness(100%);
      }
      
      .main .button-2 {
        display: inline-flex;
        height: 1.77vw;
        align-items: center;
        justify-content: center;
        gap: 0.42vw;
        padding: 0.63vw 1.25vw;
        position: relative;
        top: -0.05vw;
        left: -0.05vw;
        border: 2px solid;
        border-color: var(--color-white-gray);
        backdrop-filter: blur(0.1vw) brightness(100%);
        -webkit-backdrop-filter: blur(0.1vw) brightness(100%);
        border-image: var(--najs-gradient-10);
          color: var(--Color-Scheme-2-Background, #191919);
        font-size: 0.83vw;
        font-family: "Roboto Mono", monospace;;
        font-weight: 400;
        text-transform: uppercase;
        line-height: 1.25vw;
        word-wrap: break-word;
        border-radius: var(--border-radius);
      }
      
      .main .vector {
        position: relative;
        width: 1.04vw;
        height: 1.04vw;
        margin-top: -0.31vw;
        margin-bottom: -0.21vw;
      }
      
      .main .button-3 {
        position: relative;
        flex: 0 0 auto;
        margin-top: -0.07vw;
        margin-bottom: -0.01vw;
      }
      
      .main .group-2 {
        position: relative;
        width: 9.53vw;
        height: 1.67vw;
        backdrop-filter: blur(0.1vw) brightness(100%);
        -webkit-backdrop-filter: blur(0.1vw) brightness(100%);
      }
      
      .main .button-4 {
        display: inline-flex;
        height: 1.77vw;
        align-items: center;
        justify-content: center;
        gap: 0.42vw;
        padding: 0.63vw 1.25vw;
        position: relative;
        flex: 0 0 auto;
        margin-top: -0.05vw;
        margin-right: -0.05vw;
        border: 2px solid;
        var(--color-white-gray);
        backdrop-filter: blur(0.1vw) brightness(100%);
        -webkit-backdrop-filter: blur(0.1vw) brightness(100%);
        border-image: var(--najs-gradient-7);
      }
      
      .main  .layer-2 {
        position: relative;
        width: 1.15vw;
        height: 1.04vw;
        margin-top: -0.31vw;
        margin-bottom: -0.21vw;
      }
      
      .main  .button-5 {
        display: inline-flex;
        height: 1.77vw;
        align-items: center;
        justify-content: center;
        gap: 0.42vw;
        padding: 0.63vw 1.25vw;
        position: relative;
        flex: 0 0 auto;
        border: 2px solid;
        border-color: var(--color-white-gray);
        backdrop-filter: blur(0.1vw) brightness(100%);
        -webkit-backdrop-filter: blur(0.1vw) brightness(100%);
        border-image: var(--najs-gradient-7);
      }
      
      .main  .layer-3 {
        position: relative;
        width: 1.09vw;
        height: 1.04vw;
        margin-top: -0.31vw;
        margin-bottom: -0.21vw;
        background-image: url(./img/2405256931248.png);
        background-size: 100% 100%;
      }
      
      .main  .group-3 {
        position: relative;
        width: 9.17vw;
        height: 1.67vw;
        backdrop-filter: blur(0.1vw) brightness(100%);
        -webkit-backdrop-filter: blur(0.1vw) brightness(100%);
      }
      
      .main .group-4 {
        position: relative;
        width: 7.42vw;
        height: 1.67vw;
        backdrop-filter: blur(0.1vw) brightness(100%);
        -webkit-backdrop-filter: blur(0.1vw) brightness(100%);
      }
      
      .main  .layer-4 {
        position: relative;
        width: 1.53vw;
        height: 1.04vw;
        margin-top: -0.31vw;
        margin-bottom: -0.21vw;
        background-image: url(./img/2405256946848.png);
        background-size: 100% 100%;
      }
      
      .main .group-5 {
        position: relative;
        width: 7.6vw;
        height: 1.67vw;
        backdrop-filter: blur(0.1vw) brightness(100%);
        -webkit-backdrop-filter: blur(0.1vw) brightness(100%);
      }
      
      .main  .button-6 {
        position: relative;
        flex: 0 0 auto;
        margin-top: -0.07vw;
        margin-bottom: -0.16vw;
      }
      
      .main  .group-6 {
        position: relative;
        width: 5.63vw;
        height: 1.67vw;
        backdrop-filter: blur(0.1vw) brightness(100%);
        -webkit-backdrop-filter: blur(0.1vw) brightness(100%);
      }
      
      .main  .layer-5 {
        position: relative;
        width: 1.04vw;
        height: 1.04vw;
        margin-top: -0.31vw;
        margin-bottom: -0.21vw;
        background-image: url(./img/2405256953664.png);
        background-size: 100% 100%;
      }
      
      .main .group-7 {
        position: relative;
        width: 10.86vw;
        height: 1.67vw;
        backdrop-filter: blur(0.1vw) brightness(100%);
        -webkit-backdrop-filter: blur(0.1vw) brightness(100%);
      }
      
      .main .layer-6 {
        position: relative;
        width: 1.28vw;
        height: 1.04vw;
        margin-top: -0.31vw;
        margin-bottom: -0.21vw;
        background-image: url(./img/2405256915888.png);
        background-size: 100% 100%;
      }
      
      .main .group-8 {
        position: relative;
        width: 100%;
        height: 56.41vw;
      }
      
      .section-body{
        padding: 0 3vw 3.13vw 3vw;
        display: flex
    ;
        width: 100%;
        flex-direction: column;
        flex-wrap: nowrap;
        align-content: center;
        justify-content: center;
        align-items: center;
      }


      .section-contact {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        gap: 4.17vw;
        padding: 9.38vw 2.94vw 9.38vw 2.78vw;
        position: relative;
        background-color: #ffffff;
        border-radius: 0.73vw;
        overflow: hidden;
        border-top-width: 0.26vw;
        border-top-style: solid;
        border-color: transparent;
      }
      
      .section-contact .group {
        position: relative;
        display: flex
    ;
        height: fit-content;
        box-shadow: .83vw -.83vw 0 #000;
        border: solid 1px #000;
        flex-direction: column;
        flex-wrap: nowrap;
        align-content: center;
        justify-content: center;
        align-items: center;
      }
      
      .section-contact .group::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: var(--background-krata);
        background-size: cover; /* Dopasowanie obrazu do tła */
        opacity: 0.2; /* Ustawiamy przezroczystość obrazu tła */
        z-index: 1; /* Aby pseudo-element nie zakrywał tekstu */
      }
      

      .section-contact .input {
        width: 100%;
        justify-content: center;
        top: 0;
        left: 0vw;
        display: flex
    ;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.42vw;
        z-index: 2;
        height: 2.28vw;
      }
      
      .section-contact .text-area {
        align-items: center;
        justify-content: space-between;
        flex: 0 0 auto;
        background: var(--najs-gradient);
        display: flex
    ;
        padding: 0.63vw;
        position: relative;
        align-self: stretch;
        width: 100%;
        border: 1px solid;
        border-color: #000000;
        height: 2.28vw;
        align-content: center;
        flex-wrap: nowrap;
        flex-direction: row;
      }



      .smiley-faces {
        display: flex
        ;
            flex-direction: row;
            flex-wrap: nowrap;
            align-content: center;
            justify-content: center;
            align-items: center;
      }

      .smiley-faces img{
width: 1.41vw;
height: 1.41vw;
      }
      
      .section-contact .frame {
        display: inline-flex;
        align-items: center;
        gap: 0.42vw;
        position: relative;
        flex: 0 0 auto;
      }
      
      .section-contact .div {
        position: relative;
        width: 1.35vw;
        height: 1.35vw;
        background-color: #ffffff;
        border: 1px solid;
        border-color: #000000;
      }
      
      .section-contact .line {
        position: absolute;
        width: 0.83vw;
        height: 0.1vw;
        top: 0.89vw;
        left: 0.16vw;
      }
      
    
      
      .section-contact .rectangle {
        height: 0.63vw;
        top: 0.26vw;
        position: absolute;
        width: 0.73vw;
        left: 0;
        border: 1pxsolid;
        border-color: #000000;
      }
      
      .section-contact .rectangle-2 {
        height: 0.31vw;
        top: 0;
        position: absolute;
        width: 0.73vw;
        left: 0;
        border: 1px solid;
        border-color: #000000;
      }
      
    
      
      .section-contact .img {
        position: absolute;
        width: 0.68vw;
        height: 0.68vw;
        top: 0;
        left: 0;
      }
      
      .section-contact .section-title {
        display: flex
        ;
            flex-direction: column;
            width: 94.27vw;
            height: fit-content;
            padding: 2.58vw;
            align-items: flex-start;
            justify-content: center;
            gap: 1.56vw;
            top: 5.83vw;
            left: 3.23vw;
        
      }
      
      .section-contact .frame-2 {
        display: flex
        ;
            height: fit-content;
            align-items: flex-start;
            position: relative;
            flex-direction: row;
            flex-wrap: nowrap;
            justify-content: space-between;
            width: 100%;
      }
      
      .section-contact .content {
        display: inline-flex
        ;
            flex-direction: column;
            align-items: flex-start;
            justify-content: space-around;
            gap: .05vw;
            position: relative;
            flex: 0 0 auto;
      }

      #popup-2 .content {
        height: 11.09vw;
      }

      .section-contact .column {
        display: inline-flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 1.25vw;
        position: relative;
        flex: 0 0 auto;
        margin-top: -0.03vw;
        margin-bottom: -0.03vw;
      }
      
      button{
        all:unset;
      }
      
      .section-contact .tagline-wrapper {
        display: inline-flex;
            align-items: flex-start;
            position: relative;
            flex: 0 0 auto;
            flex-direction: column;
            align-content: flex-start;
            flex-wrap: nowrap;
            justify-content: flex-start;
      }
      
      .section-contact .button-wrapper {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.52vw;
        padding: 0vw 0.26vw;
        position: relative;
        flex: 0 0 auto;
        background: var(--najs-gradient-5);
        background-color: var(--primitives-color-neutral-lightest);
      }
      
      .section-contact .button {
        position: relative;
        flex: 0 0 auto;
        object-fit: cover;
      }
      
      .section-contact .lorem-ipsum-dolor-wrapper {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 1.25vw;
        position: relative;
        flex: 1;
        align-self: stretch;
        width: 100%;
        flex-grow: 1;
      }
      
      .section-contact .lorem-ipsum-dolor {
        position: relative;
        width: 27.81vw;
        margin-bottom: -7.4vw;
        margin-right: -2.92vw;
        font-family: "Roboto Mono", monospace;, Helvetica;
        font-weight: 400;
        color: var(--primitives-color-neutral-dark);
        font-size: 1.04vw;
        letter-spacing: 0;
        line-height: 1.67vw;
      }
      
      .section-contact .group-wrapper {
        position: relative;
        width: 51%;
        height: fit-content;
        z-index: 1;
      }
      
      .section-contact .form-wrapper {
        height: fit-content;
      }
      
      .section-contact .form {
        display: flex;
        flex-direction: column;
        width: 44.84vw;
        align-items: flex-end;
        gap: 1.25vw;
        position: relative;
        z-index: 2;
      }
      
      .section-contact .text-area-wrapper {
        justify-content: center;
        position: relative;
        align-self: stretch;
        width: 100%;
        flex: 0 0 auto;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.42vw;
      }
      
      .section-contact .text-area-2 {
        display: flex;
        height: 3.54vw;
        align-items: center;
        padding: 0.63vw;
        position: relative;
        align-self: stretch;
        width: 100%;
        margin-top: -0.1vw;
        margin-bottom: -0.1vw;
        margin-left: -0.1vw;
        margin-right: -0.1vw;
        background-color: var(--primitives-color-white);
        border: 1px solid;
        border-color: #000000;
      }
      
      .section-contact .type-your-message {
        position: relative;
        flex: 1;
        font-family: var(--text-regular-normal-font-family);
        font-weight: var(--text-regular-normal-font-weight);
        color: var(--primitives-color-neutral);
        font-size: var(--text-regular-normal-font-size);
        letter-spacing: var(--text-regular-normal-letter-spacing);
        line-height: var(--text-regular-normal-line-height);
        font-style: var(--text-regular-normal-font-style);
      }
      
      .section-contact .line-2 {
        position: absolute;
        width: 0.16vw;
        height: 0.16vw;
        top: 3.13vw;
        left: 44.64vw;
        object-fit: cover;
      }
      
      .section-contact .line-3 {
        position: absolute;
        width: 0.36vw;
        height: 0.36vw;
        top: 2.92vw;
        left: 44.43vw;
        object-fit: cover;
      }
      
      .section-contact .div-wrapper {
        position: relative;
        align-self: stretch;
        width: 100%;
        flex: 0 0 auto;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.42vw;
      }
      
      .section-contact .type-your-message-2 {
        position: relative;
        flex: 1;
        font-family: var(--text-regular-normal-font-family);
        font-weight: var(--text-regular-normal-font-weight);
        color: var(--primitives-color-neutral);
        font-size: var(--text-regular-normal-font-size);
        letter-spacing: var(--text-regular-normal-letter-spacing);
        line-height: var(--text-regular-normal-line-height);
        font-style: var(--text-regular-normal-font-style);
        background: transparent;
        border: none;
        padding: 0;
      }
      
      .section-contact .input-2 {
        position: relative;
        align-self: stretch;
        width: 100%;
        flex: 0 0 auto;
        background-image: url(./img/input.png);
        background-size: cover;
        background-position: 50% 50%;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.42vw;
      }
      
      .section-contact .text-area-3 {
        height: 12.24vw;
        align-items: flex-start;
        margin-top: -0.1vw;
        margin-bottom: -0.1vw;
        background-color: var(--primitives-color-white);
        display: flex;
        padding: 0.63vw;
        position: relative;
        align-self: stretch;
        width: 100%;
        margin-left: -0.1vw;
        margin-right: -0.1vw;
        border: 1px solid;
        border-color: #000000;
      }
      
      .section-contact .line-4 {
        position: absolute;
        width: 0.16vw;
        height: 0.16vw;
        top: 11.82vw;
        left: 44.64vw;
        object-fit: cover;
      }
      
      .section-contact .line-5 {
        position: absolute;
        width: 0.36vw;
        height: 0.36vw;
        top: 11.61vw;
        left: 44.43vw;
        object-fit: cover;
      }
      
      .section-contact .frame-4 {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        position: relative;
        align-self: stretch;
        width: 100%;
        flex: 0 0 auto;
      }
      
      .section-contact .checkbox {
        display: flex;
        align-items: center;
        gap: 0.42vw;
        padding: 0vw 0vw 0.83vw;
        position: relative;
        align-self: stretch;
        width: 100%;
        flex: 0 0 auto;
      }
      
      .section-contact .checkbox-2 {
        position: relative;
        width: 1.15vw;
        height: 1.15vw;
        margin-left: -0.1vw;
        border: 1px solid;
        border-color: var(--primitives-color-black-dark);
        background-color: var(--primitives-color-neutral-lightest);
      }
      
      .section-contact .label {
        position: relative;
        width: fit-content;
        margin-top: -0.05vw;
        font-family: var(--text-regular-normal-font-family);
        font-weight: var(--text-regular-normal-font-weight);
        color: var(--primitives-color-neutral-darkest);
        font-size: var(--text-regular-normal-font-size);
        letter-spacing: var(--text-regular-normal-letter-spacing);
        line-height: var(--text-regular-normal-line-height);
        white-space: nowrap;
        font-style: var(--text-regular-normal-font-style);
      }
      
      .section-contact .group-2 {
        position: relative;
        width: 7.29vw;
        height: 3.33vw;
      }
      
      .section-contact .group-3 {
        width: 7.29vw;
        height: 3.33vw;
      }
      
      .section-contact .group-4 {
        height: 3.33vw;
      }
      
 
      
   
  
      
      .section-contact .vector {
        position: absolute;
        width: 6.82vw;
        height: 2.97vw;
        top: 0;
        left: 0;
        object-fit: cover;
      }
      
      .section-contact .button-2 {
        position: absolute;
        width: 3.28vw;
        height: 2.03vw;
        top: 0.99vw;
        left: 0.78vw;
      }
      
      
      .section-contact .frame-5 {
        display: inline-flex;
        align-items: center;
        gap: 0.42vw;
        position: relative;
        top: 0.94vw;
        left: 0.94vw;
      }
      
      .section-contact .button-3 {
        position: relative;
        width: 2.6vw;
        height: 0.81vw;
        margin-bottom: -0.03vw;
        object-fit: cover;
      }
      
      .section-contact .tryb-izolacji-wrapper {
        position: relative;
        width: 1.61vw;
        height: 1.09vw;
      }
      
      .section-contact .tryb-izolacji {
        position: relative;
        width: 1.61vw;
        height: 1.09vw;
        overflow: hidden;
        background-image: url(./img/group.png);
        background-size: 100% 100%;
      }
      
      .section-contact .vector-2 {
        position: absolute;
        width: 1.35vw;
        height: 0.57vw;
        top: 1825.78vw;
        left: -3100.36vw;
      }
      
      .section-contact .heading,
      .section-portfolio-project .heading,
      .section-content-wp .heading
       {
        color: #8193A4;
        font-size: 3.33vw;
        font-family: "Roboto Mono", monospace;;
        font-weight: 400;
        text-transform: uppercase;
        line-height: 4vw;
        letter-spacing: 0.03vw;
        word-wrap: break-word;
      }

/* Definicja gradientu na podstawie zmiennej --najs-gradient */
.section-contact .heading-gradient,
.section-portfolio-project .heading-gradient,
.section-content-wp  .heading-gradient{
  font-size: 3.33vw;
  font-family: "Roboto Mono", monospace;;
  font-weight: 400;
  text-transform: uppercase;
  line-height: 4vw;
  letter-spacing: 0.03vw;
  word-wrap: break-word;
  background: var(--najs-gradient); /* Używamy zmiennej CSS dla gradientu */
  -webkit-background-clip: text; /* Umożliwia nałożenie gradientu na tekst w WebKit */
  background-clip: text; /* Działa w nowoczesnych przeglądarkach */
  color: transparent; /* Sprawia, że tekst staje się przezroczysty, a gradient jest widoczny */
}

/* Definicja gradientu na podstawie zmiennej --najs-gradient */
.main .heading-gradient {
  font-size: 5.21vw;
  font-family: "Roboto Mono", monospace;;
  font-weight: 400;
  text-transform: uppercase;
  line-height: 4vw;
  letter-spacing: 0.03vw;
  background: var(--background-transparent-white);
  word-wrap: break-word; /* Używamy zmiennej CSS dla gradientu */
  -webkit-background-clip: var(--background-clip); /* Umożliwia nałożenie gradientu na tekst w WebKit */
  background-clip: var(--background-clip); /* Działa w nowoczesnych przeglądarkach */
  color: var(--color-transparent-black); /* Sprawia, że tekst staje się przezroczysty, a gradient jest widoczny */
  display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      align-content: center;
      justify-content: center;
      align-items: center;
      border: var(--border-solid-black);
      border-radius: var(--border-radius);
      padding: var(--padding);

}

.main .heading-gradient::before {
  content: '';
  position: absolute;
  top: -0.25vw;   /* przesunięcie w dół */
  left: 0.25vw;  /* przesunięcie w prawo */
  width: 100%;
  height: 100%;
  background: var(--najs-gradient);
  z-index: -1;
  filter: none; /* bez rozmycia = twardy cień */
  transition: 0.5s ease-in-out;
  opacity: var(--opacity);
  border-radius: var(--border-radius);
}


.section-footer-logo .container{
  display: flex;
  height: 2.6vw;
  align-items: center;
  gap: 0.83vw;
  position: relative;
  align-self: stretch;
  width: 100%;
  overflow-x: hidden;
  justify-content: flex-start;
  flex-wrap: nowrap;
  flex-direction: row;
  overflow-y: hidden;
}


.section-footer-logo{
  display: flex;
  flex-direction: column;
  height: 4.79vw;
  align-items: center;
  position: relative;
  background: #4c657d8c;
  overflow-x: hidden;
  overflow-y: hidden;
  width: 100%;
  border: none;
}

.section-footer-logo .banner {
  display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
        z-index: 2;
        align-self: stretch;
        overflow-x: hidden;
        width: 100%;
        flex: 0 0 auto;
        background: #4c657d8c;
}

.section-footer-logo{
  display: flex;
        flex-direction: column;
        height: 2.6vw;
        align-items: center;
        position: relative;
        background: #4c657d8c;
        overflow-x: hidden;
        width: 100%;
}


.section-footer-logo .heading{
  position: relative;
  z-index: 2;
        width: fit-content;
        margin-top: -0.05vw;
        font-family: "Roboto Mono", monospace;, Helvetica;
        font-weight: 400;
        color: #D9D9DA;
        font-size: 1vw;
        letter-spacing: 0;
        line-height: 1.17vw;
        white-space: nowrap;
        margin: 0;
        text-transform: uppercase;
}

.section-footer-logo .banner-2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  align-self: stretch;
  overflow-x: hidden;
  width: 100%;
  flex: 0 0 auto;
  background-color: var(--color-black-white);
}

.section-footer-logo .banner-2 .heading{
color:var(--color-white-black) !important;
}

.section-footer-logo .content {
  display: flex;
  justify-content: flex-start;
  gap: 1.25vw;
  padding: 0vw 0vw 0vw 2.5vw;
  flex: 1;
  flex-grow: 1;
  margin-top: -0.16vw;
  margin-bottom: -0.16vw;
  align-items: center;
  width: 100%;
  position: relative;
}


.section-footer-logo .div {
  display: inline-flex;
  gap: 0.83vw;
  flex: 0 0 auto;
  align-items: center;
  position: relative;
  transition: transform 0.5s ease;
  flex-shrink: 0;
}

.section-footer-logo .shape {
  position: relative;
  width: 2.6vw;
  height: 2.6vw;
}

.section-footer-logo .layer {
  position: relative;
  width: 1.35vw;
  height: 1.41vw;
  top: 0.1vw;
  left: 0.16vw;
}

.section-footer-logo .element {
  position: absolute;
  width: 1.35vw;
  height: 1.41vw;
  top: 2516.35vw;
  left: -2999.53vw;
}


.section-footer-logo .layer-x {
  position: relative;
  width: 1.35vw;
  height: 1.41vw;
  top: 0.1vw;
  left: 0.16vw;
  background-image: url(img/Y2K-shape/Y2K-shape-38.svg);
  background-size: 100% 100%;
}

.section-footer-logo .text-wrapper {
  position: relative;
  width: fit-content;
  font-family: "Roboto Mono", monospace;, Helvetica;
  font-weight: 400;
  color: var(--color-schemes-color-scheme-2-background);
  font-size: 0.73vw;
  letter-spacing: 0;
  line-height: 1.17vw;
  white-space: nowrap;
}

.section-footer-logo .layer-2 {
  position: relative;
  width: 1.35vw;
  height: 1.41vw;
  top: 0.1vw;
  left: 0.16vw;
  background-image: url(img/Y2K-shape/Y2K-shape-38.svg);
  background-size: 100% 100%;
}

.section-footer-logo .content-wrapper {
  display: inline-flex;
  gap: 0.83vw;
  flex: 0 0 auto;
  align-items: center;
  position: relative;
}

.section-footer-logo .layer-3 {
  position: relative;
  width: 1.35vw;
  height: 1.41vw;
  top: 0.1vw;
  left: 0.16vw;
  background-image: url(img/Y2K-shape/Y2K-shape-38.svg);
  background-size: 100% 100%;
}

.section-footer-logo .img {
  position: relative;
  width: 1.36vw;
  height: 1.41vw;
}

.section-footer-logo .content-2 {
  display: inline-flex;
  gap: 0.83vw;
  flex: 0 0 auto;
  margin-right: -15.57vw;
  align-items: center;
  position: relative;
}

.section-footer-logo .element-2 {
  position: absolute;
  width: 1.35vw;
  height: 1.41vw;
  top: 2516.35vw;
  left: -3118.44vw;
}



.big-logo{
  width: 100%;
    margin-bottom: -0.21vw;
}



.overlap-wrapper {
  text-decoration: none;
  font-family: 'Nabulica', serif;
  z-index:1;
  width: fit-content;
  display: flex
;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;
  cursor: var(--cursor-pointer) !important;
}
/*
.overlap-wrapper::after {
  content: '';
  position: absolute;
  top: -0.31vw;
  left: 38.18vw;
  right: 0.16vw;
  bottom: 0.42vw;
  background: var(--najs-gradient);
  opacity: 1;
  border-radius: 0;
  z-index: -1;
  transition: 0.5s ease-in-out;
    clip-path: path("M192.044 9.28286V9.78286H192.544H196.5V47.2171H192.544H192.044V47.7171V51.8586H188.166H187.666V52.3586V56.5H183.71H13.2897H9.33373V52.3586V51.8586H8.83373H4.95595V47.7171V47.2171H4.45595H0.5V9.78286H4.45595H4.95595V9.28286V5.14143H8.83373H9.33373V4.64143V0.5H13.2897H183.71H187.666V4.64143V5.14143H188.166H192.044V9.28286Z");
  
}

.overlap-wrapper::before {
  content: '';
  position: absolute;
  top: -0.26vw;
  left: 37.71vw;
  right: 0.52vw;
  bottom: -0.05vw;
  background: var(--najs-gradient);
  opacity: 1;
  border-radius: 0;
  z-index: -1;
  clip-path: path("M198.886 9.93429V10.4343H199.386H203.5V50.5657H199.386H198.886V51.0657V55.5329H194.852H194.352V56.0329V60.5H190.238H13.7619H9.64762V56.0329V55.5329H9.14762H5.11429V51.0657V50.5657H4.61429H0.5V10.4343H4.61429H5.11429V9.93429V5.46714H9.14762H9.64762V4.96714V0.5H13.7619H190.238H194.352V4.96714V5.46714H194.852H198.886V9.93429Z");
  
}
*/

.overlap {
  border-radius: 100vw;
  width: fit-content;
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: 0.5vw 1vw;
  font-size: 1.15vw;
  color: white;
  background: #4C657D;
 /*
  background-clip: padding-box, border-box;
  background-origin: border-box;
*/
  /* Gradient border layer 
  background-image:
    linear-gradient(white, white), 
    var(--najs-gradient);
    */
  /* Pixel-style clipping */
/*  clip-path: path("M192.044 9.28286V9.78286H192.544H196.5V47.2171H192.544H192.044V47.7171V51.8586H188.166H187.666V52.3586V56.5H183.71H13.2897H9.33373V52.3586V51.8586H8.83373H4.95595V47.7171V47.2171H4.45595H0.5V9.78286H4.45595H4.95595V9.28286V5.14143H8.83373H9.33373V4.64143V0.5H13.2897H183.71H187.666V4.64143V5.14143H188.166H192.044V9.28286Z");
*/
border: var(--border-solid-black);
  transition: filter 0.3s ease;
  cursor: var(--cursor-pointer) !important;
}


.praca .overlap {
  background: transparent !important;
  background-color: transparent !important;
  color: #8193A4 !important;
  border: 1px solid #4C657D !important;
  border-radius: 100vw !important;
}

.praca .overlap .frame-3 {
  color: #8193A4 !important;
}


.main .buttons .overlap-wrapper:nth-of-type(2) .overlap-container,
.main .buttons .overlap-wrapper:nth-of-type(2) .overlap-wrapper {
  width: fit-content;
}

/* Przycisk "Odbierz sygnał" w uslugi-box — outline */
.uslugi-box .overlap {
  background: transparent !important;
  background-color: transparent !important;
  color: #8193A4 !important;
  border: 1px solid #4C657D !important;
  border-radius: 100vw !important;
}
.uslugi-box .overlap .frame-3 {
  color: #8193A4 !important;
}
.main .buttons .overlap-wrapper:nth-of-type(2) .overlap {
  background: transparent !important;
  background-color: transparent !important;
  color: #8193A4 !important;
  border: 1px solid #4C657D !important;
  border-radius: 100vw !important;
}
.main .buttons .overlap-wrapper:nth-of-type(2) .overlap .frame-3 {
  color: #8193A4 !important;
}

.main .buttons .overlap{
  padding: 0.5vw 0vw;
}

.main .avatar{
  width: 10.36vw;
  height: 7.97vw;
  position: relative;
  opacity: 0.80;
  background: rgba(0, 0, 0, 0.50);
}

.main .avatar video,
.main .avatar img {
  width: 10.36vw;
  height: 7.97vw;
  object-fit: cover;
  border-radius: 0;
}




/* ── Cookie banner ── */
#cookie-banner {
  position: fixed;
  bottom: 1.5vw;
  left: 50%;
  transform: translateX(-50%);
  z-index: 99999;
  width: 50vw;
  max-width: 700px;
  background: #0d1117;
  border: 1px solid #3C5064;
  font-family: "Roboto Mono", monospace;
  animation: cookieSlideUp 0.4s ease-out;
}
@keyframes cookieSlideUp {
  from { opacity: 0; transform: translateX(-50%) translateY(20px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.cookie-inner {
  padding: 1.2vw 1.5vw;
  display: flex;
  flex-direction: column;
  gap: 0.8vw;
}
.cookie-label {
  margin: 0;
  color: #4C657D;
  font-size: 12px;
  letter-spacing: 2px;
}
.cookie-text {
  margin: 0;
  color: #8193A4;
  font-size: 13px;
  line-height: 1.7;
}
.cookie-btns {
  display: flex;
  gap: 0.8vw;
  align-items: center;
}
.cookie-btn {
  all: unset;
  cursor: pointer;
  font-family: "Roboto Mono", monospace;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 0.5vw 1.2vw;
  transition: all 0.2s;
}
.cookie-btn--accept {
  background: #1e2d3d;
  color: #D9D9DA;
  border: 1px solid #4C657D;
}
.cookie-btn--accept:hover { background: #4C657D; color: #fff; }
.cookie-btn--minimal {
  color: #4C657D;
  border: 1px solid transparent;
}
.cookie-btn--minimal:hover { color: #8193A4; }

.cookie-category {
  border-top: 1px solid #1e2d3d;
  padding: 10px 0;
}
.cookie-cat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.cookie-cat-text { flex: 1; }
.cookie-cat-name {
  display: block;
  color: #D9D9DA;
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 5px;
}
.cookie-cat-desc {
  display: block;
  color: #4C657D;
  font-size: 12px;
  line-height: 1.6;
}

/* Toggle switch — JS driven */
.ck-toggle {
  flex-shrink: 0;
  width: 40px;
  height: 22px;
  background: #1e2d3d;
  border: 1px solid #3C5064;
  border-radius: 11px;
  position: relative;
  cursor: pointer;
  transition: background 0.25s, border-color 0.25s;
  user-select: none;
}
.ck-knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #4C657D;
  transition: left 0.25s, background 0.25s;
}
.ck-toggle--on {
  background: #4C657D;
  border-color: #8193A4;
}
.ck-toggle--on .ck-knob {
  left: calc(100% - 17px);
  background: #fff;
}
.ck-toggle--locked { cursor: not-allowed; opacity: 0.65; }

.blur-layer {
  display: NONE;
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  backdrop-filter: blur(12px) saturate(200%);
  -webkit-backdrop-filter: blur(12px) saturate(200%);
  mask-image: none;
  -webkit-mask-image: none;
  transition: mask-image 0.2s ease, backdrop-filter 0.3s ease;
  background: rgba(0, 0, 0, 0.3); /* Subtelne tło */
}




/*
.overlap::before {
  content: '';
  position: absolute;
  top: -0.25vw;   
  left: 0.25vw; 
  width: 100%;
  height: 100%;
  background: var(--najs-gradient);
  z-index: -1;
  filter: none; 
  transition: 0.5s ease-in-out;
  opacity: 1;
  border-radius: var(--border-radius);
}

*/

.overlap-container{
  width: fit-content;
  display: flex
;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;
}


.frame-wrapper {
  display: flex;
  align-items: center;
}

.overlap .frame-3 {
  display: flex;
  align-items: center;
  gap: 0;
  color: white;
  font-size: 0.83vw;
  font-family: "Roboto Mono", monospace;;
  font-weight: 400;
  line-height: 1.25vw;
  word-wrap: break-word;
  cursor: var(--cursor-cursor) !important;
  text-transform: uppercase;
}

.frame-3 img{
  width: 1.25vw;
  height: 1.25vw;
  image-rendering: pixelated;
}

.section-windows .frame-2 img {
  width: 1.25vw;
  height: 1.25vw;
  image-rendering: pixelated;
}


/* Definiowanie animacji przesuwania w lewo i prawo */
@keyframes move-frame-3 {
  0% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-0.26vw); /* Przesunięcie w prawo */
  }
  75% {
    transform: translateX(0.26vw); /* Powrót na początek */
  }
  100% {
    transform: translateX(0); /* Powrót na początek */
  }
}


/* Kiedy najedziesz na .overlap-wrapper, uruchamiamy animację */
.overlap-wrapper:hover .frame-3 img {
  animation: move-frame-3 1s ease-in-out infinite; /* Animacja trwa 1 sekundę i powtarza się w kółko */
}

/* Definiowanie stylów dla .frame-3 (może to być np. kontener wewnętrzny) */
.frame-3 img{
  transition: all 0.3s ease;
}

/* Animacja podczas hover na .overlap-wrapper */
.overlap:hover::before {
  transition: 0.5s ease-in-out;
  top: -0.5vw;  /* Zwiększenie przesunięcia w górę */
  left: 0.5vw;
}

.section-footer{
  width: 100%;
  align-self: stretch;
  padding-top: 4.17vw;
  padding-bottom: 1.56vw;
  padding-right: 3vw;
  padding-left: 3vw;
  background: transparent;
  overflow: hidden;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 2.5vw;
  display: inline-flex;
  align-self: stretch;
  justify-content: space-between;
  align-items: flex-start;
  display: inline-flex;
  flex-wrap: nowrap;
  border-bottom: var(--primitives-color-neutral-dark) 1px solid;
}

.section-footer-logo-text-wrapper{
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 0.52vw;
  display: inline-flex;
  width:16.51vw;
}

.section-footer-logo-text{
  color: #B2B2B2;
  font-size: 0.83vw;
  font-family: "Roboto Mono", monospace;;
  font-weight: 400;
  line-height: 1.25vw;
  word-wrap: break-word;
}

.section-footer-logo-text-wrapper .logo{
width:8.18vw;

}
.section-footer-kontakt {
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-end;
  gap: 0.78vw;
  display: inline-flex
;

}

.section-footer-lang,
.section-footer-nav{
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 0.78vw;
  display: inline-flex
;
  flex-wrap: nowrap;

}


.section-footer-lang h4,
.section-footer-nav h4,
.section-footer-kontakt h4
{
  color: white;
  font-size: 1.25vw;
  font-family: "Roboto Mono", monospace;;
  font-weight: 500;
  text-transform: uppercase;
  line-height: 2vw;
  word-wrap: break-word;
  margin:0;
}

.section-footer-lang p,
.section-footer-nav p,
.section-footer-kontakt p{
  color: #838286;
  font-size: 0.83vw;
  font-family: "Roboto Mono", monospace;;
  font-weight: 400;
  text-transform: uppercase;
  line-height: 1.33vw;
  word-wrap: break-word;
  margin:0;
}

.section-footer-map iframe{
  width:15.47vw;
  height: 15.47vw;
}

.section-footer-kontakt-1{
  justify-content: flex-start;
  align-items: flex-start;
  display: inline-flex
;
  flex-direction: column;
  flex-wrap: nowrap;

}

.section-footer-kontakt-1 strong,
.section-footer-policy p,
.section-footer-policy-social p{
  color: #838286;
  font-size: 0.83vw;
  font-family: "Roboto Mono", monospace;;
  font-weight: 400;
  text-transform: uppercase;
  line-height: 1.25vw;
  word-wrap: break-word;
}

.rights {
  color: #515055 !important;
}

.section-footer-nav-social{
  display: flex
  ;
      flex-direction: column;
      flex-wrap: nowrap;
      align-content: flex-end;
      justify-content: flex-start;
      align-items: flex-end;
      gap: 2vw;
}

.section-footer-kontakt-2 {
  display: flex
  ;
      flex-direction: row;
      flex-wrap: nowrap;
      align-content: center;
      justify-content: center;
      align-items: center;
      gap:0.52vw;
}

.section-footer-kontakt-text{
  margin: 0 0 0 1.2vw !important;
}

.section-footer-kontakt-1 p{
  color: #838286;
  font-size: 0.83vw;
  font-family: "Roboto Mono", monospace;;
  font-weight: 400;
  text-transform: uppercase;
  line-height: 1.25vw;
  word-wrap: break-word;
}

.section-footer-nav .glink{
  color: #838286 !important;
  font-size: 0.83vw;
    font-family: "Roboto Mono", monospace;
    font-weight: 400;
    text-transform: uppercase;
    line-height: 1.33vw;
    word-wrap: break-word;
}

.footer-main{
width:100%;
padding: 3vw 0;
}

.background-blue {
  background: #4c657d8c;
}

.section-footer-nav .blue-color{
  color: #4C657D !important;
}

.section-lang{
  display: flex
  ;
      flex-direction: row;
      flex-wrap: nowrap;
      align-content: center;
      justify-content: center;
      align-items: center;
      gap: 0.6vw;
}

.section-footer-kontakt-img img{
  width:0.89vw;
}

.section-footer-policy-social{
  width: 100%;
  align-self: stretch;
  padding-top: 1.56vw;
  padding-bottom: 1.56vw;
  padding-left: 5.33vw;
  padding-right: 5.33vw;
  /* background: #191919; */
  overflow: hidden;
  display: flex;
  flex-wrap: nowrap;
  border-bottom: var(--primitives-color-neutral-dark) 1px solid;
  flex-direction: column;
  align-content: center;
  justify-content: center;
  align-items: center;
  gap: 0.83vw;
  text-align: center;
}

.section-footer-policy{
  display: flex
;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    align-items: center;
    justify-content: flex-start;
    gap: 1.04vw;
}

.section-footer-social{
  gap: 1.04vw;
  display: flex
;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;

}

.section-footer-social img{
  height:1.82vw;
  cursor: var(--cursor-pointer) !important;
}
.section-footer-social i {
  font-size: 1.82vw;
  color: #4C657D;
  cursor: var(--cursor-pointer) !important;
  transition: color 0.2s ease;
}
.section-footer-social a:hover i { color: #D9D9DA; }
.contact-form {
  background: white;
  padding: 2.08vw; /* 2rem -> ok. 2.08vw na 1920px */
  border-radius: 0.625vw; /* 12px -> 12/1920*100 */
  box-shadow: 0 0.52vw 1.56vw rgba(0, 0, 0, 0.1); /* 10px 30px */
  max-width: 26.04vw;
  width: 100%;
  font-size: 0.83vw;
  font-family: "Roboto Mono", monospace;;
  font-weight: 400;
  text-transform: uppercase;
  line-height: 1.25vw;
  word-wrap: break-word;
}

.popup-content p{
  font-size: 2vw;
  font-family: "Roboto Mono", monospace;;
  font-weight: 400;
  text-transform: uppercase;
  line-height: 1.25vw;
  word-wrap: break-word;
}

#customContactForm{
  display: flex
;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: flex-start;
    justify-content: flex-start;
    align-items: stretch;
    gap:1.04vw;
}


.popup {
  display: none;
  position: fixed;
  z-index: 9999999999999;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  justify-content: center;
  align-items: center;
  animation: fadeIn 0.3s ease-in-out;
}

.popup-content {
  background: #fff;
  padding: 2em;
  text-align: center;
  max-width: 90%;
  width: fit-content;
  animation: slideUp .3s ease-out;
  display: flex
;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;
}



@keyframes fadeIn {
  from { opacity: 0; } to { opacity: 1; }
}
@keyframes slideUp {
  from { transform: translateY(50px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.popup .section-contact{
  display: flex
  ;
      align-items: center;
      justify-content: center;
      gap: 4.17vw;
      padding: 9.38vw 2.94vw 9.38vw 2.78vw;
      position: relative;
      overflow: hidden;
      border-top-width: .26vw;
      border-top-style: solid;
      border-color: transparent;
      border-radius: 0;
      background-color: transparent;
      width: 80%;
  
}

.popup .section-contact .group {
  position: relative;
  display: flex
;
  height: fit-content;
  width: 100%;
  box-shadow: .83vw -.83vw 0 #000;
  border: solid 1px #000;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;
}

.popup .section-contact .section-title{
  display: flex;
      flex-direction: column;
      width: 100%;
      height: fit-content;
      padding: 40px;
      align-items: center;
      justify-content: center;
      gap: 1.56vw;
      top: 5.83vw;
      left: 3.23vw;
      align-content: center;
      flex-wrap: nowrap;
      background-color: white;
}

.popup .section-contact img{
width:1.35vw;
cursor: var(--cursor-pointer);
}

.popup .section-contact img:hover{
  cursor: var(--cursor-pointer) !important;
  }

  .popup .section-contact .popup-content img{
    width: 3vw !important;
    height: 3vw !important;
  }


  .popup .section-contact .popup-content {
    background: #fff;
    padding: 2em;
    text-align: center;
    max-width: 90%;
    width: fit-content;
    animation: slideUp .3s ease-out;
    display: flex
;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
    gap: 0.52vw;
}



.section-windows .section-contact{
  display: flex
  ;
      flex-direction: row;
      align-items: flex-end;
      justify-content: center;
      gap: 4.17vw;
      padding: 9.38vw 2.94vw 0vw 2.78vw;
      position: relative;
      background-color: #fff;
      border-radius: .73vw;
      overflow: hidden;
      border-top-width: .26vw;
      border-top-style: solid;
      border-color: transparent;
      align-content: center;
      flex-wrap: nowrap;
  
}

.section-windows{
  display: var(--display);
;
    flex-direction: row;
    flex-wrap: nowrap;
    width: 100%;
    align-content: center;
    justify-content: center;
    align-items: center;
}

.section-windows .section-contact .group{
  width: 50%;

}

.section-windows .section-contact .section-title,
.section-windows .section-contact .frame-2,
.section-windows .section-contact .content,
.section-windows .section-contact .column,
.section-windows .section-contact .frame-3,
.section-windows .section-contact .tagline-wrapper
{
  width: 100%;
}

.section-windows .section-contact .lorem-ipsum-dolor
{
  width: 100%;
  word-break: break-word;
}

.section-windows .section-contact .heading img{
  width: 3vw !important;
  height: 3vw !important;
}

.section-windows .section-contact .heading {
  color: var(--Color-Scheme-2-Background, #191919);
  font-size: 3.33vw;
  font-family: "Roboto Mono", monospace;;
  font-weight: 400;
  text-transform: uppercase;
  line-height: 4vw;
  letter-spacing: .03vw;
  word-wrap: break-word;
  display: flex
;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  gap: 0.52vw;
  align-items: center;
}

.section-contact .lorem-ipsum-dolor{
  margin:0;
}

.section-windows .section-contact .content-with-button{
  height:fit-content !important;
}

.section-windows .section-contact .frame-4{
  display: flex
;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: flex-start;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 0.78vw;
}

.section-windows .section-contact .tagline-wrapper {
  display: inline-flex
;
  align-items: flex-start;
  position: relative;
  flex: 0 0 auto;
  flex-direction: column;
  align-content: flex-start;
  flex-wrap: nowrap;
  justify-content: flex-start;
  gap: 0.52vw;
}

.lorem-ipsum-dolor-error::after {
  content: '|';
  animation: blink 1s infinite;
  margin-left: 0.21vw;
}

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

.fade-out {
  opacity: 0;
  transition: opacity 0.3s ease;
}


#popup-close-1,#popup-close-2{
cursor: var(--cursor-pointer);
width: 1.35vw;
height: 1.35vw;
}

.section-partners{
  display: flex
  ;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 4.17vw;
      padding: 2.08vw 0;
      position: relative;
      background-color: transparent;
      border-radius: .73vw;
      overflow: hidden;
      border-top-width: .26vw;
      border-top-style: solid;
      border-color: transparent;
      width:100%;
  
}

.section-partners .tagline-wrapper {
  display: inline-flex;
  align-items: center;
  position: relative;
  flex: 0 0 auto;
}

.section-partners .tagline-wrapper {
  display: inline-flex
  ;
      align-items: center;
      position: relative;
      flex: 0 0 auto;
      flex-direction: column;
      flex-wrap: nowrap;
      gap: 0.52vw;
      justify-content: flex-start;
  
}

.section-partners .button-wrapper{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.52vw;
  padding: 0vw 0.26vw;
  position: relative;
  flex: 0 0 auto;
  background: var(--najs-gradient-7);
  background-color: var(--primitives-color-neutral-lightest);
  color: var(--color-nag-3);
  font-size: 1.25vw;
  font-family: "Roboto Mono", monospace;;
  font-weight: 400;
  text-transform: uppercase;
  line-height: 1.88vw;
  word-wrap: break-word;
  border-radius: var(--border-radius);
}

/* Definicja gradientu na podstawie zmiennej --najs-gradient */
.section-partners .heading{
  font-size: 5vw;
  font-family: "Roboto Mono", monospace;;
  font-weight: 400;
  text-transform: uppercase;
  line-height: 4vw;
  letter-spacing: 0.03vw;
  word-wrap: break-word;
  color:var(--color-schemes-color-scheme-2-background); /* Sprawia, że tekst staje się przezroczysty, a gradient jest widoczny */
}

/* Definicja gradientu na podstawie zmiennej --najs-gradient */
.section-partners .heading-gradient {
  font-size: 5vw;
  font-family: "Roboto Mono", monospace;;
  font-weight: 400;
  text-transform: uppercase;
  line-height: 4vw;
  letter-spacing: 0.03vw;
  word-wrap: break-word;
  background: var(--najs-gradient); /* Używamy zmiennej CSS dla gradientu */
  -webkit-background-clip: text; /* Umożliwia nałożenie gradientu na tekst w WebKit */
  background-clip: text; /* Działa w nowoczesnych przeglądarkach */
  color: transparent; /* Sprawia, że tekst staje się przezroczysty, a gradient jest widoczny */
}

.section-logos-wrapper{
  margin: -8px auto 20px auto;
  position: relative;
  max-width:100%;
}

 .jcarousel-wrapper-banner{
  position: relative;
  max-width:100%;
}

.jcarousel, .jcarousel-banner, .jcarousel-dyskietki {
  position: relative;
  overflow: hidden;
  width: 100%;
}


.jcarousel-wrapper-banner-uslugi, .dyskietki{
  position: relative;
  max-width:100%;
}

.jcarousel, .jcarousel-banner-uslugi,
.jcarousel-banner-uslugi-1,
.jcarousel-banner-uslugi-2  {
  position: relative;
  width: 100%;
}

.jcarousel ul
{
  width: 10000em;
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
}
.jcarousel-dyskietki ul{
  width: 10000em;
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex
;
  align-content: center;
  justify-content: flex-start;
  align-items: center;
  flex-direction: row;
  flex-wrap: nowrap;
}

.jcarousel-banner ul,
.jcarousel-banner-uslugi ul,
.jcarousel-banner-uslugi-1 ul,
.jcarousel-banner-uslugi-2 ul
{
    width: 10000em;
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex
;
    gap: 3vw;
    align-content: center;
    justify-content: flex-start;
    align-items: center;
    flex-direction: row;
    flex-wrap: nowrap;
}

.jcarousel-banner-uslugi li,
.jcarousel-banner-uslugi-1 li,
.jcarousel-banner-uslugi-2 li {
  display: flex;
  flex: 0 0 auto; /* ← KLUCZOWE */
  gap: 1.25vw;
  align-content: center;
  justify-content: flex-start;
  align-items: center;
  flex-direction: row;
  flex-wrap: nowrap;
}

.jcarousel-dyskietki li {
  display: flex !important;
  flex: 0 0 auto !important; /* ← KLUCZOWE */
  gap: 1.25vw !important;
  align-content: center !important;
  justify-content: flex-start !important;
  align-items: center !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  width: auto !important;
}


.jcarousel li

{
  width:12.19vw;
  float: left;
  border: none;
  display: flex
  ;
      gap: 1.25vw;
      align-content: center;
      justify-content: flex-start;
      align-items: center;
      flex-direction: row;
      flex-wrap: nowrap;
      flex: 0 0 auto;
}

.jcarousel-banner li

{
  width:fit-content;
  float: left;
  border: none;
  display: flex
  ;
      gap: 1.25vw;
      align-content: center;
      justify-content: flex-start;
      align-items: center;
      flex-direction: row;
      flex-wrap: nowrap;
      flex: 0 0 auto;
}


.jcarousel img {
  height: 9.95vw;
  width:12.19vw;
}

.jcarousel-banner img{
width: 1.41vw;
height:1.41vw;
}

.jcarousel-banner-uslugi img,
.jcarousel-banner-uslugi-1 img,
.jcarousel-banner-uslugi-2 img{
  width: 2.13vw;
  height:2.13vw;
  }

  .section-wideo-2{
    display: flex
    ;
        flex-direction: row;
        flex-wrap: nowrap;
        align-content: center;
        justify-content: center;
        width: 100%;
        align-items: center;
  }
  .section-wideo-2 img{
    width: 50%;
    height: auto;
  }

  .folders-wrapper{
    gap: 2.08vw 1.56vw;
    display: flex
;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    align-content: flex-start;
  }

  .folder{
    display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-content: center;
        justify-content: center;
        align-items: center;
        width:9.53vw;
        gap:0.52vw;
  }

  .folder-nag-1 p{
    margin:0;
    padding:0.26vw;
    color: #fff;
    font-size: 1.25vw;
    font-family: "Roboto Mono", monospace;;
    font-weight: 400;
    text-transform: uppercase;
    word-wrap: break-word;
    text-align: center;
}
.folder-1 {
  position: relative;
  width: 5.21vw;
  height: 4.17vw;
  border: 4px solid black;
  z-index: 1;
  cursor: var(--cursor-pointer) !important;
}

.folder-1::before {
  content: "";
  position: absolute;
  top: 0.89vw;
  left: 0.47vw;
  width: 4.95vw;
  height: 2.71vw;
  border: 0.21vw solid #000;
  transform: skewX(-20deg);
  z-index: 2;
  transition: transform .3s ease, top .3s ease, left .3s ease;
}

.gradient-1,
.gradient-1::before,
.gradient-1 p {
  background: var(--najs-gradient-1, rgba(170, 199, 114, 1));  /* fallback dla gradientu */
 /* background-color: rgba(170, 199, 114, 1); Zapewnienie koloru zapasowego */
}

.gradient-2,
.gradient-2::before,
.gradient-2 p {
  background: var(--najs-gradient-2, rgba(145, 191, 148, 1));  /* fallback dla gradientu */
 /* background-color: rgba(145, 191, 148, 1);   Zapewnienie koloru zapasowego */
}

.gradient-3,
.gradient-3::before,
.gradient-3 p {
  background: var(--najs-gradient-3, rgba(128, 179, 183, 1));  /* fallback dla gradientu */
  /*background-color: rgba(128, 179, 183, 1);   Zapewnienie koloru zapasowego */
}

.gradient-4,
.gradient-4::before,
.gradient-4 p {
  background: var(--najs-gradient-4, rgba(143, 129, 168, 1));  /* fallback dla gradientu */
 /* background-color: rgba(143, 129, 168, 1);   Zapewnienie koloru zapasowego */
}

.shadow-1 {
  position: absolute;
  top: -0.42vw;
  right: -0.42vw;
  width: 5.21vw;
  height: 4.17vw;
  border: 0.21vw solid #000;
  z-index: 0;
  background-color: #000;
  transition: transform .3s ease, top .3s ease, right .3s ease;
  cursor: var(--cursor-pointer) !important;
}


.shadow-1::before{
  content: "";
  position: absolute;
  top: 0.89vw;
  left: 0.47vw;
  width: 4.95vw;
  height: 2.71vw;
  background-color: black;
  border: 0.21vw solid #000;
  transform: skewX(-20deg);
  z-index: 2;
  transition: transform .3s ease, top .3s ease, left .3s ease;
}

.wrapper {
  position: relative;
}

.wrapper:hover .folder-1::before {
  transform: skewX(-24deg);
}

.wrapper:hover .shadow-1 {
  top: -0.57vw;
  right: -0.57vw;
  width: 5.21vw;
  height: 4.17vw;
}

.wrapper:hover .shadow-1::before {
  transform: skewX(-24deg);
}

.wrapper:hover .shadow-1::before {
  top: 0.89vw;
  left: 0.63vw;
  transform: skewX(-24deg);
}

.cursor-pointer {
  width: 8.62vw;
  height: 8.23vw;
  position: absolute;
  bottom: 0;
  right: 0;
  z-index:2;
  animation: floatPosition 1.5s ease-in-out infinite alternate;
}

@keyframes floatPosition {
  to {
    bottom: 1.04vw;
    right: 1.04vw;
  }
}

.section-uslugi{
  display: flex
  ;
      flex-direction: column;
      align-items: flex-start;
      justify-content: flex-start;
      gap: 4.17vw;
      padding: 5.38vw 0 0 0;
      position: relative;
      background-color: transparent;
      border-radius: .73vw;
      overflow: hidden;
      border-top-width: .26vw;
      border-top-style: solid;
      border-color: transparent;
      width: 100%;

}

.team{
  padding: 5.38vw 0 9.38vw 0;
}

.section-uslugi .tagline-wrapper {
  display: inline-flex
  ;
      align-items: flex-start;
      position: relative;
      flex: 0 0 auto;
      flex-direction: column;
      flex-wrap: nowrap;
      gap: .52vw;
      justify-content: flex-start;
}

.section-uslugi .button-wrapper {
  display: inline-flex
;
  align-items: center;
  justify-content: center;
  gap: .52vw;
  padding: 0 .26vw;
  position: relative;
  flex: 0 0 auto;
  background: transparent;
  background-color: transparent;
  color: #515055;
  font-size: 1.25vw;
  font-family: "Roboto Mono", monospace;;
  font-weight: 400;
  text-transform: uppercase;
  line-height: 1.88vw;
  word-wrap: break-word;
  border-radius: var(--border-radius);
}

.section-uslugi .heading {
  font-size: 5vw;
  font-family: "Roboto Mono", monospace;;
  font-weight: 400;
  text-transform: uppercase;
  line-height: 6vw;
  letter-spacing: .03vw;
  word-wrap: break-word;
  color: #8193A4;
}

.section-uslugi .heading-gradient {
  font-size: 5vw;
  font-family: "Roboto Mono", monospace;;
  font-weight: 400;
  text-transform: uppercase;
  line-height: 4vw;
  letter-spacing: .03vw;
  word-wrap: break-word;
  background: var(--najs-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.nag-arrows{
  display: flex
;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: flex-end;
    width: 100%;
    padding: 0 3vw 0 3vw;
}

.arrows{
  display: flex;
gap: 0.83vw;
}

.arrows img{
width:2.76vw;
height: 1.87vw;
}

.boxy-wrapper{
  position: relative;
  overflow: hidden;
  width: 100%;
  cursor: var(--cursor-grab) !important;
}

.boxy{
  display: flex
;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-content: flex-start;
    align-items: center;
    gap: 1vw;
    overflow-x: auto;
    overflow-y: hidden;
  scroll-behavior: smooth;
  scrollbar-width: none; /* Firefox */
  padding: .52vw 1.04vw .52vw 1.04vw;
}
.boxy::-webkit-scrollbar {
  display: none; /* Chrome */
}

.box{
  width: 22.4vw;
  height: 30.57vw;
  background: white;
  box-shadow: var(--box-shadow);
  outline: 1px #191919 solid;
  outline-offset: -0.05vw;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  display: inline-flex;
  flex: 0 0 auto;
  border-radius: var(--border-radius-2);
  transition: all .3s ease-in-out !important;
}

.box:hover{
  box-shadow: .52vw -.60vw 0 black;
  transition: all .3s ease-in-out !important;
}


.tag{
  display: inline-flex
  ;
      height: 1.77vw;
      align-items: center;
      justify-content: center;
      gap: .42vw;
      padding: .4vw 1.25vw;
      position: relative;
      top: -.05vw;
      left: -.05vw;
      border: 2px solid;
      border-color: #4C657D;
      border-radius: 100vw;
      color: #8193A4;
      font-size: .83vw;
      font-family: "Roboto Mono", monospace;;
      font-weight: 400;
      text-transform: uppercase;
      line-height: 1.25vw;
      word-wrap: break-word;
      height: max-content;
      
}

.tag p{
  margin:0;
}

.wrapper-tag-icon img{
 height:2.24vw !important;
 width:2.31vw !important;
}

.box .wrapper{
  align-self: stretch;
  padding: 1.04vw;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 0.78vw;
  display: inline-flex;
}

.wrapper-tag-icon{
  width: 20.31vw;
  height: 2.6vw;
  justify-content: space-between;
  align-items: center;
  display: inline-flex;
}
.box .text{
  align-self: stretch;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 0.78vw;
  display: inline-flex;
}

.box .text h3{
  align-self: stretch;
  color: #191919;
  font-size: 2.08vw;
  font-family: "Roboto Mono", monospace;;
  font-weight: 400;
  line-height: 2.71vw;
  letter-spacing: 0.02vw;
  word-wrap: break-word;
}

.box .text p{
  width: 20.31vw;
  color: #7F7F7F;
  font-size: 0.94vw;
  font-family: "Roboto Mono", monospace;;
  font-weight: 400;
  line-height: 1.5vw;
  word-wrap: break-word;
}

.box img{
  width: 22.4vw;
  height: -webkit-fill-available;
  position: relative;
  border-radius: var(--border-radius-3);
}

.arrow-left, .arrow-right {
  transition: all .3s ease;
  cursor: var(--cursor-pointer) !important;
}

.arrow.hidden {
  opacity: 0;
  pointer-events: none;
}

.arrow-left:hover, .arrow-right:hover{
  animation: move-frame-3 1s ease-in-out infinite; /* Animacja trwa 1 sekundę i powtarza się w kółko */
}

.box-team{
  width: 21.46vw;
  height: 31.3vw;
  position: relative;
  display: flex
;
  gap: .99vw;
  padding: 1.56vw .78vw;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: flex-start;
  justify-content: flex-start;
  align-items: center;
}


.box-team .text h3{
  align-self: stretch;
  color: black;
  font-size: 1.67vw;
  font-family: "Roboto Mono", monospace;;
  font-weight: 400;
  text-transform: uppercase;
  line-height: 2.33vw;
  letter-spacing: 0.02vw;
  word-wrap: break-word;
}

.box-team .tag p{
  all:unset;
  color: black;
  font-size: 0.73vw;
  font-family: "Roboto Mono", monospace;;
  font-weight: 400;
  line-height: 1.09vw;
  word-wrap: break-word;
}
.box-team .img-social{
  width:18.28vw;
  height:22.19vw;
}

.box-team .social-media{
  display: flex
;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    position: absolute;
    top: 0;
    right: 0;
    gap: 14px;

}

.box-team .tag{
  all: unset;
  height: 1.67vw;
  padding-left: 1vw;
  padding-right: 1vw;
  padding-top: .33vw;
  padding-bottom: .33vw;
  border-radius: 3.65vw;
  outline: .05vw #000 solid;
  backdrop-filter: blur(.1vw);
  justify-content: center;
  align-items: center;
  gap: .42vw;
  display: inline-flex
;
}

.box-team .img-social img{
  width: 18.28vw;
    height: 22.19vw;
}

.box-team .tag img{
  width: 1.04vw;
  height: 1.04vw;
}

.portfolio{
  padding: 9.38vw 2.94vw 0 2.78vw;
  display:var(--display);
}

.box-team .text{
  display: flex
;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0.52vw;
    width: 100%;
    padding: 0 3vw;
}

.box-team .img-social{
  width: 18.28vw;
  height: 22.19vw;
  position: relative;
  overflow: hidden;
  display:flex;
}

.box-team .social-media img{
width:2.08vw;
height:2.08vw;
}

.section-opinie{
  padding: 8.25vw 0 6vw 0;
  background-color: var(--color-schemes-color-scheme-2-background);
  border-radius: 0 0 1.56vw 1.56vw;
  gap: 3vw;
  display: flex
;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;

}

.section-opinie .boxy{
  gap: 10.42vw;
  display: flex
  ;
      flex-direction: row;
      flex-wrap: nowrap;
      justify-content: flex-start;
      align-content: center;
      align-items: center;
      gap: 1.3vw;
      overflow-x: auto;
      scroll-behavior: smooth;
      scrollbar-width: none;
      padding: 0.52vw 2.94vw 0.52vw 2.94vw;
}

.section-opinie .box-opinia{
  flex: 0 0 auto;
  width: 62.81vw;
  padding: 2.6vw;
  gap: 0;
  border-radius: 2.6vw;
  display: flex
;
  position: relative;
  overflow: hidden;
  z-index: 1;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: flex-start;
  justify-content: flex-start;
  align-items: flex-start;
}

.boxy.dragging {
  user-select: none;
}

.glitch{
  display: var(--display);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* jak tło */
  z-index: 0;
  opacity: .15;
  pointer-events: none; /* video nie łapie klików */
}

.box-opinia .text{
  width: 57.76vw;
  color: #e5e5e5;
  font-size: 2vw;
  font-family: "Roboto Mono", monospace;;
  font-weight: 400;
  line-height: 2.8vw;
  letter-spacing: .03vw;
  word-wrap: break-word;
  position: relative;
  z-index: 2;
  display: flex
;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: flex-start;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 1.0vw;
  height: 13.63vw;
}

.box-opinia .text p{
  margin:0;
}

.stars img{
  width: 1.8vw;
  height: 1.8vw;
}

.stars{
  display: flex
  ;
      flex-direction: row;
      flex-wrap: nowrap;
      justify-content: flex-start;
      align-items: center;
      gap: .16vw;
}

.osoba-opinia{
  align-self: stretch;
  backdrop-filter: blur(2px);
  justify-content: flex-start;
  align-items: center;
  gap: 20px;
  display: inline-flex
;
}

.osoba-text h5{
  align-self: stretch;
  color: #e5e5e5;
  font-size: 1.0vw;
  font-family: "Roboto Mono", monospace;;
  font-weight: 400;
  line-height: 2vw;
  word-wrap: break-word;
}

.osoba-text h6{
  align-self: stretch;
  color: #b2b2b2;
  font-size: 0.8vw;
  font-family: "Roboto Mono", monospace;;
  font-weight: 400;
  line-height: 1.67vw;
  word-wrap: break-word;
}

.osoba-text{
  align-self: stretch;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  display: inline-flex
;
  align-content: center;
  flex-wrap: nowrap;
}

.osoba-opinia img{
  width: 3vw;
  height: 3vw;
  border-radius: 520.78vw;
}

.cytat{
  position: relative;
  z-index: 2;
}

.cytat span{
  width: 3.44vw;
  height: 2vw;
  color: #fff;
  font-size: 6.42vw;
  font-family: "Roboto Mono", monospace;;
  font-weight: 400;
  line-height: 12.5vw;
  letter-spacing: .1vw;
  word-wrap: break-word;
  display: flex
;
  align-content: flex-start;
  justify-content: center;
  align-items: center;
}

.cudzyslow{
  display: flex
  ;
      width: 100%;
      justify-content: flex-end;
      align-content: flex-start;
      flex-direction: row;
      flex-wrap: nowrap;
      align-items: flex-start;
}

.section-opinie .arrows{
  display: flex
  ;
      gap: 0.83vw;
      align-items: center;
      justify-content: center;
      align-content: center;
      flex-wrap: nowrap;
      flex-direction: row;
}

.section-opinie .nag-arrows{
  

  display: flex
  ;
      align-items: center;
      justify-content: center;
      align-content: center;
      flex-wrap: nowrap;
      flex-direction: row;
}

.section-uslugi-box{
display: flex
;
    gap: 1.04vw;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: flex-start;
    align-items: stretch;
    justify-content: center;
       width: 93.33vw;
}

.uslugi-box{
  position: relative;
  overflow: hidden;
display: flex
;
    padding: 1.7vw;
    border-radius: 1.93vw;
    border: 2px solid #3C5064;
    gap: 0.52vw;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: flex-start;
    justify-content: flex-start;
    align-items: flex-start;
    transition: background-color 0.3s;
    cursor: pointer;
    
}

.section-contact-form{
display: flex
;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: flex-start;
    justify-content: flex-start;
    align-items: stretch;
}

.section-contact-form .img{
  width: 50vw;
  height: auto;
  align-self: stretch;
  overflow: hidden;
  position: relative;
}

.section-contact-form .img .cctv-frame {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}

.section-contact-form .img .cctv-frame video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.section-contact-form .form{
padding: 4vw 3.33vw;
    display: flex
;
    gap: 1.25vw;
    flex-direction: column;
    align-content: flex-start;
    align-items: stretch;
    justify-content: flex-start;
        width: 50vw;
        height: fit-content;
}

.section-contact-form .form h2{
  margin:0;
  color: #8193A4;
  font-size: 2.92vw;
  font-family: Roboto Mono;
  font-weight: 400;
  text-transform: uppercase;
  line-height: 3.5vw;
  letter-spacing: 0.03vw;
  word-wrap: break-word;
  
}


.ripple {
  position: absolute;
  width: 100px;
  height: 100px;
  background-color: #4c657d;
  border-radius: 50%;
  transform: scale(0);
  opacity: 0;
  pointer-events: none;
  z-index: 0;
  transition: transform 1.2s ease-out, opacity 0.6s ease-out;
}





form {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: flex-start;
    justify-content: flex-start;
    contain-intrinsic-block-size: auto 100px;
    gap: 1vw;
}

    .form-group {
      position: relative;
    }

    input[type="text"],
    input[type="email"],
    textarea {
      width: 100%;
      padding: 1.2rem 1rem 0.4rem;
      border-radius: 8px;
      background: #1E2832;
      color: #8193A4;
      font-family: "Roboto Mono", monospace;
      font-size: 1rem;
      border: 0;
      transition: border-color 0.3s;
      max-width: 100%;
    }

    input:focus,
    textarea:focus {
      outline: none;
    }

.form-file{
  display: flex
;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    gap: 0.83vw;
    align-content: center;

}
    
    .form-file label{
      all:unset;
            color: #8193A4;
 font-size: 0.94vw;
      pointer-events: none;
      transition: all 0.2s ease;
      background: #1E2832;
      padding: 0 0.3rem;
        font-family: "Roboto Mono", monospace;
  font-weight: 400;
  text-transform: uppercase;
    }

    label {
      position: absolute;
      left: 1vw;
      top: 50%;
      transform: translateY(-50%);
      color: #8193A4;
      font-size: 1rem;
      pointer-events: none;
      transition: all 0.2s ease;
      background: #1E2832;
      padding: 0 0.3rem;
      font-family: "Roboto Mono", monospace;
      font-weight: 400;
      text-transform: uppercase;
    }

    textarea + label {
      top: 1.2rem;
      transform: none;
    }
    textarea {
      vertical-align: top;
    }

    input:focus + label,
    input:not(:placeholder-shown) + label,
    textarea:focus + label,
    textarea:not(:placeholder-shown) + label {
      top: 0;
      transform: translateY(-50%);
      color: rgba(255, 255, 255, 0.60);
      font-size: 0.73vw;
      font-family: "Roboto Mono", monospace;
      font-weight: 400;
      text-transform: uppercase;
      line-height: 1.2vw;
      word-wrap: break-word;
    }


    .form-policy {
color: rgba(255, 255, 255, 0.60);
    font-size: 0.94vw;
    font-family: Roboto Mono;
    font-weight: 400;
    text-transform: uppercase;
    line-height: 1.5vw;
    word-wrap: break-word;
    display: flex
;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: flex-start;
    align-items: center;
    gap:0.83vw;
    }

    .form-policy input {

    width: 1vw;
    height: 1vw;
    padding-left: 0.78vw;
    padding-right: 0.78vw;
    padding-top: 0.42vw;
    padding-bottom: 0.42vw;
    background:  #1E2832;
    border-radius: 0.52vw;
    }

    .form-policy label{
      all:unset;
      position: static !important;
      top: auto !important;
      transform: none !important;
      color: #8193A4 !important;
    font-size: 1rem !important;
    pointer-events: none;
    transition: all 0.2s ease !important;
    background: #1E2832 !important;
    padding: 0 0.3rem !important;
    font-family: "Roboto Mono", monospace !important;
    font-weight: 400 !important;
    text-transform: uppercase !important;
    }

    .form-policy label a {
      color: #4C657D !important;
      text-decoration: none !important;
      pointer-events: auto !important;
      cursor: pointer !important;
    }
    .form-policy label a:hover {
      color: #8193A4 !important;
    }

    form button {

        font-family: "Roboto Mono", monospace;;
  font-weight: 400;
  text-transform: uppercase;

  border-radius: 100vw;
    width: fit-content;
    position: relative;
    display: inline-flex
;
    align-items: center;
    padding: 0.5vw 1vw;
    font-size: 0.9vw;
    color: white;
    background: #4C657D;
    /* clip-path: path("M192.044 9.28286V9.78286H192.544H196.5V47.2171H192.544H192.044V47.7171V51.8586H188.166H187.666V52.3586V56.5H183.71H13.2897H9.33373V52.3586V51.8586H8.83373H4.95595V47.7171V47.2171H4.45595H0.5V9.78286H4.45595H4.95595V9.28286V5.14143H8.83373H9.33373V4.64143V0.5H13.2897H183.71H187.666V4.64143V5.14143H188.166H192.044V9.28286Z"); */
    border: var(--border-solid-black);
    transition: filter 0.3s ease;
    cursor: var(--cursor-pointer) !important;
    }


.info-button{
  display: flex
;
    justify-content: space-between;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    align-items: center;
}

.info{
padding: 0.78vw;
border-radius: 0.63vw;
outline: 0.05vw #8193A4 dashed;
justify-content: center;
align-items: center;
gap: 0.42vw;
display: inline-flex;
}


.info span{
  color:  #8193A4;
  font-size: 0.83vw;
  font-family: Roboto Mono;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.33vw;
  word-wrap: break-word;
}

.uslugi-box.hovering .ripple {
  transform: scale(15);
  opacity: 1;
}

.uslugi-box .text {
  transition: opacity 0.25s ease;
}
.uslugi-box.hovering .text {
  opacity: 0;
  pointer-events: none;
}
.uslugi-box::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  width: 10vw;
  height: 10vw;
  background-image: url(img/logo_np.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  filter: brightness(0);
  z-index: 2;
  opacity: 0;
  transition: opacity 0.2s ease 0.15s, transform 0.2s ease 0.15s;
}
.uslugi-box.hovering::after {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.uslugi-box.fading .ripple {
  transform: scale(0);
  opacity: 0;
}


.section-uslugi-box .uslugi-box:nth-child(1),
.section-uslugi-box .uslugi-box:nth-child(2),
.section-uslugi-box .uslugi-box:nth-child(3){
       width: 28.42vw;
}

.section-uslugi-box .uslugi-box:nth-child(4),
.section-uslugi-box .uslugi-box:nth-child(5),
.section-uslugi-box .uslugi-box:nth-child(6),
.section-uslugi-box .uslugi-box:nth-child(7){
  width: 21.1vw;
}

.uslugi-box .text{
    display: flex
;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: flex-start;
    justify-content: flex-start;
    align-items: flex-start;
}

.uslugi-box .text h3{
color:  #8193A4;
font-size: 1.25vw;
font-family: Roboto Mono;
font-weight: 600;
text-transform: uppercase;
line-height: 2vw;
word-wrap: break-word;
}

.uslugi-box .text p{
  align-self: stretch;
  color: rgba(255, 255, 255, 0.60);
  font-size: 0.83vw;
  font-family: Roboto Mono;
  font-weight: 400;
  text-transform: uppercase;
  line-height: 1.33vw;
  word-wrap: break-word;
}

.uslugi-box img{
  width: 4.11vw;
  height: 3.72vw;
}

.section-portfolio-project .nag-arrows{
  

  display: flex
  ;
      align-items: center;
      justify-content: space-between;
      align-content: center;
      flex-wrap: nowrap;
      flex-direction: row;
      padding:0;
}

.boxy .box-opinia {
  transform: scale(0.85);
  filter: blur(4px);
  opacity: 0.6;
  transition: all 0.4s ease;
  scroll-snap-align: center;
}

.boxy .box-opinia.active {
  transform: scale(1);
  filter: none;
  opacity: 1;
  z-index: 2;
}

.boxy {
  scroll-snap-type: x mandatory;
}

.section-about {
  align-self: stretch;
  background: transparent;
  overflow: hidden;
  width: 100%;
  gap: 4.17vw;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;
  padding: 5vw 1.04vw 9.38vw 1.04vw;
  position: relative;
}


.wkrotce-grafika video{
  object-fit: fill;
  margin-top: 0;
  align-self: stretch;
  border-radius: 0.6vw;
  position: absolute;
  z-index: 9;
  top: 8vw;
  width: 34vw;
  height: 24vw;
  left: 33vw;
  pointer-events: none;
  filter: saturate(0.85) contrast(1.1) brightness(0.92);
  animation: crtFlicker 10s infinite;
}

.tags-1{
  align-self: stretch;
  justify-content: space-between;
  align-items: center;
  display: inline-flex;

  color: black;
  font-size: 2.08vw;
  font-family: "Roboto Mono", monospace;;
  font-weight: 400;
  text-transform: uppercase;
  line-height: 2.71vw;
  letter-spacing: 0.02vw;
  word-wrap: break-word;
}
.text-icons{
  color: rgba(255, 255, 255, 0.60);
font-size: 2.5vw;
font-family: Roboto Mono;
font-weight: 400;
text-transform: uppercase;
line-height: 4vw;
word-wrap: break-word;
  display: flex
;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-content: flex-start;
  align-items: flex-start;
  gap: 0.73vw 0.94vw;
}

.tags-text{
  color: rgba(255, 255, 255, 0.60);
  font-size: 2.08vw;
  font-family: "Roboto Mono", monospace;;
  font-weight: 400;
  text-transform: uppercase;
  line-height: 2.71vw;
  letter-spacing: .02vw;
  word-wrap: break-word;
  display: flex
;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;
  width: 71.88vw;
  position:relative;
  padding: 0;
}

.tags-text h4{
  position: absolute;
  top: 90%;
    left: 2vw;
    transform: rotate(270deg) translateY(-100%);
    transform-origin: top left;
}

.tags-text .tags-1 h4{
position:static;
transform: rotate(0) translateY(0%);
}

.tags-text .tags-1{
  position: absolute;
  top: 80%;
  right: -18.6vw;
  transform: rotate(270deg) translateY(-100%);
  transform-origin: top left;
  align-self: stretch;
  justify-content: center;
  align-items: center;
  display: inline-flex
;
  color: #000;
  font-size: 2.08vw;
  font-family: "Roboto Mono", monospace;;
  font-weight: 400;
  text-transform: uppercase;
  line-height: 2.71vw;
  letter-spacing: .02vw;
  word-wrap: break-word;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 3.04vw;
  height: fit-content;
}

.text-icons img{
  width:3.91vw;
  height: 3.91vw;
}


.strzalka{
  display: var(--display);
  width:4.9vw;
  height: 7.66vw;
  bottom: 0;
  right: 6.25vw;
  animation: 0;
  animation: floatPosition2 1.5s ease-in-out infinite alternate;
}


@keyframes floatPosition2 {
  to {
    bottom: 1.04vw;
    right: 7.3vw;
  }
}

.dyskietki, .cd{
  display: none
  ;
      gap: 0;
      flex-direction: row;
      flex-wrap: nowrap;
      justify-content: center;
      align-items: center;
  
}

.vhs{
  display:none;
  gap:0;
}

.dyskietka img{
  height: 30.99vw;
  width:30.1vw;
}

.kaseta img{
  height: 33.65vw;
  width:55vw;
}

.plyta img{
  height: 33.65vw;
  width:32.24vw;
}
.section-prace{
  display: flex;
  ;
      gap: 0;
      flex-direction: column;
      align-items: flex-start;
      align-content: flex-start;
      justify-content: flex-start;
      flex-wrap: nowrap;
      width:100%;
}

.typing-text-on-scroll {
  border-right: 2px solid black;
  animation: blink-caret 0.75s step-end infinite;
  overflow: hidden;
}

/* Miganie kursora */
@keyframes blink-caret {
  0%, 100% {
    border-color: black;
  }
  50% {
    border-color: transparent;
  }
}

/* Gdy pisanie zakończone – usuń kursor */
.typing-text-on-scroll.done {
  border-right: none;
  animation: none;
}
.animate-on-scroll {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1.2s ease-out, transform 1.2s ease-out;
}

.animate-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.more{
  display:none;
  gap:1.04vw;
  padding: 0.63vw 0;
  color: #191919;
  font-size: 1vw;
  font-family: "Roboto Mono", monospace;;
  font-weight: 400;
  text-transform: uppercase;
  line-height: 2.5vw;
  word-wrap: break-word;
  justify-content: center;
  align-items: center;
  align-content: center;
  flex-wrap: nowrap;
  flex-direction: row;
  width: 100%;
}

.more img{
  transition: all .3s ease;
  animation: move-more 1s ease-in-out infinite; /* Animacja trwa 1 sekundę i powtarza się w kółko */
  width: 1.58vw;
  height: 2.36vw;

}

.more-2 img{
  transition: all .3s ease;
  animation: move-more 1s ease-in-out infinite; /* Animacja trwa 1 sekundę i powtarza się w kółko */
  width: 1.41vw;
  height: 1.82vw;

}




/* Definiowanie animacji przesuwania w lewo i prawo */
@keyframes move-more {
  0% {
    transform: translateX(0);
  }
  25% {
    transform: translateY(-0.26vw); /* Przesunięcie w prawo */
  }
  75% {
    transform: translateY(0.26vw); /* Powrót na początek */
  }
  100% {
    transform: translateY(0); /* Powrót na początek */
  }
}

#section-naklejki {
  padding-top: 6.25vw;
  width: 100%;
  height: 40.52vw;
  position: relative;
  user-select: none;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;
  display: flex;
  display: var(--display);
}

#section-naklejki .logo{
width: 95.89vw;
height: 41.09vw;
}

.draggable {
  position: absolute;
  max-width: 22.66vw;
  max-height: 13.13vw;
  user-select: none;
  -webkit-user-drag: none;
  cursor: var(--cursor-grab) !important;
}

.dragging {
  opacity: 1;
  cursor: var(--cursor-grab) !important;
}

.video-wrapper {
  position: relative;
  overflow: hidden;
  cursor: var(--cursor-pointer) !important;
  transform: scale(1);
  transition: transform 0.3s ease;
  width: 30.1vw;
  height: 30.99vw;
}

.video-wrapper video {
  position: absolute;
  width: 22.2vw;
  height: 16.4vw;
  border-radius: .73vw;
  position: absolute;
  bottom: 1.3vw;
  left: 4.6vw;
  z-index: 5;
  object-fit: cover;
  cursor: var(--cursor-pointer) !important;
}

.video-wrapper img {
  position: relative;
  z-index: 1;
  width: 30.1vw;
  height: 30.99vw;
}

.vhs .video-wrapper {
  position: relative;
  overflow: hidden;
  cursor: var(--cursor-pointer) !important;
  transform: scale(1);
  transition: transform 0.3s ease;
  width: 55vw;
  height: 33.65vw;
}

.vhs .video-wrapper video {
  position: absolute;
  width: 22.92vw;
  height: 13.8vw;
  top: 10.7vw;
  left: 16vw;
  border-radius: 0.47vw;
  z-index: 5;
  object-fit: cover;
  opacity: 1;
  filter: contrast(1.1) saturate(0.8);
}

.vhs .video-wrapper img {
  position: relative;
  z-index: 1;
  width: 55vw;
  height: 33.65vw;
}


.video-wrapper {
  position: relative;
  overflow: hidden;
  cursor: var(--cursor-pointer) !important;
  transform: scale(1);
  transition: transform 0.3s ease;
  width: 30.1vw;
  height: 30.99vw;
}

.video-wrapper video {
  position: absolute;
  width: 22.2vw;
  height: 16.4vw;
  border-radius: .73vw;
  position: absolute;
  bottom: 1.3vw;
  left: 4.6vw;
  z-index: 5;
  object-fit: cover;
}

.video-wrapper img {
  position: relative;
  z-index: 1;
  width: 30.1vw;
  height: 30.99vw;
}

/* Stylowanie przeźroczystego popupa */
.popup-wideo {
  display: none; /* Początkowo ukrywamy popup */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0); /* Przeźroczyste tło */
  z-index: 9999; /* Najwyższy z-index, aby popup był nad wszystkim */
  justify-content: center;
  align-items: center;
  transition: all 0.5s ease-in-out;
}

/* Stylowanie wideo w popupie (na początku wideo jest wyśrodkowane) */
.popup-wideo video {
  position: absolute;
  object-fit: cover;
  transition: all 1s ease-in-out;
}
#video-popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  background-color: rgba(0, 0, 0, 0.8);
  justify-content: center;
  align-items: center;
  z-index: 99999999999999;
  transition: background-color 0.5s ease;
}


#video-popup video {
  transition: all 1s ease;
  z-index: 10;
  object-fit: cover;
}



.section-portfolio-project video{
  display: flex
  ;
      flex-direction: row;
      flex-wrap: nowrap;
      justify-content: space-between;
      align-items: flex-end;
      width: 100%;
}

.section-portfolio-project p{
  width: 41.61vw;
  color: #4C4C4C;
  font-size: 1.25vw;
  font-family: "Roboto Mono", monospace;;
  font-weight: 400;
  line-height: 1.63vw;
  letter-spacing: 0.01vw;
  word-wrap: break-word;
}

.portfolio-projekty-nag{
  display:none;
}

.active{
  display:flex;
}

/* Animacja przesuwania z lewej */
@keyframes slideFromLeft {
  0% {
    transform: translateX(-100%);  /* Początkowa pozycja poza ekranem po lewej stronie */
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

/* Animacja przesuwania z prawej */
@keyframes slideFromRight {
  0% {
    transform: translateX(100%);  /* Początkowa pozycja poza ekranem po prawej stronie */
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

/* Style dla aktywnych dyskietek */
.dyskietki.active {
  animation: slideFromRight 1s ease-out forwards;  /* Wjeżdżanie z prawej strony */
}

/* Style dla aktywnych VHS */
.vhs.active {
  animation: slideFromLeft 1s ease-out forwards;  /* Wjeżdżanie z lewej strony */
}

/* Opcjonalnie, jeśli chcesz dodać domyślną pozycję poza ekranem */
.dyskietki, .vhs {
  opacity: 0;
  transform: translateX(100%);  /* Domyślnie ukryte po prawej stronie */
}

.jcarousel-dyskietki {
  overflow: hidden;
  position: relative;
  width: 100%;
}

.jcarousel-dyskietki ul {
  display: flex;
  width: max-content;
}
/* Podstawowy styl jCarousel */
.dyskietki-carousel {
  position: relative;
  overflow: hidden;
  width: 100%;
}

.dyskietki-carousel ul {
  display: flex;
  padding: 0;
  margin: 0;
  list-style: none;
}

.dyskietki-carousel li {
  flex: 0 0 auto;
  margin-right: 20px; /* odstęp między elementami */
}

.section-portfolio-project{
  display: flex
;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: flex-start;
    justify-content: flex-start;
    align-items: flex-start;
    width: 100%;
}

.video-wrapper video {
  transition: transform 0.3s ease;
}

.video-wrapper:hover video {
  transform: scale(1.05); /* Delikatne powiększenie o 5% */
}

.mode-toggle{
  color: #fff;
  font-size: 1.25vw;
  font-family: "Roboto Mono", monospace;;
  font-weight: 400;
  text-transform: uppercase;
  line-height: 1.88vw;
  word-wrap: break-word;
  position: fixed;
  bottom: 0;
  left: 0;
  margin: 1.04vw;
  display: flex;
  gap: .26vw;
  z-index: 99999999999;
  background: var(--najs-gradient);
  flex-wrap: nowrap;
  flex-direction: row;
  align-content: center;
  justify-content: center;
  align-items: center;
  padding: 0.26vw;
  border-radius: var(--border-radius);
  cursor: var(--cursor-pointer) !important;
}

.mode-toggle img{
  width:1.41vw;
  height:1.41vw;
}

.section-prace-biw{
display: flex;
flex-direction: column;
    flex-wrap: nowrap;
    align-content: flex-start;
    justify-content: flex-start;
    align-items: flex-start;
    width:100%;
}

.main .nag-text{
  display:flex;

}

.main .avatar-2 {
  width:  33.33vw;
  height: 33.33vw;
  position: relative;
  opacity: 0.80;
  background: rgba(0, 0, 0, 0.50);
  /* background-image: url(https://placehold.co/199x153); */
}

.main-2{
  align-items: center !important;
}

.main .avatar-2 video,
.main .avatar-2 img {
  width: 33.33vw;
  height: 33.33vw;
  object-fit: cover;
  /* border-radius: 8vw; */
}

.content .button-wrapper {
  display: inline-flex
;
  align-items: center;
  justify-content: center;
  gap: .52vw;
  padding: 0 .26vw;
  position: relative;
  flex: 0 0 auto;
  background: transparent;
  background-color: transparent;
  color: #515055;
  font-size: 1.25vw;
  font-family: "Roboto Mono", monospace;
  font-weight: 400;
  text-transform: uppercase;
  line-height: 1.88vw;
  word-wrap: break-word;
  border-radius: var(--border-radius);
}

.main-2 .content {
  width: 34vw !important;
  gap: 1.25vw;
}

.icons-program {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    justify-content: flex-start;
    align-items: center;
    gap: 1vw;
}

.program-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.2vw;
  height: 2.2vw;
  flex-shrink: 0;
}

.program {
  max-width: 100%;
  max-height: 100%;
  opacity: 0.8;
  object-fit: contain;
}

.program[alt="claudecode-color"] {
  max-width: 130%;
  max-height: 130%;
}

.main-3{
padding: 5.83vw 0 !important;
margin-top: 0 !important;
border-bottom: #3C5064 solid 1px !important;
}

.avatar-text{
  display: flex
  ;
      flex-direction: column;
      flex-wrap: nowrap;
      justify-content: center;
      align-items: center;
  
}

.column-logo {
  display: flex
;
  gap: 1.25vw;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: flex-start;
  justify-content: flex-start;
  align-items: flex-start;
}

.main-2 .text{
  width: 37.34vw !important;
}

.avatar-text h2 {
  align-self: stretch;
  text-align: right;
  color: #3C5064;
  font-size: 1.88vw;
  font-family: Roboto Mono;
  font-weight: 400;
  text-transform: uppercase;
  line-height: 3vw;
  word-wrap: break-word;
  width: 100%;
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: flex-end;
}

.main .tags{
  width: fit-content;
}

/* ════════════════════════════════
   TV GUIDE — sekcja portfolio
   ════════════════════════════════ */
.tv-guide {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5vw;
  width: 100%;
  padding: 2vw 0 3vw;
}

.tv-channel {
  display: flex;
  flex-direction: column;
  background: #0a0a0a;
  border: 1px solid #1c1c1c;
  position: relative;
  transition: border-color 0.2s;
}
.tv-channel:hover { border-color: #3C5064; }

/* — Górny pasek — */
.tv-top {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.45vw 0.7vw;
  background: #0f0f0f;
  border-bottom: 1px solid #1c1c1c;
  font-family: "Roboto Mono", monospace;
  font-size: 0.5vw;
  gap: 0.5vw;
}
.tv-ch-num {
  color: #4C657D;
  font-size: 0.6vw;
  letter-spacing: 0.05vw;
}
.tv-now {
  display: flex;
  align-items: center;
  gap: 0.3vw;
  color: #555;
  flex: 1;
  justify-content: center;
  letter-spacing: 0.04vw;
  visibility: hidden;
}
.tv-channel:hover .tv-now  { visibility: visible; }
.tv-idle {
  position: absolute; left: 50%; transform: translateX(-50%);
  color: #3a3a3a; letter-spacing: 0.04vw; white-space: nowrap;
}
.tv-channel:hover .tv-idle { display: none; }
.tv-dot {
  color: #E31E24;
  animation: cctvBlink 1.2s step-end infinite;
  font-size: 0.45vw;
}
.tv-sig { color: #2a3a2a; font-size: 0.42vw; }

/* — Ekran — */
.tv-screen {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: #000;
}
.tv-screen video {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  position: relative !important;
  top: auto !important; left: auto !important;
  transform: none !important;
  filter: saturate(0.8) contrast(1.05) brightness(0.9) !important;
  animation: crtFlicker 8s infinite !important;
}

/* Linie skanowania */
.tv-scanline {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg, transparent 0px, transparent 2px,
    rgba(0,0,0,0.15) 2px, rgba(0,0,0,0.15) 4px
  );
  pointer-events: none;
  z-index: 2;
}

/* Poziomy pasek glitchu — przesuwa się w dół */
.tv-glitch-bar {
  position: absolute;
  left: 0; right: 0;
  height: 15%;
  background: linear-gradient(transparent, rgba(255,255,255,0.025), transparent);
  animation: tvScan 5s linear infinite;
  pointer-events: none;
  z-index: 3;
}
@keyframes tvScan {
  0%   { top: -15%; }
  100% { top: 110%; }
}

/* — Dolna informacja — */
.tv-info {
  padding: 0.7vw 0.8vw 0.8vw;
  display: flex;
  flex-direction: column;
  gap: 0.4vw;
  background: #0a0a0a;
  border-top: 1px solid #1c1c1c;
}
.tv-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5vw;
}
.tv-title {
  font-family: "Roboto Mono", monospace;
  font-size: 0.75vw;
  color: #d0d0d0;
  font-weight: 400;
  margin: 0;
  line-height: 1.3;
  letter-spacing: 0.01vw;
  flex: 1;
}
.tv-tune {
  font-family: "Roboto Mono", monospace;
  font-size: 0.48vw;
  color: #4C657D;
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid #4C657D;
  padding: 0.2vw 0.4vw;
  transition: color 0.15s, border-color 0.15s;
  flex-shrink: 0;
  align-self: flex-start;
}
.tv-tune:hover { color: #8193A4; border-color: #8193A4; }
.tv-tune--soon { color: #3C5064; border-color: #1e2d3d; cursor: default; pointer-events: none; }

.tv-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3vw;
}
.tv-tag {
  font-family: "Roboto Mono", monospace;
  font-size: 0.42vw;
  color: #3C5064;
  letter-spacing: 0.02vw;
}

.praca{
  align-self: stretch;
  justify-content: space-between;
  align-items: flex-start;
  display: inline-flex
;
  flex-direction: column;
  flex-wrap: nowrap;
  width: 100%;
  border-top: #3C5064 solid 1px;
  border-bottom: #3C5064 solid 1px;
  position: relative;
  height: 31.8vw;
  overflow-y: auto;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none;  /* IE i Edge */
  cursor: s-resize;
}

.praca::-webkit-scrollbar {
  display: none; /* Chrome, Safari */
}

.tag-text{
  width: 31.51vw;
  display: flex
  ;
      flex-direction: column;
      flex-wrap: nowrap;
      align-content: flex-start;
      justify-content: flex-start;
      align-items: flex-start;
      gap: .83vw;
      position: sticky;
      top: 0;
      background-color: transparent;
}

.video-button{
  display: flex
  ;
      flex-direction: row;
      flex-wrap: nowrap;
      align-content: center;
      justify-content: center;
      align-items: center;
      gap:4vw;
}

.tags{
  display: flex
  ;
      flex-direction: row;
      flex-wrap: wrap;
      align-content: flex-start;
      justify-content: flex-start;
      align-items: center;
      gap: 0.5vw;
      width: 27.81vw;
}

.tag-text h2{
  align-self: stretch;
  color: #B4B4B6;
  font-size: 2.08vw;
  font-family: "Roboto Mono", monospace;;
  font-weight: 400;
  line-height: 2.71vw;
  letter-spacing: 0.02vw;
  word-wrap: break-word;
}

.more-button{
  color: #D9D9DA;
  font-size: 1.04vw;
  font-family: "Roboto Mono", monospace;;
  font-weight: 400;
  line-height: 1.56vw;
  word-wrap: break-word;
  display: flex
;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: flex-start;
  align-items: center;
  gap: 0.42vw;
  text-transform: uppercase;
  cursor: var(--cursor-pointer) !important;
}

.more-button img{
width: 0.83vw !important;
height: 0.73vw !important;
transition: all .3s ease;
}

.more-button:hover img{
  animation: move-frame-3 1s ease-in-out infinite;
}

.section-prace-biw .video video{
  width: 45.16vw;
  height: 25.5vw;
  border-radius: 0vw;
  object-fit: cover;
}

.nag-button{
  display: flex
  ;
      flex-direction: column;
      flex-wrap: nowrap;
      align-content: flex-start;
      justify-content: flex-start;
      align-items: flex-start;
      gap: 3.13vw;

}

.hidden-biw{
  display: var(--display);
}

.hidden-y2k{
  display: var(--display-2);
}

.more-2 {
  display: flex;
  gap: 1.04vw;
  padding: .63vw 0;
  color: #191919;
  font-size: 1vw;
  font-family: "Roboto Mono", monospace;;
  font-weight: 400;
  text-transform: uppercase;
  line-height: 2.5vw;
  word-wrap: break-word;
  justify-content: center;
  align-items: center;
  align-content: center;
  flex-wrap: nowrap;
  flex-direction: row;
  width: 100%;
}

.portfolio-text {
  width: 25.94vw;
  color: rgba(255, 255, 255, 0.60);
  font-size: 1.04vw;
  font-family: Roboto Mono;
  font-weight: 400;
  text-transform: uppercase;
  line-height: 1.67vw;
  word-wrap: break-word;
}

.section-rain {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1vw;
  width: 100%;
  margin-top: 8vw;
  padding: 0;
}

.rain {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 0;
  animation: rainFlicker 10s infinite;
}

@keyframes rainFlicker {
  0%,  89% { opacity: 1;    filter: sepia(0.85) hue-rotate(185deg) saturate(0.55) brightness(0.80) contrast(1.12); }
  90%       { opacity: 0.88; filter: sepia(0.85) hue-rotate(185deg) saturate(0.55) brightness(0.62) contrast(1.12); }
  91%       { opacity: 1;    filter: sepia(0.85) hue-rotate(185deg) saturate(0.55) brightness(0.80) contrast(1.12); }
  94%       { opacity: 0.94; filter: sepia(0.85) hue-rotate(185deg) saturate(0.55) brightness(0.71) contrast(1.12); }
  100%      { opacity: 1;    filter: sepia(0.85) hue-rotate(185deg) saturate(0.55) brightness(0.80) contrast(1.12); }
}

/* ── CCTV frame ── */
.cctv-frame {
  position: relative;
  overflow: hidden;
  background: #000;
  border: 1px solid #3C5064;
  aspect-ratio: 16/9;
}

/* Scanlines */
.cctv-scanlines {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent 0px,
    transparent 2px,
    rgba(0,0,0,0.18) 2px,
    rgba(0,0,0,0.18) 4px
  );
  pointer-events: none;
  z-index: 3;
}

/* Subtelny niebieski tint spójny z paletą strony */
.cctv-frame::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(60, 80, 100, 0.12);
  pointer-events: none;
  z-index: 2;
}

/* Górny pasek */
.cctv-top {
  position: absolute;
  top: 0; left: 0; right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.4vw 0.6vw;
  background: linear-gradient(180deg, rgba(0,0,0,0.75) 0%, transparent 100%);
  z-index: 4;
  font-family: "Roboto Mono", monospace;
  font-size: 0.55vw;
  color: #4C657D;
}

.cctv-rec { display: flex; align-items: center; gap: 0.25vw; }
.cctv-dot {
  color: #E31E24;
  animation: cctvBlink 1s step-end infinite;
  font-size: 0.5vw;
  line-height: 1;
}
@keyframes cctvBlink { 0%,100% { opacity: 1; } 50% { opacity: 0; } }

.cctv-id   { color: #8193A4; letter-spacing: 0.05vw; font-size: 0.5vw; }
.cctv-live { color: #E31E24; font-size: 0.5vw; letter-spacing: 0.03vw; }

/* Dolny pasek */
.cctv-bottom {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.4vw 0.6vw;
  background: linear-gradient(0deg, rgba(0,0,0,0.75) 0%, transparent 100%);
  z-index: 4;
  font-family: "Roboto Mono", monospace;
  font-size: 0.45vw;
  color: #4C657D;
  gap: 0.5vw;
}

.cctv-loc    { flex: 1; color: rgba(76,101,125,0.7); }
.cctv-time   { flex: 0; white-space: nowrap; letter-spacing: 0.03vw; color: #8193A4; }
.cctv-signal { flex: 0; white-space: nowrap; color: rgba(76,101,125,0.6); letter-spacing: 0.02vw; }

/* Numer kanału */
.cctv-ch {
  position: absolute;
  bottom: 0.45vw;
  left: 0.6vw;
  font-family: "Roboto Mono", monospace;
  font-size: 0.4vw;
  color: rgba(76,101,125,0.4);
  z-index: 4;
  pointer-events: none;
}

/* Narożniki viewfindera */
.cctv-corner {
  position: absolute;
  width: 0.8vw;
  height: 0.8vw;
  border-color: rgba(76,101,125,0.5);
  border-style: solid;
  z-index: 4;
  pointer-events: none;
}
.cctv-tl { top: 0.5vw; left: 0.5vw;  border-width: 1px 0 0 1px; }
.cctv-tr { top: 0.5vw; right: 0.5vw; border-width: 1px 1px 0 0; }
.cctv-bl { bottom: 0.5vw; left: 0.5vw;  border-width: 0 0 1px 1px; }
.cctv-br { bottom: 0.5vw; right: 0.5vw; border-width: 0 1px 1px 0; }

.portfolio-text p{
  margin:0;
}

.praca-container{
  display: flex
  ;
      flex-direction: row;
      flex-wrap: nowrap;
      align-content: flex-start;
      justify-content: space-between;
      align-items: flex-start;
      width: 100%;
      padding: 3.13vw 0 3.13vw 1.56vw;
      -webkit-backdrop-filter: blur(15px) saturate(200%);
      backdrop-filter: blur(15px) saturate(200%);
}
/* Sticky kontener */
.praca-container {
  position: sticky;
  top: 0;
  z-index: 1;
  transition: opacity 0.6s ease, transform 0.6s ease;
  transform: translateY(20px);
  opacity: 0;
}
.praca-container.visible {
  transform: translateY(0);
  opacity: 1;
}

/* Każdy kolejny kontener ma wyższy z-index, żeby nachodził na poprzedni */
.praca-container[data-praca="0"] {
  z-index: 1; 
}

.praca-container[data-praca="1"] { 
  
  z-index: 2; 
}

.praca-container[data-praca="2"] { 
  z-index: 3; 
}

.content-wrapper-page {
  display: flex
;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: flex-start;
  justify-content: flex-start;
  align-items: flex-start;
}

.content-wrapper-single {
  display: flex
  ;
      flex-direction: column;
      flex-wrap: nowrap;
      align-content: flex-start;
      justify-content: flex-start;
      align-items: center;
      width: 100%;
      gap: 0.83vw;
}

.content-wrapper-page p,
.content-wrapper-single p
{
  width: 41.61vw;
  color: #4c4c4c;
  font-size: 1.25vw;
  font-family: "Roboto Mono", monospace;;
  font-weight: 400;
  line-height: 1.63vw;
  letter-spacing: .01vw;
  word-wrap: break-word;
}

.content-wrapper-page h2,
.content-wrapper-single h2
{
  width: 41.61vw;
  color: black;
  font-size: 2.00vw;
  font-family: "Roboto Mono", monospace;;
  font-weight: 400;
  line-height: 1.63vw;
  letter-spacing: .01vw;
  word-wrap: break-word;
  padding: 0.78vw 0;
}

.content-wrapper-wp{
  width: 100%;
  display: flex
;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: flex-start;
  justify-content: flex-start;
  align-items: center;
  gap: 3.13vw;
  padding-top: 3.13vw;
}

.content-wrapper-wp-single{
  width: 100%;
  display: flex
;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: flex-start;
  justify-content: flex-start;
  align-items: center;
  gap: 3.13vw;
}

.section-content-wp{
  display: flex
  ;
      flex-direction: column;
      flex-wrap: nowrap;
      align-content: flex-start;
      justify-content: flex-start;
      align-items: flex-start;
      width: 100%;
      padding-bottom: 5vw;
      gap: 0.78vw;
}


.section-content-wp .tagline-wrapper {
  display: inline-flex
  ;
      align-items: flex-start;
      position: relative;
      flex: 0 0 auto;
      flex-direction: column;
      align-content: flex-start;
      justify-content: flex-start;
      flex-wrap: nowrap;
}

.section-content-wp .nag-arrows{
display: flex
;
    align-items: flex-end;
    justify-content: space-between;
    align-content: center;
    flex-wrap: nowrap;
    flex-direction: row;
    padding: 0;
    gap: 5.21vw;
}




.section-content-wp video{
  display: flex
  ;
      flex-direction: row;
      flex-wrap: nowrap;
      justify-content: space-between;
      align-items: flex-end;
      width: 100%;
}

.section-content-wp p{
  width: 41.61vw;
  color: #B4B4B6;
  font-size: 1.25vw;
  font-family: "Roboto Mono", monospace;;
  font-weight: 400;
  line-height: 1.63vw;
  letter-spacing: 0.01vw;
  word-wrap: break-word;
  position:relative;
  margin:0;
}

.content-wrapper-single p{

  color: #4c4c4c;
  font-size: 2.00vw;
  font-family: "Roboto Mono", monospace;;
  font-weight: 400;
  line-height: 2.60vw;
  letter-spacing: .01vw;
  word-wrap: break-word;
  position: relative;
  margin: 0;
  width: 100%;
  padding: 5.83vw 30vw;
  display: flex
;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  align-items: center;
  justify-content: center;

}
.section-img{
  width: 100%;
  height: 40.36vw;
  overflow: hidden;
  border-radius: var(--border-radius-2);
  }

.section-img img{
  object-fit: cover;
  height: 40.36vw;
  border-radius: var(--border-radius-2);
}


body .is-layout-flex {
  display: flex
;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: space-evenly;
  align-items: center;
  gap: 0.83vw;
  margin: 0;
  width: 100%;
}

.size-full{
  width: 100%;
  margin: 0;
}
.wp-block-image img {
  box-sizing: border-box;
  height: auto;
  width: 100%;
  vertical-align: bottom;
  border-radius: var(--border-radius-2);
}

.content-wrapper-single p::before {
  content: none;
}

.categories{
  display: flex
;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    gap: 0.52vw;
}
.categories .tag p{
  width: fit-content;
}

.categories .tag{
  height: fit-content;
  cursor: var(--cursor-pointer) !important;
}



.categories .wrapper-tag-icon {
  width:fit-content;
}

.section-portfolio-flexbox{
display: flex
;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: flex-start;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
    padding-top: 1.56vw;
gap: 7.19vw 0vw;
}

.section-portfolio-flexbox .box{
display: flex;
  opacity: 0;
      gap: 2.08vw;
      flex-direction: column;
      flex-wrap: nowrap;
      justify-content: flex-start;
      align-content: flex-start;
      align-items: flex-start;
      width: 48.28vw;
      outline: 0;
      visibility: hidden;
      box-shadow: none;
      background-color: transparent;
      transform: translateY(30px) scale(0.95);  /* Początkowa pozycja i skalowanie */
      transition: opacity 0.4s ease-out, transform 0.4s ease-out; /* Płynniejsze przejście */
}

.box.visible {
  display: flex;
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
  height: fit-content;
  width: 29.69vw;
  visibility: visible; /* <--- Box staje się widoczny */
  max-height: 1000px; /* <--- powinno być większe niż typowa wysokość boxa */
}


.section-portfolio-flexbox img{
  width: 29.69vw;
  height: 19.79vw;
  border-radius: 5vw;
}

.tags-nag-button{
  display: flex
  ;
      gap: 3.13vw;
      flex-direction: column;
      flex-wrap: nowrap;
      align-content: flex-start;
      justify-content: flex-start;
      align-items: flex-start;
}

.tags-nag{
  display: flex
  ;
      gap: .83vw;
      flex-direction: column;
      flex-wrap: nowrap;
      align-items: flex-start;
      align-content: flex-start;
      justify-content: flex-start;
}

.section-portfolio-flexbox .tags .tag p{
  width: fit-content;
}

.tags-nag h2{
  align-self: stretch;
  color: #8193A4;
  font-size: 2.08vw;
  text-transform: uppercase;
  font-family: "Roboto Mono", monospace;;
  font-weight: 400;
  line-height: 2.71vw;
  letter-spacing: 0.02vw;
  word-wrap: break-word;
}

.active-tag{
  background: var(--najs-gradient-11);
  border: var(--color-white-black);
}

.active-tag p{
  color: white;
}




.error-404{
  width: 100% !important;
  padding: 3.38vw 2.94vw 0vw 2.78vw !important;
}

.error{
  display:flex !important;
}
.link-text span {
  display: inline-block;
  opacity: 1;  /* Początkowo tekst jest niewidoczny */
  transition: opacity 0.3s ease;  /* Dodajemy płynne przejście */
  position: relative;  /* Potrzebne do umiejscowienia kursora */
}

.glink{
  position: relative;
  width: fit-content;
  margin-top: -.05vw;
  font-family: "Roboto Mono", monospace;, Helvetica;
  font-weight: 400;
  color: #D9D9DA;
  font-size: .94vw;
  letter-spacing: 0;
  line-height: 1.5vw;
  white-space: nowrap;
  cursor: var(--cursor-pointer) !important;
}
a.glink{
  font-weight: 400 !important;
}

.section-footer-lang .glink{
  color: #fff;
  font-size: .83vw;
  font-family: "Roboto Mono", monospace;;
  font-weight: 400;
  text-transform: uppercase;
  line-height: 1.33vw;
  word-wrap: break-word;
  margin: 0;
}



.link-text.typing-text span.typing::after {
  content: '|';  /* Tworzymy kursor */
  position: absolute;
  right: -5px;  /* Ustawiamy kursor przy końcu tekstu */
  top: 0;
  animation: blink 1s step-end infinite;  /* Animacja migania kursora */
}

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

.link-text.typing-text span {
  opacity: 1;  /* Tekst staje się widoczny w trakcie animacji */
}

.wkrotce-grafika{
width: 100%;
    height: 50.16vw;
    overflow-x: hidden;
    overflow-y: hidden;
    margin-top: 2vw;
    position: relative;
    z-index: 0;
}

.laptop {
  max-width: 100%;
  height: auto;
  transition: transform 0.3s ease;
  position: relative !important;
  z-index: 99999;
  width: 40vw;
  top: 4vw !important;
  left: 0vw !important;
  filter: brightness(0.45) sepia(1) hue-rotate(175deg) saturate(0.45);
}

.wkrotce-grafika .light{
   transition: background 1.5s ease-in-out;
position: absolute;
    z-index: 1;
    width: 100%;
    height: 30vw;
    bottom: 8vw;
    background: #2A7B9B;
    background: linear-gradient(180deg, rgba(42, 123, 155, 0) 0%, rgba(60, 80, 100, 1) 50%, rgba(237, 221, 83, 0) 100%);

}

/* ── Terminal loader ── */
.terminal-loader.minimized .terminal-body { display: none; }
.terminal-loader.minimized { height: auto; }
.terminal-loader.maximized {
  top: 0 !important; left: 0 !important;
  transform: none !important;
  width: 100% !important; height: 100% !important;
}

.terminal-loader {
  position: absolute;
  top: 5vw;
  left: 50%;
  transform: translateX(-50%);
  width: 55vw;
  height: 30vw;
  background: #000;
  border: 1px solid #3C5064;
  border-radius: 0;
  z-index: 5000;
  font-family: "Roboto Mono", monospace;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 0 2vw rgba(76, 101, 125, 0.3);
  animation: crtFlicker 10s infinite;
}
.terminal-loader::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.08) 2px, rgba(0,0,0,0.08) 4px);
  pointer-events: none;
  z-index: 10;
}
.terminal-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.35vw 0.8vw;
  background: #3C5064;
  flex-shrink: 0;
}
.terminal-title {
  color: #fff;
  font-size: 0.7vw;
  text-transform: uppercase;
  letter-spacing: 0.05vw;
}
.terminal-win-btns { display: flex; gap: 0; }
.twin-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.4vw;
  height: 1vw;
  font-size: 0.6vw;
  color: #fff;
  background: #3C5064;
  cursor: pointer;
  transition: background 0.15s;
  font-family: "Roboto Mono", monospace;
}
.twin-btn:hover   { background: #4C657D; }
.twin-close:hover { background: #CA4A51; }
.terminal-body {
  padding: 1vw 1.2vw;
  flex: 1;
  font-size: 0.78vw;
  line-height: 1.5vw;
  color: #4C657D;
  overflow: hidden;
  position: relative;
  z-index: 1;
}
#terminal-output div { white-space: nowrap; overflow: hidden; color: #4C657D; }
#terminal-output .done { color: #6a8fa8; }
#terminal-output .err  { color: #CA4A51; }
/* Efekt pisania w section-about */
.about-typer {
  display: block;
  text-align: left;
  white-space: pre-wrap;
}
.about-typer::after {
  content: '▋';
  color: #4C657D;
  animation: termBlink 0.8s step-end infinite;
  margin-left: 1px;
}
.about-typer-done::after { display: none; }

.terminal-cursor {
  display: inline-block;
  color: #4C657D;
  font-size: 0.78vw;
  animation: termBlink 0.8s step-end infinite;
}
@keyframes termBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
.terminal-video-popup {
  position: absolute;
  width: 20vw;
  background: #000;
  border: 1px solid #3C5064;
  z-index: 6000;
  font-family: "Roboto Mono", monospace;
  box-shadow: 0.3vw 0.3vw 0 rgba(60,80,100,0.5);
  animation: popupIn 0.18s ease-out forwards, crtFlicker 10s infinite;
}
@keyframes popupIn  { from { transform: scale(0.88) translateY(0.5vw); opacity: 0; } to { transform: scale(1) translateY(0); opacity: 1; } }
@keyframes popupOut { from { transform: scale(1); opacity: 1; } to { transform: scale(0.88); opacity: 0; } }
.terminal-video-popup.closing { animation: popupOut 0.22s ease-in forwards; }
.terminal-video-popup::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.1) 2px, rgba(0,0,0,0.1) 4px);
  pointer-events: none;
  z-index: 10;
}
.terminal-video-popup .terminal-title {
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 0.55vw;
  color: #8193A4;
  text-transform: none;
  letter-spacing: 0;
}

/* Video body */
.terminal-video-body { width: 100%; aspect-ratio: 16/9; background: #000; overflow: hidden; position: relative; }
.terminal-video-body video {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  position: relative !important;
  top: auto !important;
  left: auto !important;
  transform: none !important;
  z-index: auto !important;
  animation: none !important;
  filter: none !important;
  margin: 0 !important;
  max-width: none !important;
  border-radius: 0 !important;
}

/* Video player controls */
.player-controls { background: #0d1117; border-top: 1px solid #1a2530; padding: 0.3vw 0.5vw; font-family: "Roboto Mono", monospace; }
.player-progress { width: 100%; height: 0.25vw; background: #1a2530; margin-bottom: 0.3vw; cursor: pointer; }
.player-progress-fill { height: 100%; width: 0%; background: #4C657D; transition: width 0.1s linear; }
.player-row { display: flex; align-items: center; gap: 0.5vw; font-size: 0.55vw; color: #4C657D; }
.player-btn { cursor: pointer; user-select: none; transition: color 0.15s; }
.player-btn:hover { color: #8193A4; }
.player-time { color: #8193A4; font-size: 0.55vw; }
.player-vol { cursor: pointer; }
.player-title { margin-left: auto; color: #3C5064; font-size: 0.5vw; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; max-width: 8vw; }

/* Popup window interactions */
.terminal-video-popup.minimized .terminal-video-body,
.terminal-video-popup.minimized .player-controls,
.terminal-video-popup.minimized .img-viewer-bar { display: none !important; }
.terminal-bar { cursor: grab; user-select: none; }
.terminal-bar:active { cursor: grabbing; }
.terminal-dialog .terminal-body { display: flex !important; }
.terminal-dialog-btn { cursor: pointer; font-size: 0.55vw !important; padding: 0.3vw 0.8vw !important; }
.twin-btn { cursor: pointer !important; }
.ivb-ic--liked { color: #e91e63 !important; }
.terminal-info-overlay {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: rgba(0,0,0,0.78);
  color: #8193A4;
  font-family: "Roboto Mono", monospace;
  font-size: 0.5vw;
  padding: 0.4vw 0.6vw;
  pointer-events: none;
  z-index: 10;
}

/* Unicons alignment in popup bars */
.ivb-icon .uil,
.ivb-ic .uil,
.player-btn .uil,
.player-vol .uil,
.terminal-title .uil {
  vertical-align: middle;
  font-size: inherit;
  line-height: 1;
}

/* Image viewer bar — wzorowane na Windows Photos bottom bar */
.img-viewer-bar {
  background: #141414;
  border-top: 1px solid #2c2c2c;
  padding: 0.38vw 0.55vw;
  display: flex;
  align-items: center;
  gap: 0.5vw;
  font-family: "Roboto Mono", monospace;
}
.ivb-left {
  display: flex;
  align-items: center;
  gap: 0.35vw;
  flex: 1;
  overflow: hidden;
}
.ivb-icon {
  font-size: 0.6vw;
  color: #4C657D;
  flex-shrink: 0;
  line-height: 1;
}
.ivb-name {
  font-size: 0.48vw;
  color: #4C657D;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ivb-icons {
  display: flex;
  align-items: center;
  gap: 0.5vw;
  padding: 0 0.4vw;
  border-left: 1px solid #2c2c2c;
  border-right: 1px solid #2c2c2c;
}
.ivb-ic {
  font-size: 0.6vw;
  color: #4C657D;
  cursor: default;
  transition: color 0.12s;
  line-height: 1;
  user-select: none;
}
.ivb-ic:hover { color: #8193A4; }
.ivb-btn {
  flex-shrink: 0;
  font-size: 0.45vw;
  font-family: "Roboto Mono", monospace;
  color: #4C657D;
  background: transparent;
  border: 1px solid #4C657D;
  text-decoration: none;
  padding: 0.18vw 0.45vw;
  border-radius: 0.15vw;
  transition: color 0.12s, border-color 0.12s;
  white-space: nowrap;
}
.ivb-btn:hover { color: #8193A4; border-color: #8193A4; }

.slider-track {
  display: flex;
  transition: transform 1s ease-in-out;
  will-change: transform;
  width: 100%;
    position: absolute;
    z-index: 999;
}


.slide {
  position: relative;
  min-width: 100%;
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}


@keyframes crtFlicker {
  0%,  89% { opacity: 1;    filter: saturate(0.85) contrast(1.1) brightness(0.92); }
  90%       { opacity: 0.88; filter: saturate(0.85) contrast(1.1) brightness(0.75); }
  91%       { opacity: 1;    filter: saturate(0.85) contrast(1.1) brightness(0.92); }
  94%       { opacity: 0.94; filter: saturate(0.85) contrast(1.1) brightness(0.84); }
  95%       { opacity: 1;    filter: saturate(0.85) contrast(1.1) brightness(0.92); }
  100%      { opacity: 1;    filter: saturate(0.85) contrast(1.1) brightness(0.92); }
}

/*
.wkrotce-grafika .light{
position: absolute;
    z-index: 9;
    width: 100%;
    bottom: -1vw;
}
    */

/* MOBILE */


@media only screen and (max-width: 1024px) {

  .main .column {
      display: flex
  ;
      align-items: center;
      justify-content: flex-start;
      position: relative;
      align-self: stretch;
      width: 100%;
      flex: 0 0 auto;
      flex-direction: column;
      flex-wrap: nowrap;
      align-content: center;
  }
  
    
  .main .div-4 {
    display: none;
}

.main .content {
  display: inline-flex
;
  flex-direction: column;
  align-items: center;
  gap: 3vw;
  position: relative;
  flex: 0 0 auto;
  justify-content: center;
  align-content: center;
  flex-wrap: nowrap;
  padding-top: 0;
}
.main .div {
  display: inline-flex
;
  flex-direction: column;
  align-items: center;
  gap: 1vw;
  position: relative;
  flex: 0 0 auto;
  justify-content: center;
  align-content: center;
  flex-wrap: nowrap;
}

.main .div-2 {
  display: flex
;
  align-items: center;
  gap: 1.56vw;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
  justify-content: center;
  align-content: center;
}

.main .medium-length-hero, 
  .main .medium-length-hero-2,
  .main .text-wrapper,
  .main .heading-gradient {
  font-size: 8vw;
  font-family: "Roboto Mono", monospace;;
  font-weight: 400;
  text-transform: uppercase;
  line-height: 8.32vw;
  letter-spacing: 0.07vw;
  word-wrap: break-word;
}

.main .shape {
  position: relative;
  width: 8.53vw;
  height: 8.53vw;
}

.header{
  display:none;
}


.tags-1, .tags-text h4{
  display:none;
}


.main .button-wrapper, .section-contact .button-wrapper, .section-portfolio-project .button-wrapper, .section-content-wp .button-wrapper {
  display: inline-flex
;
  align-items: center;
  justify-content: center;
  gap: .52vw;
  padding: 0 .26vw;
  position: relative;
  flex: 0 0 auto;
  background: var(--najs-gradient-11);
  background-color: var(--primitives-color-neutral-lightest);
  color: var(--color-nag-3);
  font-family: "Roboto Mono", monospace;;
  font-weight: 400;
  text-transform: uppercase;
  word-wrap: break-word;
  border-radius: var(--border-radius);





  text-align: center;
  justify-content: center;
  display: flex;
  flex-direction: column;
  color: var(--color-nag-3);
  font-size: 4.27vw;
  font-family: "Roboto Mono", monospace;;
  font-weight: 400;
  text-transform: uppercase;
  line-height: 6.4vw;
  word-wrap: break-word;


}


.navbar .heading {
    position: relative;
    width: fit-content;
    margin-top: -0.05vw;
    font-family: "Roboto Mono", monospace;, Helvetica;
    color: var(--color-schemes-color-scheme-2-background);
    letter-spacing: 0;
    white-space: nowrap;
    margin: 0;
    text-transform: uppercase;
    gap: 4vw;

    color: #191919;
    font-size: 3.2vw;
    font-family: "Roboto Mono", monospace;;
    font-weight: 400;
    text-transform: uppercase;
    line-height: 5.12vw;
    word-wrap: break-word;
}

.navbar, .navbar .container{

height: 8vw;


}


.jcarousel-banner img {
    width: 3.87vw;
    height: 3.87vw;
}

.wkrotce-grafika{
  width:100%;
  height: 70vw;
  overflow-x: hidden;
  overflow-y: hidden;
}

.wkrotce-grafika img{
  height: 70vw;
  margin-top: 3vw;
  object-fit: cover;
}

.text-icons {
  font-size: 4.4vw;
  font-family: "Roboto Mono", monospace;
  font-weight: 300;
  text-transform: uppercase;
  line-height: 8vw;
  letter-spacing: 0.3vw;
  word-wrap: break-word;
  gap: 2vw;
}

.text-icons img {
  width: 5.87vw;
  height: 5.87vw;
}

.tags-text{
  padding: 0 5.33vw;
  width: 100%;
}

.section-about{
  padding: 10vw 0;
}


.section-footer-logo .heading {
  font-size: 5.33vw;
  font-family: "Roboto Mono", monospace;;
  font-weight: 400;
  text-transform: uppercase;
  line-height: 6.4vw;
  letter-spacing: 0.05vw;
  word-wrap: break-word;
  gap: 4vw;
}

.jcarousel-banner-uslugi img,
.jcarousel-banner-uslugi-1 img,
.jcarousel-banner-uslugi-2 img{
width: 8.13vw;
height: 8.13vw;
}

.section-footer-logo .container, .section-footer-logo{
  height: 17.33vw;
}

.jcarousel-banner ul, .jcarousel-banner-uslugi ul, .jcarousel-banner-uslugi-1 ul, .jcarousel-banner-uslugi-2 ul{
  gap:4vw;
}

.mode-toggle {

font-size: 6.4vw;
font-family: "Roboto Mono", monospace;;
font-weight: 400;
text-transform: uppercase;
line-height: 9.6vw;
word-wrap: break-word;
gap: 2.67vw ;
padding: 0 2.67vw;
margin: 2.04vw;
}

.mode-toggle img{

  width: 6.93vw;
  height: 6.93vw;
  }

  .section-uslugi .button-wrapper,
  .section-partners .button-wrapper,
  .section-contact .button-wrapper{
  font-size: 5.33vw;
  font-family: "Roboto Mono", monospace;;
  font-weight: 400;
  text-transform: uppercase;
  line-height: 8vw;
  word-wrap: break-word;
  padding: 0 1vw;
}

.section-uslugi .tagline-wrapper,
.section-content-wp .tagline-wrapper{
  gap: 2.67vw;
}


.section-content-wp{
  padding: 0 0 10vw 0;
}


.section-uslugi .heading,
.section-uslugi .heading-gradient,
.section-partners .heading,
.section-partners .heading-gradient,
.section-contact .heading,
.section-contact .heading,
.section-contact .heading-gradient,
.section-content-wp .heading-gradient{
  font-size: 9.6vw;
  font-family: "Roboto Mono", monospace;
  font-weight: 400;
  text-transform: uppercase;
  line-height: 11.52vw;
  letter-spacing: 0.1vw;
  word-wrap: break-word;
  text-align: center;
}

.section-content-wp .heading,
.section-portfolio-project .heading,
.section-portfolio-project .heading-gradient{
  font-size: 9.6vw;
  font-family: "Roboto Mono", monospace;;
  font-weight: 400;
  text-transform: uppercase;
  line-height: 11.52vw;
  letter-spacing: 0.1vw;
  word-wrap: break-word;
  
}

#video-popup .nag-arrows {
  display: flex
;
  align-items: flex-start;
  justify-content: space-between;
  align-content: flex-start;
  flex-wrap: nowrap;
  flex-direction: column;
  padding: 0;
  width: 100%;
}

#video-popup  .nag-arrows p {
  align-self: stretch;
  font-size: 4.27vw;
  font-family: "Roboto Mono", monospace;;
  font-weight: 400;
  line-height: 6.83vw;
  word-wrap: break-word;
  text-transform: none;
  width: 100%;
  margin-top: 0;
}

#video-popup {

    flex-direction: column;
    flex-wrap: nowrap;
    align-content: flex-start;
    justify-content: flex-start;
    align-items: flex-start;
    width: 100%;
    padding: 0 5.33vw 10vw 5.33vw !important;
}

#video-popup video{
  height: 60vw;
        border-radius: var(--border-radius-4);
}

.section-content-wp .nag-arrows {
  display: flex
;
  align-items: flex-start;
  justify-content: space-between;
  align-content: flex-start;
  flex-wrap: nowrap;
  flex-direction: column;
  padding: 0;
  width: 100%;
}

.section-content-wp .nag-arrows p {
  align-self: stretch;
  font-size: 4.27vw;
  font-family: "Roboto Mono", monospace;;
  font-weight: 400;
  line-height: 6.83vw;
  word-wrap: break-word;
  text-transform:none;
  width: 100%;
  margin-top:0;
}

.section-content-wp .tag p{
  font-size: 4vw;
        font-family: "Roboto Mono", monospace;;
        font-weight: 400;
        text-transform: uppercase;
        line-height: 4.8vw;
        margin: 0;
        width:100%;
        
}

.section-content-wp p{
  align-self: stretch;
  font-size: 4.27vw;
  font-family: "Roboto Mono", monospace;;
  font-weight: 400;
  line-height: 6.83vw;
  word-wrap: break-word;
  text-transform: none;
  width: 100%;
  margin-top: 0;
}

.wp-block-image img{
  border-radius: var(--border-radius-4);
}

.content-wrapper-single p{
  align-self: stretch;
  font-size: 4.27vw;
  font-family: "Roboto Mono", monospace;;
  font-weight: 400;
  line-height: 6.83vw;
  word-wrap: break-word;
  text-transform: none;
  width: 100%;
  margin-top: 0;
  padding: 5.83vw 10vw;
}

.content-wrapper-single{
  gap: 5vw;
}
body .is-layout-flex{
  gap: 5vw;
}


.section-title .heading,
.section-title .heading-gradient
{
  font-size: 9.6vw;
  font-family: "Roboto Mono", monospace;;
  font-weight: 400;
  text-transform: uppercase;
  line-height: 11.52vw;
  letter-spacing: 0.1vw;
  word-wrap: break-word;
  text-align: left !important;
}



.arrows{
  display: flex
;
    gap: 4vw;
    align-items: center;
    justify-content: flex-end;
    align-content: center;
    flex-wrap: nowrap;
    flex-direction: row;
    width: 100%;
    gap:2.67vw;
    padding:0;
}

.nag-arrows .arrows{
  display: flex
;
    gap: 6vw;
    align-items: center;
    justify-content: flex-end;
    align-content: center;
    flex-wrap: nowrap;
    flex-direction: row;
    width: 100%;
    padding:0;
}

.section-opinie .arrows{
  gap:10vw;
  display: flex
;
        gap: 6vw;
        align-items: center;
        justify-content: center;
        align-content: center;
        flex-wrap: nowrap;
        flex-direction: row;
        width: 100%;
        padding: 0;
}

.arrows img{
  width: 12vw !important;
    height: 12vw !important;
}



.box {
  width: 80vw;
  height: 128.53vw;
  background: #fff;
  box-shadow:.8vw -.6vw 0 black;
  outline: 1px #191919 solid;
  outline-offset: -.05vw;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  display: inline-flex
;
  flex: 0 0 auto;
  border-radius: var(--border-radius-2);
  transition: all .3s ease-in-out !important;
  box-shadow: 2vw -2vw 0 black;
}

.boxy {
  display: flex
;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-content: flex-start;
  align-items: center;
  gap: 6.67vw;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding: 3vw 5.33vw 3vw 5.33vw;
}

.box img {
  width: 100%;
}

.section-portfolio-flexbox img {
  width: 100%;
  height: 64.27vw;
  border-radius: 50px;
  transform: scale(1);
  transition: transform .4s ease-out;
}

.section-portfolio-flexbox .box:hover img{
 transform: scale(1.5);
 transition: transform .4s ease-out;
}

.box .text h3 {
  align-self: stretch;
  font-size: 6.4vw;
  font-family: "Roboto Mono", monospace;;
  font-weight: 400;
  line-height: 8.32vw;
  letter-spacing: 0.06vw;
  word-wrap: break-word;
}

.box .text p{
  width: 69.33vw;
  align-self: stretch;
  font-size: 4.27vw;
  font-family: "Roboto Mono", monospace;;
  font-weight: 400;
  line-height: 6.83vw;
  word-wrap: break-word;
  margin:0;
}

.tag {
  height: 8.53vw;
  padding-left: 6.4vw;
  padding-right: 6.4vw;
  padding-top: 2.2vw;
  padding-bottom: 2.2vw;
gap: 2.13vw;
font-size: 3.2vw;
font-family: "Roboto Mono", monospace;;
font-weight: 400;
text-transform: uppercase;
line-height: 4.8vw;
word-wrap: break-word;
border: 1px solid;
    border-color: var(--color-white-gray);
    border-image: var(--najs-gradient-10);
    border-radius: var(--border-radius);
    width: max-content;
    height: max-content;
}
.wrapper-tag-icon img {
  height: 11.73vw !important;
  width: 11.73vw !important;
}

.categories{
  gap: 3vw;
  overflow-x: auto;
    width: 100%;
    padding: 5vw 1vw;
}

.section-portfolio-flexbox .box{
  width: 100%;
  gap: 5.33vw;
}

.tags-nag{
  gap: 2.67vw;
}
.tags-nag-button{
  gap: 5vw;
}



.tags-nag h2 {
  width: 81.87vw;
  color: #8193A4;
  font-size: 6.4vw;
  font-family: "Roboto Mono", monospace;
  font-weight: 400;
  line-height: 8.32vw;
  letter-spacing: 0.06vw;
  word-wrap: break-word;
}



.section-portfolio-flexbox{
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 0 !important;
  gap: 10vw;
}

.wrapper-tag-icon{
  width: 69.33vw;
  height: 13.33vw;
}

.box .text{
  gap: 4vw;
}

.box .wrapper{
  padding: 5.33vw;
}


.nag-arrows{
    padding: 0;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: flex-start;
    width: 100%;
    gap: 2.67vw;
}

.section-wideo-2{
  flex-direction: column;
}

.section-wideo-2 img{
  width: 100%;
}

.praca{
  height: 117.33vw;
  width:100%;
}

.praca-container {
  display: flex
;
  flex-direction: column-reverse;
  flex-wrap: nowrap;
  align-content: flex-start;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  gap:5.33vw;
}

.section-prace-biw .video img {
  width: 100%;
  height: 64.27vw;
  border-radius: 3.73vw;
}

.tag-text h2 {
  width: 81.87vw;
  color: black;
  font-size: 6.4vw;
  font-family: "Roboto Mono", monospace;;
  font-weight: 400;
  line-height: 8.32vw;
  letter-spacing: 0.06vw;
  word-wrap: break-word;
}

.praca-container .video{
  width: 100%;
}

.more-button img {
  width: 4.27vw !important;
  height: 3.73vw !important;
  transition: all .3s ease;
}

.more-button{
  font-size: 4.27vw;
  font-family: "Roboto Mono", monospace;;
  font-weight: 400;
  line-height: 6.4vw;
  word-wrap: break-word;
  gap: 2.13vw;
  padding: 3.2vw 0;
}

.nag-button{
  gap:8vw;
}

.tag-text{
  gap:2.67vw;
}

.praca {
  border:none;
}

.praca-container{
  padding: 3.13vw 5.33vw 3.13vw 5.33vw;
  background-color: white;
}

.more, .more-2 {
  font-size: 4.33vw;
  font-family: "Roboto Mono", monospace;;
  font-weight: 400;
  line-height: 8vw;
  word-wrap: break-word;
  gap: 2.67vw;
  padding: 3.2vw 0;
  margin: 0;
}

.more-2 img, .more img {
  transition: all .3s ease;
  animation: move-more 1s ease-in-out infinite;
  width: 7.6vw;
  height: 6.8vw;
}

.section-uslugi{
  padding: 10.07vw 0;
}

.box-team {
  width: 80vw;
  height: fit-content;
  position: relative;
  display: flex
;
  gap: 2.67vw;
  padding: 8vw 5.07vw;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: flex-start;
  justify-content: flex-start;
  align-items: center;
}

.box-team .social-media img{

width: 7.8vw;
height: 7.8vw;

}

.box-team .text h3 {
  align-self: stretch;
  color: #191919;
  font-size: 6.4vw;
  font-family: "Roboto Mono", monospace;;
  font-weight: 400;
  line-height: 8.96vw;
  letter-spacing: 0.06vw;
  word-wrap: break-word;
}

.box-team .tag {
  height: 8.53vw;
  padding-left: 6.4vw;
  padding-right: 6.4vw;
  padding-top: 1.5vw;
  padding-bottom: 1.5vw;
  gap: 2.13vw;
  height: 4.27vw;
  font-size: 3.2vw;
  font-family: "Roboto Mono", monospace;;
  font-weight: 400;
  text-transform: uppercase;
  line-height: 4.8vw;
  word-wrap: break-word;
}

.box-team .tag p {
  font-size: 3.2vw;
  font-family: "Roboto Mono", monospace;;
  font-weight: 400;
  text-transform: uppercase;
  line-height: 4.8vw;
}

.box-team .social-media img{
  width: 10.67vw !important;
    height: 10.67vw !important;
}

.box-team .img-social img{
  width: 69.07vw;
  height:84vw;
}
.box-team .img-social{
  width: 69.07vw;
  height:84vw;
}

.box-team .text{
  gap:2.67vw;
}

.jcarousel img{
  width:62.4vw;
  height: 50.93vw;
}

.jcarousel li{
  width:62.4vw;
  height: 50.93vw;
  gap:0;
}

.section-partners .tagline-wrapper{
  padding:0 5.33vw 0 5.33vw;
}


.section-partners .tagline-wrapper{
gap: 2.67vw
}


.section-contact .frame-2 {
    display: flex
;
    height: fit-content;
    align-items: center;
    position: relative;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    width: 100%;
    gap:6.53vw;

}

.section-contact .section-title{
  padding: 6vw;
}

.section-contact .section-title .frame-3{
  display: flex
;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: flex-start;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 4.4vw;
}

.section-contact .tagline-wrapper {
  display: inline-flex
  ;
          align-items: flex-start;
          position: relative;
          flex: 0 0 auto;
          flex-direction: column;
          align-content: flex-start;
          flex-wrap: nowrap;
          justify-content: flex-start;
          gap: 2.67vw;
}

.section-contact .lorem-ipsum-dolor{
  align-self: stretch;
  font-size: 4.27vw;
  font-family: "Roboto Mono", monospace;;
  font-weight: 400;
  line-height: 6.83vw;
  word-wrap: break-word;
  width: 100%;
}

.section-contact .input, .section-contact .text-area {
  height: 10vw;
}


.box-opinia .text {
  font-size: 6.4vw;
  font-family: "Roboto Mono", monospace;;
  font-weight: 400;
  line-height: 7.68vw;
  letter-spacing: 0.06vw;
  word-wrap: break-word;
  height: 85.87vw;
  width: 100%;
  padding: 0 5.33vw 0 5.33vw;
  gap:4vw;
}

.stars img {
  width: 8.27vw;
  height: 8.27vw;
}

.cytat span {
  width: 17.6vw;
  height: 10.13vw;
  font-size: 25.13vw;
  font-family: "Roboto Mono", monospace;;
  font-weight: 400;
  line-height: 40.96vw;
  letter-spacing: 0.34vw;
  word-wrap: break-word;
}

.osoba-text h5 {
  align-self: stretch;
  font-size: 4.33vw;
  font-family: "Roboto Mono", monospace;;
  font-weight: 400;
  line-height: 8.53vw;
  word-wrap: break-word;
}


.osoba-text h6 {
  align-self: stretch;
  font-size: 3.27vw;
  font-family: "Roboto Mono", monospace;;
  font-weight: 400;
  line-height: 6.83vw;
  word-wrap: break-word;
}


.osoba-opinia img {
  width: 15vw;
  height: 15vw;
}

.osoba-opinia {
  align-self: stretch;
  backdrop-filter: blur(2px);
  justify-content: flex-start;
  align-items: center;
  gap: 4vw;
  display: inline-flex;
  padding: 0 5.33vw 0 5.33vw;

}

.boxy .box-opinia{
  width: 92vw;
  padding: 10vw 0;
  
}

.cudzyslow{
  padding: 0 5.33vw 0 5.33vw;
}

.stars{
  gap: 1vw;
}

.section-footer{
  justify-content: flex-start;
  align-items: center;
  gap: 9.33vw;
  display: inline-flex
;
  align-self: stretch;
  justify-content: space-between;
  align-items: flex-start;
  display: inline-flex
;
  padding: 10.67vw 5.33vw 10.67vw 5.33vw;
  flex-direction: column;
}

.section-footer-policy-social{
  width: 100%;
    align-self: stretch;
    padding-top: 1.56vw;
    padding-bottom: 1.56vw;
    padding-left: 5.33vw;
    padding-right: 5.33vw;
    background: transparent;
    overflow: hidden;
    display: flex
;
    flex-wrap: nowrap;
    border-bottom: var(--primitives-color-neutral-dark) 2px solid;
    flex-direction: column;
    align-content: flex-start;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 5.21vw;
}

.section-footer-logo-text-wrapper .logo {
  width: 41.87vw;
}

.section-footer-logo-text{
  font-size: 4.27vw;
  font-family: "Roboto Mono", monospace;;
  font-weight: 400;
  line-height: 6.4vw;
  word-wrap: break-word;
}

.section-footer-lang h4, .section-footer-nav h4, .section-footer-kontakt h4 {
  font-size: 6.4vw;
  font-family: "Roboto Mono", monospace;;
  font-weight: 500;
  text-transform: uppercase;
  line-height: 10.24vw;
  word-wrap: break-word;
}

.section-footer-lang p, .section-footer-nav p, .section-footer-kontakt p{
  font-size: 4.27vw;
  font-family: "Roboto Mono", monospace;;
  font-weight: 400;
  text-transform: uppercase;
  line-height: 6.83vw;
  word-wrap: break-word;
}

.section-footer-logo-text-wrapper{
  width: 84.53vw;
}

.section-footer-kontakt-1 strong, .section-footer-policy p, .section-footer-policy-social p{
  font-size: 4.27vw;
  font-family: "Roboto Mono", monospace;;
  font-weight: 400;
  text-transform: uppercase;
  line-height: 6.4vw;
  word-wrap: break-word;
}

.section-footer-kontakt-img img {
  width: 3.47vw;
}

.section-footer-kontakt-2{
  gap: 2.67vw;
}

.section-footer-lang, .section-footer-nav, .section-footer-kontakt {
  gap: 4vw;
}

.section-footer-kontakt-text{
  margin: 0 0 0 6.13vw !important;
}

.section-footer-map{
  width:100%;
}

.section-footer-map iframe {
  width: 100%;
  height: 88.27vw;
  border-radius: 3.73vw;
}

.section-footer-social{
  gap:5.33vw;
  margin-bottom: 21.33vw;
}

.section-footer-social img{
    height: 9.33vw;
}
.section-footer-social i {
  font-size: 9.33vw;
  color: #4C657D;
  cursor: var(--cursor-pointer) !important;
}

.overlap {
  padding: 3.2vw 6vw;
  font-size: 4.27vw;
  font-family: "Roboto Mono", monospace;;
  font-weight: 400;
  text-transform: uppercase;
  line-height: 6.4vw;
  word-wrap: break-word;
  border-radius: 100vw !important;
  white-space: nowrap;
  letter-spacing: 0.08vw;
}

.overlap .frame-3{
  gap: 3.2vw;
  font-size: 4.27vw;
  font-family: "Roboto Mono", monospace;;
  font-weight: 400;
  text-transform: uppercase;
  line-height: 6.4vw;
  word-wrap: break-word;
}

.frame-3 img {
  width: 8vw;
  height: 8vw;
  image-rendering: pixelated;
}

  .contact-form {
    padding: 5.33vw; /* większe paddingi na mobile */
    border-radius: 3.2vw;
    box-shadow: 0 2.66vw 8vw rgba(0, 0, 0, 0.1);
    max-width: 87vw;
    font-size: 4.26vw;
    line-height: 6.4vw;
  }

  .form-group input,
  .form-group textarea {
    padding: 6.4vw 3.2vw 2.4vw;
    border: none;
    border-bottom: 0.27vw solid #3C5064;
    border-radius: 0;
    font-size: 3.73vw;
    line-height: 6.4vw;
    font-family: "Roboto Mono", monospace;
    font-weight: 400;
    text-transform: uppercase;
  }

  .form-group textarea {
    height: 40vw;
  }
  .form-group textarea + label {
    top: 6.4vw;
    transform: none;
  }

  .form-group label {
    top: 50%;
    transform: translateY(-50%);
    left: 3.2vw;
    padding: 0 3.2vw;
    font-size: 4.26vw;
    line-height: 6.4vw;
    font-family: "Roboto Mono", monospace;
    font-weight: 400;
    text-transform: uppercase;
  }

  .form-group input:focus + label,
  .form-group input:not(:placeholder-shown) + label,
  .form-group textarea:focus + label,
  .form-group textarea:not(:placeholder-shown) + label {
    top: 0;
    transform: translateY(-100%);
    left: 2.4vw;
    color: rgba(255, 255, 255, 0.60);
    font-size: 3.2vw;
    font-family: "Roboto Mono", monospace;
    font-weight: 400;
    text-transform: uppercase;
    line-height: 4.8vw;
    word-wrap: break-word;
  }

  .section-contact .group-wrapper{
    width:100%;
  }


  #customContactForm{
    gap: 3.04vw;
  }
  .form-group-name{
    gap: 2.04vw;
  }
  .form-group span{
    font-size: 3vw;
    line-height: 4.25vw;
  }

 .section-contact .overlap .frame-3 {
    display: flex
;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: flex-start;
    align-items: center;
    gap: 4.4vw;
 }

    
    .form-policy-button .form-group{
      gap: 3vw;
    }

    .form-group input[type="checkbox"]{
      width: 6.67vw;
    height: 6.67vw;
    }

    label span{
      font-size: 5vw !important;

    }

    .overlap::before{
      top: -1vw;
    left: 1vw;
    }

    .section-windows .section-contact{
      display: flex
;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4.17vw;
    padding: 9.38vw 2.94vw 0 2.78vw;
    position: relative;
    background-color: #fff;
    border-radius: .73vw;
    overflow: hidden;
    border-top-width: .26vw;
    border-top-style: solid;
    border-color: transparent;
    align-content: center;
    flex-wrap: nowrap;
    }

    .section-windows .section-contact .group{
      width: 100%;
    }

    .main .button-wrapper, .section-contact .button-wrapper, .section-portfolio-project .button-wrapper, .section-content-wp .button-wrapper{
      display: inline-flex
;
        align-items: center;
        justify-content: center;
        gap: .52vw;
        padding: 0 1vw;
        position: relative;
        flex: 0 0 auto;
         background: var(--najs-gradient-11);
        background-color: var(--primitives-color-neutral-lightest);
        color: var(--color-nag-3);
        font-family: "Roboto Mono", monospace;;
        font-weight: 400;
        text-transform: uppercase;
        word-wrap: break-word;
        border-radius: var(--border-radius);
        text-align: center;
        justify-content: center;
        display: flex
;
        flex-direction: row;
        color: var(--color-nag-3);
        font-size: 5vw;
        font-family: "Roboto Mono", monospace;;
        font-weight: 400;
        text-transform: uppercase;
        line-height: 6.4vw;
        word-wrap: break-word;
        flex-wrap: nowrap;
        align-content: center;

    }



#popup-close-1, #popup-close-2,
.popup .section-contact img,
.popup .section-contact img,
.section-windows .section-contact .heading img,
.smiley-faces img,
.section-windows .frame-2 img
 {
  width: 6vw !important;
  height: 6vw !important;
}

#popup-2 .content{
  height: 30.09vw;
}

.popup .section-contact .popup-content img {
  width: 8vw !important;
  height: 8vw !important;
}

.popup-content p {
  font-size: 6vw;
  font-family: "Roboto Mono", monospace;;
  font-weight: 400;
  text-transform: uppercase;
  line-height: 8vw;
  word-wrap: break-word;
}

.draggable {
  position: absolute;
  max-width: 51.9vw;
  max-height: 30.06vw;
  user-select: none;
  -webkit-user-drag: none;
  cursor: var(--cursor-grab) !important;
}

#section-naklejki{
  height: 100vw;
}

.video-wrapper, .video-wrapper img{

width: 100.1vw;
height:100.99vw;

}

 .video-wrapper video {
        position: absolute;
        width: 75vw;
        height: 54vw;
        border-radius: 2vw;
        position: absolute;
        bottom: 4vw;
        left: 15vw;
        z-index: 5;
        object-fit: cover;

}

.vhs .video-wrapper, .vhs .video-wrapper img {
  width: 100.27vw;
  height: 61.33vw;

}

.vhs .video-wrapper video {
    position: absolute;
    width: 41.5vw;
    height: 24.8vw;
    top: 19.7vw;
    left: 29.5vw;
    border-radius:1vw;
    z-index: 5;
    object-fit: cover;
    opacity: 1;
    filter: contrast(1.1) saturate(.8);
}

.folders-wrapper {
  gap: 10.66vw 7.99vw;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  align-content: flex-start;
}

.folder {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;
  width: 48.83vw;
  gap: 2.66vw;
}

.folder-nag-1 p {
  margin: 0;
  padding: 1.33vw;
  color: #fff;
  font-size: 6.4vw;
  font-family: "Roboto Mono", monospace;;
  font-weight: 400;
  text-transform: uppercase;
  word-wrap: break-word;
  text-align: center;
}

.folder-1 {
  position: relative;
  width: 26.8vw;
  height: 21.34vw;
  border: 1.07vw solid black;
  z-index: 1;
  cursor: var(--cursor-pointer) !important;
}

.folder-1::before {
  content: "";
  position: absolute;
  top: 4.55vw;
  left: 2.4vw;
  width: 25.34vw;
  height: 13.86vw;
  border: 1.07vw solid #000;
  transform: skewX(-20deg);
  z-index: 2;
  transition: transform .3s ease, top .3s ease, left .3s ease;
}

.gradient-1,
.gradient-1::before,
.gradient-1 p {
  background: var(--najs-gradient-1, rgba(170, 199, 114, 1));
}

.gradient-2,
.gradient-2::before,
.gradient-2 p {
  background: var(--najs-gradient-2, rgba(145, 191, 148, 1));
}

.gradient-3,
.gradient-3::before,
.gradient-3 p {
  background: var(--najs-gradient-3, rgba(128, 179, 183, 1));
}

.gradient-4,
.gradient-4::before,
.gradient-4 p {
  background: var(--najs-gradient-4, rgba(143, 129, 168, 1));
}

.shadow-1 {
  position: absolute;
  top: -2.15vw;
  right: -2.15vw;
  width: 26.8vw;
  height: 21.34vw;
  border: 1.07vw solid #000;
  z-index: 0;
  background-color: #000;
  transition: transform .3s ease, top .3s ease, right .3s ease;
  cursor: var(--cursor-pointer) !important;
}

.shadow-1::before {
  content: "";
  position: absolute;
  top: 4.55vw;
  left: 2.4vw;
  width: 25.34vw;
  height: 13.86vw;
  background-color: black;
  border: 1.07vw solid #000;
  transform: skewX(-20deg);
  z-index: 2;
  transition: transform .3s ease, top .3s ease, left .3s ease;
}

.wrapper {
  position: relative;
}

.wrapper:hover .folder-1::before {
  transform: skewX(-24deg);
}

.wrapper:hover .shadow-1 {
  top: -2.92vw;
  right: -2.92vw;
  width: 26.8vw;
  height: 21.34vw;
}

.wrapper:hover .shadow-1::before {
  top: 4.55vw;
  left: 3.22vw;
  transform: skewX(-24deg);
}

.cursor-pointer {
  width: 36.14vw;
  height: 32.13vw;
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 2;
  animation: floatPosition 1.5s ease-in-out infinite alternate;
}

@keyframes floatPosition {
  to {
      bottom: 5.33vw;
      right: 5.33vw;
  }
}

.folders-wrapper{
  gap: 10.66vw 0;
  display: flex
;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  align-content: flex-start;
  margin-top: 5.33vw;
}

.folder-nag-1 p {
  margin: 0;
  padding: 1.33vw;
  color: #fff;
  font-size: 5vw;
  font-family: "Roboto Mono", monospace;;
  font-weight: 400;
  text-transform: uppercase;
  word-wrap: break-word;
  text-align: center;
}

.folder {
  display: flex
;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;
  width: 40.83vw;
  gap: 2.66vw;
}

.strzalka{
  display:none;
}

.section-contact .lorem-ipsum-dolor-wrapper{
  gap:6vw;
}

/* Scroll lock */
body.no-scroll {
  overflow: hidden;
}

/* Navbar mobile */
.navbar-mobile {
  width: 100vw;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 5.33vw;
  z-index: 1000;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.logo {
  font-size: 5vw;
  font-weight: bold;
}

.menu {
  width: 8vw;
  height: 5vw;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
}

.menu span {
  height: 0.6vw;
  width: 100%;
  background: #D9D9DA;
  border-radius: 1vw;
  transition: all 0.4s ease;
}

.menu.active span:nth-child(1) {
  transform: rotate(45deg) translate(1.5vw, 1.5vw);
}
.menu.active span:nth-child(2) {
  opacity: 0;
}
.menu.active span:nth-child(3) {
  transform: rotate(-45deg) translate(1.5vw, -1.5vw);
}

/* Menu rozwijane */
.navbar-mobile-more {
  width: 100vw;
  position: fixed;
  top: -1000vw;
  left: 0;
  display: flex
;
  transition: top .4s ease;
  z-index: 999;
  box-shadow: 0 2vw 4vw rgba(0, 0, 0, .1);
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;

  background: rgb(255 255 255 / 90%);
    backdrop-filter: blur(12px) saturate(160%);
    -webkit-backdrop-filter: blur(12px) saturate(160%);
}

.navbar-mobile-more.active {
  top: 16vw; /* wysuwa się spod navbaru */
}

.navbar-mobile-more ul {
  padding: 5vw;
  list-style: none;
  display: flex
;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;
}

.navbar-mobile-more li {
  margin: 4vw 0;
}

.navbar-mobile-more a {
  font-size: 4.5vw;
  text-decoration: none;
  color: black;
  font-family: "Roboto Mono", monospace;;
  font-weight: 400;
  text-transform: uppercase;
  line-height: 8.32vw;
  letter-spacing: 0.07vw;
  word-wrap: break-word;
}

.logo-najs{
  width:20vw;
  height: auto;
}

.section-body{
padding: 0;
  display: flex
;
  width: 100%;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;
}

.section-footer-lang .glink{
  font-size: 4.27vw;
  font-family: "Roboto Mono", monospace;;
  font-weight: 400;
  text-transform: uppercase;
  line-height: 6.83vw;
  word-wrap: break-word;
}

.tags{
  gap: 2vw;

}

.categories {
  transition: all 0.3s ease; /* Płynna zmiana wszystkich właściwości */
  opacity: 1; /* Początkowa widoczność */
  transform: translateY(0); /* Początkowe ustawienie */
}

.categories.hidden {
  opacity: 0; /* Kiedy zniknie */
  transform: translateY(-100%); /* Przesuń w górę (poza ekran) */
}

.categories.fixed {
  position: fixed;
  top:20vw;;
  left: 0;
  right: 0;
  z-index: 999;
  background: rgb(255 255 255 / 90%);
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
}

.categories.fixed.hidden {
  opacity: 0; /* Zniknięcie w momencie scrollowania w dół */
  transform: translateY(-100%); /* Przemieszczenie poza ekran */
}

.categories.fixed.visible {
  opacity: 1; /* W pełni widoczne, gdy przypięte */
  transform: translateY(0); /* Powrót do początkowej pozycji */
}


.categories-anchor {
  height: 0; /* niewidoczny, tylko do pomiaru */
}

.section-img img,
.section-img{
  height: 60vw;
  border-radius: var(--border-radius-4);
}

.tag p{
  margin:0;
}

.content-wrapper-page h2, .content-wrapper-single h2{
  font-size: 7vw;
  font-family: "Roboto Mono", monospace;;
  font-weight: 400;
  line-height: 10.24vw;
  letter-spacing: 0.09vw;
  word-wrap: break-word;
  width:100%;
  padding: 3vw 0;
}

/* ─────────────────────────────────────────────
   MOBILE NAVBAR (header 3.php)
   ───────────────────────────────────────────── */
.navbar-mobile {
  display: none;
}

}

@media only screen and (max-width: 1024px) {

  /* Ukryj desktop header */
  .header { display: none !important; }

  /* ── Globalny padding boczny dla wszystkich sekcji ── */
  [class*="section-"],
  .main,
  .footer-main,
  .section-body {
    padding-left: 4vw !important;
    padding-right: 4vw !important;
    box-sizing: border-box !important;
  }

  .section-portfolio-flexbox {
    padding: 0 !important;
  }
  .section-content-wp {
    padding: 0 0 10vw 0 !important;
  }

  .main {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.56vw;
    position: relative;
    width: 100%;
    margin-top: 3vw;
    padding: 0 !important;
  }

  /* Ukryj arrow-img wszędzie na mobile */
  .arrow-img { display: none !important; }

  /* ── Zastąp gradienty z root.css kolorami stałymi ── */
  :root {
    --najs-gradient: #8193A4;
    --najs-gradient-1: #8193A4;
    --najs-gradient-2: #8193A4;
    --najs-gradient-3: #8193A4;
    --najs-gradient-4: #8193A4;
    --najs-gradient-5: #8193A4;
    --najs-gradient-6: #8193A4;
    --najs-gradient-7: #8193A4;
    --najs-gradient-8: #8193A4;
    --najs-gradient-10: #8193A4;
    --najs-gradient-11: #3C5064;
  }
  /* Heading gradient → solid color */
  .heading-gradient {
    background: none !important;
    -webkit-background-clip: unset !important;
    -webkit-text-fill-color: unset !important;
    background-clip: unset !important;
    color: #8193A4 !important;
  }
  /* Usługi heading gradient */
  .section-uslugi .heading-gradient,
  .section-partners .heading-gradient,
  .section-contact .heading-gradient,
  .section-content-wp .heading-gradient,
  .section-portfolio-project .heading-gradient {
    background: none !important;
    -webkit-text-fill-color: unset !important;
    color: #8193A4 !important;
  }

  /* ── Mobile navbar bar (tło jak desktop: przezroczyste + blur) ── */
  .navbar-mobile {
    display: flex;
    position: sticky;
    top: 0;
    z-index: 9999;
    width: 100%;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    align-items: center;
    justify-content: space-between;
    padding: 3.73vw 5.33vw;
    box-sizing: border-box;
    border-bottom: none;
    transition: background 0.3s ease, backdrop-filter 0.3s ease;
  }
  .navbar-mobile.scrolled {
    background: rgba(25,25,25,0.75);
    backdrop-filter: blur(15px) saturate(200%);
    -webkit-backdrop-filter: blur(15px) saturate(200%);
    border-bottom: 0.13vw solid rgba(255,255,255,0.08);
  }

  .navbar-mobile .logo img {
    height: 11vw;
    width: auto;
    display: block;
  }

  /* Hamburger — kolor dopasowany do tła (ciemne → białe kreski) */
  .navbar-mobile .menu {
    display: flex;
    flex-direction: column;
    gap: 0;
    cursor: pointer;
    padding: 0 2vw;
  }
  .navbar-mobile .menu span {
    display: block !important;
    width: 7vw !important;
    height: 0.53vw !important;
    background: #8193A4 !important;
    border-radius: 1vw !important;
    margin-bottom: 1.6vw;
    transition: transform 0.35s cubic-bezier(.4,0,.2,1), opacity 0.2s, background 0.2s !important;
  }
  .navbar-mobile .menu span:last-child { margin-bottom: 0; }
  .navbar-mobile .menu:hover span { background: #fff !important; }
  .navbar-mobile .menu.active span {
    background: #8193A4 !important;
  }
  .navbar-mobile .menu.active span:nth-child(1) {
    transform: translateY(2.13vw) rotate(45deg);
  }
  .navbar-mobile .menu.active span:nth-child(2) {
    opacity: 0;
  }
  .navbar-mobile .menu.active span:nth-child(3) {
    transform: translateY(-2.13vw) rotate(-45deg);
  }

  /* ── Mobile menu — fullscreen ── */
  .navbar-mobile-more {
    display: none;
    position: fixed;
    top: var(--navbar-h, 17vw);
    left: 0;
    width: 100%;
    height: calc(100vh - var(--navbar-h, 17vw));
    background: rgba(25,25,25,0.85);
    backdrop-filter: blur(15px) saturate(200%);
    -webkit-backdrop-filter: blur(15px) saturate(200%);
    z-index: 9998;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 8vw 8vw 10vw;
    box-sizing: border-box;
    gap: 0;
    overflow-y: auto;
  }
  .navbar-mobile-more.active { display: flex; top: 20vw; height: calc(100vh - 20vw); }

  .navbar-mobile-more ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 3.2vw;
    width: 100%;
  }
  .navbar-mobile-more ul li {
    border-bottom: none;
    padding-bottom: 0;
  }

  .navbar-mobile-more ul li a,
  .navbar-mobile-more .link-text-mobile {
    font-family: "Roboto Mono", monospace;
    font-size: 4.27vw;
    font-weight: 400;
    text-transform: uppercase;
    color: #D9D9DA;
    text-decoration: none;
    line-height: 6.4vw;
    letter-spacing: 0.05vw;
    display: block;
    transition: opacity .2s;
  }
  .navbar-mobile-more ul li a h3,
  .navbar-mobile-more .link-text-mobile h3 {
    margin: 0; font-size: inherit; font-weight: inherit;
    color: inherit; font-family: inherit;
  }
  .navbar-mobile-more ul li a:hover { opacity: 0.55; }

  /* CTA button w menu */
  .navbar-mobile-more .overlap-wrapper {
    margin-top: 6.4vw;
    width: 100%;
  }
  .navbar-mobile-more .overlap-wrapper .overlap-container,
  .navbar-mobile-more .overlap-wrapper .overlap {
    width: 100%;
  }
  .navbar-mobile-more .overlap-wrapper .overlap {
    display: flex;
    justify-content: center;
    padding: 3.73vw;
    font-size: 4.8vw;
    border-radius: 100vw;
  }
  .navbar-mobile-more .overlap .frame-3 {
    justify-content: center;
    font-size: 4.8vw;
  }

  /* Linki w menu — kolor jak desktop #D9D9DA */
  .navbar-mobile-more ul li a,
  .navbar-mobile-more .link-text-mobile {
    color: #D9D9DA;
  }
  .navbar-mobile-more ul li a h3 { color: #D9D9DA; }

  /* CTA button w menu — taki sam jak desktop */
  .navbar-mobile-more .overlap { background: #4C657D !important; color: white !important; }
  .navbar-mobile-more .overlap .frame-3 { color: white !important; }

  #language-toggle-en-mobile,
  #language-toggle-pl-mobile {
    font-family: "Roboto Mono", monospace;
    font-size: 4.27vw;
    font-weight: 400;
    text-transform: uppercase;
    color: #D9D9DA;
    line-height: 6.4vw;
    letter-spacing: 0.05vw;
    display: block;
    margin-top: 2vw;
    transition: opacity .2s;
  }
  #language-toggle-en-mobile a,
  #language-toggle-pl-mobile a {
    color: inherit;
    text-decoration: none;
  }
  #language-toggle-en-mobile:hover,
  #language-toggle-pl-mobile:hover { opacity: 0.55; }

  /* ── Hamburger / X — jednolity kolor i grubość ── */
  .navbar-mobile .menu span,
  .navbar-mobile .menu:hover span,
  .navbar-mobile .menu:focus span,
  .navbar-mobile .menu.active span {
    background: #8193A4 !important;
    height: 0.53vw !important;
  }
  .navbar-mobile .menu { outline: none; }
  .navbar-mobile .menu:focus-visible { outline: none; }

  body.no-scroll { overflow: hidden; }

  /* ── Tagi — kolory jak desktop ── */
  .tag {
    border-color: #4C657D !important;
    color: #8193A4 !important;
    border-radius: 100vw !important;
    height: max-content !important;
    padding: 1.6vw 4vw !important;
    font-size: 3.2vw !important;
    line-height: 4.8vw !important;
  }
  .tag p { color: #8193A4 !important; }

  /* ── Przyciski .overlap — kolory jak desktop ── */
  .overlap {
    background: #4C657D !important;
    color: white !important;
  }
  .overlap .frame-3 { color: white !important; }

  /* Przycisk "Poznaj mnie" (drugi, outline, pełna szerokość) */
  .buttons .overlap-wrapper:nth-child(2),
  .footer-main .buttons .overlap-wrapper:nth-child(2) {
    width: 100%;
  }
  .buttons .overlap-wrapper:nth-child(2) .overlap-container,
  .footer-main .buttons .overlap-wrapper:nth-child(2) .overlap-container {
    width: 100%;
  }
  .buttons .overlap-wrapper:nth-child(2) .overlap,
  .footer-main .buttons .overlap-wrapper:nth-child(2) .overlap {
    background: transparent !important;
    border: 1px solid #4C657D !important;
    color: #8193A4 !important;
    width: 100%;
    justify-content: center;
  }
  .buttons .overlap-wrapper:nth-child(2) .frame-3 { color: #8193A4 !important; }

  /* link-text kolor */
  .link-text { color: #D9D9DA; }
  .link-text:hover { color: #fff; }

  /* ── Section-lang w stopce ── */
  .section-lang {
    gap: 3vw !important;
    align-items: center !important;
    padding: 0 !important;
  }
  .section-lang .glink,
  .section-footer-nav .section-lang .glink {
    font-size: 4.27vw !important;
    line-height: 6.4vw !important;
    color: #D9D9DA !important;
    letter-spacing: 0.05vw !important;
  }
  .section-lang .blue-color {
    font-size: 4.27vw !important;
    line-height: 6.4vw !important;
  }
  .blue-color { color: #8193A4 !important; }

  /* ── Hero — do lewej, większe paddingi ── */
  .main .column {
    align-items: flex-start !important;
    justify-content: flex-start !important;
    flex-direction: column !important;
  }
  .main .content {
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 6vw !important;
    /* padding: 0vw 4vw 0 !important; */
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .main .div,
  .main .div-2,
  .main .div-3 {
    align-items: flex-start !important;
    justify-content: flex-start !important;
    width: 100% !important;
  }
  .main .medium-length-hero,
  .main .medium-length-hero-2 {
    text-align: left !important;
  }

  /* ── Ukryj wkrotce-grafika na mobile ── */
  .wkrotce-grafika { display: none !important; }

  /* ── Hero section ── */
  .main .text {
    width: 100%;
    font-size: 3.73vw;
    line-height: 6.4vw;
    padding: 4vw 0px;
    text-align: left;
    box-sizing: border-box;
  }
  .main .buttons {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 3.2vw;
    padding: 4vw 0;
    width: 100%;
    box-sizing: border-box;
  }
  .main .frame-wrapper,
  .main .buttons .frame-wrapper {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 3.2vw;
  }
  .main .buttons .overlap-wrapper {
    width: 100% !important;
  }
  .main .buttons .overlap-wrapper .overlap-container,
  .main .buttons .overlap-wrapper .overlap {
    width: 100% !important;
    display: flex !important;
    box-sizing: border-box !important;
  }
  .main .buttons .overlap-wrapper .overlap {
    justify-content: center !important;
    padding: 3.73vw;
    font-size: 4.27vw;
    border-radius: 100vw;
    box-sizing: border-box;
  }
  .main .buttons .overlap .frame-3 {
    justify-content: center;
    text-align: center;
    font-size: 4.27vw;
    width: 100%;
  }

  .main .avatar {
    width: 100%;
    height: auto;
    margin: 4vw auto 0;
  }
  .main .avatar video,
  .main .avatar img {
    width: 100%;
    height: auto;
    border-radius: 2.67vw;
  }

  /* ── Slider (wkrotce-grafika) ── */
  .slider-track { width: 100%; }
  .slide { min-width: 100%; }
  .slide .laptop {
    width: 90vw;
    height: auto;
  }
  .slide video {
    width: 75vw;
    height: auto;
  }

  /* ── Karuzele tekstowe (navbar + footer-logo) — jednolity wygląd ── */
  .jcarousel-banner,
  .jcarousel-banner-uslugi,
  .jcarousel-banner-uslugi-1,
  .jcarousel-banner-uslugi-2 {
    overflow: hidden;
    width: 100%;
  }
  .jcarousel-banner ul,
  .jcarousel-banner-uslugi ul,
  .jcarousel-banner-uslugi-1 ul,
  .jcarousel-banner-uslugi-2 ul {
    gap: 6vw !important;
    align-items: center;
  }
  .jcarousel-banner li,
  .jcarousel-banner-uslugi li,
  .jcarousel-banner-uslugi-1 li,
  .jcarousel-banner-uslugi-2 li {
    flex: 0 0 auto;
    white-space: nowrap;
    gap: 2.67vw !important;
  }
  .jcarousel-banner .heading,
  .jcarousel-banner-uslugi .heading,
  .jcarousel-banner-uslugi-1 .heading,
  .jcarousel-banner-uslugi-2 .heading,
  .navbar .heading {
    font-size: 3.73vw !important;
    line-height: 5.33vw !important;
    white-space: nowrap !important;
    color: #D9D9DA !important;
    letter-spacing: 0.05vw !important;
  }
  .navbar .container { height: auto !important; }
  .navbar .banner { overflow: hidden !important; }
  .jcarousel-banner img { width: 3.73vw !important; height: 3.73vw !important; }
  .jcarousel-banner-uslugi img,
  .jcarousel-banner-uslugi-1 img,
  .jcarousel-banner-uslugi-2 img { width: 4.27vw !important; height: 4.27vw !important; }
  .jcarousel-wrapper-banner,
  .jcarousel-wrapper-banner-uslugi { overflow: hidden; width: 100%; }

  /* ── Partners / logos ── */
  .section-partners { padding: 6vw 5.33vw; }
  .section-logos-wrapper { overflow: hidden; padding: 0 !important; }
  /* Karuzela → krata na mobile */
  .section-partners .jcarousel {
    overflow: visible !important;
    width: 100% !important;
    position: static !important;
  }
  .section-partners .jcarousel ul {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 6vw 4vw !important;
    width: 100% !important;
    position: static !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    animation: none !important;
    align-items: center !important;
    justify-items: center !important;
    padding: 4vw 0 0 0 !important;
  }
  .section-partners .jcarousel li[aria-hidden="true"] {
    display: none !important;
  }
  .section-partners .jcarousel li {
    float: none !important;
    width: auto !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    height: 20vw;
  }
  .section-partners .jcarousel img {
    height: auto !important;
    width: 40vw !important;
    /* max-width: 100% !important; */
    filter: brightness(0) invert(1);
    opacity: 0.75;
    display: block !important;
  }

  /* ── About ── */
  .section-about { padding: 10vw 5.33vw; }
  .section-about .text { width: 100%; }
  .section-about .tags-text { padding: 0; }
  .section-about .text-icons { flex-wrap: wrap; }

  /* ── Section footer logo (ticker) ── */
  .section-footer-logo { height: 17.33vw; }
  .section-footer-logo .container { height: 17.33vw; }

  /* ── O mnie (section-about + main-3) ── */
  .main-3 {
    padding: 8vw 0 !important;
    margin-top: 0 !important;
    flex-direction: column !important;
    gap: 6vw !important;
  }
  .main-2 {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 4vw !important;
  }
  .main-2 .content {
    width: 100% !important;
    gap: 4vw !important;
  }
  .main .text {
    width: 100% !important;
    font-size: 3.73vw !important;
    line-height: 6.4vw !important;
    padding: 4vw 0;
    text-align: left;
    box-sizing: border-box;
  }
  .content .button-wrapper {
    background: transparent !important;
    background-color: transparent !important;
    color: #515055 !important;
    font-size: 3.73vw !important;
    line-height: 5.6vw !important;
  }
  .column-logo {
    flex-direction: column;
    gap: 3vw;
  }
  .nag-text h3,
  .nag-text h2 {
    font-size: 7.47vw !important;
    line-height: 9.6vw !important;
  }
  .avatar-text {
    flex-direction: row;
    gap: 7vw;
    align-items: center;
    width: 100%;
  }
  .avatar-text h2 {
    align-self: stretch;
    text-align: left;
    color: #3C5064;
    font-size: 1.88vw;
    font-family: Roboto Mono;
    font-weight: 400;
    text-transform: uppercase;
    line-height: 3vw;
    word-wrap: break-word;
    width: 100%;
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: flex-start;
  }
  .main .avatar-2 {
    width: 24vw !important;
    height: 24vw !important;
  }
  .main .avatar-2 video,
  .main .avatar-2 img {
    width: 24vw !important;
    height: 24vw !important;
    border-radius: 3vw;
    object-fit: cover;
  }
  .icons-program {
    display: flex !important;
    flex-direction: row;
    gap: 3vw !important;
    align-items: flex-start;
    width: 100%;
    align-content: flex-start;
    flex-wrap: wrap;
  }
  .program-icon-wrap {
    width: 12vw !important;
    height: 12vw !important;
  }
  .program {
    max-width: 100% !important;
    max-height: 100% !important;
    width: auto !important;
    height: auto !important;
    opacity: 0.8;
  }

  /* ── Services (uslugi) ── */
  .section-uslugi { padding: 10vw 5.33vw; }
  #uslugi { padding: 10vw 0 !important; }
  .section-uslugi .nag-arrows {
    flex-direction: column;
    align-items: flex-start;
    gap: 3vw;
  }
  .section-uslugi .tagline-wrapper { gap: 2.67vw; }
  .section-uslugi .heading,
  .section-uslugi .heading-gradient {
    font-size: 9.6vw !important;
    line-height: 11.52vw !important;
    text-align: left;
  }
  .uslugi-box br { display: none; }

  .section-uslugi-box {
    display: flex;
    flex-direction: column;
    gap: 5vw;
    width: 100%;
    padding: 0 !important;
  }
  .uslugi-box {
    width: 100% !important;
    box-sizing: border-box;
    padding: 5.33vw !important;
    gap: 4vw;
    border-radius: 15vw;
  }
  .uslugi-box img.logo-najs {
    width: 10.67vw !important;
    height: 10.67vw !important;
    flex-shrink: 0;
  }
  .uslugi-box .text {
    font-size: 4.27vw !important;
    line-height: 6.4vw !important;
  }
  .uslugi-box .text h3 {
    font-size: 5.33vw !important;
    line-height: 7.47vw !important;
    margin: 0 0 1vw;
  }
  .uslugi-box .text p {
    font-size: 3.73vw !important;
    line-height: 5.87vw !important;
  }

  /* ── Portfolio B&W ── */
  .section-prace-biw { padding: 8vw 0 !important; }
  .praca-container {
    flex-direction: column !important;
    gap: 0 !important;
    padding: 6vw 0 !important;
    background-color: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  .praca {
    height: auto !important;
    overflow-y: visible !important;
  }
  .tag-text {
    width: 100% !important;
    position: static !important;
  }
  .tags {
    width: 100% !important;
  }
  .video-button {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 4vw !important;
    width: 100% !important;
    padding: 0 5.33vw !important;
    box-sizing: border-box !important;
  }
  .section-prace-biw .video video {
    width: 100% !important;
    height: auto !important;
    border-radius: 3.73vw !important;
    padding: 0 !important;
  }
  .praca-container .overlap-wrapper {
    width: 100% !important;
  }
  .praca-container .overlap-container,
  .praca-container .overlap {
    width: 100% !important;
    display: flex !important;
    box-sizing: border-box !important;
  }
  .praca-container .overlap {
    justify-content: center !important;
    padding: 3.73vw !important;
    font-size: 4.27vw !important;
    border-radius: 100vw !important;
    background: transparent !important;
    background-color: transparent !important;
    color: #8193A4 !important;
    border: 1px solid #4C657D !important;
  }
  .praca-container .overlap .frame-3 {
    justify-content: center !important;
    text-align: center !important;
    font-size: 4.27vw !important;
    color: #8193A4 !important;
  }
  .portfolio-text {
    width: 100% !important;
    font-size: 3.73vw !important;
    line-height: 6.4vw !important;
    letter-spacing: 0.05vw !important;
  }
  .portfolio-text p { font-size: inherit; line-height: inherit; }

  /* ── Section footer logo mobile ── */
  .section-footer-logo {
    height: 17.33vw;
    padding: 0 !important;
  }
  .section-footer-logo .container {
    height: 100%;
  }
  .section-footer-logo .content {
    gap: 4vw;
    align-items: center;
    height: 100%;
  }
  .section-footer-logo .heading {
    font-size: 3.8vw !important;
    line-height: 5.5vw !important;
  }
  .section-footer-logo .banner,
  .section-footer-logo .banner-2 {
    height: 100%;
    justify-content: center;
  }
  /* Przyciski / gap między itemami karuzeli */
  .jcarousel-banner-uslugi-1 ul,
  .jcarousel-banner-uslugi-2 ul {
    gap: 6vw !important;
  }
  .jcarousel-banner-uslugi-1 li,
  .jcarousel-banner-uslugi-2 li {
    gap: 6vw !important;
  }

  /* ── TV Guide mobile ── */
  .tv-guide {
    grid-template-columns: 1fr !important;
    gap: 6vw !important;
    padding: 4vw 0 8vw !important;
  }
  .tv-top {
    padding: 2.5vw 3vw;
    font-size: 2.8vw;
  }
  .tv-ch-num { font-size: 3.2vw; letter-spacing: 0.1vw; }
  .tv-now    { font-size: 2.6vw; gap: 1vw; }
  .tv-dot    { font-size: 2.2vw; }
  .tv-sig    { font-size: 2.2vw; }
  .tv-info   { padding: 3.5vw 4vw; gap: 2.5vw; }
  .tv-title-row { gap: 2vw; align-items: center; }
  .tv-title  { font-size: 4.5vw; line-height: 1.35; }
  .tv-tune   {
    font-size: 3vw;
    padding: 1.5vw 3vw;
    border-width: 1px;
    white-space: nowrap;
  }
  .tv-tags   { gap: 2vw; }
  .tv-tag    { font-size: 2.8vw; }
  .tv-scanline, .tv-glitch-bar { display: none; }

  /* ── Rain section / CCTV mobile ── */
  .section-rain {
    grid-template-columns: 1fr 1fr !important;
    gap: 2vw !important;
    overflow: hidden;
  }
  .cctv-top { padding: 1.2vw 1.5vw; }
  .cctv-ch-num, .tv-ch-num { font-size: 1.8vw; }
  .cctv-now, .cctv-id, .cctv-live, .cctv-sig { font-size: 1.5vw; }
  .cctv-bottom { padding: 1.2vw 1.5vw; font-size: 1.3vw; }
  .cctv-corner { width: 2vw; height: 2vw; }

  /* ── Footer ── */
  .section-footer { padding: 8vw 0 0 0 !important; text-align: left; }
  .section-footer * { text-align: left; }
  .section-footer-nav-social {
    flex-direction: column;
    align-items: flex-start;
    gap: 6vw;
  }
  .section-footer-nav {
    flex-direction: column;
    align-items: flex-start;
    gap: 3vw;
  }
  .section-footer-social {
    gap: 5.33vw;
    flex-wrap: wrap;
    justify-content: flex-start;
    padding: 0 !important;
    margin-bottom: 10vw;
  }
  .section-footer-logo-text-wrapper {
    flex-direction: column;
    align-items: flex-start;
    gap: 4vw;
  }
  .section-footer-logo-text-wrapper .logo-najs {
    width: 20vw;
    height: auto;
  }

  /* ── Footer hero (footer 2.php) ── */
  .footer-main .main { padding: 8vw 5.33vw; }
  .footer-main .column { flex-direction: column; align-items: flex-start; }
  .footer-main .content { align-items: flex-start !important; }
  .footer-main .div,
  .footer-main .div-2,
  .footer-main .div-3 { align-items: flex-start !important; justify-content: flex-start !important; }
  .footer-main .medium-length-hero,
  .footer-main .medium-length-hero-2 {
    font-size: 11vw;
    line-height: 13.2vw;
    text-align: left;
    white-space: normal !important;
  }
  .footer-main .main .medium-length-hero {
    position: relative;
    width: fit-content;
    font-family: "Roboto Mono", monospace;
    font-weight: 400;
    color: #8193A4;
    font-size: 6vw;
    letter-spacing: 0.05vw;
    white-space: nowrap;
    text-transform: uppercase;
  }
  .footer-main .text { width: 100%; font-size: 3.73vw; line-height: 6.4vw; text-align: left; }
  .footer-main .buttons { flex-direction: column; align-items: flex-start; gap: 3.2vw; padding: 0; }
  .footer-main .buttons .overlap-wrapper { width: 100%; }
  .footer-main .buttons .overlap { justify-content: center; }

  .footer-main {
    width: 100%;
    padding: 3vw 0 6vw 0 !important;
  }

  .section-footer-kontakt {
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 0.78vw;
    display: inline-flex;
    padding: 0 !important;
  }
  .section-footer-kontakt-1 {
    justify-content: flex-start;
    align-items: flex-start;
    display: inline-flex;
    flex-direction: column;
    flex-wrap: nowrap;
    padding: 0 !important;
  }
  .section-footer-kontakt .section-footer-kontakt-2 {
    gap: 2.67vw;
    padding: 0 !important;
  }

  .section-footer-policy-social {
    align-items: center !important;
    justify-content: center !important;
    gap: 2vw !important;
    text-align: center !important;
  }
  .section-footer-policy {
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 4vw !important;
  }
  .section-footer-policy p,
  .section-footer-policy-social .rights {
    text-align: center !important;
  }

  /* ── Formularz kontaktowy ── */
  .section-contact-form {
    flex-direction: column !important;
    padding: 0 !important;
  }
  .section-contact-form .img {
    width: 100% !important;
    height: 64vw !important;
  }
  .section-contact-form .img video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }
  form {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: flex-start;
    justify-content: flex-start;
    align-items: stretch;
    gap: 6vw;
  }
  .section-contact-form .form {
    width: 100% !important;
    padding: 8vw 5.33vw !important;
    gap: 16vw !important;
    box-sizing: border-box !important;
  }
  .section-contact-form .form h2 {
    font-size: 8vw !important;
    line-height: 10.4vw !important;
  }
  .section-contact-form button[type="submit"] {
    width: 100% !important;
    padding: 3.73vw !important;
    font-size: 4.27vw !important;
    border-radius: 100vw !important;
    justify-content: center !important;
    text-align: center !important;
    display: flex !important;
    box-sizing: border-box !important;
  }
  .section-contact-form .info-button {
    flex-direction: column !important;
    gap: 5.33vw !important;
  }
  .section-contact-form .info {
    outline: 0.27vw #8193A4 dashed !important;
    border-radius: 2vw !important;
    padding: 3.2vw !important;
    display: flex !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .section-contact-form .info span {
    font-size: 3.73vw !important;
    line-height: 5.87vw !important;
  }
  .section-contact-form .form-policy {
    /* flex-wrap: wrap !important; */
    align-items: flex-start !important;
    gap: 3vw !important;
    padding-bottom: 4vw !important;
  }
  .section-contact-form .form-policy input[type="checkbox"] {
    width: 5.33vw !important;
    height: 5.33vw !important;
    min-width: 5.33vw !important;
    flex-shrink: 0 !important;
  }
  .section-contact-form .form-policy label {
    background: transparent !important;
    font-size: 4.27vw !important;
    line-height: 6.4vw !important;
    pointer-events: auto !important;
  }
  .section-contact-form .form-file {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 2vw !important;
    padding-top: 4vw !important;
    padding-bottom: 4vw !important;
  }
  .section-contact-form .form-file label {
    font-size: 4.27vw !important;
    line-height: 6.4vw !important;
    background: transparent !important;
    padding: 0 !important;
  }
  .section-contact-form .form-file input[type="file"] {
    font-size: 4.27vw !important;
    line-height: 6.4vw !important;
    padding: 2vw !important;
    border-radius: 2vw !important;
    width: 100% !important;
  }
  .section-contact-form .form-file input[type="file"]::file-selector-button {
    font-size: 4.27vw !important;
    font-family: "Roboto Mono", monospace !important;
    text-transform: uppercase !important;
    padding: 2vw 4vw !important;
    border-radius: 100vw !important;
    background: #4C657D !important;
    color: white !important;
    border: none !important;
    cursor: pointer !important;
    margin-right: 3vw !important;
  }
  .section-contact-form .form-group input,
  .section-contact-form .form-group textarea {
    border: none !important;
    outline: none !important;
    border-bottom: 1px solid #3C5064 !important;
    border-radius: 8px !important;
  }
  .section-contact-form .form-group input:focus,
  .section-contact-form .form-group textarea:focus {
    border-bottom-color: #8193A4 !important;
  }

}

/* MOBILE */