/* ---------------- section principales prestations sur la page d'accueil -------------- */
.prestations{
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding:80px;
    gap:20px;

    & h2{
        font-family:'Didot';
        color:var(--black);
        font-size:4.5rem;
    }

    & p{
        font-family:'ProximaNovaLight';
        font-size:1.1rem;
        text-align:center;
        width:70%;

    }

    .prestations-cta{
        display:flex;
        gap:15px;
        & button{
            padding:15px 50px;
            & a{
                font-size:1rem;
            }
        }
    }
}

.prestations-bulles{
    padding:50px 0;
    display:flex;
    gap:35px;
    & .bulles-item{
        display:flex;
        flex-direction: column;
        justify-content: start;
        align-items: center;
        width:150px;
        gap:5px;
        & img{
            border-radius:100%;
            width:150px;
            height:150px;
            object-fit: cover;
            opacity:50%;
            transition: opacity 0.2s;

        }
    }
}

.bulles-img{
    background-color:var(--beige);
    border-radius:100%;
}

.bulles-item:hover img{
    opacity:100%;
    transition: opacity 0.2s;
}



/* ---------------- responsive -------------- */
@media screen and (max-width:1280px){
 .prestations-bulles {
    & .bulles-item {
        width:120px;
        & p{
            font-size:0.9rem;
        }
    & img {
      width: 120px;
      height: 120px;
    }
  }
}
}

@media screen and (max-width:1024px){
    .prestations{
        padding: 50px 80px;
        & h2{
            font-size:3.5rem;
        }
        & p{
            font-size:1rem;
            width:100%;
        }
    }

    .prestations-bulles {
    padding: 30px 0;
    flex-wrap: wrap;
    justify-content: center;
    & .bulles-item {
    width:29%;
    & img {
      width: 100px;
      height: 100px;
    }
  }
}
}

@media screen and (max-width:768px){
.prestations{
padding: 50px;
    & h2{
        font-size:3rem;
    }
    & p{
        font-size:0.9rem;
        width:100%;
    }
}

.prestations-bulles {
    padding: 20px 0;
    & .bulles-item {
    width:27%;
  }
}
}

@media screen and (max-width:480px){
.prestations{
padding: 50px 30px;
    & h2{
        font-size:3rem;
    }
    & p{
        font-size:0.9rem;
        width:100%;
    }
}

.prestations-bulles {
    padding: 20px 0;
    & .bulles-item {
    width:25%;
    & p{
        font-size:0.8rem;
    }
    & img{
        width:80px;
        height:80px;
    }
  }
}

.prestations {
  & .prestations-cta {
    & button {
      padding: 12px 30px;
      & a{
        font-size:0.9rem;
      }
    }
  }
}
}