@font-face {
    font-family: 'Instrument Sans';
    src: url('../fonts/InstrumentSans-Medium.woff2') format('woff2'),
        url('../fonts/InstrumentSans-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Instrument Sans';
    src: url('../fonts/InstrumentSans-Regular.woff2') format('woff2'),
        url('../fonts/InstrumentSans-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Instrument Sans';
    src: url('../fonts/InstrumentSans-Bold.woff2') format('woff2'),
        url('../fonts/InstrumentSans-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

body {font-family: 'Instrument Sans'; color: #434345; }
body, html {overflow-x: hidden;}
a {color: #a2c43a; text-decoration: none;}
h1, h2, h3, h4 {color: #a2c43a; font-weight: bold;}
img {max-width: 100%;}
.h3, h3 {font-size: 1.3rem;}

.hero {background-color: green; color: white; background-image: url('../img/hero_img.jpg'); background-size: cover; height: 65vh; background-repeat: no-repeat; }
.hero .btn {background-color: transparent; color: white; font-size: 2rem; padding: 0;}
.hero-linkedin {position: absolute; height: 70px; right: 15vw; top: calc(65vh - 70px); background-color: rgba(169, 195, 82, 0.9); color: white; padding: 10px 20px; border-radius: 10px 10px 0 0 ;}
.hero-linkedin a {color: white; font-size: 2rem; }
.titolo-verde {background-color: #a2c43a; text-decoration: underline; height: 55px;}
.titolo-verde h2 {color: white; }

.appare {opacity: 0; transform: translateX(-15px); transition: opacity 0.6s ease-out, transform 0.6s ease-out;}
.appare.attivo {opacity: 1; transform: translateX(0);}

.navbar {position: absolute; width: 100vw; background-color: transparent; padding: 15px 20px;}
.navbar-brand img {width: 210px; height: auto;}
.navbar .nav-link {color: white; font-weight: 500;}
.navbar-toggler {border: 0}
.navbar-toggler:focus {box-shadow: none;}
.navbar .bi-list {color: white; font-size: 2rem;}
.gestione-credito {background-color: black; color: white; background-image: url('../img/gestione-credito_bg.jpg'); background-size: cover; background-position: center center;}
.servizi {background-image: url('../img/bg2.png'); background-size: contain; background-position: center top; background-repeat: no-repeat;}
.servizi ol {padding-left: 0; }

.footer {background: #434243; background: radial-gradient(circle,rgba(67, 66, 67, 1) 50%, rgba(88, 88, 90, 1) 100%); color: #999b9a}
.footer a {color: #a2c43a;} 
.footer .logofooter.img {width: 280px}
.footer .bi-linkedin {font-size: 1.5rem;}

.copyrights {background-color: #a2c43a; color: black} 
.copyrights a {color: black; text-decoration: underline;}

.modal-header h1, .modal-body b, .modal-body p {color: #434345}

/* PARTICELLE */
canvas {display: block; vertical-align: bottom;}

/* ---- reset ---- */
canvas {display: block; vertical-align: bottom;}

/* ---- particles.js container ---- */

#particles-js {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: url("");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
}

/* ---- stats.js ---- */

.count-particles{
  background: #000022;
  position: absolute;
  top: 48px;
  left: 0;
  width: 80px;
  color: #13E8E9;
  font-size: .8em;
  text-align: left;
  text-indent: 4px;
  line-height: 14px;
  padding-bottom: 2px;
  font-family: Helvetica, Arial, sans-serif;
  font-weight: bold;
}

.js-count-particles{
  font-size: 1.1em;
}

#stats,
.count-particles{
  -webkit-user-select: none;
}

#stats{
  border-radius: 3px 3px 0 0;
  overflow: hidden;
}

.count-particles{
  border-radius: 0 0 3px 3px;
}