@charset "utf-8";

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

::after, ::before{
    box-sizing: content-box;
}

:root{
    --blu1: #2c5f8a;
    --blu2:#122637;
    --blu3:#1a3953;
    --arancione1:#e26a33;
}

html{
    overflow-x: hidden;
}

a{
    text-decoration: none;
}


hr{
    background-color: var(--arancione1);
    
}

h1{
    text-transform: uppercase;
    color: #fff;
    font-size: 50px;
    text-align: center;
    text-shadow: 3px 3px 3px #122637;
    padding-bottom: 3% ;    
}


h2{
    text-transform: uppercase;
    color: var(--blu1);
    font-size:40px ;
}

h3{
    text-transform: uppercase;
    color: var(--blu1);
    font-size: 28px;
    font-weight: 300;    
}

p{
    font-size:20px ;
}

.hr{
    padding-left: 5%;
    padding-right: 5%;
}

.sottile{
    font-weight: 300;
}

.navbar{
    padding-right: 10%;
    padding-left: 10%;
    position: sticky;
    top: 0;
    z-index: 10000;
    background-color: #fff;
}

.nav-item{
    padding-left: 2%;
}

.nav-link{
    color: var(--blu1) !important;
    font-size: 20px;
    font-weight: 400;
}

.nav-link:active{
    color: var(--arancione1);
}

.navbar-nav .nav-link.active, 
.navbar-nav .nav-link.show {
    color: var(--blu1) !important;
}




.navbar-collapse{
    display: flex;
    flex-wrap: wrap;
    justify-content: end;
}



/* Apri il dropdown all'hover invece che al click */
.nav-item.dropdown:hover > .dropdown-menu {
  display: block;
}


.dropdown-menu {
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  padding: 6px;
  margin-top: 0; /* elimina il gap che chiuderebbe l'hover */
}

.dropdown-item {
  color: var(--blu1);
  font-size: 16px;
  border-radius: 6px;
  padding: 8px 14px;
}

.dropdown-item:hover {
  background-color: #f0f5fa;
  color: var(--blu2);
}

.dropdown-item.active,
.dropdown-item:active {
  background-color: #fdf2ec;
  color: var(--arancione1);
}




/*HERO*/

.hero{
    height: 600px;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.imghero1{
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),url('../img/hero.jpg');
}
.imghero2{
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),url('../img/hero2.jpg');
}

.bottone{
    color: #fff;
    font-size: 30px;
    padding: 1% 3% 1.5% 3%;
    border-radius: 5px;
    text-transform: uppercase;
    border: 0;

    /* From https://css.glass */
    background: rgba(18, 38, 55, 0.68);
    border-radius: 5px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(7.1px);
    -webkit-backdrop-filter: blur(7.1px);
}

.bottone:hover{
    cursor: pointer;
    color: #fff;
    text-decoration: none;
    /* From https://css.glass */
    background: rgba(226, 106, 51, 0.68);
    border-radius: 5px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(7.1px);
    -webkit-backdrop-filter: blur(7.1px);
}


.bottone2{
    border: 0;
    color: #fff;
    font-size: 20px;
    padding: 1.5% 2% 1.5% 2% ;
    border-radius: 5px;
    text-transform: uppercase;

      /* From https://css.glass */
    background: rgba(18, 38, 55, 0.68);
    border-radius: 5px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(7.1px);
    -webkit-backdrop-filter: blur(7.1px);
}

.bottone2:hover{
    cursor: pointer;
    color: #fff;
    text-decoration: none;
    /* From https://css.glass */
    background: rgba(226, 106, 51, 0.88);
    border-radius: 5px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(7.1px);
    -webkit-backdrop-filter: blur(7.1px);
}


/*CHI SIAMO*/

#chisiamo{
    padding: 5%;
}



/*soluzioni*/

.soluzioni{
    display: flex;
    justify-content: space-evenly;
    padding-top: 5%;
    padding-bottom: 5%;
}

.soluzione{
    position: relative;
    z-index: 10;
    display: block;
    transition: all .2s ease-in-out;
    max-width: 100%
    
}

.soluzione:hover {
    transform: scale(1.1);  
}


.testo h3{
    font-size: 40px;
}

.riquadrato{
    position: absolute;
    top: -10px;
    left: -5px;
    background-color: #fff;
    border-top: 3px solid var(--arancione1);
    border-left: 3px solid var(--arancione1);
    padding: 5%;
}


