:root {
  /* =========================
     NISEC COLOR THEME
  ========================= */

  --nisec-black: #020405;
  --nisec-black-rgb: 2, 4, 5;

  --nisec-navy-deep: #041021;
  --nisec-navy-deep-rgb: 4, 16, 33;

  --nisec-blue-dark: #03265A;
  --nisec-blue-dark-rgb: 3, 38, 90;

  --nisec-blue-main: #000275;
  --nisec-blue-main-rgb: 0, 2, 117;

  --nisec-blue-grey: #9CB4DB;
  --nisec-blue-grey-rgb: 156, 180, 219;

  --nisec-light: #E8F4FC;
  --nisec-light-rgb: 232, 244, 252;


  /* =========================
     ACTIVE GLOBAL COLORS
  ========================= */

  --blue-dark: var(--nisec-navy-deep);
  --blue-dark-rgb: var(--nisec-navy-deep-rgb);

  --blue-main: var(--nisec-blue-dark);
  --blue-main-rgb: var(--nisec-blue-dark-rgb);

  --blue-soft: var(--nisec-light);
  --blue-soft-rgb: var(--nisec-light-rgb);

  --text-dark: #17212b;
  --text-light: #ffffff;


  /* =========================
     FONT VARIABLES
  ========================= */

  --font-main: "Source Sans 3", Arial, Helvetica, sans-serif;

  --font-extralight: 200;
  --font-light: 300;
  --font-regular: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  --font-black: 900;


 /* =========================
   HEADER VARIABLES
========================= */

--header-height: 101px; /* -10% da 112px */

--header-padding-x: clamp(16px, 2.7vw, 49px);
--header-padding-y: 11px;

--brand-gap: clamp(9px, 1.1vw, 18px);

/* logo_color -20% */
--brand-logo-width: clamp(66px, 5.3vw, 98px);

/* intest_logo -20% */
--brand-name-width: clamp(128px, 10.4vw, 200px);

--header-actions-gap: clamp(11px, 1.25vw, 20px);
--nav-gap: clamp(11px, 1.1vw, 18px);

/* icone proporzionate circa -10% */
--nav-button-size: clamp(41px, 3.05vw, 52px);
--nav-icon-width: clamp(21px, 1.55vw, 27px);

--language-button-width: clamp(68px, 4.85vw, 86px);

}

/* =========================
   MAIN FONT
========================= */

html,
body {
  font-family: "Source Sans 3", Arial, Helvetica, sans-serif;
}

/* =========================
   GLOBAL RESET / SAFE LAYOUT
   Common base for all pages
========================= */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  width: 100%;
  min-height: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  scroll-behavior: smooth;
}
body {
  margin: 0;
  font-family: var(--font-main);
  color: var(--text-dark);
  background: var(--nisec-light);
}

img {
  max-width: 100%;
  display: block;
}

/* =========================
   HEADER VARIABLES - MOBILE
========================= */

@media (max-width: 768px) {
  :root {
    --header-height: 86px;
  }
}

@media (max-width: 430px) {
  :root {
    --header-height: 78px;
  }
}

@media (max-width: 390px) {
  :root {
    --header-height: 74px;
  }
}