@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');


h1, h2, h3, h4, p, span, a{
  font-family: "Inter", sans-serif !important;
  color: #0F0F1A !important;
}
.dark h2, .dark h3, .dark p, .dark span{
  color: #ffffff !important;
}
h1{
  color: #0f0f1a !important;
  z-index: 1;
  margin-bottom: 20px !important;
}
h1 span{
  color: #E91E8C !important;
  position: relative;
}
h1 span::after{
  content: '';
  position: absolute;
  display: block;
  bottom: 20px;
  left: -2%;
  width: 104%;
  height: 0.32em;
  background: rgba(233, 30, 140, 0.16);
  transform: skewX(-8deg);
}
h2{
  font-weight: 900 !important;
  font-size: 3.4rem !important;
  letter-spacing: -1.5px !important;
}
h2 span{
  color: #E91E8C !important;
}
.pretitle p{
  color: #7B2FBE !important;
  font-weight: 800 !important;
  font-size: 0.75rem !important;
  letter-spacing: 0.12px !important;
  text-transform: uppercase !important;
}
.dark .pretitle p{
  color: #E91E8C !important;
}

.elementor-button{
  border-radius: 100px !important;
  background-color: #0F0F1A !important;
  transition: all 0.2s;
  padding: 20px 35px !important;
}
.elementor-button span{
  font-weight: 700 !important;
  color: #ffffff !important;
}
.elementor-button:hover{
  background-color: #E91E8C !important;
  transform: translateY(-3px) scale(1.02) !important;
}

.but-alt .elementor-button{
  background-color: rgba(0, 0, 0, 0) !important;
  transition: all 0.2s;
  padding: 0 0 4px !important;
  border-bottom: 3px solid #E91E8C;
  border-radius: 0px !important;
}
.but-alt .elementor-button span{
  transition: all 0.2s;
  font-weight: 700 !important;
  color: #0F0F1A !important;
}
.but-alt .elementor-button:hover{
  background-color: rgba(0, 0, 0, 0); !important;
  transform: none !important;
  border-bottom: 3px solid #0F0F1A;
}
.but-alt .elementor-button:hover span{
  color: #E91E8C !important;
}


#site-header{
  position: fixed !important;
  z-index: 99;
  width: 100%;
  transition: all 0.2s;
}
#site-header.onPoint{
  background-color: #ffffff;
}
.site-logo img{
  max-width: 90px;
}
#menu-item-63 a{
  font-weight: 800 !important;
  color: #6B7280 !important;
  transition: all 0.2s;
}
#menu-item-63 a:hover{
  color: #0F0F1A !important;
}
#menu-item-62 a{
  font-weight: 800 !important;
  background-color: #0F0F1A !important;
  color: #ffffff !important;
  border-radius: 100px;
  transition: all 0.2s;
}
#menu-item-62 a:hover{
  background-color: #E91E8C !important;
}

.banner h1{
  font-weight: 900 !important;
  letter-spacing: -4px !important;
  line-height: 0.92 !important;
  font-size: 7.5rem !important;
}
.banner p{
  font-size: 0.82rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.16rem !important;
  text-transform: uppercase !important;
  color: #9CA3AF !important;
}
.ban-alt h1{
  font-weight: 900 !important;
  letter-spacing: -4px !important;
  line-height: 0.92 !important;
  font-size: 7.5rem !important;
  color: #ffffff !important;
}
.banner .pretitle p{
  color: #E91E8C !important;
}


.compteurs h3{
  font-weight: 900 !important;
  font-size: 3.6rem !important;
  letter-spacing: -2.5px !important;
  color: #E91E8C !important;
  text-shadow: 3px 3px #FAF0FD;
  transition: all 0.2s;
}
.compteurs p{
  font-size: 0.82rem !important;
  color: #6B7280 !important;
  font-weight: 600 !important;
  transition: all 0.2s;
}
.compteurs .pull-up:hover h3, .compteurs .pull-up:hover p{
  transform: translateY(-3px) scale(1.02) !important;
}
.compteurs .pull-up:hover h3{
  color: #7B2FBE !important;
  text-shadow: 6px 6px #0F0F1A;
}

.card-perso{
  background-color: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.2s;
  padding: 20px !important;
  z-index: 1 !important;
}
.card-perso:hover{
  border-color: #E91E8C;
  transform: translateY(-4px);
}