/*preogetti e innovazione*/

.progettieinnovazione{
   display: flex;
   justify-content: space-evenly;
    padding-top: 5%;

}

.immagine_pei{
    margin-left: 5% ;
    position: relative;
    max-width: fit-content;
    max-width: 100%;
    height: fit-content;     
    align-self: flex-start;
}

@property --angle{
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}

.immagine_pei::after, .immagine_pei::before{
    content: '';
    position: absolute;
    height: 100%;
    width: 100%;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    z-index: -1;
    padding: 8px;
    background-image: conic-gradient(from var(--angle), #e26a33, #e8885c, #eea685, #f3c3ad, #f9e1d6,#e26a33);
    animation: 25s spin linear infinite;

}

.testo{
    padding: 0 5% 0 5% !important;
}

@keyframes spin{
    from{
        --angle: 0deg;
    }
    to{
        --angle: 360deg;
    }
}


.margin_right{
    margin-right: 5%;
}




/*SERVIZI*/

.servizi{
    text-align: center;
    padding-top: 5%;
}


.servizi h3{
    font-size: 60px;
    color: var(--blu1);

}


.servizio h4 {
    text-align: center;
    color: var(--blu1);
}

.icona_servizio {
    display: block;
    margin: 0 auto;
    padding-bottom: 2%;
}
.tutti_servizi{
    display: flex;
    justify-content:space-around;
    padding: 2% 5% 2% 5%;
    text-align: center;
}

.servizio{
    margin: 3%;
    padding: 2%;
    text-align: left;
    border-radius: 10px;   
    flex-basis: 30%;
    position: relative;
    background-color: #fff;
    -webkit-box-shadow: 0px -1px 8px 0px #122637; 
    box-shadow: 0px -1px 8px 0px #122637;
}

.numero a{
    color: var(--blu2);
    text-decoration: none;
}


@property --angle{
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}

.servizio::after, .servizio::before{
    content: '';
    position: absolute;
    height: 50%;
    width: 100%;
    top: 50%;
    left: 50%;
    translate: -50% 0;
    z-index: -1;
    padding-top: 1px;
    padding-bottom: 8px;
    border-radius: 10px; 
    background-image: conic-gradient(from var(--angle), #e26a33, #e8885c, #eea685, #f3c3ad, #f9e1d6,#e26a33);
    animation: 25s spin linear infinite;
}



@keyframes spin{
    from{
        --angle: 0deg;
    }
    to{
        --angle: 360deg;
    }
}


/*CTA*/

.cta{
    display: flex;
    flex-wrap: wrap;
    text-align: center;
    background-image:linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(../img/cta.jpg);
    background-repeat: no-repeat;
    background-position: center;
    padding: 5%;
    justify-content: center;
}

.cta h5, .cta p{
    flex-basis: 100%;
    color: #fff;
    text-transform: uppercase;    
}

.cta h5{
    font-size: 25px;
    font-weight: 500;
}

.cta p{
    font-weight: 300;
}


.chiamaora{
    position: relative;
    max-width: fit-content;
    margin: 5%; 
}

.numero{
    opacity: 0;
    position: absolute;
    inset: 0;  
}

.numero:hover{
    opacity: 100;
    cursor: pointer;
    border: 5px solid var(--arancione1);
    color: var(--blu2);
    background-color: #fff;
}

.chiamaora, 
.numero{
    background-color: var(--blu1);
    color: #fff;
    font-size: 25px;
    padding:1.5% ;
    border-radius: 5px;
    text-transform: uppercase;
    text-align: center;   
    display: flex;
    justify-content: center;
    align-items: center;
}

.bi-telephone-fill,
.bi-phone-fill {
    color: var(--blu2);
    padding-right: 5%;
}

.bi-telephone,
.bi-phone{
    color: #fff;
    padding-right: 5%;
}

/*FOOTER*/

.footer{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 5% 5% 2% 5%;
    background-color: var(--blu1);
}

 
.hrgradient{
    padding: 0;
    margin: 0;
    height: 10px;
    background-image: linear-gradient(to right,#d5dfe8, #809fb9,#1a3953, #122637, #d5dfe8 );
}

.footer a{
    color: #fff;
    text-decoration: none;
}

.logoAA{
    flex-basis: 30%;
    max-width: 154px;
    max-height: 82px;
}


.sedelegale,
.contatti{
    flex-basis: 20%;
    color: #fff;
    text-align: start;
}