:root{
    /* color */
    --bg:#161618;
    --bgLight:rgba(43, 43, 45,0.7);
    --primary:#015E82;
    --bgPrimary:hsla(197, 98%, 26%, 0.758);
    --secondary:#8C5CDD;
    --secondaryDark:#2D2652;
    --secondary30:rgba(140, 92, 221, 0.3);
    --secondaryHex:#2d2652;
    --text:#ffffff;
    --white:#ffffff;

    /* font */
    --textFont:'Montserrat',sans-serif;
}
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html, body{
    scroll-behavior: smooth;
}
body{
    background-color: var(--bg);
    font-family: var(--textFont);
    color: var(--text);
}
h1,h2,h3,h4,h5,h6{font-weight: 700;}
h1{font-size:2.986rem ; margin:0.67rem 0 ;}
h2{font-size:2.488rem ; margin:0.83rem 0  ;}
h3{font-size:2.074rem ; margin:1rem 0 ;}
h4{font-size:1.728rem ; margin:1.33rem 0 ;}
h5{font-size:1.44rem ; margin:1.67rem 0 ;}
h6{font-size:1.2rem ; margin:2rem 0 ;}
p{color: var(--text); font-size: 18px; line-height: 32px;}
ul{list-style: none;}
li{margin:3px 0;}
.backTitle{position: absolute; top:0px; left: 5px; font-size: 4.8rem; color: var(--secondary30);}
.text-justify{text-align: justify; letter-spacing: 1px;}
.img-fluid{max-width: 100%; height: auto;}
#headerFixed{
    position: fixed;
    width: 100%;
    padding:20px;
    display: flex;
    justify-content: center;
    align-items: center; 
    background-color: transparent;
    z-index: 10;
    /* display: none; */
}
#logo{ display: none;}
#menu{
    background-color: rgba(255, 255, 255, 0.10);
    /*border: 1px solid rgba(255, 255, 255, 0.10);*/
    border-radius: 8px;
    flex:0 0 auto;
    padding:3px 8px;
    -webkit-backdrop-filter: blur(.15rem );
    backdrop-filter: blur(.15rem);
}
#menu ul{
    display: flex;
    list-style: none;
    gap: 8px;
    /* justify-content: space-between; */
}
#menu ul li{
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: rgba(107, 107, 107, 0.60);
    padding: 8px 16px;
    transition: all .180s ease-in-out;
}
#menu ul li:hover{
    background-color: var(--primary);
    cursor: pointer;
}

#menu ul li a{
    color: var(--text);
    text-decoration: none;
    font-size: 14px;
}

#mailIcon{
    text-align: end;
    display: none;
}
.services{
    font-weight: 500;
    letter-spacing: 0.4px;
    font-size: 14px;
}

/* classi di servizio */

.vh-20{
    height: 20vh;
}
.bgSecondary30{
    /*background-color: var(--secondary30);*/
    background-color: var(--secondaryHex);
    /* border-left: 2px solid rgba(255,255,255,0.2); */
}
.bgSecondary{
    background-color: var(--secondary);
}
.bgPrimary{
    background-color: var(--bgPrimary);
    border-top: 1px solid rgba(255,255,255,0.1);
}
.primary{color: var(--primary);}
.secondary{color: var(--secondary);}
.secondary30{color: var(--secondary30);}
.halfBack{
    position: relative;
}
.halfBack:after{
    content: attr(data-content);;
    position: absolute;
    color:transparent;
    top: 60%;
    left: 0;
    width: 100%;
    height: 40%;
    background-color: var(--primary);
    z-index: -1;
}
.accordionServizi{
    background-color: var(--bgLight);
    border: 1px solid rgba(140, 92, 221, 0.3);
    border-radius: 20px;
    padding: 0px 20px;
}
.accordionServizi:hover{
    cursor: pointer;
}
.accordionServizi h6{
    font-size: 18px;
    letter-spacing: 1px;
}
.accordionServizi span{
    font-size: 44px;
    color: var(--secondary);
}
.accordionContent{
    max-height: 0;
    overflow: hidden;
    transition: max-height .2s ease-out;
    text-align: start;
}

/* @note progetti */
#progetti .row{
    margin-top: 180px;
}
#progetti video{
    width: 95%;
    height: auto;
    border-radius: 25px;
    overflow: hidden; 
    box-shadow: 0px 0px 20px rgba(0,0,0,0.5);
}
.btnMl{
    background-color: var(--primary);
    color: var(--text);
    padding: 8px 16px;
    border-radius: 8px;
    text-decoration: none;
    border: 1px solid var(--primary);
    transition: all .180s ease-in-out;
}
.btnMl:hover{
    background-color: var(--secondary);
    border: 1px solid var(--secondary);
    cursor: pointer;
}
.btnMl a{
    color: var(--text);
    text-decoration: none;
}
.info{
    font-size: 13px;
    text-transform: uppercase;
    color: var(--secondary);
}
/* @note footer */

footer a{
    color: var(--white);
    text-decoration: underline;
    font-weight: bold;
}
.p-contatti{
    font-size: 42px;
    line-height:60px;
}
.p-contatti a{
    color: var(--secondary);
    text-decoration: underline;
    font-weight: 800;
}
footer a svg{
    fill: var(--white);
}


/* @note media query */

@media(min-width:576px){  /* sm */
	
}
@media(min-width:768px){ /* md */
	
    .vh-80{
        height: 80vh;
    }
    #logo{ display: block;}

    #menu ul li a{
        font-size: 18px;
    }

    #mailIcon{
        display: block;
    }
    .bgSecondary30{
        border-left: 2px solid rgba(255,255,255,0.2);
    }
	
}
@media(min-width:992px){ /* lg */
	
	
}
@media(min-width:1200px){ /* xl */
	
	
}