.card-perso h3{
  font-size: 0.9rem !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
}
.card-perso p{
  font-size: 0.78rem !important;
  color: rgba(255, 255, 255, 0.5) !important;
  line-height: 1.3 !important;
  margin-bottom: 0px !important;
}
.card-perso .link p{
  font-size: 0.76rem !important;
  color: #E91E8C !important;
  font-weight: 700 !important;
}
.card-perso img{
  border-radius: 50%;
}


.set-bold{
  font-weight: 900 !important;
}
.encadre{
  padding: 20px !important;
  background-color: #ffffff;
  border: 2px solid #0F0F1A;
  border-radius: 14px;
}
.encadre h4{
  font-size: 0.95rem !important;
  font-weight: 400 !important;
}
.encadre span{
  color: #E91E8C !important;
}

.prev-but p{
  color: #9CA3AF !important;
  font-weight: 600 !important;
  margin-bottom: 20px !important;
}

.card-subject, .card-subject2{
  border-radius: 15px;
  transition: all 0.2s;
  animation-duration: 4s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  will-change: transform;
}
.card-subject2{
  border: 2px solid #0F0F1A;
}
.card-subject:hover, .card-subject2:hover{
  transform: translateY(-6px) rotate(-1deg);
  background-color: #0F0F1A !important;
  box-shadow: 6px 6px 0 #E91E8C;
}

.card-subject2 h2{
  /*color: #930593 !important;*/
  font-size: 1.2rem !important;
  font-weight: 900 !important;
  letter-spacing: -0.7px !important;
}
.card-subject2 h4{
  color: #E91E8C !important;
  font-size: 1.1rem !important;
  font-weight: 800 !important;
  position: relative;
}
.card-subject2 h3{
  font-size: 0.9rem !important;
  font-weight: 700 !important;
  transition: all 0.2s;
}
.card-subject2 h4::after{
    content: '';
    position: absolute;
    display: block;
    bottom: 0px;
    left: -2%;
    width: 104%;
    height: 0.32em;
    background: rgba(233, 30, 140, 0.16);
    transform: skewX(-8deg);
}
.card-subject2 .elementor-button{
  background-color: #E91E8C !important;
  padding: 15px 25px !important;
}
.card-subject2 .elementor-button:hover{
  background-color: #ffffff !important;
}
.card-subject2 .elementor-button:hover span{
  color: #0F0F1A !important;
}
 .card-subject2:hover h2{
   color: #ffffff !important;
 }
.part-hover{
  transition: all 0.2s;
}
.part-hover:hover{
  transform: scale(1.03);
}
.sec-vis{
  border-radius: 10px;
  border: 1px solid #E8D5F5;
  transition: all 0.2s;
}
.card-subject:hover .sec-vis{
  background-color: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(255, 255, 255, 0.1);
}
.section-number p{
  font-size: 0.72rem !important;
  font-weight: 900 !important;
  color: #E91E8C !important;
  margin-bottom: 10px !important;
  margin-top: 15px !important;
}
.card-subject:hover .section-number p{

}
.card-subject h3{
  font-size: 0.9rem !important;
  font-weight: 900 !important;
  transition: all 0.2s;
}
.card-subject:hover h3, .card-subject2:hover h3{
  color: #ffffff !important;
}
.bars{
  height: 6px !important;
}
.card-up {
    animation-name: floatUp;
}
.card-up2 {
    animation-name: floatUp2;
}
.card-down {
    animation-name: floatDown;
}
@keyframes floatUp {
    0%,100% {
        transform: translateY(0) rotate(0deg);
    }
    50% {
        transform: translateY(-8px) rotate(-0.4deg);
    }
}
@keyframes floatUp2 {
    0%,100% {
        transform: translateY(0) rotate(0deg);
    }
    50% {
        transform: translateY(-3px) rotate(-0.4deg);
    }
}

@keyframes floatDown {
    0%,100% {
        transform: translateY(0) rotate(0deg);
    }
    50% {
        transform: translateY(5px) rotate(0.3deg);
    }
}


