@font-face {
font-family: 'DM Sans';
font-style: normal;
font-weight: 100 1000;
font-display: swap;
src: url(//evvonow.com/wp-content/themes/evvo/assets/fonts/DM-Sans-normal.woff2) format('woff2');
}
@font-face {
font-family: 'DM Sans';
font-style: italic;
font-weight: 100 1000;
font-display: swap;
src: url(//evvonow.com/wp-content/themes/evvo/assets/fonts/DM-Sans-italic.woff2) format('woff2');
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url(//evvonow.com/wp-content/themes/evvo/assets/fonts/Inter-normal.woff2) format('woff2');
}
@font-face {
font-family: 'Inter';
font-style: italic;
font-weight: 100 900;
font-display: swap;
src: url(//evvonow.com/wp-content/themes/evvo/assets/fonts/Inter-italic.woff2) format('woff2');
}
@font-face {
font-family: 'Inter Tight';
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url(//evvonow.com/wp-content/themes/evvo/assets/fonts/Inter-Tight-normal.woff2) format('woff2');
}
@font-face {
font-family: 'Inter Tight';
font-style: italic;
font-weight: 100 900;
font-display: swap;
src: url(//evvonow.com/wp-content/themes/evvo/assets/fonts/Inter-Tight-italic.woff2) format('woff2');
}
@font-face {
font-family: 'Space Grotesk';
font-style: normal;
font-weight: 300 700;
font-display: swap;
src: url(//evvonow.com/wp-content/themes/evvo/assets/fonts/Space-Grotesk-normal.woff2) format('woff2');
}
@keyframes lineHoverEffect {
0% {
transform: scale3d(1, 1, 1);
transform-origin: right center;
}
32% {
transform: scale3d(0, 1, 1);
transform-origin: right center;
}
33% {
transform: scale3d(0, 1, 1);
transform-origin: left center;
}
65% {
transform: scale3d(1, 1, 1);
transform-origin: left center;
}
66% {
transform: scale3d(1, 1, 1);
transform-origin: left center;
}
100% {
transform: scale3d(1, 1, 1);
}
}
@keyframes slideLeftEffect {
to {
transform: translate(-100%)
}
}
html {
scroll-behavior: smooth;
}
* {
box-sizing: border-box;
}
:root {
--font-title: "DM Sans", sans-serif;
--font-body: "Inter", sans-serif;
--font-special: "Inter Tight", sans-serif;
--blue-primary: #2163CB;
--blue-secondary: #285CAD; --blue-tertiary: #4169C8;
--dark-blue: #033048;
--dark-bluer: #010D7A;
--grey-text: #7D93B5;
--grey-line: #D9D9D9;
--grey-bg: #F4F6FA;
--white: #fff;
--black: #000000;
--delay: 350ms;
box-sizing: border-box;
font-optical-sizing: auto;
} body {
margin: 0;
padding: 0;
font-family: var(--font-body);
font-weight: 500;
font-size: 16px;
line-height: 21px;
}
h2,
.h2 {
font-family: var(--font-title);
font-weight: 400;
font-size: clamp(30px, 4.17vw, 60px);
line-height: 1;
letter-spacing: -0.1px;
margin: 0;
}
h3,
.h3 {
font-family: var(--font-title);
font-size: clamp(21px, 2.15vw, 31px);
font-weight: 400;
line-height: clamp(23px, 2.29vw, 33px);
letter-spacing: normal;
margin: 0;
}
h5,
.h5 {
font-size: clamp(16px, 1.25vw, 18px);
font-weight: 400;
line-height: clamp(18px, 1.32vw, 19px);
margin: 0;
}
figure {
display: block;
margin-bottom: 0;
}
img {
max-width: 100%;
height: auto;
vertical-align: middle;
}
p {
margin-block: 0;
}
ul {
margin: 0;
padding: 0;
li {
list-style: none;
}
}
a {
text-decoration: none;
}
button {
padding: 0;
margin: 0;
border: none;
background-color: transparent;
}  .sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}
.max-width-content {
max-width: fit-content;
}
.w-100 {
width: 100%;
}
.mx-auto {
margin-inline: auto;
}
.my-1 {
margin-block: 1rem;
}
.mt-2 {
margin-top: 2rem;
}
.mb-1 {
margin-bottom: 1rem;
}
.mb-2 {
margin-bottom: 2rem;
}
.pb-3 {
padding-bottom: 3rem;
}
.container {
max-width: 1375px;
width: 100%;
padding-inline: 14px;
margin-inline: auto;
}
.container-fluid {
max-width: 100%;
padding-inline: 14px;
padding-inline: clamp(16px, 2.36vw, 34px);
@media (max-width: 991px) {
padding-inline: 16px;
}
@media (min-width: 1441px) {
max-width: 1400px;
width: 100%;
margin-inline: auto;
}
}
.block {
display: block;
}
.row {
display: flex;
flex-wrap: wrap;
&.nowrap {
flex-wrap: nowrap;
}
&.align-center {
align-items: center;
}
&.align-start {
align-items: flex-start;
}
&.align-end {
align-items: flex-end;
}
&.justify-between {
justify-content: space-between;
}
&.justify-center {
justify-content: center;
}
&.gap-1 {
gap: 1rem;
}
[class*="col"] {
flex: 1;
}
.no-shrink {
flex-shrink: 0;
}
}
.grid {
display: grid;
&.align-end {
align-items: flex-end;
}
&.item-end {
place-content: flex-end;
}
&.item-center {
place-content: center;
}
}
.img-fluid {
width: 100%;
}
.bg-primary {
background-color: var(--blue-primary);
color: var(--white);
}
.bg-secondary {
background-color: var(--blue-secondary);
color: var(--white);    
}
.bg-tertiary {
background-color: var(--blue-tertiary);
color: var(--white);    
}
.bg-white {
background-color: var(--white);
color: var(--blue-primary);
}
.bg-grey {
background-color: var(--grey-bg);
}
.bg-grey-text { background-color: #536789;
}
.ff-title {
font-family: var(--font-title);
}
.ff-body {
font-family: var(--font-body);
}
.fw-regular {
font-weight: 400;
}
.fw-medium {
font-weight: 500;
}
.fw-semibold {
font-weight: 600;
}
.fw-bold {
font-weight: 700;
}
.clr-white {
color: var(--white);
}
.clr-black {
color: var(--black);
}
.clr-primary {
color: var(--blue-primary);
}
.clr-grey {
color: var(--grey-text);
}
.section-title {
font-size: clamp(35px, 3.82vw, 55px);
font-weight: 400;
letter-spacing: -0.5px;
line-height: clamp(35px, 3.82vw, 55px);
margin-block: 0;
}
.text-em-primary {
font-size: clamp(24px, 2.78vw, 40px);
line-height: clamp(30px, 3.19vw, 46px);
font-weight: 400;
}
.text-em-secondary,
input:not([type="checkbox"]),
input:not([type="checkbox"])::placeholder,
input:not([type="submit"]),
input:not([type="submit"])::placeholder,
textarea,
textarea::placeholder {
font-size: clamp(16px, 1.67vw, 24px);
line-height: clamp(21px, 2.01vw, 29px);
font-weight: 400;
letter-spacing: -0.5px;
}
.text-medium {
font-family: var(--font-title);
font-size: clamp(16px, 1.39vw, 20px);
line-height: clamp(19px, 1.74vw, 25px);
font-weight: 400;
}
.text-semiregulary {
font-family: var(--font-title);
font-size: clamp(16px, 1.25vw, 18px);
line-height: clamp(19px, 1.597vw, 23px);
font-weight: 400;
}
.text-small {
font-family: var(--font-title);
font-size: 14px;
line-height: 18px;
font-weight: 500;
@media (max-width: 580px) {
font-size: 16px;
line-height: 1.4;
}
}
.text-center {
text-align: center;
}
.text-align-right {
text-align: right;
}
.text-underline {
text-decoration: underline;
}
.text-uppercase {
text-transform: uppercase;
}
.btn {
font-family: var(--font-title);
font-weight: 700;
font-size: 16px;
display: block;
padding: 15px 20px;
border-radius: 100vw;
cursor: pointer;
@media (max-width: 991px) {
padding: 10px 15px;
}
@media (max-width: 680px) {
max-width: 100%;
}
&.btn-icon {
padding: 12px clamp(12px, 1.39vw, 20px) 12px clamp(30px, 2.78vw, 40px);
.icon-rounded {
flex-shrink: 0;
}
}
&.btn-primary {
background-color: var(--blue-primary);
color: var(--white);
transition: all var(--delay) ease;
&:hover {
background-color: var(--blue-secondary);
transition: all var(--delay) ease;
}
}
&.btn-secondary {
background-color: rgba(40, 92, 173, .42);
color: var(--blue-primary);
transition: all var(--delay) ease;
&:hover {
background-color: var(--blue-primary);
color: var(--white);
transition: all var(--delay) ease;
}
}
&.btn-white {
background-color: var(--white);
color: var(--blue-primary);
transition: all var(--delay) ease;
&:hover {
background-color: var(--blue-primary);
color: var(--white);
transition: all var(--delay) ease;
}
}
&.btn-icon {
display: flex;
align-items: center;
justify-content: space-between;
}
}
a.hover-underline {
background: 
linear-gradient(to right, var(--blue-primary), var(--blue-primary)), 
linear-gradient(to right, var(--white), var(--white));
background-size: 100% 0.1em, 0 0.1em;
background-position: 100% 100%, 0 100%;
background-repeat: no-repeat;
transition: background-size 400ms;
&:hover {
background-size: 0 0.1em, 100% 0.1em;
}
}
.icon-rounded {
--size: clamp(42px, 3.89vw, 56px);
--bg: var(--blue-primary);
display: grid;
place-items: center;
width: var(--size);
aspect-ratio: 1 / 1;
background-color: var(--bg);
border-radius: 100%;
}
.icon {
--size: 15px;
--color: var(--white);
--hover-color: var(--blue-primary);
display: inline-block;
vertical-align: middle;
background-color: var(--color);
width: var(--size);
height: var(--size);
mask-image: var(--svg);
-webkit-mask-image: var(--svg);
mask-position: center;
-webkit-mask-position: center;
mask-repeat: no-repeat;
-webkit-mask-repeat: no-repeat;
mask-size: contain;
-webkit-mask-size: contain;
transition: background-color var(--delay) ease;
-webkit-transition: background-color var(--delay) ease;
}
.icon-bars {
display: flex;
flex-direction: column;
justify-content: space-between;
width: 34px;
height: 19px;
box-sizing: content-box;
.bar {
display: block;
height: 3px;
background-color: var(--white);
border-radius: 100vw;
&:first-of-type {
width: 80%;
}
&:last-of-type {
width: 50%;
}
}
&:hover {
.bar {
&:nth-child(1) {
-webkit-animation: lineHoverEffect 0.8s cubic-bezier(0.645, 0.045, 0.355, 1);
animation: lineHoverEffect 0.8s cubic-bezier(0.645, 0.045, 0.355, 1);
}
&:nth-child(2) {
-webkit-animation: lineHoverEffect 0.8s cubic-bezier(0.645, 0.045, 0.355, 1);
animation: lineHoverEffect 0.8s cubic-bezier(0.645, 0.045, 0.355, 1);
-webkit-animation-delay: 0.1s;
animation-delay: 0.1s;
}
&:nth-child(3) {
-webkit-animation: lineHoverEffect 0.8s cubic-bezier(0.645, 0.045, 0.355, 1);
animation: lineHoverEffect 0.8s cubic-bezier(0.645, 0.045, 0.355, 1);
-webkit-animation-delay: 0.2s;
animation-delay: 0.2s;
}
}
}
}
.tooltips {
position: relative;
flex-shrink: 0;
&:not(.no-text) {
cursor: pointer;
}
.tooltips-text {
font-size: 13.5px;
font-weight: 400;
line-height: 19px;
position: absolute;
bottom: 150%;
z-index: 10;
width: 300px;
left: 50%;
transform: translateX(-50%);
padding: 1rem;
border-radius: 5px;
visibility: hidden;
opacity: 0;
transition: opacity 0.3s;
@media (max-width: 992px) {
left: initial;
transform: none;
right: 0;
}
@media (max-width: 460px) {
left: 50%;
transform: translateX(-50%);
}
&::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: var(--blue-primary) transparent transparent transparent;
@media (max-width: 992px) {
top: calc(100% - 1px);
left: auto;
right: 6px;
}
@media (max-width: 460px) {
left: 50%;
right: 50%;
}
}
ul {
padding-left: 1rem;
li {
list-style-type: disc;
&:not(:last-of-type) {
padding-bottom: 1rem;
}
}
}
}
&:hover {
.tooltips-text {
opacity: 1;
visibility: visible;
}
}
}
form {
label {
display: block;
color: var(--black);
}
input:not([type="submit"], [type="checkbox"]),
textarea {
font-family: var(--font-title);
width: 100%;
background-color: inherit;
border: none;
border-bottom: 1px solid var(--blue-primary);
padding: 10px 0;
outline: none;
&:focus,
&:focus-visible {
outline: none;
}
}
select {
display: block;
width: 100%;
font-size: 16px;
font-family: var(--font-title);
font-weight: 500;
color: var(--white);
padding: 12px 20px;
background-color: var(--blue-primary);
border-radius: 7px;
margin-top: 7px;
background-image: url(//evvonow.com/wp-content/themes/evvo/assets/icons/arrow-down.svg);
background-size: 14px;
background-repeat: no-repeat;
background-position: calc(100% - 15px) center;
cursor: pointer;
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
@media (max-width: 768px) {
text-wrap: wrap;
padding-right: 35px;
}
}
input[type="file"] {
display: none;
}
.fields-row {
gap: 42px;
margin-bottom: 40px;
@media (max-width: 580px) {
flex-direction: column;
gap: 20px;
margin-bottom: 20px;
}
}
.wpcf7-not-valid-tip {
margin-top: 5px;
}
.checkbox .wpcf7-list-item {
margin-top: 20px;
margin-left: 0;
.wpcf7-list-item-label {
display: flex;
position: relative;
padding-left: 40px;
&::before,
&::after {
content: '';
position: absolute;
top: 0;
left: 0;
display: block;
width: 20px;
aspect-ratio: 1;
border: 1.5px solid transparent;
border-radius: 5px;
}
&::before {
border-color: var(--black);
}
&::after {
background-color: transparent;
}
}
input[type="checkbox"] {
-webkit-appearance: none;
appearance: none;
margin: 0;
display: none;
&:checked {
& + .wpcf7-list-item-label::after {
background-color: var(--blue-primary);
}
}
}
}
.field-comments-row {
position: relative;
.wpcf7-submit.has-spinner {
position: absolute;
bottom: 15px;
right: 0;
border: none;
margin: 0;
font-size: 14px;
font-family: var(--font-title);
font-weight: 700;
letter-spacing: -0.2px;
line-height: 1;
color: var(--white);
padding: 12px 30px;
border-radius: 100vw;
background-color: var(--blue-primary);
cursor: pointer;
@media (max-width: 580px) {
font-size: 16px;
line-height: 1.4;
}
}
.wpcf7-spinner {
display: none;
}
}
label.input-file {
display: flex;
align-items: center;
justify-content: space-between;
font-family: var(--font-title);
font-size: clamp(16px, 1.67vw, 24px);
line-height: clamp(21px, 2.01vw, 29px);
font-weight: 400;
letter-spacing: -0.5px;
padding: 10px 10px 10px 0;
border-bottom: 1px solid var(--blue-primary);
cursor: pointer;
&::after {
content: '';
display: block;
width: 20px;
aspect-ratio: 1 / 1;
background-image: url(//evvonow.com/wp-content/themes/evvo/assets/icons/download.svg);
background-size: cover;
background-repeat: no-repeat;
}
}
.btn-submit-container {
.btn-submit {
position: relative;
width: 141px;
height: 45px;
background-color: var(--white);
border-radius: 7px;
transition: background-color 350ms ease;
.wpcf7-submit {
display: block;
position: absolute;
inset: 0;
padding: 12px 19px;
margin: 0;
border: 0;
background-color: transparent;
font-family: var(--font-title);
font-size: 16px;
font-weight: 500;
line-height: 21px;
color: var(--blue-primary);
text-align: left;
cursor: pointer;
transition: color 350ms ease;
}
.wpcf7-spinner {
position: absolute; 
right: 10px;
top: 50%;
transform: translateY(-50%);
margin: 0;
z-index: 2;
opacity: 1;
}
.icon-rounded {
--size: 33px;
--bg: var(--grey-bg);
position: absolute;
top: 50%;
right: 5px;
transform: translateY(-50%);
.icon {
--size: 14px;
--svg: url(//evvonow.com/wp-content/themes/evvo/assets/icons/arrow-right.svg);
--color: var(--blue-primary);
}
}
&:hover {
background-color: var(--blue-primary);
.wpcf7-submit {
color: var(--white);
}
}
}
}
.checkbox .wpcf7-list-item {
.wpcf7-list-item-label {
padding-left: 30px;
cursor: pointer;
&::before, 
&::after {
border-radius: 4px;
border-width: 1px;
border-color: var(--blue-primary);
}
}
input[type="checkbox"]:checked {
& + .wpcf7-list-item-label::after {
background-image: url(//evvonow.com/wp-content/themes/evvo/assets/icons/check-white.svg);
background-repeat: no-repeat;
background-size: 14px;
background-position: center;
}
}
}
.consent-submit-row {
@media (max-width: 580px) {
flex-direction: column;
row-gap: 20px;
}
}
}
[class*='toggler'] {
cursor: pointer;
}
.items-sliding {
display: flex;
align-items: center;
flex-wrap: nowrap;
overflow: hidden;
&:not(.not-sliding) .items-sliding-wrapper {
animation: slideLeftEffect calc(var(--item-count) * 3.5s) linear infinite;
}
.items-sliding-wrapper {
display: flex;
align-items: center;
justify-content: space-between;
min-width: 100vw;
padding-inline: 0;
.item-sliding {
width: calc(100% / var(--item-count));
text-align: center;
padding-inline: 10px;
}
}
&.not-sliding .items-sliding-wrapper {
min-width: auto;
.item-sliding {
@media (min-width: 992px) {
width: calc(100% / var(--item-count)) !important;
}
@media (max-width: 991px) {
width: 200px;
}
}
}
}
.tabs {
overscroll-behavior: contain;
.tab {
padding-top: 20px; .tab-index {
margin-top: 10px;
}
.tab-title {
font-weight: 400;
flex-wrap: nowrap;
cursor: pointer;
transition: all .75s linear;
br {
display: none;
}
.icon {
flex-shrink: 0;
transform: scale(0);
transition: all 1s linear;
}
}
.tab-subtitle {
margin-top: 8px;
color: var(--grey-text);
}
.tab-text {
display: grid;
grid-template-rows: 0fr;
max-width: 589px;
overflow: hidden;
transition: grid-template-rows 1s;
.tab-text-wrapper {
min-height: 0;
transition: visibility 1s;
visibility: hidden;
.tab-text-content {
color: var(--black);
padding-block: 8px 26px;
border-bottom: 2px solid var(--blue-primary);
}
}
}
&.open { .tab-text {
grid-template-rows: 1fr;
.tab-text-wrapper {
visibility: visible;
}
}
}
}
}
.separator-top {
position: relative;
&::before {
content: '';
display: block;
position: absolute;
top: 0;
left: -10%;
width: calc(100vw + 10%);
height: 1px;
background-color: var(--white);
}
}  header {
--item-spacing: clamp(16px, 2.43vw, 35px);
position: sticky;
inset-inline: 0;
top: 0;
background-color: transparent;
border-bottom: 1px solid var(--grey-line);
z-index: 10;
transition: all var(--delay) ease;
-webkit-transition: all var(--delay) ease;
@media (max-width: 991px) {
--item-spacing: 16px;
}
&.no-sticky {
@media (min-width: 993px) {
top: -50% !important;
transition: all var(--delay) ease;
-webkit-transition: all var(--delay) ease;
}
}
&::before {
content: '';
display: block;
position: absolute;
top: 0;
inset-inline: 0;
height: 8px;
background-color: var(--blue-primary);
}
& > .row {
padding: 27px 14px;
@media (min-width: 991px) and (max-width: 1081px) {
padding-inline: 14px;
}
@media (max-width: 991px) {
column-gap: 16px;
}
}
.header-left {
column-gap: clamp(30px, 6.25vw, 90px);
@media (max-width: 1200px) {
column-gap: 20px;
}
@media (min-width: 991px) and (max-width: 1081px) {
column-gap: 15px;
}
@media (max-width: 991px) {
column-gap: 16px;
}
.header-logo {
width: 94px;
@media (max-width: 991px) {
width: 150px;
}
@media (max-width: 580px) {
width: auto;
height: 30px;
}
}
.primary_menu  {
@media (min-width: 991px) and (max-width: 1081px) {
column-gap: 15px;
}
@media (max-width: 1006px) {
display: none;
}
}
}
.header-right {
column-gap: var(--item-spacing);
@media (max-width: 1200px) and (min-width: 1007px) {
column-gap: calc(var(--item-spacing) / 2);
}
@media (min-width: 991px) and (max-width: 1081px) {
column-gap: 15px;
}
.secondary_menu {
@media (min-width: 991px) and (max-width: 1081px) {
column-gap: 15px;
}
@media (max-width: 768px) {
.wpml-ls-item, .hide-on-mobile {
display: none;
}
.menu-item {
margin-right: 16px;
a {
font-size: 14px;
}
}
}
}
}
.header-menu-nav {
column-gap: var(--item-spacing);
@media (max-width: 1200px) and (min-width: 1007px) {
column-gap: calc(var(--item-spacing) / 2);
}
.menu-item {
a {
font-family: var(--font-title);
font-weight: 600;
font-size: 16px;
color: var(--white);
padding-block: 0.5rem;
transition: color var(--delay) ease;
&:hover {
color: var(--blue-primary);
transition: color var(--delay) ease;
}
br {
display: none;
}
}
&.btn {
a {
font-size: 14px;
font-weight: 700;
letter-spacing: -0.5px;
color: var(--blue-primary);
@media (max-width: 580px) {
font-size: 16px;
line-height: 1.4;
}
}
&:hover {
a {
color: var(--white);
}
}
}
&.menu-item-has-children {
& > a {
display: flex;
align-items: center;
gap: 8px;
&::after {
--size: 15px;
--color: var(--white);
--hover-color: var(--blue-primary);
--svg: url(//evvonow.com/wp-content/themes/evvo/assets/icons/arrow-right.svg);
content: '';
display: inline-block;
vertical-align: middle;
background-color: var(--color);
width: var(--size);
height: var(--size);
mask-image: var(--svg);
-webkit-mask-image: var(--svg);
mask-position: center;
-webkit-mask-position: center;
mask-repeat: no-repeat;
-webkit-mask-repeat: no-repeat;
mask-size: contain;
-webkit-mask-size: contain;
transform: rotate(45deg);
transition: background-color var(--delay) ease;
-webkit-transition: background-color var(--delay) ease;
}
&:hover {
&::after {
background-color: var(--hover-color);
}
}
}
}
}
}
.sidebar-btn {
padding-block: 0.5rem;
}
}
body.header-is-scrolling,
body:not(.home),
body.home {
header {
background-color: var(--white);
transition: all var(--delay) ease;
-webkit-transition: all var(--delay) ease;
.header-menu-nav {
.menu-item {
a {
color: var(--blue-primary);
&:hover {
color: var(--blue-tertiary);
transition: color var(--delay) ease;
}
&::after {
--color: var(--blue-primary);
--hover-color: var(--blue-tertiary);
}
}
&.btn {
background-color: var(--blue-primary);
a {
color: var(--white);
}
&:hover {
background-color: var(--blue-tertiary);
}
}
}
}
}
.icon-bars {
.bar {
background-color: var(--blue-primary);
}
}
}
body.home {
header {
position: fixed;
@media (max-width: 580px) {
position: sticky;
background-color: var(--white);
}
.header-logo {
.img-fluid {
display: block;
@media (max-width: 580px) {
display: none;
}
&.duplicated {
display: none;
@media (max-width: 580px) {
display: block;
}
}
}
}
.icon-bars .bar {
@media (max-width: 580px) {
background-color: var(--blue-primary);
}
}
}
&.header-is-scrolling {
header {
.header-logo {
.img-fluid {
display: none;
&.duplicated {
display: block;
}
}
}
}    
}
}
.menu-item.menu-item-has-children {
position: relative;
.sub-menu {
position: absolute;
top: 100%;
left: 0;
width: max-content;
background-color: var(--grey-bg);
padding: 1rem;
z-index: -1;
transform: translateY(-30%);
opacity: 0;
visibility: hidden;
transition: all var(--delay) linear;
a {
color: var(--blue-primary)
}
.menu-item:not(:last-of-type) {
margin-bottom: 0.5rem;
}
}
&:hover {
.sub-menu {
z-index: 0;
transform: translate(0);
opacity: 1;
visibility: visible;
transition: all var(--delay) linear;
}
}
}
body.admin-bar {
header {
top: 32px;
}
#sidebar-menu {
top: 32px;
}
}
#sidebar-menu {
font-family: var(--font-title);
position: fixed;
inset: 0;
z-index: -10;
opacity: 0;
visibility: hidden;
transform: translateX(100%);
transition: all var(--delay) linear;
@media (max-height: 750px) {
overflow: scroll;
}
.col-left {
display: flex;
flex-direction: column;
justify-content: space-between;
@media (max-width: 780px) {
position: relative;
width: 100%;
flex: 1 0 100%;
flex-direction: column;
}
a {
color: var(--white);
}
.left-head {
padding: clamp(16px, 2.43vw, 35px) clamp(24px, 3.33vw, 48px);
@media (max-width: 780px) {
padding: 1rem;
}
@media (max-width: 780px) {
padding-top: 33px;
}
.lang-switcher {
font-size: 15px;
font-weight: 500;
text-transform: uppercase;
}
.wpml-ls-legacy-list-horizontal {
@media (max-width:780px) {
position: absolute;
left: 0;
bottom: 20px;
}
}
}
.left-body {
padding: clamp(40px, 6.74vw, 97px) clamp(34px, 5.28vw, 76px);
@media (max-width: 780px) {
padding: 1rem 1rem 90px;
}
.sidebar-menu-left-title {
font-size: 14px;
font-weight: 700;
margin-bottom: 10px;
@media (max-width: 580px) {
font-size: 16px;
line-height: 1.4;
}
}
.menu-item {
a {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 31px;
font-weight: 700;
line-height: 33px;
padding-block: clamp(20px, 2.08vw, 30px);
border-bottom: 1px solid #C0C0C0;
@media (max-width: 780px) {
font-size: 26px;
line-height: 28px;
}
@media (max-width: 580px) {
font-size: 20px;
line-height: 22px;
}
&::after {
--size: 18px;
--color: var(--white);
--svg: url(//evvonow.com/wp-content/themes/evvo/assets/icons/chevron-right.svg);
content: '';
display: inline-block;
flex-shrink: 0;
vertical-align: middle;
background-color: var(--color);
width: var(--size);
height: var(--size);
mask-image: var(--svg);
-webkit-mask-image: var(--svg);
mask-position: center;
-webkit-mask-position: center;
mask-repeat: no-repeat;
-webkit-mask-repeat: no-repeat;
mask-size: contain;
-webkit-mask-size: contain;
transition: background-color var(--delay) ease;
-webkit-transition: background-color var(--delay) ease;
}
}
}
}
}
.col-right {
display: flex;
flex-direction: column;
max-width: 720px;
@media (min-width: 781px) {
position: relative;
}
@media (max-width: 780px) {
max-width: none;
width: 100%;
flex: 1 0 100%;
}
&::before {
content: '';
display: block;
width: 100%;
height: 8px;
background-color: var(--blue-primary);
@media (max-width: 780px) {
content: none;
}
}
.toggler-close {
position: absolute;
top: 20px;
right: 38px;
background-color: #fff;
padding: 12px;
border-radius: 8px;
outline: none;
&:focus-visible {
outline: 2px solid var(--blue-primary);
outline-offset: 3px;
}
@media (max-width: 780px) {
right: 20px;
}
}
.sidebar-menu-right-img {
height: 400px;
@media (max-width: 780px) {
display: none;
}
img {
height: 100%;
}
}
.right-body {
display: flex;
flex: 1;
flex-direction: column;
justify-content: space-between;
padding: clamp(30px, 4.86vw, 70px) clamp(30px, 4.86vw, 70px) clamp(30px, 3.26vw, 47px) clamp(30px, 4.86vw, 70px);
@media (max-width: 780px) {
padding-inline: 1rem;
}
.menu-menu-sidebar-droite-container {
@media (max-width: 780px) {
margin-bottom: 1rem;
}
}
a {
font-size: 22px;
font-weight: 500;
line-height: 29px;
color: var(--blue-primary);
@media (max-width: 780px) {
font-size: 16px;
line-height: 23px;
}
}
.menu {
column-count: 2;
}
.media-list {
@media (max-width: 780px) {
justify-content: flex-start;
}
}
.media-item {
font-size: 14px;
font-weight: 700;
background-color: rgba(40, 92, 173, .42);
@media (max-width: 780px) {
padding-block: 10px;
}
@media (max-width: 580px) {
font-size: 16px;
line-height: 1.4;
}
}
& > .row {
row-gap: 1rem;
}
}
}
&[display] {
z-index: 11;
opacity: 1;
visibility: visible;
transform: translateX(0);
transition: all var(--delay) linear;
}
}  .footer-partners {
padding-block: 33px;
.footer-partner-title {
font-family: var(--font-title);
color: var(--grey-line);
@media (max-width: 580px) {
margin-bottom: 1rem;
}
}
}
.footer-title {
font-family: var(--font-title);
font-size: clamp(29px, 4.03vw, 58px);
font-weight: 400;
line-height: clamp(24.5px, 3.82vw, 55px);
}
.footer {
padding-bottom: 60px;
@media (max-width: 768px) {
padding-bottom: 30px;
}
.footer-top {
padding-block: clamp(50px, 9.72vw,140px);
border-bottom: 1px solid var(--grey-line);
@media (max-width: 685px) {
flex-direction: column;
gap: 20px;
}
.footer-info {
&:not(:last-of-type) {
margin-bottom: clamp(20px, 2.78vw, 40px);
}
&, a {
font-family: var(--font-title);
font-weight: 200;
font-size: clamp(18px, 1.94vw, 28px);
line-height: clamp(25px, 2.43vw, 35px);
letter-spacing: -0.5px;
color: var(--white);
}
}
.col-left {
padding-right: 1rem;
.footer-title,
.footer-description {
max-width: 426px;
}
.footer-description {
font-weight: 400;
}
}
.col-right {
column-gap: clamp(30px, 4.86vw, 70px);
& > .col {
max-width: 276px;
}
.footer-title {
margin-bottom: 10px;
}
}
}
.footer-bottom {
--gap: clamp(16px, 2.78vw, 40px);
padding-block: clamp(16px, 2.08vw, 30px);
gap: var(--gap);
@media (max-width: 768px) {
justify-content: center;
}
.footer-logo {
@media (max-width: 768px) {
display: block;
width: 150px;
margin-inline: auto;
}
}
.media-list {
@media (max-width: 680px) {
width: auto;
}
.media-item {
@media (max-width: 680px) {
padding-block: 10px;
}
}
}
.footer-info-supp {
gap: var(--gap);
@media (max-width: 991px) {
width: 100%;
justify-content: center;
order: 1;
}
@media (max-width: 680px) {
border-top: 1px solid var(--grey-line);
padding-top: 16px;
}
}
.copyright {
font-family: var(--font-special);
font-weight: 600;
}
.powered-by {
font-weight: 600;
a {
color: var(--white);
}
}
}
}
.media-list {
margin-left: auto;
@media (max-width: 768px) {
width: 100%;
justify-content: center;
}
.media-item {
--paddin-inline: 27px;
display: block;
font-family: var(--font-special);
font-size: 14px;
font-weight: 700;
padding-block: 15px;
padding-inline: var(--paddin-inline);
color: var(--white);
background-color: var(--blue-tertiary);
@media (max-width: 580px) {
font-size: 16px;
line-height: 1.4;
}
&:first-of-type {
border-top-left-radius: 100vw;
border-bottom-left-radius: 100vw;    
}
&:last-of-type {
border-top-right-radius: 100vw;
border-bottom-right-radius: 100vw;
}
}
}  body.home {
.outer-wrapper {
background-color: var(--grey-bg);
.inner-wrapper {
.items-sliding {
background-color: var(--white);
&.not-sliding {
@media (max-width: 991px) {
padding-block: 1rem;
}
& ~ div > .btn {
margin-inline: auto;
text-align: center;
@media (max-width: 680px) {
margin-inline: 14px;
}
}
}
}
}
}
.home-banner {
&::before {
content: none;
}
.home-banner-illustration::after {
top: calc(var(--loop-size) * 0.5);
@media (max-width: 768px) {
top: calc(var(--loop-size) * 0.75);
}
@media (max-width: 580px) {
top: calc(var(--loop-size) * -0.4);
}
}
}
}
.home-banner {
position: relative;
overflow: hidden;
&:not(.video) {
height: 100dvh;
@media (max-width: 768px) {
height: 320px;
}
}
&::before {
content: '';
display: block;
position: absolute;
inset: 0; background-color: var(--blue-primary);
opacity: 0.4;
z-index: 1;
}
.home-banner-illustration {
--loop-size: clamp(80px, 17.361vw, 250px);
height: 100%;
&::before,
&::after {
content: '';
display: block;
position: absolute;
width: var(--loop-size);
aspect-ratio: 7 / 6;
background-image: url(//evvonow.com/wp-content/themes/evvo/assets/imgs/solution-arrow.png);
background-size: cover;
background-repeat: no-repeat;
z-index: 1;
}
&::before {
bottom: calc(var(--loop-size) * -0.3);
left: calc(var(--loop-size) * -0.25);
}
&::after {
top: calc(var(--loop-size) * -0.4);
right: calc(var(--loop-size) * -0.4);
}
.img-fluid {
height: 100%;
object-fit: cover;
object-position: center;
background-color: var(--blue-primary);
@media (max-width: 680px) {
height: 100%;
}
}
video {
width: 100%;
height: auto;
vertical-align: middle; }
}
& > .container-fluid {
position: absolute;
inset: 0;
}
.home-banner-text {
position: absolute;
max-width: 577px;
display: flex;
gap: 30px;
right: clamp(100px, 12.5vw, 180px);
bottom: clamp(80px, 8.75vw, 126px);
z-index: 2;
@media (max-width: 580px) {
gap: 1rem;
}
&.has-subtitle {
max-width: 650px;
}
@media (max-width: 991px) {
--inner-spacing: 50px;
right: var(--inner-spacing);
bottom: var(--inner-spacing);
}
@media (max-width: 768px) {
--inner-spacing: 20px;
}
@media (max-width: 680px) {
left: var(--inner-spacing);
bottom: calc(var(--inner-spacing) * 4);
} h1,
.home-banner-title {
font-family: var(--font-title);
font-size: clamp(33px, 4.38vw, 63px);
font-weight: 400;
line-height: clamp(29px, 4.1vw, 59px);
letter-spacing: normal;
color: var(--white);
margin: 0;
}
}
&.no-img {
height: clamp(300px, 41.67vw, 600px);
}
&.video.has-text {
height: 350px;
@media (max-width: 580px) {
height: 410px;
}
.home-banner-illustration video {
height: 100%;
object-fit: cover;
object-position: center;
}
}
}
body.home .home-banner .home-banner-illustration {
&::before,
&::after {
content: none !important;
}
}
body:not(.home) {
--header-height: 100px;
.home-banner {
@media (min-width: 769px) {
min-height: 630px;
}
&:not(.video) {
height: calc(100dvh - var(--header-height));
@media (max-width: 768px) {
max-height: 320px;
}
}
.home-banner-img img {
height: 100%;
object-fit: cover;
object-position: center;
}
}
}
.home_kpi {
padding-block: clamp(16px, 2.78vw, 40px);
padding-inline: clamp(16px, 2.36vw, 34px);
background: linear-gradient(180deg,rgba(24, 73, 163, 1) 0%, rgba(18, 52, 115, 1) 50%);
& > .swiper-wrapper.container {
@media (max-width: 768px) {
padding-inline: 0;
}
}
.home_kpi_item {
flex: 1;
@media (max-width: 768px) {
flex: 1 0 auto;
width: 230px;
padding-inline: 10px;
}
&:first-of-type {
@media (max-width: 768px) {
border-left: 1px solid var(--white);
}
}
&:not(:last-of-type) {
border-right: 1px solid var(--white);
}
&:last-of-type {
@media (max-width: 768px) {
border-right: 1px solid var(--white);
}
}
.text-big {
font-weight: 700;
margin-top: 10px;
}
.text-small {
font-weight: 400;
}
}
}
.home-clients {
padding-block: 24px;
.items-sliding-wrapper {
min-width: max-content;
animation: slideLeftEffect calc(var(--item-count) * 4.5s) linear infinite;
}
}
.home-2-col-text-img {
padding-top: clamp(50px, 10.14vw, 146px);
@media (max-width: 768px) {
padding-bottom: 30px;
}
& > .container.row {
gap: 1rem;
}
.col-left {
@media (min-width: 991px) {
max-width: 630px;
}
@media (max-width: 580px) {
flex-basis: 100%;
margin-bottom: 20px;
}
}
.col-right {
@media (min-width: 991px) {
max-width: 550px;
}
@media (max-width: 580px) {
flex-basis: 100%;
}
}
.home-2-col-text-img-subtitle {
font-size: clamp(18px, 2.222vw, 32px);
line-height: 1;
}
.img-wrapper {
padding-top: 30px;
position: relative;
&::after {
content: "";
position: absolute;
left: 0;
right: 0;
top: 29px;
height: 10%;
background: linear-gradient(to bottom, var(--blue-primary) 0%, transparent 100%);
}
}
}
.home-cta-bg-img {
padding-block: clamp(20px, 2.083vw, 30px);
background: linear-gradient(
to bottom, 
var(--blue-primary) 0%, 
var(--blue-primary) 75%, 
var(--grey-bg) 75%,
var(--grey-bg) 100%
);
.home-cta-bg-img-wrapper {
position: relative;
@media (max-width: 768px) {
height: 400px;
}
.home-cta-bg-img-img {
position: relative;
border-radius: 40px;
overflow: hidden;
@media (max-width: 768px) {
height: 100%;
}
&::before {
content: '';
display: block;
position: absolute;
inset-inline: 0;
bottom: clamp(20px, 6.25vw, 90px);
height: 1px;
background-color: var(--grey-line);
}
img {
@media (max-width: 768px) {
object-fit: cover;
object-position: left;
height: 100%;
}
}
}
.home-cta-bg-img-content {
position: absolute;
right: clamp(30px, 6.94vw, 100px);
bottom: clamp(50px, 9.03vw, 130px);
max-width: 487px;
@media (max-width: 580px) {
left: clamp(30px, 6.94vw, 100px);
}
.footer-text {
margin-block: clamp(20px, 3.13vw, 45px);
}
.btn {
font-size: 16px;
font-weight: 700;
color: var(--black);
padding: 12px clamp(12px, 1.39vw, 20px) 12px clamp(12px, 2.78vw, 40px);
max-width: 336px;
&:hover {
color: var(--white);
}
}
}
}
}
.home-forfaits {
padding-top: clamp(50px, 6.81vw, 98px);
.home-forfaits-head {
text-align: center;
.section-subtitle {
margin-top: 25px;
}
.btn {
max-width: fit-content;
margin: 25px auto 77px;
font-size: 14px;
font-weight: 700;
letter-spacing: 0.5px;
@media (max-width: 768px) {
margin-bottom: 25px;
}
@media (max-width: 680px) {
max-width: 100%;
}
@media (max-width: 580px) {
font-size: 16px;
line-height: 1.4;
}
}
}
}
.home-forfaits-listing {
display: flex;
flex-wrap: wrap;
gap: 20px;
justify-content: center;
.home-forfait {
flex-shrink: 0;
flex-basis: 328px;
border-radius: 30px;
display: flex;
flex-direction: column;
overflow: hidden;
img {
width: 100%;
object-fit: cover;
}
.home-forfait-content {
flex: 1;
padding: clamp(25px, 2.78vw, 40px);
.home-forfait-number {
font-size: clamp(40px, 5.21vw, 75px);
font-weight: 400;
line-height: 1;
}
.home-forfait-title {
font-size: clamp(20px, 2.01vw, 29px);
font-weight: 500;
line-height: 1;
letter-spacing: 0.5px;
margin-block: clamp(16px, 1.74vw, 25px);
}
}
}
}
.cta-2-cols {
padding-block: clamp(50px, 6.81vw, 98px);
.cta-2-cols-wrapper {
padding: clamp(50px, 9.03vw, 130px) clamp(30px, 6.94vw, 100px);
border-radius: 40px;
@media (max-width: 680px) {
padding: 30px 20px;
}
& > .row {
gap: clamp(30px, 6.94vw, 100px);
@media (max-width: 680px) {
flex-direction: column;
gap: 30px;
}
}
.col-left {
max-width: 610px;
@media (min-width: 1441px) {
max-width: 65%;
}
.left-img {
margin-top: 40px;
@media (max-width: 680px) {
max-width: 180px;
}
}
}
.col-right {
max-width: 385px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 20px;
@media (min-width: 1441px) {
max-width: 35%;
}
.right-text {
p:not(:last-of-type) {
margin-bottom: 20px;
}
}
}
.btn {
font-family: var(--font-title);
font-weight: 700;
font-size: 16px;
color: var(--black);
&:hover {
background-color: var(--blue-tertiary);
color: var(--white);
}
}
}
}
.home-cta-2-cols {
.cta-2-cols-wrapper {
overflow: hidden;
& > .row {
@media (min-width: 581px) and (max-width: 680px) {
flex-direction: row;
}
}
.col-right {
position: relative;
@media (max-width: 580px) {
max-width: 100%;
}
}
.col-right figure {
position: absolute;
top: 120px;
left: 50px;
width: 100%;
transform: rotate(-20deg);
@media (max-width: 580px) {
position: relative;
top: 55px;
left: 15%;
margin-top: -15px;
}
}
}
.btn {
border-radius: 16px;
}
}
.home-gallery {
padding-block: clamp(30px, 4.72vw, 68px) clamp(30px, 3.96vw, 57px);
.container-fluid {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: clamp(20px, 2.778vw, 40px);
.home-gallery-item-heading {
flex-basis: 100%;
}
.home-gallery-item {
--width: calc(56% - 10px);
max-width: var(--width);
display: grid;
place-items: flex-end;
@media (max-width: 1345px) {
--width: calc(50% - 10px) !important;               
}
@media (max-width: 580px) {
--width: 100% !important;               
}
.home-gallery-item-illustration {
display: block;
margin-bottom: 0;
border-radius: min(2.08vw, 30px);
overflow: hidden;
height: 100%;
video {
height: 100%;
vertical-align: middle;
object-fit: cover;
@media (max-width: 580px) {
min-height: 250px;
}
}
}
&.with-text {
.home-gallery-item-illustration {
position: relative;
.home-gallery-item-text {
position: absolute;
left: clamp(20px, 3.33vw, 48px);
right: clamp(20px, 3.33vw, 48px);
bottom: clamp(20px, 3.33vw, 48px);
max-width: 330px;
text-align: right;
z-index: 2;
@media (min-width: 581px) and (max-width: 768px) {
left: clamp(20px, 3.33vw, 48px);
}
@media (max-width: 580px) {
bottom: 50px;
}
}
&::before {
content: '';
position: absolute;
inset: 0;
background-image: url(//evvonow.com/wp-content/themes/evvo/assets/imgs/gallery-bg-text.png);
background-size: cover;
background-repeat: no-repeat;
}
}
}
&.with-text:not(:first-of-type) {
.home-gallery-item-illustration .home-gallery-item-text {
max-width: 100%;
font-size: 24px;
line-height: 1.25;
@media (max-width: 768px) {
font-size: 18px;
}
}
}
&[style="--width:100%"] {
flex: 1 1 0%;
max-width: none;
.home-gallery-item-illustration {
width: 100%;
}
}
}
.home-gallery-table {
--width: calc(56% - 10px);
width: var(--width);
@media (max-width: 768px) {
width: 100%;
}
}
.home-gallery-industries {
flex: 1 1 100%;
max-width: 1024px;
margin-inline: auto;
@media (max-width: 991px) {
flex-basis: 100%;
}
& > .text-em-secondary {
@media (max-width: 768px) {
font-size: 20px;
line-height: 24px;
}
}
.home-gallery-industry-list {
gap: 20px;
.home-gallery-industry-item {
--width: calc(100% / 3);
flex: 0 1 calc(var(--width) - 14px);
padding: 35px 20px;
border-radius: 12px;
border: 1px solid var(--grey-line);
@media (min-width: 992px) and (max-width: 1238px) {
--width: calc(100% / 2);
}
@media (max-width: 768px) {
--width: 200px;
flex-grow: 1;
padding-block: 16px;
}
.icon {
flex-shrink: 0;
}
}
a.home-gallery-industry-item {
display: grid;
place-items: flex-end;
padding-block: 1rem;
& > .row {
width: 100%;
}
}
}
}
}
}
.home-gallery-content {
max-width: 328px;
display: flex;
flex-direction: column;
justify-content: space-evenly;
gap: 20px;
padding: clamp(25px, 3.13vw, 45px);
border-radius: min(2.08vw, 30px);
@media (max-width: 768px) {
max-width: calc(50% - 10px);
}
@media (max-width: 580px) {
max-width: 100%;
}
@media (min-width: 1441px) {
max-width: 23vw;
}
p {
font-size: 16px;
font-weight: 500;
line-height: 21px;
}
.home-gallery-content-img {
text-align: center;
img {
max-width: 200px;
max-height: 200px;
object-fit: contain;
@media (max-width: 580px) {
max-width: 100px;
max-height: 100px;
}
}
}
.home-gallery-content-subtitle {
font-family: var(--font-title);
letter-spacing: -0.4px;
}
}
.home-solutions {
padding-block: clamp(50px, 7.29vw, 105px);
&.home-solutions-scroll {
min-height: var(--solutions-section-height);
& > .container-fluid {
position: sticky;
top: var(--solutions-sticky-top);
}
.tabs {
overscroll-behavior: auto;
}
}
& > .container-fluid > .row {
column-gap: 100px;
@media (min-width: 991px) {
flex-wrap: nowrap;
}
}
.col-left {
@media (min-width: 991px) {
flex: 0 1 50%;
}
@media (max-width: 991px) {
flex-basis: 100%;
}
.home-solutions-img {
@media (max-width: 991px) {
max-width: 600px;
margin: 0 auto 20px;
}   
}
}
.col-right {
@media (min-width: 991px) {
flex: 0 1 50%;
}
.tabs .tab .tab-content { 
flex-grow: 1;
.tab-text {
@media (max-width: 991px) {
max-width: fit-content;
}
}
}
.ff-title {
font-size: 22px;
margin-bottom: 18px;
}
.btn {
border-radius: 7px;
padding: 12px 5px 12px 16px;
margin-top: 21px;
@media (max-width: 991px) {
margin-inline: auto;
}
}
}
.home-solutions-img {
position: relative;
}
.home-solutions-navs {
position: absolute;
top: 16%;
left: 14%;
right: 19%;
bottom: 1%;
border: 85px solid transparent; border-radius: 100%;
}
.home-solutions-nav {
position: absolute;
display: flex;
align-items: center;
cursor: pointer;
transition: opacity var(--delay) ease;
.icon-rounded {
--size: clamp(50px, 6.25vw, 90px);
--bg: #D1DAF5;
box-shadow: 4px 4px 7px 0 rgba(0, 0, 0, 0.5);
}
&.tab-nav-indicator {
box-shadow: 0px 0px 0px 15px rgba(209, 218, 245, 0.5);
pointer-events: none;
z-index: 2;
border-radius: 100%;
transition: none !important;
transform: translate(-50%, -50%) !important;
.icon-rounded {
--bg: var(--white);
}
}
.tab-nav-number {
font-size: clamp(24px, 2.639vw, 38px);
line-height: clamp(24px, 2.639vw, 38px);
color: #7782BA;
}
.tab-nav-head {
max-width: fit-content;
position: relative;
left: -4%;
.tab-nav-number {
position: absolute;
left: 5px;
top: 50%;
transform: translateY(-50%);
font-size: 16px;
line-height: 1;
letter-spacing: -0.2px;
color: var(--grey-text);
display: grid;
place-items: center;
width: 31px;
aspect-ratio: 1 / 1;
background-color: var(--white);
border-radius: 100%;
@media (max-width: 580px) {
font-size: 16px;
width: 20px;
}
}
.tab-nav-title {
font-size: 15px;
font-weight: 400;
line-height: 1;
letter-spacing: -0.2px;
.tab-nav-title-inner {
display: block;
max-width: fit-content;
background-color: var(--grey-text);
padding-block: 12px;
padding-inline: 45px 16px;
border-radius: 100vw;
white-space: nowrap;
@media (max-width: 580px) {
padding-block: 7px;
padding-inline: 30px 10px;
}
&.tab-nav-title-splitted:last-of-type {
padding-left: 16px;
}
}
}
&.split {
.tab-nav-number {
top: 5px;
transform: none;
}
.tab-nav-title {
.tab-nav-title-inner:not(:first-of-type) {
transform: translate(30px, -2px);
}
}
}
}
}
} .page-heading {
.page-title {
letter-spacing: normal;
font-family: var(--font-title);
font-weight: 300;
font-size: clamp(44px, 8.96vw, 129px);
line-height: clamp(51px, 9.03vw, 130px);
color: var(--blue-primary);
margin: 0;
max-width: var(--width);
padding: clamp(50px, 8.61vw, 124px);
box-sizing: content-box;
@media (max-width: 991px) {
padding-inline: 0;
}
@media (max-width: 768px) {
padding-top: 30px;
}
@media (max-width: 580px) {
word-break: break-word;
}
}
&.has-text {
.page-title {
padding-bottom: clamp(40px, 5.56vw, 80px);
@media (max-width: 768px) {
padding-block: 30px;
}
}
}
.page-text {
max-width: 367px;
margin-left: auto;
margin-right: clamp(20px, 9.38vw, 135px);
padding-bottom: clamp(18px, 2.5vw, 36px);
}
} h2.hero-media-title {
font-family: inherit;
font-size: 2em;
font-weight: bold;
line-height: inherit;
letter-spacing: normal;
margin: 0.67em 0;
}
.about-values {
& > .container-fluid {
padding-bottom: 55px;
@media (max-width: 991px) {
padding-block: 30px;
}
}
.section-title-container {
padding-block: 55px; @media (max-width: 991px) {
padding-block: 30px;
}
.section-title {
max-width: 551px;
}
}
.about-value-list {
@media (max-width: 768px) {
flex-direction: column;
}
.about-value-item {
gap: 20px; padding-block: 20px 50px;
padding-inline: 20px;
border-radius: 12px;
background-image: url(//evvonow.com/wp-content/themes/evvo/assets/imgs/forfait-cta-bg.png);
background-size: cover;
background-repeat: no-repeat;
@media (max-width: 991px) {
padding-block: 30px;
}
.about-value-number {
flex: 0 1 min(23.96vw, 345px);
@media (max-width: 991px) {
flex: 0 1 60px;
}
@media (max-width: 580px) {
flex: 0 1 45px;
}
.row {
gap: 15px;
@media (max-width: 768px) {
gap: 10px;
}
}
}
.about-value-content {
.about-value-subtitle { margin-bottom: 1rem; }
& > .row {
gap: 20px;
@media (max-width: 580px) {
flex-direction: column;
}
.about-value-content-wrapper { .about-value-title { margin-bottom: 1rem;
font-size: clamp(22px, 2.222vw, 32px);
line-height: 1;
}
.about-value-content-list {
@media (max-width: 580px) {
margin-bottom: 20px;
}
.about-value-content-item {
font-family: var(--font-title);
font-size: 16px;
line-height: 1.2; &:not(:last-of-type) {
padding-bottom: 18px;
margin-bottom: 18px;
border-bottom: 1px solid var(--grey-line);
}
}
}
}
.about-value-img {
max-width: fit-content;
}
}
}
}
}
.about-value-slider-title {
padding-block: 55px;
}
.about-value-slider {
padding-bottom: 64px;
.about-value-slide {
max-width: min(70.97vw, 1022px);
padding: 30px 40px;
border-radius: 16px;
color: var(--white);
@media (max-width: 680px) {
padding: 15px 20px;
}
.about-value-slide-number {
line-height: 1;
padding: 10px 15px;
background-color: var(--white);
border-radius: 100vw;
color: var(--blue-primary);
}
.about-value-slide-content {
align-items: flex-end;
&::before {
content: '';
display: block;
width: min(36.25vw, 522px);
height: 1px;
background-color: var(--grey-line);
margin-block: 80px 37px;
margin-left: 155px;
@media (max-width: 991px) {
margin-block: 30px;
}
@media (max-width: 680px) {
margin-inline: auto;
}
}
.about-value-slide-content-row {
flex-wrap: nowrap;
gap: 27px;
@media (max-width: 680px) {
flex-wrap: wrap;
flex-direction: column;
gap: 20px;
}
.about-value-slide-text {
@media (min-width: 681px) {
flex-basis: min(30.556vw, 440px);
}
}
}
.slide-controllers {
gap: 11px;
margin-left: auto;
@media (max-width: 680px) {
margin-top: 20px;
}
[class*="slide-btn"] {
cursor: pointer;
}
.slide-btn-prev .icon {
transform: rotate(180deg);
}
}
}
}
}
}
.about-values-cards {
.grid-listing {
grid-template-columns: repeat(4, 1fr);
@media (max-width: 991px) {
grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 768px) {
grid-template-columns: repeat(2, 1fr);
}
@media (max-width: 580px) {
grid-template-columns: repeat(1, 1fr);
}
}
}
.about-value-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
@media (max-width: 580px) {
grid-template-columns: repeat(1, 1fr);
}
.about-value-item {
padding: 1.5rem 2rem;
border-left: 4px solid var(--blue-primary);
border-top-right-radius: 14px;
border-bottom-right-radius: 14px;
@media (max-width: 768px) {
padding: 1rem;
}
.about-value-item-text {
padding-top: 1rem;
}
}
}
.about-historics { border-bottom: 1px solid var(--grey-line);
padding-inline: 35px;
@media (max-width: 768px) {
padding: 0 16px;
}
& > .row { flex-direction: row-reverse;
@media (min-width: 1441px) {
max-width: 1440px;
margin-inline: auto;
}
@media (max-width: 768px) {
flex-direction: column;
gap: 0;
}
& > div[class*="about-historic"] {
padding-block: 78px;
}
}
.about-historic-list {
flex-basis: 557px;
flex-shrink: 0;
overflow: hidden;
@media (max-width: 768px) {
flex-basis: auto; max-width: 100%;
overflow: hidden;
padding-block: 30px;
}
@media (min-width: 769px) and (max-width: 991px) {
flex-basis: 50%;
}
.about-historic-item {
color: var(--grey-text);
@media (max-width: 991px) {
gap: 1rem;
}
.about-historic-year-wrapper {
display: grid;
position: relative;
&::before {
content: '';
display: block;
width: 1px;
height: 200%;
background-color: var(--grey-line);
position: absolute;
top: -50%;
right: 11.5px;
z-index: 0;
}
.about-historic-year {
position: relative;
gap: 8px;
z-index: 1;
.about-historic-year-text {
width: 45px;
@media (max-width: 991px) {
width: 35px;
}
}
.about-historic-separator {
position: relative;
&::after {
content: '';
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 4px;
aspect-ratio: 1 / 1;
background-color: var(--white);
border-radius: 100%;
}
}
}
}
.about-historic-text-wrapper {
flex-basis: 400px;
border: 2px solid var(--grey-bg);
border-radius: 15px;
overflow: hidden;
@media (max-width: 768px) {
flex-grow: 1;
}
.about-historic-img {
width: 100%;
height: 200px;
img {
height: 100%;
object-fit: cover;
object-position: center;
}
}
.about-historic-text {
padding: 37px;
@media (max-width: 580px) {
flex-basis: 75%;
padding: 20px;
}
.about-historic-title {
margin-bottom: 21px;
}
}
}
&:not(:last-of-type) {
margin-bottom: 23px;
}
&.active {
.about-historic-separator {
--color: var(--blue-primary) !important;
}
.about-historic-text {
color: var(--blue-primary);
background-color: var(--grey-bg);
}
}
}
}
.about-historic-content {
max-width: var(--width);
flex-shrink: 1;
@media (min-width: 769px) and (max-width: 991px) {
max-width: 50%;
}
@media (max-width: 768px) {
position: relative;
flex-basis: auto;
width: 100%;
padding-block: 30px 0 !important;
}
.about-historic-content-wrapper {
position: sticky;
top: 140px;
}
.about-historic-content-title {
max-width: 550px;
margin-bottom: 60px;
@media (max-width: 768px) {
margin-bottom: 30px;
}
}
.about-historic-img {
img {
border-radius: 15px;
@media (max-width: 768px) {
width: 100%;
}
}
}
}
}
.about-cta-2-cols {
padding-block: 0 clamp(30px, 9.58vw, 138px);
background-color: var(--white);
@media (max-width: 768px) {
padding-block: clamp(50px, 6.81vw, 98px) 0;
}
.cta-2-cols-wrapper {
@media (min-width: 769px) {
gap: clamp(30px, 11.81vw, 170px);
}
.col-left {
max-width: 536px;
@media (min-width: 1441px) {
max-width: 65%;
}
}
.col-right {
max-width: 405px;
@media (min-width: 1441px) {
max-width: 35%;
}
@media (max-width: 680px) {
max-width: 100%;
gap: 30px;
}
.right-text {
margin-bottom: clamp(30px, 6.94vw, 100px);
@media (max-width: 680px) {
margin-bottom: 0;
}
}
.btn {
max-width: 336px;
padding: 12px clamp(12px, 1.39vw, 20px) 12px clamp(12px, 2.78vw, 40px);
}
}
}
}
.directions-slider {
padding-block: clamp(30px, 6.74vw, 97px);
padding-left: clamp(16px, 7.15vw, 103px);
@media (max-width: 768px) {
padding-block: 30px;
padding-inline: 16px;
}
& > .row {
gap: clamp(30px, 6.39vw, 92px);
@media (max-width: 768px) {
flex-direction: column;
gap: 20px;
}
}
.directions-head {
flex-basis: min(27.78vw, 400px);
@media (max-width: 768px) {
flex-basis: auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding-right: 16px;
}
.directions-slider-title {
margin-bottom: 35px;
@media (max-width: 768px) {
margin-bottom: 0;
}
}
.directions-slider-controllers {
[class*='slide-btn'] {
cursor: pointer;
&[aria-disabled="true"] {
cursor: auto;
background-color: transparent;
}
}
}
}
.directions-list {
flex: 1;
margin-inline: 0;
.directions-item {
--view-width: calc(100vw * var(--width) / 1440px);
max-width: var(--width);
position: relative;
border-radius: 2.08vw;
overflow: hidden;
@media (min-width: 769px) {
max-width: min(var(--view-width), var(--width));
}
@media (min-width: 1441px) {
max-width: 22.917vw;
}
&::before {
content: '';
display: block;
position: absolute;
inset: 0;
background: linear-gradient(180deg,rgba(125, 147, 181, 0) 0%, rgba(55, 64, 79, 1) 100%);
z-index: 1;
opacity: .65;
}
.icon-rounded {
position: absolute;
top: 15px;
left: 15px;
z-index: 2;
}
.direction-img img {
@media (min-width: 1441px) {
width: 100%;
height: auto;
object-fit: cover;
}
}
.direction-content {
position: absolute;
left: clamp(15px, 2.78vw, 40px);
bottom: clamp(15px, 3.33vw, 48px);
z-index: 2;
}
}
}
}
.about-2-cols {
overflow: hidden;
padding-block: clamp(30px, 7.64vw, 110px);
background: linear-gradient(
to bottom,
var(--blue-primary) 0%,
var(--blue-primary) 55%,
var(--white) 55%,
var(--white) 100%
);
@media (max-width: 825px) {
background: linear-gradient(
to bottom,
var(--blue-primary) 0%,
var(--blue-primary) 52%,
var(--white) 52%,
var(--white) 100%
);  
}
@media (max-width: 768px) {
background: var(--blue-primary);
}
& > .row {
gap: min(4.03vw, 58px);
@media (max-width: 768px) {
gap: 20px;
}
@media (max-width: 580px) {
flex-direction: column;
gap: 25px;
}
}
.col-left {
flex: 0 1 min(40.97vw, 590px);
@media (max-width: 768px) {
flex-basis: calc(50% - 10px);
}
@media (min-width: 1441px) {
flex: 1 1 calc(50% - 29px);
}
.about-2-cols-left-title {
margin-bottom: min(8.54vw, 123px);
@media (max-width: 580px) {
margin-bottom: 25px;
}
}
.about-2-cols-left-text {
font-size: 20px;
line-height: 25px;
padding-block: 25px min(3.96vw, 57px);
}
.about-2-cols-left-img {
text-align: right;
}
}
.col-right {
flex: 0 1 min(48.26vw, 695px);
position: relative;
padding-top: clamp(20px, 3.47vw, 50px);
@media (max-width: 768px) {
flex-basis: calc(50% - 10px);
}
@media (min-width: 1441px) {
flex: 1 1 calc(50% - 29px);
}
@media (max-width: 580px) {
display: flex;
flex-direction: column-reverse;
gap: 20px;
padding-top: 0;
}
.quote .btn {
@media (max-width: 768px) {
background-color: var(--white);
color: var(--blue-primary);
}
@media (max-width: 680px) {
padding-inline: 16px;
}
.icon-rounded {
@media (max-width: 768px) {
--bg: var(--blue-primary) !important;
}
.icon {
@media (max-width: 768px) {
--color: var(--white) !important;
}
}
}
}
}
}
.quote {
position: relative;
max-width: min(47.92vw, 690px);
margin-top: clamp(25px, 3.472vw, 50px);
@media (max-width: 768px) {
color: var(--white);
}
@media (max-width: 580px) {
max-width: 100%;
margin-top: 0;
}
&::before {
position: absolute;
top: -15px;
left: 0;
display: block;
font-family: "Space Grotesk", sans-serif;
font-size: clamp(85px, 10.42vw, 150px);
font-weight: 400;
line-height: 1;
}
&.with-text {
margin-top: clamp(25px, 12.5vw, 180px);
padding-left: clamp(40px, 5.56vw, 80px);
&::before {
content: '“';
}
}
.quote-text {
padding-bottom: clamp(25px, 2.36vw, 34px);
}
.btn {
font-size: 24px;
margin-top: 1rem;
padding-block: 20px;
border-radius: 12px;
& > .row {
width: 100%;
@media (max-width: 580px) {
flex-wrap: nowrap;
}
}
}
}
.services-cta-btn,
.blocks-cta-btn,
.btn-tall {
max-width: clamp(180px, 20.35vw, 293px);
height: clamp(80px, 6.81vw, 98px);
margin-left: auto;
border-radius: 10px;
padding: 14px clamp(16px, 1.67vw, 24px);
color: var(--black);
}
.btn-tall {
background-color: var(--grey-text);
}
body.post-type-archive-services {
--border-radius: 62px;
--services-container-width: 1022px;
.page-content > section {
scroll-margin-top: 50px;
@media (max-width: 768px) {
scroll-margin-top: 20px;
}
}
.services-container {
max-width: var(--services-container-width);
margin-inline: auto;
}
.home-banner.has-text {
height: auto;
min-height: auto;
max-height: none;
&::before,
.home-banner-illustration::before,
.home-banner-illustration::after {
content: none;
}
.home-banner-illustration img {
@media (max-width: 768px) {
min-height: 320px;
}
}
& > .container-fluid {
max-width: var(--services-container-width);
.home-banner-text {
flex-direction: column-reverse;
right: initial;
bottom: initial;
top: 40%;
transform: translateY(-50%);
@media (max-width: 580px) {
top: 15%;
}
h1 {
font-size: clamp(50px, 7.007vw, 100.9px);
font-weight: 300;
line-height: clamp(52px, 7.063vw, 101.7px);
}
}
}
}
.services-navs {
position: absolute;
bottom: 0;
inset-inline: clamp(16px, 2.36vw, 34px);
border-top: 1px solid var(--grey-bg);
z-index: 2;
@media (max-width: 991px) {
position: initial;
background-color: var(--blue-primary);
}
.services-nav-list {
gap: clamp(15px, 2.431vw, 35px);
padding-block: 30px;
@media (min-width: 991px) {
flex-wrap: nowrap;
}
.services-nav-item {
@media (max-width: 991px) {
flex-grow: 1;
flex-basis: calc(50% - 12px);
}
@media (max-width: 580px) {
flex-basis: 100%;
}
.btn {
border-radius: 16px;
@media (max-width: 991px) {
max-width: none;
}
&:hover {
background-color: var(--blue-tertiary);
}
}
}
}
}
.home-solutions {
padding-block: clamp(20px, 3.472vw, 50px);
}
.services-problems {
padding-top: clamp(30px, 3.68vw, 53px);
& > .container-fluid.row.nowrap {
@media (max-width: 768px) {
flex-direction: column;
gap: 0;
}
}
.h2 {
max-width: 787px;
}
.services-problems-left {
flex: 0 1 413px;
@media (max-width: 768px) {
flex: 1;
}
.services-problems-subtitle {
gap: 5px;
svg {
flex-shrink: 0;
}
}
.services-problems-title {
font-size: clamp(24px, 3.194vw, 45.99px);
font-weight: 500;
line-height: clamp(26px, 3.292vw, 47.4px);
letter-spacing: -1px;
}
.services-problems-cta {
position: sticky;
top: 150px;
background-color: #030E75;
border-radius: 16px;
padding: clamp(20px, 2.5vw, 36px);
.services-problems-cta-text {
color: #C9DDF6;
margin-top: 3px;
}
.btn {
color: #030E75;
margin-top: clamp(20px, 2.083vw, 30px);
&:hover {
color: var(--white);
}
@media (min-width: 768px) {
max-width: fit-content;
}
}
}
}
.services-problem-list {
flex: 0 1 670px;
@media (max-width: 768px) {
flex: 1;
}
.services-problem-item {
padding: clamp(20px, 2.431vw, 35px);
border-radius: 16px;
&:not(:last-of-type) {
margin-bottom: 40px;
}
.faq-heading {
background-color: transparent;
padding: 0;
border: none;
.icon {
background-color: var(--blue-primary);
transform: none;
&.minus {
display: none;
}
}
.icon-rounded .icon {
transform: rotate(180deg);
}
p {
color: var(--blue-primary);
}
.services-problem-heading {
gap: 20px;
.services-problem-number {
color: #7695B8;
}
.services-problem-title {
color: #cf1731;
flex-shrink: 1;
margin-block: 0;
}
}
}
.services-problem-title {
margin-block: 22px 26px;
}
.services-problem-content {
margin-block: clamp(16px, 1.944vw, 28px);
p:not(:last-of-type) {
margin-bottom: 1rem;
}
}
.services-problem-content-impacts-list {
gap: clamp(15px, 2.083vw, 30px);
border-radius: 16px;
overflow: hidden;
.row {
gap: 20px;
&:not(:last-of-type) {
margin-bottom: 1rem;
}
}
.regular-text {
p {
font-size: clamp(15px, 2.08vw, 30px);
}
}
.services-problem-content-impacts,
.services-problem-content-challenge {
padding-inline: clamp(16px, 1.667vw, 24px);
}
.services-problem-content-impacts {
background-color: var(--dark-bluer);
padding-block: clamp(24px, 2.639vw, 38px);
padding-bottom: 19px;
.big-text {
font-size: clamp(43px, 5.981vw, 86.13px);
line-height: 1;
letter-spacing: -3px;
}
.regular-text {
font-size: 15px;
line-height: 1.25;
color: #B4CEEF;
a {
color: #B4CEEF;
background: linear-gradient(to right, #B4CEEF, #B4CEEF), linear-gradient(to right, var(--white), var(--white));
background-size: 100% 0.1em, 0 0.1em;
background-position: 100% 100%, 0 100%;
background-repeat: no-repeat;
transition: all 400ms;
&:hover {
color: var(--white);
background-size: 0 0.1em, 100% 0.1em;
}
}
}
}
.services-problem-content-challenge {
background-color: var(--dark-bluer);
padding-block: 18px;
padding-top: 0;
.services-problem-content-challenge-title {
font-size: 13.75;
line-height: 1;
color: #B4CEEF;
margin-bottom: 5px;
}
.services-problem-content-challenge-text {
font-size: clamp(16px, 1.25vw, 18px);
}
.services-problem-content-challenge-icon {
img {
width: 33px !important;
height: auto !important;
}
}
}
.services-problem-content-challenge.no__stats {
margin-top: -36px;
}
}
&.open {
.icon-rounded {
--bg: #030E75 !important;
.icon {
background-color: var(--white);
&.plus {
display: none;
}
&.minus {
display: block;
}
}
}
}
}
}
}
.services-heading {
h2.services-heading-title {
font-family: inherit;
letter-spacing: normal;
}
.forfaits-cta-inner {
.services-heading-title {
font-size: clamp(30px, 4.17vw, 60px);
font-weight: bold;
line-height: 1;
margin: 0;
}
.subtitle {
margin-block: 20px;
}
.services-heading-text {
margin-block: 20px;
}
}
}
.services-post-list {
position: relative;
padding: clamp(16px, 1.74vw, 25px) 0;
&::before {
content: '';
display: block;
position: absolute;
top: 0;
inset-inline: clamp(16px, 2.36vw, 34px);
height: 1px;
background-color: var(--grey-line);
}
.services-post-list-wrapper {
.services-post-item {
border-radius: 16px;
@media (max-width: 768px) {
flex-direction: column;
}
&:not(:last-of-type) {
margin-bottom: clamp(16px, 2.5vw, 36px);
}
.services-post-item-title {
margin-block: 26px;
margin-top: 0;
}
.services-post-item-text {
margin-top: 24px;
}
.services-post-item-img {
flex: 0 1 688px;
padding: 20px;
@media (max-width: 768px) {
flex: 1;
}
& > img {
width: 100%;
border-radius: 12px;
}
}
.services-post-item-content {
display: flex;
flex-direction: column;
flex: 0 0 45%;
padding: 25px 20px 40px;
.services-post-values-title {
margin-bottom: clamp(10px, 1.389vw, 20px);
}
.services-post-values {
.services-post-value {
gap: 30px;
padding-block: clamp(10px, 1.389vw, 20px);
border-top: 1px solid var(--grey-line);
.icon-rounded {
flex-shrink: 0;
}
.text-medium {
flex: 1;
}
}
}
.services-post-item-btn {
max-width: 250px;
padding-block: 20px;
border-radius: 12px;
margin-top: 20px;
.row {
width: 100%;
}
}
}
}
}
}
.services-cta-img {
overflow: hidden;
& > .container-fluid {
padding-block: clamp(45px, 6.25vw, 90px) clamp(40px, 5.56vw, 80px);
& > .row {
@media (max-width: 768px) {
flex-direction: column;
gap: 30px;
}
}
.col-left {
padding-right: clamp(23px, 3.19vw, 46px);
.text-em-primary {
max-width: 526px;
@media (min-width: 1441px) {
max-width: 80%;
}
}
.services-cta-left-text {
max-width: 583px;
padding-block: clamp(16px, 1.74vw, 25px) clamp(21.5px, 2.99vw, 43px);
margin-top: clamp(16px, 2.08vw, 30px);
@media (min-width: 1441px) {
max-width: 82%;
}
}
.btn {
max-width: fit-content;
}
}
.col-right {
position: relative;
& > img {
@media (max-width: 768px) {
width: 100%;
}
@media (min-width: 1441px) {
width: 100%;
}
}
}
}
}
.services-cta-img-bloc {
padding-bottom: clamp(58px, 8.06vw, 116px);
padding-inline: 16px;
background: linear-gradient(
to bottom,
var(--blue-primary) 0%,
var(--blue-primary) 20%,
var(--grey-bg) 20%,
var(--grey-bg) 100%
);
.services-cta-img-bloc-wrapper {
position: relative;
max-width: 1292px;
margin-inline: auto;
&::after {
content: '';
display: block;
position: absolute;
top: 0;
bottom: clamp(-16px, -1.67vw, -24px);
left: clamp(25px, 3.54vw, 51px);
right: clamp(25px, 3.54vw, 51px);
background-color: #DEE1ED;
border-radius: var(--border-radius);
opacity: 0.83;
}
.services-cta-img-bloc-inner {
position: relative;
background-color: var(--white);
border-radius: var(--border-radius);
padding: clamp(53px, 7.36vw, 106px) clamp(16px, 2.08vw, 30px) clamp(37.5px, 5.21vw, 75px);
z-index: 1;
@media (max-width: 1200px) {
padding-top: 100px;
}
@media (max-width: 768px) {
padding-top: 70px;
}
.services-cta-img-bloc-icon {
position: absolute;
top: clamp(16px, 1.74vw, 25px);
right: clamp(16px, 2.08vw, 30px);
@media (max-width: 768px) {
right: 30px;
}
& > svg {
max-width: clamp(50px, 7.08vw, 102px);
height: fit-content;
}
}
.services-cta-img-bloc-text {
display: block;
max-width: 978px;
margin-inline: auto;
margin-bottom: clamp(31.5px, 4.38vw, 63px);
font-size: clamp(26.5px, 3.68vw, 53px);
line-height: clamp(29px, 4.03vw, 58px);
text-align: center;
}
.hashtags {
gap: clamp(16px, 1.67vw, 24px);
}
}
}
}
}
.services-gestion {
padding-block: clamp(30px, 3.68vw, 53px);
.home-solutions-nav {
cursor: initial;
}
.col-right > p {
background-image: url(//evvonow.com/wp-content/themes/evvo/assets/imgs/forfait-cta-bg.png);
background-size: cover;
background-repeat: no-repeat;
padding: clamp(20px, 2.778vw, 40px);
border-radius: 16px;
}
}
.services-integrations {
padding-block: clamp(30px, 3.68vw, 53px);
& > .row {
@media (max-width: 768px) {
flex-direction: column;
}
}
.services-integration {
display: grid;
place-content: center;
background-image: url(//evvonow.com/wp-content/themes/evvo/assets/imgs/forfait-cta-bg.png);
background-size: cover;
background-repeat: no-repeat;
border-radius: 16px;
padding: clamp(20px, 2.778vw, 40px);
.services-integration-scenario {
gap: 30px;
@media (max-width: 991px) {
flex-direction: column;
}
&:not(:last-child) {
margin-bottom: 2rem;
}
.icon {
flex-shrink: 0;
}
.services-integration-scenario-texts {
@media (max-width: 768px) {
text-align: center;
}
}
}
}
}
.blocks-ctas {
background-color: var(--white);
padding: clamp(16px, 1.74vw, 25px) 10px;
.blocks-cta-list {
gap: clamp(16px, 1.39vw, 20px);
@media (max-width: 768px) {
flex-direction: column;
}
.blocks-cta-item {
padding: clamp(16px, 1.67vw, 24px);
border-radius: 16px;
color: var(--white);
.blocks-cta-body {
padding: clamp(40px, 5.56vw, 80px) clamp(39px, 5.42vw, 78px) clamp(30px, 4.17vw, 60px);
@media (max-width: 768px) {
padding: 20px;
}
.blocks-cta-title {
max-width: 440px;
margin-bottom: clamp(20px, 2.78vw, 40px);
}
.blocks-cta-text {
max-width: 365px;
}
}
}
}
}
section.section-container {
padding-inline: 14px;
@media (max-width: 991px) {
padding-inline: 16px;
}
}
.page-content.default-layout {
.page-heading {
.container-fluid {
position: relative;
padding-bottom: clamp(18px, 2.5vw, 36px);
&::after {
content: '';
position: absolute;
inset-inline: clamp(17px, 2.36vw, 34px);
bottom: clamp(18px, 2.5vw, 36px);
display: block;
max-width: 100%;
height: 1px;
background-color: var(--grey-line);
}
.page-title {
position: relative;
.heading-arrow {
--right: clamp(50px, 8.61vw, 124px);
display: block;
position: absolute;
right: calc(var(--right) - 80px);
bottom: 40px;
@media (max-width: 991px) {
right: 0;
bottom: 0;
}
@media (max-width: 768px) {
bottom: -30px;
}
& > svg {
max-width: clamp(40px, 4.17vw, 60px);
}
}
}
}
}
.content-body {
padding: clamp(50px, 7.64vw, 110px) 20px;
.content-inner {
max-width: 1022px;
margin-inline: auto;
.wp-block-heading {
margin-bottom: clamp(18px, 2.5vw, 36px);
&:not(:first-child) {
margin-top: clamp(34px, 4.72vw, 68px);
}
}
p {
margin-bottom: 1rem;
}
}
}
& + .footer-partners {
background-color: var(--grey-bg);
}
}
body {
.forfait-grid-prices .forfait-grid-prices-wrapper .forfait-grid-prices-head {
@media (min-width: 993px) {
position: sticky;
top: 0;
z-index: 2;
}
}
}
.forfait-grid-prices {
padding-bottom: clamp(30px, 3.68vw, 53px);
@media (max-width: 991px) {
overflow: hidden;
}
.forfait-grid-prices-wrapper {
padding: clamp(16px, 1.67vw, 24px) clamp(16px, 1.46vw, 21px);
border-radius: 16px;
&.grid-price {
.grid-price-left {
width: clamp(300px, 38.96vw, 561px);
@media (min-width: 992px) {
width: 40%;
}
}
.grid-price-right-item {
width: clamp(164px, 15.28vw, 220px);
}
}
&.desktop {
@media (max-width: 991px) {
display: none;
}
}
&.mobile {
padding: 0;
@media (min-width: 991px) {
display: none;
}
.forfait-grid-prices-mobile {
overflow: visible;
margin-top: 20px;
.swiper-nav-button {
position: absolute;
top: 50px;
z-index: 1;
}
.forfaits-price-button-prev {
left: 0;
@media (max-width: 580px) {
left: -11px;
}
.icon {
transform: rotate(180deg);
}
}
.forfaits-price-button-next {
right: 0;
@media (max-width: 580px) {
right: -11px;
}
}
.icon-rounded {
border: 1px solid var(--grey-line);
}
.forfaits-price-pagination {
--swiper-pagination-bullet-size: 10px;
position: absolute;
top: 172px;
bottom: initial;
}
.forfait-grid-prices-mobile-item {
--border-radius: 16px;
.head {
max-width: 80%;
margin-inline: auto;
padding: 10px;
border-radius: var(--border-radius);
.head-inner {
padding: 10px;
border-radius: var(--border-radius);
.title {
margin-block: 10px;
}
.btn {
font-size: 14px;
}
}
}
.body {
margin-top: 40px;
.forfait-item {
padding: 10px 20px;
border: 1px solid var(--grey-line);
border-radius: var(--border-radius);
&:not(:last-of-type) {
margin-bottom: 10px;
}
.forfait-item-name {
flex-grow: 1;
}
.forfait-item-category {
flex: 0 0 100px;
border-radius: var(--border-radius);
padding: 16px;
}
}
}
}
}
}
.forfait-grid-prices-head {
--border-radius-head: 20px;
.forfait-grid-prices-head-left {
padding: clamp(16px, 2.43vw, 35px) clamp(16px, 2.92vw, 42px);
border-radius: var(--border-radius-head);
@media (max-width: 992px) {
width: 100%;
margin-bottom: 20px;
}
.forfait-grid-prices-head-left-title {
font-size: clamp(30px, 3.333vw, 48px);
line-height: 1;
margin-bottom: 10px;
}
& > .row {
gap: 10px;
.icon {
position: relative;
top: 3px;
}
.forfait-grid-prices-head-left-subtitle {
font-size: 13px;
line-height: 1;
max-width: 358px;
}
}
}
.forfait-grid-prices-head-right {
position: relative;
border-radius: var(--border-radius-head);
padding: 1rem clamp(16px, 1.67vw, 24px);
gap: 17px;
z-index: 2;
@media (max-width: 992px) {
display: none;
}
@media (min-width: 992px) {
width: 60%;
}
& > .col {
width: clamp(185px, 17.36vw, 250px);
padding: 10px;
border-radius: var(--border-radius-head);
background-color: #C5D3E9;
}
.forfait-grid-prices-head-right-subtitle {
font-size: 10px;
font-weight: 600;
}
.forfait-grid-prices-head-right-title {
margin-bottom: 10px;
}
.btn {
gap: 15px;
font-size: 13px;
font-family: var(--font-title);
font-weight: 700;
letter-spacing: -1px;
padding: 8px 20px;
}
}
}
.forfait-grid-prices-row {
.forfait-grid-prices-row-left {
@media (max-width: 992px) {
width: 100%;
}
@media (min-width: 1441px) {
flex-shrink: 0;
}
.forfait-grid-prices-row-title {
max-width: 396px;
padding-block: clamp(16px, 1.74vw, 25px) clamp(16px, 2.08vw, 30px);
margin-left: clamp(20px, 4.17vw, 60px);
border-bottom: 1px solid var(--grey-text);
@media (max-width: 992px) {
max-width: 100%;
padding-block: 16px;
margin-left: 0;
border-top: 1px solid var(--grey-text);
}
@media (min-width: 1441px) {
max-width: 73%;
}
}
.forfait-grid-prices-mobile {
@media (min-width: 993px) {
display: none;
}
.forfait-grid-prices-mobile-item {
padding-top: 16px;
&:last-of-type {
padding-bottom: 16px;
}
}
}
}
.forfait-grid-prices-row-right {
padding-inline: 15px;
@media (max-width: 992px) {
display: none;
}
@media (min-width: 992px) {
flex: 1 1 60%;
}
.forfait-grid-prices-row-item {
padding-inline: clamp(16px, 1.53vw, 22px);
border-left: 1px solid var(--grey-text);
&:last-of-type {
border-right: 1px solid var(--grey-text);
}
@media (min-width: 992px) {
flex: 1 1 calc(100% / 3);
}
.grid-price-right-item {
width: 100%;
height: 100%;
.forfait-grid-prices-item {
height: 100%;
&.bg-grey::before {
content: '';
display: block;
background-color: var(--grey-bg);
}
span {
position: relative;
z-index: 1;
}
}
}
}
}
&:last-of-type {
.forfait-grid-prices-row-left {
.forfait-grid-prices-row-title {
@media (min-width: 993px) {
border-bottom: none;
}
}
}
}
}
}
}
.forfaits-cta {
padding-block: 33px;
.forfaits-cta-wrapper {
background-image: url(//evvonow.com/wp-content/themes/evvo/assets/imgs/forfait-cta-bg.png);
background-size: cover;
background-repeat: no-repeat;
border-radius: 16px;
padding: 100px 25px;
.forfaits-cta-inner {
max-width: 1026px;
margin-inline: auto;
p {
font-size: clamp(24px, 3.33vw, 48px);
line-height: 1;
}
.btn {
margin-top: 40px;
}
.forfaits-cta-text { margin: 25px auto; }
.forfaits-cta-list {
margin-top: 60px;
padding-block: 28px;
border-top: 1px solid var(--grey-line);
border-bottom: 1px solid var(--grey-line);
gap: 45px;
@media (max-width: 768px) {
flex-wrap: wrap;
gap: 15px;
}
.forfaits-cta-item {
gap: 20px;
& > .icon-rounded {
flex-shrink: 0;
}
& > p {
font-size: clamp(14px, 1.11vw, 16px);
line-height: clamp(19px, 1.46vw, 21px);
@media (max-width: 580px) {
font-size: 16px;
line-height: 1.4;
}
}
}
}
}
}
}
.forfait-representatives {
padding: clamp(30px, 3.68vw, 53px) clamp(16px, 2.43vw, 35px);
.forfait-representatives-title {
max-width: 900px;
padding-bottom: clamp(27px, 3.75vw, 54px);
padding-left: clamp(16px, 3.26vw, 47px);
}
.forfait-representative-list {
gap: 20px;
.forfait-representative-item {
--item-width: calc(100% / 3);
flex: 1 1 calc(var(--item-width) - 15px);
padding: clamp(16px, 1.67vw, 24px) clamp(16px, 1.53vw, 22px);
border-radius: 2.01vw;
.forfait-representative-img {
border-radius: 25px;
overflow: hidden;
img {
width: 100%;
}
}
.forfait-representative-content {
padding: clamp(25px, 3.13vw, 45px) clamp(20px, 2.78vw, 40px) 10px clamp(20px, 2.78vw, 40px);
.forfait-representative-name {
font-size: clamp(20px, 2.71vw, 39px);
line-height: clamp(16px, 1.74vw, 25px);
}
.forfait-representative-post {
max-width: fit-content;
border-radius: 100vw;
padding: 5px 18px 5px 13px;
margin-block: 22px;
gap: 5px;
}
.forfait-representative-phone {
margin-bottom: 6px;
}
.forfait-representative-btn {
margin-top: 22px;
border-radius: 16px;
.forfait-representative-btn-icon {
padding: clamp(16px, 1.25vw, 18px) clamp(16px, 1.39vw, 20px);
border-radius: 13px;
}
}
}
}
}
}
.footer-partners.forfaits-partners {
padding-top: 0;
}
.forfaits-taxonomy-list {
@media (max-width: 991px) {
padding-inline: 0 !important;
}
.forfaits-taxonomy-list-wrapper {
.forfaits-taxonomy-item-inner {
padding-block: 30px;
position: relative;
&::before {
content: '';
display: block;
position: absolute;
top: 0;
inset-inline: 20px;
height: 1px;
background-color: var(--grey-line);
}
}
.forfaits-taxonomy-item {
padding: 22px;
border-radius: 16px;
@media (max-width: 768px) {
flex-direction: column;
row-gap: 30px;
}
.forfaits-taxonomy-item-img {
max-width: 50%;
flex-basis: 660px;
flex-shrink: 1;
border-radius: 7px;
overflow: hidden;
@media (max-width: 768px) {
max-width: none;
flex-basis: 100%;
}
img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
}
.forfaits-taxonomy-item-content {
display: flex;
flex-direction: column;
flex: 1;
@media (min-width: 769px) {
padding-top: 32px;
padding-left: 35px;
}
.forfaits-taxonomy-item-title ~ .forfaits-taxonomy-item-row {
margin-top: 30px;
}
.forfaits-taxonomy-item-subtitle {
max-width: 318px;
margin-top: 10px;
}
.forfaits-taxonomy-item-row {
gap: 31px;
@media (max-width: 580px) {
gap: 20px;
}
&:not(:last-of-type) {
@media (max-width: 580px) {
flex-direction: column;
}
}
&:last-of-type {
padding-top: 20px;
margin-top: auto;
}
.text-small {
p:not(:last-of-type) {
margin-bottom: 25px;
}
}
}
.forfaits-taxonomy-item-row-foot {
& > p {
padding-bottom: 18px;
}
.btn-tall {
width: 325px;
@media (max-width: 768px) {
max-width: fit-content;
width: 100%;
}
@media (max-width: 580px) {
max-width: 100%;
width: 100%;
}
.row {
gap: 1rem;
}
}
}
}
}
}
}
.page-certification {
.page-heading {
h1 {
max-width: 100%;
width: var(--width);
margin-inline: auto;
@media (max-width: 768px) {
padding-block: 50px 20px;
}
}
.page-heading-texts-supp-row { align-items: flex-start;
row-gap: 20px;
}
.page-heading-texts-supp {
gap: clamp(20px, 3.47vw, 50px);
}
.page-heading-subtitle {
max-width: 367px;
}
.page-text {
max-width: 50%;
}
.page-heading-banner { padding-block: clamp(20px, 2.64vw, 38px) 0;
@media (max-width: 768px) {
padding-block: 20px;
}
}
}
.about-cta-2-cols {
@media (max-width: 768px) {
padding-bottom: clamp(50px, 6.81vw, 98px);
}
}
}
.certification-list {
padding-inline: clamp(20px, 2.08vw, 30px);
padding-block: clamp(30px, 3.82vw, 55px);
.certification-list-heading {
padding-bottom: clamp(20px, 3.82vw, 55px);
.certification-list-heading-title {
h2 {
max-width: 551px;
}
}
}
.certification-row {
gap: 30px;
@media (max-width: 580px) {
flex-direction: column;
gap: 20px;
align-items: center;
text-align: center;
}
.certification-row-left {
@media (min-width: 769px) {
flex: 0 1 842px;
}
}
.certification-row-right {
text-align: center;
@media (min-width: 769px) {
flex: 1 1 588px;
text-align: left;
}
}
}
.certification-item {
padding-block: clamp(20px, 2.36vw, 34px);
border-top: 1px solid var(--grey-line);
@media (max-width: 768px) {
flex-direction: column;
gap: 20px;
}
&:last-of-type {
border-bottom: 1px solid var(--grey-line);
}
.certification-row-left {
column-gap: clamp(30px, 6.25vw, 90px);
@media (max-width: 768px) {
flex-direction: column;
gap: 20px;
}
.certification-item-img {
height: 166px;
background-color: var(--white);
border-radius: 18px;
overflow: hidden;
@media (min-width: 769px) {
flex: 0 0 257px;
}
& > img {
display: block;
width: auto;
height: 100%;
object-fit: contain;
object-position: center;
margin-inline: auto;
padding-inline: 20px;
}
}
.certification-item-title {
gap: 20px;
.icon-rounded {
position: relative;
flex-shrink: 0;
&::before,
&::after {
content: '';
display: block;
position: absolute;
inset: 0;
}
&::before {
border-radius: 7px;
background-color: var(--white);
z-index: 0;
}
&::after {
inset: 6px;
border-radius: 100%;
background-color: var(--grey-bg);
z-index: 1;
}
.icon {
position: relative;
z-index: 3;
}
}
}
}
}
&.certification-partners-list {
.certification-list-heading {
flex-wrap: wrap;
.certification-list-heading-title,
.certification-list-heading-subtitle {
flex-basis: 100%;
h2{
max-width: none;
}
}
}
}
}
.blog-categories {
gap: 5px;
.blog-category {
padding: 5px 15px;
border-radius: 100vw;
}
}
.blog-list {
padding-inline: clamp(20px, 2.36vw, 34px);
padding-bottom: clamp(50px, 7.92vw, 114px);
column-gap: 20px;
row-gap: clamp(30px, 5.21vw, 75px);
.blog-item {
flex: 0 1 calc(50% - 10px);
@media (max-width: 768px) {
flex: 1 1 100%;
}
.blog-thumb {
position: relative;
border-radius: 20px;
overflow: hidden;
.blog-categories {
position: absolute;
bottom: clamp(20px, 2.22vw, 32px);
left: clamp(20px, 2.64vw, 38px);
}
}
.blog-content {
padding: clamp(20px, 2.22vw, 32px) clamp(25px, 3.47vw, 50px);
border-radius: 20px;
.blog-item-title {
max-width: 470px;
margin-bottom: clamp(20px, 3.13vw, 45px);
}
.blog-item-creation-date {
gap: 16px;
&::before {
content: '';
display: block;
width: 10px;
aspect-ratio: 1;
background-color: var(--blue-primary);
border-radius: 100%;
}
}
}
}
}
body.page-template-contact {
overflow-x: hidden;
}
.page-content.contact {
.page-heading {
position: relative;
padding-bottom: clamp(30px, 4.86vw, 70px);
.container-fluid {
.page-title {
padding-block: clamp(30px, 5.21vw, 75px) clamp(20px, 3.47vw, 50px);
@media (max-width: 991px) {
max-width: 60%;
}
@media (max-width: 768px) {
max-width: 100%;
}
}
.btn {
max-width: fit-content;
font-size: clamp(16px, 1.46vw, 21px);
font-weight: 700;
line-height: 1;
padding-inline: clamp(20px, 3.06vw, 44px);
@media (min-width: 991px) {
margin-inline: clamp(50px, 8.61vw, 124px);
}
}
.contact-heading-img {
max-width: 50%;
position: absolute;
top: 140px;
right: 0;
transform: rotate(-35deg);
@media (max-width: 991px) {
max-width: 55%;
top: 20%;
}
@media (max-width: 768px) { display: none;
}
img {
width: 730px;
}
}
}
}
.contact-form-row {
padding: clamp(20px, 2.08vw, 30px) clamp(20px, 2.43vw, 35px);
@media (max-width: 768px) {
padding: 0;
}
& > .row {
position: relative;
border-radius: 30px;
@media (max-width: 768px) {
flex-direction: column;
border-radius: 0;
}
}
.col-left {
.col-inner {
display: flex;
flex-direction: column;
justify-content: space-between;
max-width: 428px;
height: 100%;
margin-inline: auto;
padding-block: clamp(40px, 6.94vw, 100px) clamp(35px, 4.86vw, 70px);
padding-left: 20px;
@media (max-width: 768px) {
max-width: 100%;
padding-inline: 20px;
padding-bottom: 0;
text-align: center;
}
h2 {
margin-bottom: 20px;
}
.contact-medias-wrapper {
gap: 10px;
@media (max-width: 768px) {
justify-content: center;
}
@media (max-width: 580px) {
gap: 0;
}
.contact-medias-arrow {
margin-top: 10px;
}
.contact-medias-text {
margin-bottom: 40px;
@media (max-width: 580px) {
text-align: left;
}
}
.btn {
font-family: var(--font-title);
font-size: clamp(18px, 1.458vw, 21px);
font-weight: 700;
line-height: 1;
}
}
}
}
.col-right {
padding: clamp(20px, 2.78vw, 40px);
@media (max-width: 768px) {
padding-inline: 0;
}
.col-inner {
height: 100%;
padding: clamp(25px, 3.68vw, 53px) clamp(16px, 2.29vw, 33px);
border-radius: 38px;
}
}
}
.contact-addresses {
padding: clamp(30px, 5.556vw, 80px);
.contact-addresses-list {
gap: clamp(20px, 4.861vw, 70px);
@media (max-width: 580px) {
flex-direction: column;
}
.contact-address-item {
font-family: var(--font-title);
.contact-address-title {
font-size: clamp(18px, 1.875vw, 27px);
font-weight: 400;
line-height: 1;
letter-spacing: -0.1px;
color: var(--dark-blue);
padding-bottom: 18px;
margin-bottom: 50px;
border-bottom: 1px solid var(--dark-blue);
}
p.contact-address-text {
max-width: 470px;
margin-bottom: clamp(25px, 3.819vw, 55px);
}
.contact-address-text {
font-size: clamp(24px, 2.778vw, 40px);
line-height: clamp(30px, 3.194vw, 46px);
letter-spacing: -0.2px;
color: var(--blue-secondary);
text-decoration: underline;
}
}
}
}
}
.page-404 {
.heading-container {
background-image: url(//evvonow.com/wp-content/themes/evvo/assets/imgs/404-heading-bg.png);
background-size: cover;
background-repeat: no-repeat;
background-position: bottom;
padding: clamp(50px, 9.03vw, 130px) 20px;
.heading-inner {
max-width: 829px;
margin-inline: auto;
h1 {
margin: 0;
}
p {
max-width: 680px;
margin: clamp(20px, 3.47vw, 50px) auto clamp(20px, 2.78vw, 40px);
letter-spacing: 0;
}
.btn {
position: relative;
max-width: 232px;
margin-inline: auto;
font-family: var(--font-title);
font-size: clamp(16px, 1.46vw, 21px);
font-weight: 700;
line-height: 1;
color: var(--blue-secondary);
letter-spacing: -0.1px;
&:hover {
color: var(--white);
background-color: var(--blue-tertiary);
}
.arrow-separator {
display: block;
position: absolute;
bottom: 20px;
right: calc(100% + 25px);
}
}
}
}
.body-container {
padding: clamp(50px, 6.94vw, 100px) 20px;
.body-inner {
max-width: 960px;
margin-inline: auto;
gap: 20px;
.left {
flex: 0 1 361px;
}
.right {
flex: 0 1 495px;
.head {
font-size: clamp(20px, 1.81vw, 26px);
font-weight: 400;
line-height: 1;
letter-spacing: -0.5px;
padding-bottom: 10px;
margin-bottom: 40px;
border-bottom: 1px solid var(--dark-blue);
}
}
}
}
}
.page-carriere {
.page-heading {
position: relative;
padding-bottom: clamp(20px, 3.47vw, 50px);
&::after {
content: '';
position: absolute;
inset-inline: clamp(17px, 2.36vw, 34px);
bottom: 0;
display: block;
max-width: 100%;
height: 1px;
background-color: var(--grey-line);
}
.btn-wrapper {
padding-left: clamp(50px, 8.61vw, 124px);
box-sizing: content-box;
@media (max-width: 991px) {
padding-left: 0;
}
.btn {
display: flex;
align-items: center;
gap: 23px;
border-radius: 16px;
}
}
.page-title {
@media (max-width: 768px) {
text-align: center;
}
}
.page-text {
max-width: 50%;
padding-bottom: 0;
@media (max-width: 768px) {
margin: 0;
text-align: center;
}
}
& > .container-fluid > .row {
@media (max-width: 768px) {
flex-direction: column;
align-items: center;
}
}
}
.carriere-partners {
padding: clamp(18px, 2.78vw, 40px) 10px 18px;
.partners-heading {
display: flex;
gap: 10px;
@media (min-width: 769px) {
padding-left: 30px;
}
.partners-heading-arrow {
margin-top: 10px;
@media (max-width: 768px) {
max-width: 5%;
svg {
max-width: 100%;
}
}
}
}
.partner-list {
margin-top: -50px;
padding-block: clamp(35px, 4.86vw, 70px);
border-radius: 16px;
}
}
.carriere-about {
padding: 12px 20px;
.about-container {
border-radius: 16px;
@media (max-width: 991px) {
padding-inline: 0;
}
.about-inner {
max-width: 1200px;
padding: clamp(50px, 7.64vw, 110px) 20px;
margin-inline: auto;
@media (max-width: 768px) {
flex-direction: column;
gap: 20px;
}
.text-left {
@media (min-width: 769px) {
max-width: 45%;
}
h2 br {
@media (max-width: 768px) {
display: none;
}
}
}
.text-right {
@media (min-width: 769px) {
flex: 0 1 570px;
}
.text-em-secondary {
margin-bottom: 30px;
}
}
}
}
}
.carriere-testimonies {
padding-block: clamp(30px, 5.07vw, 73px);
@media (max-width: 480px) {
padding-right: 16px;
}
.testimony-list {
.testimony-item {
max-width: 415px;
border-radius: 16px;
padding: 10px;
@media (max-width: 480px) {
max-width: 100%;
}
.testimony-rating {
max-width: fit-content;
padding: 18px 23px;
border-radius: 16px;
gap: 13px;
margin-left: auto;
}
.testimony-wrapper {
padding-inline: 30px;
}
.testimony-content {
padding-block: 44px 31px;
.testimony-title {
margin-bottom: 20px;
}
}
.testimony-footer {
position: relative;
padding-block: 21px 15px;
gap: 8px;
&::before {
content: '';
display: block;
position: absolute;
top: 0;
inset-inline: -10px;
height: 1px;
background-color: var(--grey-line);
}
.testimony-author-name {
margin-bottom: 7px;
}
}
}
}
}
.carriere-quote {
--radius: 4.31vw;
padding-bottom: clamp(30px, 3.75vw, 54px);
.quote-text-wrapper {
position: relative;
max-width: 1292px;
width: 90%;
margin-inline: auto;
border-radius: var(--radius);
margin-top: -18%;
z-index: 1;
&::after {
content: '';
position: absolute;
display: block;
width: calc(100% - 6.94vw);
height: 100%;
left: 50%;
bottom: -12px;
transform: translateX(-50%);
background-color: #DEE1ED;
border-radius: var(--radius);
}
}
.quote-text {
position: relative;
padding: clamp(20px, 4.86vw, 70px) 20px;
border-radius: var(--radius);
z-index: 1;
.quote-text-inner {
max-width: 978px;
margin-inline: auto;
text-align: center;
p {
font-family: var(--font-title);
font-size: clamp(18px, 3.68vw, 53px);
font-weight: 400;
line-height: clamp(20px, 4.03vw, 58px);
}
}
}
}
.carriere-avantages {
.avantages-container {
max-width: 1292px;
width: 90%;
margin-inline: auto;
padding-block: clamp(30px, 3.19vw, 46px) clamp(30px, 5.42vw, 78px);
border-top: 1px solid var(--grey-line);
.avantages-title {
margin-bottom: clamp(30px, 2.43vw, 45px);
}
.avantage-list {
gap: 18px;
@media (max-width: 768px) {
flex-wrap: wrap;
gap: 20px;
}
.avantage-item {
display: grid;
justify-content: space-between;
padding: clamp(16px, 2.78vw, 40px);
border-radius: 16px;
@media (max-width: 768px) {
flex: 1 1 calc(50% - 10px);
}
@media (max-width: 580px) {
flex: 1 1 100%;
}
.avantage-stat {
margin-block: 25px 14px;
gap: 10px;
align-items: flex-end;
.avantage-stat-label {
font-size: 12px;
border-radius: 100vw;
padding: 2px 7px;
color: var(--blue-primary);
background-color: var(--white);
transform: translateY(-8px);
}
}
.avantage-text {
margin-bottom: 25px;
}
.avantage-img {
margin-block: 25px;
}
.btn {
max-width: 170px;
border-radius: 7px;
&:hover {
.icon {
background-color: var(--white);
}
}
}
&.bg-grey-text {
.avantage-stat .avantage-stat-label {
background-color: var(--blue-tertiary);
color: var(--white);
}
}
}
}
}
}
.carriere-jobs {
padding-inline: 14px;
&:not(:last-of-type) {
margin-bottom: clamp(30px, 5.07vw, 73px);
}
.jobs-container {
border-radius: 16px;
padding: clamp(30px, 5.07vw, 73px) 20px;
.jobs-heading {
position: relative;
.text-small {
margin-bottom: 20px;
@media (min-width: 581px) {
position: absolute;
}
sup {
position: relative;
top: 1px;
font-size: 10px;
padding-left: 10px;
opacity: .5;
}
}
.jobs-heading-wrapper {
max-width: 470px;
margin-inline: auto;
margin-bottom: clamp(40px, 6.94vw, 100px);
@media (min-width: 581px) and (max-width: 768px) {
margin-left: 110px;
}
@media (max-width: 580px) {
max-width: 100%;
}
h2 {
margin-bottom: 22px;
}
}
}
.job-list {
.job-item {
align-items: flex-start;
padding-block: 20px clamp(20px, 2.43vw, 35px);
border-top: 1px solid var(--grey-line);
@media (max-width: 580px) {
flex-direction: column;
gap: 20px;
}
.left {
align-items: flex-start;
@media (max-width: 991px) {
width: 200px;
flex-direction: column;
}
@media (max-width: 768px) {
width: 250px;
flex-shrink: 0;
}
@media (max-width: 580px) {
width: 100%;
}
.job-number {
flex: 0 0 60px;
@media (max-width: 991px) {
flex: 0 0 50px;
}
@media (max-width: 580px) {
flex: 0 0 30px;
}
}
.job-title {
@media (min-width: 991px) {
flex: 0 0 260px;
}
.job-title-labels {
padding-top: 12px;
gap: 10px;
.job-title-label {
padding: 5px 12px;
background-color: var(--blue-tertiary);
border-radius: 100vw;
}
}
}
}
.right {
gap: clamp(20px, 2.99vw, 43px);
align-items: flex-start;
@media (min-width: 581px) and (max-width: 991px) {
padding-left: 20px;
}
@media (max-width: 768px) {
flex-direction: column;
}
@media (max-width: 580px) {
width: 100%;
}
.job-description {
opacity: .5;
@media (min-width: 769px) {
flex: 0 1 346px;
}
}
.btn {
border-radius: 7px;
@media (min-width: 769px) {
flex: 0 0 200px;
}
@media (max-width: 768px) {
width: 170px;
}
@media (max-width: 580px) {
width: 100%;
}
&:hover {
background-color: var(--blue-tertiary);
color: var(--blue-primary);
}
}
}
}
}
}
}
}
.carriere-candidature {
.candidature-container {
padding: clamp(30px, 5.21vw, 75px) clamp(30px, 3.47vw, 50px);
@media (max-width: 768px) {
flex-direction: column;
gap: 20px;
}
.candidature-heading {
flex: 0 0 336px;
@media (max-width: 991px) {
flex-basis: 30%;
}
.candidature-heading-subtitle {
display: flex;
align-items: center;
gap: 16px;
color: var(--grey-text);
margin-top: 24px;
&::before {
content: '';
display: block;
width: 10px;
aspect-ratio: 1;
border-radius: 100%;
background-color: var(--blue-primary);
}
}
}
.candidature-form {
@media (min-width: 769px) {
flex: 0 1 906px;
}
}
}
}
.form-candidature {
label {
color: var(--blue-primary);
}
input:not([type="submit"], 
[type="checkbox"]), 
textarea {
background-color: var(--grey-bg);
&::placeholder {
text-transform: uppercase;
color: var(--blue-primary);
}
}
select {
font-size: clamp(16px, 1.67vw, 24px);
font-weight: 400;
line-height: clamp(21px, 2.01vw, 29px);
letter-spacing: -0.5px;
background-color: transparent;
color: var(--blue-primary);
border: 0;
border-bottom: 1px solid;
border-radius: 0;
background-image: url(//evvonow.com/wp-content/themes/evvo/assets/icons/arrow-down-blue.svg);
text-transform: uppercase;
margin-top: 0;
padding-inline: 0;
}
textarea {
background-image: url(//evvonow.com/wp-content/themes/evvo/assets/icons/arrow-multi-directionnal.svg);
background-size: 14px;
background-repeat: no-repeat;
background-position: calc(100% - 15px) calc(100% - 15px);
}
label.input-file {
text-transform: uppercase;
}
.consent-container {
@media (min-width: 581px) {
flex: 0 1 625px;
}
}
}
.single-service {
.service-banner-img {
padding-block: clamp(30px, 6.94vw, 100px) 0;
& > .row {
gap: 30px;
}
video {
max-width: 100%;
}
.service-banner-text-inner {
max-width: 1060px;
margin-inline: auto;
.service-banner-text-title {
padding-bottom: 28px;
}
.service-banner-text-content {
line-height: 1.25;
}
}
}
.service-banner-citations {
padding-block: clamp(30px, 6.94vw, 100px);
.service-banner-text-inner-citation {
--width-basis: calc(100% / 3);
flex-basis: calc(var(--width-basis) - 12px);
padding: clamp(20px, 2.431vw, 35px);
border-radius: 16px;
margin-top: 0;
@media (max-width: 768px) {
--width-basis: calc(100% / 2);
padding: 20px;
}
@media (max-width: 580px) {
--width-basis: 100%;
}
& > .row {
gap: 20px;
}
.quote-number {
color: #7695B8;
padding-top: 8px;
}
.quote-text {
color: #cf1731;
line-height: 1.25;
&.en .guillemets {
font-family: sans-serif;
}
@media (max-width: 580px) {
font-size: 18px;
}
}
}
}
.service-subservices {
padding-top: clamp(30px, 5.21vw, 75px);
.service-subservice-list {
grid-template-columns: repeat(3, 1fr);
gap: 25px;
@media (max-width: 768px) {
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
@media (max-width: 580px) {
grid-template-columns: repeat(1, 1fr);
}
.service-subservice-item {
display: flex;
flex-direction: column;
padding: clamp(16px, 2.43vw, 35px) clamp(16px, 1.389vw, 20px);
border-radius: 16px;
text-align: center;
.img-fluid {
max-width: clamp(80px, 8.333vw, 120px);
object-fit: contain;
margin-bottom: 20px;
padding: 10px;
background-color: var(--white);
border-radius: 16px;
}
.service-subservice-title {
margin-bottom: 30px;
line-height: 1.2;
}
.service-subservice-content {
line-height: 1.4;
}
}
}
}
.service-banner-img-2 {
padding-top: clamp(30px, 5.21vw, 75px);
figure {
padding-top: 16px;
background-color: var(--blue-primary);
}
& + .service-subservices-2 {
padding-top: clamp(30px, 6.94vw, 100px);
}
}
.service-text-img {
padding-bottom: clamp(30px, 3.82vw, 55px);
.container-fluid {
.container-inner {
position: relative;
padding-top: 22px;
margin-top: 30px;
border-top: 1px solid var(--grey-line);
padding-inline: 50px;
@media (max-width: 580px) {
padding-inline: 0;
}
.service-text-floating {
position: absolute;
top: 22px;
left: 0;
}
.container-wrapper {
max-width: 1060px;
margin-inline: auto;
&:not(:last-child) {
margin-bottom: clamp(20px, 3.472vw, 50px);
}
.service-text-img-subtitle {
margin-bottom: clamp(20px, 3.472vw, 50px);
@media (max-width: 768px) {
margin-bottom: 30px;
}
@media (max-width: 580px) {
padding-left: 50px;
}
}
& > .row {
gap: 20px;
@media (max-width: 768px) {
flex-direction: column-reverse;
row-gap: 20px;
}
}
.service-text-img-text {
@media (min-width: 769px) {
flex: 0 1 500px;
}
&.no-image {
flex-grow: 1;
}
.text-em-secondary {
padding-bottom: clamp(30px, 3.47vw, 50px);
}
.text-medium p:not(:last-child) {
margin-bottom: 1rem;
}
ul {
padding-left: 1rem;
li {
list-style: disc;
margin-bottom: 0.5rem;
&::marker {
font-size: 1.5rem;
color: var(--blue-primary);
}
}
}
.btn {
padding-block: 20px;
border-radius: 12px;
& > .row {
width: 100%;
}
}
}
.service-text-img-img {
flex: 0 1 300px;
@media (max-width: 768px) {
flex-basis: auto;
}
}
}
}
}
}
.service-cta {
padding-block: clamp(30px, 6.94vw, 100px);
@media (max-width: 768px) {
padding-bottom: 60px;
}
.service-cta-block {
border-radius: 3.47vw;
overflow: hidden;
@media (max-width: 768px) {
flex-direction: column;
}
.service-cta-left {
flex: 0 1 60%;
padding: clamp(20px, 6.94vw, 100px);
.section-title,
.section-description {
margin-bottom: clamp(20px, 2.78vw, 40px);
}
.btn {
padding: 12px clamp(12px, 1.39vw, 20px) 12px clamp(30px, 2.78vw, 40px);
&:hover {
background-color: var(--blue-tertiary);
span {
color: var(--white);
}
}
}
}
.service-cta-right {
flex: 0 1 40%;
figure {
height: 100%;
img {
height: 100%;
object-fit: cover;
object-position: center;
}
}
}
}
}
.service-subservices-2 {
padding-bottom: clamp(30px, 6.94vw, 100px);
.service-subservice-list {
.service-subservice-item {
position: relative;
padding-block: 1rem;
border-top: 1px solid var(--grey-line);
min-height: 120px;
@media (max-width: 768px) {
flex-direction: column;
}
.service-subservice-title {
flex: 0 1 400px;
}
.service-subservice-text {
flex: 0 1 500px;
}
.service-subservice-img {
flex: 0 1 300px;
border-radius: 16px;
overflow: hidden;
@media (max-width: 768px) {
padding-bottom: 50px;
}
}
.icon-rounded {
position: absolute;
left: 0;
bottom: calc(100% + 15px);
}
& > * {
@media (max-width: 768px) {
flex: 1 1 auto !important;
}
}
}
}
}
.faq {
padding-top: 0;
}
}
.suggest-list {
.suggest-item {
max-width: 676px;
@media (max-width: 768px) {
max-width: 100%;
}
.suggest-img {
position: relative;
figure {
display: block;
width: 100%;
height: 430px;
border-radius: 20px;
overflow: hidden;
background-color: var(--grey-line);
@media (max-width: 768px) {
max-height: 250px;
}
img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
}
.suggest-categories {
position: absolute;
left: 30px;
bottom: 30px;
gap: 5px;
.suggest-category {
display: block;
padding: 5px 15px;
border-radius: 100vw;
}
}
.icon-rounded {
position: absolute;
right: 30px;
bottom: 30px;
@media (max-width: 580px) {
bottom: initial;
top: 30px;
}
}
}
.suggest-content {
padding: 50px;
border-radius: 20px; .suggest-date {
gap: 16px;
&::before {
content: '';
display: block;
width: 10px;
aspect-ratio: 1;
background-color: var(--blue-primary);
border-radius: 100%;
}
}
}
}
}
.single-carriere-layout {
.page-heading {
.page-title br {
@media (max-width: 768px) {
display: none;
}
}
.container-fluid > .row {
@media (max-width: 768px) {
flex-direction: column;
}
.page-text {
@media (max-width: 768px) {
padding-top: 30px;
margin-inline: 0;
}
}
}
.carriere-categories {
gap: 10px;
padding-left: clamp(50px, 8.61vw, 124px);
@media (max-width: 991px) {
padding-left: 0;
}
.carriere-category {
padding: 5px 12px;
border-radius: 100vw;
}
}
.carriere-banner {
padding-top: clamp(18px, 2.92vw, 42px);
}
}
.carriere-why {
padding-block: clamp(30px, 4.86vw, 70px);
.carriere-why-list {
padding-top: clamp(30px, 3.47vw, 50px);
.carriere-why-item {
gap: 46px;
padding-block: 17px;
font-family: var(--font-title);
color: #242246;
border-top: 1px solid var(--white);
@media (max-width: 768px) {
flex-direction: column;
gap: 20px;
}
&:last-child {
border-bottom: 1px solid var(--white);
}
.carriere-why-img {
flex: 0 1 312px;
}
.carriere-why-title {
flex: 0 0 280px;
font-size: 21px;
line-height: 21px;
letter-spacing: -0.2px;
padding-top: 29px;
@media (max-width: 991px) {
flex-shrink: 1;
}
}
.carriere-why-text {
flex: 0 1 476px;
font-size: 17px;
font-weight: 400;
line-height: 29px;
letter-spacing: -0.2px;
padding-top: 29px;
}
.carriere-why-btn {
flex-grow: 1;
padding-top: 22px;
a {
padding: 10px;
border-radius: 10px;
}
}
& > * {
@media (max-width: 768px) {
flex: 1 1 100% !important;
padding-top: 0 !important;
}
}
}
}
}
.carriere-why-banner {
padding-block: clamp(30px, 3.47vw, 50px);
.carriere-why-banner-img {
display: block;
position: relative;
max-width: fit-content;
margin-inline: auto;
.carriere-why-banner-title {
position: absolute;
top: calc(50% + 25px);
left: 50%;
transform: translate(-50%, -50%);
max-width: 90%;
width: 1100px;
font-size: clamp(28px, 5.556vw, 80px);
font-weight: 300;
line-height: clamp(34px, 5.972vw, 86px);
@media (max-width: 580px) {
bottom: 20px;
}
}
}
}
.carriere-tabs {
padding-bottom: clamp(30px, 3.47vw, 50px);
.carriere-tabs-wrapper {
--inner-spacing: clamp(30px, 4.17vw, 60px);
--border-radius: 27px;
border-radius: var(--border-radius);
@media (max-width: 768px) {
--inner-spacing: 20px;
}
.carriere-tabs-navs {
position: relative;
flex: 0 1 540px;
background-color: #25539A;
padding: var(--inner-spacing);
border-top-left-radius: var(--border-radius);
border-bottom-left-radius: var(--border-radius);
@media (max-width: 580px) {
display: none;
}
.carriere-tabs-nav-list {
position: sticky;
top: 160px;
}
}
.carriere-tabs-nav-list,
.tabs-nav-mobile {
.carriere-tabs-nav-item {
background-color: var(--white);
border-radius: 7px;
padding: 6px 12px;
cursor: pointer;
transition: all 350ms linear;
&:not(:last-child) {
margin-bottom: 4px;
}
a {
color: var(--blue-primary);
}
&:hover,
&.active {
background-color: var(--blue-primary);
a {
color: var(--white);
}
}
}
}
.tabs-nav-mobile .carriere-tabs-nav-item {
color: var(--white) !important;
background-color: #25539A !important;
margin-bottom: 20px !important;
.icon-rounded {
transform: rotate(90deg);
}
@media (min-width: 581px) {
display: none;
}
}
.carriere-tabs {
flex: 1 0 60%;
padding: var(--inner-spacing);
.carriere-tab {
display: block;
scroll-margin-top: 160px;
&:not(:last-child) {
margin-bottom: 40px;
}
.carriere-tab-title {
font-size: clamp(24px, 2.15vw, 31px);
line-height: clamp(26px, 2.29vw, 33px);
margin-bottom: 30px;
gap: 1rem;
@media (max-width: 580px) {
margin-bottom: 10px;
}
}
.carriere-tab-contents {
.carriere-tab-content {
gap: 26px;
padding-block: 15px;
border-bottom: 1px solid var(--grey-line);
}
}
}
}
}
}
.carriere-values {
padding-bottom: clamp(30px, 5.07vw, 73px);
.about-value-slider {
padding-block: clamp(30px, 3.47vw, 50px);
@media (max-width: 768px) {
padding-bottom: 0;
}
}
.about-value-slide {
--inner-spacing: clamp(20px, 2.78vw, 40px);
min-height: 200px;
height: auto;
padding: 0;
background-color: var(--grey-text);
overflow: hidden;
@media (max-width: 580px) {
position: relative;
}
.about-value-slide-head {
flex: 1;
padding: var(--inner-spacing);
@media (max-width: 580px) {
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
.about-value-slide-subtitle {
padding-bottom: 12px;
}
}
.about-value-slide-content {
position: relative;
flex: 0 1 676px;
&::before {
content: none !important;
}
.value-slide-img {
height: 100%;
img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
}
.about-value-slide-number,
.slide-controllers {
position: absolute;
right: var(--inner-spacing);
}
.about-value-slide-number {
top: var(--inner-spacing);
}
.slide-controllers {
bottom: var(--inner-spacing);
}
}
}
&.single-carriere-values {
padding-top: 0;
.grid-listing {
grid-template-columns: repeat(4, 1fr);
@media (max-width: 991px) {
grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 768px) {
grid-template-columns: repeat(2, 1fr);
}
@media (max-width: 580px) {
grid-template-columns: repeat(1, 1fr);
}
}
}
}
}
.single-blog-layout {
background: linear-gradient(
to bottom,
var(--grey-bg) 0%,
var(--grey-bg) 25%,
var(--white) 25%,
var(--white) 100%
);
.page-heading {
.container {
max-width: 1023px;
}
.heading-wrapper {
max-width: 865px;
margin-inline: auto;
padding-block: clamp(50px, 9.24vw, 133px) 50px;
.heading-date::before {
content: '';
display: block;
width: 10px;
aspect-ratio: 1;
background-color: var(--blue-primary);
border-radius: 100%;
}
h1 {
margin-block: 14px clamp(20px, 2.43vw, 35px);
}
}
.heading-hero {
padding-bottom: clamp(30px, 6.94vw, 100px);
}
}
.single-content {
.container {
max-width: 883px;
}
.single-content-wysiwyg {
pre {
word-break: break-word;
white-space: pre-wrap;
overflow-wrap: break-word;
position: relative;
font-family: var(--font-title);
font-size: clamp(16px, 1.67vw, 24px);
line-height: clamp(21px, 2.01vw, 29px);
font-weight: 400;
margin: 0;
display: flex;
gap: 30px;
padding-block: 10px;
&:not(:first-child) {
margin-top: 30px;
}
&:not(:last-child) {
margin-bottom: 30px;
}
&::before,
&::after {
width: 8px;
background-color: var(--blue-primary);
}
&::before {
content: '';
flex-shrink: 0;
display: block;
height: auto;
}
&::after {
content: '';
position: absolute;
inset-block: 0;
width: 8px;
}
}
h2, h3, h4, h5, h6 {
&:not(:first-child) {
margin-top: clamp(20px, 1.74vw, 25px);
}
&:not(:last-child) {
margin-bottom: clamp(20px, 2.08vw, 30px);
}
}
p:not(:last-of-type) {
margin-bottom: 1rem;
}
ul {
padding-left: 1rem;
&:not(:last-child) {
margin-bottom: 1rem;
}
li {
padding-left: 5px;
&::marker {
content: '- ';
}
}
}
}
.singe-content-author {
padding-block: clamp(30px, 4.17vw, 60px);
gap: clamp(20px, 3.47vw, 50px);
.author-avatar {
display: grid;
place-items: center;
width: 170px;
aspect-ratio: 1;
border-radius: 100%;
overflow: hidden;
}
.author-infos {
display: grid;
row-gap: 6px;
.author-name {
font-size: clamp(20px, 1.67vw, 24px);
font-weight: 700;
line-height: clamp(28px, 2.22vw, 32px);
color: #333333;
}
}
}
}
.single-share {
.share-wrapper {
padding-block: 30px;
border-top: 1px solid var(--grey-line);
border-bottom: 1px solid var(--grey-line);
.share-btns {
.share-title {
margin-bottom: 10px;
}
}
}
}
}
.carriere-values {
padding-top: clamp(30px, 5.07vw, 73px);
p {
color: var(--grey-text);
}
.grid-listing {
margin-top: clamp(30px, 2.43vw, 45px);
}
}
.carriere-hiring {
padding-block: clamp(30px, 5.07vw, 73px);
.carriere-hiring-proccess {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 40px;
@media (max-width: 991px) {
grid-template-columns: repeat(1, 1fr);
}
.carriere-hirign-proccess-item {
.carriere-hirign-proccess-item-number {
flex: 0 0 140px;
min-height: 100px;
padding: 1rem;
height: 100%;
border-radius: 15px;
@media (max-width: 768px) {
flex-basis: 30%;
}
@media (max-width: 580px) {
flex-basis: 25%;
}
& > p {
font-size: 50px;
line-height: 1;
color: var(--white);
@media (max-width: 580px) {
font-size: 30px;
}
}
&.bg-orange {
background-color: rgba(255, 105, 0);
}
&.bg-green {
background-color: rgb(0, 128, 0);
}
}
.carriere-hirign-proccess-item-content {
flex-grow: 1;
padding: 24px;
height: 100%;
border-radius: 15px;
.carriere-hirign-proccess-item-title {
font-size: clamp(26px, 2.361vw, 34px);
font-weight: 600;
line-height: 1;
margin-bottom: 1rem;
}
}
}
.carriere-hirign-proccess-btn {
padding: 20px;
border-radius: 15px;
&:hover {
background-color: var(--blue-tertiary);
}
& > .row {
width: 100%;
gap: 1rem;
}
.btn-text {
font-weight: 600;
}
}
}
}
.subtitle-spacing {
margin-block: clamp(30px, 2.43vw, 45px);
&:last-child {
margin-bottom: 0;
}
}
.carriere-work {
padding-bottom: 0;
.carriere-values-subtitle:last-of-type {
margin-bottom: 0;
}
.grid-listing {
grid-template-columns: repeat(3, 1fr);
@media (max-width: 768px) {
grid-template-columns: repeat(2, 1fr);
}
@media (max-width: 580px) {
grid-template-columns: repeat(1, 1fr);
}
}
}
.grid-listing {
grid-template-columns: repeat(2, 1fr);
gap: 20px;
@media (max-width: 768px) {
grid-template-columns: repeat(1, 1fr);
}
.grid-item {
padding: clamp(20px, 2.78vw, 40px);
border-radius: 15px;
.grid-item-title {
font-weight: 500;
}
.grid-item-text {
color: var(--white);
margin-block: 20px;
}
}
}
.faq {
padding-block: clamp(30px, 3.68vw, 53px);
.faq-title {
margin-bottom: 25px;
}
.faq-list {
.faq-item {
&:not(:last-of-type) {
margin-bottom: 10px;
}
.faq-heading {
padding: 1rem 1.5rem;
border: 1px solid var(--grey-text);
border-radius: 5px;
cursor: pointer;
transition: background-color 350ms ease;
&:hover {
background-color: var(--grey-line);
}
p,
.faq-question {
transition: color 350ms ease;
}
.icon {
transform: rotate(0);
transition: all 350ms linear;
}
}
.faq-body {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows 0.3s ease-out;
.faq-body-inner {
overflow: hidden;
.faq-body-content {
max-width: 99.5%;
margin-inline: auto;
padding: 1.5rem;
border: 1px solid var(--grey-line);
p:not(:last-of-type) {
margin-bottom: 1rem;
}
ul {
padding-left: 1rem;
&:not(:last-of-type) {
margin-bottom: 1rem;
}
li {
list-style: disc;
ul li {
list-style-type: "- ";
}
}
}
}
}
}
&.open,
&[open] {
.faq-heading {
background-color: var(--blue-primary);
transition: background-color 350ms ease;
p,
.faq-question {
color: var(--white);
transition: color 350ms ease;
}
.icon {
background-color: var(--white);
transform: rotate(180deg);
transition: all 350ms linear;
}
}
.faq-body {
grid-template-rows: 1fr;
}
}
&.open .faq-heading {
pointer-events: none;
}
& > summary.faq-heading {
list-style: none;
&::marker {
content: '';
}
&::-webkit-details-marker {
display: none;
}
&:focus-visible {
outline: 2px solid var(--dark-blue);
outline-offset: 3px;
}
.faq-question {
min-width: 0;
}
} &:is(details) > .faq-body {
grid-template-rows: 1fr;
}
}
}
} @supports (interpolate-size: allow-keywords) and (transition-behavior: allow-discrete) {
.faq details.faq-item {
interpolate-size: allow-keywords;
}
.faq details.faq-item::details-content {
block-size: 0;
overflow: clip;
transition: block-size 0.3s ease-out, content-visibility 0.3s allow-discrete;
}
.faq details.faq-item[open]::details-content {
block-size: auto;
}
}
@media (prefers-reduced-motion: reduce) {
.faq details.faq-item::details-content,
.faq details.faq-item .faq-heading,
.faq details.faq-item .faq-question,
.faq details.faq-item .icon {
transition: none !important;
}
}
.table {
.table-col {
&:not(:last-of-type) {
border-right: 1px solid var(--grey-line);
}
.table-row {
padding-inline: 2rem;
.table-cell {
padding-block: 2rem;
border-bottom: 1px solid var(--grey-line);
}
}
.table-row-head {
background-color: var(--blue-primary);
border-radius: 20px;
.table-cell {
font-weight: bold;
border-bottom: none;
}
}
}
}
.post-type-archive-forfaits {
.page-heading.has-text {
.page-title {
@media (min-width: 1441px) {
max-width: 80%;
}
}
.page-text {
@media (min-width: 1441px) {
max-width: 50%;
}
}
}
.about-cta-2-cols {
padding-bottom: clamp(30px, 3.68vw, 53px);
@media (max-width: 768px) {
padding-top: 0;
}
.cta-2-cols-wrapper {
.col-right {
.btn {
max-width: 360px;
@media (max-width: 680px) {
max-width: 100%;
}
}
}
}
}
.forfaits-cta {
padding-block: 0 clamp(30px, 3.68vw, 53px);
}
}
.page-template-carriere {
.about-cta-2-cols {
padding-top: clamp(30px, 9.58vw, 138px);
@media (max-width: 768px) {
padding-bottom: clamp(30px, 9.58vw, 138px);
}
}
.carriere-values-1 {
.grid-listing {
grid-template-columns: repeat(4, 1fr);
@media (max-width: 991px) {
grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 768px) {
grid-template-columns: repeat(2, 1fr);
}
@media (max-width: 580px) {
grid-template-columns: repeat(1, 1fr);
}
}
}
}
html[lang="fr-FR"] .single-carriere-layout .carriere-why-banner .carriere-why-banner-img .carriere-why-banner-title {
top: initial;
bottom: 25px;
transform: translate(-50%);
@media (max-width: 1260px) {
top: 35%;
bottom: initial;
}
@media (max-width: 480px) {
position: initial;
transform: none;
max-width: 100%;
}
}
body.blog .header .header-left .header-logo .img-fluid:not(.duplicated) {
display: none;
}
.single-carriere-layout .job-facts {
padding-block: clamp(24px, 3.33vw, 48px);
}
.single-carriere-layout .job-facts dl {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
gap: 12px 32px;
margin: 0 0 24px;
}
.single-carriere-layout .job-facts dd {
margin: 0;
}