/***************************************************************** main page style ************************************************************/
h2{
    padding-top: 2rem;
    font-family: 'Parisienne', cursive!important;
    font-size: 4rem;
}

h3{
    padding-top: 2rem;
    padding-bottom: 2rem;
    font-family: 'Parisienne', cursive!important;
}

p{
    text-align: justify !important;
   
}
/********************************************** Circle style *********************************/

/***************** circle container body ***********************/
.circle-container {
    position: relative;
    width: 24rem;
    height: 24rem;
    padding: 2.8rem;
    border-radius: 50%;
    margin-bottom: 5rem;
    margin-top: 5rem;
}

/***************** circle text + content ***********************/
.circle-container p {
    display: block;
    position: absolute;
    top: 50%; left: 50%;
    width: 8rem; height: 8rem;
    margin: -2em;
   
}

/************************ circle icone background ************************/
.circle-container p i{ 
    background-color: #f2ca52;
    border-radius: 50px;
    height: 80px;
    width: 80px;
    padding-top: 20px;
      
}

/************************ circle circle position **************************/
.circle-container img { display: block; width: 100%; }
.deg0 { transform: translate(10rem); } 
.deg68 { transform: rotate(68deg) translate(10rem) rotate(-68deg); }
.deg124 { transform: rotate(124deg) translate(12rem) rotate(-124deg); }
.deg168 { transform: rotate(168deg) translate(14rem) rotate(-168deg); }
.deg208 { transform: rotate(208deg) translate(14rem) rotate(-208deg); }
.deg251 { transform: rotate(251deg) translate(13rem) rotate(-251deg); }
.deg300 { transform: rotate(300deg) translate(11rem) rotate(-300deg); }

/************************** paper clip style ****************************/
#services .fas{
    margin-right: 1rem;
    color: #f2ca52;
}

/************************ segmentation style ****************************/
p.segment{
    background-color: #f2ca52;
    font-weight: bold;
    font-size: 2rem;
    border-radius: 50px;
   
}

#savoir{
    background-color: #bf3b5e !important;
}

/**************** circle circle position width < 575px ******************/
@media (max-width: 575px) { 
.circle-container img { display: block; width: 100%; }
.deg0 { transform: translate(7rem); } 
.deg68 { transform: rotate(68deg) translate(7rem) rotate(-68deg); }
.deg124 { transform: rotate(124deg) translate(9rem) rotate(-124deg); }
.deg168 { transform: rotate(168deg) translate(11rem) rotate(-168deg); }
.deg208 { transform: rotate(208deg) translate(11rem) rotate(-208deg); }
.deg251 { transform: rotate(251deg) translate(10rem) rotate(-251deg); }
.deg300 { transform: rotate(300deg) translate(8rem) rotate(-300deg); }

 }