/* VARIABILI */

:root { 

    --ull-blu: #283A62;
    --ull-giallo: #CDB665;
    --ull-bianco: #EDF5FD;
    --ull-rosso: #FF3C38;
    --ull-nero: #001929;
    
    --body-bg: var(--ull-bianco); /* [ull] Azzurro chiaro */
    --body-color: var(--ul-nero); /* [ull] Nero*/

    --menu-bg: var(--ull-blu); /* [ull] Blu scuro */
    --menu-color: var(--ull-bianco); /* [ull] Azzurro chiaro */

    --footer-bg: var(--ull-blu); /* [ull] Blu scuro */
    --footer-color: var(--ull-bianco); /* [ull] Azzurro chiaro */
    --footer-bottom-bg: var(--ull-blu); /* [ull] Blu scuro */
    --footer-bottom-color: var(--ull-bianco); /* [ull] Azzurro chiaro */

    --a-color: var(--ull-rosso);

    --higtlight-color:var(--ull-blu);
    --higtlight-bg:var(--ull-giallo);


   /* --button-bg: var(--ull-blu);
    --button-color: var(--ull-giallo);
    --button-bg-hover: var(--ull-giallo);
    --button-color-hover: var(--ull-blu); /**/

    --button-bg: var(--ull-giallo);
    --button-color: var(--ull-blu);
    --button-bg-hover: var(--ull-blu);
    --button-color-hover: var(--ull-giallo);

    --button-dark-bg: var(--ull-giallo);
    --button-dark-color: var(--ull-blu);
    --button-dark-bg-hover: var(--ull-bianco);
    --button-dark-color-hover: var(--ull-giallo);

    --title-a-color:  var(--ull-blu);
    --cover-color: green;

    --section-bg-light: var(--ull-bianco);
    --section-color-light: var(--ull-nero); 
    --section-bg-white: #ffffff; 
    --section-color-white: var(--ull-nero); 
    --section-bg-medium: #cee5fd; 
    --section-color-medium: var(--ull-nero); 

    --section-bg-dark: var(--ull-blu); 
    --section-color-dark: var(--ull-bianco); 
  
    --section-bg-gray: gray; 
    --section-color-gray: var(--ull-nero); 
} 

/* Generale */

@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 300 900;
  src: url('Figtree[wght].ttf') format('truetype-variations');
}

body, html{ font-family: 'Figtree'; font-weight:300;  }

.col-40{ width: 40%; }
.col-45{ width: 45%; }
.col-55{ width: 55%; }
.col-60{ width: 60%; }

@media (max-width: 768px) {
  [class*='col-'] { width: 100%;}
  .sma-40 { width: 40%; }
  .sma-45 { width: 45%; }
  .sma-55 { width: 55%; }
  .sma-60 { width: 60%; }
}
/* a:visited, a:link { color: var(--a-color); } /**/

a:link, a:visited {
  color: inherit;
  text-decoration: none;
}

a.link-icon::after {
  content: url('link.svg'); 
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-left: 0.25em;
}


.icon-color-red {
  filter: invert(35%) sepia(84%) saturate(2592%) hue-rotate(340deg) brightness(112%) contrast(108%);
}

.icon-color-white {
  filter: invert(88%) sepia(14%) saturate(324%) hue-rotate(191deg) brightness(102%) contrast(110%);
}

h1, h2, h3, h4, h5, h6, .text-1, .text-2, .text-3, .text-4  {
  font-weight: 300;
}

strong{
  font-weight: 600;
}

.emph{
  color: var(--ull-bianco);
  background-color: var(--ull-blu);
  font-variant: small-caps;
  padding-left: 0.2em;
  padding-right: 0.2em;
  font-size:105%;
}

.highlight{
  margin:1em;
  padding: 1em;
  background-color: var(--higtlight-bg);
  color: var(--higtlight-color);
}

.label{
  font-size: 0.8em;
  font-variant: small-caps;
  color: var(--ull-blu);
  margin-bottom: 0.2em;
}



.icon-section {
  width: 45%;
}

.icon-settore {
  width: 10em;
  margin-bottom:0.1em;
}

ul.limiti, ul.opportunita {
  list-style-type: none;
  padding-left: 0;
}

ul.limiti li, ul.opportunita li {
  position: relative;
  padding-left: 1.5em;
  padding-right: 0.5em;
  margin-bottom: 0.7em;
  text-align: left;
}

ul.limiti li::before {
  content: "✗";
  position: absolute;
  left: 0.5em;
  color: #ff0000;
  font-weight: bold;
}

ul.opportunita li::before {
  content: "✔"; /* Simbolo di spunta */
  position: absolute;
  left: 0.4em;
  color: green;
  font-weight: bold;
}

.button{
  border-radius: 20px;
  box-shadow: 5px 5px 10px 2px #888;
}

a.button{
  background-color: var(--button-bg);
  color:var(--button-color);
}

a.button:hover{
  background-color: var(--button-bg-hover);
  color:var(--button-color-hover);
}

a.button-dark{
  background-color: var(--button-dark-bg);
  color:var(--button-dark-color);
}

a.button-dark:hover{
  background-color: var(--button-dark-bg-hover);
  color:var(--button-dark-color-hover);
}

.box{
   /*  border: solid 2px var(--ull-blu); /* */
   padding: 0em;
}