.ban-home, .banner2, .banner3{
  position: relative;
}
.ban-home::before{
  content: '';
  display: block;
  position: absolute;
  left: 250px;
  top: 230px;
  background-color: #E91E8C;
  width: 35px;
  height: 35px;
  animation-duration: 4s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  will-change: transform;
  animation-name: bubbleUp;
  border-radius: 50%;
}
.banner2::before{
  content: '';
  display: block;
  position: absolute;
  left: 50px;
  top: 430px;
  background-color: rgba(123, 47, 190, 1);
  width: 35px;
  height: 35px;
  animation-duration: 4s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  will-change: transform;
  animation-name: bubbleUp;
  border-radius: 50%;
}
.banner3::before{
  content: '';
  display: block;
  position: absolute;
  left: 50px;
  top: 330px;
  background-color: #E91E8C;
  width: 45px;
  height: 45px;
  animation-duration: 4s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  will-change: transform;
  animation-name: bubbleUp;
  border-radius: 50%;
}
@keyframes bubbleUp {
    0%,100% {
        transform: translate(0) scale(1);
        opacity: 0.7;
    }
    50% {
        transform: translate(26px, 34px) scale(1.2);
        opacity: 0.2;
    }
}
.ban-home::after{
  content: '';
  display: block;
  position: absolute;
  left: 60px;
  bottom: 40px;
  background-color: rgba(233, 30, 140, 0.6);
  width: 55px;
  height: 55px;
  animation-duration: 3s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  will-change: transform;
  animation-name: fadingAway;
  border-radius: 50%;
  border: 1px solid rgba(233, 30, 140, 0.9);
}
.banner2::after{
  content: '';
  display: block;
  position: absolute;
  right: 40%;
  top: 100px;
  background-color: rgba(123, 47, 190, 0.6);
  width: 55px;
  height: 55px;
  animation-duration: 3s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  will-change: transform;
  animation-name: fadingAway2;
  border-radius: 50%;
  border: 1px solid rgba(123, 47, 190, 0.9);
}
.banner3::after{
  content: '';
  display: block;
  position: absolute;
  right: 50px;
  top: 140px;
  background-color: rgba(233, 30, 140, 0.6);
  width: 55px;
  height: 55px;
  animation-duration: 3s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  will-change: transform;
  animation-name: fadingAway;
  border-radius: 50%;
  border: 1px solid rgba(233, 30, 140, 0.9);
}
@keyframes fadingAway {
    0%,100% {
        transform: translate(0px, 0px);
        background-color: rgba(233, 30, 140, 0.6);
        border: 1px solid rgba(233, 30, 140, 0.9);
    }
    55% {
        transform: translate(12px, -13px);
        background-color: rgba(233, 30, 140, 0);
        border: 1px solid rgba(233, 30, 140, 0.5);
    }
}
@keyframes fadingAway2 {
    0%,100% {
        transform: translate(0px, 0px);
        background-color: rgba(123, 47, 190, 0.6);
        border: 1px solid rgba(123, 47, 190, 0.9);
    }
    55% {
        transform: translate(12px, -13px);
        background-color: rgba(123, 47, 190, 0);
        border: 1px solid rgba(123, 47, 190, 0.5);
    }
}

.add_bb, .add_bp, .bubble_w, .bubble_p{
  position: relative;
}
.bubble_p::after{
  content: '';
  display: block;
  position: absolute;
  left: 20px;
  bottom: 0px;
  width: 100px;
  height: 100px;
  background: url(/wp-content/themes/hello-elementor/assets/bubble.svg);
  background-position: center center;
  background-size: contain;
  background-repeat: no-repeat;
}
.bubble_p2::before{
  content: '';
  display: block;
  position: absolute;
  left: 20px;
  top: 50px;
  width: 70px;
  height: 70px;
  background: url(/wp-content/themes/hello-elementor/assets/bubble.svg);
  background-position: center center;
  background-size: contain;
  background-repeat: no-repeat;
}
.bubble_w::after{
  content: '';
  display: block;
  position: absolute;
  right: 20px;
  top: 20px;
  width: 100px;
  height: 100px;
  background: url(/wp-content/themes/hello-elementor/assets/bubble3.svg);
  background-position: center center;
  background-size: contain;
  background-repeat: no-repeat;
}
.add_bb::after{
  content: '';
  display: block;
  position: absolute;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 60px;
  background: url(/wp-content/themes/hello-elementor/assets/border_black.svg);
  background-position: right bottom;
  background-size: contain;
  background-repeat: no-repeat;
}
.add_bp::after{
  content: '';
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 60px;
  background: url(/wp-content/themes/hello-elementor/assets/border_pink.svg);
  background-position: left bottom;
  background-size: contain;
  background-repeat: no-repeat;
}

