:root {
    --primary: #07F7F4 !important;
    --primary-dark: #057270 !important;
    --font-family-sans-serif: "Jost", -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"
}

/********************* Fonts ********************************/
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Jost';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/jost/jost-v15-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  /* jost-800 - latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Jost';
    font-style: normal;
    font-weight: 800;
    src: url('../fonts/jost/jost-v15-latin-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }

/********************* Image ********************************/
.img-full {
    width: 100%;
    max-width: 100%;
    height: auto !important;
}
.img-responsive-auto {
    max-width: 100% !important;
    height: auto !important;
    margin: auto;
}

/********************* Colori di sfondo ********************************/
.bg-dark{
    background-color: #000000 !important;
}
.bg-dark{
    background-color: #000000 !important;
}

/********************* Heanding ********************************/
h1, h2, h3, h4, h5, h6{
    color: var(--primary);
    font-weight: 800;
    text-transform: uppercase;
}
h1{
    font-size: 1.825rem;
    font-size: clamp(1.825rem, 1.565rem + 1.3vw, 3.125rem);
}
h2{
    font-size: 1.7rem;
    font-size: clamp(1.7rem, 1.49rem + 1.05vw, 2.75rem);    
}
h3{
    font-size: 1.5rem;
    font-size: clamp(1.5rem, 1.375rem + 0.625vw, 2.125rem);    
}
h4{
    font-size: 1.4rem;
    font-size: clamp(1.4rem, 1.2799999999999998rem + 0.6000000000000001vw, 2rem);
}

/********************* body ********************************/
body{
    font-size: 16px;
    font-family: var(--font-family-sans-serif);
}

/********************* href ********************************/
a{
    color: var(--primary);
}

/********************* href ********************************/
.btn-primary{
    background-color: var(--primary) !important;
    border-color: var(--primary);
    color: #000000;
}
.btn-primary:hover{
    background-color: var(--primary-dark) !important;
    border-color: var(--primary-dark);
    color: #ffffff;
}

/********************* navbar ********************************/
.navbar{
    padding: 10px 10px;    
}
.navbar .nav-link{
    color: var(--primary) !important;
}
.navbar-brand span{
    font-weight: 800;
    color: var(--primary);
    text-transform: uppercase;
}

@media (max-width: 767.98px) {
    .navbar .navbar-nav{
        padding: 24px 0;
    }
    .navbar .navbar-nav .nav-item{
        border-top: 1px solid var(--primary);
        border-bottom: 1px solid var(--primary);
    }        
    .navbar .navbar-nav .nav-item .nav-link{
        padding-left: 10px;
    }    
}

/********************* Footer ********************************/
footer{
    background-color: #141414;    
}
footer .social{
    height: 50px;
    width: 50px;
}

/********************* Generic ********************************/

main {
    padding-top: 70px;
}