body {
counter-reset: services-counter;
}
.service-prestation {
counter-increment: services-counter;
}
.service-prestation .service-heading {
margin-bottom: 8rem;
}
.service-prestation .service-heading > div {
width: 50%;
}
.service-prestation .service-heading .service-title::before {
content: counter(services-counter);
background-color: var(--color-main);
color: var(--color-white);
border-radius: var(--border-radius);
padding: 0 0.2em;
margin-right: 0.5em;
}
.service-prestation .service-content .service-problematique, .service-prestation .service-content .service-solution {
width: 50%;
}
.service-prestation .service-content .service-problematique-icon-container .service-problematique-icon, .service-prestation .service-content .service-problematique-icon-container .service-solution-icon, .service-prestation .service-content .service-solution-icon-container .service-problematique-icon, .service-prestation .service-content .service-solution-icon-container .service-solution-icon {
width: 5em;
height: 5em;
background-color: var(--color-white);
border: solid var(--border-width-default) var(--color-grey-light);
border-radius: 50%;
}
.service-prestation .service-content .service-problematique-icon-container .service-problematique-icon svg, .service-prestation .service-content .service-solution-icon-container .service-problematique-icon svg {
width: 3em;
height: 3em;
}
.service-prestation .service-content .service-problematique-title, .service-prestation .service-content .service-solution-title {
line-height: 1.5;
}
.service-prestation .service-content .hr {
position: relative;
width: 2px;
background-color: var(--color-grey-light);
}
.service-prestation .service-content .hr .hr-icon {
display: block;
width: 1.5em;
height: 1.5em;
mask-image: url(//handirect.com/wp-content/themes/bc_wp_handirect/assets/icons/triangle.svg);
mask-repeat: no-repeat;
mask-position: center;
mask-size: contain;
-webkit-mask-image: url(//handirect.com/wp-content/themes/bc_wp_handirect/assets/icons/triangle.svg);
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
-webkit-mask-size: contain;
position: absolute;
left: -6px;
background-color: var(--color-accent);
}
.service-prestation ul {
padding: 0;
list-style: none;
}
.service-prestation ul li {
position: relative;
font-size: var(--font-size-small);
padding-bottom: 0.5em;
padding-left: 1.5em;
}
.service-prestation ul li strong {
color: var(--color-title-base);
}
.service-prestation ul li::before {
content: "";
display: block;
width: 1em;
height: 1em;
margin: 0.5em 0.5em 0 0;
mask-image: url(//handirect.com/wp-content/themes/bc_wp_handirect/assets/icons/button-arrow.svg);
mask-repeat: no-repeat;
mask-position: center;
mask-size: contain;
-webkit-mask-image: url(//handirect.com/wp-content/themes/bc_wp_handirect/assets/icons/button-arrow.svg);
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
-webkit-mask-size: contain;
background-color: var(--color-accent);
position: absolute;
top: 0;
left: 0;
}
@media only screen and (max-width: 1200px) {
.service-prestation .service-content .service-problematique, .service-prestation .service-content .service-solution {
padding: 0;
}
.service-prestation .service-content .service-problematique-heading, .service-prestation .service-content .service-solution-heading {
flex-direction: column;
}
.service-prestation .service-content .service-problematique-icon-container, .service-prestation .service-content .service-solution-icon-container {
margin-bottom: 2rem;
}
.service-prestation .service-content .hr {
margin: 0 4rem;
}
}
@media only screen and (max-width: 992px) {
.service-prestation .service-content {
flex-direction: column;
}
.service-prestation .service-content .service-problematique, .service-prestation .service-content .service-solution {
width: 100%;
}
.service-prestation .service-content .service-problematique-title, .service-prestation .service-content .service-solution-title {
margin: 0;
}
.service-prestation .service-content .hr {
height: 2px;
width: 100%;
margin: 6rem 0;
}
.service-prestation .service-content .hr .hr-icon {
transform: rotate(90deg);
left: calc(50% - 0.75em);
top: -6px;
}
}
@media only screen and (max-width: 800px) {
.service-prestation .service-heading {
flex-direction: column;
}
.service-prestation .service-heading > div {
width: 100%;
}
.service-prestation .service-heading .service-button-container {
justify-content: start;
margin-top: 2rem;
}
}