.video-title {
  text-align: left;
font-family: "Dela Gothic One", Sans-serif;
		font-size: 21px
}

.gm-style-iw-chr {
  
  display: none !important;
}

.gm-style .gm-style-iw-c {
  background-color: #ffffff !important;
}

.heading
{
     background: linear-gradient(135deg, #FFFFFF, #FED734, #DB6BA8, #FF2F48);
padding-box: 100px  ;
     b
    background-position-x: left;
    background-position-y: top;
     background-color: white;

     -webkit-background-clip:text;
     -webkit-text-fill-color:transparent;
     }


.gradient2 {
    background: linear-gradient(135deg, 
        #FFFFFF 20%,   /* Blanc à 20% */
        #FED734 25%,   /* Jaune à 25% */
        #DB6BA8 50%,   /* Violet à 50% */
        #FF2F48 75%    /* Rouge à 75% */
				
    );
		-webkit-background-clip: text;
    background-clip: text; /* Compatibilité avec Firefox */
    -webkit-text-fill-color: transparent;
		 }

.scroll-gradient-text {
    background: linear-gradient(135deg, 
        #FFFFFF 20%,   /* Blanc à 20% */
        #FED734 25%,   /* Jaune à 25% */
        #DB6BA8 50%,   /* Violet à 50% */
        #FF2F48 75%    /* Rouge à 75% */
    );
    background-size: 200% 200%;
    background-position: var(--mouseX, 50%) var(--mouseY, 50%);
    -webkit-background-clip: text;
    background-clip: text; /* Compatibilité avec Firefox */
    -webkit-text-fill-color: transparent;
    transition: background-position 0.05s ease; /* Transition plus rapide pour un effet réactif */
}

.button-left-text .elementor-button-content-wrapper {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.button-left-text .elementor-button-icon {
    margin-left: auto; /* Force l'icône à aller tout à droite */
}

.button-left-text .elementor-button-text {
    margin-right: auto; /* Force le texte à aller tout à gauche */
}

.video-title {
    color: white; /* Couleur par défaut : blanc */
    transition: color 0.3s ease; /* Transition fluide de la couleur */
}

/* Changer la couleur du titre au hover de la vidéo */
.video-item:hover .video-title {
    color: var(--hover-color); /* Appliquer la couleur définie lors du hover */
}

/* Changer la couleur du titre au hover du titre lui-même */
.video-title:hover {
    color: var(--hover-color); /* Même comportement lors du hover du titre */
}





#cmplz-document, .editor-styles-wrapper .cmplz-unlinked-mode {
  font-size: 14px;
  margin-top: 0;
  max-width: 100%;
  text-justify: inter-word;
}

@media (max-width: 768px) {
  .elementor-2 .elementor-element.elementor-element-2b4c04c .elementor-image-carousel-caption {
    text-align: center !important;
    font-size: 14px !important; /* Réduire la taille de la police pour mobile */
    margin-block-start: 8px !important;
    display: block !important; /* Forcer l'affichage de la légende */
    visibility: visible !important; /* Forcer la visibilité */
    opacity: 1 !important; /* Forcer l'opacité à 100% */
    color: #fff !important; /* Modifier la couleur si nécessaire */
  }
}

.elementor-flip-box {
  
  border-radius: 10px;
}

.kojump a:hover {
    background-color: #1228e9 !important;
    color: #ffffff !important; /* Change aussi la couleur du texte si besoin */
    transition: background-color 0.3s ease-in-out;
}


.sp a:hover {
    background-color: #e9454e !important;
    color: #ffffff !important; /* Change aussi la couleur du texte si besoin */
    transition: background-color 0.3s ease-in-out;
}

.activate a:hover {
    background-color: #59BBF0 !important;
    color: #ffffff !important; /* Change aussi la couleur du texte si besoin */
    transition: background-color 0.3s ease-in-out;
}

.ke a:hover {
    background-color: #cb70a4 !important;
    color: #ffffff !important; /* Change aussi la couleur du texte si besoin */
    transition: background-color 0.3s ease-in-out;
}

.gf a:hover {
    background-color: #bd3c32 !important;
    color: #ffffff !important; /* Change aussi la couleur du texte si besoin */
    transition: background-color 0.3s ease-in-out;
}

.eclipso a:hover {
    background-color: #1d1b3a !important;
    color: #ffffff !important; /* Change aussi la couleur du texte si besoin */
    transition: background-color 0.3s ease-in-out;
}

.koezio a:hover {
    background-color: #2e2977 !important;
    color: #ffffff !important; /* Change aussi la couleur du texte si besoin */
    transition: background-color 0.3s ease-in-out;
}

.fba a:hover {
    background-color: #887032 !important;
    color: #ffffff !important; /* Change aussi la couleur du texte si besoin */
    transition: background-color 0.3s ease-in-out;
}


.kojump a:hover {
    background-color: #1329ea !important;
    color: #ffffff !important; /* Change aussi la couleur du texte si besoin */
    transition: background-color 0.3s ease-in-out;
}


.clays a:hover {
    background-color: #223d40 !important;
    color: #ffffff !important; /* Change aussi la couleur du texte si besoin */
    transition: background-color 0.3s ease-in-out;
}


.movement a:hover {
    background-color: #5b97a1 !important;
    color: #ffffff !important; /* Change aussi la couleur du texte si besoin */
    transition: background-color 0.3s ease-in-out;
}


.btb a:hover {
    background-color: #c74187 !important;
    color: #ffffff !important; /* Change aussi la couleur du texte si besoin */
    transition: background-color 0.3s ease-in-out;
}

.giga a:hover {
    background-color: #377ef7 !important;
    color: #ffffff !important; /* Change aussi la couleur du texte si besoin */
    transition: background-color 0.3s ease-in-out;
}