.keyword{
    color:var(--main-color);
    text-transform: uppercase !important;
    font-weight: bold;
}
.callToContact{
    text-transform: uppercase !important;
    font-weight: bold;
    background:var(--main-color);
    color:white;
    border:none;
    padding:15px;
    min-width:200px;
    font-family:'Red Hat Display', sans-serif;
    border-radius:25px;
    margin-top:10px;
    margin-bottom:10px;
    font-size:20px;
    transition: all 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    cursor: pointer;
}
.callToContact:hover{
    
    background:#3b8c86;
}

.progCont, .lavCont
{
    display:flex;
    gap:20px;
    justify-content: center;
    align-items:center;
    flex-direction: column;
}

.progetto, .lavoro{
    padding:3%;
    border-radius:25px;
    background:var(--dark-secondary);
}
.progetto h3, .lavoro h3{
    text-align:center;
    font-size:24px;
    /*aggiungere colore random dei titoli*/
}
.progetto iframe, .lavoro iframe{
    min-width:60%;
    max-width:100%;
    height:500px;
    border-radius:25px;
    border:none;
}

/*servizi*/
.serviziOfferti{
    background:#00cba9;
    margin-top:-5px;
    padding-top:5%;
    padding-bottom:5%;
}
.serviziOfferti h1{
    margin-top:0;
}
@media(max-width:768px){
    .serviziOfferti{
        padding-left: 2.5%;
        padding-right: 2.5%;
    }
}
@media(min-width:768px){
    .serviziOfferti{
        padding-left: 5%;
        padding-right: 5%;
    }
}
.servizio{
    background:var(--dark-secondary);
    border-radius:25px;
    padding:2%;
}
.contServizi{
    display:flex;
    justify-content: center;
    align-items: center;
    gap:25px;
    flex-wrap: wrap;
}
.servizio button{
    width:100%;
    font-size:18px;
    background:#67a6a2;
    border:none;
    padding:2%;
    border-radius:25px;
    color:white;
    cursor: pointer;
    transition:all 1s cubic-bezier(0.175, 0.885, 0.32, 1.275); 
}
.servizio button:hover{
    background:#31807b;
}

.progetto, .lavoro{
    width:100%;
}
.progetto .progettoFlex, .lavoro .lavoroFlex{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: self-start;
    justify-content: space-between;
    text-wrap: wrap;
}
.progettoFlex div, .lavoroFlex div{
    padding:2%;
}
@media(min-width:1000px){
    .progettoFlex iframe, .lavoroFlex iframe{
        width:70%;
    }
    .progettoFlex div, .lavoroFlex div{
        width:26%;
    }
}
@media(max-width:1000px){
    .progettoFlex iframe, .lavoroFlex iframe{
        width:100%;
    }
}
.lavoro a, .progetto a{
    color:var(--main-color);
}