/* VARIABILI */

:root { 

    --ull-bianco: #EDF5FD;
    --ull-azzurro: #cee5fd;    
    --ull-blu: #283A62;
    --ull-nero: #001929;
    --ull-giallo: #CDB665;
    --ull-rosso: #FF3C38;
    
    
    --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-nero); /* [ull] Blu scuro */
    --footer-color: var(--ull-bianco); /* [ull] Azzurro chiaro */
    --footer-bottom-bg: var(--ull-nero); /* [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);

    --section-bg-white: var(--ull-bianco);
    --section-color-white: var(--ull-nero); 
    --section-bg-light: var(--ull-bianco);
    --section-color-light: var(--ull-nero); 
    --section-bg-medium: var(--ull-azzurro);
    --section-color-medium: var(--ull-nero); 
    --section-bg-dark: var(--ull-blu); 
    --section-color-dark: var(--ull-bianco); 
    --section-bg-black: var(--ull-nero);
    --section-color-black: var(--ull-bianco);     

    --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);    
} 

/* 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%; }
}

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.3em;
  padding-right: 0.3em;
  font-size:105%;
}

.section-light .emph{
  color: var(--ull-giallo);
  background-color: var(--ull-blu);  
}

.section-dark .emph{
  color: var(--ull-blu);
  background-color: var(--ull-giallo);  
}
.emph-oro{
  color:var(--ull-giallo);
}

.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;
}


.no-border{
  border: none;
}

.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;
}

.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;
}

.icon-section {
  width: 45%;
}

/* Cover */

.hero-ull{
   display: flex;
   align-items: center;
  }
.hero-ull p { line-height: 1.25em;}
.img-res { margin-bottom: 0px;}
.img-res-icona { width: 80%;}
.img-border{
  border: solid 3px var(--ull-giallo);
}


/* Menu */

body{ padding-top: 50px; }

.header__img{height:40px;}

.header{
  border-bottom: solid 1px var(--ull-giallo);
}

.header__menu li a.menu--active {
  font-weight: 600;
  text-decoration: underline;
  color: var(--ull-giallo);
}

#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;  
  margin-bottom: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; 
}

}

/* Footer */
.footer-bottom a, .footer-bottom a:visited, .footer-bottom a:link { color: var(--footer-bottom-color);    }

.footer-bottom{
  border-top: solid 1px black;
}

.quick-links{
  text-align: left;
  
}

.quick-links h3 {
  font-size: 1.5em;
  font-weight: 600;
}
.quick-links li{
  list-style: none;
}

/* Section */

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

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

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

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

/* ! Title System */
.text-2{line-height: 1.3;}
.text-3{line-height: 1.3;}
li.text-3{line-height: 1;}

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

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

a.link-icon::after, i.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%);
}

/* Bottoni */

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

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

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

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);
}
 s
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);
}

/* Elenchi */

ul.personalized {
  list-style-type: none;
  padding-left: 2em;
}

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

ul.personalized li.plus::before {
  content: "✔"; /* Simbolo di spunta */
  color: green;
}

ul.personalized li.minus::before {
  content: "✗";
  color: #ff0000;
}