.anim_pr, .anim_vr, .story_b, .anim_vr{
  position: relative;
}
.anim_pr::before{
  content: '';
  display: block;
  position: absolute;
  left: calc(100% - 70px);
  top: 50px;
  background-color: #E91E8C;
  width: 50px;
  height: 50px;
  animation-duration: 4s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  will-change: transform;
  animation-name: growTrans;
  border-radius: 50%;
}
.anim_pr2::before{
  content: '';
  display: block;
  position: absolute;
  left: 30%;
  top: 40px;
  background-color: #E91E8C;
  width: 30px;
  height: 30px;
  animation-duration: 4s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  will-change: transform;
  animation-name: growTrans2;
  border-radius: 50%;
}
@keyframes growTrans {
    0%,100% {
        transform: translate(0) scale(1);
        opacity: 0.7;
    }
    50% {
        transform: translate(-16px, 24px) scale(1.1);
        opacity: 0.2;
    }
}
@keyframes growTrans2 {
    0%,100% {
        transform: translate(0) scale(1);
        opacity: 0.7;
    }
    50% {
        transform: translate(46px, 24px) scale(1.2);
        opacity: 0.2;
    }
}
.story_b::before{
  content: '';
  display: block;
  position: absolute;
  left: 20px;
  top: 30px;
  background-color: #E91E8C;
  width: 70px;
  height: 70px;
  animation-duration: 4s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  will-change: transform;
  animation-name: moveDown;
  border-radius: 50%;
}
@keyframes moveDown {
    0%,100% {
        transform: translate(0) scale(1);
        opacity: 0.9;
    }
    50% {
        transform: translate(13px, 50px) scale(1.03);
        opacity: 0.4;
    }
}
.anim_vr::before{
  content: '';
  display: block;
  position: absolute;
  left: 30px;
  top: 20px;
  background-color: rgba(15, 15, 26, 1);
  width: 55px;
  height: 55px;
  animation-duration: 7s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  will-change: transform;
  animation-name: travelOpac;
  border-radius: 50%;
  border: 1px solid rgba(123, 47, 190, 1);
  z-index: 0;
}
@keyframes travelOpac {
    0%,100% {
        transform: translate(0) scale(1);
        background-color: rgba(15, 15, 26, 0.8);
    }
    50% {
        transform: translate(250px, 440px) scale(1.1);
        background-color: rgba(15, 15, 26, 0.3);
    }
}
.anim_vr2::after{
  content: '';
  display: block;
  position: absolute;
  right: 30px;
  top: 20px;
  background-color: rgba(15, 15, 26, 1);
  width: 55px;
  height: 55px;
  animation-duration: 7s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  will-change: transform;
  animation-name: travelOpac2;
  border-radius: 50%;
  border: 1px solid rgba(123, 47, 190, 1);
  z-index: 0;
}
@keyframes travelOpac2 {
    0%,100% {
        transform: translate(0) scale(1);
        background-color: rgba(15, 15, 26, 0.8);
    }
    50% {
        transform: translate(-50px, 30px) scale(1.1);
        background-color: rgba(15, 15, 26, 0.3);
    }
}

.team_up h3{
  color: #7B2FBE !important;
  font-weight: 900 !important;
  font-size: 1.2rem !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
  margin-bottom: 20px !important;
}
.team_up h2{
  margin-top: 20px !important;
}


@media (max-width: 992px){
  .site-navigation-toggle-holder .site-navigation-toggle{
    background-color: rgba(0, 0, 0, 0) !important;
  }
  .site-navigation-dropdown ul.menu li.current-menu-item a{
    background-color: #ffffff !important;
    color: #E91E8C !important;
  }
  .site-navigation-dropdown ul.menu li a{
    font-weight: 800 !important;
  }
  .site-navigation-toggle-holder .site-navigation-toggle-icon{
    color: #E91E8C !important;
  }
  .page-id-51 .site-navigation-toggle-holder .site-navigation-toggle-icon{
    color: #ffffff !important;
  }
  .onPoint .site-navigation-toggle-holder .site-navigation-toggle-icon{
    color: #E91E8C !important;
  }
}
@media (max-width: 550px){
  .banner h1{
    font-size: 4.5rem !important;
  }
}


.footer *{
  color: #ffffff !important;
  font-size: 0.8rem !important;
}
.footer .copyright p, .footer .all-links p{
  margin-bottom: 0px !important;
}
.footer .copyright a{
  font-weight: 800 !important;
  transition: all 0.2s;
}
.footer .copyright a:hover{
  color: #7B2FB2 !important;
}
.footer .all-links a{
  font-weight: 800 !important;
  transition: all 0.2s;
}
.footer .all-links a:hover{
  color: #E91E8C !important;
}
.footer .owner p{
  margin-bottom: 0px !important;
}