.box-title, .box-title-dark{
  /* background-color: var(--button-bg); /* */
  /* color:var(--ull-bianco); /* */
  border: solid 2px var(--ull-blu);
  border-radius: 20px;
  padding:0.5em;
}

.box-title-dark{
  /* background-color: var(--button-bg); /* */
  /* color:var(--ull-bianco); /* */
  border: solid 2px var(--section-color-dark);
}

.box p{
  padding:0.5em;
}
/* Footer */
.footer-bottom a, .footer-bottom a:visited, .footer-bottom a:link { color: var(--footer-bottom-color);    }
.footer-bottom{
  border-top: solid 1px black;

}

/*
@font-face {
  font-family: 'Figtree';
  font-style: italic;
  font-weight: 300 900;
  src: url('Figtree-Italic[wght].ttf') format('truetype-variations');
}/**/

/* Menu */

body{ padding-top: 100px; }

.header__img{height:40px;}

/* ! Title System */
/*
h1, .text-1 {font-size: 2.2rem;margin-bottom:1rem}
h2, .text-2 {font-size: 2.0rem;margin-bottom:1rem}
h3, .text-3  {font-size: 1.8rem;margin-bottom:1rem}
h4, p, .text-4 {font-size: 1.2rem;margin-bottom:1rem; line-height: 1.5;}
a{color: var(--title-a-color)}/**/

.text-2{line-height: 1.3;}
.text-3{line-height: 1.3;}

.button .text-3 {line-height: 1.15;}

/*.text-1{background-color: red;}
.text-2{background-color: green;}
.text-3{background-color: yellow;}
.text-4{background-color: blue;}/**/

p, li {font-size: 1.2rem;}

/* Images  */

.img-chi-sono{
  float: right;
  margin: 0.5em -2em 0.5em 1em;
  width: 45%;
}

@media (max-width: 768px) {
  .img-chi-sono{
    float:none;
    width: 90%;
    margin: 1em 0 1em 0;
  }

  .button-first{
     margin-bottom:2em;
  }
}


.hero-ull{ display: flex; align-items: center;}
.hero-ull p { line-height: 1.25em;}
.img-res { margin-bottom: 0px;}

summary{
  font-size: 1.8rem;margin-bottom:1rem;
}

#top-menu{
  position: fixed;
  top: -100px; /* Nascondi inizialmente il menu */

}

.icon-top-menu{
  height: 42px;
  padding-right: 0.7em;
}

#top-menu li{
  display: inline-block;
}

#icons-mobile-menu{
  display: none; 
}

.icons-social{
  margin-top:1em;  
}
@media (max-width: 768px) {

#top-menu{
  position: fixed;
  top: -100px; /* Nascondi inizialmente il menu */
  right:0px;
  width: 100%;
  background: var(--ull-bianco);
  color: var(--ull-blu);
  border-bottom: solid 2px var(--ull-blu);
  height:70px;
  padding: 13px;
  transition: top 0.3s ease-in-out;
  z-index: 2000;
}

#top-menu.visible {
  top: 0; /* Mostra il menu */
}

#icons-mobile-menu{
  display: block; 
}

}
/* Section  */

.section-light {
  background-color: var(--section-ull-bianco);
}

.section-white {
  background-color: #ffffff;
}

.section-medium {
  background-color: var(--section-bg-medium);
  color: var(--section-color-medium);
}

.section-gray {
  background-color: var(--section-bg-gray);
  color: var(--section-color-gray);
}

.section-dark {
  background-color: var(--section-bg-dark);
  color: var(--section-color-dark);
  /* text-align: center;   /* centra orizzontalmente */
}


.box-number {
  text-align: center;
  margin: 0 auto;

}

.number {
  width: 2em;              /* diametro del cerchio */
  height: 2em;
  border: 3px solid ; /* colore e spessore del bordo */
  border-radius: 50%;        /* rende il div circolare */
  box-sizing: border-box;    /* include il bordo nelle dimensioni */
  text-align: center;
  margin: 0 auto;
  display: flex;             /* per centrare il contenuto */
  align-items: center;       /* centra verticalmente */
  justify-content: center;   /* centra orizzontalmente */
  font-size: 3em;
    font-weight: 900;
}

.number-pilastri {
  width: 1.4em;              /* diametro del cerchio */
  height: 1.4em;
  border: 2px solid ; /* colore e spessore del bordo */
  border-radius: 50%;        /* rende il div circolare */
  box-sizing: border-box;    /* include il bordo nelle dimensioni */
  text-align: center;
  margin: 0 auto;
  display: flex;             /* per centrare il contenuto */
  align-items: center;       /* centra verticalmente */
  justify-content: center;   /* centra orizzontalmente */
  font-size: 1.5em;
    font-weight: 700;
  margin-bottom:0.3em;
}

.MarcoDiFabbrica-Marco{
  font-style: italic;
  font-family: serif;
  font-size: 1.7em;
  color: var(--ull-giallo);
}
.MarcoDiFabbrica-diFabbrica{
  font-size: 1.3em;
}

.MarcoDiFabbrica-aziende{
  text-transform: uppercase;
}

.no-border{
  border: none;
}

p.summary, p.summary-dark
{
  background-color: var(--section-bg-medium);
  padding: 1em;
}

p.summary-dark
{
  color: var(--ull-blu);
}