.services{
    
    grid-column: 3/9;

    display: grid;
    margin: 5rem 0;
    /*grid-template-columns: repeat(3, 1fr);*/
    /* grid-template-columns: repeat(2, 20rem); */
    grid-template-columns: repeat(3, 20rem);
    grid-template-rows: auto;
    grid-column-gap: 4rem;
    grid-row-gap: 2rem;
    justify-content: center;
    justify-items: center;
    align-items: center;
}
.service-3 svg{
    transform: scale(0.8) translateY(25px);

} 



/******responsive xD*******/
@media screen and (max-width: 1050px){
    .services{
         grid-template-columns: repeat(2, 20rem); 
         grid-gap: 2rem;
    }
    .service-3{
        grid-column: 1/-1;
    
    } 
}


.title-service{
    grid-column: 1/-1;
    margin-bottom: 2rem;
    align-self: center;
    justify-self: center;
}

@media screen and (max-width: 680px){
    .services{
         grid-template-columns: repeat(1, 20rem); 
         grid-gap: 2rem;

    }
    .title-service{
        margin-bottom: 0rem;
    }


}
@media screen and (max-width: 420px){
    
    .content-service{
        text-align: center;
        font-size: 14px;
    }


}


.service{
    position: relative;
    display: grid;
    justify-items: center;
    align-items: center;
    transition: 0.25s ease-in-out ;
}

.service::before{
    content: "";
    position: absolute;
    border:2px solid rgba(19, 19, 19, 0.281);
    box-shadow: 0 1px 2px  hsla(0, 0%, 0%, 0.37);
    border-radius: 10px;
    z-index: -1;
    width: 210px;
    height: 215px;
    transition: 0.25s ease-in-out ;
}

.service:hover::before{
    
    
    border:2px solid rgba(83, 83, 83, 0.075);
    box-shadow: 2px 5px 10px  hsla(0, 0%, 0%, 0.404);
        
    
}

.service-svg{

    display: grid;
    padding: 2rem;
    width: 16rem;
    height: 16rem;
}

.service-svg p{
    display: grid;
    align-self: baseline;
}

.se0 , .se1 , .se2{
    cursor: pointer;
}
.content-service{
    color: var(--c-principal);
    opacity: 0.7;
}


/*******animation svg *******/

#lum-phone{
    fill:rgba(255, 255, 255, 0.089);
    transition: 0.8s ease-in-out;
    transform: translateX(-32px) translateY(-32px);
    
}
#phone {
    animation: flotte 1.1s ease-in-out infinite alternate;
}
#main{
    animation: flotte2 1s ease-in-out infinite alternate;
}

.se1:hover #lum-phone{
    animation: lum-phone 0.9s ease-in-out ;
}

#etoile-1{
    animation: move_x 4s ease-out infinite alternate;
}
#etoile-0{
    animation: move_x2 5s ease-out infinite 0.2s  alternate;
}


#smile{
    stroke-dasharray: 500;
    stroke-dashoffset: 500;
    transition: 1s ease-in-out;
}

#fond-visage{
    opacity: 0;
    transition: 0.4s ease-in-out ;
}

.se2:hover #smile{
    stroke: #8c8c8c;
    stroke-dashoffset: 0;
}
.se2:hover #fond-visage{
    opacity: 1;
}
.se2:hover #etoile-0 , .se2:hover #etoile-1{
    stroke: none;
    fill: beige;
}



#pc{
    transform: translateY(40px);
}
#rouage0,#rouage1,#rouage2{
    transform-origin: center;
    transform-box: fill-box;
}
#rouage0{
    animation: rotateP 4s linear infinite;
}
#rouage2,#rouage1{
    animation: rotateN 4s linear infinite;
}

#fond-pc{
    opacity: 0;
    transition: 0.3s ease-in-out;
}

.se0:hover #fond-pc{
    opacity: 1;
}

.se0:hover #rouage0{
    stroke: none;
    fill:#5fa1f2e1;
}

.se0:hover #rouage1{
    stroke: none;
    fill:#2282ff8f;
}
.se0:hover #rouage2{
    stroke: none;
    fill:#e8e8e8e5;
}

#shad-fond,#shad-fond2{
opacity: 0;
transition: 0.2s ease-in-out;
}
.se0:hover #shad-fond,.se0:hover #shad-fond2{
    opacity: 1;
}
#contour5{
    fill: #14141400;
    transition: 0.2s ease-in-out;
}

.se0:hover #contour5{
    fill: #242424;
}

.se2:hover #trace-face,.se2:hover #gomme,.se2:hover #tainee-0,.se2:hover #trainee-1,
.se2:hover #trainee-2 {
    stroke: var(--c-stroke);
}


@keyframes rotateP{
    100%{
        transform: rotate(360deg);
    }
}
@keyframes rotateN{
    100%{
        transform: rotate(-360deg);
    }
}


@keyframes dash {
    
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes showXd {
    0% {
        transform: scale(0);
    }

    25% {
        transform: scale(1);
    }

    45% {
        transform: scale(1.1);
    }

    60% {
        transform: scale(1);
    }

    100% {
        transform: scale(0);
    }
}


@keyframes lum-phone {
    0%{
        fill:rgba(255, 255, 255, 0.089);
        transform: translateX(-32px) translateY(-32px);
    }
    50%{
        fill:rgba(255, 255, 255, 0.705);
    }
    
    100%{
        fill:rgba(255, 255, 255, 0.349);
        transform: translateX(100px) translateY(100px);
    }
}


@keyframes flotte {
    100%{
        transform: translateY(-10px) ;
    }
}
@keyframes flotte2 {
    100%{
        transform: translateY(-5px) ;
    }
}
/*******pour les étoiles*******/
@keyframes move_x {
    0%{
        transform: translateX(0px) translateY(0px);
    }
    10%{
        transform: translateX(2px) translateY(1px);
    }
    20%{
        transform: translateX(3px) translateY(5px);
    }
    50%{
        transform: translateX(5px) translateY(3px);
    }
    70%{
        transform: translateX(1px) translateY(2px);
    }
    90%{
        transform: translateX(1px) translateY(3px);
    }
    100%{
        transform: translateX(2px) translateY(1px);
    }
}

@keyframes move_x2 {
    0%{
        transform: translateX(0px) translateY(0px);
    }
    10%{
        transform: translateX(1px) translateY(2px);
    }
    20%{
        transform: translateX(2px) translateY(4px);
    }
    50%{
        transform: translateX(6px) translateY(2px);
    }
    70%{
        transform: translateX(2px) translateY(3px);
    }
    90%{
        transform: translateX(1px) translateY(2px);
    }
    100%{
        transform: translateX(0px) translateY(1px);
    }
}