.s4-carrousel-evolution {
overflow: hidden;
max-width: 95%;
margin: 200px auto;
}
.s4-carrousel-evolution .item {
color: black;
position: relative;
}
.s4-carrousel-evolution .item .background {
height: 773px;
width: 749px;
border-radius: 100%;
position: absolute;
top: 0;
right: 0;
}
.s4-carrousel-evolution .item .background .img {
height: 100%;
width: 100%;
object-fit: cover;
border-radius: 100%;
z-index: 1;
}
.s4-carrousel-evolution .item .content {
height: 773px;
width: 749px;
z-index: 3;
display: flex;
flex-direction: column;
justify-content: center;
padding: 169px;
gap: 20px;
border-radius: 100%;
background-color: #f7f7f7;
}
.s4-carrousel-evolution .item .content .titre {
font-weight: 400;
font-size: 45px;
}
.s4-carrousel-evolution .item .content .texte {
font-weight: 300;
font-size: 14px;
display: flex;
gap: 20px;
flex-direction: column;
}
.s4-carrousel-evolution.owl-carousel .owl-nav,
.s4-carrousel-evolution.owl-loaded .owl-nav {
order: 2;
margin-top: -175px;
margin-bottom: 199px;
justify-content: start;
padding-left: 152px;
}
.s4-carrousel-evolution.owl-carousel .owl-dots,
.s4-carrousel-evolution.owl-loaded .owl-dots {
position: absolute;
bottom: 0;
align-self: center;
}
.s4-carrousel-evolution.owl-carousel .owl-dots .owl-dot,
.s4-carrousel-evolution.owl-loaded .owl-dots .owl-dot {
border: none;
background: transparent;
}
@media (max-width: 1670px) {
.s4-carrousel-evolution {
max-width: 82%;
}
}
@media (max-width: 1549px) {
.s4-carrousel-evolution {
max-width: 100%;
margin: 161px auto;
}
.s4-carrousel-evolution .item .content {
height: 580px;
width: 587px;
padding: 117px;
gap: 20px;
}
.s4-carrousel-evolution .item .background {
height: 580px;
width: 587px;
}
.s4-carrousel-evolution.owl-carousel .owl-nav,
.s4-carrousel-evolution.owl-loaded .owl-nav {
margin-top: -90px;
}
}
@media (max-width: 991px) {
.s4-carrousel-evolution {
margin: 161px 0;
}
.s4-carrousel-evolution .item .content {
height: 466px;
width: 451px;
padding: 68px 65px;
gap: 12px;
}
.s4-carrousel-evolution .item .content .titre {
font-size: 27px;
}
.s4-carrousel-evolution .item .content .texte {
gap: 4px;
font-size: 12px;
}
.s4-carrousel-evolution .item .background {
height: 466px;
width: 451px;
}
.s4-carrousel-evolution.owl-carousel .owl-nav,
.s4-carrousel-evolution.owl-loaded .owl-nav {
margin-bottom: 41px;
}
}
@media (max-width: 767px) {
.s4-carrousel-evolution {
margin: 66px 0;
}
.s4-carrousel-evolution .item .background {
right: unset;
left: 31px;
top: 6px;
}
.s4-carrousel-evolution .item .content {
height: 496px;
width: 506px;
}
.s4-carrousel-evolution.owl-carousel .owl-nav,
.s4-carrousel-evolution.owl-loaded .owl-nav {
margin: -90px auto 41px;
padding-left: 0;
}
}
@media (max-width: 575px) {
.s4-carrousel-evolution .item .background {
display: none;
}
.s4-carrousel-evolution .item .content {
width: 100%;
border-radius: 20px;
padding: 74px 20px 41px;
height: fit-content;
}
.s4-carrousel-evolution.owl-carousel .owl-nav,
.s4-carrousel-evolution.owl-loaded .owl-nav {
position: absolute;
margin: 0;
padding-left: 0;
top: 9px;
width: 100%;
z-index: 13;
display: flex;
justify-content: center;
}
}.s4-carrousel-texte {
margin: 0 0 100px;
}
.s4-carrousel-texte .item {
color: #ffffff !important;
position: relative;
background: #f7f7f7;
border-radius: 20px;
}
.s4-carrousel-texte .item .background {
height: 350px;
position: relative;
}
.s4-carrousel-texte .item .background .content {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 3;
display: flex;
flex-direction: column;
justify-content: end;
padding: 30px;
}
.s4-carrousel-texte .item .content .titre {
font-weight: 600;
color: #58595b;
font-size: 20px;
}
.s4-carrousel-texte .item .content .texte {
font-weight: 300;
color: #58595b;
}
@media (max-width: 1199px) {
.s4-carrousel-texte .item .background {
height: 259px;
}
}
@media (max-width: 575px) {
.s4-carrousel-texte .item .background .content {
justify-content: center;
}
}