@charset "UTF-8";
@charset "UTF-8";
@charset "UTF-8";
@charset "UTF-8";
@charset "UTF-8";



#homeContent {
overflow-x: hidden;
background: #1C1C31;
}
#homeContent:after {
content: "";
position: absolute;
inset: 0;
background: url(//seo-jungle.com/wp-content/themes/seojungle-theme/img/planetePhone.svg) no-repeat center center;
background-size: contain;
z-index: 1;
opacity: 0.1;
pointer-events: none;
left: -50%;
top: -12.5rem;
}
@media (min-width: 1024px) {
#homeContent:after {
top: -18.5185185185vh;
max-height: 965px;
background: url(//seo-jungle.com/wp-content/themes/seojungle-theme/img/Planet.webp) no-repeat center center;
left: 0;
opacity: 1;
}
}
@media (min-width: 1920px) {
#homeContent:after {
max-height: 1060px;
background-size: 100% auto;
}
}
@media (min-width: 1024px) {
#homeContent {
margin-top: 0;
}
}
#homeContent .wrapper > #firstContentWrapper {
position: relative;
overflow: hidden;
display: flex;
align-items: center;
flex-direction: column;
padding: 0rem 1.25rem;
min-height: 84vh;
}
@media (min-width: 1024px) {
#homeContent .wrapper > #firstContentWrapper {
max-width: 100vw;
align-items: unset;
padding: 0;
min-height: 665px;
}
}
#homeContent .wrapper > #firstContentWrapper .container {
width: -webkit-fill-available;
}
#homeContent .wrapper > #firstContentWrapper .hero-main-container {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
width: -webkit-fill-available;
margin: 0 auto;
max-width: 90rem;
padding: 2.5rem 1.875rem;
}
@media (min-width: 1024px) {
#homeContent .wrapper > #firstContentWrapper .hero-main-container {
flex-direction: row;
align-items: center;
max-width: 1430px;
margin: 0 auto;
padding: 0 2rem;
gap: 40px;
}
}
#homeContent .wrapper > #firstContentWrapper .hero-text-content {
flex: 1.2;
}
@media (min-width: 1024px) {
#homeContent .wrapper > #firstContentWrapper .hero-text-content {
min-width: 850px;
display: flex;
flex-direction: column;
gap: 90px;
}
}
#homeContent .wrapper > #firstContentWrapper .hero-text-content #topContent {
text-align: center;
}
@media (min-width: 1024px) {
#homeContent .wrapper > #firstContentWrapper .hero-text-content #topContent {
text-align: left;
}
}
#homeContent .wrapper > #firstContentWrapper .hero-text-content #topContent .titleContainer {
display: flex;
flex-direction: column;
gap: 0.625rem;
}
@media (min-width: 1024px) {
#homeContent .wrapper > #firstContentWrapper .hero-text-content #topContent .titleContainer {
gap: 0.9259259259vh;
}
}
#homeContent .wrapper > #firstContentWrapper .hero-text-content #topContent .titleContainer .main-heading {
margin: 0;
padding: 0;
line-height: 1.2;
display: flex;
flex-direction: column;
}
#homeContent .wrapper > #firstContentWrapper .hero-text-content #topContent .titleContainer .light-title {
display: block;
font-weight: 300;
text-transform: uppercase;
color: #fff;
font-size: clamp(1.25rem, 3vw, 2.3125rem);
letter-spacing: 0.375rem;
}
@media (min-width: 1024px) {
#homeContent .wrapper > #firstContentWrapper .hero-text-content #topContent .titleContainer .light-title {
font-size: 2.3125rem;
letter-spacing: 0.3125vw;
}
}
#homeContent .wrapper > #firstContentWrapper .hero-text-content #topContent .titleContainer .bold-title {
display: block;
font-weight: 700;
line-height: 1;
color: #fff;
font-size: 35px;
margin: 0.625rem 0;
}
@media (min-width: 1024px) {
#homeContent .wrapper > #firstContentWrapper .hero-text-content #topContent .titleContainer .bold-title {
font-size: 4.1875rem;
margin: 0.9259259259vh 0;
}
}
#homeContent .wrapper > #firstContentWrapper .hero-text-content #topContent .titleContainer .gamified-row {
display: flex;
align-items: center;
flex-wrap: wrap;
justify-content: center;
gap: 1.25rem;
margin-top: 0.625rem;
}
@media (min-width: 1024px) {
#homeContent .wrapper > #firstContentWrapper .hero-text-content #topContent .titleContainer .gamified-row {
gap: 1.0416666667vw;
margin-top: 0.9259259259vh;
justify-content: unset;
}
}
#homeContent .wrapper > #firstContentWrapper .hero-text-content #topContent .titleContainer .gamified-badge {
display: inline-block;
border-radius: 3.125rem;
background: linear-gradient(90deg, #FF4E00 0%, #FF6600 50%, #FF9500 100%);
font-weight: 400;
color: #fff;
text-transform: uppercase;
padding: 0.625rem 1.5625rem;
font-size: 1.25rem;
letter-spacing: 0.375rem;
}
@media (min-width: 1024px) {
#homeContent .wrapper > #firstContentWrapper .hero-text-content #topContent .titleContainer .gamified-badge {
padding: 0.9259259259vh 1.3020833333vw;
border-radius: 2.6041666667vw;
font-size: 1.25rem;
letter-spacing: 0.3125vw;
}
}
#homeContent .wrapper > #firstContentWrapper .hero-text-content #topContent .usersContainer {
display: flex;
align-items: center;
gap: 0.75rem;
margin-top: 0;
}
@media (min-width: 1024px) {
#homeContent .wrapper > #firstContentWrapper .hero-text-content #topContent .usersContainer {
gap: 0.625vw;
}
}
#homeContent .wrapper > #firstContentWrapper .hero-text-content #topContent .usersContainer .avatar-stack {
display: flex;
}
#homeContent .wrapper > #firstContentWrapper .hero-text-content #topContent .usersContainer .avatar-stack img {
object-fit: cover;
}
#homeContent .wrapper > #firstContentWrapper .hero-text-content #topContent .usersContainer .avatar-stack img.overlap {
margin-left: -0.75rem;
}
@media (min-width: 1024px) {
#homeContent .wrapper > #firstContentWrapper .hero-text-content #topContent .usersContainer .avatar-stack img.overlap {
margin-left: -0.625vw;
}
}
#homeContent .wrapper > #firstContentWrapper .hero-text-content #topContent .usersContainer p {
font-weight: 300;
color: rgba(255, 255, 255, 0.8);
font-size: 0.875rem;
}
@media (min-width: 1024px) {
#homeContent .wrapper > #firstContentWrapper .hero-text-content #topContent .usersContainer p {
font-size: 0.875rem;
}
}
#homeContent .wrapper > #firstContentWrapper #mainActions {
display: flex;
flex-direction: column;
gap: 1.875rem;
margin-top: 3.75rem;
max-width: 56.25rem;
}
@media (min-width: 1024px) {
#homeContent .wrapper > #firstContentWrapper #mainActions {
flex-direction: row;
align-items: flex-start;
gap: 1.5625vw;
margin-top: 5.5555555556vh;
max-width: 46.875vw;
}
}
#homeContent .wrapper > #firstContentWrapper #mainActions .actionBlock {
flex: 1;
}
#homeContent .wrapper > #firstContentWrapper #mainActions .actionBlock .desc {
color: #fff;
line-height: 1.4;
font-size: 1.0625rem;
margin-bottom: 1.5625rem;
}
@media (min-width: 1024px) {
#homeContent .wrapper > #firstContentWrapper #mainActions .actionBlock .desc {
font-size: 1.0625rem;
margin-bottom: 2.3148148148vh;
min-height: 4.6296296296vh;
}
}
#homeContent .wrapper > #firstContentWrapper #mainActions .vertical-divider {
display: none;
}
@media (min-width: 1024px) {
#homeContent .wrapper > #firstContentWrapper #mainActions .vertical-divider {
display: block;
width: 0.0520833333vw;
height: 10.1851851852vh;
background: rgba(255, 255, 255, 0.2);
align-self: center;
}
}
#homeContent .wrapper > #firstContentWrapper .fillButton, #homeContent .wrapper > #firstContentWrapper .outlineButton {
width: 100%;
padding: 1rem 1.875rem;
border-radius: 6.25rem;
font-size: 0.9375rem;
gap: 0.625rem;
display: inline-flex;
justify-content: center;
align-items: center;
border: none;
outline: none;
position: relative;
background: transparent;
color: #ffffff;
cursor: pointer;
transition: background 0.3s ease, color 0.3s ease;
}
#homeContent .wrapper > #firstContentWrapper .fillButton::before, #homeContent .wrapper > #firstContentWrapper .outlineButton::before {
content: "";
position: absolute;
inset: 0;
padding: 0.125rem;
border-radius: inherit;
background: linear-gradient(270deg, #c2fd70 0%, #21e273 100%);
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
transition: 0.3s ease;
z-index: -1;
}
#homeContent .wrapper > #firstContentWrapper .fillButton:hover, #homeContent .wrapper > #firstContentWrapper .outlineButton:hover {
background: linear-gradient(270deg, #c2fd70 0%, #21e273 100%);
color: #151525;
}
#homeContent .wrapper > #firstContentWrapper .fillButton:hover::before, #homeContent .wrapper > #firstContentWrapper .outlineButton:hover::before {
-webkit-mask: none;
mask: none;
}
#homeContent .wrapper > #firstContentWrapper .fillButton:hover > .iconContainer > i, #homeContent .wrapper > #firstContentWrapper .outlineButton:hover > .iconContainer > i {
color: #151525 !important;
}
#homeContent .wrapper > #firstContentWrapper .fillButton:hover > .iconContainer > .icon-hover:before, #homeContent .wrapper > #firstContentWrapper .outlineButton:hover > .iconContainer > .icon-hover:before {
background: #151525 !important;
}
#homeContent .wrapper > #firstContentWrapper .fillButton {
background: linear-gradient(270deg, #c2fd70 0%, #21e273 100%);
color: #151525;
}
#homeContent .wrapper > #firstContentWrapper .fillButton::before {
opacity: 0;
}
#homeContent .wrapper > #firstContentWrapper .fillButton:hover {
background: transparent;
color: #ffffff;
}
#homeContent .wrapper > #firstContentWrapper .fillButton:hover::before {
opacity: 1;
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
}
#homeContent .wrapper > #firstContentWrapper .fillButton:hover > .iconContainer > i {
color: white !important;
}
#homeContent .wrapper > #firstContentWrapper .fillButton:hover > .iconContainer > .icon-hover:before {
background: white !important;
}
#homeContent .wrapper > #firstContentWrapper .hero-visual-content {
flex: 1;
justify-content: center;
display: none;
margin-top: 2.5rem;
}
@media (min-width: 1024px) {
#homeContent .wrapper > #firstContentWrapper .hero-visual-content {
display: flex;
margin-top: 0rem;
justify-content: unset;
}
}
@media (min-width: 1024px) {
#homeContent .wrapper > #firstContentWrapper .hero-visual-content:after {
position: absolute;
content: "";
width: 750px;
height: 750px;
background: radial-gradient(52.57% 52.57% at 50% 50%, #3B3D60 0%, #1C1C31 100%);
border-radius: 50%;
z-index: 2;
right: -130px;
top: -0.333333vh;
}
}
#homeContent .wrapper > #firstContentWrapper .hero-visual-content .main-illustration {
width: 100%;
height: auto;
max-width: 31.25rem;
}
@media (min-width: 1024px) {
#homeContent .wrapper > #firstContentWrapper .hero-visual-content .main-illustration {
width: 750px;
position: relative;
z-index: 4;
max-width: 750px;
transform: scale(1.1);
}
}
#homeContent .wrapper .logo-carousel-wrapper {
background: #1C1C31;
overflow: hidden;
position: relative;
width: 100%;
height: 150px;
}
#homeContent .wrapper .logo-carousel-wrapper::before, #homeContent .wrapper .logo-carousel-wrapper::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
z-index: 2;
pointer-events: none;
width: 6.25rem;
}
@media (min-width: 1024px) {
#homeContent .wrapper .logo-carousel-wrapper::before, #homeContent .wrapper .logo-carousel-wrapper::after {
width: 5.2083333333vw;
}
}
#homeContent .wrapper .logo-carousel-wrapper::before {
left: 0;
background: linear-gradient(to right, #1C1C31 0%, transparent 100%);
}
#homeContent .wrapper .logo-carousel-wrapper::after {
right: 0;
background: linear-gradient(to left, #1C1C31 0%, transparent 100%);
}
#homeContent .wrapper .logo-carousel-wrapper .logo-carousel-track {
display: flex !important;
align-items: center;
width: max-content !important;
will-change: transform;
z-index: 3;
}
#homeContent .wrapper > #secondContentWrapper {
background-color: #26273B;
color: #ffffff;
padding: 3.75rem 1.25rem;
display: flex;
flex-direction: column;
align-items: center;
}
#homeContent .wrapper > #secondContentWrapper .imgsDesktop {
display: none;
}
#homeContent .wrapper > #secondContentWrapper .imgsMobile {
display: block;
position: relative;
width: 100%;
max-width: 28.125rem;
margin-bottom: 2.5rem;
}
#homeContent .wrapper > #secondContentWrapper .imgsDesktop .bg-illustration {
position: absolute;
transform: translateX(-65%);
z-index: 1;
mix-blend-mode: color-dodge;
width: 718px;
height: 781px;
top: -7%;
}
#homeContent .wrapper > #secondContentWrapper .imgsDesktop .main-device {
position: relative;
z-index: 2;
width: 100%;
display: block;
}
#homeContent .wrapper > #secondContentWrapper .imgsMobile > .bg-illustration {
position: absolute;
left: 50%;
transform: translateX(-50%);
width: 100%;
z-index: 1;
mix-blend-mode: color-dodge;
}
#homeContent .wrapper > #secondContentWrapper .imgsMobile > .main-device {
position: relative;
z-index: 2;
width: 100%;
display: block;
}
@media (min-width: 64rem) {
#homeContent .wrapper > #secondContentWrapper {
padding: 9.2592592593vh 0;
display: block;
position: relative;
z-index: 4;
}
}
@media (min-width: 64rem) {
#homeContent .wrapper > #secondContentWrapper .second-inner {
display: flex;
flex-direction: row-reverse;
align-items: center;
justify-content: space-between;
gap: 60px;
max-width: 1430px;
width: 100%;
margin: 0 auto;
padding: 0 2rem;
}
#homeContent .wrapper > #secondContentWrapper .second-inner .imgsMobile {
display: none;
}
#homeContent .wrapper > #secondContentWrapper .second-inner .imgsDesktop {
display: block;
flex: 1;
position: relative;
max-width: 600px;
}
}
#homeContent .wrapper > #secondContentWrapper .contentText {
width: 100%;
}
@media (min-width: 64rem) {
#homeContent .wrapper > #secondContentWrapper .contentText {
flex: 1;
max-width: 630px;
position: relative;
z-index: 0;
}
}
#homeContent .wrapper > #secondContentWrapper .contentText .frame {
padding: 0.75rem 1.125rem;
}
@media (min-width: 1024px) {
#homeContent .wrapper > #secondContentWrapper .contentText .frame {
padding: 1.1111111111vh 0.9375vw;
}
}
#homeContent .wrapper > #secondContentWrapper .contentText .frame .SEO-JUNGLE-qu-est-ce {
font-weight: 700;
line-height: 1.1;
font-size: 2rem;
margin: 0 0 1.25rem 0;
}
@media (min-width: 64rem) {
#homeContent .wrapper > #secondContentWrapper .contentText .frame .SEO-JUNGLE-qu-est-ce {
font-size: 50px;
margin: 0 0 1.8518518519vh 0;
}
}
#homeContent .wrapper > #secondContentWrapper .contentText .frame .une-place-de-march-d {
color: #00e676;
font-weight: 400;
font-size: 1.125rem;
margin-bottom: 1.5625rem;
}
@media (min-width: 64rem) {
#homeContent .wrapper > #secondContentWrapper .contentText .frame .une-place-de-march-d {
font-size: 40px;
margin-bottom: 2.3148148148vh;
}
}
#homeContent .wrapper > #secondContentWrapper .contentText .frame .text-wrapper {
line-height: 1.6;
color: #d1d1d1;
font-size: 0.9375rem;
margin-bottom: 1.875rem;
}
@media (min-width: 1024px) {
#homeContent .wrapper > #secondContentWrapper .contentText .frame .text-wrapper {
font-weight: 400;
font-size: 20px;
line-height: 28px;
letter-spacing: 0%;
vertical-align: middle;
color: #FFFFFF;
}
}
#homeContent .wrapper > #secondContentWrapper .contentText .frame .text-wrapper--bold {
font-weight: 700;
color: #ffffff;
text-decoration: underline;
}
#homeContent .wrapper > #secondContentWrapper .contentText .frame .checkList {
list-style: none;
padding: 0;
margin: 0 0 2.5rem 0;
}
@media (min-width: 1024px) {
#homeContent .wrapper > #secondContentWrapper .contentText .frame .checkList {
margin: 0 0 3.7037037037vh 0;
}
}
#homeContent .wrapper > #secondContentWrapper .contentText .frame .checkList .checkItem {
display: flex;
align-items: center;
margin-bottom: 0.75rem;
}
@media (min-width: 1024px) {
#homeContent .wrapper > #secondContentWrapper .contentText .frame .checkList .checkItem {
font-weight: 400;
font-size: 20px;
line-height: 40px;
vertical-align: middle;
color: #FFFFFF;
margin-bottom: unset;
}
}
#homeContent .wrapper > #secondContentWrapper .contentText .frame .checkList .checkItem img {
width: 1.125rem;
height: 1.125rem;
margin-right: 0.9375rem;
}
@media (min-width: 1024px) {
#homeContent .wrapper > #secondContentWrapper .contentText .frame .checkList .checkItem img {
width: 0.9375vw;
height: 0.9375vw;
margin-right: 0.78125vw;
}
}
#homeContent .wrapper > #secondContentWrapper .contentText .frame .checkList .checkItem span {
color: #ffffff;
font-size: 0.9375rem;
}
#homeContent .wrapper > #secondContentWrapper .contentText .frame .main-bouton {
text-decoration: none;
display: inline-block;
color: #ffffff;
font-weight: 700;
text-transform: uppercase;
transition: 0.3s ease;
border: none;
border-radius: 3.125rem;
padding: 1rem 2.1875rem;
font-size: 0.8125rem;
letter-spacing: 0.0625rem;
position: relative;
background: transparent;
z-index: 1;
}
#homeContent .wrapper > #secondContentWrapper .contentText .frame .main-bouton::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
padding: 0.125rem; background: linear-gradient(270deg, #C2FD70 0%, #21E273 100%);
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
z-index: -1;
}
@media (min-width: 1024px) {
#homeContent .wrapper > #secondContentWrapper .contentText .frame .main-bouton {
border-radius: 2.6041666667vw;
padding: 1.4814814815vh 1.8229166667vw;
font-size: 0.8125rem;
letter-spacing: 0.0520833333vw;
}
#homeContent .wrapper > #secondContentWrapper .contentText .frame .main-bouton::before {
padding: 0.1041666667vw; }
}
#homeContent .wrapper > #secondContentWrapper .contentText .frame .main-bouton:hover {
color: #23253a;
}
#homeContent .wrapper > #secondContentWrapper .contentText .frame .main-bouton:hover::before {
background: linear-gradient(270deg, #C2FD70 0%, #21E273 100%);
-webkit-mask: none;
mask: none;
}
#homeContent .wrapper > .avantages-list {
background-color: #1c1c31;
text-align: left;
display: flex;
flex-direction: column;
align-items: center;
padding: 3.125rem 1.25rem;
gap: 1.25rem;
}
@media (min-width: 64rem) {
#homeContent .wrapper > .avantages-list {
padding: 0;
height: 20.7407407407vh;
display: flex;
justify-content: center;
align-items: center;
}
#homeContent .wrapper > .avantages-list > * {
box-sizing: border-box;
}
#homeContent .wrapper > .avantages-list {
flex-direction: row;
max-width: 1430px;
margin: 0 auto;
width: 100%;
justify-content: space-between;
padding: 0 2rem;
gap: 0;
}
}
#homeContent .wrapper > .avantages-list .advantage-item {
display: flex;
flex-direction: column;
width: 100%;
gap: 0.3125rem;
max-width: 18.5rem;
}
@media (min-width: 1024px) {
#homeContent .wrapper > .avantages-list .advantage-item {
gap: 0.462962963vh;
max-width: 296px;
height: 99.75px;
}
}
#homeContent .wrapper > .avantages-list .advantage-item .advantage-title {
font-family: "sofia-pro", sans-serif;
font-weight: 700;
color: #21e273;
margin: 0;
font-size: 20px;
}
#homeContent .wrapper > .avantages-list .advantage-item .advantage-description {
font-family: "sofia-pro", Helvetica, sans-serif;
font-weight: 400;
color: #ffffff;
margin: 0;
font-size: 1rem;
}
#homeContent .wrapper > .avantages-list > .divider {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
max-width: 18.75rem;
}
@media (min-width: 1024px) {
#homeContent .wrapper > .avantages-list > .divider {
max-width: 15.625vw;
}
}
#homeContent .wrapper > .avantages-list > .divider .divider-img {
width: 100%;
object-fit: cover;
background: rgba(255, 255, 255, 0.2);
height: 0.0625rem;
}
@media (min-width: 1024px) {
#homeContent .wrapper > .avantages-list > .divider .divider-img {
height: 0.0925925926vh;
}
}
@media (min-width: 64rem) {
#homeContent .wrapper > .avantages-list > .divider {
width: 0.0260416667vw !important;
height: 10.5555555556vh;
max-width: none;
background: rgba(255, 255, 255, 0.2);
border: none;
}
#homeContent .wrapper > .avantages-list > .divider .divider-img {
width: 0.0260416667vw;
height: 99.75px;
}
}
#homeContent .wrapper > .concept-container {
position: relative;
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 3.75rem 1.875rem;
gap: 1.875rem;
background: linear-gradient(0deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.6) 100%), url(https://c.animaapp.com/z4AxCpeY/img/frame-244.png);
background-size: cover;
background-position: 20% 50%;
}
@media (min-width: 64rem) {
#homeContent .wrapper > .concept-container {
flex-direction: row;
justify-content: flex-end;
align-items: center;
padding: 11.1111111111vh 0;
gap: 0.5208333333vw;
background-image: url(https://c.animaapp.com/z4AxCpeY/img/frame-244.png);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
}
#homeContent .wrapper > .concept-container .content-wrapper {
display: flex;
flex-direction: column;
align-items: flex-start;
position: relative;
width: 100%;
gap: 1.875rem;
}
@media (min-width: 64rem) {
#homeContent .wrapper > .concept-container .content-wrapper {
gap: 2.7777777778vh;
max-width: 1430px;
width: 100%;
align-items: flex-end;
margin: 0 auto;
padding: 0 2rem;
}
}
#homeContent .wrapper > .concept-container .content-wrapper > div {
display: flex;
flex-direction: column;
gap: 30px;
}
#homeContent .wrapper > .concept-container .content-wrapper .header-group {
display: flex;
flex-direction: column;
align-items: flex-start;
align-self: stretch;
position: relative;
gap: 0.46875rem;
}
@media (min-width: 1024px) {
#homeContent .wrapper > .concept-container .content-wrapper .header-group {
gap: 0.6944444444vh;
}
}
#homeContent .wrapper > .concept-container .content-wrapper .header-group .title-main {
margin: 0;
font-family: "Sofia Pro", Helvetica, sans-serif;
font-weight: 700;
color: #ffffff;
font-size: 2.1875rem;
line-height: 2.75rem;
}
@media (min-width: 64rem) {
#homeContent .wrapper > .concept-container .content-wrapper .header-group .title-main {
font-size: 3.125rem;
line-height: 5.5555555556vh;
white-space: nowrap;
}
}
#homeContent .wrapper > .concept-container .content-wrapper .header-group .title-accent {
font-family: "Comix Loud", Helvetica, sans-serif;
font-weight: 400;
letter-spacing: 0;
background: linear-gradient(98.57deg, #FF4E00 -35.28%, #FF6600 3.79%, #FF9500 42.86%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
font-size: 1.6875rem;
line-height: 3.5625rem;
}
@media (min-width: 64rem) {
#homeContent .wrapper > .concept-container .content-wrapper .header-group .title-accent {
font-size: 1.6875rem;
line-height: 5.2777777778vh;
}
}
#homeContent .wrapper > .concept-container .content-wrapper .subtitle {
margin: 0;
align-self: stretch;
font-family: "Sofia Pro", Helvetica, sans-serif;
font-weight: 700;
color: #ffffff;
font-size: 1.5625rem;
line-height: 1.75rem;
}
@media (min-width: 64rem) {
#homeContent .wrapper > .concept-container .content-wrapper .subtitle {
font-size: 1.875rem;
line-height: 3.5185185185vh;
}
}
#homeContent .wrapper > .concept-container .content-wrapper .description {
margin: 0;
font-family: "Sofia Pro", Helvetica, sans-serif;
font-weight: 400;
color: #ffffff;
display: flex;
align-items: center;
font-size: 1.25rem;
line-height: 1.75rem;
}
@media (min-width: 64rem) {
#homeContent .wrapper > .concept-container .content-wrapper .description {
width: 27.5vw;
font-size: 1.25rem;
line-height: 2.5925925926vh;
}
}
#homeContent .wrapper > .comic-section {
position: relative;
overflow: hidden;
background-image: url(//seo-jungle.com/wp-content/themes/seojungle-theme/img/Frame-247.webp);
background-size: cover;
background-position: 50% 50%;
display: flex;
flex-direction: column-reverse;
align-items: flex-start;
padding: 3.75rem 1.875rem;
gap: 1.875rem;
}
@media (min-width: 64rem) {
#homeContent .wrapper > .comic-section {
height: 67.5vh;
padding: 0;
background-image: url(//seo-jungle.com/wp-content/themes/seojungle-theme/img/Frame-245.webp);
display: flex;
align-items: center;
justify-content: center;
}
}
#homeContent .wrapper > .comic-section .comic-inner {
display: contents;
}
@media (min-width: 64rem) {
#homeContent .wrapper > .comic-section .comic-inner {
display: flex;
flex-direction: row-reverse;
justify-content: space-between;
align-items: center;
max-width: 1430px;
width: 100%;
padding: 0 2rem;
margin: 0 auto;
}
}
#homeContent .wrapper > .comic-section .ellipse-bg {
position: absolute;
border-radius: 50%;
background: radial-gradient(50% 50% at 53% 50%, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0) 100%);
opacity: 0.2;
pointer-events: none;
width: 74.9375rem;
height: 74.9375rem;
top: -13.375rem;
left: 5.5625rem;
}
@media (min-width: 64rem) {
#homeContent .wrapper > .comic-section .ellipse-bg {
width: 62.4479166667vw;
height: 62.4479166667vw;
top: -15.3703703704vh;
left: 39.84375vw;
}
}
#homeContent .wrapper > .comic-section .comic-group {
position: relative;
z-index: 2;
width: 100%;
display: flex;
gap: 1rem;
}
@media (min-width: 1024px) {
#homeContent .wrapper > .comic-section .comic-group {
gap: 0.8333333333vw;
}
}
#homeContent .wrapper > .comic-section .comic-group .image-primary {
width: 100%;
object-fit: cover;
max-width: 21.25rem;
height: 28.4375rem;
}
@media (min-width: 1024px) {
#homeContent .wrapper > .comic-section .comic-group .image-primary {
max-width: 17.7083333333vw;
height: 42.1296296296vh;
}
}
#homeContent .wrapper > .comic-section .comic-group .image-secondary {
display: none;
}
@media (min-width: 64rem) {
#homeContent .wrapper > .comic-section .comic-group .image-secondary {
display: block;
width: 18.0729166667vw;
height: 42.2222222222vh;
object-fit: cover;
}
}
@media (min-width: 64rem) {
#homeContent .wrapper > .comic-section .comic-group {
width: 36.6145833333vw;
height: 42.2222222222vh;
}
}
#homeContent .wrapper > .comic-section .comic-content {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
align-items: flex-start;
width: 100%;
gap: 0.9375rem;
}
@media (min-width: 64rem) {
#homeContent .wrapper > .comic-section .comic-content {
width: 626px;
gap: 30px;
}
}
#homeContent .wrapper > .comic-section .comic-content .title-group {
display: flex;
flex-direction: column;
align-items: flex-start;
width: 100%;
gap: 0.46875rem;
}
@media (min-width: 1024px) {
#homeContent .wrapper > .comic-section .comic-content .title-group {
gap: 0.6944444444vh;
}
}
#homeContent .wrapper > .comic-section .comic-content .title-group .title-gradient {
margin: 0;
font-family: "Comix Loud", Helvetica, sans-serif;
font-weight: 400;
background: linear-gradient(98.57deg, #FF4E00 -35.28%, #FF6600 3.79%, #FF9500 42.86%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
font-size: 1.25rem;
line-height: 2.625rem;
}
@media (min-width: 64rem) {
#homeContent .wrapper > .comic-section .comic-content .title-group .title-gradient {
font-size: 27px;
line-height: 57px;
}
}
#homeContent .wrapper > .comic-section .comic-content .title-group .title-sub {
font-family: "Sofia Pro", Helvetica, sans-serif;
font-weight: 400;
color: #ffffff;
font-size: 1.25rem;
letter-spacing: 0.2625rem;
line-height: 1.125rem;
}
@media (min-width: 64rem) {
#homeContent .wrapper > .comic-section .comic-content .title-group .title-sub {
font-size: 32.49pxrem;
letter-spacing: 6.82px;
line-height: 90%;
}
}
#homeContent .wrapper > .comic-section .comic-content .description {
margin: 0;
font-family: "Sofia Pro", Helvetica, sans-serif;
font-weight: 400;
color: #ffffff;
font-size: 1.25rem;
line-height: 1.75rem;
max-width: 33rem;
}
@media (min-width: 1024px) {
#homeContent .wrapper > .comic-section .comic-content .description {
font-size: 20px;
line-height: 28px;
max-width: 528px;
}
}
#homeContent .wrapper > .comic-section .comic-content .main-bouton {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
text-decoration: none;
border-radius: 6.25rem;
width: -webkit-fill-available;
height: 3.125rem;
padding: 0rem 1.875rem;
max-width: 25rem;
}
#homeContent .wrapper > .comic-section .comic-content .main-bouton:hover {
background: linear-gradient(270deg, #c2fd70 0%, #21e273 100%);
color: #151525;
}
#homeContent .wrapper > .comic-section .comic-content .main-bouton:hover > .bouton-text {
color: #151525;
}
@media (min-width: 64rem) {
#homeContent .wrapper > .comic-section .comic-content .main-bouton {
width: fit-content;
height: 4.6296296296vh;
padding: 0 1.5625vw;
border-radius: 5.2083333333vw;
max-width: 20.8333333333vw;
}
}
#homeContent .wrapper > .comic-section .comic-content .main-bouton::before {
content: "";
position: absolute;
inset: 0;
padding: 0.125rem; border-radius: inherit;
background: linear-gradient(270deg, #c2fd70 0%, #21e273 100%);
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
}
@media (min-width: 1024px) {
#homeContent .wrapper > .comic-section .comic-content .main-bouton::before {
padding: 0.1041666667vw;
}
}
#homeContent .wrapper > .comic-section .comic-content .main-bouton .bouton-text {
font-family: "Sofia Pro", Helvetica, sans-serif;
font-weight: 600;
color: #ffffff;
text-align: center;
white-space: nowrap;
font-size: 0.9125rem;
}
#homeContent .wrapper > .characters-section {
position: relative;
overflow: hidden;
background-color: #1c1c31;
padding: 3.75rem 1.875rem;
}
@media (min-width: 64rem) {
#homeContent .wrapper > .characters-section {
height: 68.1481481481vh;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
}
}
#homeContent .wrapper > .characters-section .bg-expressions {
position: absolute;
z-index: 1;
opacity: 1;
pointer-events: none;
left: 50%;
transform: translateX(-50%);
height: auto;
top: 0;
width: 100%;
max-width: 22rem;
}
@media (min-width: 64rem) {
#homeContent .wrapper > .characters-section .bg-expressions {
top: 0;
left: 29.7395833333vw;
width: 72.2916666667vw;
max-width: none;
transform: none;
}
}
#homeContent .wrapper > .characters-section .characters-container {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
width: 100%;
gap: 1.875rem;
}
@media (min-width: 64rem) {
#homeContent .wrapper > .characters-section .characters-container {
flex-direction: row-reverse;
justify-content: space-between;
align-items: center;
gap: 2.7777777778vh;
max-width: 1430px;
padding: 0 2rem;
margin: 0 auto;
}
}
#homeContent .wrapper > .characters-section .character-illustration {
display: flex;
justify-content: center;
width: 100%;
overflow: hidden;
}
@media (min-width: 64rem) {
#homeContent .wrapper > .characters-section .character-illustration {
width: 28.3333333333vw;
overflow: visible;
}
}
#homeContent .wrapper > .characters-section .character-illustration .circle-gradient {
position: relative;
border-radius: 50%;
overflow: hidden;
background: linear-gradient(90deg, #ff4e00 0%, #ff6600 50%, #ff9500 100%);
display: flex;
align-items: center;
justify-content: center;
width: min(21.375rem, 85vw);
height: min(21.4375rem, 85vw);
}
@media (min-width: 64rem) {
#homeContent .wrapper > .characters-section .character-illustration .circle-gradient {
overflow: visible;
width: 28.3333333333vw;
height: 28.4375vw;
}
}
#homeContent .wrapper > .characters-section .character-illustration .circle-gradient .main-character {
width: 120%;
height: auto;
position: relative;
z-index: 3;
}
#homeContent .wrapper > .characters-section .character-illustration .main-character {
width: -webkit-fill-available;
}
#homeContent .wrapper > .characters-section .character-content {
display: flex;
flex-direction: column;
align-items: flex-start;
width: 100%;
gap: 1.5625rem;
}
@media (min-width: 64rem) {
#homeContent .wrapper > .characters-section .character-content {
width: 32.6041666667vw;
gap: 2.3148148148vh;
}
}
#homeContent .wrapper > .characters-section .character-content .title-gradient {
margin: 0;
font-family: "Comix Loud", Helvetica, sans-serif;
font-weight: 400;
background: linear-gradient(98.57deg, #FF4E00 -35.28%, #FF6600 3.79%, #FF9500 42.86%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
font-size: 1.25rem;
line-height: 2.625rem;
text-transform: uppercase;
}
@media (min-width: 64rem) {
#homeContent .wrapper > .characters-section .character-content .title-gradient {
font-size: 27px;
line-height: 57px;
}
}
#homeContent .wrapper > .characters-section .character-content .text-block {
display: flex;
flex-direction: column;
gap: 1.25rem;
}
@media (min-width: 1024px) {
#homeContent .wrapper > .characters-section .character-content .text-block {
gap: 1.8518518519vh;
}
}
#homeContent .wrapper > .characters-section .character-content .text-block p {
margin: 0;
font-family: "Sofia Pro", Helvetica, sans-serif;
font-weight: 400;
color: #ffffff;
font-size: 1.25rem;
line-height: 1.75rem;
}
@media (min-width: 64rem) {
#homeContent .wrapper > .characters-section .character-content .text-block p {
font-size: 20px;
line-height: 30px;
}
}
#homeContent .wrapper > .characters-section .character-content .main-bouton {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
text-decoration: none;
border-radius: 6.25rem;
height: 3.125rem;
padding: 0rem 1.875rem;
margin-top: 0.625rem;
}
#homeContent .wrapper > .characters-section .character-content .main-bouton:hover {
background: linear-gradient(270deg, #c2fd70 0%, #21e273 100%);
color: #151525;
}
#homeContent .wrapper > .characters-section .character-content .main-bouton:hover > .bouton-text {
color: #151525;
}
@media (min-width: 1024px) {
#homeContent .wrapper > .characters-section .character-content .main-bouton {
height: 4.6296296296vh;
padding: 0 1.5625vw;
border-radius: 5.2083333333vw;
margin-top: 0.9259259259vh;
}
}
#homeContent .wrapper > .characters-section .character-content .main-bouton::before {
content: "";
position: absolute;
inset: 0;
padding: 0.125rem; border-radius: inherit;
background: linear-gradient(270deg, #c2fd70 0%, #21e273 100%);
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
}
@media (min-width: 1024px) {
#homeContent .wrapper > .characters-section .character-content .main-bouton::before {
padding: 0.1041666667vw;
}
}
#homeContent .wrapper > .characters-section .character-content .main-bouton .bouton-text {
font-family: "Sofia Pro", Helvetica, sans-serif;
font-weight: 600;
color: #ffffff;
white-space: nowrap;
font-size: 1.0375rem;
}
.little {
padding: 0.25rem 0.875rem !important;
}
.appImageBlured {
filter: blur(1.5rem);
}
.comingSoonText {
color: white;
width: fit-content;
position: absolute;
top: 0rem;
right: 0rem;
text-transform: uppercase;
font-weight: 400;
font-size: 1rem;
transform: translate(-100%, 21rem);
}
@media (min-width: 1024px) {
.comingSoonText {
font-size: 2rem;
transform: translate(-100%, 150%);
}
}@font-face {
font-family: "comix loud";
src: url(//seo-jungle.com/wp-content/themes/seojungle-theme/fonts/Comix Loud.ttf) format("truetype");
font-weight: 400;
}
@font-face {
font-family: "sofia-pro";
src: url(//seo-jungle.com/wp-content/themes/seojungle-theme/fonts/Sofia Pro UltraLight Az.woff2) format("truetype");
font-weight: 100;
}
@font-face {
font-family: "sofia-pro";
src: url(//seo-jungle.com/wp-content/themes/seojungle-theme/fonts/Sofia Pro ExtraLight Az.woff2) format("truetype");
font-weight: 200;
}
@font-face {
font-family: "sofia-pro";
src: url(//seo-jungle.com/wp-content/themes/seojungle-theme/fonts/Sofia Pro Light Az.woff2) format("truetype");
font-weight: 300;
}
@font-face {
font-family: "sofia-pro";
src: url(//seo-jungle.com/wp-content/themes/seojungle-theme/fonts/Sofia Pro Regular Az.woff2) format("truetype");
font-weight: 400;
}
@font-face {
font-family: "sofia-pro";
src: url(//seo-jungle.com/wp-content/themes/seojungle-theme/fonts/Sofia Pro Medium Az.woff2) format("truetype");
font-weight: 500;
}
@font-face {
font-family: "sofia-pro";
src: url(//seo-jungle.com/wp-content/themes/seojungle-theme/fonts/Sofia Pro Semi Bold Az.woff2) format("truetype");
font-weight: 600;
}
@font-face {
font-family: "sofia-pro";
src: url(//seo-jungle.com/wp-content/themes/seojungle-theme/fonts/Sofia Pro Bold Az.woff2) format("truetype");
font-weight: 700;
}
@font-face {
font-family: "sofia-pro";
src: url(//seo-jungle.com/wp-content/themes/seojungle-theme/fonts/Sofia Pro Black Az.woff2) format("truetype");
font-weight: 800;
}
@font-face {
font-family: "sofia-pro";
src: url(//seo-jungle.com/wp-content/themes/seojungle-theme/fonts/Sofia Pro Black Az.woff2) format("truetype");
font-weight: 900;
}
:root {
--main-bg-color: #151525;
--second-bg-color: #26273B;
--main-border-color: #FF6600;
--second-border-color: #21E273;
--accent-border-color: #57597E;
--main-gradient-color: linear-gradient(0deg, #FF4E00, #FF6600, #FF9500);
--second-gradient-color: linear-gradient(0deg, #C2FD70, #21E273);
}
* {
margin: 0;
padding: 0;
font-family: "sofia-pro", sans-serif;
font-weight: 400;
color: white;
}
body {
display: flex;
flex-direction: column;
min-height: 100vh;
background: #1C1C31;
}
button {
cursor: pointer !important;
transition: 150ms;
display: flex;
align-items: center;
gap: 12px;
}
button:active {
transition: 150ms;
transform: scale(0.95);
}
.iconContainer {
position: relative;
width: 12px;
}
.iconContainer i {
position: absolute;
top: -8px;
right: 0;
transition: all 0.2s ease-in;
}
button:hover .iconContainer i {
position: absolute;
top: -8px;
right: -3px;
transition: all 0.2s ease-in;
}
.icon-default {
transition: opacity 0.3s, transform 0.3s;
}
.icon-hover:before {
content: "";
width: 0;
height: 2px;
display: block;
background: #ffffff;
position: absolute;
left: -2px;
top: 0;
opacity: 0;
transition: all 0.2s ease-in 0.1s;
}
button:hover .icon-hover:before {
content: "";
width: 14px;
height: 2px;
display: block;
background: #ffffff;
position: absolute;
left: -2px;
top: 0;
opacity: 1;
}
.dropdown-container {
display: flex;
gap: 8px;
align-items: center;
}
.dropbtn {
font-size: 15px;
font-weight: 600;
}
a {
text-decoration: none;
}
.dropdown-content-language {
font-size: 14px;
}
.iconContainer {
position: relative;
transition: transform 0.25s ease;
}
*:has(> .iconContainer) {
display: flex;
align-items: center;
justify-content: space-around;
}
*:hover > .iconContainer {
transform: translateX(3px);
}
.icon-hover::before {
left: -8px !important;
right: auto !important;
top: 50% !important;
transform: translateY(-50%);
transition: width 0.25s ease, opacity 0.25s ease;
background: currentColor !important;
}
.iconContainer,
.iconContainer *,
.icon-default,
.icon-default * {
color: inherit;
}
.icon-default {
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 0;
}
.icon-default svg {
display: block;
fill: currentColor;
}
.icon-default path {
fill: currentColor;
}
.pageWrapper > .pageTitle {
margin: auto;
}
@media (min-width: 1024px) {
.pageWrapper > .pageTitle {
max-width: 1290px;
margin: auto;
}
}
.pageWrapper > .pageTitle > h2 {
font-weight: 300;
font-size: 16px;
line-height: 90%;
vertical-align: middle;
text-transform: uppercase;
background: linear-gradient(270deg, #C2FD70 0%, #21E273 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.pageWrapper > .pageTitle > h1 {
font-family: "comix loud", sans-serif;
font-weight: 400;
font-size: 20px;
line-height: 191%;
text-align: center;
vertical-align: middle;
text-transform: uppercase;
background: linear-gradient(90deg, #FF4E00 0%, #FF6600 50%, #FF9500 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
@media (min-width: 1024px) {
.pageWrapper > .pageTitle > h1 {
font-size: 30px;
}
}
.pageWrapper > .wrapper {
width: 100%;
height: 100%;
background: #1C1C31;
padding: 64px 0;
}
.pageWrapper > .wrapper > .content {
margin: auto;
}
@media (min-width: 1024px) {
.pageWrapper > .wrapper > .content {
max-width: 1430px;
}
}
.pageWrapper > .specialWrapper {
width: 100%;
height: 100%;
padding: 64px 0;
}
.pageWrapper > .specialWrapper > .content {
max-width: 348px;
margin: auto;
}
@media (min-width: 1024px) {
.pageWrapper > .specialWrapper > .content {
max-width: 1290px;
}
}
.hs-richtext {
color: white !important;
}
.hsForm_adcf4ac7-e608-4f2d-bd05-384c474d01f3 > fieldset > div > label {
color: white !important;
}
.submitted-message {
color: white !important;
}
.shareSticky {
position: fixed;
display: none;
flex-direction: column;
gap: 18px;
left: 16px;
top: 15rem;
z-index: 999;
}
@media (min-width: 1024px) {
.shareSticky {
display: flex;
}
}
.shareSticky > a {
display: flex;
justify-content: center;
align-items: center;
background: transparent;
padding: 8.26px;
border-radius: 206.41px;
text-align: center;
color: #FFFFFF;
font-size: 22px;
cursor: pointer;
border: 1.03px solid #FFFFFF;
}
.shareSticky > a > i {
color: #FFFFFF;
}
header {
display: flex;
align-items: center;
margin: 0;
justify-content: space-between;
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 999;
background: transparent;
transition: background-color 0.3s ease, box-shadow 0.3s ease, padding 0.3s ease;
height: 40px;
padding: 0.75rem 1.25rem;
}
header .header-inner > #authWrapper {
order: 1;
width: auto;
gap: 0;
justify-content: flex-start;
}
header .header-inner > #authWrapper > .dropdown-container, header .header-inner > #authWrapper > a[id=loginButton], header .header-inner > #authWrapper > a[id=registerButton] {
display: none;
}
header .header-inner > #navWrapper {
order: 2;
gap: 0;
flex-grow: 1;
justify-content: center;
}
header .header-inner > #navWrapper > ul {
display: none;
}
header .header-inner > #navigationButton {
order: 3;
display: block;
margin-right: 0;
}
@media (min-width: 1024px) {
header {
width: 100%;
height: auto;
padding: 0;
justify-content: space-between;
transition: background-color 0.3s ease, box-shadow 0.3s ease, padding 0.3s ease;
}
header .header-inner > #authWrapper {
order: 0;
width: auto;
gap: 1.25vw;
justify-content: flex-end;
}
header .header-inner > #authWrapper > .dropdown-container {
display: flex;
}
header .header-inner > #authWrapper > a[id=loginButton], header .header-inner > #authWrapper > a[id=registerButton] {
display: block;
}
header .header-inner > #authWrapper > a.no-underline {
color: rgba(255, 255, 255, 0.5);
}
header .header-inner > #navWrapper {
order: 0;
gap: 3.3333333333vw;
flex-grow: 0;
justify-content: flex-start;
}
header .header-inner > #navWrapper > ul {
display: flex;
}
header .header-inner > #navigationButton {
order: 0;
display: none;
}
}
header .header-inner > #authWrapper > a[id=loginButton] {
text-transform: uppercase;
text-decoration: none;
font-weight: 600;
cursor: pointer;
font-size: 0.875rem;
}
@media (min-width: 1024px) {
header .header-inner > #authWrapper > a[id=loginButton] {
font-size: 0.875rem;
}
}
header .header-inner > #authWrapper > a[id=loginButton] > button {
background: linear-gradient(270deg, #C2FD70 0%, #21E273 100%);
color: #151525;
border: none;
font-weight: 600;
text-transform: uppercase;
border-radius: 1.5rem;
padding: 0.75rem 1.25rem;
font-size: 0.875rem;
}
@media (min-width: 1024px) {
header .header-inner > #authWrapper > a[id=loginButton] > button {
border-radius: 2.2222222222vh;
padding: 1.1111111111vh 1.0416666667vw;
font-size: 0.875rem;
}
}
header .header-inner > #authWrapper > a[id=registerButton] {
text-transform: uppercase;
text-decoration: underline;
color: rgba(255, 255, 255, 0.5);
font-weight: 600;
cursor: pointer;
font-size: 0.875rem;
}
@media (min-width: 1024px) {
header .header-inner > #authWrapper > a[id=registerButton] {
font-size: 0.875rem;
color: rgba(255, 255, 255, 0.5);
}
}
header .header-inner > #navWrapper {
width: -webkit-fill-available;
display: flex;
gap: 0;
}
@media (min-width: 1024px) {
header .header-inner > #navWrapper {
gap: 6.6666666667vw;
}
}
header .header-inner > #navWrapper > ul {
display: none;
}
header .header-inner > #navWrapper > ul > .current-menu-parent > p {
display: flex;
align-items: center;
gap: 0.5rem;
}
@media (min-width: 1024px) {
header .header-inner > #navWrapper > ul > .current-menu-parent > p {
gap: 0.4166666667vw;
}
}
header .header-inner > #navWrapper > ul > .current-menu-parent > p {
color: #C2FD70;
background: linear-gradient(270deg, #C2FD70 0%, #21E273 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-fill-color: transparent;
}
header .header-inner > #navWrapper > ul > .current-menu-parent > p > i {
color: #C2FD70;
background: linear-gradient(270deg, #C2FD70 0%, #21E273 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-fill-color: transparent;
}
@media (min-width: 1024px) {
header .header-inner > #navWrapper > ul {
list-style: none;
display: flex;
align-items: center;
gap: 3.3333333333vw;
}
}
header .header-inner > #navWrapper > ul > li {
font-weight: 600;
text-decoration: none;
cursor: context-menu;
position: relative;
font-size: 1.125rem;
}
header .header-inner > #navWrapper > ul > li > p {
display: flex;
align-items: center;
gap: 0.4166666667vw;
}
@media (min-width: 1024px) {
header .header-inner > #navWrapper > ul > li > p {
color: rgba(255, 255, 255, 0.5);
}
}
@media (min-width: 1024px) {
header .header-inner > #navWrapper > ul > li > p > i {
color: rgba(255, 255, 255, 0.5);
}
}
header .header-inner > #navWrapper > ul > li > a {
font-size: 1.125rem;
font-weight: 600;
text-decoration: none;
}
header .header-inner > #navWrapper > ul > li:hover > p, header .header-inner > #navWrapper > ul > li.is-open > p {
color: #21E273;
}
header .header-inner > #navWrapper > ul > li:hover > p > i, header .header-inner > #navWrapper > ul > li.is-open > p > i {
color: #21E273;
}
header .header-inner > #navWrapper > ul > li.is-open > .sub-menu {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateY(1);
}
@media (min-width: 1024px) {
header .header-inner > #navWrapper > ul > li.is-open > .sub-menu {
font-size: 1rem;
}
}
header .header-inner > #navWrapper > ul > li > .sub-menu {
box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.2509803922);
opacity: 0;
visibility: hidden;
transform: translateY(10px);
pointer-events: none;
transition: all 0.3s ease-out;
display: block;
position: absolute;
top: 100%;
left: 0;
z-index: 99;
background: #26273B;
border-radius: 0.5208333333vw;
padding: 1.6666666667vh 0.9375vw;
width: max-content;
}
header .header-inner > #navWrapper > ul > li > .sub-menu .mega-menu-layout {
display: flex;
gap: 0.9375vw;
}
header .header-inner > #navWrapper > ul > li > .sub-menu .mega-menu-col-1 {
display: flex;
flex-direction: column;
flex-shrink: 0;
gap: 0;
}
header .header-inner > #navWrapper > ul > li > .sub-menu .mega-menu-col-1 > a {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
text-decoration: none;
font-weight: 600;
border-radius: 0.2083333333vw;
min-width: 15.625vw;
transition: all 0.2s ease;
box-sizing: border-box;
color: rgba(255, 255, 255, 0.5);
padding: 1.1111111111vh 0.625vw;
}
@media (min-width: 1024px) {
header .header-inner > #navWrapper > ul > li > .sub-menu .mega-menu-col-1 > a {
font-size: 1rem;
}
}
header .header-inner > #navWrapper > ul > li > .sub-menu .mega-menu-col-1 > a::after {
content: "";
position: absolute;
left: 0;
right: 0;
height: 1px;
bottom: 0;
background: linear-gradient(270deg, #C2FD70 0%, #21E273 100%);
opacity: 0.3;
width: auto;
}
header .header-inner > #navWrapper > ul > li > .sub-menu .mega-menu-col-1 > a:last-child::after {
display: none;
}
header .header-inner > #navWrapper > ul > li > .sub-menu .mega-menu-col-1 > a > div {
display: flex;
align-items: center;
}
header .header-inner > #navWrapper > ul > li > .sub-menu .mega-menu-col-1 > a .menu-item-icon {
display: flex;
justify-content: center;
align-items: center;
width: 24px;
height: 24px;
padding: 6px;
margin-right: 12px;
vertical-align: middle;
background: #0F1419;
border-radius: 8px;
box-sizing: border-box;
transition: all 0.2s ease;
gap: 4px;
}
header .header-inner > #navWrapper > ul > li > .sub-menu .mega-menu-col-1 > a .menu-item-icon > svg {
width: 100%;
height: 100%;
}
header .header-inner > #navWrapper > ul > li > .sub-menu .mega-menu-col-1 > a .menu-item-icon > svg path, header .header-inner > #navWrapper > ul > li > .sub-menu .mega-menu-col-1 > a .menu-item-icon > svg g > path {
fill: rgba(255, 255, 255, 0.5);
transition: fill 0.2s ease;
}
header .header-inner > #navWrapper > ul > li > .sub-menu .mega-menu-col-1 > a > i.fa-arrow-right, header .header-inner > #navWrapper > ul > li > .sub-menu .mega-menu-col-1 > a > i.fa-chevron-right {
font-size: 0.875rem;
color: rgba(255, 255, 255, 0.5);
transition: all 0.2s ease;
}
header .header-inner > #navWrapper > ul > li > .sub-menu .mega-menu-col-1 > a > i.fa-arrow-right {
opacity: 0;
}
header .header-inner > #navWrapper > ul > li > .sub-menu .mega-menu-col-1 > a:hover {
color: #21E273;
}
header .header-inner > #navWrapper > ul > li > .sub-menu .mega-menu-col-1 > a:hover > div {
color: #21E273;
}
header .header-inner > #navWrapper > ul > li > .sub-menu .mega-menu-col-1 > a:hover .menu-item-icon {
background: linear-gradient(270deg, #C2FD70 0%, #21E273 100%);
}
header .header-inner > #navWrapper > ul > li > .sub-menu .mega-menu-col-1 > a:hover .menu-item-icon > svg path, header .header-inner > #navWrapper > ul > li > .sub-menu .mega-menu-col-1 > a:hover .menu-item-icon > svg g > path {
fill: #1C1C31;
}
header .header-inner > #navWrapper > ul > li > .sub-menu .mega-menu-col-1 > a:hover > i {
color: #21E273;
opacity: 1;
}
header .header-inner > #navWrapper > ul > li > .sub-menu .mega-menu-col-1 > a.is-active {
color: #21E273;
}
header .header-inner > #navWrapper > ul > li > .sub-menu .mega-menu-col-1 > a.is-active > div {
color: #21E273;
}
header .header-inner > #navWrapper > ul > li > .sub-menu .mega-menu-col-1 > a.is-active .menu-item-icon {
background: linear-gradient(270deg, #C2FD70 0%, #21E273 100%);
}
header .header-inner > #navWrapper > ul > li > .sub-menu .mega-menu-col-1 > a.is-active .menu-item-icon > svg path, header .header-inner > #navWrapper > ul > li > .sub-menu .mega-menu-col-1 > a.is-active .menu-item-icon > svg g > path {
fill: #1C1C31;
}
header .header-inner > #navWrapper > ul > li > .sub-menu .mega-menu-col-1 > a.is-active > i {
color: #21E273;
opacity: 1;
}
header .header-inner > #navWrapper > ul > li > .sub-menu .mega-menu-col-1 > a.current-menu-item, header .header-inner > #navWrapper > ul > li > .sub-menu .mega-menu-col-1 > a.current-menu-ancestor {
color: #21E273;
}
header .header-inner > #navWrapper > ul > li > .sub-menu .mega-menu-col-1 > a.current-menu-item > div, header .header-inner > #navWrapper > ul > li > .sub-menu .mega-menu-col-1 > a.current-menu-ancestor > div {
color: #21E273;
}
header .header-inner > #navWrapper > ul > li > .sub-menu .mega-menu-col-1 > a.current-menu-item .menu-item-icon, header .header-inner > #navWrapper > ul > li > .sub-menu .mega-menu-col-1 > a.current-menu-ancestor .menu-item-icon {
background: linear-gradient(270deg, #C2FD70 0%, #21E273 100%);
}
header .header-inner > #navWrapper > ul > li > .sub-menu .mega-menu-col-1 > a.current-menu-item .menu-item-icon > svg path, header .header-inner > #navWrapper > ul > li > .sub-menu .mega-menu-col-1 > a.current-menu-item .menu-item-icon > svg g > path, header .header-inner > #navWrapper > ul > li > .sub-menu .mega-menu-col-1 > a.current-menu-ancestor .menu-item-icon > svg path, header .header-inner > #navWrapper > ul > li > .sub-menu .mega-menu-col-1 > a.current-menu-ancestor .menu-item-icon > svg g > path {
fill: #1C1C31;
}
header .header-inner > #navWrapper > ul > li > .sub-menu .mega-menu-col-2 {
padding-left: 0.9375vw;
min-width: 13.0208333333vw;
}
header .header-inner > #navWrapper > ul > li > .sub-menu .mega-menu-col-2 .mega-menu-content-panel {
display: none;
flex-direction: column;
}
header .header-inner > #navWrapper > ul > li > .sub-menu .mega-menu-col-2 .mega-menu-content-panel.is-active {
display: flex;
}
header .header-inner > #navWrapper > ul > li > .sub-menu .mega-menu-col-2 .mega-menu-content-panel.sub-menu {
list-style: none;
padding: 0;
margin: 0;
gap: 0;
}
header .header-inner > #navWrapper > ul > li > .sub-menu .mega-menu-col-2 .mega-menu-content-panel li {
list-style: none;
padding: 0;
margin: 0;
position: relative;
}
header .header-inner > #navWrapper > ul > li > .sub-menu .mega-menu-col-2 .mega-menu-content-panel li::after {
content: "";
position: absolute;
left: 0;
right: 0;
height: 1px;
bottom: 0;
background: linear-gradient(270deg, #C2FD70 0%, #21E273 100%);
opacity: 0.3;
width: auto;
}
header .header-inner > #navWrapper > ul > li > .sub-menu .mega-menu-col-2 .mega-menu-content-panel li:last-child::after {
display: none;
}
header .header-inner > #navWrapper > ul > li > .sub-menu .mega-menu-col-2 .mega-menu-content-panel li > a {
display: flex;
justify-content: space-between;
align-items: center;
border-radius: 0.2083333333vw;
text-decoration: none;
color: #8E90B9;
font-weight: 200;
font-size: 0.875rem;
transition: all 0.2s ease;
padding: 1.1111111111vh 0.625vw;
}
header .header-inner > #navWrapper > ul > li > .sub-menu .mega-menu-col-2 .mega-menu-content-panel li > a > div {
display: flex;
align-items: center;
}
header .header-inner > #navWrapper > ul > li > .sub-menu .mega-menu-col-2 .mega-menu-content-panel li > a .menu-item-icon {
display: flex;
justify-content: center;
align-items: center;
width: 24px;
height: 24px;
padding: 6px;
margin-right: 12px;
vertical-align: middle;
background: #0F1419;
border-radius: 8px;
box-sizing: border-box;
transition: all 0.2s ease;
gap: 4px;
}
header .header-inner > #navWrapper > ul > li > .sub-menu .mega-menu-col-2 .mega-menu-content-panel li > a .menu-item-icon > svg {
width: 100%;
height: 100%;
}
header .header-inner > #navWrapper > ul > li > .sub-menu .mega-menu-col-2 .mega-menu-content-panel li > a .menu-item-icon > svg path, header .header-inner > #navWrapper > ul > li > .sub-menu .mega-menu-col-2 .mega-menu-content-panel li > a .menu-item-icon > svg g > path {
fill: rgba(255, 255, 255, 0.5);
transition: fill 0.2s ease;
}
header .header-inner > #navWrapper > ul > li > .sub-menu .mega-menu-col-2 .mega-menu-content-panel li > a > i.fa-arrow-right {
font-size: 0.75rem;
color: rgba(255, 255, 255, 0.5);
opacity: 0;
transition: all 0.2s ease;
}
header .header-inner > #navWrapper > ul > li > .sub-menu .mega-menu-col-2 .mega-menu-content-panel li > a:hover {
color: #21E273;
}
header .header-inner > #navWrapper > ul > li > .sub-menu .mega-menu-col-2 .mega-menu-content-panel li > a:hover > div {
color: #21E273;
}
header .header-inner > #navWrapper > ul > li > .sub-menu .mega-menu-col-2 .mega-menu-content-panel li > a:hover .menu-item-icon {
background: linear-gradient(270deg, #C2FD70 0%, #21E273 100%);
}
header .header-inner > #navWrapper > ul > li > .sub-menu .mega-menu-col-2 .mega-menu-content-panel li > a:hover .menu-item-icon > svg path, header .header-inner > #navWrapper > ul > li > .sub-menu .mega-menu-col-2 .mega-menu-content-panel li > a:hover .menu-item-icon > svg g > path {
fill: #1C1C31;
}
header .header-inner > #navWrapper > ul > li > .sub-menu .mega-menu-col-2 .mega-menu-content-panel li > a:hover > i.fa-arrow-right {
color: #21E273;
opacity: 1;
}
header .header-inner > #navWrapper > ul > li > .sub-menu .mega-menu-col-2 .mega-menu-content-panel li > a.current-menu-item {
color: #21E273;
}
header .header-inner > #navWrapper > ul > li > .sub-menu .mega-menu-col-2 .mega-menu-content-panel li > a.current-menu-item > div {
color: #21E273;
}
header .header-inner > #navWrapper > ul > li > .sub-menu .mega-menu-col-2 .mega-menu-content-panel li > a.current-menu-item .menu-item-icon {
background: linear-gradient(270deg, #C2FD70 0%, #21E273 100%);
}
header .header-inner > #navWrapper > ul > li > .sub-menu .mega-menu-col-2 .mega-menu-content-panel li > a.current-menu-item .menu-item-icon > svg path, header .header-inner > #navWrapper > ul > li > .sub-menu .mega-menu-col-2 .mega-menu-content-panel li > a.current-menu-item .menu-item-icon > svg g > path {
fill: #1C1C31;
}
header .header-inner > #navWrapper > ul > li > .sub-menu .mega-menu-col-2 .mega-menu-content-panel li > a.current-menu-item {
background: #1C1C31;
}
header .header-inner > #navWrapper > ul > li > .sub-menu .mega-menu-col-2 .mega-menu-content-panel li > a.current-menu-item > i.fa-arrow-right {
opacity: 1;
color: #21E273;
}
header .header-inner > #navigationButton {
display: block;
margin-right: 0.75rem;
}
@media (min-width: 1024px) {
header .header-inner > #navigationButton {
display: none;
}
}
header .header-inner > #authWrapper {
display: flex;
flex-direction: row;
align-items: center;
gap: 1.5rem;
justify-content: flex-end;
}
header .header-inner > #authWrapper > i {
cursor: pointer;
}
header .header-inner > #authWrapper > select {
background: #151525;
outline: none;
border: none;
display: none;
}
@media (min-width: 1024px) {
header .header-inner > #authWrapper > select {
display: block;
}
}
@media (min-width: 1024px) {
header .header-inner > #authWrapper {
display: flex;
width: auto;
list-style: none;
margin-left: 1.25vw;
}
}
header .header-inner > #authWrapper > li {
display: none;
}
@media (min-width: 1024px) {
header .header-inner > #authWrapper > li {
display: block;
list-style: none;
}
}
header .header-inner > #authWrapper > li > a {
text-decoration: none;
}
header .header-inner > #authWrapper > a {
text-transform: uppercase;
text-decoration: none;
color: rgba(255, 255, 255, 0.5);
font-weight: 600;
cursor: pointer;
font-size: 0.75rem;
}
@media (min-width: 1024px) {
header .header-inner > #authWrapper > a {
font-size: 0.875rem;
}
}
@media (min-width: 1024px) {
header .header-inner > #authWrapper > a:last-child {
text-decoration: underline;
width: max-content;
}
}
header .header-inner > #authWrapper > a > #loginButton {
display: none;
}
@media (min-width: 1024px) {
header .header-inner > #authWrapper > a > #loginButton {
display: flex;
border-radius: 3.6458333333vw;
background: linear-gradient(270deg, #C2FD70 0%, #21E273 100%);
padding: 1.2962962963vh 1.1458333333vw;
font-size: 0.875rem;
font-weight: 600;
color: #1C1C31;
text-transform: uppercase;
height: 35px;
}
}
header .header-inner > #authWrapper > a > #loginButton > .iconContainer {
display: none;
}
@media (min-width: 1024px) {
header .header-inner > #authWrapper > a > #loginButton > .iconContainer {
display: flex;
color: #1C1C31;
}
header .header-inner > #authWrapper > a > #loginButton > .iconContainer > i {
color: #1C1C31;
}
}
header .header-inner > #authWrapper > a > #loginButton > .iconContainer > .icon-hover:before {
content: "";
width: 0;
height: 2px;
display: block;
background: white !important;
position: absolute;
top: -2px;
left: -1px;
opacity: 0;
}
header .header-inner > #authWrapper > a > #loginButton:hover > .iconContainer > .icon-hover:before {
width: 14px;
background: #1C1C31 !important;
opacity: 1;
}
header.is-scrolled {
background: #1C1C31;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
}
.header-inner {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 0.75rem 1.25rem;
}
@media (min-width: 1024px) {
.header-inner {
max-width: 1430px;
margin: 0 auto;
padding: 1.25rem 2rem;
}
}
@media (min-width: 1024px) {
.is-scrolled .header-inner {
padding: 0.75rem 2rem;
}
}
#desktopLogo {
display: none;
}
@media (min-width: 1024px) {
#desktopLogo {
display: block;
}
}
#phoneLogo {
display: block;
width: 90px;
height: 28px;
}
@media (min-width: 1024px) {
#phoneLogo {
display: none;
}
}
#navigationMenu {
display: none;
}
#languageMenu {
display: none;
}
@media (min-width: 1024px) {
#languageMenu {
display: block;
}
}
.lang-item {
margin-top: 4rem;
list-style: none;
padding: 0 1.5rem;
}
@media (min-width: 1024px) {
.lang-item {
margin-top: 5.9259259259vh;
padding: 0 1.25vw;
}
}
.lang-item > a {
text-decoration: none;
font-size: 1.5rem;
}
@media (min-width: 1024px) {
.lang-item > a {
font-size: 1.5rem;
}
}
.menu-open {
opacity: 0;
animation: fadeIn 0.5s ease forwards;
position: fixed;
z-index: 9999;
height: 100vh;
width: -webkit-fill-available;
display: flex !important;
flex-direction: column;
background: linear-gradient(94.68deg, #26273B 24.8%, #282843 106.18%);
left: 0;
top: 0;
box-sizing: border-box;
}
.menu-open > .menu-header {
display: flex;
justify-content: space-between;
align-items: center;
background: #1C1C31;
flex-shrink: 0;
height: 4.125rem;
padding: 0 1.875rem;
}
.menu-open > .menu-header > .menu-title {
font-size: 1.1rem;
font-weight: 600;
color: rgba(255, 255, 255, 0.5);
text-transform: uppercase;
}
.menu-open > .menu-header > #closeMenu {
font-size: 1.5rem;
color: rgba(255, 255, 255, 0.5);
cursor: pointer;
}
.menu-open .menu-scrollable-content {
flex: 1;
overflow-y: auto;
overflow-x: hidden;
padding: 1.5rem 1.875rem;
}
.menu-open .menu-footer-static {
flex-shrink: 0;
padding-top: 1rem;
background: linear-gradient(94.68deg, #26273B 24.8%, #282843 106.18%);
}
.menu-open > a {
display: none;
}
.menu-open .menu-scrollable-content > .dropdownMobile {
margin: 0;
background: linear-gradient(94.68deg, #26273B 24.8%, #282843 106.18%);
border-radius: 8px;
font-size: 1rem;
position: relative;
}
.menu-open .menu-scrollable-content > .dropdownMobile > .dropbtn {
display: flex;
justify-content: space-between;
align-items: center;
text-transform: uppercase;
font-weight: 600;
}
.menu-open .menu-scrollable-content > .dropdownMobile > .dropbtn::after {
font-family: "Font Awesome 6 Free";
font-weight: 900;
font-size: 0.8rem;
}
.menu-open > select {
display: none;
}
.menu-open .menu-scrollable-content > ul.site__header__menu__phone {
list-style: none;
display: flex;
flex-direction: column;
align-items: flex-start;
width: 100%;
font-size: 1.125rem;
}
.menu-open .menu-scrollable-content > ul.site__header__menu__phone .menu-item-icon {
display: flex;
justify-content: center;
align-items: center;
width: 24px;
height: 24px;
padding: 6px;
margin-right: 12px;
vertical-align: middle;
background: #0F1419;
border-radius: 8px;
box-sizing: border-box;
transition: all 0.2s ease;
gap: 4px;
}
.menu-open .menu-scrollable-content > ul.site__header__menu__phone .menu-item-icon > svg {
width: 100%;
height: 100%;
}
.menu-open .menu-scrollable-content > ul.site__header__menu__phone .menu-item-icon > svg path, .menu-open .menu-scrollable-content > ul.site__header__menu__phone .menu-item-icon > svg g > path {
fill: rgba(255, 255, 255, 0.5);
transition: fill 0.2s ease;
}
.menu-open .menu-scrollable-content > ul.site__header__menu__phone .menu-item-icon {
margin-right: 0.5rem;
}
.menu-open .menu-scrollable-content > ul.site__header__menu__phone li {
position: relative;
}
.menu-open .menu-scrollable-content > ul.site__header__menu__phone li::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 1px;
background: linear-gradient(270deg, #C2FD70 0%, #21E273 100%);
opacity: 0.3;
}
.menu-open .menu-scrollable-content > ul.site__header__menu__phone > li {
display: flex;
flex-direction: column;
align-items: flex-start;
width: 100%;
padding: 0.93rem 0 0 0;
margin-top: 0.93rem;
}
.menu-open .menu-scrollable-content > ul.site__header__menu__phone > li:first-child {
margin-top: 0;
padding-top: 0;
}
.menu-open .menu-scrollable-content > ul.site__header__menu__phone > li:first-child::before {
display: none;
}
.menu-open .menu-scrollable-content > ul.site__header__menu__phone > li:last-child {
border-bottom: none;
}
.menu-open .menu-scrollable-content > ul.site__header__menu__phone > li > a {
text-decoration: none;
color: rgba(255, 255, 255, 0.9);
font-weight: 400;
font-size: 1.125rem;
}
.menu-open .menu-scrollable-content > ul.site__header__menu__phone > li > .menu-toggle {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
cursor: pointer;
}
.menu-open .menu-scrollable-content > ul.site__header__menu__phone > li > .menu-toggle > span, .menu-open .menu-scrollable-content > ul.site__header__menu__phone > li > .menu-toggle > a {
text-decoration: none;
color: rgba(255, 255, 255, 0.9);
display: flex;
align-items: center;
flex: 0 1 auto;
font-weight: 400;
font-size: 1.125rem;
}
.menu-open .menu-scrollable-content > ul.site__header__menu__phone > li > .menu-toggle > button.submenu-toggle {
background: none;
border: none;
padding: 0 0 0 0.5rem;
cursor: pointer;
color: rgba(255, 255, 255, 0.5);
display: flex;
align-items: center;
margin-left: auto;
}
.menu-open .menu-scrollable-content > ul.site__header__menu__phone > li > .menu-toggle > button.submenu-toggle > i {
font-size: 0.75rem;
}
.menu-open .menu-scrollable-content > ul.site__header__menu__phone > li > ul.sub-menu {
list-style: none;
display: flex;
flex-direction: column;
align-items: flex-start;
width: 100%;
font-size: 1rem;
overflow: hidden;
visibility: hidden;
opacity: 0;
max-height: 0;
padding-top: 0;
transition: all 0.3s ease-out;
}
.menu-open .menu-scrollable-content > ul.site__header__menu__phone > li > ul.sub-menu.sub-menu--is-open {
visibility: visible;
opacity: 1;
padding-top: 0.93rem;
}
.menu-open .menu-scrollable-content > ul.site__header__menu__phone > li > ul.sub-menu > li {
padding-top: 0.93rem;
width: 100%;
gap: 0;
}
.menu-open .menu-scrollable-content > ul.site__header__menu__phone > li > ul.sub-menu > li::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 1px;
background: linear-gradient(270deg, #C2FD70 0%, #21E273 100%);
opacity: 0.3;
}
.menu-open .menu-scrollable-content > ul.site__header__menu__phone > li > ul.sub-menu > li > .menu-toggle {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
cursor: pointer;
}
.menu-open .menu-scrollable-content > ul.site__header__menu__phone > li > ul.sub-menu > li > .menu-toggle > span, .menu-open .menu-scrollable-content > ul.site__header__menu__phone > li > ul.sub-menu > li > .menu-toggle > a {
text-decoration: none;
color: rgba(255, 255, 255, 0.9);
display: flex;
align-items: center;
flex: 0 1 auto;
padding-left: 1.875rem;
padding-bottom: 0.93rem;
font-weight: 600;
font-size: 1rem;
}
.menu-open .menu-scrollable-content > ul.site__header__menu__phone > li > ul.sub-menu > li > .menu-toggle > button.submenu-toggle {
background: none;
border: none;
padding: 0 0 0.93rem 0.5rem;
cursor: pointer;
color: rgba(255, 255, 255, 0.5);
display: flex;
align-items: center;
margin-left: auto;
}
.menu-open .menu-scrollable-content > ul.site__header__menu__phone > li > ul.sub-menu > li > .menu-toggle > button.submenu-toggle > i {
font-size: 0.75rem;
}
.menu-open .menu-scrollable-content > ul.site__header__menu__phone > li > ul.sub-menu > li > a {
text-decoration: none;
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
color: rgba(255, 255, 255, 0.9);
padding-bottom: 0.93rem;
font-weight: 600;
font-size: 1rem;
}
.menu-open .menu-scrollable-content > ul.site__header__menu__phone > li > ul.sub-menu > li > a > div {
padding-left: 1.875rem;
display: flex;
align-items: center;
}
.menu-open .menu-scrollable-content > ul.site__header__menu__phone > li > ul.sub-menu > li > a > i.fa-arrow-right {
color: rgba(255, 255, 255, 0.5);
font-size: 0.875rem;
}
.menu-open .menu-scrollable-content > ul.site__header__menu__phone > li > ul.sub-menu > li > ul.sub-menu {
list-style: none;
display: flex;
flex-direction: column;
align-items: flex-start;
width: 100%;
font-size: 0.875rem;
font-weight: 300;
overflow: hidden;
visibility: hidden;
opacity: 0;
max-height: 0;
padding-top: 0;
transition: all 0.3s ease-out;
}
.menu-open .menu-scrollable-content > ul.site__header__menu__phone > li > ul.sub-menu > li > ul.sub-menu.sub-menu--is-open {
visibility: visible;
opacity: 1;
}
.menu-open .menu-scrollable-content > ul.site__header__menu__phone > li > ul.sub-menu > li > ul.sub-menu > li {
padding-top: 0.93rem;
width: 100%;
gap: 0;
}
.menu-open .menu-scrollable-content > ul.site__header__menu__phone > li > ul.sub-menu > li > ul.sub-menu > li::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 1px;
background: linear-gradient(270deg, #C2FD70 0%, #21E273 100%);
opacity: 0.3;
}
.menu-open .menu-scrollable-content > ul.site__header__menu__phone > li > ul.sub-menu > li > ul.sub-menu > li > a {
text-decoration: none;
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
color: rgba(255, 255, 255, 0.9);
padding-bottom: 0.93rem;
font-weight: 300;
font-size: 0.875rem;
}
.menu-open .menu-scrollable-content > ul.site__header__menu__phone > li > ul.sub-menu > li > ul.sub-menu > li > a > div {
padding-left: 3.75rem;
display: flex;
align-items: center;
}
.menu-open .menu-scrollable-content > ul.site__header__menu__phone > li > ul.sub-menu > li > ul.sub-menu > li > a > i.fa-arrow-right {
color: rgba(255, 255, 255, 0.5);
font-size: 0.875rem;
}
.menu-open .menu-scrollable-content > ul.site__header__menu__phone > li.current-menu-item > .menu-toggle > span, .menu-open .menu-scrollable-content > ul.site__header__menu__phone > li.current-menu-item > .menu-toggle > a, .menu-open .menu-scrollable-content > ul.site__header__menu__phone > li.current-menu-item > a, .menu-open .menu-scrollable-content > ul.site__header__menu__phone > li.current-menu-parent > .menu-toggle > span, .menu-open .menu-scrollable-content > ul.site__header__menu__phone > li.current-menu-parent > .menu-toggle > a, .menu-open .menu-scrollable-content > ul.site__header__menu__phone > li.current-menu-parent > a, .menu-open .menu-scrollable-content > ul.site__header__menu__phone > li.current-menu-ancestor > .menu-toggle > span, .menu-open .menu-scrollable-content > ul.site__header__menu__phone > li.current-menu-ancestor > .menu-toggle > a, .menu-open .menu-scrollable-content > ul.site__header__menu__phone > li.current-menu-ancestor > a {
color: #21E273;
}
.menu-open .menu-scrollable-content > ul.site__header__menu__phone > li.current-menu-item > .menu-toggle > .menu-item-icon, .menu-open .menu-scrollable-content > ul.site__header__menu__phone > li.current-menu-item > a > .menu-item-icon, .menu-open .menu-scrollable-content > ul.site__header__menu__phone > li.current-menu-parent > .menu-toggle > .menu-item-icon, .menu-open .menu-scrollable-content > ul.site__header__menu__phone > li.current-menu-parent > a > .menu-item-icon, .menu-open .menu-scrollable-content > ul.site__header__menu__phone > li.current-menu-ancestor > .menu-toggle > .menu-item-icon, .menu-open .menu-scrollable-content > ul.site__header__menu__phone > li.current-menu-ancestor > a > .menu-item-icon {
background: linear-gradient(270deg, #C2FD70 0%, #21E273 100%);
}
.menu-open .menu-scrollable-content > ul.site__header__menu__phone > li.current-menu-item > .menu-toggle > .menu-item-icon > svg path, .menu-open .menu-scrollable-content > ul.site__header__menu__phone > li.current-menu-item > .menu-toggle > .menu-item-icon > svg g > path, .menu-open .menu-scrollable-content > ul.site__header__menu__phone > li.current-menu-item > a > .menu-item-icon > svg path, .menu-open .menu-scrollable-content > ul.site__header__menu__phone > li.current-menu-item > a > .menu-item-icon > svg g > path, .menu-open .menu-scrollable-content > ul.site__header__menu__phone > li.current-menu-parent > .menu-toggle > .menu-item-icon > svg path, .menu-open .menu-scrollable-content > ul.site__header__menu__phone > li.current-menu-parent > .menu-toggle > .menu-item-icon > svg g > path, .menu-open .menu-scrollable-content > ul.site__header__menu__phone > li.current-menu-parent > a > .menu-item-icon > svg path, .menu-open .menu-scrollable-content > ul.site__header__menu__phone > li.current-menu-parent > a > .menu-item-icon > svg g > path, .menu-open .menu-scrollable-content > ul.site__header__menu__phone > li.current-menu-ancestor > .menu-toggle > .menu-item-icon > svg path, .menu-open .menu-scrollable-content > ul.site__header__menu__phone > li.current-menu-ancestor > .menu-toggle > .menu-item-icon > svg g > path, .menu-open .menu-scrollable-content > ul.site__header__menu__phone > li.current-menu-ancestor > a > .menu-item-icon > svg path, .menu-open .menu-scrollable-content > ul.site__header__menu__phone > li.current-menu-ancestor > a > .menu-item-icon > svg g > path {
fill: #1C1C31;
}
.menu-open .menu-scrollable-content > ul.site__header__menu__phone > li > ul.sub-menu > li.current-menu-item > .menu-toggle > span, .menu-open .menu-scrollable-content > ul.site__header__menu__phone > li > ul.sub-menu > li.current-menu-item > .menu-toggle > a, .menu-open .menu-scrollable-content > ul.site__header__menu__phone > li > ul.sub-menu > li.current-menu-item > a, .menu-open .menu-scrollable-content > ul.site__header__menu__phone > li > ul.sub-menu > li.current-menu-ancestor > .menu-toggle > span, .menu-open .menu-scrollable-content > ul.site__header__menu__phone > li > ul.sub-menu > li.current-menu-ancestor > .menu-toggle > a, .menu-open .menu-scrollable-content > ul.site__header__menu__phone > li > ul.sub-menu > li.current-menu-ancestor > a {
color: #21E273;
}
.menu-open .menu-scrollable-content > ul.site__header__menu__phone > li > ul.sub-menu > li.current-menu-item > .menu-toggle > .menu-item-icon, .menu-open .menu-scrollable-content > ul.site__header__menu__phone > li > ul.sub-menu > li.current-menu-item > a > .menu-item-icon, .menu-open .menu-scrollable-content > ul.site__header__menu__phone > li > ul.sub-menu > li.current-menu-ancestor > .menu-toggle > .menu-item-icon, .menu-open .menu-scrollable-content > ul.site__header__menu__phone > li > ul.sub-menu > li.current-menu-ancestor > a > .menu-item-icon {
background: linear-gradient(270deg, #C2FD70 0%, #21E273 100%);
}
.menu-open .menu-scrollable-content > ul.site__header__menu__phone > li > ul.sub-menu > li.current-menu-item > .menu-toggle > .menu-item-icon > svg path, .menu-open .menu-scrollable-content > ul.site__header__menu__phone > li > ul.sub-menu > li.current-menu-item > .menu-toggle > .menu-item-icon > svg g > path, .menu-open .menu-scrollable-content > ul.site__header__menu__phone > li > ul.sub-menu > li.current-menu-item > a > .menu-item-icon > svg path, .menu-open .menu-scrollable-content > ul.site__header__menu__phone > li > ul.sub-menu > li.current-menu-item > a > .menu-item-icon > svg g > path, .menu-open .menu-scrollable-content > ul.site__header__menu__phone > li > ul.sub-menu > li.current-menu-ancestor > .menu-toggle > .menu-item-icon > svg path, .menu-open .menu-scrollable-content > ul.site__header__menu__phone > li > ul.sub-menu > li.current-menu-ancestor > .menu-toggle > .menu-item-icon > svg g > path, .menu-open .menu-scrollable-content > ul.site__header__menu__phone > li > ul.sub-menu > li.current-menu-ancestor > a > .menu-item-icon > svg path, .menu-open .menu-scrollable-content > ul.site__header__menu__phone > li > ul.sub-menu > li.current-menu-ancestor > a > .menu-item-icon > svg g > path {
fill: #1C1C31;
}
.menu-open .menu-scrollable-content > ul.site__header__menu__phone > li > ul.sub-menu > li > ul.sub-menu > li.current-menu-item > a {
color: #21E273;
}
.menu-open .menu-scrollable-content > ul.site__header__menu__phone > li > ul.sub-menu > li > ul.sub-menu > li.current-menu-item > a > i.fa-arrow-right {
color: #21E273;
}
.menu-open .menu-scrollable-content > ul.site__header__menu__phone > li > ul.sub-menu > li > ul.sub-menu > li.current-menu-item > a > .menu-item-icon, .menu-open .menu-scrollable-content > ul.site__header__menu__phone > li > ul.sub-menu > li > ul.sub-menu > li.current-menu-item > a > div > .menu-item-icon {
background: linear-gradient(270deg, #C2FD70 0%, #21E273 100%);
}
.menu-open .menu-scrollable-content > ul.site__header__menu__phone > li > ul.sub-menu > li > ul.sub-menu > li.current-menu-item > a > .menu-item-icon > svg path, .menu-open .menu-scrollable-content > ul.site__header__menu__phone > li > ul.sub-menu > li > ul.sub-menu > li.current-menu-item > a > .menu-item-icon > svg g > path, .menu-open .menu-scrollable-content > ul.site__header__menu__phone > li > ul.sub-menu > li > ul.sub-menu > li.current-menu-item > a > div > .menu-item-icon > svg path, .menu-open .menu-scrollable-content > ul.site__header__menu__phone > li > ul.sub-menu > li > ul.sub-menu > li.current-menu-item > a > div > .menu-item-icon > svg g > path {
fill: #1C1C31;
}
.menu-open .menu-footer-static > .menu-bottom-buttons {
padding: 0 1.875rem;
display: flex;
flex-direction: column;
gap: 1rem;
}
.menu-open .menu-footer-static > .menu-bottom-buttons > a {
padding: 1rem;
border-radius: 1.875rem;
text-align: center;
font-weight: 600;
text-transform: uppercase;
text-decoration: none;
font-size: 0.9rem;
}
.menu-open .menu-footer-static > .menu-bottom-buttons > .menu-button-register {
background: linear-gradient(270deg, #C2FD70 0%, #21E273 100%);
color: #151525;
}
.menu-open .menu-footer-static > .menu-bottom-buttons > .menu-button-login {
color: rgba(255, 255, 255, 0.5);
border: 1px solid transparent;
border-radius: 1.875rem;
background-image: linear-gradient(94.68deg, #26273B 24.8%, #282843 106.18%), linear-gradient(270deg, #C2FD70 0%, #21E273 100%);
background-origin: border-box;
background-clip: padding-box, border-box;
}
.menu-open .menu-footer-static > .menu-social-icons {
display: flex;
justify-content: center;
gap: 1.5rem;
padding: 1rem 0;
}
.menu-open .menu-footer-static > .menu-social-icons > a {
color: rgba(255, 255, 255, 0.5);
font-size: 1.125rem;
}
.menu-open .menu-footer-static > .menu-social-icons > a > i {
border: 1px solid #8E90B9;
border-radius: 50%;
padding: 0.5rem;
width: 1.25rem;
height: 1.25rem;
display: flex;
align-items: center;
justify-content: center;
}
.fa-chevron-down, .fa-chevron-up {
font-size: 0.875rem !important;
}
.menu-closed {
animation: fadeOut 0.5s ease forwards !important;
}
.dropdownMobile {
position: relative;
display: block;
font-size: 1.5rem;
margin: 4rem 1.5rem 0 1.5rem;
background: linear-gradient(94.68deg, #26273B 24.8%, #282843 106.18%);
border-radius: 0.5rem;
padding: 1rem 0px 0;
}
.dropdown {
position: relative;
display: none;
}
@media (min-width: 1024px) {
.dropdown {
display: inline-block;
text-transform: uppercase;
cursor: pointer;
font-size: 1.375rem;
}
}
.dropdown-content {
display: none;
position: absolute;
z-index: 99;
background: #1C1C31;
}
.dropdown-content-mobile {
flex-direction: column;
gap: 0.75rem;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
overflow: hidden;
visibility: hidden;
opacity: 0;
max-height: 0;
padding: 0.75rem 0px;
transition: all 0.3s ease-out;
}
.dropdown-content-mobile.dropdown-content-mobile--is-open {
visibility: visible;
opacity: 1;
}
.dropdown-content-mobile a {
padding: 0.5rem 0px;
text-decoration: none;
}
.dropdown-content a {
color: rgba(255, 255, 255, 0.5);
padding: 1.5rem 1.25rem;
text-decoration: none;
display: block;
}
@media (min-width: 1024px) {
.dropdown-content a {
padding: 2.2222222222vh 1.25vw;
}
}
.dropdown-container:hover .dropdown-content::before {
content: "";
position: absolute;
bottom: 100%;
left: 0;
width: 100%;
height: 14px;
background: transparent;
}
.dropdown-container:hover .dropdown-content {
background: #26273B;
box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.2509803922);
position: absolute;
display: flex;
flex-direction: column;
padding: 12px 12px;
gap: 8px;
transform: translate(0, 0);
list-style: none;
z-index: 99;
margin-top: 14px;
border-radius: 4px;
}
.dropdown-container:hover .dropdown-content > a {
padding: 0 !important;
display: flex;
align-items: center;
gap: 8px;
}
@keyframes fadeIn {
from {
opacity: 0;
left: -100%;
}
to {
opacity: 1;
left: 0;
}
}
@keyframes fadeOut {
from {
opacity: 1;
left: 0;
}
to {
opacity: 0;
left: -100%;
display: none;
}
} .language-flag {
width: 20px;
height: 12px;
margin-right: 8px;
vertical-align: middle;
border-radius: 2px;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
}
@media (min-width: 1024px) {
.language-flag {
width: 1.0416666667vw;
height: 1.1111111111vh;
margin-right: 0.4166666667vw;
border-radius: 0.1041666667vw;
box-shadow: 0 0 0.1851851852vh rgba(0, 0, 0, 0.3);
}
}
.dropbtn {
display: flex;
align-items: center;
}
.dropbtn > div {
display: flex;
align-items: center;
}
.dropdown-content-language,
.dropdown-content-mobile a {
padding-left: 1.875rem;
display: flex;
align-items: center;
}
.dropdown-content-language {
padding-left: 0 !important;
}
.current_page_item > a > div {
display: flex;
align-items: center;
gap: 0.5rem;
color: #C2FD70;
background: linear-gradient(270deg, #C2FD70 0%, #21E273 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-fill-color: transparent;
}
.current_page_item > a > div > i {
color: #C2FD70;
background: linear-gradient(270deg, #C2FD70 0%, #21E273 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-fill-color: transparent;
}
.current_page_item > a > i {
color: #C2FD70;
background: linear-gradient(270deg, #C2FD70 0%, #21E273 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-fill-color: transparent;
}
#input_12_1, #input_11_1, #input_10_1, #input_9_1, #input_3_1, #newsLetterInput input {
border: none;
background: #FFFFFF;
color: #000000;
border-radius: 1.5rem;
padding: 0.625rem;
}
@media all and (min-width: 992px) {
#input_12_1, #input_11_1, #input_10_1, #input_9_1, #input_3_1, #newsLetterInput input {
border-radius: 1.25vw;
padding: 0.9259259259vh 0.5208333333vw;
}
}
#gform_wrapper_12 #gform_submit_button_12, #gform_wrapper_11 #gform_submit_button_11, #gform_wrapper_10 #gform_submit_button_10, #gform_wrapper_9 #gform_submit_button_9, #gform_wrapper_3 #gform_submit_button_3 {
background: transparent !important;
color: #8E90B9 !important;
font-weight: bold;
transition: all 0.3s ease;
font-size: 1rem;
padding: 0.25rem 0.75rem !important;
border-radius: 6.25rem;
border: 1px solid #21E273;
}
@media all and (min-width: 992px) {
#gform_wrapper_12 #gform_submit_button_12, #gform_wrapper_11 #gform_submit_button_11, #gform_wrapper_10 #gform_submit_button_10, #gform_wrapper_9 #gform_submit_button_9, #gform_wrapper_3 #gform_submit_button_3 {
font-size: 1rem;
padding: 0.3703703704vh 0.625vw !important;
border-radius: 5.2083333333vw;
border: 0.0520833333vw solid #21E273;
}
}
.socialContainer > a, .containerMedias > .fillButton, .footerContent {
display: flex;
justify-content: center;
align-items: center;
}
.footerBackground {
position: relative;
background: #1C1C31;
width: -webkit-fill-available;
bottom: 0;
display: flex;
flex-direction: column;
align-items: center;
padding: 0 1.25rem 0.75rem;
}
@media all and (min-width: 992px) {
.footerBackground {
max-width: 1430px;
margin: 0 auto;
}
}
.site__footer {
display: flex;
flex-direction: column;
justify-content: center;
gap: 1rem;
margin: 1rem 0;
}
@media all and (min-width: 992px) {
.site__footer {
margin: 1.4814814815vh auto;
flex-direction: row;
gap: 4.75vw;
padding: 0;
width: -webkit-fill-available;
}
}
.imgContainer {
text-align: center;
}
.footerWrapper {
display: flex;
flex-direction: column;
width: 100%;
}
.footerContent {
justify-content: space-between;
flex-direction: column;
gap: 1.5rem;
}
@media all and (min-width: 992px) {
.footerContent {
gap: 2.2222222222vh;
flex-direction: row;
justify-content: center;
}
}
#newsLetterInput {
position: relative;
width: 100%;
}
#newsLetterInput > button {
position: absolute;
background: transparent;
color: #000000;
right: 0.5rem;
top: 50%;
transform: translateY(-50%);
border: 1px solid #FF4E00;
border-radius: 1.5rem;
padding: 0.25rem 0.875rem;
font-size: 0.9375rem;
}
@media all and (min-width: 992px) {
#newsLetterInput > button {
transform: none;
top: 0.5555555556vh;
right: -0.625vw;
border: 0.0520833333vw solid #FF4E00;
border-radius: 1.25vw;
padding: 0.3703703704vh 0.7291666667vw;
font-size: 0.9375rem;
}
}
#newsLetterInput > button > div > i, #newsLetterInput > button > div > div {
color: #000000;
}
#newsLetterInput > button > div > .icon-hover::before {
background: #000000;
left: -1px;
top: -2px;
}
@media all and (min-width: 992px) {
#newsLetterInput > button > div > .icon-hover::before {
left: -0.0520833333vw;
top: -0.1851851852vh;
}
}
#newsLetterInput input {
width: 100%;
padding: 0.625rem 0;
}
@media all and (min-width: 992px) {
#newsLetterInput input {
padding: 1.1111111111vh 0 1.1111111111vh 0.9375vw;
}
}
#newsLetterText {
font-weight: 600;
text-transform: uppercase;
color: #8E90B9;
opacity: 0.8;
line-height: 1.75rem;
font-size: 0.75rem;
letter-spacing: 1px;
}
@media all and (min-width: 992px) {
#newsLetterText {
line-height: 2.5925925926vh;
font-size: 0.75rem;
letter-spacing: 0.0520833333vw;
min-width: 10vw;
}
}
#newsLetterDiv {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
}
@media all and (min-width: 992px) {
#newsLetterDiv {
gap: 0.7407407407vh;
max-width: 22.9166666667vw;
align-items: unset;
}
}
.containerMedias {
display: none;
flex-direction: column;
align-items: center;
gap: 1rem;
}
@media all and (min-width: 992px) {
.containerMedias {
display: flex;
gap: 1.4814814815vh;
}
}
.containerMedias.mobile {
display: flex;
}
@media all and (min-width: 992px) {
.containerMedias.mobile {
display: none;
}
}
.containerMedias > .fillButton {
opacity: 1;
box-sizing: border-box;
height: 2.2rem;
gap: 0.75rem;
border-radius: 4.375rem;
width: 9.75rem;
padding: 0.125rem 0.375rem;
}
@media all and (min-width: 992px) {
.containerMedias > .fillButton {
height: 3.2407407407vh;
gap: 0.625vw;
border-radius: 3.6458333333vw;
width: 8.125vw;
padding: 0.1851851852vh 0.3125vw;
}
}
.socialContainer {
display: flex;
flex-direction: row;
gap: 1.25rem;
}
@media all and (min-width: 992px) {
.socialContainer {
gap: 1.0416666667vw;
}
}
.socialContainer > a {
background: transparent;
text-align: center;
color: #FFFFFF;
cursor: pointer;
padding: 0.14rem;
border-radius: 50%;
font-size: 1.375rem;
border: 1px solid #FFFFFF;
width: 2.375rem;
height: 2.375rem;
}
@media all and (min-width: 992px) {
.socialContainer > a {
padding: 0.2092592593vh;
border-radius: 10.7505208333vw;
font-size: 1.375rem;
border: 0.0536458333vw solid #FFFFFF;
width: 1.9791666667vw;
height: 1.9791666667vw;
}
}
.socialContainer > a > i {
color: #FFFFFF;
}
.site-footer-main-menu {
display: none;
flex-direction: row;
position: relative;
}
@media all and (min-width: 992px) {
.site-footer-main-menu {
display: flex;
}
}
.site-footer-main-menu > .menu-item {
position: relative;
list-style: none;
}
@media all and (min-width: 992px) {
.site-footer-main-menu > .menu-item {
padding: 0 0.78125vw;
}
}
.site-footer-main-menu > .menu-item:after {
position: absolute;
content: "";
background: #8E90B9;
opacity: 0.7;
top: 0;
right: 0;
}
@media all and (min-width: 992px) {
.site-footer-main-menu > .menu-item:after {
height: 100%;
width: 0.0520833333vw;
}
}
.site-footer-main-menu > .menu-item > a {
font-weight: 600;
text-transform: uppercase;
color: #8E90B9;
}
@media all and (min-width: 992px) {
.site-footer-main-menu > .menu-item > a {
font-size: 0.6875rem;
line-height: 28px;
letter-spacing: 4px;
}
}
.site-footer-main-menu > .menu-item > .sub-menu > .menu-item {
list-style: none;
}
.site-footer-main-menu > .menu-item > .sub-menu > .menu-item > a {
font-weight: 300;
color: #8E90B9;
}
@media all and (min-width: 992px) {
.site-footer-main-menu > .menu-item > .sub-menu > .menu-item > a {
font-size: 1rem;
line-height: 28px;
}
}
.footerContainer {
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: center;
gap: 1.125rem;
}
@media all and (min-width: 992px) {
.footerContainer {
width: 100%;
flex-direction: row;
flex-wrap: nowrap;
gap: 18px;
}
}
.menu-footer-container,
.menu-bas-de-page-container,
.menu-footer-it-container,
.menu-footer-de-container,
.menu-footeres-container {
display: flex;
list-style: none;
font-weight: 600;
width: 100%;
gap: 1.875rem;
}
@media all and (min-width: 992px) {
.menu-footer-container,
.menu-bas-de-page-container,
.menu-footer-it-container,
.menu-footer-de-container,
.menu-footeres-container {
gap: 30px;
justify-content: center;
}
}
.menu-footer-container a,
.menu-bas-de-page-container a,
.menu-footer-it-container a,
.menu-footer-de-container a,
.menu-footeres-container a {
text-decoration: none;
}
@media all and (min-width: 992px) {
.menu-footer-container {
width: auto;
}
}
#menu-footer, #menu-footer-it, #menu-footer-de, #menu-footeres {
display: flex;
list-style: none;
font-weight: 600;
flex-wrap: wrap;
justify-content: space-around;
gap: 1rem;
}
@media all and (min-width: 992px) {
#menu-footer, #menu-footer-it, #menu-footer-de, #menu-footeres {
gap: 0.9375vw;
}
}
#menu-footer .menu-item a, #menu-footer-it .menu-item a, #menu-footer-de .menu-item a, #menu-footeres .menu-item a {
color: #8E90B9;
}
#menu-footeres .menu-item a {
color: #8E90B9;
}
#menu-bas-de-page {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
list-style: none;
font-weight: 600;
width: 100%;
flex-direction: column;
align-items: center;
gap: 1rem;
padding: 0 0.75rem;
}
@media all and (min-width: 992px) {
#menu-bas-de-page {
gap: 0.9375vw;
padding: 0 0.625vw;
flex-direction: row;
justify-content: center;
margin-bottom: 1.4814814815vh;
}
}
#menu-bas-de-page .menu-item a {
color: #8E90B9;
font-weight: 300;
}
.divider-footer {
background: #3A3A55;
height: 2px;
margin-bottom: 1rem;
}
@media all and (min-width: 992px) {
.divider-footer {
height: 0.1851851852vh !important;
margin: 1.4814814815vh auto !important;
max-width: 67.1875vw !important;
width: 100% !important;
border: none !important;
}
} #input_3_1 {
background-color: #8E90B9;
width: 80%;
color: #FFFFFF !important;
min-width: 18rem;
border-radius: 3.125rem !important;
padding: 0.56rem 0.75rem !important;
font-size: 1rem;
}
@media all and (min-width: 992px) {
#input_3_1 {
min-width: 15.1041666667vw;
border-radius: 2.6041666667vw !important;
padding: 0.8333333333vh 0.625vw !important;
font-size: 1rem;
}
}
#input_3_1::placeholder {
color: #d1d1e0;
opacity: 1;
}
#gform_wrapper_3 {
color: #FFFFFF;
border-radius: 0.5rem;
}
@media all and (min-width: 992px) {
#gform_wrapper_3 {
border-radius: 0.4166666667vw;
}
}
#gform_wrapper_3 .gform_title,
#gform_wrapper_3 #field_3_1 .gfield_label {
display: none;
}
#gform_wrapper_3 > div > h2 {
display: none;
}
#gform_wrapper_3 #field_3_3 {
display: flex;
flex-direction: row;
align-items: center;
border: none;
color: #8E90B9;
}
#gform_wrapper_3 #field_3_3 > * {
font-weight: 300;
color: #8E90B9;
font-size: 0.75rem;
line-height: 1rem;
}
@media all and (min-width: 992px) {
#gform_wrapper_3 #field_3_3 > * {
font-size: 0.6875rem;
line-height: 1.3888888889vh;
}
}
#gform_wrapper_3 #field_3_3 .gfield_description {
font-size: 0.8125rem;
padding-top: 1rem;
}
@media all and (min-width: 992px) {
#gform_wrapper_3 #field_3_3 .gfield_description {
font-size: 0.8125rem;
padding-top: 1.3888888889vh;
}
}
#gform_wrapper_3 #field_3_3 .gfield_description a {
font-weight: 300;
text-decoration: underline;
color: #8E90B9;
font-size: 0.8125rem;
line-height: 1rem;
}
@media all and (min-width: 992px) {
#gform_wrapper_3 #field_3_3 .gfield_description a {
font-size: 0.8125rem;
line-height: 1.4814814815vh;
}
}
#gform_wrapper_3 #field_3_3 input[type=checkbox] {
display: flex;
appearance: none;
-webkit-appearance: none;
background-color: transparent;
border: 1px solid #8E90B9;
border-radius: 50%;
position: relative;
width: 1rem;
height: 1rem;
top: 0.25rem;
margin-right: 0.5rem;
}
@media all and (min-width: 992px) {
#gform_wrapper_3 #field_3_3 input[type=checkbox] {
width: 0.46875vw;
height: 0.46875vw;
border: 0.0520833333vw solid #8E90B9;
top: 0.3703703704vh;
margin-right: 0.4166666667vw;
}
}
#gform_wrapper_3 #field_3_3 input[type=checkbox]:checked {
background-color: #21E273;
border-color: #21E273;
}
#gform_wrapper_3 .gform_footer {
text-align: right;
padding-top: 1.25rem;
}
@media all and (min-width: 992px) {
#gform_wrapper_3 .gform_footer {
padding-top: 1.8518518519vh;
}
}
#input_9_1 {
background-color: #8E90B9;
width: 80%;
color: #FFFFFF !important;
min-width: 18rem;
border-radius: 3.125rem !important;
padding: 0.56rem 0.75rem !important;
font-size: 1rem;
}
@media all and (min-width: 992px) {
#input_9_1 {
min-width: 15.1041666667vw;
border-radius: 2.6041666667vw !important;
padding: 0.8333333333vh 0.625vw !important;
font-size: 1rem;
}
}
#input_9_1::placeholder {
color: #d1d1e0;
opacity: 1;
}
#gform_wrapper_9 {
color: #FFFFFF;
border-radius: 0.5rem;
}
@media all and (min-width: 992px) {
#gform_wrapper_9 {
border-radius: 0.4166666667vw;
}
}
#gform_wrapper_9 .gform_title,
#gform_wrapper_9 #field_9_1 .gfield_label {
display: none;
}
#gform_wrapper_9 > div > h2 {
display: none;
}
#gform_wrapper_9 #field_9_3 {
display: flex;
flex-direction: row;
align-items: center;
border: none;
color: #8E90B9;
}
#gform_wrapper_9 #field_9_3 > * {
font-weight: 300;
color: #8E90B9;
font-size: 0.75rem;
line-height: 1rem;
}
@media all and (min-width: 992px) {
#gform_wrapper_9 #field_9_3 > * {
font-size: 0.6875rem;
line-height: 1.3888888889vh;
}
}
#gform_wrapper_9 #field_9_3 .gfield_description {
font-size: 0.8125rem;
padding-top: 1rem;
}
@media all and (min-width: 992px) {
#gform_wrapper_9 #field_9_3 .gfield_description {
font-size: 0.8125rem;
padding-top: 1.3888888889vh;
}
}
#gform_wrapper_9 #field_9_3 .gfield_description a {
font-weight: 300;
text-decoration: underline;
color: #8E90B9;
font-size: 0.8125rem;
line-height: 1rem;
}
@media all and (min-width: 992px) {
#gform_wrapper_9 #field_9_3 .gfield_description a {
font-size: 0.8125rem;
line-height: 1.4814814815vh;
}
}
#gform_wrapper_9 #field_9_3 input[type=checkbox] {
display: flex;
appearance: none;
-webkit-appearance: none;
background-color: transparent;
border: 1px solid #8E90B9;
border-radius: 50%;
position: relative;
width: 1rem;
height: 1rem;
top: 0.25rem;
margin-right: 0.5rem;
}
@media all and (min-width: 992px) {
#gform_wrapper_9 #field_9_3 input[type=checkbox] {
width: 0.46875vw;
height: 0.46875vw;
border: 0.0520833333vw solid #8E90B9;
top: 0.3703703704vh;
margin-right: 0.4166666667vw;
}
}
#gform_wrapper_9 #field_9_3 input[type=checkbox]:checked {
background-color: #21E273;
border-color: #21E273;
}
#gform_wrapper_9 .gform_footer {
text-align: right;
padding-top: 1.25rem;
}
@media all and (min-width: 992px) {
#gform_wrapper_9 .gform_footer {
padding-top: 1.8518518519vh;
}
}
#input_10_1 {
background-color: #8E90B9;
width: 80%;
color: #FFFFFF !important;
min-width: 18rem;
border-radius: 3.125rem !important;
padding: 0.56rem 0.75rem !important;
font-size: 1rem;
}
@media all and (min-width: 992px) {
#input_10_1 {
min-width: 15.1041666667vw;
border-radius: 2.6041666667vw !important;
padding: 0.8333333333vh 0.625vw !important;
font-size: 1rem;
}
}
#input_10_1::placeholder {
color: #d1d1e0;
opacity: 1;
}
#gform_wrapper_10 {
color: #FFFFFF;
border-radius: 0.5rem;
}
@media all and (min-width: 992px) {
#gform_wrapper_10 {
border-radius: 0.4166666667vw;
}
}
#gform_wrapper_10 .gform_title,
#gform_wrapper_10 #field_10_1 .gfield_label {
display: none;
}
#gform_wrapper_10 > div > h2 {
display: none;
}
#gform_wrapper_10 #field_10_3 {
display: flex;
flex-direction: row;
align-items: center;
border: none;
color: #8E90B9;
}
#gform_wrapper_10 #field_10_3 > * {
font-weight: 300;
color: #8E90B9;
font-size: 0.75rem;
line-height: 1rem;
}
@media all and (min-width: 992px) {
#gform_wrapper_10 #field_10_3 > * {
font-size: 0.6875rem;
line-height: 1.3888888889vh;
}
}
#gform_wrapper_10 #field_10_3 .gfield_description {
font-size: 0.8125rem;
padding-top: 1rem;
}
@media all and (min-width: 992px) {
#gform_wrapper_10 #field_10_3 .gfield_description {
font-size: 0.8125rem;
padding-top: 1.3888888889vh;
}
}
#gform_wrapper_10 #field_10_3 .gfield_description a {
font-weight: 300;
text-decoration: underline;
color: #8E90B9;
font-size: 0.8125rem;
line-height: 1rem;
}
@media all and (min-width: 992px) {
#gform_wrapper_10 #field_10_3 .gfield_description a {
font-size: 0.8125rem;
line-height: 1.4814814815vh;
}
}
#gform_wrapper_10 #field_10_3 input[type=checkbox] {
display: flex;
appearance: none;
-webkit-appearance: none;
background-color: transparent;
border: 1px solid #8E90B9;
border-radius: 50%;
position: relative;
width: 1rem;
height: 1rem;
top: 0.25rem;
margin-right: 0.5rem;
}
@media all and (min-width: 992px) {
#gform_wrapper_10 #field_10_3 input[type=checkbox] {
width: 0.46875vw;
height: 0.46875vw;
border: 0.0520833333vw solid #8E90B9;
top: 0.3703703704vh;
margin-right: 0.4166666667vw;
}
}
#gform_wrapper_10 #field_10_3 input[type=checkbox]:checked {
background-color: #21E273;
border-color: #21E273;
}
#gform_wrapper_10 .gform_footer {
text-align: right;
padding-top: 1.25rem;
}
@media all and (min-width: 992px) {
#gform_wrapper_10 .gform_footer {
padding-top: 1.8518518519vh;
}
}
#input_11_1 {
background-color: #8E90B9;
width: 80%;
color: #FFFFFF !important;
min-width: 18rem;
border-radius: 3.125rem !important;
padding: 0.56rem 0.75rem !important;
font-size: 1rem;
}
@media all and (min-width: 992px) {
#input_11_1 {
min-width: 15.1041666667vw;
border-radius: 2.6041666667vw !important;
padding: 0.8333333333vh 0.625vw !important;
font-size: 1rem;
}
}
#input_11_1::placeholder {
color: #d1d1e0;
opacity: 1;
}
#gform_wrapper_11 {
color: #FFFFFF;
border-radius: 0.5rem;
}
@media all and (min-width: 992px) {
#gform_wrapper_11 {
border-radius: 0.4166666667vw;
}
}
#gform_wrapper_11 .gform_title,
#gform_wrapper_11 #field_11_1 .gfield_label {
display: none;
}
#gform_wrapper_11 > div > h2 {
display: none;
}
#gform_wrapper_11 #field_11_3 {
display: flex;
flex-direction: row;
align-items: center;
border: none;
color: #8E90B9;
}
#gform_wrapper_11 #field_11_3 > * {
font-weight: 300;
color: #8E90B9;
font-size: 0.75rem;
line-height: 1rem;
}
@media all and (min-width: 992px) {
#gform_wrapper_11 #field_11_3 > * {
font-size: 0.6875rem;
line-height: 1.3888888889vh;
}
}
#gform_wrapper_11 #field_11_3 .gfield_description {
font-size: 0.8125rem;
padding-top: 1rem;
}
@media all and (min-width: 992px) {
#gform_wrapper_11 #field_11_3 .gfield_description {
font-size: 0.8125rem;
padding-top: 1.3888888889vh;
}
}
#gform_wrapper_11 #field_11_3 .gfield_description a {
font-weight: 300;
text-decoration: underline;
color: #8E90B9;
font-size: 0.8125rem;
line-height: 1rem;
}
@media all and (min-width: 992px) {
#gform_wrapper_11 #field_11_3 .gfield_description a {
font-size: 0.8125rem;
line-height: 1.4814814815vh;
}
}
#gform_wrapper_11 #field_11_3 input[type=checkbox] {
display: flex;
appearance: none;
-webkit-appearance: none;
background-color: transparent;
border: 1px solid #8E90B9;
border-radius: 50%;
position: relative;
width: 1rem;
height: 1rem;
top: 0.25rem;
margin-right: 0.5rem;
}
@media all and (min-width: 992px) {
#gform_wrapper_11 #field_11_3 input[type=checkbox] {
width: 0.46875vw;
height: 0.46875vw;
border: 0.0520833333vw solid #8E90B9;
top: 0.3703703704vh;
margin-right: 0.4166666667vw;
}
}
#gform_wrapper_11 #field_11_3 input[type=checkbox]:checked {
background-color: #21E273;
border-color: #21E273;
}
#gform_wrapper_11 .gform_footer {
text-align: right;
padding-top: 1.25rem;
}
@media all and (min-width: 992px) {
#gform_wrapper_11 .gform_footer {
padding-top: 1.8518518519vh;
}
}
#input_12_1 {
background-color: #8E90B9;
width: 80%;
color: #FFFFFF !important;
min-width: 18rem;
border-radius: 3.125rem !important;
padding: 0.56rem 0.75rem !important;
font-size: 1rem;
}
@media all and (min-width: 992px) {
#input_12_1 {
min-width: 15.1041666667vw;
border-radius: 2.6041666667vw !important;
padding: 0.8333333333vh 0.625vw !important;
font-size: 1rem;
}
}
#input_12_1::placeholder {
color: #d1d1e0;
opacity: 1;
}
#gform_wrapper_12 {
color: #FFFFFF;
border-radius: 0.5rem;
}
@media all and (min-width: 992px) {
#gform_wrapper_12 {
border-radius: 0.4166666667vw;
}
}
#gform_wrapper_12 .gform_title,
#gform_wrapper_12 #field_12_1 .gfield_label {
display: none;
}
#gform_wrapper_12 > div > h2 {
display: none;
}
#gform_wrapper_12 #field_12_3 {
display: flex;
flex-direction: row;
align-items: center;
border: none;
color: #8E90B9;
}
#gform_wrapper_12 #field_12_3 > * {
font-weight: 300;
color: #8E90B9;
font-size: 0.75rem;
line-height: 1rem;
}
@media all and (min-width: 992px) {
#gform_wrapper_12 #field_12_3 > * {
font-size: 0.6875rem;
line-height: 1.3888888889vh;
}
}
#gform_wrapper_12 #field_12_3 .gfield_description {
font-size: 0.8125rem;
padding-top: 1rem;
}
@media all and (min-width: 992px) {
#gform_wrapper_12 #field_12_3 .gfield_description {
font-size: 0.8125rem;
padding-top: 1.3888888889vh;
}
}
#gform_wrapper_12 #field_12_3 .gfield_description a {
font-weight: 300;
text-decoration: underline;
color: #8E90B9;
font-size: 0.8125rem;
line-height: 1rem;
}
@media all and (min-width: 992px) {
#gform_wrapper_12 #field_12_3 .gfield_description a {
font-size: 0.8125rem;
line-height: 1.4814814815vh;
}
}
#gform_wrapper_12 #field_12_3 input[type=checkbox] {
display: flex;
appearance: none;
-webkit-appearance: none;
background-color: transparent;
border: 1px solid #8E90B9;
border-radius: 50%;
position: relative;
width: 1rem;
height: 1rem;
top: 0.25rem;
margin-right: 0.5rem;
}
@media all and (min-width: 992px) {
#gform_wrapper_12 #field_12_3 input[type=checkbox] {
width: 0.46875vw;
height: 0.46875vw;
border: 0.0520833333vw solid #8E90B9;
top: 0.3703703704vh;
margin-right: 0.4166666667vw;
}
}
#gform_wrapper_12 #field_12_3 input[type=checkbox]:checked {
background-color: #21E273;
border-color: #21E273;
}
#gform_wrapper_12 .gform_footer {
text-align: right;
padding-top: 1.25rem;
}
@media all and (min-width: 992px) {
#gform_wrapper_12 .gform_footer {
padding-top: 1.8518518519vh;
}
}
#gform_3, #gform_fields_3 {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
@media all and (min-width: 992px) {
#gform_3, #gform_fields_3 {
align-items: unset;
justify-content: unset;
}
}
#field_submit {
width: fit-content;
display: flex;
justify-content: space-between;
position: relative;
background: transparent;
color: #000000;
gap: 0.5rem;
left: 50%;
transform: translateX(-50%);
top: -1rem;
border: 1px solid #FF4E00;
border-radius: 1.5rem;
padding: 0.25rem 0.875rem;
font-size: 0.9375rem;
}
@media all and (min-width: 992px) {
#field_submit {
transform: none;
gap: 0.4166666667vw;
left: 136%;
top: -2.8703703704vh;
border: 0.0520833333vw solid #FF4E00;
border-radius: 1.25vw;
padding: 0.3703703704vh 0.7291666667vw;
font-size: 0.9375rem;
}
}
#field_submit > i {
color: #000000;
}


#homeContent {
overflow-x: hidden;
background: #1C1C31;
}
#homeContent:after {
content: "";
position: absolute;
inset: 0;
background: url(//seo-jungle.com/wp-content/themes/seojungle-theme/img/planetePhone.svg) no-repeat center center;
background-size: contain;
z-index: 1;
opacity: 0.1;
pointer-events: none;
left: -50%;
top: -12.5rem;
}
@media (min-width: 1024px) {
#homeContent:after {
top: -18.5185185185vh;
max-height: 965px;
background: url(//seo-jungle.com/wp-content/themes/seojungle-theme/img/Planet.webp) no-repeat center center;
left: 0;
opacity: 1;
}
}
@media (min-width: 1920px) {
#homeContent:after {
max-height: 1060px;
background-size: 100% auto;
}
}
@media (min-width: 1024px) {
#homeContent {
margin-top: 0;
}
}
#homeContent .wrapper > #firstContentWrapper {
position: relative;
overflow: hidden;
display: flex;
align-items: center;
flex-direction: column;
padding: 0rem 1.25rem;
min-height: 84vh;
}
@media (min-width: 1024px) {
#homeContent .wrapper > #firstContentWrapper {
max-width: 100vw;
align-items: unset;
padding: 0;
min-height: 665px;
}
}
#homeContent .wrapper > #firstContentWrapper .container {
width: -webkit-fill-available;
}
#homeContent .wrapper > #firstContentWrapper .hero-main-container {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
width: -webkit-fill-available;
margin: 0 auto;
max-width: 90rem;
padding: 2.5rem 1.875rem;
}
@media (min-width: 1024px) {
#homeContent .wrapper > #firstContentWrapper .hero-main-container {
flex-direction: row;
align-items: center;
max-width: 1430px;
margin: 0 auto;
padding: 0 2rem;
gap: 40px;
}
}
#homeContent .wrapper > #firstContentWrapper .hero-text-content {
flex: 1.2;
}
@media (min-width: 1024px) {
#homeContent .wrapper > #firstContentWrapper .hero-text-content {
min-width: 850px;
display: flex;
flex-direction: column;
gap: 90px;
}
}
#homeContent .wrapper > #firstContentWrapper .hero-text-content #topContent {
text-align: center;
}
@media (min-width: 1024px) {
#homeContent .wrapper > #firstContentWrapper .hero-text-content #topContent {
text-align: left;
}
}
#homeContent .wrapper > #firstContentWrapper .hero-text-content #topContent .titleContainer {
display: flex;
flex-direction: column;
gap: 0.625rem;
}
@media (min-width: 1024px) {
#homeContent .wrapper > #firstContentWrapper .hero-text-content #topContent .titleContainer {
gap: 0.9259259259vh;
}
}
#homeContent .wrapper > #firstContentWrapper .hero-text-content #topContent .titleContainer .main-heading {
margin: 0;
padding: 0;
line-height: 1.2;
display: flex;
flex-direction: column;
}
#homeContent .wrapper > #firstContentWrapper .hero-text-content #topContent .titleContainer .light-title {
display: block;
font-weight: 300;
text-transform: uppercase;
color: #fff;
font-size: clamp(1.25rem, 3vw, 2.3125rem);
letter-spacing: 0.375rem;
}
@media (min-width: 1024px) {
#homeContent .wrapper > #firstContentWrapper .hero-text-content #topContent .titleContainer .light-title {
font-size: 2.3125rem;
letter-spacing: 0.3125vw;
}
}
#homeContent .wrapper > #firstContentWrapper .hero-text-content #topContent .titleContainer .bold-title {
display: block;
font-weight: 700;
line-height: 1;
color: #fff;
font-size: 35px;
margin: 0.625rem 0;
}
@media (min-width: 1024px) {
#homeContent .wrapper > #firstContentWrapper .hero-text-content #topContent .titleContainer .bold-title {
font-size: 4.1875rem;
margin: 0.9259259259vh 0;
}
}
#homeContent .wrapper > #firstContentWrapper .hero-text-content #topContent .titleContainer .gamified-row {
display: flex;
align-items: center;
flex-wrap: wrap;
justify-content: center;
gap: 1.25rem;
margin-top: 0.625rem;
}
@media (min-width: 1024px) {
#homeContent .wrapper > #firstContentWrapper .hero-text-content #topContent .titleContainer .gamified-row {
gap: 1.0416666667vw;
margin-top: 0.9259259259vh;
justify-content: unset;
}
}
#homeContent .wrapper > #firstContentWrapper .hero-text-content #topContent .titleContainer .gamified-badge {
display: inline-block;
border-radius: 3.125rem;
background: linear-gradient(90deg, #FF4E00 0%, #FF6600 50%, #FF9500 100%);
font-weight: 400;
color: #fff;
text-transform: uppercase;
padding: 0.625rem 1.5625rem;
font-size: 1.25rem;
letter-spacing: 0.375rem;
}
@media (min-width: 1024px) {
#homeContent .wrapper > #firstContentWrapper .hero-text-content #topContent .titleContainer .gamified-badge {
padding: 0.9259259259vh 1.3020833333vw;
border-radius: 2.6041666667vw;
font-size: 1.25rem;
letter-spacing: 0.3125vw;
}
}
#homeContent .wrapper > #firstContentWrapper .hero-text-content #topContent .usersContainer {
display: flex;
align-items: center;
gap: 0.75rem;
margin-top: 0;
}
@media (min-width: 1024px) {
#homeContent .wrapper > #firstContentWrapper .hero-text-content #topContent .usersContainer {
gap: 0.625vw;
}
}
#homeContent .wrapper > #firstContentWrapper .hero-text-content #topContent .usersContainer .avatar-stack {
display: flex;
}
#homeContent .wrapper > #firstContentWrapper .hero-text-content #topContent .usersContainer .avatar-stack img {
object-fit: cover;
}
#homeContent .wrapper > #firstContentWrapper .hero-text-content #topContent .usersContainer .avatar-stack img.overlap {
margin-left: -0.75rem;
}
@media (min-width: 1024px) {
#homeContent .wrapper > #firstContentWrapper .hero-text-content #topContent .usersContainer .avatar-stack img.overlap {
margin-left: -0.625vw;
}
}
#homeContent .wrapper > #firstContentWrapper .hero-text-content #topContent .usersContainer p {
font-weight: 300;
color: rgba(255, 255, 255, 0.8);
font-size: 0.875rem;
}
@media (min-width: 1024px) {
#homeContent .wrapper > #firstContentWrapper .hero-text-content #topContent .usersContainer p {
font-size: 0.875rem;
}
}
#homeContent .wrapper > #firstContentWrapper #mainActions {
display: flex;
flex-direction: column;
gap: 1.875rem;
margin-top: 3.75rem;
max-width: 56.25rem;
}
@media (min-width: 1024px) {
#homeContent .wrapper > #firstContentWrapper #mainActions {
flex-direction: row;
align-items: flex-start;
gap: 1.5625vw;
margin-top: 5.5555555556vh;
max-width: 46.875vw;
}
}
#homeContent .wrapper > #firstContentWrapper #mainActions .actionBlock {
flex: 1;
}
#homeContent .wrapper > #firstContentWrapper #mainActions .actionBlock .desc {
color: #fff;
line-height: 1.4;
font-size: 1.0625rem;
margin-bottom: 1.5625rem;
}
@media (min-width: 1024px) {
#homeContent .wrapper > #firstContentWrapper #mainActions .actionBlock .desc {
font-size: 1.0625rem;
margin-bottom: 2.3148148148vh;
min-height: 4.6296296296vh;
}
}
#homeContent .wrapper > #firstContentWrapper #mainActions .vertical-divider {
display: none;
}
@media (min-width: 1024px) {
#homeContent .wrapper > #firstContentWrapper #mainActions .vertical-divider {
display: block;
width: 0.0520833333vw;
height: 10.1851851852vh;
background: rgba(255, 255, 255, 0.2);
align-self: center;
}
}
#homeContent .wrapper > #firstContentWrapper .fillButton, #homeContent .wrapper > #firstContentWrapper .outlineButton {
width: 100%;
padding: 1rem 1.875rem;
border-radius: 6.25rem;
font-size: 0.9375rem;
gap: 0.625rem;
display: inline-flex;
justify-content: center;
align-items: center;
border: none;
outline: none;
position: relative;
background: transparent;
color: #ffffff;
cursor: pointer;
transition: background 0.3s ease, color 0.3s ease;
}
#homeContent .wrapper > #firstContentWrapper .fillButton::before, #homeContent .wrapper > #firstContentWrapper .outlineButton::before {
content: "";
position: absolute;
inset: 0;
padding: 0.125rem;
border-radius: inherit;
background: linear-gradient(270deg, #c2fd70 0%, #21e273 100%);
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
transition: 0.3s ease;
z-index: -1;
}
#homeContent .wrapper > #firstContentWrapper .fillButton:hover, #homeContent .wrapper > #firstContentWrapper .outlineButton:hover {
background: linear-gradient(270deg, #c2fd70 0%, #21e273 100%);
color: #151525;
}
#homeContent .wrapper > #firstContentWrapper .fillButton:hover::before, #homeContent .wrapper > #firstContentWrapper .outlineButton:hover::before {
-webkit-mask: none;
mask: none;
}
#homeContent .wrapper > #firstContentWrapper .fillButton:hover > .iconContainer > i, #homeContent .wrapper > #firstContentWrapper .outlineButton:hover > .iconContainer > i {
color: #151525 !important;
}
#homeContent .wrapper > #firstContentWrapper .fillButton:hover > .iconContainer > .icon-hover:before, #homeContent .wrapper > #firstContentWrapper .outlineButton:hover > .iconContainer > .icon-hover:before {
background: #151525 !important;
}
#homeContent .wrapper > #firstContentWrapper .fillButton {
background: linear-gradient(270deg, #c2fd70 0%, #21e273 100%);
color: #151525;
}
#homeContent .wrapper > #firstContentWrapper .fillButton::before {
opacity: 0;
}
#homeContent .wrapper > #firstContentWrapper .fillButton:hover {
background: transparent;
color: #ffffff;
}
#homeContent .wrapper > #firstContentWrapper .fillButton:hover::before {
opacity: 1;
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
}
#homeContent .wrapper > #firstContentWrapper .fillButton:hover > .iconContainer > i {
color: white !important;
}
#homeContent .wrapper > #firstContentWrapper .fillButton:hover > .iconContainer > .icon-hover:before {
background: white !important;
}
#homeContent .wrapper > #firstContentWrapper .hero-visual-content {
flex: 1;
justify-content: center;
display: none;
margin-top: 2.5rem;
}
@media (min-width: 1024px) {
#homeContent .wrapper > #firstContentWrapper .hero-visual-content {
display: flex;
margin-top: 0rem;
justify-content: unset;
}
}
@media (min-width: 1024px) {
#homeContent .wrapper > #firstContentWrapper .hero-visual-content:after {
position: absolute;
content: "";
width: 750px;
height: 750px;
background: radial-gradient(52.57% 52.57% at 50% 50%, #3B3D60 0%, #1C1C31 100%);
border-radius: 50%;
z-index: 2;
right: -130px;
top: -0.333333vh;
}
}
#homeContent .wrapper > #firstContentWrapper .hero-visual-content .main-illustration {
width: 100%;
height: auto;
max-width: 31.25rem;
}
@media (min-width: 1024px) {
#homeContent .wrapper > #firstContentWrapper .hero-visual-content .main-illustration {
width: 750px;
position: relative;
z-index: 4;
max-width: 750px;
transform: scale(1.1);
}
}
#homeContent .wrapper .logo-carousel-wrapper {
background: #1C1C31;
overflow: hidden;
position: relative;
width: 100%;
height: 150px;
}
#homeContent .wrapper .logo-carousel-wrapper::before, #homeContent .wrapper .logo-carousel-wrapper::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
z-index: 2;
pointer-events: none;
width: 6.25rem;
}
@media (min-width: 1024px) {
#homeContent .wrapper .logo-carousel-wrapper::before, #homeContent .wrapper .logo-carousel-wrapper::after {
width: 5.2083333333vw;
}
}
#homeContent .wrapper .logo-carousel-wrapper::before {
left: 0;
background: linear-gradient(to right, #1C1C31 0%, transparent 100%);
}
#homeContent .wrapper .logo-carousel-wrapper::after {
right: 0;
background: linear-gradient(to left, #1C1C31 0%, transparent 100%);
}
#homeContent .wrapper .logo-carousel-wrapper .logo-carousel-track {
display: flex !important;
align-items: center;
width: max-content !important;
will-change: transform;
z-index: 3;
}
#homeContent .wrapper > #secondContentWrapper {
background-color: #26273B;
color: #ffffff;
padding: 3.75rem 1.25rem;
display: flex;
flex-direction: column;
align-items: center;
}
#homeContent .wrapper > #secondContentWrapper .imgsDesktop {
display: none;
}
#homeContent .wrapper > #secondContentWrapper .imgsMobile {
display: block;
position: relative;
width: 100%;
max-width: 28.125rem;
margin-bottom: 2.5rem;
}
#homeContent .wrapper > #secondContentWrapper .imgsDesktop .bg-illustration {
position: absolute;
transform: translateX(-65%);
z-index: 1;
mix-blend-mode: color-dodge;
width: 718px;
height: 781px;
top: -7%;
}
#homeContent .wrapper > #secondContentWrapper .imgsDesktop .main-device {
position: relative;
z-index: 2;
width: 100%;
display: block;
}
#homeContent .wrapper > #secondContentWrapper .imgsMobile > .bg-illustration {
position: absolute;
left: 50%;
transform: translateX(-50%);
width: 100%;
z-index: 1;
mix-blend-mode: color-dodge;
}
#homeContent .wrapper > #secondContentWrapper .imgsMobile > .main-device {
position: relative;
z-index: 2;
width: 100%;
display: block;
}
@media (min-width: 64rem) {
#homeContent .wrapper > #secondContentWrapper {
padding: 9.2592592593vh 0;
display: block;
position: relative;
z-index: 4;
}
}
@media (min-width: 64rem) {
#homeContent .wrapper > #secondContentWrapper .second-inner {
display: flex;
flex-direction: row-reverse;
align-items: center;
justify-content: space-between;
gap: 60px;
max-width: 1430px;
width: 100%;
margin: 0 auto;
padding: 0 2rem;
}
#homeContent .wrapper > #secondContentWrapper .second-inner .imgsMobile {
display: none;
}
#homeContent .wrapper > #secondContentWrapper .second-inner .imgsDesktop {
display: block;
flex: 1;
position: relative;
max-width: 600px;
}
}
#homeContent .wrapper > #secondContentWrapper .contentText {
width: 100%;
}
@media (min-width: 64rem) {
#homeContent .wrapper > #secondContentWrapper .contentText {
flex: 1;
max-width: 630px;
position: relative;
z-index: 0;
}
}
#homeContent .wrapper > #secondContentWrapper .contentText .frame {
padding: 0.75rem 1.125rem;
}
@media (min-width: 1024px) {
#homeContent .wrapper > #secondContentWrapper .contentText .frame {
padding: 1.1111111111vh 0.9375vw;
}
}
#homeContent .wrapper > #secondContentWrapper .contentText .frame .SEO-JUNGLE-qu-est-ce {
font-weight: 700;
line-height: 1.1;
font-size: 2rem;
margin: 0 0 1.25rem 0;
}
@media (min-width: 64rem) {
#homeContent .wrapper > #secondContentWrapper .contentText .frame .SEO-JUNGLE-qu-est-ce {
font-size: 50px;
margin: 0 0 1.8518518519vh 0;
}
}
#homeContent .wrapper > #secondContentWrapper .contentText .frame .une-place-de-march-d {
color: #00e676;
font-weight: 400;
font-size: 1.125rem;
margin-bottom: 1.5625rem;
}
@media (min-width: 64rem) {
#homeContent .wrapper > #secondContentWrapper .contentText .frame .une-place-de-march-d {
font-size: 40px;
margin-bottom: 2.3148148148vh;
}
}
#homeContent .wrapper > #secondContentWrapper .contentText .frame .text-wrapper {
line-height: 1.6;
color: #d1d1d1;
font-size: 0.9375rem;
margin-bottom: 1.875rem;
}
@media (min-width: 1024px) {
#homeContent .wrapper > #secondContentWrapper .contentText .frame .text-wrapper {
font-weight: 400;
font-size: 20px;
line-height: 28px;
letter-spacing: 0%;
vertical-align: middle;
color: #FFFFFF;
}
}
#homeContent .wrapper > #secondContentWrapper .contentText .frame .text-wrapper--bold {
font-weight: 700;
color: #ffffff;
text-decoration: underline;
}
#homeContent .wrapper > #secondContentWrapper .contentText .frame .checkList {
list-style: none;
padding: 0;
margin: 0 0 2.5rem 0;
}
@media (min-width: 1024px) {
#homeContent .wrapper > #secondContentWrapper .contentText .frame .checkList {
margin: 0 0 3.7037037037vh 0;
}
}
#homeContent .wrapper > #secondContentWrapper .contentText .frame .checkList .checkItem {
display: flex;
align-items: center;
margin-bottom: 0.75rem;
}
@media (min-width: 1024px) {
#homeContent .wrapper > #secondContentWrapper .contentText .frame .checkList .checkItem {
font-weight: 400;
font-size: 20px;
line-height: 40px;
vertical-align: middle;
color: #FFFFFF;
margin-bottom: unset;
}
}
#homeContent .wrapper > #secondContentWrapper .contentText .frame .checkList .checkItem img {
width: 1.125rem;
height: 1.125rem;
margin-right: 0.9375rem;
}
@media (min-width: 1024px) {
#homeContent .wrapper > #secondContentWrapper .contentText .frame .checkList .checkItem img {
width: 0.9375vw;
height: 0.9375vw;
margin-right: 0.78125vw;
}
}
#homeContent .wrapper > #secondContentWrapper .contentText .frame .checkList .checkItem span {
color: #ffffff;
font-size: 0.9375rem;
}
#homeContent .wrapper > #secondContentWrapper .contentText .frame .main-bouton {
text-decoration: none;
display: inline-block;
color: #ffffff;
font-weight: 700;
text-transform: uppercase;
transition: 0.3s ease;
border: none;
border-radius: 3.125rem;
padding: 1rem 2.1875rem;
font-size: 0.8125rem;
letter-spacing: 0.0625rem;
position: relative;
background: transparent;
z-index: 1;
}
#homeContent .wrapper > #secondContentWrapper .contentText .frame .main-bouton::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
padding: 0.125rem; background: linear-gradient(270deg, #C2FD70 0%, #21E273 100%);
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
z-index: -1;
}
@media (min-width: 1024px) {
#homeContent .wrapper > #secondContentWrapper .contentText .frame .main-bouton {
border-radius: 2.6041666667vw;
padding: 1.4814814815vh 1.8229166667vw;
font-size: 0.8125rem;
letter-spacing: 0.0520833333vw;
}
#homeContent .wrapper > #secondContentWrapper .contentText .frame .main-bouton::before {
padding: 0.1041666667vw; }
}
#homeContent .wrapper > #secondContentWrapper .contentText .frame .main-bouton:hover {
color: #23253a;
}
#homeContent .wrapper > #secondContentWrapper .contentText .frame .main-bouton:hover::before {
background: linear-gradient(270deg, #C2FD70 0%, #21E273 100%);
-webkit-mask: none;
mask: none;
}
#homeContent .wrapper > .avantages-list {
background-color: #1c1c31;
text-align: left;
display: flex;
flex-direction: column;
align-items: center;
padding: 3.125rem 1.25rem;
gap: 1.25rem;
}
@media (min-width: 64rem) {
#homeContent .wrapper > .avantages-list {
padding: 0;
height: 20.7407407407vh;
display: flex;
justify-content: center;
align-items: center;
}
#homeContent .wrapper > .avantages-list > * {
box-sizing: border-box;
}
#homeContent .wrapper > .avantages-list {
flex-direction: row;
max-width: 1430px;
margin: 0 auto;
width: 100%;
justify-content: space-between;
padding: 0 2rem;
gap: 0;
}
}
#homeContent .wrapper > .avantages-list .advantage-item {
display: flex;
flex-direction: column;
width: 100%;
gap: 0.3125rem;
max-width: 18.5rem;
}
@media (min-width: 1024px) {
#homeContent .wrapper > .avantages-list .advantage-item {
gap: 0.462962963vh;
max-width: 296px;
height: 99.75px;
}
}
#homeContent .wrapper > .avantages-list .advantage-item .advantage-title {
font-family: "sofia-pro", sans-serif;
font-weight: 700;
color: #21e273;
margin: 0;
font-size: 20px;
}
#homeContent .wrapper > .avantages-list .advantage-item .advantage-description {
font-family: "sofia-pro", Helvetica, sans-serif;
font-weight: 400;
color: #ffffff;
margin: 0;
font-size: 1rem;
}
#homeContent .wrapper > .avantages-list > .divider {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
max-width: 18.75rem;
}
@media (min-width: 1024px) {
#homeContent .wrapper > .avantages-list > .divider {
max-width: 15.625vw;
}
}
#homeContent .wrapper > .avantages-list > .divider .divider-img {
width: 100%;
object-fit: cover;
background: rgba(255, 255, 255, 0.2);
height: 0.0625rem;
}
@media (min-width: 1024px) {
#homeContent .wrapper > .avantages-list > .divider .divider-img {
height: 0.0925925926vh;
}
}
@media (min-width: 64rem) {
#homeContent .wrapper > .avantages-list > .divider {
width: 0.0260416667vw !important;
height: 10.5555555556vh;
max-width: none;
background: rgba(255, 255, 255, 0.2);
border: none;
}
#homeContent .wrapper > .avantages-list > .divider .divider-img {
width: 0.0260416667vw;
height: 99.75px;
}
}
#homeContent .wrapper > .concept-container {
position: relative;
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 3.75rem 1.875rem;
gap: 1.875rem;
background: linear-gradient(0deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.6) 100%), url(https://c.animaapp.com/z4AxCpeY/img/frame-244.png);
background-size: cover;
background-position: 20% 50%;
}
@media (min-width: 64rem) {
#homeContent .wrapper > .concept-container {
flex-direction: row;
justify-content: flex-end;
align-items: center;
padding: 11.1111111111vh 0;
gap: 0.5208333333vw;
background-image: url(https://c.animaapp.com/z4AxCpeY/img/frame-244.png);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
}
#homeContent .wrapper > .concept-container .content-wrapper {
display: flex;
flex-direction: column;
align-items: flex-start;
position: relative;
width: 100%;
gap: 1.875rem;
}
@media (min-width: 64rem) {
#homeContent .wrapper > .concept-container .content-wrapper {
gap: 2.7777777778vh;
max-width: 1430px;
width: 100%;
align-items: flex-end;
margin: 0 auto;
padding: 0 2rem;
}
}
#homeContent .wrapper > .concept-container .content-wrapper > div {
display: flex;
flex-direction: column;
gap: 30px;
}
#homeContent .wrapper > .concept-container .content-wrapper .header-group {
display: flex;
flex-direction: column;
align-items: flex-start;
align-self: stretch;
position: relative;
gap: 0.46875rem;
}
@media (min-width: 1024px) {
#homeContent .wrapper > .concept-container .content-wrapper .header-group {
gap: 0.6944444444vh;
}
}
#homeContent .wrapper > .concept-container .content-wrapper .header-group .title-main {
margin: 0;
font-family: "Sofia Pro", Helvetica, sans-serif;
font-weight: 700;
color: #ffffff;
font-size: 2.1875rem;
line-height: 2.75rem;
}
@media (min-width: 64rem) {
#homeContent .wrapper > .concept-container .content-wrapper .header-group .title-main {
font-size: 3.125rem;
line-height: 5.5555555556vh;
white-space: nowrap;
}
}
#homeContent .wrapper > .concept-container .content-wrapper .header-group .title-accent {
font-family: "Comix Loud", Helvetica, sans-serif;
font-weight: 400;
letter-spacing: 0;
background: linear-gradient(98.57deg, #FF4E00 -35.28%, #FF6600 3.79%, #FF9500 42.86%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
font-size: 1.6875rem;
line-height: 3.5625rem;
}
@media (min-width: 64rem) {
#homeContent .wrapper > .concept-container .content-wrapper .header-group .title-accent {
font-size: 1.6875rem;
line-height: 5.2777777778vh;
}
}
#homeContent .wrapper > .concept-container .content-wrapper .subtitle {
margin: 0;
align-self: stretch;
font-family: "Sofia Pro", Helvetica, sans-serif;
font-weight: 700;
color: #ffffff;
font-size: 1.5625rem;
line-height: 1.75rem;
}
@media (min-width: 64rem) {
#homeContent .wrapper > .concept-container .content-wrapper .subtitle {
font-size: 1.875rem;
line-height: 3.5185185185vh;
}
}
#homeContent .wrapper > .concept-container .content-wrapper .description {
margin: 0;
font-family: "Sofia Pro", Helvetica, sans-serif;
font-weight: 400;
color: #ffffff;
display: flex;
align-items: center;
font-size: 1.25rem;
line-height: 1.75rem;
}
@media (min-width: 64rem) {
#homeContent .wrapper > .concept-container .content-wrapper .description {
width: 27.5vw;
font-size: 1.25rem;
line-height: 2.5925925926vh;
}
}
#homeContent .wrapper > .comic-section {
position: relative;
overflow: hidden;
background-image: url(//seo-jungle.com/wp-content/themes/seojungle-theme/img/Frame-247.webp);
background-size: cover;
background-position: 50% 50%;
display: flex;
flex-direction: column-reverse;
align-items: flex-start;
padding: 3.75rem 1.875rem;
gap: 1.875rem;
}
@media (min-width: 64rem) {
#homeContent .wrapper > .comic-section {
height: 67.5vh;
padding: 0;
background-image: url(//seo-jungle.com/wp-content/themes/seojungle-theme/img/Frame-245.webp);
display: flex;
align-items: center;
justify-content: center;
}
}
#homeContent .wrapper > .comic-section .comic-inner {
display: contents;
}
@media (min-width: 64rem) {
#homeContent .wrapper > .comic-section .comic-inner {
display: flex;
flex-direction: row-reverse;
justify-content: space-between;
align-items: center;
max-width: 1430px;
width: 100%;
padding: 0 2rem;
margin: 0 auto;
}
}
#homeContent .wrapper > .comic-section .ellipse-bg {
position: absolute;
border-radius: 50%;
background: radial-gradient(50% 50% at 53% 50%, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0) 100%);
opacity: 0.2;
pointer-events: none;
width: 74.9375rem;
height: 74.9375rem;
top: -13.375rem;
left: 5.5625rem;
}
@media (min-width: 64rem) {
#homeContent .wrapper > .comic-section .ellipse-bg {
width: 62.4479166667vw;
height: 62.4479166667vw;
top: -15.3703703704vh;
left: 39.84375vw;
}
}
#homeContent .wrapper > .comic-section .comic-group {
position: relative;
z-index: 2;
width: 100%;
display: flex;
gap: 1rem;
}
@media (min-width: 1024px) {
#homeContent .wrapper > .comic-section .comic-group {
gap: 0.8333333333vw;
}
}
#homeContent .wrapper > .comic-section .comic-group .image-primary {
width: 100%;
object-fit: cover;
max-width: 21.25rem;
height: 28.4375rem;
}
@media (min-width: 1024px) {
#homeContent .wrapper > .comic-section .comic-group .image-primary {
max-width: 17.7083333333vw;
height: 42.1296296296vh;
}
}
#homeContent .wrapper > .comic-section .comic-group .image-secondary {
display: none;
}
@media (min-width: 64rem) {
#homeContent .wrapper > .comic-section .comic-group .image-secondary {
display: block;
width: 18.0729166667vw;
height: 42.2222222222vh;
object-fit: cover;
}
}
@media (min-width: 64rem) {
#homeContent .wrapper > .comic-section .comic-group {
width: 36.6145833333vw;
height: 42.2222222222vh;
}
}
#homeContent .wrapper > .comic-section .comic-content {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
align-items: flex-start;
width: 100%;
gap: 0.9375rem;
}
@media (min-width: 64rem) {
#homeContent .wrapper > .comic-section .comic-content {
width: 626px;
gap: 30px;
}
}
#homeContent .wrapper > .comic-section .comic-content .title-group {
display: flex;
flex-direction: column;
align-items: flex-start;
width: 100%;
gap: 0.46875rem;
}
@media (min-width: 1024px) {
#homeContent .wrapper > .comic-section .comic-content .title-group {
gap: 0.6944444444vh;
}
}
#homeContent .wrapper > .comic-section .comic-content .title-group .title-gradient {
margin: 0;
font-family: "Comix Loud", Helvetica, sans-serif;
font-weight: 400;
background: linear-gradient(98.57deg, #FF4E00 -35.28%, #FF6600 3.79%, #FF9500 42.86%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
font-size: 1.25rem;
line-height: 2.625rem;
}
@media (min-width: 64rem) {
#homeContent .wrapper > .comic-section .comic-content .title-group .title-gradient {
font-size: 27px;
line-height: 57px;
}
}
#homeContent .wrapper > .comic-section .comic-content .title-group .title-sub {
font-family: "Sofia Pro", Helvetica, sans-serif;
font-weight: 400;
color: #ffffff;
font-size: 1.25rem;
letter-spacing: 0.2625rem;
line-height: 1.125rem;
}
@media (min-width: 64rem) {
#homeContent .wrapper > .comic-section .comic-content .title-group .title-sub {
font-size: 32.49pxrem;
letter-spacing: 6.82px;
line-height: 90%;
}
}
#homeContent .wrapper > .comic-section .comic-content .description {
margin: 0;
font-family: "Sofia Pro", Helvetica, sans-serif;
font-weight: 400;
color: #ffffff;
font-size: 1.25rem;
line-height: 1.75rem;
max-width: 33rem;
}
@media (min-width: 1024px) {
#homeContent .wrapper > .comic-section .comic-content .description {
font-size: 20px;
line-height: 28px;
max-width: 528px;
}
}
#homeContent .wrapper > .comic-section .comic-content .main-bouton {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
text-decoration: none;
border-radius: 6.25rem;
width: -webkit-fill-available;
height: 3.125rem;
padding: 0rem 1.875rem;
max-width: 25rem;
}
#homeContent .wrapper > .comic-section .comic-content .main-bouton:hover {
background: linear-gradient(270deg, #c2fd70 0%, #21e273 100%);
color: #151525;
}
#homeContent .wrapper > .comic-section .comic-content .main-bouton:hover > .bouton-text {
color: #151525;
}
@media (min-width: 64rem) {
#homeContent .wrapper > .comic-section .comic-content .main-bouton {
width: fit-content;
height: 4.6296296296vh;
padding: 0 1.5625vw;
border-radius: 5.2083333333vw;
max-width: 20.8333333333vw;
}
}
#homeContent .wrapper > .comic-section .comic-content .main-bouton::before {
content: "";
position: absolute;
inset: 0;
padding: 0.125rem; border-radius: inherit;
background: linear-gradient(270deg, #c2fd70 0%, #21e273 100%);
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
}
@media (min-width: 1024px) {
#homeContent .wrapper > .comic-section .comic-content .main-bouton::before {
padding: 0.1041666667vw;
}
}
#homeContent .wrapper > .comic-section .comic-content .main-bouton .bouton-text {
font-family: "Sofia Pro", Helvetica, sans-serif;
font-weight: 600;
color: #ffffff;
text-align: center;
white-space: nowrap;
font-size: 0.9125rem;
}
#homeContent .wrapper > .characters-section {
position: relative;
overflow: hidden;
background-color: #1c1c31;
padding: 3.75rem 1.875rem;
}
@media (min-width: 64rem) {
#homeContent .wrapper > .characters-section {
height: 68.1481481481vh;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
}
}
#homeContent .wrapper > .characters-section .bg-expressions {
position: absolute;
z-index: 1;
opacity: 1;
pointer-events: none;
left: 50%;
transform: translateX(-50%);
height: auto;
top: 0;
width: 100%;
max-width: 22rem;
}
@media (min-width: 64rem) {
#homeContent .wrapper > .characters-section .bg-expressions {
top: 0;
left: 29.7395833333vw;
width: 72.2916666667vw;
max-width: none;
transform: none;
}
}
#homeContent .wrapper > .characters-section .characters-container {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
width: 100%;
gap: 1.875rem;
}
@media (min-width: 64rem) {
#homeContent .wrapper > .characters-section .characters-container {
flex-direction: row-reverse;
justify-content: space-between;
align-items: center;
gap: 2.7777777778vh;
max-width: 1430px;
padding: 0 2rem;
margin: 0 auto;
}
}
#homeContent .wrapper > .characters-section .character-illustration {
display: flex;
justify-content: center;
width: 100%;
overflow: hidden;
}
@media (min-width: 64rem) {
#homeContent .wrapper > .characters-section .character-illustration {
width: 28.3333333333vw;
overflow: visible;
}
}
#homeContent .wrapper > .characters-section .character-illustration .circle-gradient {
position: relative;
border-radius: 50%;
overflow: hidden;
background: linear-gradient(90deg, #ff4e00 0%, #ff6600 50%, #ff9500 100%);
display: flex;
align-items: center;
justify-content: center;
width: min(21.375rem, 85vw);
height: min(21.4375rem, 85vw);
}
@media (min-width: 64rem) {
#homeContent .wrapper > .characters-section .character-illustration .circle-gradient {
overflow: visible;
width: 28.3333333333vw;
height: 28.4375vw;
}
}
#homeContent .wrapper > .characters-section .character-illustration .circle-gradient .main-character {
width: 120%;
height: auto;
position: relative;
z-index: 3;
}
#homeContent .wrapper > .characters-section .character-illustration .main-character {
width: -webkit-fill-available;
}
#homeContent .wrapper > .characters-section .character-content {
display: flex;
flex-direction: column;
align-items: flex-start;
width: 100%;
gap: 1.5625rem;
}
@media (min-width: 64rem) {
#homeContent .wrapper > .characters-section .character-content {
width: 32.6041666667vw;
gap: 2.3148148148vh;
}
}
#homeContent .wrapper > .characters-section .character-content .title-gradient {
margin: 0;
font-family: "Comix Loud", Helvetica, sans-serif;
font-weight: 400;
background: linear-gradient(98.57deg, #FF4E00 -35.28%, #FF6600 3.79%, #FF9500 42.86%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
font-size: 1.25rem;
line-height: 2.625rem;
text-transform: uppercase;
}
@media (min-width: 64rem) {
#homeContent .wrapper > .characters-section .character-content .title-gradient {
font-size: 27px;
line-height: 57px;
}
}
#homeContent .wrapper > .characters-section .character-content .text-block {
display: flex;
flex-direction: column;
gap: 1.25rem;
}
@media (min-width: 1024px) {
#homeContent .wrapper > .characters-section .character-content .text-block {
gap: 1.8518518519vh;
}
}
#homeContent .wrapper > .characters-section .character-content .text-block p {
margin: 0;
font-family: "Sofia Pro", Helvetica, sans-serif;
font-weight: 400;
color: #ffffff;
font-size: 1.25rem;
line-height: 1.75rem;
}
@media (min-width: 64rem) {
#homeContent .wrapper > .characters-section .character-content .text-block p {
font-size: 20px;
line-height: 30px;
}
}
#homeContent .wrapper > .characters-section .character-content .main-bouton {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
text-decoration: none;
border-radius: 6.25rem;
height: 3.125rem;
padding: 0rem 1.875rem;
margin-top: 0.625rem;
}
#homeContent .wrapper > .characters-section .character-content .main-bouton:hover {
background: linear-gradient(270deg, #c2fd70 0%, #21e273 100%);
color: #151525;
}
#homeContent .wrapper > .characters-section .character-content .main-bouton:hover > .bouton-text {
color: #151525;
}
@media (min-width: 1024px) {
#homeContent .wrapper > .characters-section .character-content .main-bouton {
height: 4.6296296296vh;
padding: 0 1.5625vw;
border-radius: 5.2083333333vw;
margin-top: 0.9259259259vh;
}
}
#homeContent .wrapper > .characters-section .character-content .main-bouton::before {
content: "";
position: absolute;
inset: 0;
padding: 0.125rem; border-radius: inherit;
background: linear-gradient(270deg, #c2fd70 0%, #21e273 100%);
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
}
@media (min-width: 1024px) {
#homeContent .wrapper > .characters-section .character-content .main-bouton::before {
padding: 0.1041666667vw;
}
}
#homeContent .wrapper > .characters-section .character-content .main-bouton .bouton-text {
font-family: "Sofia Pro", Helvetica, sans-serif;
font-weight: 600;
color: #ffffff;
white-space: nowrap;
font-size: 1.0375rem;
}
.little {
padding: 0.25rem 0.875rem !important;
}
.appImageBlured {
filter: blur(1.5rem);
}
.comingSoonText {
color: white;
width: fit-content;
position: absolute;
top: 0rem;
right: 0rem;
text-transform: uppercase;
font-weight: 400;
font-size: 1rem;
transform: translate(-100%, 21rem);
}
@media (min-width: 1024px) {
.comingSoonText {
font-size: 2rem;
transform: translate(-100%, 150%);
}
}


#comicWrapper {
width: 100%;
box-sizing: border-box;
margin: auto;
overflow-x: hidden;
}
#comicWrapper > #comics {
background: #26273B;
}
#comicWrapper > #comics > .comicHeader {
margin-bottom: 12px;
}
@media (min-width: 1024px) {
#comicWrapper > #comics > .comicHeader {
margin-bottom: 64px;
}
}
#comicWrapper > #comics > .comicHeader > h1 {
font-family: "comix loud", sans-serif;
font-size: 12px;
text-transform: uppercase;
text-align: end;
margin-bottom: 12px;
}
@media (min-width: 1024px) {
#comicWrapper > #comics > .comicHeader > h1 {
margin-bottom: 0;
}
}
#comicWrapper > #comics > .comicHeader > h1 > span {
font-family: "comix loud", sans-serif;
font-size: 12px;
text-transform: uppercase;
color: #FF4E00;
}
#comicWrapper > #comics > #comicNavigation {
position: relative;
display: none;
align-items: stretch;
width: 100%;
}
@media (min-width: 1024px) {
#comicWrapper > #comics > #comicNavigation {
display: flex;
}
}
#comicWrapper > #comics > #comicNavigation .storyVignette {
flex: 1;
position: relative;
display: flex;
text-decoration: none;
cursor: pointer;
background-size: cover;
background-position: center;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
border: 3px solid transparent;
transition: all 0.2s ease;
overflow: hidden;
padding: 32px;
}
#comicWrapper > #comics > #comicNavigation .storyVignette > .imgBgSaga {
position: absolute;
z-index: 0;
width: auto;
left: -14px;
top: 0px;
}
#comicWrapper > #comics > #comicNavigation .storyVignette::before {
content: "";
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.5);
transition: background 0.2s;
z-index: 0;
}
#comicWrapper > #comics > #comicNavigation .storyVignette .bdContent {
width: 100%;
position: relative;
z-index: 1;
opacity: 0.6;
transition: all ease 150ms;
padding-bottom: 10px;
text-align: center;
}
#comicWrapper > #comics > #comicNavigation .storyVignette .bdContent .bdTitle {
color: white;
font-family: "comix loud", sans-serif;
font-size: 8px;
text-transform: uppercase;
padding: 0 8px;
margin: 0;
text-shadow: 0px 4.37px 3.28px rgba(0, 0, 0, 0.2);
}
@media (min-width: 1024px) {
#comicWrapper > #comics > #comicNavigation .storyVignette .bdContent .bdTitle {
font-size: 11px;
}
}
#comicWrapper > #comics > #comicNavigation .storyVignette .bdContent .bdChapter {
display: inline-block;
border: 0.8px solid #FFFFFF;
border-radius: 10px;
font-family: "comix loud", sans-serif;
font-size: 8px;
text-transform: uppercase;
padding: 2px 8px;
margin-bottom: 4px;
}
#comicWrapper > #comics > #comicNavigation .storyVignette:hover {
border-color: #ffffff;
}
#comicWrapper > #comics > #comicNavigation .storyVignette:hover::before {
background: linear-gradient(179.46deg, rgba(0, 0, 0, 0) 0.46%, rgba(0, 0, 0, 0.3) 76.42%), linear-gradient(90deg, #FF4E00 0%, #FF6600 50%, #FF9500 100%) !important;
color: #ffffff;
}
#comicWrapper > #comics > #comicNavigation .storyVignette:hover .bdContent {
opacity: 1;
}
#comicWrapper > #comics > #comicNavigation .storyVignette.active {
border-color: #ffffff;
position: relative;
z-index: 1;
color: white;
}
#comicWrapper > #comics > #comicNavigation .storyVignette.active::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
border-radius: inherit;
color: #ffffff;   background: linear-gradient(179.46deg, rgba(0, 0, 0, 0) 0.46%, rgba(0, 0, 0, 0.3) 76.42%), linear-gradient(90deg, #FF4E00 0%, #FF6600 50%, #FF9500 100%) !important;
}
#comicWrapper > #comics > #comicNavigation .storyVignette.active > .bdContent {
opacity: 1;
}
#comicWrapper > #comics > #comicNavigation-bottom {
position: relative;
display: none;
align-items: stretch;
width: 100%;
}
@media (min-width: 1024px) {
#comicWrapper > #comics > #comicNavigation-bottom {
display: flex;
}
}
#comicWrapper > #comics > #comicNavigation-bottom .storyVignette {
flex: 1;
position: relative;
display: flex;
text-decoration: none;
cursor: pointer;
background-size: cover;
background-position: center;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
border: 3px solid transparent;
transition: all 0.2s ease;
overflow: hidden;
padding: 32px;
}
#comicWrapper > #comics > #comicNavigation-bottom .storyVignette > .imgBgSaga {
position: absolute;
z-index: 0;
width: auto;
left: -14px;
top: 0px;
}
#comicWrapper > #comics > #comicNavigation-bottom .storyVignette::before {
content: "";
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.5);
transition: background 0.2s;
z-index: 0;
}
#comicWrapper > #comics > #comicNavigation-bottom .storyVignette .bdContent {
width: 100%;
position: relative;
z-index: 1;
opacity: 0.6;
transition: all ease 150ms;
padding-bottom: 10px;
text-align: center;
}
#comicWrapper > #comics > #comicNavigation-bottom .storyVignette .bdContent .bdTitle {
color: white;
font-family: "comix loud", sans-serif;
font-size: 8px;
text-transform: uppercase;
padding: 0 8px;
margin: 0;
text-shadow: 0px 4.37px 3.28px rgba(0, 0, 0, 0.2);
}
@media (min-width: 1024px) {
#comicWrapper > #comics > #comicNavigation-bottom .storyVignette .bdContent .bdTitle {
font-size: 11px;
}
}
#comicWrapper > #comics > #comicNavigation-bottom .storyVignette .bdContent .bdChapter {
display: inline-block;
border: 0.8px solid #FFFFFF;
border-radius: 10px;
font-family: "comix loud", sans-serif;
font-size: 8px;
text-transform: uppercase;
padding: 2px 8px;
margin-bottom: 4px;
}
#comicWrapper > #comics > #comicNavigation-bottom .storyVignette:hover {
border-color: #ffffff;
}
#comicWrapper > #comics > #comicNavigation-bottom .storyVignette:hover::before {
background: linear-gradient(179.46deg, rgba(0, 0, 0, 0) 0.46%, rgba(0, 0, 0, 0.3) 76.42%), linear-gradient(90deg, #FF4E00 0%, #FF6600 50%, #FF9500 100%) !important;
color: #ffffff;
}
#comicWrapper > #comics > #comicNavigation-bottom .storyVignette:hover .bdContent {
opacity: 1;
}
#comicWrapper > #comics > #comicNavigation-bottom .storyVignette.active {
border-color: #ffffff;
position: relative;
z-index: 1;
color: white;
}
#comicWrapper > #comics > #comicNavigation-bottom .storyVignette.active::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
border-radius: inherit;
color: #ffffff;   background: linear-gradient(179.46deg, rgba(0, 0, 0, 0) 0.46%, rgba(0, 0, 0, 0.3) 76.42%), linear-gradient(90deg, #FF4E00 0%, #FF6600 50%, #FF9500 100%) !important;
}
#comicWrapper > #comics > #comicNavigation-bottom .storyVignette.active > .bdContent {
opacity: 1;
}
#comicWrapper > #comics > #board {
width: 100%;
}
#comicWrapper > #comics > .share {
display: flex;
align-items: center;
gap: 16px;
justify-content: space-between;
margin: 16px 0;
flex-direction: column;
}
@media (min-width: 1024px) {
#comicWrapper > #comics > .share {
flex-direction: row;
}
}
#comicWrapper > #comics > .share > .socialMedia {
display: flex;
position: relative;
align-items: center;
justify-content: center;
width: 100%;
padding: 12px 0;
border-radius: 8px;
background: black;
color: #FFFFFF;
text-decoration: none;
cursor: pointer;
}
@media (min-width: 1024px) {
#comicWrapper > #comics > .share > .socialMedia {
padding: 12px;
}
}
#comicWrapper > #comics > .share > .socialMedia > i {
position: absolute;
left: 16px;
}
#comicWrapper > #comics > .share > .socialMedia > p {
text-transform: uppercase;
font-size: 12px;
font-family: "comix loud", sans-serif;
text-shadow: 1px 1px #000;
}
#comicWrapper > #comics > .navigation {
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
margin: 16px 0;
flex-direction: column;
}
@media (min-width: 1024px) {
#comicWrapper > #comics > .navigation {
flex-direction: row;
}
}
#comicWrapper > #comics > .navigation > .prev {
display: flex;
align-items: center;
justify-content: space-between;
cursor: pointer;
background: #151525;
padding: 12px;
border-radius: 8px;
text-decoration: none;
width: 100%;
box-sizing: border-box;
}
#comicWrapper > #comics > .navigation > .prev > i {
margin-right: 16px;
}
#comicWrapper > #comics > .navigation > .prev > img {
width: 80px;
height: 60px;
object-fit: cover;
flex-shrink: 0;
}
@media (min-width: 1024px) {
#comicWrapper > #comics > .navigation > .prev > img {
width: 220px;
height: 140px;
}
}
#comicWrapper > #comics > .navigation > .prev > p {
font-size: 13px;
font-family: "comix loud", sans-serif;
text-transform: uppercase;
text-decoration: none;
margin-right: 8px;
align-self: baseline;
line-height: 1.4;
}
@media (min-width: 1024px) {
#comicWrapper > #comics > .navigation > .prev > p {
font-size: 16px;
line-height: normal;
}
}
#comicWrapper > #comics > .navigation > .prev:hover > p {
text-decoration: underline;
text-decoration-thickness: 5px;
text-underline-offset: 8px;
}
#comicWrapper > #comics > .navigation > .next {
display: flex;
align-items: center;
justify-content: space-between;
cursor: pointer;
background: #151525;
padding: 12px;
border-radius: 8px;
text-decoration: none;
width: 100%;
box-sizing: border-box;
}
#comicWrapper > #comics > .navigation > .next > p {
font-size: 13px;
font-family: "comix loud", sans-serif;
text-transform: uppercase;
text-decoration: none;
margin-left: 8px;
align-self: baseline;
line-height: 1.4;
}
@media (min-width: 1024px) {
#comicWrapper > #comics > .navigation > .next > p {
font-size: 16px;
line-height: normal;
}
}
#comicWrapper > #comics > .navigation > .next:hover > p {
text-decoration: underline;
text-decoration-thickness: 5px;
text-underline-offset: 8px;
}
#comicWrapper > #comics > .navigation > .next > i {
margin-left: 16px;
}
#comicWrapper > #comics > .navigation > .next > img {
width: 80px;
height: 60px;
object-fit: cover;
flex-shrink: 0;
}
@media (min-width: 1024px) {
#comicWrapper > #comics > .navigation > .next > img {
width: 220px;
height: 140px;
}
}
#comicWrapper > #comics > .navigation > .blank {
background: transparent !important;
}
#comicWrapper > #comics > .trueStory {
padding: 16px;
}
@media (min-width: 1024px) {
#comicWrapper > #comics > .trueStory {
padding: 60px;
}
}
#comicWrapper > #comics > .trueStory > .gutenberg-content {
display: flex;
flex-direction: column;
gap: 24px;
}
@media (min-width: 1024px) {
#comicWrapper > #comics > .trueStory > .gutenberg-content {
gap: 60px;
}
}
#comicWrapper > #comics > .trueStory > .gutenberg-content > h1 {
font-weight: 700;
font-size: 28px;
line-height: 1.3;
letter-spacing: 0;
color: #21E273;
}
@media (min-width: 1024px) {
#comicWrapper > #comics > .trueStory > .gutenberg-content > h1 {
font-size: 50px;
line-height: 60px;
}
}
#comicWrapper > #comics > .trueStory > .gutenberg-content > h2 {
font-weight: 400;
color: #fff;
display: flex;
flex-direction: column;
font-size: 22px;
}
@media (min-width: 1024px) {
#comicWrapper > #comics > .trueStory > .gutenberg-content > h2 {
font-size: revert;
}
}
#comicWrapper > #comics > .trueStory > .gutenberg-content > h2 .main-title {
color: #fff;
display: block;
line-height: 1.3;
}
#comicWrapper > #comics > .trueStory > .gutenberg-content > h2 > .sub-title {
display: block;
color: #21E273;
font-family: "Comix Loud", sans-serif !important;
font-size: 36px;
line-height: 1.8;
margin-top: 6px;
transform: rotate(-2deg);
transform-origin: left center;
text-transform: uppercase;
}
@media (min-width: 1024px) {
#comicWrapper > #comics > .trueStory > .gutenberg-content > h2 > .sub-title {
font-size: revert;
line-height: 1;
margin-top: 10px;
}
}
#comicWrapper > #comics > .trueStory > .gutenberg-content > h3 {
font-weight: 700;
font-size: 20px;
line-height: 1.3;
letter-spacing: 0;
color: #21E273;
}
@media (min-width: 1024px) {
#comicWrapper > #comics > .trueStory > .gutenberg-content > h3 {
font-size: 30px;
line-height: 38px;
}
}
#comicWrapper > #comics > .trueStory > .gutenberg-content > .content-block {
display: flex;
flex-direction: column;
gap: 16px;
}
#comicWrapper > #comics > .trueStory > .gutenberg-content > .content-block h2 {
font-weight: 700;
font-size: 50px;
line-height: 60px;
letter-spacing: 0;
vertical-align: middle;
color: #21E273;
}
#comicWrapper > #comics > .trueStory > .gutenberg-content > .content-block h3 {
font-weight: 700;
font-size: 30px;
line-height: 38px;
letter-spacing: 0;
vertical-align: middle;
color: #21E273;
}
#comicWrapper > #comics > .trueStory > .gutenberg-content > .content-block h4 {
font-weight: 700;
font-size: 20px;
line-height: 100%;
vertical-align: middle;
color: #21E273;
}
#comicWrapper > #comics > .trueStory > .gutenberg-content > .content-block p {
font-weight: 400;
font-size: 16px;
line-height: 26px;
letter-spacing: 0;
vertical-align: middle;
}
#comicWrapper > #comics > .trueStory > h1 {
font-weight: 700;
font-size: 50px;
line-height: 60px;
letter-spacing: 0;
vertical-align: middle;
color: #21E273;
}
#comicWrapper > #comics > .trueStory > h2 {
font-weight: 700;
font-size: 50px;
line-height: 60px;
letter-spacing: 0;
vertical-align: middle;
color: #21E273;
}
#comicWrapper > #comics > .trueStory > h3 {
font-weight: 700;
font-size: 30px;
line-height: 38px;
letter-spacing: 0;
vertical-align: middle;
color: #21E273;
}
#comicWrapper > #comics > #comments {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 24px;
padding: 16px;
}
@media (min-width: 1024px) {
#comicWrapper > #comics > #comments {
padding: 60px 120px;
}
}
#comicWrapper > #comics > #comments > #title-comments {
font-weight: 700;
font-size: 22px;
line-height: 1.3;
}
@media (min-width: 1024px) {
#comicWrapper > #comics > #comments > #title-comments {
font-size: 30px;
line-height: 38px;
}
}
#comicWrapper > #comics > #comments > #title-comments {
letter-spacing: 0;
vertical-align: middle;
color: #21E273;
text-align: center;
}
#comicWrapper > #comics > .containerMedias {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 30px;
padding: 16px;
}
#comicWrapper > #comics > .containerMedias > p {
font-weight: 700;
font-size: 25px;
line-height: 28px;
letter-spacing: 0;
text-align: center;
vertical-align: middle;
color: #21E273;
}
#comicWrapper > #comics > .separator {
height: 60px;
background: #1C1C31;
width: 100%;
}
.characterAssociated {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 60px;
border-radius: 10px;
width: 100%;
}
@media (min-width: 1024px) {
.characterAssociated {
padding: 60px 0;
}
}
.characterAssociated > h2 {
background: #1C1C31;
font-family: "comix loud", sans-serif;
text-transform: uppercase;
border-radius: 8px;
font-size: 18px;
line-height: 48px;
}
@media (min-width: 1024px) {
.characterAssociated > h2 {
padding: 24px;
line-height: normal;
}
}
.characterAssociated > .characterWrapper {
display: flex;
flex-direction: column;
gap: 24px;
margin: 16px 0;
}
@media (min-width: 1024px) {
.characterAssociated > .characterWrapper {
gap: 60px;
margin: 24px 0;
}
}
.characterAssociated > .characterWrapper {
width: 100%;
}
.characterAssociated > .characterWrapper > h2 {
font-weight: 700;
font-size: 30px;
line-height: 38px;
color: #21E273;
text-align: center;
}
.characterAssociated > .characterWrapper > div {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 15px;
}
@media (min-width: 1024px) {
.characterAssociated > .characterWrapper > div {
flex-direction: row;
flex-wrap: wrap;
}
}
.characterAssociated > .characterWrapper .characterContainer {
display: flex;
flex-direction: column;
width: 260px;
min-height: auto;
cursor: pointer;
text-decoration: none;
background: radial-gradient(46.71% 87.78% at 53.28% 62.76%, #595977 0%, #26273B 100%);
border-radius: 8px;
overflow: hidden;
}
.characterAssociated > .characterWrapper .characterContainer > img {
display: block;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
opacity: 50%;
top: -282px;
left: -172px;
background-size: cover;
scale: 1.5;
height: 60%;
filter: grayscale(100%) brightness(0.8);
transition: filter 0.4s ease, brightness 0.4s ease;
}
.characterAssociated > .characterWrapper .characterContainer .characterDetail {
padding: 15px;
background: linear-gradient(to top, #151525 10%, rgba(21, 21, 37, 0.8) 80%, transparent 100%);
min-height: 221px;
}
.characterAssociated > .characterWrapper .characterContainer .characterDetail > .no-underline > .buttonWrapper > .outlineButton {
width: auto !important;
}
.characterAssociated > .characterWrapper .characterContainer .characterDetail h2 {
font-family: "comix loud", sans-serif;
text-transform: uppercase;
font-size: 11px;
color: #fff;
margin-bottom: 10px;
}
.characterAssociated > .characterWrapper .characterContainer .characterDetail > .specRow > .specLabel {
font-size: revert-layer;
}
.characterAssociated > .characterWrapper .characterContainer:hover {
transform: none !important;
transition: none !important;
}
.characterAssociated > .characterWrapper .characterContainer:hover > img {
filter: grayscale(0%) brightness(1);
opacity: 100%;
}
.characterAssociated > .characterWrapper .characterContainer:hover > .characterDetail {
background: linear-gradient(90deg, #FF4E00 0%, #FF6600 50%, #FF9500 100%), linear-gradient(179.46deg, rgba(0, 0, 0, 0) 0.46%, rgba(0, 0, 0, 0.3) 76.42%);
}
@media (min-width: 1024px) {
figure > img {
max-width: unset !important;
}
}
.wp-block-list {
line-height: 26px;
}
.wp-block-list > li {
margin-left: 24px;
}
@media all and (max-width: 992px) {
.wp-block-group {
flex-direction: column;
}
}
.wp-block-group > h3 {
font-weight: 700;
font-size: 30px;
line-height: 38px;
letter-spacing: 0;
vertical-align: middle;
color: #21E273;
}
.wp-block-group > h4 {
font-weight: 700;
font-size: 20px;
line-height: 100%;
vertical-align: middle;
color: #21E273;
}
.wp-block-group > p {
font-weight: 400;
font-size: 16px;
line-height: 26px;
letter-spacing: 0;
vertical-align: middle;
}
.form-submit {
display: flex;
justify-content: center;
width: 100%;
margin-top: 20px;
}
.form-submit #submit {
opacity: 0.5;
transition: opacity 0.3s ease, background 0.3s ease;
cursor: pointer;
}
.form-submit #submit:hover {
opacity: 1 !important;
background: linear-gradient(270deg, #C2FD70 0%, #21E273 100%) !important;
color: #1c1c31 !important;
}
.btn-next-comic-mobile {
display: flex;
align-items: center;
justify-content: center;
width: 190px;
height: 50px;
margin: 24px auto 0;
padding: 20px 30px;
box-sizing: border-box;
border-radius: 100px;
border: 1px solid transparent;
background-image: linear-gradient(#26273B, #26273B), linear-gradient(270deg, #C2FD70 0%, #21E273 100%);
background-origin: border-box;
background-clip: padding-box, border-box;
text-decoration: none;
font-family: "Sofia Pro", sans-serif;
font-weight: 600;
font-size: 16.59px;
line-height: 100%;
letter-spacing: 0;
text-align: center;
text-transform: uppercase;
color: #FFFFFF;
gap: 10px;
}
@media (min-width: 1024px) {
.btn-next-comic-mobile {
display: none;
}
}
.imgBg {
display: none;
position: absolute;
z-index: -1;
width: -webkit-fill-available;
}
@media (min-width: 1024px) {
.imgBg {
display: block;
}
}
.imgBgMobile {
position: absolute;
z-index: -1;
width: -webkit-fill-available;
}
@media (min-width: 1024px) {
.imgBgMobile {
display: none;
}
}
.fillButton {
width: fit-content;
}
.wrapper {
background: none !important;
}
.wrapper > .content {
justify-content: center;
}
.pageWrapper > .pageTitle {
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
gap: 15px;
margin-top: 32px;
}   #historyContainer .outlineButton > .iconContainer {
bottom: -2px;
}
#historyContainer .outlineButton:hover > .iconContainer > .icon-hover:before {
content: "";
width: 14px;
height: 2px;
display: block;
background: #151525 !important;
position: absolute;
top: 45% !important;
opacity: 1;
}
#historyContainer {
display: flex;
flex-direction: column;
}
@media (min-width: 1024px) {
#historyContainer {
flex-direction: row;
background: #26273B;
padding: 60px !important;
min-width: 1290px;
}
}
#historyContainer > .leftPart {
display: flex;
flex-direction: column;
gap: 16px;
}
@media (min-width: 1024px) {
#historyContainer > .leftPart {
flex: 0 0 400px;
}
}
#historyContainer > .leftPart > .leftPart-top.sagaNav {
display: flex;
flex-direction: column;
gap: 12px;
}
@media (min-width: 1024px) {
#historyContainer > .leftPart > .leftPart-top.sagaNav {
flex-direction: row;
flex-wrap: wrap;
gap: 16px;
}
}
#historyContainer > .leftPart > .leftPart-top.sagaNav > .sagaTab {
position: relative;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
border: 2px solid #555;
cursor: pointer;
transition: all 0.3s ease;
width: 100%;
box-sizing: border-box;
height: 80px;
}
@media (min-width: 1024px) {
#historyContainer > .leftPart > .leftPart-top.sagaNav > .sagaTab {
height: 100px;
width: -webkit-fill-available;
}
}
#historyContainer > .leftPart > .leftPart-top.sagaNav > .sagaTab {
border-radius: 10px;
opacity: 1;
}
#historyContainer > .leftPart > .leftPart-top.sagaNav > .sagaTab > .imgBgSaga {
position: absolute;
z-index: 0;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 10px;
}
#historyContainer > .leftPart > .leftPart-top.sagaNav > .sagaTab > h2 {
font-weight: 500;
font-size: 13px;
line-height: 90%;
letter-spacing: 3px;
text-align: center;
vertical-align: middle;
text-transform: uppercase;
position: relative;
z-index: 1;
}
@media (min-width: 1024px) {
#historyContainer > .leftPart > .leftPart-top.sagaNav > .sagaTab > h2 {
font-size: 16px;
letter-spacing: 4px;
}
}
#historyContainer > .leftPart > .leftPart-top.sagaNav > .sagaTab > .sagaName {
font-family: Comix Loud, sans-serif;
font-weight: 400;
font-size: 18px;
line-height: 40px;
vertical-align: middle;
text-transform: uppercase;
letter-spacing: 0;
color: #FFFFFF;
text-shadow: 0px 4px 3px rgba(0, 0, 0, 0.2);
position: relative;
z-index: 1;
}
@media (min-width: 1024px) {
#historyContainer > .leftPart > .leftPart-top.sagaNav > .sagaTab > .sagaName {
font-size: 22px;
line-height: 50px;
}
}
#historyContainer > .leftPart > .leftPart-top.sagaNav > .sagaTab.active {
border: 1px solid #FFFFFF;
background: linear-gradient(90deg, #FF4E00 0%, #FF6600 50%, #FF9500 100%);
}
#historyContainer > .leftPart > .leftPart-top.sagaNav > .sagaTab.active > .sagaName {
font-family: "comix loud", sans-serif;
color: #FFFFFF;
transform: rotate(-2deg);
}
#historyContainer > .leftPart > .leftPart-bottom.sagaDetailsWrapper > .sagaDetails {
padding: 16px;
}
@media (min-width: 1024px) {
#historyContainer > .leftPart > .leftPart-bottom.sagaDetailsWrapper > .sagaDetails {
padding: 24px;
}
}
#historyContainer > .leftPart > .leftPart-bottom.sagaDetailsWrapper > .sagaDetails {
border-radius: 4px;
}
#historyContainer > .leftPart > .leftPart-bottom.sagaDetailsWrapper > .sagaDetails > p {
font-weight: 300;
font-size: 16px;
line-height: 140%;
letter-spacing: 0;
}
@media (min-width: 1024px) {
#historyContainer > .leftPart > .leftPart-bottom.sagaDetailsWrapper > .sagaDetails > p {
font-size: 18px;
line-height: 100%;
}
}
#historyContainer > .leftPart > .leftPart-bottom.sagaDetailsWrapper > .sagaDetails > .sagaInfo > p {
font-weight: 300;
font-size: 16px;
line-height: 140%;
letter-spacing: 0;
}
@media (min-width: 1024px) {
#historyContainer > .leftPart > .leftPart-bottom.sagaDetailsWrapper > .sagaDetails > .sagaInfo > p {
font-size: 18px;
line-height: 100%;
}
}
#historyContainer > .leftPart > .leftPart-bottom.sagaDetailsWrapper > .sagaDetails > .sagaInfo > p > span {
opacity: 0.5;
font-weight: 300;
font-size: 16px;
line-height: 140%;
letter-spacing: 0;
}
@media (min-width: 1024px) {
#historyContainer > .leftPart > .leftPart-bottom.sagaDetailsWrapper > .sagaDetails > .sagaInfo > p > span {
font-size: 18px;
line-height: 100%;
}
}
#historyContainer > .leftPart > .leftPart-bottom.sagaDetailsWrapper > .sagaDetails.inactive {
display: none;
}
#historyContainer > .leftPart > .leftPart-bottom.sagaDetailsWrapper > .sagaDetails.active {
display: flex;
flex-direction: column;
gap: 12px;
}
#historyContainer > .rightPartWrapper {
flex: 1;
}
#historyContainer > .rightPartWrapper > .rightPart {
padding: 16px;
width: 100%;
box-sizing: border-box;
border-radius: 8px;
}
@media (min-width: 1024px) {
#historyContainer > .rightPartWrapper > .rightPart {
padding: 0 42px 42px;
width: 100%;
}
}
#historyContainer > .rightPartWrapper > .rightPart.inactive {
display: none;
}
#historyContainer > .rightPartWrapper > .rightPart.active {
display: block;
}
#historyContainer > .rightPartWrapper > .rightPart > h3 {
margin-bottom: 16px;
}
#historyContainer > .rightPartWrapper > .rightPart > .chapterContainer {
display: flex;
flex-direction: column;
gap: 16px;
}
@media all and (min-width: 992px) {
#historyContainer > .rightPartWrapper > .rightPart > .chapterContainer {
flex-direction: row;
flex-wrap: wrap;
gap: 32px;
}
}
#historyContainer > .rightPartWrapper > .rightPart > .chapterContainer > .bdWrapper {
display: flex;
flex-direction: column;
opacity: 1;
border-radius: 10px;
gap: 11px;
padding: 16px;
border: 1px solid #8E90B9;
width: 100%;
box-sizing: border-box;
}
@media all and (min-width: 992px) {
#historyContainer > .rightPartWrapper > .rightPart > .chapterContainer > .bdWrapper {
width: fit-content;
padding: 18px;
}
}
#historyContainer > .rightPartWrapper > .rightPart > .chapterContainer > .bdWrapper > img {
opacity: 1;
background: rgba(0, 0, 0, 0.3019607843);
width: 100%;
height: auto;
border-radius: 6px;
}
@media all and (min-width: 992px) {
#historyContainer > .rightPartWrapper > .rightPart > .chapterContainer > .bdWrapper > img {
max-width: 300px;
}
}
#historyContainer > .rightPartWrapper > .rightPart > .chapterContainer > .bdWrapper > .bdContent {
display: flex;
flex-direction: column;
gap: 7.5px;
}
@media all and (min-width: 992px) {
#historyContainer > .rightPartWrapper > .rightPart > .chapterContainer > .bdWrapper > .bdContent {
max-width: 300px;
}
}
#historyContainer > .rightPartWrapper > .rightPart > .chapterContainer > .bdWrapper > .bdContent > .bdPosition {
width: fit-content;
opacity: 1;
border-radius: 15.42px;
padding: 5.51px 11.02px 3.3px;
gap: 7.34px;
border: 0.73px solid #FFFFFF;
font-family: Comix Loud, sans-serif;
font-weight: 400;
font-size: 6.61px;
line-height: 100%;
letter-spacing: 0;
vertical-align: middle;
text-transform: uppercase;
}
#historyContainer > .rightPartWrapper > .rightPart > .chapterContainer > .bdWrapper > .bdContent > .tile {
font-weight: 400;
font-size: 18px;
line-height: 120%;
letter-spacing: 0;
}
@media (min-width: 1024px) {
#historyContainer > .rightPartWrapper > .rightPart > .chapterContainer > .bdWrapper > .bdContent > .tile {
font-size: 20px;
line-height: 100%;
}
}
#historyContainer > .rightPartWrapper > .rightPart > .chapterContainer > .bdWrapper > .bdContent > .desc {
font-weight: 300;
font-size: 13px;
line-height: 17px;
letter-spacing: 0;
opacity: 0.5;
}
#historyContainer > .rightPartWrapper > .rightPart > .chapterContainer > .bdWrapper > .no-underline {
display: flex;
justify-content: flex-end;
}
#historyContainer > .rightPartWrapper > .rightPart > .chapterContainer > .bdWrapper > .no-underline > .outlineButton {
width: auto;
border-width: 0.5px;
height: 28px;
padding: 0 15px;
font-weight: 400;
font-size: 12px;
line-height: 100%;
letter-spacing: 0;
text-align: center;
vertical-align: middle;
}
#historyContainer > .rightPartWrapper > .rightPart > .comingSoon {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-height: 200px;
overflow: hidden;
border-radius: 4px;
gap: 16px;
}
#historyContainer > .rightPartWrapper > .rightPart > .comingSoon > p {
font-weight: 700;
font-size: 22px;
line-height: 1.4;
letter-spacing: 0;
text-transform: uppercase;
flex-shrink: 0;
color: #21E273;
}
@media (min-width: 1024px) {
#historyContainer > .rightPartWrapper > .rightPart > .comingSoon > p {
font-size: 30px;
line-height: 60px;
}
}
#historyContainer > .rightPartWrapper > .rightPart > .comingSoon > img {
mix-blend-mode: color-dodge;
width: 100%;
flex-grow: 1;
min-height: 0;
object-fit: cover;
}
@media all and (min-width: 992px) {
#historyContainer > .rightPartWrapper > .rightPart > .comingSoon > img {
width: 60%;
}
}html {
overflow-x: hidden;
}
.pageWrapperClassement {
min-height: 100vh;
padding: 0 330px;
}
@media (max-width: 1024px) {
.pageWrapperClassement {
padding: 0 40px;
}
}
@media (max-width: 768px) {
.pageWrapperClassement {
padding: 0;
}
}
.pageWrapperClassement .contentWrapper {
margin: 0 auto;
padding: 0 20px;
text-align: center;
color: #FFFFFF;
font-family: "Inter", sans-serif;
position: relative;
width: 100%;
}
@media (max-width: 768px) {
.pageWrapperClassement .contentWrapper {
padding: 0 16px;
width: -webkit-fill-available;
}
}
.pageWrapperClassement .heroClassement {
padding: 60px 0 40px;
}
@media (max-width: 768px) {
.pageWrapperClassement .heroClassement {
padding: 30px 0 24px;
}
}
.pageWrapperClassement .heroClassement h1 {
font-family: "sofia-pro", sans-serif;
font-size: 72px;
font-weight: 700;
width: 852px;
margin: 0 auto 20px;
text-align: center;
}
@media (max-width: 1024px) {
.pageWrapperClassement .heroClassement h1 {
font-size: 48px;
width: 100%;
}
}
@media (max-width: 768px) {
.pageWrapperClassement .heroClassement h1 {
font-size: 32px;
width: 100%;
}
}
.pageWrapperClassement .heroClassement h1 .vert {
color: #21E273;
}
.pageWrapperClassement .countrySelector {
display: flex;
justify-content: center;
gap: 15px;
margin: 30px 0;
}
@media (max-width: 768px) {
.pageWrapperClassement .countrySelector {
gap: 8px;
margin: 16px 0;
flex-wrap: wrap;
}
}
.pageWrapperClassement .countrySelector a {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 16px;
border-radius: 10px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid #3F415E;
text-decoration: none;
color: #8E90B9;
font-size: 14px;
transition: 0.3s;
}
@media (max-width: 768px) {
.pageWrapperClassement .countrySelector a {
padding: 6px 12px;
font-size: 13px;
}
}
.pageWrapperClassement .countrySelector a:hover, .pageWrapperClassement .countrySelector a.active {
border-color: #21E273;
color: #21E273;
background: rgba(33, 226, 115, 0.1);
}
.pageWrapperClassement .heroDesc {
color: #FFFFFF;
margin-bottom: 30px;
font-size: 17px;
font-weight: 400;
}
.pageWrapperClassement .outlineButton {
font-family: "sofia-pro", sans-serif;
font-weight: 600;
font-size: 16px;
width: auto !important;
}
.pageWrapperClassement .btnHero {
display: inline-block;
padding: 12px 28px;
border: 1px solid #2D2E45;
background: rgba(255, 255, 255, 0.05);
color: #FFFFFF;
border-radius: 50px;
text-decoration: none;
font-size: 14px;
transition: 0.3s;
}
.pageWrapperClassement .btnHero:hover {
background: #21E273;
color: #0D0E25;
border-color: #21E273;
}
.pageWrapperClassement .podiumContainer {
position: relative;
border-radius: 20px;
padding: 60px 20px 80px;
margin-bottom: 80px;
overflow: visible;
border: 1px solid transparent;
background: linear-gradient(#26273B, #26273B) padding-box, linear-gradient(90deg, #FF4E00 0%, #FF6600 50%, #FF9500 100%) border-box;
}
@media (max-width: 768px) {
.pageWrapperClassement .podiumContainer {
padding: 30px 16px 40px;
margin-bottom: 40px;
}
}
.pageWrapperClassement .podiumContainer h3 {
text-align: center;
font-family: "sofia-pro", sans-serif;
font-size: 26px;
margin-bottom: 60px;
position: relative;
z-index: 5;
}
@media (max-width: 768px) {
.pageWrapperClassement .podiumContainer h3 {
font-size: 20px;
margin-bottom: 30px;
}
}
.pageWrapperClassement .podiumContainer h3 .orange {
color: #FF6600;
font-weight: 800;
}
.pageWrapperClassement .podiumContainer .coin-1 {
width: 73px;
height: 70px;
top: 124px;
left: 64px;
}
.pageWrapperClassement .podiumContainer .coin-2 {
width: 107px;
height: 104px;
top: 246px;
left: 119px;
}
.pageWrapperClassement .podiumContainer .coin-3 {
width: 63px;
height: 60px;
top: 421px;
left: 55px;
}
.pageWrapperClassement .podiumContainer .coin-4 {
width: 62px;
height: 60px;
top: 563px;
left: 157px;
}
.pageWrapperClassement .podiumContainer .coin-1r {
width: 73px;
height: 70px;
top: 91px;
left: 1160px;
}
.pageWrapperClassement .podiumContainer .coin-2r {
width: 107px;
height: 104px;
top: 210px;
left: 1040px;
}
.pageWrapperClassement .podiumContainer .coin-3r {
width: 63px;
height: 60px;
top: 373px;
left: 1143px;
}
.pageWrapperClassement .podiumContainer .coin-4r {
width: 62px;
height: 60px;
top: 563px;
left: 1064px;
}
@media (max-width: 768px) {
.pageWrapperClassement .podiumContainer .coin-1, .pageWrapperClassement .podiumContainer .coin-2, .pageWrapperClassement .podiumContainer .coin-3, .pageWrapperClassement .podiumContainer .coin-4,
.pageWrapperClassement .podiumContainer .coin-1r, .pageWrapperClassement .podiumContainer .coin-2r, .pageWrapperClassement .podiumContainer .coin-3r, .pageWrapperClassement .podiumContainer .coin-4r {
display: none;
}
}
.pageWrapperClassement .podiumWrapper {
display: flex;
align-items: flex-start;
justify-content: center;
gap: 25px;
margin: 0 auto;
position: relative;
z-index: 2;
}
@media (max-width: 768px) {
.pageWrapperClassement .podiumWrapper {
flex-direction: column;
align-items: center;
gap: 16px;
}
.pageWrapperClassement .podiumWrapper > img {
display: none;
}
}
.pageWrapperClassement .podiumCard {
background: linear-gradient(180deg, #FF9900 0%, #FF5500 100%);
border-radius: 5px;
padding: 30px 20px;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
position: relative;
color: #FFFFFF;
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
transition: transform 0.3s;
}
.pageWrapperClassement .podiumCard.rank-1 {
width: 232px;
height: 452px;
margin-top: 0;
}
.pageWrapperClassement .podiumCard.rank-2 {
width: 232px;
height: 404px;
margin-top: 50px;
}
.pageWrapperClassement .podiumCard.rank-3 {
width: 232px;
height: 360px;
margin-top: 100px;
}
@media (max-width: 768px) {
.pageWrapperClassement .podiumCard {
width: 90% !important;
max-width: 340px;
height: auto !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
padding: 20px 16px;
}
.pageWrapperClassement .podiumCard.rank-1 {
order: 1;
}
.pageWrapperClassement .podiumCard.rank-2 {
order: 2;
}
.pageWrapperClassement .podiumCard.rank-3 {
order: 3;
}
}
.pageWrapperClassement .avatar-box {
position: relative;
width: 130px;
height: 130px;
margin-bottom: 30%;
}
@media (max-width: 768px) {
.pageWrapperClassement .avatar-box {
width: 90px;
height: 90px;
margin-bottom: 40px;
margin-top: 0;
}
}
.pageWrapperClassement .avatar-box .img-border {
width: 100%;
height: 100%;
border-radius: 50%;
padding: 5px;
background: linear-gradient(135deg, #FFD700 0%, #FF6600 100%);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}
.pageWrapperClassement .avatar-box img {
width: 100%;
height: 100%;
border-radius: 50%;
object-fit: cover;
display: block;
background: #fff;
}
.pageWrapperClassement .rank-badge {
position: absolute;
bottom: -32px;
left: 50%;
transform: translateX(-50%);
width: 42px;
height: 42px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0px 1.47px 16.19px 0px #000000;
z-index: 2;
}
.pageWrapperClassement .rank-badge.list-badge {
position: relative;
bottom: auto;
left: auto;
transform: none;
z-index: 1;
}
.pageWrapperClassement .rank-badge::before {
content: "";
position: absolute;
inset: -3px;
border-radius: 50%;
background: linear-gradient(189.36deg, #FCCC03 -40.84%, #FC6400 59.47%);
z-index: 1;
}
.pageWrapperClassement .rank-badge::after {
content: "";
position: absolute;
inset: 0;
border-radius: 50%;
background: #1A1B2F;
z-index: 2;
}
.pageWrapperClassement .rank-number {
position: relative;
z-index: 3;
font-family: "comix loud", sans-serif;
font-weight: 400;
font-size: 15.77px;
line-height: 1;
text-transform: uppercase;
background: linear-gradient(189.36deg, #FCCC03 -40.84%, #FC6400 59.47%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
height: -webkit-fill-available;
display: flex;
align-items: center;
}
.pageWrapperClassement .simple-rank {
font-weight: 400;
font-size: 20px;
color: #FFFFFF;
width: 42px;
height: 42px;
display: flex;
align-items: center;
justify-content: center;
}
.pageWrapperClassement .expert-info {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
flex-grow: 1;
justify-content: space-between;
}
.pageWrapperClassement .name-row {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
margin-top: 5px;
}
.pageWrapperClassement .name {
font-family: "sofia-pro", sans-serif;
font-weight: 800;
font-size: 18px;
margin: 0;
text-transform: capitalize;
line-height: 1.2;
}
.pageWrapperClassement .linkedin-btn {
display: flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
background: #FFFFFF;
border-radius: 4px;
color: #FF6600;
font-size: 14px;
text-decoration: none;
transition: 0.2s;
font-weight: 700;
line-height: 26px;
letter-spacing: 0%;
vertical-align: middle;
}
.pageWrapperClassement .linkedin-btn:hover {
transform: scale(1.1);
}
.pageWrapperClassement .divider {
width: 162px;
height: 0;
border: 1px solid #FFFFFF;
margin: 20px 0;
}
.pageWrapperClassement .certif-title {
font-weight: 400;
font-size: 16px;
line-height: 23px;
letter-spacing: 0%;
text-align: center;
vertical-align: middle;
}
.pageWrapperClassement .xp-pill {
display: flex;
align-items: center;
gap: 4.4px;
padding: 3px 10px;
border-radius: 50px;
border: 1px solid rgba(255, 255, 255, 0.5);
color: #FFFFFF;
width: 150px;
height: 32px;
justify-content: center;
font-weight: 400;
font-size: 17.3px;
line-height: 100%;
letter-spacing: 0%;
vertical-align: middle;
}
.pageWrapperClassement .xp-pill .coin-icon {
width: 30px;
height: 30px;
}
.pageWrapperClassement .xp-pill .coin-icon > img {
width: -webkit-fill-available;
}
.pageWrapperClassement .rankingListContainer {
margin-top: 50px;
text-align: left;
background: #26273B;
border-radius: 10px;
padding: 60px 120px;
}
@media (max-width: 1024px) {
.pageWrapperClassement .rankingListContainer {
padding: 40px 30px;
}
}
@media (max-width: 768px) {
.pageWrapperClassement .rankingListContainer {
padding: 24px 12px;
margin-top: 24px;
}
}
.pageWrapperClassement .rankingListContainer h3 {
text-align: center;
font-size: 24px;
margin-bottom: 40px;
color: #FFFFFF;
}
@media (max-width: 768px) {
.pageWrapperClassement .rankingListContainer h3 {
font-size: 18px;
margin-bottom: 20px;
}
}
.pageWrapperClassement .list-header {
display: grid;
grid-template-columns: 60px 2fr 2fr 2fr 1fr;
padding: 0 20px 10px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
margin-bottom: 10px;
color: #8E90B9;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 1px;
}
@media (max-width: 768px) {
.pageWrapperClassement .list-header {
display: none;
}
}
.pageWrapperClassement .col {
padding: 0 10px;
}
.pageWrapperClassement .col-rank {
text-align: center;
display: flex;
align-items: center;
justify-content: center;
padding-top: 4px;
}
.pageWrapperClassement .col-profile {
display: flex;
align-items: flex-start;
gap: 15px;
}
.pageWrapperClassement .col-certif {
font-size: 14px;
opacity: 0.9;
display: flex;
align-items: center;
}
.pageWrapperClassement .col-progress {
display: flex;
align-items: center;
gap: 15px;
}
.pageWrapperClassement .col-action {
text-align: right;
display: flex;
align-items: center;
justify-content: flex-end;
}
.pageWrapperClassement .rank-row {
display: flex;
padding: 15px 20px;
margin-bottom: 10px;
transition: transform 0.2s;
align-items: stretch;
}
.pageWrapperClassement .rank-row:hover {
transform: scale(1.01);
}
.pageWrapperClassement .rank-row.top-row {
background: linear-gradient(90deg, #FF4E00 0%, #FF6600 50%, #FF9500 100%);
box-shadow: 0 4px 15px rgba(255, 102, 0, 0.3);
color: #FFFFFF;
border: none;
padding: 20px 30px;
display: flex;
flex-direction: column;
}
.pageWrapperClassement .rank-row.top-row .col-top {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
width: 100%;
}
.pageWrapperClassement .rank-row.top-row .top-row-divider {
height: 1px;
background: rgba(255, 255, 255, 0.4);
margin: 16px 0;
width: 100%;
}
.pageWrapperClassement .rank-row.top-row .profile-details {
width: max-content;
display: flex;
align-items: center;
flex-direction: row;
}
.pageWrapperClassement .rank-row.top-row .col-bottom {
display: flex;
align-items: center;
width: -webkit-fill-available;
padding-left: calc((100% - 80px) * 2 / 7);
justify-content: space-evenly;
}
.pageWrapperClassement .rank-row.top-row .col-bottom > * {
flex: unset;
}
.pageWrapperClassement .rank-row.top-row .col-bottom .col-certif {
font-size: 14px;
font-weight: 400;
white-space: nowrap;
}
.pageWrapperClassement .rank-row.top-row .col-bottom .col-progress {
width: 100%;
gap: 12px;
display: flex;
justify-content: center;
padding: 0 15px;
}
.pageWrapperClassement .rank-row.top-row .col-bottom .col-action {
margin-left: auto;
}
.pageWrapperClassement .rank-row.top-row .profile-info-wrap {
display: flex;
align-items: center;
gap: 15px;
width: -webkit-fill-available;
}
.pageWrapperClassement .rank-row.top-row .list-avatar {
width: 50px;
height: 50px;
border: none;
background: #FFF;
border-radius: 50%;
object-fit: cover;
flex-shrink: 0;
}
.pageWrapperClassement .rank-row.top-row .list-name {
font-size: 18px;
font-weight: 400;
}
.pageWrapperClassement .rank-row.top-row .list-linkedin {
color: #FF6600;
width: 26px;
height: 26px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 4px;
font-size: 14px;
text-decoration: none;
margin-left: 10px;
flex-shrink: 0;
}
.pageWrapperClassement .rank-row.top-row .list-linkedin:hover {
transform: scale(1.1);
}
.pageWrapperClassement .rank-row.top-row .list-linkedin > i {
font-size: 24px;
}
.pageWrapperClassement .rank-row.top-row .profile-desc {
font-size: 12px;
line-height: 1.4;
color: #000000;
margin: 0;
font-weight: 400;
}
.pageWrapperClassement .rank-row.top-row .progress-track {
background: rgba(0, 0, 0, 0.2);
width: -webkit-fill-available;
height: 12px;
border-radius: 20px;
overflow: hidden;
}
.pageWrapperClassement .rank-row.top-row .progress-fill {
background: #151525;
border-radius: 20px;
height: 100%;
}
.pageWrapperClassement .rank-row.top-row .score-text {
font-size: 14px;
font-weight: bold;
min-width: 60px;
}
.pageWrapperClassement .rank-row.top-row .btn-view {
background: transparent;
color: #FFFFFF;
border: 1px solid #FFFFFF;
border-radius: 50px;
padding: 5px 25px;
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 14px;
font-weight: 400;
text-decoration: none;
white-space: nowrap;
transition: background 0.3s, color 0.3s;
}
.pageWrapperClassement .rank-row.top-row .btn-view > i {
transition: background 0.3s, color 0.3s;
}
.pageWrapperClassement .rank-row.top-row .btn-view:hover {
background: #FFFFFF;
color: #FF6600;
}
.pageWrapperClassement .rank-row.top-row .btn-view:hover > i {
color: #FF6600;
}
.pageWrapperClassement .rank-row.standard-row {
display: grid;
grid-template-columns: 60px 2fr 2fr 3fr 1fr;
align-items: center;
padding: 10px 20px !important;
border-bottom: 1px solid #57597E;
margin-bottom: 10px;
}
.pageWrapperClassement .rank-row.standard-row:last-child {
border-bottom: none;
padding-bottom: 0;
margin-bottom: 0;
}
.pageWrapperClassement .rank-row.standard-row > .col-top {
display: contents;
}
.pageWrapperClassement .rank-row.standard-row > .col-top > .col-profile {
display: contents;
}
.pageWrapperClassement .rank-row.standard-row > .col-top > .col-profile > .col-rank {
display: flex;
align-items: center;
justify-content: center;
padding: unset;
}
.pageWrapperClassement .rank-row.standard-row > .col-top > .col-profile > .col-rank .simple-rank {
font-size: 20px;
}
.pageWrapperClassement .rank-row.standard-row > .col-top > .col-profile > .col-rank .rank-badge.list-badge {
position: relative;
bottom: auto;
left: auto;
transform: none;
}
.pageWrapperClassement .rank-row.standard-row > .col-top > .col-profile > .profile-info-wrap {
display: flex;
align-items: center;
gap: 15px;
}
.pageWrapperClassement .rank-row.standard-row .col-certif,
.pageWrapperClassement .rank-row.standard-row .col-progress,
.pageWrapperClassement .rank-row.standard-row .col-action {
flex: unset;
width: auto;
}
.pageWrapperClassement .rank-row.standard-row .col-certif > .certif-label,
.pageWrapperClassement .rank-row.standard-row .col-progress > .certif-label,
.pageWrapperClassement .rank-row.standard-row .col-action > .certif-label {
width: max-content;
}
.pageWrapperClassement .rank-row.standard-row .col-progress {
gap: 10px;
}
.pageWrapperClassement .rank-row.standard-row .col-progress .progress-track {
flex: 1;
}
.pageWrapperClassement .rank-row.standard-row .profile-info-wrap {
display: flex;
align-items: center;
gap: 15px;
}
.pageWrapperClassement .rank-row.standard-row .list-avatar {
width: 27px;
height: 27px;
border-radius: 50%;
object-fit: cover;
border: 2px solid rgba(255, 255, 255, 0.2);
}
.pageWrapperClassement .rank-row.standard-row .list-name {
font-weight: 400;
font-size: 14px;
line-height: 26px;
letter-spacing: 0%;
vertical-align: middle;
}
.pageWrapperClassement .rank-row.standard-row .list-linkedin {
color: #FFFFFF;
font-size: 18px;
opacity: 1;
margin-left: 10px;
}
.pageWrapperClassement .rank-row.standard-row .list-linkedin:hover {
opacity: 1;
}
.pageWrapperClassement .rank-row.standard-row .profile-desc {
display: none;
}
.pageWrapperClassement .rank-row.standard-row .progress-track {
flex-grow: 1;
height: 8px;
background: #57597E;
border-radius: 10px;
overflow: hidden;
}
.pageWrapperClassement .rank-row.standard-row .progress-fill {
height: 100%;
background: #21E273;
border-radius: 10px;
}
.pageWrapperClassement .rank-row.standard-row .score-text {
font-size: 12px;
font-weight: bold;
text-align: right;
white-space: nowrap;
}
.pageWrapperClassement .rank-row.standard-row .btn-view {
background: transparent;
color: #FFFFFF;
border: 1px solid #FFFFFF;
border-radius: 50px;
padding: 3px 16px;
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 12px;
font-weight: 400;
text-decoration: none;
white-space: nowrap;
transition: background 0.3s, color 0.3s, border-color 0.3s;
}
.pageWrapperClassement .rank-row.standard-row .btn-view > i {
transition: background 0.3s, color 0.3s;
}
.pageWrapperClassement .rank-row.standard-row .btn-view:hover {
background: #57597E;
color: #FFFFFF;
border-color: #57597E;
}
.pageWrapperClassement .rank-row.standard-row .btn-view:hover > i {
color: #FFFFFF;
}
.pageWrapperClassement .rank-row.standard-row:hover {
background: rgba(255, 255, 255, 0.06);
}
.pageWrapperClassement .rank-row.standard-row.mobile-only {
display: none;
}
@media (max-width: 768px) {
.pageWrapperClassement .rank-row.top-row {
display: none;
}
.pageWrapperClassement .rank-row.standard-row.mobile-only {
display: grid;
}
.pageWrapperClassement .rank-row.standard-row {
display: grid;
grid-template-columns: 36px 1fr auto;
grid-template-rows: auto auto auto;
align-items: center;
column-gap: 10px;
row-gap: 6px;
padding: 12px 10px;
}
.pageWrapperClassement .rank-row.standard-row > .col-top > .col-profile > .col-rank,
.pageWrapperClassement .rank-row.standard-row .col-rank {
grid-column: 1;
grid-row: 1;
width: 36px;
justify-content: flex-start;
}
.pageWrapperClassement .rank-row.standard-row > .col-top > .col-profile > .col-rank .simple-rank,
.pageWrapperClassement .rank-row.standard-row .col-rank .simple-rank {
font-size: 16px;
}
.pageWrapperClassement .rank-row.standard-row > .col-top > .col-profile > .profile-info-wrap,
.pageWrapperClassement .rank-row.standard-row .profile-info-wrap {
grid-column: 2;
grid-row: 1;
display: flex;
flex-direction: row;
align-items: center;
gap: 8px;
}
.pageWrapperClassement .rank-row.standard-row > .col-top > .col-profile > .profile-info-wrap .list-avatar,
.pageWrapperClassement .rank-row.standard-row .profile-info-wrap .list-avatar {
width: 28px;
height: 28px;
}
.pageWrapperClassement .rank-row.standard-row > .col-top > .col-profile > .profile-info-wrap .list-name,
.pageWrapperClassement .rank-row.standard-row .profile-info-wrap .list-name {
font-size: 13px;
}
.pageWrapperClassement .rank-row.standard-row .col-action {
grid-column: 3;
grid-row: 1;
width: auto;
justify-content: flex-end;
}
.pageWrapperClassement .rank-row.standard-row .col-action .btn-view {
padding: 3px 10px;
font-size: 11px;
}
.pageWrapperClassement .rank-row.standard-row .col-certif {
grid-column: 1/-1;
grid-row: 2;
width: auto;
font-size: 12px;
color: rgba(255, 255, 255, 0.65);
justify-content: flex-start;
padding-left: 46px;
}
.pageWrapperClassement .rank-row.standard-row .col-progress {
grid-column: 1/-1;
grid-row: 3;
width: auto !important;
padding-left: 46px;
gap: 8px;
}
.pageWrapperClassement .rank-row.standard-row .col-progress .progress-track {
flex: 1;
}
.pageWrapperClassement .rank-row.standard-row .col-progress .score-text {
font-size: 11px;
white-space: nowrap;
}
.pageWrapperClassement .rank-row.standard-row .profile-desc {
display: none;
}
}
.certificationWrapper {
position: relative;
width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
min-height: 860px;
margin-top: 100px;
overflow: hidden;
display: flex;
justify-content: center;
}
@media (max-width: 768px) {
.certificationWrapper {
display: none;
}
}
.certificationWrapper .bgCertif {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 0;
}
.certificationWrapper .certificationContainer {
position: relative;
z-index: 1;
width: 100%;
max-width: 1200px;
height: 100%;
padding: 0 20px;
display: flex;
align-items: center;
min-height: 860px;
}
@media (max-width: 768px) {
.certificationWrapper .certificationContainer {
flex-direction: column;
min-height: auto;
}
}
.certificationWrapper .angryLinky {
position: absolute;
bottom: 0;
right: 0;
width: 600px;
height: auto;
z-index: 2;
pointer-events: none;
}
@media (max-width: 1024px) {
.certificationWrapper .angryLinky {
width: 400px;
right: -100px;
opacity: 0.5;
}
}
@media (max-width: 768px) {
.certificationWrapper .angryLinky {
display: none;
}
}
.certificationWrapper .certificationContent {
position: relative;
margin-top: -50px;
width: 100%;
max-width: 700px;
}
.certificationWrapper .certificationTitle {
position: relative;
margin-bottom: -40px;
transform: rotate(-2deg);
z-index: 3;
margin-left: 20px;
}
.certificationWrapper .certificationTitle #bottomComix {
font-family: "comix loud", sans-serif;
font-size: 36px;
color: #21E273;
text-transform: uppercase;
margin: 0;
line-height: 2;
}
@media (max-width: 768px) {
.certificationWrapper .certificationTitle #bottomComix {
font-size: 32px;
}
}
.certificationWrapper .certificationTitle h2 {
font-family: "comix loud", sans-serif;
font-size: 24px;
color: #FFFFFF;
text-transform: uppercase;
margin: 0;
line-height: 2;
}
.certificationWrapper .certificationTitle span.bg-black {
font-family: "comix loud", sans-serif;
background: #151525;
padding: 0 10px;
font-size: 24px;
transform: skew(-5deg);
}
.certificationWrapper .bubbleContainer {
position: relative;
width: 750px;
height: 380px;
max-width: 100%;
}
@media (max-width: 768px) {
.certificationWrapper .bubbleContainer {
width: 100%;
height: auto;
background: #151525;
border-radius: 20px;
padding: 20px;
border: 2px solid #FFFFFF;
margin-top: 20px;
}
}
.certificationWrapper .bubbleImg {
width: 100%;
height: auto;
display: block;
filter: drop-shadow(0px 10px 10px rgba(0, 0, 0, 0.3));
}
@media (max-width: 768px) {
.certificationWrapper .bubbleImg {
display: none;
}
}
.certificationWrapper .bubbleText {
position: absolute;
top: 70px;
left: 50px;
width: 600px;
color: #FFFFFF;
z-index: 10;
font-family: "Inter", sans-serif;
}
@media (max-width: 768px) {
.certificationWrapper .bubbleText {
position: relative;
top: 0;
left: 0;
width: 100%;
text-align: center;
transform: none;
}
}
.certificationWrapper .wysiwyg-content p {
font-size: 18px;
line-height: 1.4;
color: #FFFFFF;
margin-bottom: 15px;
font-weight: 500;
}
.certificationWrapper #gifted {
color: #21E273;
font-weight: 800;
font-size: 20px;
margin-bottom: 20px;
text-transform: uppercase;
}
.certificationWrapper .fillButton {
color: #0D0E25;
padding: 15px 30px;
font-size: 18px;
border-radius: 50px;
cursor: pointer;
text-transform: uppercase;
transition: transform 0.2s;
border: none;
}
.certificationWrapper .no-underline {
text-decoration: none;
}

#charWrapper {
width: 100%;
box-sizing: border-box;
overflow-x: hidden;
}
#charWrapper > #charHeader {
display: flex;
max-width: 1600px;
margin: auto;
justify-content: flex-end;
align-items: center;
margin-bottom: 24px;
}
#charWrapper > #charHeader > #charName {
font-family: "comix loud", sans-serif;
text-transform: uppercase;
}
#charWrapper > #charHeader > #charClass > p {
font-family: "comix loud", sans-serif;
text-transform: uppercase;
font-size: 12px;
margin-bottom: 12px;
line-height: 32px;
}
@media (min-width: 1024px) {
#charWrapper > #charHeader > #charClass > p {
margin-bottom: 0;
line-height: normal;
}
}
#charWrapper > #charHeader > #charClass > p > span {
font-family: "comix loud", sans-serif;
text-transform: uppercase;
font-size: 12px;
color: #FF4E00;
}
#charWrapper > #charContainer {
display: flex;
align-items: flex-start;
justify-content: space-between;
width: 100%;
box-sizing: border-box;
margin: auto;
flex-direction: column;
}
@media (min-width: 1024px) {
#charWrapper > #charContainer {
flex-direction: row;
}
}
#charWrapper > #charContainer > img {
width: auto;
max-width: 100%;
}
@media (min-width: 1024px) {
#charWrapper > #charContainer > img {
width: 700px;
margin-top: -85px;
position: relative;
z-index: 2;
}
}
#charWrapper > #charContainer > #charInfo {
width: 100%;
box-sizing: border-box;
display: flex;
flex-direction: column;
background: linear-gradient(94.68deg, #26273B 24.8%, #282843 106.18%);
padding: 16px;
gap: 16px;
}
@media (min-width: 1024px) {
#charWrapper > #charContainer > #charInfo {
max-width: 34.5rem;
padding: 24px;
}
}
@media (min-width: 1024px) {
#charWrapper > #charContainer > #charInfo {
background: linear-gradient(94.68deg, #26273B 24.8%, #282843 106.18%);
border-radius: 8px;
padding: 24px;
}
}
#charWrapper > #charContainer > #charInfo > .divider {
opacity: 0.5;
height: 1px;
width: 100%;
background: #57597E;
margin: 0;
}
#charWrapper > #charContainer > #charInfo > #charHeader > #charClass {
display: flex;
flex-direction: column;
gap: 23px;
}
#charWrapper > #charContainer > #charInfo > #charHeader > #charClass > div {
display: flex;
flex-direction: column;
gap: 5px;
}
#charWrapper > #charContainer > #charInfo > #charHeader > #charClass > div > p:first-child {
font-weight: 300;
font-size: 12px;
line-height: 100%;
letter-spacing: 0;
vertical-align: middle;
color: rgba(255, 255, 255, 0.5019607843);
}
#charWrapper > #charContainer > #charInfo > #charHeader > #charClass > div > span {
font-family: "Comix Loud", sans-serif;
width: fit-content;
opacity: 1;
gap: 10px;
border-radius: 4px;
padding: 10px 15px;
border: 1px solid #FF8D00;
font-weight: 400;
font-size: 10px;
letter-spacing: 0;
vertical-align: middle;
text-transform: uppercase;
}
#charWrapper > #charContainer > #charInfo > #charDescription > h1 {
font-weight: 500;
font-size: 14px;
line-height: 100%;
letter-spacing: 2px;
vertical-align: middle;
text-transform: uppercase;
padding: 8px;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
border: 1px solid #57597E;
width: fit-content;
color: rgba(255, 255, 255, 0.5019607843);
}
#charWrapper > #charContainer > #charInfo > #charDescription > p {
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
font-weight: 300;
font-size: 16px;
line-height: 26px;
letter-spacing: 0;
vertical-align: middle;
padding-top: 5px;
}
#charWrapper > #charContainer > #charInfo > #charCompetence > h1 {
font-weight: 500;
font-size: 14px;
line-height: 100%;
letter-spacing: 2px;
vertical-align: middle;
text-transform: uppercase;
padding: 8px;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
border: 1px solid #57597E;
width: fit-content;
color: rgba(255, 255, 255, 0.5019607843);
}
#charWrapper > #charContainer > #charInfo > #charCompetence > #competenceDetail {
display: flex;
flex-direction: column;
gap: 8px;
padding-top: 5px;
}
#charWrapper > #charContainer > #charInfo > #charCompetence > #competenceDetail > .divider {
opacity: 0.5;
height: 1px;
width: 100%;
background: #57597E;
margin: 0;
}
#charWrapper > #charContainer > #charInfo > #charCompetence > #competenceDetail > div {
margin-bottom: 8px;
}
#charWrapper > #charContainer > #charInfo > #charCompetence > #competenceDetail > div > p {
font-weight: 600;
font-size: 14px;
line-height: 26px;
letter-spacing: 0;
vertical-align: middle;
}
#charWrapper > #charContainer > #charInfo > #charCompetence > #competenceDetail > div > .progressBar {
display: flex;
gap: 8px;
align-items: center;
height: 30px;
}
#charWrapper > #charContainer > #charInfo > #charCompetence > #competenceDetail > div > .progressBar > p {
font-family: "Comix Loud", sans-serif;
font-weight: 400;
font-size: 8px;
line-height: 26px;
letter-spacing: 0;
vertical-align: middle;
color: #FFFFFF;
}
#charWrapper > #charContainer > #charInfo > #charCompetence > #competenceDetail > div > .progressBar .progress {
width: 100%;
height: 30px;
background: rgba(255, 255, 255, 0.2);
max-width: 90%;
}
#charWrapper > #charContainer > #charInfo > #charCompetence > #competenceDetail > div > .progressBar .progress > .bar {
height: 100%;
background: linear-gradient(90deg, #FF4E00 0%, #FF6600 50%, #FF9500 100%);
}
#charWrapper > #charContainer > #charInfo > #charCompetence > #competenceDetail > #force {
display: flex;
flex-direction: column;
gap: 16px;
width: 100%;
margin-top: 8px;
}
#charWrapper > #charContainer > #charInfo > #charCompetence > #competenceDetail > #force > p {
font-weight: 500;
font-size: 14px;
line-height: 100%;
letter-spacing: 2px;
vertical-align: middle;
text-transform: uppercase;
padding: 8px;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
border: 1px solid #57597E;
width: fit-content;
color: rgba(255, 255, 255, 0.5019607843);
}
#charWrapper > #charContainer > #charInfo > #charCompetence > #competenceDetail > #force > div {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto auto;
row-gap: 8px;
width: 100%;
max-width: 600px;
}
#charWrapper > #charContainer > #charInfo > #charCompetence > #competenceDetail > #force > div .forceBar {
grid-column: 1/-1;
grid-row: 1;
height: 24px;
width: 100%;
background: rgba(255, 255, 255, 0.15);
position: relative;
}
#charWrapper > #charContainer > #charInfo > #charCompetence > #competenceDetail > #force > div .forceBar::before, #charWrapper > #charContainer > #charInfo > #charCompetence > #competenceDetail > #force > div .forceBar::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
width: 2px;
background-color: rgba(255, 255, 255, 0.6);
}
#charWrapper > #charContainer > #charInfo > #charCompetence > #competenceDetail > #force > div .forceBar::before {
left: 33%;
}
#charWrapper > #charContainer > #charInfo > #charCompetence > #competenceDetail > #force > div .forceBar::after {
left: 66%;
}
#charWrapper > #charContainer > #charInfo > #charCompetence > #competenceDetail > #force > div .forceBar > img {
height: 60px;
width: auto;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
z-index: 2;
filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.5));
}
#charWrapper > #charContainer > #charInfo > #charCompetence > #competenceDetail > #force > div > p {
font-size: 14px;
text-transform: uppercase;
color: white;
font-family: sans-serif;
grid-row: 2;
margin: 0;
}
#charWrapper > #charContainer > #charInfo > #charCompetence > #competenceDetail > #force > div > p:first-child {
text-align: left;
grid-column: 1;
}
#charWrapper > #charContainer > #charInfo > #charCompetence > #competenceDetail > #force > div > p:last-child {
text-align: right;
grid-column: 2;
}
#charWrapper > .historyContainer {
background-color: #26273B;
padding: 20px 16px;
border-radius: 0;
margin-top: 16px;
}
@media (min-width: 1024px) {
#charWrapper > .historyContainer {
padding: 120px 60px;
border-radius: 10px;
margin-top: 30px;
}
}
#charWrapper > .historyContainer .mainTitle {
font-family: "comix loud", sans-serif;
text-align: center;
font-size: 20px;
color: #21E273;
text-transform: uppercase;
margin-bottom: 24px;
}
@media (min-width: 1024px) {
#charWrapper > .historyContainer .mainTitle {
font-size: 30px;
margin-bottom: 50px;
}
}
#charWrapper > .historyContainer .timelineWrapper {
max-width: 900px;
margin: 0 auto;
display: flex;
flex-direction: column;
position: relative;
}
#charWrapper > .historyContainer .timelineWrapper::before {
content: "";
position: absolute;
top: 30px;
bottom: 0;
width: 2px;
left: calc(150px + 60px / 2 - 2px / 2);
background: linear-gradient(180deg, #FF4E00 0%, #FF6600 50%, #FF9500 100%);
z-index: 0;
}
#charWrapper > .historyContainer .timelineWrapper .timelineRow {
display: flex;
align-items: stretch;
min-height: 200px;
position: relative;
}
#charWrapper > .historyContainer .timelineWrapper .timelineRow .timelineDate {
width: 150px;
flex-shrink: 0;
display: flex;
justify-content: flex-end;
align-items: flex-start;
padding-top: 20px;
padding-right: 20px;
}
#charWrapper > .historyContainer .timelineWrapper .timelineRow .timelineDate .dateBadge {
font-family: "comix loud", sans-serif;
font-weight: bold;
font-size: 8px;
text-transform: uppercase;
white-space: nowrap;
padding: 5px 15px;
border-radius: 50px;
position: relative;
display: inline-block;
border: none;
background: linear-gradient(90deg, #FF4E00 0%, #FF6600 50%, #FF9500 100%);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
}
#charWrapper > .historyContainer .timelineWrapper .timelineRow .timelineDate .dateBadge::before {
content: "";
position: absolute;
inset: 0;
border-radius: 50px;
padding: 2px;
background: linear-gradient(90deg, #FF4E00 0%, #FF6600 50%, #FF9500 100%);
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
}
#charWrapper > .historyContainer .timelineWrapper .timelineRow .timelineDivider {
width: 20px;
display: flex;
justify-content: center;
padding-top: 25px;
flex-shrink: 0;
}
#charWrapper > .historyContainer .timelineWrapper .timelineRow .timelineDivider .dot {
width: 12px;
height: 12px;
background: linear-gradient(90deg, #FF4E00 0%, #FF6600 50%, #FF9500 100%);
border-radius: 50%;
z-index: 2;
}
#charWrapper > .historyContainer .timelineWrapper .timelineRow:last-child .timelineDivider::after {
content: "";
position: absolute;
top: 31px;
bottom: -50px;
width: 20px;
background-color: #26273B;
z-index: 1;
}
#charWrapper > .historyContainer .timelineWrapper .timelineRow .timelineContent {
flex: 1;
padding-left: 30px;
padding-bottom: 30px;
padding-top: 15px;
}
#charWrapper > .historyContainer .timelineWrapper .timelineRow .timelineContent .contentCard {
background-color: #3A3A55;
padding: 25px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}
#charWrapper > .historyContainer .timelineWrapper .timelineRow .timelineContent .contentCard .description {
color: rgba(255, 255, 255, 0.6);
margin: 0;
font-size: 0.95rem;
line-height: 1.6;
}
@media (max-width: 768px) {
#charWrapper > .historyContainer .timelineWrapper .timelineRow {
flex-direction: column;
}
#charWrapper > .historyContainer .timelineWrapper .timelineRow .timelineDivider {
display: none;
}
#charWrapper > .historyContainer .timelineWrapper .timelineRow .timelineDate {
width: 100%;
justify-content: flex-start;
}
#charWrapper > .historyContainer .timelineWrapper .timelineRow .timelineContent {
padding-left: 0;
}
}
@media (max-width: 768px) {
#charWrapper > .historyContainer .timelineWrapper::before {
display: none;
}
}
.content {
display: flex;
flex-direction: column;
gap: 15px;
align-items: center;
width: 100%;
box-sizing: border-box;
}
@media all and (min-width: 992px) {
.content {
flex-direction: row;
}
}
.characterContainer {
position: relative;
width: 100%;
max-width: 340px;
height: 450px;
overflow: hidden;
background-color: #2A2A40;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
transition: transform 0.3s ease;
}
.characterContainer:hover {
transform: translateY(-5px);
}
.characterContainer:hover > .characterDetail {
background: linear-gradient(90deg, #FF4E00 0%, #FF6600 50%, #FF9500 100%), linear-gradient(179.46deg, rgba(0, 0, 0, 0) 0.46%, rgba(0, 0, 0, 0.3) 76.42%);
}
.characterContainer:hover > .characterDetail > .imgBgSaga {
top: 0;
}
.characterContainer > img {
width: 100%;
height: 50%;
object-fit: cover;
display: block;
mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
}
.characterContainer > .characterDetail {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: 24px;
box-sizing: border-box;
background: linear-gradient(to top, #151525 10%, rgba(21, 21, 37, 0.8) 80%, transparent 100%);
display: flex;
flex-direction: column;
gap: 12px;
}
.characterContainer > .characterDetail > .imgBgSaga {
position: absolute;
z-index: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.5;
margin-left: -24px;
top: 0;
}
.characterContainer > .characterDetail > h2, .characterContainer > .characterDetail > .specRow, .characterContainer > .characterDetail > .no-underline {
position: relative;
z-index: 1;
}
.characterContainer > .characterDetail > h2 {
font-family: "comix loud", sans-serif;
font-size: 11px;
line-height: 100%;
color: #FFFFFF;
text-transform: uppercase;
text-shadow: 2px 2px 0px #000;
margin-bottom: 8px;
transform: rotate(-1deg);
}
.characterContainer > .characterDetail .specRow {
display: flex;
flex-direction: column;
gap: 4px;
}
.characterContainer > .characterDetail .specRow .specLabel {
font-weight: 300;
font-size: 9px;
line-height: 100%;
letter-spacing: 0;
vertical-align: middle;
opacity: 0.5;
}
.characterContainer > .characterDetail .specRow .specValue {
font-size: 11px;
color: #FFF;
background: #151525;
padding: 4px 5px;
border-radius: 4px;
width: fit-content;
backdrop-filter: blur(2px);
}
.characterContainer > .characterDetail .buttonWrapper {
display: flex;
justify-content: flex-end;
margin-top: 16px;
}
.characterContainer > .characterDetail .buttonWrapper .outlineButton {
background: transparent;
border: 1px solid rgba(255, 255, 255, 0.5);
color: rgba(255, 255, 255, 0.8);
border-radius: 50px;
padding: 8px 12px;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 8px;
height: 24px;
font-weight: 400;
font-size: 12px;
line-height: 100%;
letter-spacing: 0;
text-align: center;
vertical-align: middle;
}
.characterContainer > .characterDetail .buttonWrapper .outlineButton:hover {
background: #FFF;
color: #151525;
border-color: #FFF;
}
.comment-list {
list-style: none;
display: flex;
flex-direction: column;
justify-content: center;
}
.comment-list > .comment {
background: #1C1C31;
padding: 14px;
border-radius: 8px;
}
@media (min-width: 1024px) {
.comment-list > .comment {
width: 100%;
}
}
.comment-list > .comment > .comment-body {
display: flex;
flex-direction: column;
gap: 8px;
}
.comment-list > .comment > .comment-body > .comment-content {
color: #fff;
font-weight: 300;
font-size: 16px;
line-height: 20px;
vertical-align: middle;
}
.comment-list > .comment > .comment-body > .comment-content > .reply {
margin-top: 8px;
}
.comment-list > .comment > .comment-body > .comment-author {
display: flex;
align-items: center;
gap: 8px;
}
.comment-list > .comment > .comment-body > .comment-author > img {
border-radius: 50%;
}
.comment-list > .comment > .comment-body > .comment-author > #pseudo > a {
text-decoration: none;
font-weight: 300;
font-size: 16px;
line-height: 26px;
letter-spacing: 0;
vertical-align: middle;
opacity: 0.5;
}
.comment-list > .comment > .comment-body > .comment-author > #pseudo > a > time {
font-weight: 300;
font-size: 16px;
line-height: 26px;
letter-spacing: 0;
vertical-align: middle;
}
.comment-list > .comment > .comment-body > .comment-author > #pseudo > a > span {
font-weight: 300;
font-size: 16px;
line-height: 26px;
letter-spacing: 0;
vertical-align: middle;
}
.comment-list > .comment > .comment-body > .comment-author > #pseudo > span {
font-weight: 300;
font-size: 16px;
line-height: 26px;
letter-spacing: 0;
vertical-align: middle;
opacity: 0.5;
}
.comment-list {
display: flex;
flex-direction: column;
gap: 12px;
padding: 30px;
}
.comment-form {
margin-top: 24px;
display: flex;
align-items: stretch;
flex-direction: column;
padding: 0 16px;
}
.comment-form-comment > textarea {
background: #3A3A55;
border-radius: 8px;
border: 0.5px solid #8E90B9;
width: auto;
resize: vertical;
outline: none;
padding: 8px;
color: #8E90B9;
margin-top: 8px;
margin-bottom: 8px;
}
@media (min-width: 1024px) {
.comment-form-comment > textarea {
width: 100%;
}
}
.logged-in-as {
margin-bottom: 18px;
}
#commentform > p > label {
font-weight: 400;
font-size: 14px;
line-height: 100%;
letter-spacing: 0;
vertical-align: middle;
opacity: 0.5;
margin-bottom: 8px;
}
.inputField {
background: #3A3A55;
border-radius: 24px;
border: 0.5px solid #8E90B9;
width: -webkit-fill-available;
outline: none;
height: 32px;
padding: 0 8px;
color: #8E90B9;
margin-top: 8px;
margin-bottom: 8px;
}
@media (min-width: 1024px) {
.inputField {
width: 100%;
}
}
.submit {
margin: 24px 0;
border-radius: 24px;
transition: background-position 500ms;
background-image: linear-gradient(270deg, #C2FD70, #21E273);
background-size: 150% 100%;
background-position: 75% 0;
color: #151525;
border: none;
font-size: 18px;
font-weight: 600;
padding: 10px 18px;
width: fit-content;
cursor: pointer;
}
.submit > .iconContainer > .icon-hover:before {
content: "";
width: 0;
height: 2px;
display: block;
background: #000000 !important;
position: absolute;
left: -1px;
top: 0;
opacity: 0;
}
.submit:hover {
background-position: 0 0;
}
.submit:hover > .iconContainer > .icon-hover:before {
content: "";
width: 14px;
height: 2px;
display: block;
background: #000000 !important;
position: absolute;
left: -1px;
top: 0;
opacity: 1;
}
.submit > .iconContainer > i {
color: #151525 !important;
}
.pageWrapper {
position: relative;
background-image: url(//seo-jungle.com/wp-content/themes/seojungle-theme/img/pressebg.webp) !important;
background-repeat: no-repeat !important;
background-position: top right !important;
background-size: contain;
min-height: 100vh;
padding-bottom: 80px;
overflow-x: hidden;
}
.pageTitle {
text-align: center;
padding-top: 60px;
margin-bottom: 60px;
}
.pageTitle h1 {
font-family: "sofia-pro", sans-serif;
font-weight: 700;
font-size: clamp(32px, 5vw, 64px);
line-height: 1.2;
color: #FFFFFF;
text-transform: none;
margin: 0;
letter-spacing: -0.02em;
}
.wrapperPresse {
max-width: 1260px;
margin: 0 auto;
padding: 0 30px;
}
.wrapperPresse .contentPress {
display: flex;
flex-direction: column;
gap: 50px;
}
.wrapperPresse .contentPress .press-section {
background-color: #26273B;
padding: 50px;
position: relative;
}
.wrapperPresse .contentPress .press-section.graphic-elements::before {
content: "";
position: absolute;
top: -15px;
left: 50%;
transform: translateX(-50%);
}
.wrapperPresse .contentPress .press-section h2 {
font-family: "sofia-pro", sans-serif !important;
font-weight: 700 !important;
font-size: clamp(24px, 3vw, 42px) !important;
line-height: 1.2 !important;
color: #21E273 !important;
text-transform: none !important;
margin: 0 0 20px 0 !important;
letter-spacing: -0.01em;
}
.wrapperPresse .contentPress .press-section .section-description {
color: #A0A0B2;
font-size: 15px;
line-height: 1.6;
margin-bottom: 35px;
max-width: 100%;
}
.wrapperPresse .contentPress .press-section .no-items {
color: #A0A0B2;
font-style: italic;
text-align: center;
padding: 30px;
}
.wrapperPresse .contentPress .press-section .press-items-container {
display: flex;
flex-direction: column;
gap: 16px;
}
.wrapperPresse .contentPress .press-section .press-items-container .press-item {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #FFFFFF;
padding: 20px 28px;
border-radius: 10px;
transition: all 0.3s ease;
text-decoration: none;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.wrapperPresse .contentPress .press-section .press-items-container .press-item .item-content {
display: flex;
align-items: center;
gap: 18px;
flex: 1;
}
.wrapperPresse .contentPress .press-section .press-items-container .press-item .item-content .item-icon {
flex-shrink: 0;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
background-color: #FFF4E6;
border-radius: 8px;
color: #FF9500;
}
.wrapperPresse .contentPress .press-section .press-items-container .press-item .item-content .text-group {
display: flex;
flex-direction: column;
gap: 4px;
}
.wrapperPresse .contentPress .press-section .press-items-container .press-item .item-content .text-group .item-title {
color: #1A1A2E;
font-family: "sofia-pro", sans-serif;
font-size: 1.575vw;
font-weight: 700;
line-height: 1.4;
margin: 0;
}
.wrapperPresse .contentPress .press-section .press-items-container .press-item .item-content .text-group .item-date {
color: #6B6B7B;
font-size: 13px;
line-height: 1.4;
}
.wrapperPresse .contentPress .fillButton {
height: 15px !important;
}
.wrapperPresse .contentPress .graphic-elements {
border-style: dashed;
}
@media (max-width: 1024px) {
.wrapperPresse {
padding: 0 20px;
}
.wrapperPresse .content .press-section {
padding: 35px;
}
}
@media (max-width: 768px) {
.pageTitle {
padding-top: 40px;
margin-bottom: 40px;
}
.pageTitle h1 {
font-size: 36px !important;
}
.wrapperPresse {
padding: 0 16px;
}
.wrapperPresse .content {
gap: 30px;
}
.wrapperPresse .content .press-section {
padding: 25px;
}
.wrapperPresse .content .press-section h2 {
font-size: 28px !important;
margin-bottom: 15px !important;
}
.wrapperPresse .content .press-section .section-description {
font-size: 14px;
margin-bottom: 25px;
}
.wrapperPresse .content .press-section .press-items-container {
gap: 12px;
}
.wrapperPresse .content .press-section .press-items-container .press-item {
flex-direction: column;
align-items: flex-start !important;
padding: 18px;
}
.wrapperPresse .content .press-section .press-items-container .press-item .item-content {
width: 100%;
margin-bottom: 15px;
}
.wrapperPresse .content .press-section .press-items-container .press-item .view-button {
width: 100%;
justify-content: center;
}
}
@media (max-width: 480px) {
.pageTitle h1 {
font-size: 28px !important;
}
.wrapperPresse .content .press-section {
padding: 20px;
}
.wrapperPresse .content .press-section h2 {
font-size: 24px !important;
}
.wrapperPresse .content .press-section .press-items-container .press-item .item-content {
gap: 12px;
}
.wrapperPresse .content .press-section .press-items-container .press-item .item-content .item-icon {
width: 36px;
height: 36px;
}
.wrapperPresse .content .press-section .press-items-container .press-item .item-content .item-icon svg {
width: 18px;
height: 22px;
}
.wrapperPresse .content .press-section .press-items-container .press-item .item-content .text-group .item-title {
font-size: 15px;
}
.wrapperPresse .content .press-section .press-items-container .press-item .item-content .text-group .item-date {
font-size: 12px;
}
.wrapperPresse .content .press-section .press-items-container .press-item .view-button {
padding: 10px 20px;
font-size: 13px;
}
}.site-main {
display: flex;
flex-direction: column;
position: relative;
align-items: center;
max-height: 100vh;
overflow: hidden;
}
.site-main > img {
position: absolute;
z-index: -1;
mix-blend-mode: color-dodge;
top: 4vh;
left: 1.6vw;
}
.error-404.not-found {
margin: 0;
padding: 0;
min-height: 100vh;
width: 100%;
background-image: url(//seo-jungle.com/wp-content/themes/seojungle-theme/img/Planet-SVG.webp);
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
background-blend-mode: normal;
display: flex;
flex-direction: column;
gap: 159px;
text-align: center;
}
.page-title {
font-family: "sofia-pro", sans-serif;
font-weight: bold;
margin-top: 4vw;
font-size: 3.8vw;
}
.page-content {
font-family: "sofia-pro", sans-serif;
display: flex;
gap: 30px;
align-items: center;
flex-direction: column;
}
.page-content p {
font-size: 2.6vw;
line-height: 1.2;
color: #21E273;
font-weight: 700;
}
#certificationContent {
position: relative;
background-color: #1C1C31;
color: #FFFFFF;
padding: 0 30px 5rem;
overflow-x: hidden;
}
#certificationContent::before {
content: "";
position: absolute;
top: -90px;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(180deg, rgba(28, 28, 49, 0) 0%, #1C1C31 66%), url(https://preprod.seo-jungle.com/wp-content/themes/seojungle-theme/img/backgroundCertifaction.png) top center no-repeat;
pointer-events: none;
z-index: 0;
}
@media (min-width: 1024px) {
#certificationContent::before {
background-size: 100% auto, 100% auto;
}
}
#certificationContent > * {
position: relative;
z-index: 1;
}
@media (min-width: 1024px) {
#certificationContent {
padding: 0 3rem 8rem;
}
}
#certificationContent .certificationTitle {
position: relative;
padding: 5rem 0 4rem;
max-width: 1320px;
margin: 0 auto;
}
#certificationContent .certificationTitle .hero-inner {
display: flex;
flex-direction: column-reverse;
align-items: center;
gap: 2.5rem;
text-align: center;
}
@media (min-width: 1024px) {
#certificationContent .certificationTitle .hero-inner {
flex-direction: row;
text-align: left;
justify-content: space-between;
gap: 4rem;
padding: 3rem 2rem;
}
}
#certificationContent .certificationTitle .hero-text {
flex: 1;
display: flex;
flex-direction: column;
gap: 30px;
max-width: 680px;
align-items: center;
}
#certificationContent .certificationTitle .hero-text > div {
display: flex;
flex-direction: column;
gap: 15px;
}
@media (min-width: 1024px) {
#certificationContent .certificationTitle .hero-text {
align-items: flex-start;
gap: 50px;
padding: 0;
}
#certificationContent .certificationTitle .hero-text > div {
gap: 15px;
}
}
#certificationContent .certificationTitle .hero-text h1 {
font-family: "sofia-pro", "Sofia Pro", sans-serif;
font-size: 50px;
font-weight: 700;
line-height: 1.05;
}
@media (min-width: 1024px) {
#certificationContent .certificationTitle .hero-text h1 {
font-size: 72px;
}
}
#certificationContent .certificationTitle .hero-text p {
font-family: "sofia-pro", "Sofia Pro", sans-serif;
color: white;
}
#certificationContent .certificationTitle .hero-text .text1 {
font-size: 30px;
font-weight: 300;
line-height: 1.05;
}
@media (min-width: 1024px) {
#certificationContent .certificationTitle .hero-text .text1 {
font-size: 61px;
}
}
#certificationContent .certificationTitle .hero-text .text2 {
font-size: 20px;
font-weight: 400;
line-height: 25px;
text-align: left;
}
#certificationContent .certificationTitle .hero-visual {
position: relative;
z-index: 2;
width: 253px;
height: 253px;
}
@media (min-width: 1024px) {
#certificationContent .certificationTitle .hero-visual {
width: 549px;
height: 549px;
}
}
#certificationContent .certificationTitle .hero-badges {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.75rem;
margin-top: 3rem;
}
@media (min-width: 1024px) {
#certificationContent .certificationTitle .hero-badges {
position: absolute;
top: 30%;
left: -1rem;
flex-direction: column;
margin-top: 0;
}
}
#certificationContent .certificationTitle .hero-badges .badge-item {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.55rem 1rem;
background: rgba(16, 20, 58, 0.75);
border: 1px solid rgba(29, 233, 182, 0.35);
border-radius: 24px;
backdrop-filter: blur(10px);
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.05);
border-radius: 999px;
font-size: 0.8rem;
color: #1DE9B6;
font-weight: 600;
}
#certificationContent .certificationTitle .hero-badges .badge-item img {
width: 18px;
height: 18px;
}
#certificationContent .avantagesSection .section-header {
display: flex;
justify-content: center;
padding-bottom: 20px;
}
#certificationContent .avantagesSection .section-header h2 {
font-family: "sofia-pro", "Sofia Pro", sans-serif;
font-weight: 700;
font-size: 35px;
line-height: 44px;
}
@media (min-width: 1024px) {
#certificationContent .avantagesSection .section-header h2 {
font-size: 50px;
line-height: 60px;
padding-bottom: 0;
}
}
#certificationContent .avantagesSection .avantages-grid {
display: flex;
flex-direction: column;
align-items: center;
}
#certificationContent .avantagesSection .avantages-grid .container {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 30px 0;
overflow: visible;
gap: 50px;
}
#certificationContent .avantagesSection .avantages-grid .container:first-child {
flex-direction: column-reverse;
}
@media (min-width: 1024px) {
#certificationContent .avantagesSection .avantages-grid .container:first-child {
padding: 0;
flex-direction: row;
}
}
@media (min-width: 1024px) {
#certificationContent .avantagesSection .avantages-grid .container {
width: 1920px;
height: 689px;
flex-direction: row;
gap: 100px;
}
}
#certificationContent .avantagesSection .avantages-grid .avantage {
width: 100%;
max-width: 594px;
display: flex;
flex-direction: column;
gap: 20px;
}
@media (min-width: 1024px) {
#certificationContent .avantagesSection .avantages-grid .avantage {
gap: 30px;
}
}
#certificationContent .avantagesSection .avantages-grid .avantage h2 {
font-family: "sofia-pro", "Sofia Pro", sans-serif;
font-weight: 700;
font-size: 35px;
line-height: 44px;
color: #21E273;
margin: 0;
}
@media (min-width: 1024px) {
#certificationContent .avantagesSection .avantages-grid .avantage h2 {
font-size: 50px;
line-height: 60px;
}
}
#certificationContent .avantagesSection .avantages-grid .avantage p {
width: 100%;
font-family: "sofia-pro", "Sofia Pro", sans-serif;
font-weight: 400;
font-size: 20px;
line-height: 28px;
color: #FFFFFF;
margin: 0;
}
@media (min-width: 1024px) {
#certificationContent .avantagesSection .avantages-grid .avantage p {
width: 534px;
}
}
#certificationContent .avantagesSection .avantages-grid .img-halo {
position: relative;
overflow: visible;
}
#certificationContent .avantagesSection .avantages-grid .img-halo::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 200%;
height: 200%;
background: url(//seo-jungle.com/wp-content/themes/seojungle-theme/img/haloAvantages.png) center/contain no-repeat;
pointer-events: none;
z-index: -1;
}
#certificationContent .avantagesSection .avantages-grid .img-halo img {
position: relative;
z-index: 1;
}
#certificationContent .avantagesSection .avantages-grid .piece {
width: 100%;
max-width: 360px;
height: auto;
}
@media (min-width: 1024px) {
#certificationContent .avantagesSection .avantages-grid .piece {
height: 360px;
width: 532px;
max-width: none;
}
}
#certificationContent .avantagesSection .avantages-grid .linky10 {
width: 100%;
max-width: 400px;
height: auto;
}
@media (min-width: 1024px) {
#certificationContent .avantagesSection .avantages-grid .linky10 {
width: 753px;
height: 548px;
max-width: none;
}
}
#certificationContent .avantagesSection .avantages-grid .classement {
display: flex;
flex-direction: column;
width: 100%;
max-width: 594px;
gap: 20px;
}
#certificationContent .avantagesSection .avantages-grid .classement h2 {
font-family: "sofia-pro", "Sofia Pro", sans-serif;
font-weight: 700;
font-size: 35px;
line-height: 44px;
color: #21E273;
margin: 0;
}
@media (min-width: 1024px) {
#certificationContent .avantagesSection .avantages-grid .classement h2 {
font-size: 50px;
line-height: 60px;
}
}
#certificationContent .avantagesSection .avantages-grid .classement p {
font-family: "sofia-pro", "Sofia Pro", sans-serif;
font-weight: 400;
font-size: 20px;
line-height: 28px;
color: #FFFFFF;
margin: 0;
}
#certificationContent .avantagesSection .avantages-grid .classement a {
display: flex;
justify-content: start;
}
@media (min-width: 1024px) {
#certificationContent .avantagesSection .avantages-grid .classement {
gap: 30px;
}
}
#certificationContent .avantagesSection .avantages-grid .listPositive .positivePoint {
height: 40px;
gap: 20px;
display: flex;
flex-direction: row;
align-items: center;
font-family: "sofia-pro", "Sofia Pro", sans-serif;
font-weight: 400;
font-size: 20px;
line-height: 40px;
color: #FFFFFF;
}
#certificationContent .avantagesSection .avantages-grid .listPositive .positivePoint .vector {
height: 18px;
width: 15.75px;
}
#certificationContent .avantagesSection .avantage-card {
background: rgba(16, 20, 58, 0.75);
border: 1px solid rgba(29, 233, 182, 0.35);
border-radius: 24px;
backdrop-filter: blur(10px);
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.05);
padding: 2rem;
display: flex;
flex-direction: column;
gap: 1.25rem;
transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
position: relative;
overflow: hidden;
min-height: 260px;
}
#certificationContent .avantagesSection .avantage-card:hover {
transform: translateY(-4px);
border-color: #1DE9B6;
box-shadow: 0 25px 65px rgba(0, 0, 0, 0.5), 0 0 40px rgba(29, 233, 182, 0.45);
}
#certificationContent .avantagesSection .avantage-card .card-visual {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
max-width: 200px;
}
#certificationContent .avantagesSection .avantage-card .card-visual img {
width: 100%;
height: auto;
object-fit: contain;
filter: drop-shadow(0 10px 35px rgba(29, 233, 182, 0.45));
}
#certificationContent .avantagesSection .avantage-card .card-visual--small {
max-width: 80px;
}
#certificationContent .avantagesSection .avantage-card .card-content {
flex: 1;
display: flex;
flex-direction: column;
gap: 0.75rem;
}
#certificationContent .avantagesSection .avantage-card .card-content h3 {
font-size: 1.4rem;
font-weight: 800;
color: #FFFFFF;
line-height: 1.25;
}
#certificationContent .avantagesSection .avantage-card .card-content p {
font-size: 0.95rem;
}
#certificationContent .avantagesSection .avantage-card .card-content .btn-link {
margin-top: 0.5rem;
}
#certificationContent .avantagesSection .avantage-card--character {
flex-direction: row;
align-items: center;
}
#certificationContent .avantagesSection .avantage-card--character .card-visual {
flex: 0 0 40%;
max-width: 180px;
}
#certificationContent .avantagesSection .avantage-card--character .card-content {
flex: 1;
}
#certificationContent .avantagesSection .avantage-card--planet {
align-items: center;
text-align: center;
}
#certificationContent .avantagesSection .avantage-card--planet .card-visual {
max-width: 220px;
}
#certificationContent .avantagesSection .avantage-card--orbit {
align-items: center;
text-align: center;
}
#certificationContent .avantagesSection .avantage-card--orbit .card-visual {
max-width: 240px;
position: relative;
}
#certificationContent .avantagesSection .avantage-card--text {
justify-content: center;
text-align: left;
}
#certificationContent .avantagesSection .avantage-card--text .card-content h3 {
font-size: 1.6rem;
}
#certificationContent .certificationsLevels {
display: flex;
flex-direction: column;
gap: 40px;
max-width: 1388px;
margin: 40px auto 0;
}
@media (min-width: 1024px) {
#certificationContent .certificationsLevels {
gap: 80px;
margin-top: 80px;
}
}
#certificationContent .certificationLevel {
--card-text: #b0e0b2;
--learn-bg: #26273b;
--learn-title: #21e273;
--cta-start: #21e273;
--cta-end: #c2fd70;
position: relative;
display: flex;
flex-direction: column;
gap: 30px;
}
#certificationContent .certificationLevel--expert {
--card-text: #b4d5ef;
--learn-title: #00e5ff;
--cta-start: #00b8e5;
--cta-end: #60d9ff;
}
#certificationContent .certificationLevel--expert-av {
--card-text: #cfc2ef;
--learn-title: #a88cff;
--cta-start: #8a5cff;
--cta-end: #c7a8ff;
}
#certificationContent .certificationLevel .cert-header {
display: flex;
flex-direction: column;
align-items: center;
gap: 23px;
text-align: center;
position: relative;
z-index: 3;
}
@media (min-width: 768px) {
#certificationContent .certificationLevel .cert-header {
flex-direction: row;
align-items: center;
justify-content: flex-start;
gap: 39px;
text-align: left;
}
}
#certificationContent .certificationLevel .cert-badge {
width: 60px;
height: 60px;
object-fit: contain;
flex-shrink: 0;
}
@media (min-width: 768px) {
#certificationContent .certificationLevel .cert-badge {
width: 96px;
height: 96px;
}
}
#certificationContent .certificationLevel .cert-title {
font-family: "comix loud", Impact, sans-serif;
font-weight: 400;
font-size: 15px;
color: #FFFFFF;
text-shadow: 0 2px 0 rgba(0, 0, 0, 0.25);
text-transform: uppercase;
line-height: 35px;
margin: 0;
text-align: center;
}
@media (min-width: 768px) {
#certificationContent .certificationLevel .cert-title {
font-size: 22px;
line-height: 1.15;
text-align: left;
}
}
@media (min-width: 1024px) {
#certificationContent .certificationLevel .cert-title {
font-size: 28px;
}
}
#certificationContent .certificationLevel .cert-module--overlap--1 {
z-index: 23;
}
#certificationContent .certificationLevel .cert-module--overlap--2 {
z-index: 22;
}
#certificationContent .certificationLevel .cert-module--overlap--3 {
z-index: 21;
}
#certificationContent .certificationLevel .cert-module--overlap--4 {
z-index: 20;
}
#certificationContent .certificationLevel .cert-modules {
display: flex;
gap: 10px;
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
padding-top: 5px;
-webkit-overflow-scrolling: touch;
}
#certificationContent .certificationLevel .cert-modules::-webkit-scrollbar {
display: none;
}
#certificationContent .certificationLevel .cert-modules {
scrollbar-width: none;
}
@media (min-width: 1024px) {
#certificationContent .certificationLevel .cert-modules {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
overflow-x: visible;
overflow-y: visible;
scroll-snap-type: none;
}
}
#certificationContent .certificationLevel .cert-scrollbar {
width: 100%;
height: 8px;
background: #57597e;
border-radius: 10px;
margin-top: 10px;
overflow: hidden;
}
#certificationContent .certificationLevel .cert-scrollbar__thumb {
height: 100%;
width: 25%;
background: #1c1c31;
border-radius: 10px;
transition: transform 0.1s ease-out;
}
@media (min-width: 1024px) {
#certificationContent .certificationLevel .cert-scrollbar {
display: none;
}
}
#certificationContent .certificationLevel .cert-module {
position: relative;
flex-shrink: 0;
width: 66vw;
max-width: 267px;
aspect-ratio: 267/258;
box-sizing: border-box;
overflow: initial;
container-type: inline-size;
transition: transform 0.3s ease;
isolation: isolate;
display: flex;
flex-direction: column;
padding: 8% 0 8% 12%;
gap: 20px;
background: var(--module-bg-image) center/100% 100% no-repeat;
border-radius: 6.646px;
scroll-snap-align: start;
}
@media (min-width: 1024px) {
#certificationContent .certificationLevel .cert-module {
flex-shrink: 1;
width: auto;
max-width: none;
aspect-ratio: 338/327;
border-radius: 8.41px;
overflow: visible;
scroll-snap-align: none;
}
}
#certificationContent .certificationLevel .cert-module .card-title {
display: flex;
flex-direction: column;
gap: 8px;
}
#certificationContent .certificationLevel .cert-module:hover {
transform: translateY(-4px);
}
#certificationContent .certificationLevel .cert-module .module-title {
width: 37%;
flex-wrap: wrap;
font-family: "comix loud", Impact, sans-serif;
font-size: clamp(13px, 3.98cqw, 18px);
line-height: 1.87;
color: var(--card-text);
text-shadow: 0 0.5cqw 0 rgba(0, 0, 0, 0.25);
text-transform: uppercase;
z-index: 1;
font-weight: 400;
}
#certificationContent .certificationLevel .cert-module .module-subtitle {
width: 60%;
font-family: "comix loud", Impact, sans-serif;
font-size: clamp(8px, 1.99cqw, 10px);
line-height: 2.125;
color: var(--card-text);
text-transform: uppercase;
z-index: 1;
font-weight: 400;
}
#certificationContent .certificationLevel .cert-module .module-description {
width: 43.95%;
font-family: "Poppins", "sofia-pro", sans-serif;
font-weight: 500;
font-size: clamp(11px, 3.48cqw, 14px);
line-height: 1.25;
color: var(--card-text);
z-index: 1;
}
#certificationContent .certificationLevel .cert-module .module-questions {
font-family: "Poppins", "sofia-pro", sans-serif;
font-weight: 700;
font-size: clamp(11px, 3.48cqw, 14px);
line-height: 1;
color: var(--card-text);
z-index: 1;
}
#certificationContent .certificationLevel .cert-module .module-lock {
width: 12%;
height: auto;
object-fit: contain;
z-index: 1;
}
#certificationContent .certificationLevel .cert-module .module-character {
position: absolute;
left: 53%;
top: 25%;
width: 66%;
height: 71%;
object-fit: contain;
z-index: 21;
pointer-events: none;
}
#certificationContent .certificationLevel .cert-module--1 .module-character {
left: 44%;
top: 3%;
width: 83%;
height: 121%;
transform: rotate(6.25deg);
}
#certificationContent .certificationLevel .cert-module::before {
content: "";
position: absolute;
inset: 2.59% 2.19%;
background: url(//seo-jungle.com/wp-content/themes/seojungle-theme/img/moduleDashedConnaissance.png) center/100% 100% no-repeat;
background: var(--module-dashed-image) center/100% 100% no-repeat;
opacity: 0.5;
pointer-events: none;
z-index: 0;
}
#certificationContent .certificationLevel .cert-module--2 .module-character {
left: 55%;
top: 16%;
width: 56%;
height: 87%;
}
#certificationContent .certificationLevel .cert-module--3 .module-character {
left: 44%;
top: 23%;
width: 73%;
height: 76%;
}
#certificationContent .certificationLevel .cert-learn {
background: var(--learn-bg);
border-radius: 9.169px;
padding: 30px;
display: flex;
flex-direction: column;
gap: 27.508px;
}
@media (min-width: 1024px) {
#certificationContent .certificationLevel .cert-learn {
padding: 55px 64px;
}
}
#certificationContent .certificationLevel .cert-learn__title {
font-family: "sofia-pro", "Sofia Pro", sans-serif;
font-weight: 700;
font-size: 30px;
line-height: 38px;
color: var(--learn-title);
margin: 0;
}
#certificationContent .certificationLevel .cert-learn__grid {
display: grid;
grid-template-columns: 1fr;
gap: 40px;
}
@media (min-width: 1024px) {
#certificationContent .certificationLevel .cert-learn__grid {
grid-template-columns: 1fr 1fr;
gap: 98px;
}
}
#certificationContent .certificationLevel .cert-learn__text {
color: #FFFFFF;
font-family: "sofia-pro", "Sofia Pro", sans-serif;
font-size: 16px;
line-height: 24.2px;
}
#certificationContent .certificationLevel .cert-learn__text > p {
margin: 0 0 1em;
font-weight: 400;
}
#certificationContent .certificationLevel .cert-learn__text > p:first-child {
font-weight: 700;
}
#certificationContent .certificationLevel .cert-learn__text ul {
list-style: disc;
padding-left: 1.25em;
margin: 0;
}
#certificationContent .certificationLevel .cert-learn__text ul li {
margin-bottom: 0.25em;
}
#certificationContent .certificationLevel .cert-learn__sidebar {
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 20px;
align-items: flex-end;
}
#certificationContent .certificationLevel .cert-learn__top {
display: flex;
flex-direction: column;
gap: 14px;
}
#certificationContent .certificationLevel .cert-learn__subtitle {
margin: 0;
font-family: "sofia-pro", "Sofia Pro", sans-serif;
font-size: 16px;
line-height: 20.172px;
color: #FFFFFF;
}
#certificationContent .certificationLevel .cert-learn__icons {
display: flex;
gap: 10px;
align-items: center;
}
#certificationContent .certificationLevel .cert-learn__icons img {
width: 35.127px;
height: 35.127px;
object-fit: contain;
}
#certificationContent .certificationLevel .cert-learn__cta {
align-self: stretch;
width: 100%;
}
@media (min-width: 768px) {
#certificationContent .certificationLevel .cert-learn__cta {
align-self: flex-end;
width: 265px;
}
}
#certificationContent .certificationLevel .cert-learn__cta {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-width: 170px;
width: 265px;
max-width: 100%;
padding: 10px 32px;
border-radius: 20px;
font-family: "sofia-pro", "Sofia Pro", sans-serif;
font-weight: 600;
font-size: 16px;
text-decoration: none;
box-sizing: border-box;
cursor: pointer;
background-image: linear-gradient(270deg, #C2FD70, #21E273);
background-size: 150% 100%;
background-position: 75% 0;
color: #151525;
border: 2px solid transparent;
transition: background-position 500ms, background 300ms, border-color 300ms, color 300ms;
}
#certificationContent .certificationLevel .cert-learn__cta:hover {
background-image: none;
background: transparent;
border: 2px solid #21E273;
color: #ffffff;
}
#certificationContent .certificationLevel .cert-learn__cta-icon {
width: 17px;
height: 15px;
flex-shrink: 0;
}


#affiliationContent {
position: relative;
background-color: #1C1C31;
color: #FFFFFF;
font-family: "sofia-pro", "Sofia Pro", sans-serif;
}
#affiliationContent h1 > p, #affiliationContent h2 > p, #affiliationContent h3 > p, #affiliationContent h4 > p, #affiliationContent h5 > p, #affiliationContent h6 > p {
font: inherit;
margin: 0;
}
#affiliationContent h1 > p > span, #affiliationContent h2 > p > span, #affiliationContent h3 > p > span, #affiliationContent h4 > p > span, #affiliationContent h5 > p > span, #affiliationContent h6 > p > span {
font: inherit;
}
#affiliationContent::before {
content: "";
position: absolute;
top: -90px;
left: 0;
width: 100%;
height: calc(10% + 90px);
background-image: url(//seo-jungle.com/wp-content/themes/seojungle-theme/img/planetSvgAffiliation.png);
background-repeat: no-repeat;
background-size: cover;
background-position: 30% top;
pointer-events: none;
z-index: 0;
}
@media (max-width: 1023px) {
#affiliationContent::before {
background-image: linear-gradient(192.36deg, rgba(28, 28, 49, 0) 0%, #1C1C31 72.18%), url(//seo-jungle.com/wp-content/themes/seojungle-theme/img/bgMobile.png);
background-position: 70% 90px;
background-size: cover;
height: 750px;
}
}
@media (max-width: 1023px) {
#affiliationContent {
overflow: hidden;
}
}
#affiliationContent > * {
position: relative;
z-index: 1;
}
#affiliationContent .affiliation-hero {
position: relative;
padding: 40px 20px 0;
}
#affiliationContent .affiliation-hero__social {
position: absolute;
left: 32px;
top: 166px;
display: flex;
flex-direction: column;
gap: 18px;
z-index: 2;
}
#affiliationContent .affiliation-hero__social .social-link {
width: 41px;
height: 41px;
border: 1px solid #FFFFFF;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #FFFFFF;
font-size: 18px;
text-decoration: none;
transition: background 0.2s;
}
#affiliationContent .affiliation-hero__social .social-link:hover {
background: rgba(255, 255, 255, 0.1);
}
#affiliationContent .affiliation-hero__container {
max-width: 1430px;
margin: 0 auto;
border-radius: 30px;
min-height: 665px;
display: flex;
align-items: center;
position: relative;
overflow: hidden;
padding: 0 80px;
}
#affiliationContent .affiliation-hero__text {
flex: 0 0 auto;
width: 55%;
max-width: 850px;
display: flex;
flex-direction: column;
gap: 50px;
padding: 90px 0;
position: relative;
z-index: 1;
}
#affiliationContent .affiliation-hero__titles {
display: flex;
flex-direction: column;
gap: 15px;
}
#affiliationContent .affiliation-hero__titles h1 {
font-weight: 700;
font-size: 72px;
line-height: 90%;
color: #FFFFFF;
margin: 0;
white-space: nowrap;
}
@media (max-width: 1023px) {
#affiliationContent .affiliation-hero__titles h1 {
white-space: normal;
line-height: 105%;
}
}
#affiliationContent .affiliation-hero__subtitle {
font-weight: 300;
font-size: 61px;
line-height: 1.03;
color: #FFFFFF;
margin: 0;
}
#affiliationContent .affiliation-hero__desc {
display: flex;
flex-direction: column;
gap: 15px;
max-width: 612px;
}
#affiliationContent .affiliation-hero__desc p {
font-size: 20px;
line-height: 25px;
color: #FFFFFF;
margin: 0;
}
#affiliationContent .affiliation-hero__cta {
display: inline-flex;
align-items: center;
gap: 10px;
height: 50px;
padding: 0 30px;
border-radius: 100px;
width: fit-content;
white-space: nowrap;
font-weight: 600;
font-size: 16px;
text-transform: uppercase;
text-decoration: none;
box-sizing: border-box;
cursor: pointer;
background-image: linear-gradient(270deg, #C2FD70, #21E273);
background-size: 150% 100%;
background-position: 75% 0;
color: #151525;
border: 2px solid transparent;
transition: background-position 500ms, background 300ms, border-color 300ms, color 300ms;
}
#affiliationContent .affiliation-hero__cta:hover {
background-image: none;
background: transparent;
border: 2px solid #21E273;
color: #ffffff;
}
#affiliationContent .affiliation-hero__visual {
position: absolute;
right: 40px;
top: 50%;
transform: translateY(-50%);
width: 45%;
max-width: 580px;
pointer-events: none;
}
#affiliationContent .affiliation-hero__visual img {
width: 100%;
height: auto;
display: block;
}
@media (max-width: 1023px) {
#affiliationContent .affiliation-hero__social {
display: none;
}
#affiliationContent .affiliation-hero__container {
flex-direction: column-reverse;
padding: 20px 20px;
min-height: auto;
border-radius: 0;
gap: 30px;
}
#affiliationContent .affiliation-hero__text {
width: 100%;
padding: 0;
gap: 30px;
align-items: center;
text-align: center;
}
#affiliationContent .affiliation-hero__titles h1 {
font-size: 50px;
}
#affiliationContent .affiliation-hero__subtitle {
font-size: 28px;
}
#affiliationContent .affiliation-hero__desc {
max-width: 100%;
}
#affiliationContent .affiliation-hero__desc p {
text-align: start;
}
#affiliationContent .affiliation-hero__cta {
width: 100%;
justify-content: center;
}
#affiliationContent .affiliation-hero__visual {
position: relative;
width: 100%;
max-width: 350px;
margin: 0 auto;
transform: none;
top: auto;
right: auto;
}
}
#affiliationContent .planet-bg-wrapper {
position: relative;
overflow: visible;
background: #1C1C31;
isolation: isolate;
}
#affiliationContent .planet-bg-wrapper__img {
position: absolute;
top: -3%;
right: calc(50% - 2508px);
width: auto;
height: 86%;
opacity: 0.1;
pointer-events: none;
z-index: 0;
}
@media (max-width: 1023px) {
#affiliationContent .planet-bg-wrapper__img {
display: none;
}
}
#affiliationContent .planet-bg-wrapper__linky {
position: absolute;
right: calc(50% - 1291px);
top: 36%;
height: 63%;
width: auto;
pointer-events: none;
z-index: 1;
mix-blend-mode: color-dodge;
transform: scaleX(-1);
opacity: 30%;
}
@media (max-width: 1023px) {
#affiliationContent .planet-bg-wrapper__linky {
display: none;
}
}
#affiliationContent .planet-bg-wrapper > *:not(.planet-bg-wrapper__img):not(.planet-bg-wrapper__linky) {
position: relative;
z-index: 1;
}
#affiliationContent .simple-section {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
padding: 50px 20px;
}
@media (max-width: 1023px) {
#affiliationContent .simple-section {
gap: 50px;
}
}
@media (min-width: 1024px) {
#affiliationContent .simple-section {
padding: 120px 200px;
}
}
#affiliationContent .simple-section__title {
font-weight: 700;
font-size: 35px;
line-height: 44px;
color: #21E273;
margin: 0;
}
@media (min-width: 1024px) {
#affiliationContent .simple-section__title {
font-size: 50px;
line-height: 60px;
}
}
#affiliationContent .simple-section__cards {
display: flex;
flex-direction: column;
gap: 15px;
align-items: center;
}
@media (min-width: 1024px) {
#affiliationContent .simple-section__cards {
flex-direction: row;
align-items: center;
justify-content: space-between;
width: 1276px;
max-width: 100%;
}
}
#affiliationContent .simple-card {
box-sizing: border-box;
background: #26273B;
border-radius: 9.169px;
padding: 55px 64px;
width: 364px;
display: flex;
flex-direction: column;
align-items: center;
gap: 27.5px;
text-align: start;
}
#affiliationContent .simple-card__icon-placeholder {
position: relative;
width: 112px;
height: 112px;
flex-shrink: 0;
overflow: visible;
}
@media (min-width: 1024px) {
#affiliationContent .simple-card {
width: 364px;
height: 469px;
}
}
#affiliationContent .simple-card__icon-img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 230px;
height: auto;
pointer-events: none;
opacity: 0.5;
}
#affiliationContent .simple-card__icon-img__orange {
opacity: 1;
width: 201px;
}
#affiliationContent .simple-card__label {
font-family: "comix loud", Impact, sans-serif;
font-size: 18.34px;
letter-spacing: 1.28px;
line-height: 25.67px;
text-transform: uppercase;
color: #FFFFFF;
opacity: 0.6;
margin: 0;
white-space: nowrap;
}
#affiliationContent .simple-card__label--orange {
opacity: 1;
font-size: 20px;
letter-spacing: 1.4px;
line-height: 32px;
background: linear-gradient(90deg, #FF4E00, #FF6600, #FF9500);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
white-space: nowrap;
}
#affiliationContent .simple-card__text {
font-size: 14.67px;
line-height: 20.17px;
color: #FFFFFF;
margin: 0;
}
#affiliationContent .simple-card--center {
background: #26273B;
border: 1px solid #FF4E00;
border-radius: 10px;
padding: 60px 70px;
gap: 30px;
justify-content: center;
-webkit-text-fill-color: initial;
}
#affiliationContent .simple-card--center .simple-card__icon-placeholder {
position: relative;
width: 112px;
height: 112px;
flex-shrink: 0;
overflow: visible;
}
@media (min-width: 1024px) {
#affiliationContent .simple-card--center {
width: 397px;
min-height: 512px;
margin-top: 77px;
}
}
#affiliationContent .simple-card--center .simple-card__text {
font-size: 16px;
line-height: 22px;
-webkit-text-fill-color: #FFFFFF;
}
#affiliationContent .calculator-section {
position: relative;
padding: 0 20px;
display: flex;
flex-direction: column;
gap: 15px;
justify-content: center;
overflow: visible;
}
@media (min-width: 1024px) {
#affiliationContent .calculator-section {
flex-direction: row;
padding: 80px 300px;
gap: 53px;
justify-content: center;
align-items: center;
height: 529px;
}
}
#affiliationContent .calculator-section__text {
display: flex;
flex-direction: column;
gap: 15px;
text-align: center;
align-items: center;
}
@media (min-width: 1024px) {
#affiliationContent .calculator-section__text {
text-align: left;
max-width: 606px;
padding-right: 60px;
align-items: flex-start;
gap: 30px;
}
}
#affiliationContent .calculator-section__text h2 {
font-weight: 700;
font-size: 35px;
line-height: 44px;
color: #21E273;
margin: 0;
text-align: start;
}
@media (min-width: 1024px) {
#affiliationContent .calculator-section__text h2 {
font-size: 50px;
line-height: 60px;
}
}
#affiliationContent .calculator-section__text p {
font-size: 20px;
line-height: 28px;
color: #FFFFFF;
margin: 0;
}
@media (max-width: 1023px) {
#affiliationContent .calculator-section__text p {
text-align: start;
}
}
#affiliationContent .calculator-section__text .btn-link {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
height: 50px;
padding: 0 30px;
border-radius: 100px;
width: fit-content;
white-space: nowrap;
font-weight: 600;
font-size: 16px;
text-transform: uppercase;
text-decoration: none;
box-sizing: border-box;
cursor: pointer;
background-image: linear-gradient(270deg, #C2FD70, #21E273);
background-size: 150% 100%;
background-position: 75% 0;
color: #151525;
border: 2px solid transparent;
transition: background-position 500ms, background 300ms, border-color 300ms, color 300ms;
}
@media (max-width: 1023px) {
#affiliationContent .calculator-section__text .btn-link {
width: 100%;
}
}
#affiliationContent .calculator-section__text .btn-link:hover {
background-image: none;
background: transparent;
border: 2px solid #21E273;
color: #ffffff;
}
#affiliationContent .calculator-section__widget {
box-sizing: border-box;
background: linear-gradient(97deg, rgba(38, 39, 59, 0.84) 25%, rgba(40, 40, 67, 0.84) 106%);
border-radius: 20px;
padding: 50px;
display: flex;
flex-direction: column;
gap: 11px;
width: 100%;
max-width: 621px;
box-shadow: 0 4px 2px rgba(0, 0, 0, 0.45);
}
#affiliationContent .calculator-section__widget-label {
font-weight: 700;
font-size: 18px;
line-height: 38px;
color: #FFFFFF;
margin: 0;
}
#affiliationContent .calculator-section__slider {
display: flex;
align-items: center;
gap: 18px;
}
#affiliationContent .calculator-section__track {
flex: 1;
position: relative;
height: 7px;
background: #57597E;
border-radius: 30px;
overflow: visible;
}
#affiliationContent .calculator-section__track input[type=range] {
width: 100%;
height: 7px;
-webkit-appearance: none;
appearance: none;
background: transparent;
position: absolute;
top: 0;
left: 0;
margin: 0;
cursor: pointer;
z-index: 2;
}
#affiliationContent .calculator-section__track input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
width: 24px;
height: 24px;
border-radius: 50%;
background: #21E273;
border: 3px solid #FFFFFF;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
cursor: grab;
}
#affiliationContent .calculator-section__track input[type=range]::-moz-range-thumb {
width: 24px;
height: 24px;
border-radius: 50%;
background: #21E273;
border: 3px solid #FFFFFF;
}
#affiliationContent .calculator-section__track-fill {
position: absolute;
top: 0;
left: 0;
height: 100%;
background: linear-gradient(to right, #21E273, #c2fd70);
border-radius: 30px;
width: 25%;
z-index: 1;
}
#affiliationContent .calculator-section__value {
background: #1C1C31;
padding: 15px 20px;
border-radius: 10px;
font-weight: 300;
font-size: 20px;
color: #FFFFFF;
white-space: nowrap;
}
#affiliationContent .calculator-section__result {
background: #1C1C31;
border-radius: 6px;
padding: 44px 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
}
#affiliationContent .calculator-section__result-label {
font-weight: 300;
font-size: 14px;
line-height: 38px;
color: #21E273;
margin: 0;
}
#affiliationContent .calculator-section__result-amount {
font-weight: 600;
font-size: 38px;
color: #21E273;
margin: 0;
}
#affiliationContent .calculator-section__result-amount span {
color: #21E273;
}
#affiliationContent .calculator-section__result-amount small {
font-size: 9px;
color: rgba(255, 255, 255, 0.5);
vertical-align: top;
}
#affiliationContent .calculator-section__result-note {
margin: 6px 0 0;
font-size: 11px;
font-style: italic;
font-weight: 300;
color: rgba(255, 255, 255, 0.45);
line-height: 1.3;
padding: 0 5% 0;
}
#affiliationContent .catalogue-section {
padding: 60px 20px;
display: flex;
flex-direction: column;
align-items: center;
gap: 50px;
}
#affiliationContent .catalogue-section > div:first-child {
display: flex;
flex-direction: column;
align-items: center;
gap: 15px;
width: 100%;
}
#affiliationContent .catalogue-section__title {
font-weight: 700;
font-size: 36px;
line-height: 60px;
color: #FFFFFF;
text-align: center;
margin: 0;
}
@media (min-width: 1024px) {
#affiliationContent .catalogue-section__title {
font-size: 50px;
}
}
#affiliationContent .catalogue-section__logos {
display: flex;
align-items: center;
justify-content: center;
gap: 30px;
width: 100%;
max-width: 1276px;
opacity: 0.3;
overflow: hidden;
padding: 20px 0;
}
#affiliationContent .catalogue-section__logos img {
height: 29px;
width: auto;
object-fit: contain;
flex-shrink: 0;
}
#affiliationContent .catalogue-section__tags {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 12px;
}
#affiliationContent .catalogue-tag {
display: inline-flex;
align-items: center;
height: 55px;
padding: 0 40px;
background: #1C1C31;
border: 0.823px solid #c2fd70;
border-radius: 91px;
font-weight: 700;
font-size: 18px;
color: #21E273;
white-space: nowrap;
box-shadow: 0 4px 44px #424254;
}
@media (min-width: 1024px) {
#affiliationContent .catalogue-tag {
font-size: 21.672px;
}
}
#affiliationContent .pricing-section {
display: flex;
flex-direction: row;
justify-content: center;
gap: 15px;
padding: 50px 20px 20px;
}
@media (min-width: 1024px) {
#affiliationContent .pricing-section {
padding: 100px 0;
gap: 50px;
}
}
#affiliationContent .pricing-section__coins {
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
#affiliationContent .pricing-section__coins-mobile {
display: none;
}
@media (max-width: 1023px) {
#affiliationContent .pricing-section__coins-mobile {
display: block;
width: auto;
max-width: 100%;
height: auto;
margin: 0 auto;
}
}
#affiliationContent .pricing-section__content {
display: flex;
flex-direction: column;
align-items: center;
gap: 50px;
}
#affiliationContent .pricing-section__title {
font-weight: 700;
font-size: 35px;
line-height: 44px;
color: #FFFFFF;
text-align: center;
margin: 0;
}
#affiliationContent .pricing-section__title span {
color: #21E273;
}
@media (min-width: 1024px) {
#affiliationContent .pricing-section__title {
font-size: 50px;
line-height: 60px;
}
}
#affiliationContent .pricing-section__cards {
display: flex;
flex-direction: column;
gap: 20px;
align-items: center;
width: 100%;
}
@media (min-width: 1024px) {
#affiliationContent .pricing-section__cards {
flex-direction: row;
justify-content: center;
align-items: stretch;
gap: 24px;
max-width: 1200px;
}
}
#affiliationContent .pricing-section__carousel {
width: 100%;
}
@media (min-width: 1024px) {
#affiliationContent .pricing-section__carousel {
display: contents;
}
}
@media (max-width: 1023px) {
#affiliationContent .pricing-section {
flex-direction: column;
gap: 0;
align-items: stretch;
width: 100%;
max-width: 100%;
overflow-x: hidden;
box-sizing: border-box;
}
#affiliationContent .pricing-section__coins {
display: none;
}
#affiliationContent .pricing-section__content {
width: 100%;
max-width: 100%;
box-sizing: border-box;
}
#affiliationContent .pricing-section__carousel {
width: 100%;
box-sizing: border-box;
}
#affiliationContent .pricing-section__cards {
flex-direction: row;
flex-wrap: nowrap;
align-items: stretch;
gap: 10px;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
padding: 0;
scrollbar-width: none;
-ms-overflow-style: none;
}
#affiliationContent .pricing-section__cards::-webkit-scrollbar {
display: none;
}
#affiliationContent .pricing-section .pricing-card {
flex: 0 0 100%;
width: 100%;
scroll-snap-align: center;
scroll-snap-stop: always;
}
}
#affiliationContent .pricing-section__dots {
display: none;
}
@media (max-width: 1023px) {
#affiliationContent .pricing-section__dots {
display: flex;
justify-content: center;
gap: 3px;
margin-top: 20px;
}
}
#affiliationContent .pricing-section__dot {
width: 10px;
height: 10px;
border-radius: 40px;
background: #FFFFFF;
border: none;
padding: 0;
cursor: pointer;
transition: background 0.25s;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
font: inherit;
color: transparent;
box-shadow: none;
outline: none;
}
#affiliationContent .pricing-section__dot::before, #affiliationContent .pricing-section__dot::after {
content: none !important;
}
#affiliationContent .pricing-section__dot:focus {
outline: none;
}
#affiliationContent .pricing-section__dot:focus-visible {
outline: 2px solid rgba(33, 226, 115, 0.5);
outline-offset: 2px;
}
#affiliationContent .pricing-section__dot.is-active {
background: #21E273;
}
#affiliationContent .pricing-card {
box-sizing: border-box;
background: linear-gradient(#1C1C31, #1C1C31) padding-box, linear-gradient(to right, #21e273, #c2fd70) border-box;
border: 1px solid transparent;
border-radius: 10px;
padding: 40px 25px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
gap: 30px;
text-align: center;
width: 100%;
}
@media (min-width: 1024px) {
#affiliationContent .pricing-card {
width: 397px;
min-height: 512px;
padding: 60px 70px;
}
}
#affiliationContent .pricing-card__badges {
display: flex;
gap: 10px;
width: 100%;
height: 99px;
}
#affiliationContent .pricing-card__badge {
flex: 1;
background: rgba(255, 255, 255, 0.3);
border: 1px solid #c2fd70;
border-radius: 10px;
padding: 7px 10px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 3px;
}
#affiliationContent .pricing-card__badge-value {
font-weight: 300;
font-size: 28px;
line-height: 1;
background: linear-gradient(to right, #21e273, #c2fd70);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
#affiliationContent .pricing-card__badge-value--primary {
font-size: 24px;
font-weight: 500;
}
@media (min-width: 1024px) {
#affiliationContent .pricing-card__badge-value--primary {
font-size: 24px;
}
}
#affiliationContent .pricing-card__badge-value--secondary {
font-size: 14px;
font-weight: 400;
background: none;
-webkit-text-fill-color: rgba(255, 255, 255, 0.55);
color: rgba(255, 255, 255, 0.55);
}
@media (min-width: 1024px) {
#affiliationContent .pricing-card__badge-value--secondary {
font-size: 15px;
}
}
#affiliationContent .pricing-card__badge-label {
font-weight: 300;
font-size: 16px;
color: #FFFFFF;
}
#affiliationContent .pricing-card__mention {
font-size: 12px;
font-style: italic;
color: #FFFFFF;
line-height: 1.4;
margin-top: -20px;
text-align: center;
max-width: 100%;
}
#affiliationContent .pricing-card__name {
font-weight: 700;
font-size: 34.595px;
line-height: 48.432px;
color: #FFFFFF;
margin: 0;
}
#affiliationContent .pricing-card__desc {
font-size: 16px;
line-height: 22px;
color: #FFFFFF;
margin: 0;
}
#affiliationContent .pricing-card__cta {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
width: 279px;
max-width: 100%;
padding: 20px 30px;
border-radius: 100px;
font-weight: 600;
font-size: 16.594px;
text-decoration: none;
text-transform: uppercase;
box-sizing: border-box;
cursor: pointer;
margin-top: auto;
background-image: linear-gradient(270deg, #C2FD70, #21E273);
background-size: 150% 100%;
background-position: 75% 0;
color: #151525;
border: 2px solid transparent;
transition: background-position 500ms, background 300ms, border-color 300ms, color 300ms;
}
#affiliationContent .pricing-card__cta:hover {
background-image: none;
background: transparent;
border: 2px solid #21E273;
color: #ffffff;
}
#affiliationContent .pricing-card--popular {
background: linear-gradient(to right, #21e273, #c2fd70);
border: none;
gap: 15px;
position: relative;
}
#affiliationContent .pricing-card--popular .pricing-card__badge {
background: rgba(255, 255, 255, 0.3);
border-color: #FFFFFF;
}
#affiliationContent .pricing-card--popular .pricing-card__badge-value {
background: none;
-webkit-text-fill-color: #26273B;
color: #26273B;
}
#affiliationContent .pricing-card--popular .pricing-card__badge-label {
color: #26273B;
}
#affiliationContent .pricing-card--popular .pricing-card__name {
color: #26273B;
}
#affiliationContent .pricing-card--popular .pricing-card__desc {
color: #1C1C31;
}
#affiliationContent .pricing-card--popular .pricing-card__mention {
color: #1C1C31;
margin-top: 0;
}
#affiliationContent .pricing-card--popular .pricing-card__cta {
background: #FFFFFF;
width: 258px;
color: #151525;
}
#affiliationContent .pricing-card--popular .pricing-card__cta:hover {
background: #f0f0f0;
}
#affiliationContent .pricing-card__popular-tag {
background: rgba(255, 255, 255, 0.3);
border: 0.944px solid #FFFFFF;
border-radius: 151px;
padding: 5.667px 18.889px;
color: #26273B;
font-weight: 300;
font-size: 15.111px;
white-space: nowrap;
}
#affiliationContent .avantagesSection {
position: relative;
overflow: visible;
padding: 30px 30px;
display: flex;
flex-direction: column;
}
@media (max-width: 1023px) {
#affiliationContent .avantagesSection {
gap: 50px;
}
}
#affiliationContent .avantagesSection .section-header {
display: flex;
justify-content: center;
text-align: center;
}
#affiliationContent .avantagesSection .section-header h2 {
font-weight: 700;
font-size: 35px;
line-height: 44px;
}
@media (min-width: 1024px) {
#affiliationContent .avantagesSection .section-header h2 {
font-size: 50px;
}
}
#affiliationContent .avantagesSection .avantages-grid {
display: flex;
flex-direction: column;
align-items: center;
}
@media (max-width: 1023px) {
#affiliationContent .avantagesSection .avantages-grid {
gap: 30px;
}
}
#affiliationContent .avantagesSection .avantages-grid .container {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 30px;
overflow: visible;
}
#affiliationContent .avantagesSection .avantages-grid .container:first-child {
flex-direction: column-reverse;
}
@media (min-width: 1024px) {
#affiliationContent .avantagesSection .avantages-grid .container:first-child {
flex-direction: row;
}
}
@media (min-width: 1024px) {
#affiliationContent .avantagesSection .avantages-grid .container {
width: 1920px;
height: 689px;
flex-direction: row;
gap: 100px;
}
}
#affiliationContent .avantagesSection .avantages-grid .avantage {
width: 100%;
max-width: 594px;
display: flex;
flex-direction: column;
gap: 20px;
}
@media (min-width: 1024px) {
#affiliationContent .avantagesSection .avantages-grid .avantage {
gap: 30px;
}
}
#affiliationContent .avantagesSection .avantages-grid .avantage p {
width: 100%;
font-size: 20px;
line-height: 28px;
font-weight: 400;
}
@media (min-width: 1024px) {
#affiliationContent .avantagesSection .avantages-grid .avantage p {
width: 534px;
}
}
#affiliationContent .avantagesSection .avantages-grid .img-halo {
position: relative;
overflow: visible;
}
#affiliationContent .avantagesSection .avantages-grid .img-halo::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 200%;
height: 200%;
background-image: url(//seo-jungle.com/wp-content/themes/seojungle-theme/img/haloAvantages.png);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
pointer-events: none;
z-index: -1;
}
#affiliationContent .avantagesSection .avantages-grid .img-halo img {
position: relative;
z-index: 1;
}
#affiliationContent .avantagesSection .avantages-grid .piece {
width: 100%;
max-width: 360px;
height: auto;
}
@media (min-width: 1024px) {
#affiliationContent .avantagesSection .avantages-grid .piece {
height: 360px;
width: 532px;
max-width: none;
}
}
#affiliationContent .avantagesSection .avantages-grid .linky10 {
width: 100%;
max-width: 400px;
height: auto;
}
@media (min-width: 1024px) {
#affiliationContent .avantagesSection .avantages-grid .linky10 {
width: 753px;
height: 548px;
max-width: none;
}
}
#affiliationContent .avantagesSection .avantages-grid h2 {
font-size: 35px;
line-height: 44px;
font-weight: 700;
color: #21E273;
}
@media (min-width: 1024px) {
#affiliationContent .avantagesSection .avantages-grid h2 {
font-size: 50px;
}
}
#affiliationContent .avantagesSection .avantages-grid .listPositive .positivePoint {
height: 40px;
gap: 20px;
display: flex;
flex-direction: row;
align-items: center;
}
#affiliationContent .avantagesSection .avantages-grid .listPositive .positivePoint .vector {
height: 10.97px;
width: 15.75px;
}
#affiliationContent .avantagesSection .avantages-grid .classement {
display: flex;
flex-direction: column;
width: 100%;
max-width: 594px;
gap: 20px;
}
#affiliationContent .avantagesSection .avantages-grid .classement a {
display: flex;
justify-content: start;
}
#affiliationContent .avantagesSection .avantages-grid .classement p {
width: 100%;
font-size: 20px;
line-height: 28px;
font-weight: 400;
}
@media (min-width: 1024px) {
#affiliationContent .avantagesSection .avantages-grid .classement {
gap: 30px;
}
}
#affiliationContent .avantagesSection .avantage-card {
background: rgba(16, 20, 58, 0.75);
border: 1px solid rgba(29, 233, 182, 0.35);
border-radius: 24px;
backdrop-filter: blur(10px);
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.05);
padding: 2rem;
display: flex;
flex-direction: column;
gap: 1.25rem;
transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
position: relative;
overflow: hidden;
min-height: 260px;
}
#affiliationContent .avantagesSection .avantage-card:hover {
transform: translateY(-4px);
border-color: #1DE9B6;
box-shadow: 0 25px 65px rgba(0, 0, 0, 0.5), 0 0 40px rgba(29, 233, 182, 0.45);
}
#affiliationContent .avantagesSection .avantage-card .card-visual {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
max-width: 200px;
}
#affiliationContent .avantagesSection .avantage-card .card-visual img {
width: 100%;
height: auto;
object-fit: contain;
filter: drop-shadow(0 10px 35px rgba(29, 233, 182, 0.45));
}
#affiliationContent .avantagesSection .avantage-card .card-visual--small {
max-width: 80px;
}
#affiliationContent .avantagesSection .avantage-card .card-content {
flex: 1;
display: flex;
flex-direction: column;
gap: 0.75rem;
}
#affiliationContent .avantagesSection .avantage-card .card-content h3 {
font-size: 1.4rem;
font-weight: 800;
color: #FFFFFF;
line-height: 1.25;
}
#affiliationContent .avantagesSection .avantage-card .card-content p {
font-size: 0.95rem;
}
#affiliationContent .avantagesSection .avantage-card .card-content .btn-link {
margin-top: 0.5rem;
}
#affiliationContent .avantagesSection .avantage-card--character {
flex-direction: row;
align-items: center;
}
#affiliationContent .avantagesSection .avantage-card--character .card-visual {
flex: 0 0 40%;
max-width: 180px;
}
#affiliationContent .avantagesSection .avantage-card--character .card-content {
flex: 1;
}
#affiliationContent .avantagesSection .avantage-card--planet {
align-items: center;
text-align: center;
}
#affiliationContent .avantagesSection .avantage-card--planet .card-visual {
max-width: 220px;
}
#affiliationContent .avantagesSection .avantage-card--orbit {
align-items: center;
text-align: center;
}
#affiliationContent .avantagesSection .avantage-card--orbit .card-visual {
max-width: 240px;
position: relative;
}
#affiliationContent .avantagesSection .avantage-card--text {
justify-content: center;
text-align: left;
}
#affiliationContent .avantagesSection .avantage-card--text .card-content h3 {
font-size: 1.6rem;
}
#affiliationContent #influence-section {
max-width: -webkit-fill-available;
display: flex;
flex-direction: column;
gap: 60px;
padding: 30px;
align-items: center;
}
#affiliationContent #influence-section > .bg-visual {
position: absolute;
right: 0;
bottom: 25%;
width: 59%;
max-width: 1150px;
height: auto;
pointer-events: none;
z-index: -1;
mix-blend-mode: color-dodge;
}
#affiliationContent #influence-section > h2 {
font-weight: 700;
font-size: 35px;
line-height: 44px;
letter-spacing: 0;
text-align: center;
vertical-align: middle;
}
@media (min-width: 1024px) {
#affiliationContent #influence-section > h2 {
font-weight: 700;
font-size: 50px;
line-height: 60px;
text-align: center;
vertical-align: middle;
}
}
#affiliationContent #influence-section > .influenceurs-container {
display: flex;
flex-direction: column;
gap: 30px;
}
@media (min-width: 1024px) {
#affiliationContent #influence-section > .influenceurs-container {
flex-direction: row;
}
}
#affiliationContent #influence-section > .influenceurs-container > .influenceur-card {
display: flex;
flex-direction: column;
align-items: center;
gap: 30px;
opacity: 1;
border-radius: 10px;
padding: 40px;
border: #21E273 1px solid;
}
@media (min-width: 1024px) {
#affiliationContent #influence-section > .influenceurs-container > .influenceur-card {
width: 460px;
}
}
#affiliationContent #influence-section > .influenceurs-container > .influenceur-card > a {
width: 100%;
display: flex;
justify-content: flex-end;
font-weight: 600;
font-size: 16px;
line-height: 100%;
letter-spacing: 0;
text-align: center;
vertical-align: middle;
text-transform: uppercase;
text-decoration: underline;
text-decoration-style: solid;
text-decoration-thickness: 0;
text-decoration-skip-ink: auto;
}
#affiliationContent #influence-section > .influenceurs-container > .influenceur-card > div {
font-weight: 400;
font-size: 16px;
line-height: 22px;
letter-spacing: 0;
vertical-align: middle;
}
#affiliationContent #influence-section > .influenceurs-container > .influenceur-card > .message-content > * {
font-weight: 400;
font-size: 16px;
line-height: 22px;
letter-spacing: 0;
vertical-align: middle;
color: #8E90B9;
}
#affiliationContent #influence-section > .influenceurs-container > .influenceur-card > .message-content > ul {
padding: 20px;
}
#affiliationContent #influence-section > .influenceurs-container > .influenceur-card > .message-content > ul > li {
font-weight: 400;
font-size: 16px;
line-height: 22px;
letter-spacing: 0;
vertical-align: middle;
color: #8E90B9;
}
#affiliationContent #influence-section > .influenceurs-container > .influenceur-card > .card-header {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 28px;
opacity: 1;
}
@media (min-width: 1024px) {
#affiliationContent #influence-section > .influenceurs-container > .influenceur-card > .card-header {
flex-direction: row;
}
}
#affiliationContent #influence-section > .influenceurs-container > .influenceur-card > .card-header > .identity {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
angle: 0deg;
opacity: 1;
}
#affiliationContent #influence-section > .influenceurs-container > .influenceur-card > .card-header > .identity > h3 {
font-weight: 700;
font-size: 28.24px;
line-height: 100%;
letter-spacing: 0;
vertical-align: middle;
}
#affiliationContent #influence-section > .influenceurs-container > .influenceur-card > .card-header > .identity > p {
font-weight: 300;
font-size: 20.54px;
line-height: 100%;
letter-spacing: 0;
vertical-align: middle;
}
#affiliationContent #influence-section > .influenceurs-container > .influenceur-card > .card-divider {
display: flex;
flex-direction: row;
width: 100%;
align-items: center;
gap: 8px;
}
#affiliationContent #influence-section > .influenceurs-container > .influenceur-card > .card-divider > .divider {
width: -webkit-fill-available;
height: 1px;
background: linear-gradient(270deg, #C2FD70 0%, #21E273 100%);
margin: 0;
}
#affiliationContent #faq {
max-width: -webkit-fill-available;
opacity: 1;
padding: 30px;
display: flex;
flex-direction: column;
align-items: center;
gap: 15px;
}
#affiliationContent #faq > h2 {
font-weight: 700;
font-size: 35px;
line-height: 44px;
letter-spacing: 0;
text-align: center;
vertical-align: middle;
padding-bottom: 73px;
padding-top: 48px;
}
@media (min-width: 1024px) {
#affiliationContent #faq > h2 {
font-weight: 700;
font-size: 50px;
line-height: 60px;
text-align: center;
vertical-align: middle;
}
}
#affiliationContent #faq { }
#affiliationContent #faq > .faq {
display: flex;
flex-direction: column;
opacity: 1;
border-radius: 10px;
width: 100%;
max-width: 800px; overflow: hidden;  background: linear-gradient(94.68deg, #26273B 24.8%, #282843 100%);
transition: all 0.3s ease;
}
@media (min-width: 1024px) {
#affiliationContent #faq > .faq {
max-width: 1200px;
}
}
#affiliationContent #faq > .faq { }
#affiliationContent #faq > .faq .faq-header {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
padding: 30px;
background: none;
border: none;
cursor: pointer;
text-align: left;
}
#affiliationContent #faq > .faq .faq-header:focus {
outline: none; }
#affiliationContent #faq > .faq .faq-header:focus-visible { box-shadow: 0 0 0 2px #21E273 inset;
}
#affiliationContent #faq > .faq .faq-header { }
#affiliationContent #faq > .faq .faq-header > h3 {
font-weight: 700;
font-size: 21px;
line-height: 28px;
color: #FFFFFF;
margin: 0;
}
#affiliationContent #faq > .faq { }
#affiliationContent #faq > .faq .faq-icon {
width: 24px;
height: 24px;
border-radius: 50%;
position: relative;
flex-shrink: 0; transition: background-color 0.3s ease, transform 0.3s ease; background: linear-gradient(270deg, #C2FD70 0%, #21E273 100%); }
#affiliationContent #faq > .faq .faq-icon::before, #affiliationContent #faq > .faq .faq-icon::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 10px; height: 2px; background-color: #26273B; transform: translate(-50%, -50%);
}
#affiliationContent #faq > .faq .faq-icon::after {
transform: translate(-50%, -50%) rotate(90deg);
transition: transform 0.3s ease;
}
#affiliationContent #faq > .faq { }
#affiliationContent #faq > .faq .faq-content {
max-height: 0; overflow: hidden;
transition: max-height 0.4s ease-out; font-weight: 400;
font-size: 18px;
line-height: 29px;
color: #E0E0E0; }
#affiliationContent #faq > .faq .faq-content .faq-content-inner {
padding: 0 30px 30px 30px;
}
#affiliationContent #faq > .faq .faq-content .faq-content-inner p:first-child {
margin-top: 0; }
#affiliationContent #faq > .faq .faq-content .faq-content-inner p:last-child {
margin-bottom: 0; }
#affiliationContent #faq > .faq { }
#affiliationContent #faq > .faq.active {
background: linear-gradient(94.68deg, #26273B 24.8%, #282843 106.18%);
border: 1px solid #21E273;  }
#affiliationContent #faq > .faq.active .faq-icon {
background: linear-gradient(90deg, #FF4E00 0%, #FF6600 50%, #FF9500 100%);
transform: rotate(180deg); }
#affiliationContent #faq > .faq.active .faq-icon::after { transform: translate(-50%, -50%) rotate(0deg);
}
.blogWrapper {
background: #1C1C31;
color: #FFFFFF;
font-family: "sofia-pro", "Sofia Pro", sans-serif;
padding: 64px 0 0;
}
.blogWrapper h1 > p, .blogWrapper h2 > p, .blogWrapper h3 > p, .blogWrapper h4 > p, .blogWrapper h5 > p, .blogWrapper h6 > p {
font: inherit;
margin: 0;
}
.blogContainer {
max-width: 1430px;
margin: 0 auto;
padding: 0 20px;
}
@media (min-width: 1024px) {
.blogContainer {
padding: 0 48px;
}
}
.blogHero {
padding: 24px 0 40px;
}
.blogHero__suprasub {
font-size: 14px;
text-transform: uppercase;
font-weight: 300;
letter-spacing: 1px;
background: linear-gradient(270deg, #C2FD70 0%, #21E273 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
margin: 0 0 16px;
}
.blogHero__title {
font-family: "comix loud", sans-serif;
font-weight: 400;
font-size: 30px;
line-height: 65px;
text-transform: uppercase;
margin: 0 0 20px;
background: linear-gradient(90deg, #FF4E00 0%, #FF6600 50%, #FF9500 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
@media (min-width: 768px) {
.blogHero__title {
font-size: 36px;
line-height: 70px;
}
}
@media (min-width: 1024px) {
.blogHero__title {
font-size: 48px;
line-height: 80px;
}
}
.blogHero__lead {
font-size: 16px;
line-height: 1.5;
color: rgba(255, 255, 255, 0.65);
max-width: 620px;
margin: 0;
font-weight: 300;
}
@media (min-width: 1024px) {
.blogHero__lead {
font-size: 18px;
}
}
.blogFilters {
padding: 16px 0;
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.blogFilters__pill {
border: 1.5px solid rgba(255, 255, 255, 0.2);
background: transparent;
padding: 10px 20px;
border-radius: 100px;
font-size: 13px;
font-weight: 500;
color: #FFFFFF;
text-decoration: none;
transition: all 0.2s;
display: inline-block;
}
.blogFilters__pill:hover {
border-color: rgba(255, 255, 255, 0.4);
color: #FFFFFF;
}
.blogFilters__pill--active {
background: linear-gradient(270deg, #C2FD70 0%, #21E273 100%);
color: #151525 !important;
border-color: transparent;
font-weight: 600;
}
@media (min-width: 1024px) {
.blogFilters__pill {
font-size: 14px;
}
}
.blogGrid {
display: grid;
grid-template-columns: 1fr;
gap: 20px;
padding: 24px 0 40px;
}
@media (min-width: 768px) {
.blogGrid {
grid-template-columns: repeat(2, 1fr);
gap: 24px;
}
}
@media (min-width: 1024px) {
.blogGrid {
grid-template-columns: repeat(3, 1fr);
}
}
.blog-card {
background: #25253E;
border-radius: 24px;
overflow: hidden;
transition: transform 0.25s ease;
}
.blog-card:hover {
transform: translateY(-4px);
}
.blog-card__link {
display: flex;
flex-direction: column;
height: 100%;
text-decoration: none;
color: inherit;
}
.blog-card__img {
aspect-ratio: 16/10;
position: relative;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-color: #25253E;
}
.blog-card__img--variant-1 {
background-image: linear-gradient(135deg, #FF4E00, #FF9500);
}
.blog-card__img--variant-2 {
background-image: linear-gradient(135deg, #21E273, #C2FD70);
}
.blog-card__img--variant-3 {
background-image: linear-gradient(135deg, #6B5BFF, #21E273);
}
.blog-card__img--variant-4 {
background-image: linear-gradient(135deg, #FF6600, #6B5BFF);
}
.blog-card__img--variant-5 {
background-image: linear-gradient(135deg, #C2FD70, #6B5BFF);
}
.blog-card__badge {
position: absolute;
top: 16px;
left: 16px;
background: rgba(28, 28, 49, 0.85);
color: #C2FD70;
font-size: 11px;
padding: 6px 14px;
border-radius: 100px;
font-weight: 600;
letter-spacing: 0.8px;
text-transform: uppercase;
border: 1px solid rgba(194, 253, 112, 0.25);
}
.blog-card__body {
padding: 24px;
display: flex;
flex-direction: column;
gap: 12px;
flex: 1;
}
.blog-card__date {
font-size: 12px;
color: rgba(255, 255, 255, 0.45);
font-weight: 400;
}
.blog-card__title {
font-size: 18px;
font-weight: 600;
line-height: 1.3;
margin: 0;
color: #FFFFFF;
}
.blog-card__excerpt {
font-size: 14px;
color: rgba(255, 255, 255, 0.65);
line-height: 1.5;
margin: 0;
font-weight: 300;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.blogPagination {
display: flex;
justify-content: center;
gap: 8px;
padding: 24px 0 64px;
flex-wrap: wrap;
}
.blogPagination .page-numbers {
width: 40px;
height: 40px;
border-radius: 50%;
border: 1.5px solid rgba(255, 255, 255, 0.2);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 14px;
font-weight: 500;
color: #FFFFFF;
text-decoration: none;
transition: all 0.2s;
}
.blogPagination .page-numbers:hover {
border-color: rgba(255, 255, 255, 0.4);
}
.blogPagination .page-numbers.current {
background: linear-gradient(270deg, #C2FD70 0%, #21E273 100%);
color: #151525;
border-color: transparent;
font-weight: 700;
}
.blogPagination .page-numbers.dots {
border: none;
}
.blogCta {
margin: 0 0 64px;
padding: 32px 24px;
border-radius: 24px;
background: radial-gradient(circle at 85% 50%, rgba(255, 149, 0, 0.18) 0%, transparent 55%), #25253E;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 20px;
}
@media (min-width: 768px) {
.blogCta {
flex-direction: row;
align-items: center;
gap: 32px;
padding: 40px 48px;
}
}
.blogCta__text {
flex: 1;
}
.blogCta__title {
font-family: "comix loud", sans-serif;
font-size: 25px;
margin: 0 0 8px;
text-transform: uppercase;
letter-spacing: 1px;
line-height: 60px;
background: linear-gradient(90deg, #FF4E00 0%, #FF6600 50%, #FF9500 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
@media (min-width: 768px) {
.blogCta__title {
font-size: 32px;
line-height: 75px;
}
}
.blogCta__sub {
font-size: 15px;
color: rgba(255, 255, 255, 0.65);
margin: 0;
font-weight: 300;
}
.blogCta__btn {
background: linear-gradient(270deg, #C2FD70 0%, #21E273 100%);
color: #151525;
padding: 14px 28px;
border-radius: 100px;
font-size: 14px;
font-weight: 700;
letter-spacing: 0.5px;
text-transform: uppercase;
cursor: pointer;
white-space: nowrap;
text-decoration: none;
display: inline-block;
transition: transform 0.2s;
}
.blogCta__btn:hover {
transform: translateY(-2px);
}
.blogEmpty {
text-align: center;
padding: 64px 24px 80px;
}
.blogEmpty__title {
font-size: 22px;
font-weight: 600;
margin: 0 0 8px;
color: #FFFFFF;
}
.blogEmpty__title .accent {
background: linear-gradient(270deg, #C2FD70 0%, #21E273 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.blogEmpty__sub {
font-size: 15px;
color: rgba(255, 255, 255, 0.65);
margin: 0;
font-weight: 300;
}
.blogSingle {
background: #1C1C31;
color: #FFFFFF;
font-family: "sofia-pro", "Sofia Pro", sans-serif;
}
.blogSingle__hero {
position: relative;
width: 100%;
aspect-ratio: 16/9;
max-height: 520px;
background-color: #25253E;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
display: flex;
align-items: flex-end;
}
.blogSingle__hero--variant-1 {
background-image: linear-gradient(135deg, #FF4E00, #FF9500);
}
.blogSingle__hero--variant-2 {
background-image: linear-gradient(135deg, #21E273, #C2FD70);
}
.blogSingle__hero--variant-3 {
background-image: linear-gradient(135deg, #6B5BFF, #21E273);
}
.blogSingle__hero--variant-4 {
background-image: linear-gradient(135deg, #FF6600, #6B5BFF);
}
.blogSingle__hero--variant-5 {
background-image: linear-gradient(135deg, #C2FD70, #6B5BFF);
}
@media (min-width: 768px) {
.blogSingle__hero {
aspect-ratio: 16/8;
}
}
@media (min-width: 1024px) {
.blogSingle__hero {
aspect-ratio: 16/7;
}
}
.blogSingle__heroOverlay {
width: 100%;
background: linear-gradient(180deg, transparent 0%, rgba(28, 28, 49, 0.85) 65%, #1C1C31 100%);
padding: 80px 20px 40px;
}
@media (min-width: 1024px) {
.blogSingle__heroOverlay {
padding: 120px 48px 60px;
}
}
.blogSingle__heroInner {
max-width: 1430px;
margin: 0 auto;
}
.blogSingle__badge {
display: inline-block;
background: linear-gradient(270deg, #C2FD70 0%, #21E273 100%);
color: #151525;
font-size: 11px;
padding: 6px 14px;
border-radius: 100px;
font-weight: 700;
letter-spacing: 0.8px;
text-transform: uppercase;
margin-bottom: 16px;
text-decoration: none;
}
.blogSingle__title {
font-family: "sofia-pro", "Sofia Pro", sans-serif;
font-weight: 700;
font-size: 28px;
line-height: 1.15;
color: #FFFFFF;
margin: 0 0 12px;
}
@media (min-width: 768px) {
.blogSingle__title {
font-size: 36px;
}
}
@media (min-width: 1024px) {
.blogSingle__title {
font-size: 40px;
}
}
.blogSingle__meta {
font-size: 13px;
color: rgba(255, 255, 255, 0.65);
font-weight: 400;
}
.blogSingle__heroSimple {
background: #1C1C31;
padding: 48px 20px 32px;
}
@media (min-width: 1024px) {
.blogSingle__heroSimple {
padding: 64px 48px 40px;
}
}
.blogSingle__heroSimpleInner {
max-width: 1430px;
margin: 0 auto;
}
.blogSingle__body {
padding: 32px 20px 64px;
}
@media (min-width: 1024px) {
.blogSingle__body {
padding: 48px 48px 96px;
}
}
.blogSingle__back {
display: flex;
align-items: center;
gap: 6px;
width: fit-content;
max-width: 680px;
margin: 0 auto 32px;
color: #C2FD70;
text-decoration: none;
font-size: 13px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
}
.blogSingle__back:hover {
color: #21E273;
}
.blogSingle__content {
max-width: 680px;
margin: 0 auto;
font-size: 16px;
line-height: 1.7;
color: rgba(255, 255, 255, 0.88);
}
.blogSingle__content > *:first-child::first-letter {
font-weight: 500;
}
.blogSingle__content p {
margin: 0 0 18px;
font-weight: 300;
}
.blogSingle__content h2 {
font-family: "sofia-pro", "Sofia Pro", sans-serif;
font-size: 24px;
font-weight: 700;
line-height: 1.25;
margin: 36px 0 14px;
color: #FFFFFF;
}
.blogSingle__content h3 {
font-size: 20px;
font-weight: 600;
line-height: 1.3;
margin: 28px 0 12px;
color: #FFFFFF;
}
.blogSingle__content a {
color: #C2FD70;
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 3px;
}
.blogSingle__content a:hover {
color: #21E273;
}
.blogSingle__content ul, .blogSingle__content ol {
margin: 0 0 18px;
padding-left: 24px;
}
.blogSingle__content ul li, .blogSingle__content ol li {
margin-bottom: 8px;
font-weight: 300;
}
.blogSingle__content blockquote {
border-left: 3px solid #21E273;
padding: 4px 0 4px 20px;
margin: 24px 0;
color: rgba(255, 255, 255, 0.65);
font-style: italic;
}
.blogSingle__content img {
max-width: 100%;
height: auto;
border-radius: 16px;
margin: 24px 0;
}
.blogSingle__content code {
background: #25253E;
padding: 2px 8px;
border-radius: 6px;
font-size: 14px;
font-family: "SF Mono", Monaco, monospace;
}
.blogSingle__content pre {
background: #25253E;
padding: 20px;
border-radius: 12px;
overflow-x: auto;
margin: 24px 0;
}
.blogSingle__content pre code {
background: transparent;
padding: 0;
}


#netlinkingContent {
background: #1C1C31;
overflow-x: hidden;
}
#netlinkingContent:after {
content: "";
position: absolute;
inset: 0;
background: url(//seo-jungle.com/wp-content/themes/seojungle-theme/img/planetePhone.svg) no-repeat center center;
background-size: contain;
z-index: 1;
opacity: 0.1;
pointer-events: none;
left: -50%;
top: -12.5rem;
}
@media (min-width: 1024px) {
#netlinkingContent:after {
top: -18.5185185185vh;
max-height: 965px;
background: url(//seo-jungle.com/wp-content/themes/seojungle-theme/img/Planet.webp) no-repeat center center;
left: 0;
opacity: 1;
}
}
@media (min-width: 2000px) {
#netlinkingContent:after {
max-height: 1060px;
background-size: 100% auto;
}
}
#netlinkingContent .wrapper {
display: flex;
flex-direction: column;
align-items: center;
max-width: unset;
}
#netlinkingContent .wrapper > #firstContentWrapper {
overflow: hidden;
display: flex;
align-items: center;
flex-direction: column;
position: relative;
width: -webkit-fill-available;
}
#netlinkingContent .wrapper > #firstContentWrapper > .container {
width: 100%;
display: flex;
justify-content: center;
z-index: 2;
}
#netlinkingContent .wrapper > #firstContentWrapper > .container .hero-main-container {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
width: -webkit-fill-available;
margin: 0 auto;
max-width: 90rem;
padding: 2.5rem 1.875rem;
}
@media (min-width: 1024px) {
#netlinkingContent .wrapper > #firstContentWrapper > .container .hero-main-container {
flex-direction: row;
align-items: center;
max-width: 1430px;
margin: 0 auto;
padding: unset;
gap: 40px;
}
}
#netlinkingContent .wrapper > #firstContentWrapper > .container .hero-text-content {
flex: 1.2;
}
@media (min-width: 1024px) {
#netlinkingContent .wrapper > #firstContentWrapper > .container .hero-text-content {
min-width: 850px;
display: flex;
flex-direction: column;
gap: 90px;
}
}
#netlinkingContent .wrapper > #firstContentWrapper > .container .hero-text-content #topContent {
text-align: center;
}
@media (min-width: 1024px) {
#netlinkingContent .wrapper > #firstContentWrapper > .container .hero-text-content #topContent {
text-align: left;
}
}
#netlinkingContent .wrapper > #firstContentWrapper > .container .hero-text-content #topContent .titleContainer {
display: flex;
flex-direction: column;
gap: 0.625rem;
}
@media (min-width: 1024px) {
#netlinkingContent .wrapper > #firstContentWrapper > .container .hero-text-content #topContent .titleContainer {
gap: 0.9259259259vh;
}
}
#netlinkingContent .wrapper > #firstContentWrapper > .container .hero-text-content #topContent .titleContainer .main-heading {
margin: 0;
padding: 0;
line-height: 1.2;
display: flex;
flex-direction: column;
}
#netlinkingContent .wrapper > #firstContentWrapper > .container .hero-text-content #topContent .titleContainer .light-title {
display: block;
font-weight: 300;
text-transform: uppercase;
color: #fff;
font-size: clamp(1.25rem, 3vw, 2.3125rem);
letter-spacing: 0.375rem;
}
@media (min-width: 1024px) {
#netlinkingContent .wrapper > #firstContentWrapper > .container .hero-text-content #topContent .titleContainer .light-title {
font-size: 2.3125rem;
letter-spacing: 0.3125vw;
}
}
#netlinkingContent .wrapper > #firstContentWrapper > .container .hero-text-content #topContent .titleContainer .bold-title {
display: block;
font-weight: 700;
line-height: 1;
color: #fff;
font-size: 35px;
margin: 0.625rem 0;
}
@media (min-width: 1024px) {
#netlinkingContent .wrapper > #firstContentWrapper > .container .hero-text-content #topContent .titleContainer .bold-title {
font-size: 4.1875rem;
margin: 0.9259259259vh 0;
}
}
#netlinkingContent .wrapper > #firstContentWrapper > .container .hero-text-content #topContent .titleContainer .gamified-row {
display: flex;
align-items: center;
flex-wrap: wrap;
justify-content: center;
gap: 1.25rem;
margin-top: 0.625rem;
}
@media (min-width: 1024px) {
#netlinkingContent .wrapper > #firstContentWrapper > .container .hero-text-content #topContent .titleContainer .gamified-row {
gap: 1.0416666667vw;
margin-top: 0.9259259259vh;
justify-content: unset;
}
}
#netlinkingContent .wrapper > #firstContentWrapper > .container .hero-text-content #topContent .titleContainer .gamified-badge {
display: inline-block;
border-radius: 3.125rem;
background: linear-gradient(90deg, #FF4E00 0%, #FF6600 50%, #FF9500 100%);
font-weight: 400;
color: #fff;
text-transform: uppercase;
padding: 0.625rem 1.5625rem;
font-size: 1.25rem;
letter-spacing: 0.375rem;
}
@media (min-width: 1024px) {
#netlinkingContent .wrapper > #firstContentWrapper > .container .hero-text-content #topContent .titleContainer .gamified-badge {
padding: 0.9259259259vh 1.3020833333vw;
border-radius: 2.6041666667vw;
font-size: 1.25rem;
letter-spacing: 0.3125vw;
}
}
#netlinkingContent .wrapper > #firstContentWrapper > .container .hero-text-content #topContent .usersContainer {
display: flex;
align-items: center;
gap: 0.75rem;
margin-top: 0;
}
@media (min-width: 1024px) {
#netlinkingContent .wrapper > #firstContentWrapper > .container .hero-text-content #topContent .usersContainer {
gap: 0.625vw;
}
}
#netlinkingContent .wrapper > #firstContentWrapper > .container .hero-text-content #topContent .usersContainer .avatar-stack {
display: flex;
}
#netlinkingContent .wrapper > #firstContentWrapper > .container .hero-text-content #topContent .usersContainer .avatar-stack img {
object-fit: cover;
}
#netlinkingContent .wrapper > #firstContentWrapper > .container .hero-text-content #topContent .usersContainer .avatar-stack img.overlap {
margin-left: -0.75rem;
}
@media (min-width: 1024px) {
#netlinkingContent .wrapper > #firstContentWrapper > .container .hero-text-content #topContent .usersContainer .avatar-stack img.overlap {
margin-left: -0.625vw;
}
}
#netlinkingContent .wrapper > #firstContentWrapper > .container .hero-text-content #topContent .usersContainer p {
font-weight: 300;
color: rgba(255, 255, 255, 0.8);
font-size: 0.875rem;
}
@media (min-width: 1024px) {
#netlinkingContent .wrapper > #firstContentWrapper > .container .hero-text-content #topContent .usersContainer p {
font-size: 0.875rem;
}
}
#netlinkingContent .wrapper > #firstContentWrapper > .container #mainActions {
display: flex;
flex-direction: column;
gap: 1.875rem;
margin-top: 3.75rem;
max-width: 56.25rem;
}
@media (min-width: 1024px) {
#netlinkingContent .wrapper > #firstContentWrapper > .container #mainActions {
flex-direction: row;
align-items: flex-start;
gap: 1.5625vw;
margin-top: 5.5555555556vh;
max-width: 46.875vw;
}
}
#netlinkingContent .wrapper > #firstContentWrapper > .container #mainActions .actionBlock {
flex: 1;
}
#netlinkingContent .wrapper > #firstContentWrapper > .container #mainActions .actionBlock .desc {
color: #fff;
line-height: 1.4;
font-size: 1.0625rem;
margin-bottom: 1.5625rem;
}
@media (min-width: 1024px) {
#netlinkingContent .wrapper > #firstContentWrapper > .container #mainActions .actionBlock .desc {
font-size: 1.0625rem;
margin-bottom: 2.3148148148vh;
min-height: 4.6296296296vh;
}
}
#netlinkingContent .wrapper > #firstContentWrapper > .container #mainActions .vertical-divider {
display: none;
}
@media (min-width: 1024px) {
#netlinkingContent .wrapper > #firstContentWrapper > .container #mainActions .vertical-divider {
display: block;
width: 0.0520833333vw;
height: 10.1851851852vh;
background: rgba(255, 255, 255, 0.2);
align-self: center;
}
}
#netlinkingContent .wrapper > #firstContentWrapper > .container .hero-visual-content {
flex: 1;
display: none;
justify-content: center;
margin-top: 2.5rem;
}
@media (min-width: 1024px) {
#netlinkingContent .wrapper > #firstContentWrapper > .container .hero-visual-content {
display: flex;
margin-top: 0;
justify-content: flex-end;
position: relative;
right: 2.6041666667vw;
top: 4.6296296296vh;
width: 850px;
}
}
#netlinkingContent .wrapper > #firstContentWrapper > .container .hero-visual-content #player-container {
width: 100%;
opacity: 0;
transition: opacity 0.5s ease;
max-width: 100%;
height: 18.75rem;
}
#netlinkingContent .wrapper > #firstContentWrapper > .container .hero-visual-content #player-container.loaded {
opacity: 1;
}
@media (min-width: 1024px) {
#netlinkingContent .wrapper > #firstContentWrapper > .container .hero-visual-content #player-container {
max-width: 630px;
height: 630px;
transform: scale(1.1);
}
}
#netlinkingContent .wrapper > #firstContentWrapper .logo-carousel-wrapper {
background: #1C1C31;
overflow: hidden;
position: relative;
width: 100%;
height: 150px;
}
#netlinkingContent .wrapper > #firstContentWrapper .logo-carousel-wrapper::before, #netlinkingContent .wrapper > #firstContentWrapper .logo-carousel-wrapper::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
z-index: 2;
pointer-events: none;
width: 6.25rem;
}
@media (min-width: 1024px) {
#netlinkingContent .wrapper > #firstContentWrapper .logo-carousel-wrapper::before, #netlinkingContent .wrapper > #firstContentWrapper .logo-carousel-wrapper::after {
width: 5.2083333333vw;
}
}
#netlinkingContent .wrapper > #firstContentWrapper .logo-carousel-wrapper::before {
left: 0;
background: linear-gradient(to right, #1C1C31 0%, transparent 100%);
}
#netlinkingContent .wrapper > #firstContentWrapper .logo-carousel-wrapper::after {
right: 0;
background: linear-gradient(to left, #1C1C31 0%, transparent 100%);
}
#netlinkingContent .wrapper > #firstContentWrapper .logo-carousel-wrapper .logo-carousel-track {
display: flex !important;
align-items: center;
width: max-content !important;
will-change: transform;
z-index: 3;
}
#netlinkingContent #secondContentWrapper {
max-width: -webkit-fill-available;
display: flex;
flex-direction: column;
align-items: center;
padding: 2rem 0 0;
}
@media (min-width: 1024px) {
#netlinkingContent #secondContentWrapper {
display: flex;
flex-direction: row;
align-items: center;
padding: 0;
max-width: 1430px;
}
}
#netlinkingContent #secondContentWrapper > img {
width: 90%;
max-width: 380px;
display: block;
margin: 0 auto;
}
@media (min-width: 1024px) {
#netlinkingContent #secondContentWrapper > img {
width: 60%;
max-width: none;
margin: 0;
}
}
#netlinkingContent #secondContentWrapper > .content {
display: flex;
flex-direction: column;
gap: 30px;
opacity: 1;
padding-right: 30px;
padding-left: 30px;
}
@media (min-width: 1024px) {
#netlinkingContent #secondContentWrapper > .content {
align-items: flex-start;
padding: unset;
}
}
#netlinkingContent #secondContentWrapper > .content > h2 {
display: flex;
align-items: center;
flex-direction: column;
gap: 7.5px;
}
@media (min-width: 1024px) {
#netlinkingContent #secondContentWrapper > .content > h2 {
align-items: flex-start;
}
}
#netlinkingContent #secondContentWrapper > .content > h2 > span {
font-weight: 700;
font-size: clamp(1.5rem, 7vw, 35px);
line-height: 1.1;
text-align: center;
vertical-align: middle;
text-transform: uppercase;
color: #21E273;
}
@media (min-width: 1024px) {
#netlinkingContent #secondContentWrapper > .content > h2 > span {
align-items: flex-start;
font-size: 50px;
text-align: left;
}
}
#netlinkingContent #secondContentWrapper > .content > h2 > span:first-child {
letter-spacing: 4px;
font-weight: 400;
font-size: 20px;
line-height: 90%;
vertical-align: middle;
text-transform: uppercase;
color: #FFFFFF;
}
@media (min-width: 1024px) {
#netlinkingContent #secondContentWrapper > .content > h2 > span:first-child {
align-items: flex-start;
font-size: 32px;
}
}
#netlinkingContent #secondContentWrapper > .content > h2 > span:last-child {
letter-spacing: 4px;
font-weight: 400;
font-size: 20px;
line-height: 90%;
vertical-align: middle;
text-transform: uppercase;
color: #FFFFFF;
}
@media (min-width: 1024px) {
#netlinkingContent #secondContentWrapper > .content > h2 > span:last-child {
align-items: flex-start;
font-size: 32px;
}
}
#netlinkingContent #secondContentWrapper > .content > p {
font-weight: 400;
font-size: 20px;
line-height: 28px;
text-align: center;
vertical-align: middle;
}
@media (min-width: 1024px) {
#netlinkingContent #secondContentWrapper > .content > p {
text-align: left;
}
}
#netlinkingContent #thirdContentWrapper {
max-width: -webkit-fill-available;
position: relative;
display: flex;
flex-direction: column;
gap: 43px;
padding: 30px;
}
@media (min-width: 1024px) {
#netlinkingContent #thirdContentWrapper {
width: -webkit-fill-available;
max-width: 1430px;
padding: 0 120px;
align-items: center;
}
}
#netlinkingContent #thirdContentWrapper .desktop-decoration,
#netlinkingContent #thirdContentWrapper .desktop-only {
display: none;
}
@media (min-width: 1024px) {
#netlinkingContent #thirdContentWrapper .desktop-decoration,
#netlinkingContent #thirdContentWrapper .desktop-only {
display: block;
}
}
#netlinkingContent #thirdContentWrapper > .top-content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
opacity: 1;
padding-right: 30px;
padding-left: 30px;
min-height: 340px;
position: relative;
}
@media (min-width: 1024px) {
#netlinkingContent #thirdContentWrapper > .top-content {
min-height: auto;
justify-content: center;
max-width: 649px;
padding-top: 32px;
}
}
#netlinkingContent #thirdContentWrapper > .top-content:after {
z-index: 0;
position: absolute;
left: 0;
width: 100%;
height: 100%;
content: "";
top: -25px;
background: url(//seo-jungle.com/wp-content/themes/seojungle-theme/img/Les gentils et experts seo - fond transparent (1).svg") no-repeat center center;
}
@media (min-width: 1024px) {
#netlinkingContent #thirdContentWrapper > .top-content:after {
display: none;
}
}
#netlinkingContent #thirdContentWrapper > .top-content > h2 {
align-items: center;
display: flex;
z-index: 1;
flex-direction: column;
gap: 7px;
position: absolute;
bottom: -6px;
}
@media (min-width: 1024px) {
#netlinkingContent #thirdContentWrapper > .top-content > h2 {
position: static;
max-width: 800px;
gap: 15px;
}
}
#netlinkingContent #thirdContentWrapper > .top-content > h2 > span:first-child {
font-family: "Comix Loud", sans-serif;
font-weight: 300;
font-size: 16px;
line-height: 40px;
text-align: center;
vertical-align: middle;
text-transform: uppercase;
font-style: normal;
}
@media (min-width: 1024px) {
#netlinkingContent #thirdContentWrapper > .top-content > h2 > span:first-child {
font-size: 25px;
line-height: 60px;
font-weight: 400;
}
}
#netlinkingContent #thirdContentWrapper > .top-content > h2 > span:last-child {
display: flex;
align-items: center;
justify-content: center;
height: auto;
gap: 6px;
opacity: 1;
padding: 8px 16px;
border-radius: 37.27px;
font-weight: 400;
font-size: 14px;
line-height: 1.2;
letter-spacing: 0.21em;
vertical-align: middle;
text-transform: uppercase;
background: linear-gradient(90deg, #FF4E00 0%, #FF6600 50%, #FF9500 100%);
}
@media (min-width: 1024px) {
#netlinkingContent #thirdContentWrapper > .top-content > h2 > span:last-child {
font-size: 26px;
}
}
#netlinkingContent #thirdContentWrapper > .bottom-content {
display: flex;
flex-direction: column;
gap: 18px;
align-items: center;
}
@media (min-width: 1024px) {
#netlinkingContent #thirdContentWrapper > .bottom-content {
flex-direction: row;
align-items: center;
}
}
@media (min-width: 1024px) {
#netlinkingContent #thirdContentWrapper > .bottom-content > .desktop-decoration {
width: 650px;
display: block;
}
}
#netlinkingContent #thirdContentWrapper > .bottom-content > .exemples-list {
display: flex;
flex-direction: column;
gap: 18px;
align-items: center;
}
@media (min-width: 1024px) {
#netlinkingContent #thirdContentWrapper > .bottom-content > .exemples-list {
align-items: flex-start;
transform: scale(0.8);
}
}
#netlinkingContent #thirdContentWrapper > .bottom-content > .exemples-list > .exemple-item[data-id="3"] {
display: none;
}
#netlinkingContent #thirdContentWrapper > .bottom-content > .exemples-list > .exemple-item {
box-shadow: 0px 4px 44px 0px #424254;
display: flex;
flex-direction: row;
align-items: center;
padding: 5px 20px;
gap: 7px;
border-radius: 91.19px;
border: 0.82px solid transparent;
background: linear-gradient(#1C1C31, #1C1C31), linear-gradient(90deg, #FF4E00 0%, #FF6600 50%, #FF9500 100%);
background-clip: padding-box, border-box;
background-origin: padding-box, border-box;
height: 50px;
opacity: 1;
}
#netlinkingContent #thirdContentWrapper > .bottom-content > .exemples-list > .exemple-item:nth-child(even) {
width: 230px;
}
#netlinkingContent #thirdContentWrapper > .bottom-content > .exemples-list > .exemple-item > p {
color: #FF8D00;
font-weight: 700;
font-size: 16px;
line-height: 17.29px;
vertical-align: middle;
}
@media (min-width: 1024px) {
#netlinkingContent #thirdContentWrapper > .bottom-content > .exemples-list > .exemple-item > p {
font-size: 21.67px;
}
}
@media (min-width: 1024px) {
#netlinkingContent #thirdContentWrapper > .bottom-content > .exemples-list > .exemple-item {
height: 40px;
padding: 0px 20px;
width: max-content;
cursor: pointer;
opacity: 0.5;
transition: all 0.3s ease;
}
#netlinkingContent #thirdContentWrapper > .bottom-content > .exemples-list > .exemple-item:nth-child(even) {
width: max-content;
}
#netlinkingContent #thirdContentWrapper > .bottom-content > .exemples-list > .exemple-item.is-active {
opacity: 1 !important;
transform: scale(1.05);
}
}
#netlinkingContent #thirdContentWrapper > .bottom-content > .exemples-list > p {
font-weight: 400;
font-size: 20px;
line-height: 40px;
vertical-align: middle;
}
@media (min-width: 1024px) {
#netlinkingContent #thirdContentWrapper > .exemple-image-container {
display: flex;
box-sizing: border-box;
position: relative;
width: 100%;
min-height: 300px;
padding: 10px 30px 0;
border-radius: 10px;
overflow: hidden;
top: -100px;
align-items: center;
justify-content: center;
transition: height 0.4s ease;
}
#netlinkingContent #thirdContentWrapper > .exemple-image-container .exemple-image {
position: absolute;
top: 0;
left: 0;
right: 0;
margin: 0 auto;
width: 80%;
object-fit: contain;
opacity: 0;
z-index: 0;
pointer-events: none;
transition: opacity 0.4s ease;
}
#netlinkingContent #thirdContentWrapper > .exemple-image-container .exemple-image.is-active {
position: relative;
opacity: 1;
z-index: 10;
pointer-events: auto;
}
}
#netlinkingContent #fourthContentWrapper {
max-width: -webkit-fill-available;
padding-top: 30px;
padding-bottom: 30px;
opacity: 1;
}
@media (min-width: 1024px) {
#netlinkingContent #fourthContentWrapper {
max-width: 1430px;
}
}
#netlinkingContent #fourthContentWrapper > .first-content {
display: flex;
flex-direction: column;
align-items: center;
padding: 30px 0 60px;
gap: 15px;
angle: -180 deg;
opacity: 1;
}
@media (min-width: 1024px) {
#netlinkingContent #fourthContentWrapper > .first-content {
gap: 25px;
}
}
#netlinkingContent #fourthContentWrapper > .first-content > h2 {
font-weight: 700;
font-size: 35px;
line-height: 44px;
text-align: center;
vertical-align: middle;
padding-left: 30px;
padding-right: 30px;
}
@media (min-width: 1024px) {
#netlinkingContent #fourthContentWrapper > .first-content > h2 {
font-weight: 700;
font-size: 50px;
line-height: 60px;
text-align: center;
vertical-align: middle;
}
}
#netlinkingContent #fourthContentWrapper > .first-content > .logo-carousel-wrapper {
width: 100%;
}
#netlinkingContent #fourthContentWrapper > .first-content > .avantages-list {
display: flex;
align-items: center;
flex-direction: row;
opacity: 1;
background: none;
justify-content: center;
margin-top: 0;
padding: 0;
flex-wrap: wrap;
gap: 12px;
}
#netlinkingContent #fourthContentWrapper > .first-content > .avantages-list > .avantage-item {
box-shadow: 0px 3.36px 36.92px 0px #424254;
padding: 16.13px 36.02px;
gap: 10.36px;
opacity: 1;
border-radius: 76.52px;
border: 1px solid transparent;
background: linear-gradient(#1C1C31, #1C1C31), linear-gradient(270deg, #C2FD70 0%, #21E273 100%);
background-clip: padding-box, border-box;
background-origin: padding-box, border-box;
color: #21E273;
font-weight: 700;
font-size: 18.19px;
line-height: 14.51px;
vertical-align: middle;
width: max-content;
}
@media (min-width: 1024px) {
#netlinkingContent #fourthContentWrapper > .first-content > .avantages-list > .avantage-item {
font-size: 21.67px;
line-height: 17.29px;
}
}
#netlinkingContent #fourthContentWrapper > .second-content {
padding-right: 30px;
padding-left: 30px;
}
@media (min-width: 1024px) {
#netlinkingContent #fourthContentWrapper > .second-content {
padding: 0;
}
}
#netlinkingContent #fourthContentWrapper > .second-content {
opacity: 1;
}
#netlinkingContent #fourthContentWrapper > .second-content #searchCatalogue {
box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.4509803922);
display: flex;
flex-direction: column;
background: linear-gradient(94.68deg, #26273B 24.8%, #282843 106.18%);
padding: 40px 30px;
gap: 15px;
opacity: 1;
border-radius: 20px;
}
@media (min-width: 1024px) {
#netlinkingContent #fourthContentWrapper > .second-content #searchCatalogue {
flex-direction: row;
gap: 50px;
opacity: 1;
padding: 2.7777777778vh 5.2083333333vw;
border-radius: 20px;
}
}
#netlinkingContent #fourthContentWrapper > .second-content #searchCatalogue > #leftPar {
width: -webkit-fill-available;
}
#netlinkingContent #fourthContentWrapper > .second-content #searchCatalogue > #leftPar > h3 {
font-weight: 700;
font-size: 30px;
line-height: 38px;
letter-spacing: 0;
vertical-align: middle;
}
#netlinkingContent #fourthContentWrapper > .second-content #searchCatalogue > #leftPar > p {
font-size: 19px;
font-weight: 500;
display: none;
color: #21E273;
}
@media (min-width: 1024px) {
#netlinkingContent #fourthContentWrapper > .second-content #searchCatalogue > #leftPar > p {
display: flex;
align-items: baseline;
gap: 16px;
}
}
#netlinkingContent #fourthContentWrapper > .second-content #searchCatalogue > #leftPar > p > span {
font-size: 74px;
font-weight: 700;
display: none;
color: #21E273;
}
@media (min-width: 1024px) {
#netlinkingContent #fourthContentWrapper > .second-content #searchCatalogue > #leftPar > p > span {
display: flex;
}
}
#netlinkingContent #fourthContentWrapper > .second-content #searchCatalogue > .divider {
display: none;
background: rgba(255, 255, 255, 0.5) !important;
width: 0.5px !important;
height: inherit !important;
margin: unset !important;
opacity: 0.5 !important;
}
@media (min-width: 1024px) {
#netlinkingContent #fourthContentWrapper > .second-content #searchCatalogue > .divider {
display: block;
}
}
#netlinkingContent #fourthContentWrapper > .second-content #searchCatalogue > #rightPart {
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
gap: 15px;
}
#netlinkingContent #fourthContentWrapper > .second-content #searchCatalogue > #rightPart > p {
font-weight: 400;
font-size: 20px;
line-height: 27px;
letter-spacing: 0;
vertical-align: middle;
}
#netlinkingContent #fourthContentWrapper > .second-content #searchCatalogue > #rightPart > #searchResult {
display: flex;
flex-direction: column;
gap: 16px;
}
#netlinkingContent #fourthContentWrapper > .second-content #searchCatalogue > #rightPart > #searchResult > select {
width: 100%;
height: 42px;
border-radius: 30px;
background: #FFFFFF;
color: black;
padding: 0 12px;
border: none;
outline: none;
border-right: 12px solid transparent;
font-size: 16px;
}
#netlinkingContent #fourthContentWrapper > .second-content #searchCatalogue > #rightPart > #searchResult > select > option {
color: black;
}
#netlinkingContent #fourthContentWrapper > .second-content #searchCatalogue > #rightPart > #searchResult > p {
font-size: 23px;
font-weight: 600;
min-width: 8rem;
}
#netlinkingContent #fourthContentWrapper > .second-content #searchCatalogue > #rightPart > #searchResult > p > span {
font-size: 23px;
font-weight: 700;
}
#netlinkingContent #fourthContentWrapper > .third-content {
display: flex;
padding-top: 30px;
padding-right: 30px;
padding-left: 30px;
gap: 10px;
opacity: 1;
}
@media (min-width: 1024px) {
#netlinkingContent #fourthContentWrapper > .third-content {
justify-content: center;
}
}
#netlinkingContent #fourthContentWrapper > .third-content > .fillButton {
max-height: 25px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px 30px;
opacity: 1;
border-radius: 100px;
color: #151525;
background: linear-gradient(270deg, #C2FD70 0%, #21E273 100%);
font-weight: 600;
font-size: 16px;
line-height: 100%;
letter-spacing: 0;
text-align: center;
vertical-align: middle;
text-transform: uppercase;
}
@media (min-width: 1024px) {
#netlinkingContent #fourthContentWrapper > .third-content > .fillButton {
justify-content: space-evenly;
max-width: 240px;
}
}
#netlinkingContent #fourthContentWrapper > .third-content > .fillButton > i {
color: #151525;
}
#netlinkingContent #fifthContentWrapper {
width: 100%;
position: relative;
padding: 40px 0;
opacity: 1;
}
#netlinkingContent #fifthContentWrapper:before {
z-index: 0;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 400px;
opacity: 0.5;
content: "";
background: url(//seo-jungle.com/wp-content/themes/seojungle-theme/img/bg-bleu.webp) no-repeat center center;
background-size: cover;
}
@media (min-width: 1024px) {
#netlinkingContent #fifthContentWrapper:before {
height: 100%;
}
}
#netlinkingContent #fifthContentWrapper > .content-wrapper {
display: flex;
flex-direction: column;
width: 100%;
max-width: 1430px;
margin: 0 auto;
gap: 32px;
position: relative;
z-index: 1;
}
@media (min-width: 1024px) {
#netlinkingContent #fifthContentWrapper > .content-wrapper {
flex-direction: row;
justify-content: center;
}
}
@media (min-width: 1024px) {
#netlinkingContent #fifthContentWrapper .first-content {
display: flex;
flex-direction: column;
align-items: center;
gap: 24px;
}
}
#netlinkingContent #fifthContentWrapper .first-content {
display: flex;
flex-direction: column;
align-items: center;
}
#netlinkingContent #fifthContentWrapper .first-content > img {
position: relative;
z-index: 1;
width: 100%;
max-width: 486px;
}
@media (min-width: 1024px) {
#netlinkingContent #fifthContentWrapper .first-content > img {
width: 680px;
max-width: none;
}
}
#netlinkingContent #fifthContentWrapper .first-content > div {
display: none;
}
@media (min-width: 1024px) {
#netlinkingContent #fifthContentWrapper .first-content > div {
display: flex;
flex-wrap: wrap;
width: 526px;
gap: 11px;
justify-content: center;
position: relative;
z-index: 1;
}
}
#netlinkingContent #fifthContentWrapper .first-content > div > .label {
opacity: 1;
padding: 10px 20px;
border-radius: 91.19px;
background: #1C1C31;
border: 0.82px solid #8E90B9;
box-shadow: 0px 4px 44px 0px #424254;
font-weight: 400;
font-size: 16px;
line-height: 17.29px;
letter-spacing: 0;
vertical-align: middle;
color: #8E90B9;
}
#netlinkingContent #fifthContentWrapper .second-content {
padding: 0 30px;
z-index: 1;
position: relative;
display: flex;
flex-direction: column;
gap: 30px;
top: 0;
}
@media (min-width: 1024px) {
#netlinkingContent #fifthContentWrapper .second-content {
top: -35px;
padding-right: 30px;
width: 693px;
}
}
#netlinkingContent #fifthContentWrapper .second-content > h2 {
font-weight: 700;
font-size: 35px;
line-height: 44px;
letter-spacing: 0;
vertical-align: middle;
color: #21E273;
}
@media (min-width: 1024px) {
#netlinkingContent #fifthContentWrapper .second-content > h2 {
font-weight: 700;
font-size: 50px;
line-height: 60px;
letter-spacing: 0;
vertical-align: middle;
}
}
#netlinkingContent #fifthContentWrapper .second-content > h3 {
font-weight: 700;
font-size: 25px;
line-height: 38px;
letter-spacing: 0;
vertical-align: middle;
}
@media (min-width: 1024px) {
#netlinkingContent #fifthContentWrapper .second-content > h3 {
font-size: 30px;
}
}
#netlinkingContent #fifthContentWrapper .second-content > p {
font-weight: 400;
font-size: 20px;
line-height: 28px;
vertical-align: middle;
}
#netlinkingContent #fifthContentWrapper .second-content > div {
display: none;
}
@media (min-width: 1024px) {
#netlinkingContent #fifthContentWrapper .second-content > div {
display: flex;
justify-content: flex-end;
}
}
#netlinkingContent #fifthContentWrapper .third-content {
position: relative;
top: -48px;
gap: 0 30px;
display: flex;
justify-content: center;
align-items: center;
}
@media (min-width: 1024px) {
#netlinkingContent #fifthContentWrapper .third-content {
display: none;
}
}
#netlinkingContent #sixthContentWrapper {
max-width: -webkit-fill-available;
position: relative;
display: flex;
flex-direction: column;
gap: 50px;
}
@media (min-width: 1024px) {
#netlinkingContent #sixthContentWrapper {
width: -webkit-fill-available;
align-items: center;
gap: 0;
max-height: 1000px;
height: fit-content;
max-width: 1430px;
}
}
#netlinkingContent #sixthContentWrapper .first-content {
position: relative;
order: 1;
background: #1C1C31;
}
#netlinkingContent #sixthContentWrapper .first-content .bg-decoration {
z-index: 0;
position: absolute;
left: 0px;
width: 100%;
height: 100%;
content: "";
mix-blend-mode: color-dodge;
}
@media (min-width: 1024px) {
#netlinkingContent #sixthContentWrapper .first-content .bg-decoration {
height: 600px;
top: 150px;
left: 50px;
transform: scale(1.5);
}
}
#netlinkingContent #sixthContentWrapper .first-content .main-image-wrapper > img {
width: 100%;
max-width: 100%;
position: relative;
left: 0;
top: 0;
}
@media (min-width: 1024px) {
#netlinkingContent #sixthContentWrapper .first-content .main-image-wrapper > img {
width: 850px;
right: 0;
left: unset;
top: 25px;
}
}
@media (min-width: 1024px) {
#netlinkingContent #sixthContentWrapper .first-content {
order: 3;
background: #1C1C31;
position: relative;
right: 0;
top: -280px;
z-index: 0;
display: flex;
flex-direction: row-reverse;
width: 100%;
pointer-events: none;
min-height: 1000px;
}
#netlinkingContent #sixthContentWrapper .first-content .main-image-wrapper {
position: relative;
}
}
#netlinkingContent #sixthContentWrapper .second-content {
display: flex;
padding: 0 30px;
gap: 30px;
flex-direction: column;
order: 2;
z-index: 2;
}
@media (min-width: 1024px) {
#netlinkingContent #sixthContentWrapper .second-content {
order: 1;
width: 100%;
align-items: center;
padding: 0 120px;
}
}
#netlinkingContent #sixthContentWrapper .second-content > h2 {
font-weight: 700;
font-size: 35px;
line-height: 44px;
letter-spacing: 0;
text-align: center;
vertical-align: middle;
}
@media (min-width: 1024px) {
#netlinkingContent #sixthContentWrapper .second-content > h2 {
font-weight: 700;
font-size: 50px;
line-height: 60px;
}
}
#netlinkingContent #sixthContentWrapper .second-content .buttons-wrapper {
display: flex;
flex-direction: column;
gap: 10px;
}
@media (min-width: 1024px) {
#netlinkingContent #sixthContentWrapper .second-content .buttons-wrapper {
flex-direction: row;
gap: 30px;
justify-content: center;
}
}
#netlinkingContent #sixthContentWrapper .second-content { }
#netlinkingContent #sixthContentWrapper .second-content .button {
display: flex;
align-items: center;
justify-content: center;
flex-direction: row;
border: 2px solid transparent;
cursor: pointer;
transition: all 0.3s ease;
opacity: 0.5;
min-height: 95px;
gap: 12px;
border-radius: 126px;
background: #26273B;
padding: 0 30px;
}
@media (min-width: 1024px) {
#netlinkingContent #sixthContentWrapper .second-content .button {
width: fit-content;
}
}
#netlinkingContent #sixthContentWrapper .second-content .button > img {
width: 35px;
height: 35px;
opacity: 0.5;
}
#netlinkingContent #sixthContentWrapper .second-content .button > p {
opacity: 0.3;
font-weight: 600;
font-size: 20px;
line-height: 100%;
text-transform: uppercase;
}
@media (min-width: 1024px) {
#netlinkingContent #sixthContentWrapper .second-content .button > p {
width: fit-content;
}
}
#netlinkingContent #sixthContentWrapper .second-content .button.outlineButton {
border-color: #21E273;
height: 97px;
opacity: 1;
width: -webkit-fill-available;
}
@media (min-width: 1024px) {
#netlinkingContent #sixthContentWrapper .second-content .button.outlineButton {
width: fit-content;
}
}
#netlinkingContent #sixthContentWrapper .second-content .button.outlineButton > p {
color: #8E90B9;
opacity: 1;
}
#netlinkingContent #sixthContentWrapper .second-content .button.outlineButton > img {
opacity: 1;
}
#netlinkingContent #sixthContentWrapper .third-content {
display: flex;
flex-direction: column;
gap: 20px;
padding: 0 30px;
min-height: 100px;
order: 3;
z-index: 2;
}
@media (min-width: 1024px) {
#netlinkingContent #sixthContentWrapper .third-content {
order: 2;
position: relative;
z-index: 10;
max-width: 628px;
align-self: flex-start;
margin-top: 198px;
}
}
#netlinkingContent #sixthContentWrapper .third-content > .content {
display: none;
flex-direction: column;
gap: 20px;
}
#netlinkingContent #sixthContentWrapper .third-content > .content.content-active {
display: flex;
}
#netlinkingContent #sixthContentWrapper .third-content > .content > h3 {
font-weight: 700;
font-size: 25px;
line-height: 28px;
color: #21E273;
}
@media (min-width: 1024px) {
#netlinkingContent #sixthContentWrapper .third-content > .content > h3 {
font-size: 30px;
}
}
#netlinkingContent #sixthContentWrapper .third-content > .content > p {
font-weight: 400;
font-size: 20px;
line-height: 28px;
}
#netlinkingContent #sixthContentWrapper .third-content > .content > div {
display: flex;
flex-direction: row;
gap: 15px;
align-items: center;
justify-content: flex-start;
width: -webkit-fill-available;
}
#netlinkingContent #sixthContentWrapper .third-content > .content > div > img {
height: 47px;
max-width: 180px;
filter: invert(50%) brightness(200%);
}
#netlinkingContent #secondContentWrapper + .avantages-list {
background: #272842;
text-align: left;
display: flex;
flex-direction: column;
align-items: center;
padding: 3.125rem 1.25rem;
gap: 1.25rem;
}
@media (min-width: 64rem) {
#netlinkingContent #secondContentWrapper + .avantages-list {
padding: 0;
height: 20.7407407407vh;
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: row;
margin: 0 auto;
width: 100%;
padding: 0 2rem;
gap: 0;
}
}
#netlinkingContent #secondContentWrapper + .avantages-list .avantages-inner {
display: flex;
flex-direction: column;
align-items: center;
gap: 1.25rem;
width: 100%;
}
@media (min-width: 64rem) {
#netlinkingContent #secondContentWrapper + .avantages-list .avantages-inner {
flex-direction: row;
justify-content: space-between;
align-items: center;
max-width: 1430px;
margin: 0 auto;
width: 100%;
padding: 0;
gap: 0;
}
}
#netlinkingContent #secondContentWrapper + .avantages-list .avantages-inner > .divider {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
max-width: 18.75rem;
height: 0.0625rem;
background: rgba(255, 255, 255, 0.2);
}
@media (min-width: 64rem) {
#netlinkingContent #secondContentWrapper + .avantages-list .avantages-inner > .divider {
width: 0.0260416667vw !important;
height: 10.5555555556vh;
max-width: none;
background: rgba(255, 255, 255, 0.2);
border: none;
}
}
#netlinkingContent #secondContentWrapper + .avantages-list .avantages-inner > .divider:last-child {
display: none;
}
#netlinkingContent #secondContentWrapper + .avantages-list .avantage-item {
display: flex;
flex-direction: column;
width: 100%;
gap: 0.3125rem;
max-width: 18.5rem;
}
@media (min-width: 1024px) {
#netlinkingContent #secondContentWrapper + .avantages-list .avantage-item {
gap: 0.462962963vh;
max-width: 296px;
height: 99.75px;
}
}
#netlinkingContent #secondContentWrapper + .avantages-list .avantage-item h3 {
font-family: "sofia-pro", sans-serif;
font-weight: 700;
color: #21e273;
margin: 0;
font-size: 20px;
}
#netlinkingContent #secondContentWrapper + .avantages-list .avantage-item p {
font-family: "sofia-pro", Helvetica, sans-serif;
font-weight: 400;
color: #ffffff;
margin: 0;
font-size: 1rem;
}
#netlinkingContent #features {
max-width: -webkit-fill-available;
display: flex;
flex-direction: column;
gap: 30px;
opacity: 1;
padding: 30px;
height: fit-content;
z-index: 3;
}
#netlinkingContent #features > h2 {
font-weight: 700;
font-size: 35px;
line-height: 44px;
letter-spacing: 0;
text-align: center;
vertical-align: middle;
}
@media (min-width: 1024px) {
#netlinkingContent #features > h2 {
font-weight: 700;
font-size: 50px;
line-height: 60px;
text-align: left;
vertical-align: middle;
padding: 0 15.625vw;
}
}
#netlinkingContent #features > .cardContaier {
display: flex;
flex-direction: row;
gap: 15px;
overflow-x: auto;
scroll-snap-type: x mandatory;
scrollbar-width: none;
-ms-overflow-style: none;
}
#netlinkingContent #features > .cardContaier::-webkit-scrollbar {
display: none;
}
#netlinkingContent #features > .cardContaier > .card {
display: flex;
flex-direction: column;
background: linear-gradient(94.68deg, #26273B 24.8%, #282843 100%);
min-width: min(85vw, 280px);
min-height: 380px;
gap: 7px;
opacity: 1;
border-radius: 13px;
padding: 40px;
position: relative;
}
@media (min-width: 1024px) {
#netlinkingContent #features > .cardContaier > .card {
width: 464px;
min-width: 464px;
min-height: 469px;
}
}
#netlinkingContent #features > .cardContaier > .card > h3 {
color: #21E273;
font-weight: 700;
font-size: 18px;
line-height: 22px;
letter-spacing: 0;
vertical-align: middle;
}
@media (min-width: 1024px) {
#netlinkingContent #features > .cardContaier > .card > h3 {
font-size: 30px;
line-height: 32px;
}
}
#netlinkingContent #features > .cardContaier > .card > p {
font-weight: 400;
font-size: 14px;
line-height: 19px;
letter-spacing: 0;
vertical-align: middle;
color: #8E90B9;
}
@media (min-width: 1024px) {
#netlinkingContent #features > .cardContaier > .card > p {
font-size: 16px;
line-height: 24px;
}
}
#netlinkingContent #features > .cardContaier > .card > img {
width: -webkit-fill-available;
margin: auto;
position: absolute;
bottom: 0;
right: 0;
}
@media (min-width: 1024px) {
#netlinkingContent #features > .cardContaier > .card > img {
width: fit-content;
}
}
#netlinkingContent #features > .buttons {
display: flex;
flex-direction: row;
justify-content: flex-end;
align-items: center;
gap: 8px;
}
#netlinkingContent #features > .buttons img {
cursor: pointer;
}
#netlinkingContent #influence-section {
max-width: -webkit-fill-available;
display: flex;
flex-direction: column;
gap: 60px;
padding: 30px;
align-items: center;
}
@media (min-width: 1024px) {
#netlinkingContent #influence-section {
max-width: 1430px;
}
}
#netlinkingContent #influence-section > h2 {
font-weight: 700;
font-size: 35px;
line-height: 44px;
letter-spacing: 0;
text-align: center;
vertical-align: middle;
}
@media (min-width: 1024px) {
#netlinkingContent #influence-section > h2 {
font-weight: 700;
font-size: 50px;
line-height: 60px;
text-align: center;
vertical-align: middle;
}
}
#netlinkingContent #influe