:root {
    --blue-color: blue;  
}


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


img {
    max-width: 100%;
}

body {
    font-family: sans-serif;
}

ul {
    list-style: none;
}

li {
    padding: 5px;
}

header li {
    padding: 10px;;
}

header {
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 4;
    padding-left: 20px;
    padding-right: 20px;
    background-color: white;
    
}

footer {
    background-color:black ;
    min-height: 600px;
    display: flex;
    justify-content: center;
    align-items: center;
   
}

/* DEBUG */

.bg-blue {
    background-color: blue;
}

.bg-pink {
    background-color: pink;
}

.bg-yellow {
    background-color: yellow;

}

.bg-brown {
    background-color: brown;
}

.bg-lightblue {
    background-color: lightblue;
}

.bg-antiquewhite {
    background-color: antiquewhite;
}

.bg-grey {
    background-color: grey;
}

.bg-green {
    background-color: green;
}

.bg-black {
    background-color: black;
}

.bg-orange {
    background-color: orange;
}

.min-h-500 {
    min-height: 500px;
    height: 0;
}

.min-h-800 {
    min-height: 800px;
    
}

.max-h-800 {
    max-height: 800px;
    
}

.min-h-100 {
    min-height: 100px;
}

.min-h-200 {
    min-height: 200px;
}

.min-h-40 {
    min-height: 40px;
    
}

.min-h-50 {
    min-height: 50px;
    
}

/* utility */

.border-black {
    border: 1px solid black;
}

.white {
    color: white;
}

.grey {
    color: grey;
}

.width-30x100 {
    width: 30%;
}


.flex {
    display: flex;
}

.justify-content-center {
    justify-content: center;
}

.justify-content-between {
    justify-content: space-between;
}

.justify-content-around {
    justify-content: space-around;
}

.justify-content-evenly {
    justify-content: space-evenly;
}

.mx-auto {
    margin: 0 auto;
}

.align-items-center {
    align-items: center;
}

.py-20 {
    padding-top: 20px;
    padding-bottom: 20px;
}

.padding-top-200 {
    padding-top: 200px;
}

.padding-b-20 {
     padding-bottom: 20px;
}

.padding-right-10 {
    padding-right: 10px;
}

.padding-right-20 {
    padding-right: 20px;
}

.padding-right-30 {
    padding-right: 30px;
}

.padding-right-30 {
    padding-right: 30px;
}

.padding-left-20 {
    padding-left: 20px;
}

.margin-bottom-10 {
    margin-bottom: 10px;
}

.margin-bottom-20 {
    margin-bottom: 20px;
}

.margin-bottom-30 {
    margin-bottom: 30px;
}

.margin-bottom-40 {
    margin-bottom: 40px;
}

.margin-bottom-50 {
    margin-bottom: 50px;
}

.margin-bottom-60 {
    margin-bottom: 60px;
}

.margin-bottom-70 {
    margin-bottom: 70px;
}

.margin-top-20 {
    margin-top: 20px;
}

.margin-top-30 {
    margin-top: 30px;
}

.margin-left-20 {
    margin-left: 20px;
}

.flex-column {
    flex-direction: column;
}

.flex-grow {
    flex-grow: 0;
}

.border-bottom-white {
    border-bottom: 1px solid white;
}

.w-80x100 {
    max-width: 80%;
}

.mb-200 {
    margin-bottom: 200px;
}

/* x */
.header-nav {
    min-width: 100%;
   
    
}

.link-left {
    padding-top: 10px;
}

.link-right {
    padding-top: 15px;
}

.button {
    color: white;
    background-color: blue;
    padding: 5px 10px ;
    margin: 0 auto;
    display: inline-block;
}


.titolo {
    margin-top: 30px;
    margin-bottom: 20px;
}

.h1-titolo {
    font-size: 3rem;
    max-width: 80%;
    padding-bottom: 30px;
}

.h2-titolo {
    font-size: 2rem;
    
    
}

.container {
    min-width: 80%;
     min-height: 500px;
    margin: 0 auto;
}

.left {
    width: 30%;
    min-height: 500px;
    margin-top: 30px;
}

.left p {
    font-size: 1.2rem;
    padding-bottom: 30px;
    padding-top: 10px;
}

.left a{
    font-size: 1.2rem;
    margin-bottom: 30px;
}

.arrow {
    font-size: 3rem;
    margin-top: 50px;
}

.button-large {
    color: white;
    background-color: blue;
    padding: 10px 20px ;
    margin: 0 auto;
    display: inline-block;
    text-decoration: none;

}


.right {
    width: 70%;
    min-height: 500px;
}

.img-hero {
    position: relative;
    top: 50px;
}

.container-2 {
     width: 80%;
    max-width: 1000px;
    margin: 0 auto;
    
    
}

.sezione-colonne {
    padding: 10px 0;
}

.row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

   
}

.colonna {
    width: 30%;
    margin-bottom: 20px;
    
    /* debug */
    
    min-height: 1000px ;
}

.sezione-colonne li {
    display: flex;
    gap: 10px;
}

.sezione-colonne li i {
    text-align: left;
}

.intestazione {
    text-align: center;
    border-bottom: 1px solid black;
    padding: 5px 0 5px;
}

.interno-card {
    padding: 20px 20px;
}

.fa-check {
    color: blue;
}

.interno-card hr {
    max-width: 30px;
}



.flex li {
    padding-bottom: 20px;
}

.container-3 {
     width: 80%;
    max-width: 1000px;
    margin: 0 auto;
    margin-bottom: 200px;
}

.left-2 {
    width: 70%;
    min-height: 200px;
}

.right-2 {
    width: 30%;
    min-height: 200px;
}

.container-4 {
     width: 80%;
    max-width: 1000px;
    margin: 0 auto;
    margin-bottom: 100px;
}

.left-3 {
    width: 60%;
    max-height: 500px;
}

.right-3 {
    width: 40%;
    max-height: 500px;
}

.subtitle {
    margin-bottom: 30px;
}

.subtitle-2 {
    margin-bottom: 100px;
}

.card {
    width: 30%;
    margin-bottom: 20px;
    
    /* debug */
   
    min-height: 400px ;
}

.container-footer {
     max-width: 80%;
     min-height: 600px;
    margin: 0 auto;
        padding-top: 50px;
    padding-bottom: 50px;
    
}

.footer-column {
    border: 1px solid rgb(0, 0, 0);
   padding: 0 50px;
    flex-basis: 20%;
    
}

.button-large-white {
    color: black;
    background-color: white;
    padding: 10px 20px ;
    margin: 0 0 0 20px;
    border: 1px solid black;
    display: inline-block;
    text-decoration: none;

}