/*
 Theme Name:   Basel Child
 Description:  Basel Child Theme
 Author:       XTemos
 Author URI:   http://kalamconseil.fr
 Template:     basel
 Version:      1.0.0
 Text Domain:  basel-child
*/


/* Css Kalam Conseil */

/* Mobile */

@media screen and (min-width: 200px) and (max-width: 991px) {
  .text-animation {
  font-size : 16px !important;
  margin-bottom: 50px !important;
  }
}

/* Ordi */
.cf7ic_instructions {
    color: #fff !important;
}

.cacher{
	display : none !important;	
}
input[type=submit]{
	border-color: #ff0000 !important;
	background-color: #ff0000 !important;
	color : #fff;
	border-radius: 14px !important;
}

label {
    font-size: 14px;
    color: #fff;
    font-weight: bold !important;
}

.mb-2{
    margin-bottom: 20px;
}
.basel-navigation .menu>li .sub-menu-dropdown {
    background-color: #000 !important;
    border: 1px solid #fff !important;
	border-radius : 8px;
}

.basel-navigation .menu>li.menu-item-design-default ul li a {
    color: #fff !important;
    font-size: 15px !important;
    font-weight: bold !important;  
}


.basel-navigation .menu>li.callto-btn>a {
	border-radius : 14px !important;
}

.vc_toggle_title h5{
	margin-bottom : 0px !important;
}
	
.vc_toggle {
    padding: 0 20px;
    border: 2px solid #fff !important;
    border-radius: 24px !important;
}

.mb-0{
	margin-bottom : 0px !important;
}
.mt-0{
	margin-top : 0px !important;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6{
	font-weight : bold !important;
}

.btn{
	border-radius : 14px !important;
	font-weight : bold;
}

.bord{
	border-radius : 25px !important;
}

.maj {
	text-transform : uppercase;
}
.contourblanc {
  -webkit-text-stroke: 2px #fff; /* Epaisseur et couleur du contour */
}

.titre{
    font-size: 38px;
} 

.titre2{
    font-size: 19px;
} 
.rouge{
	color: #ff0000;
}

.noir{
	color: #000;
}


.gris{
	color: #303030;
}

.blanc {
	color:#fff;
}

.footer-container.color-scheme-light a {
    color: #ff0000 !important;
}

.cardetape1 {
    position: relative;
    overflow: hidden;
    background-color: #000;
    border-radius: 25px !important;
    border: 3px solid #ff0000 !important;
    padding-top: 10px;
    padding-bottom: 5px;
    font-weight: bold !important;
    color: #fff;
    z-index: 1;
    padding: 30px;

}

.cardagence {
    position: relative;
    overflow: hidden;
    background-color: #000;
    border-radius: 25px !important;
    border: 3px solid #ff0000 !important;
    padding-top: 10px;
    padding-bottom: 5px;
    font-weight: bold !important;
    color: #fff;
    z-index: 1;
    padding: 30px;
	text-align : center;
}

.card{
	position: relative;
    overflow: hidden;
	background-color : #000;
	border-radius : 25px !important;
	border : 3px solid #ff0000 !important;
	padding-top : 20px;
	padding-bottom : 20px;
	font-weight : bold !important;	
	color :#fff;
	    z-index: 1; /* Assure que la carte est devant */
}

.card p {
    position: relative;
    z-index: 2; /* Place les paragraphes devant la barre animée */
    transition: color 0.3s ease;
}

.card h3{
	position: relative;
	color :#ff0000;
	z-index: 2; /* Place les paragraphes devant la barre animée */
    transition: color 0.3s ease;
}
.card:hover{
	background-color : #fff;
	color :#303030;
	border-radius : 25px !important;
	border : 3px solid #ff0000 !important;
	padding-top : 20px;
	padding-bottom : 20px;
	font-weight : bold !important;	
	  z-index: 2; /* Place les paragraphes devant la barre animée */
    transition: color 0.3s ease;
}
.card:hover h3 {
	color :#000;
    transition: color 0.3s ease;

	
}



.card2{
	background-color : #fff;
	color :#303030;
	border-radius : 25px !important;
	border : 3px solid  #303030 !important;
	padding-top : 20px;
	padding-bottom : 20px;
	font-weight : bold !important;	
}

.card2 h3{
	color :#000;
	 transition: color 0.3s ease;
}

.card2:hover{
	background-color : #303030;
	border-radius : 25px !important;
	padding-top : 20px;
	padding-bottom : 20px;
	font-weight : bold !important;	
	color :#fff;
	 transition: color 0.3s ease;
}

.card2:hover h3{
	color :#fff;
	 transition: color 0.3s ease;
}

.vc_custom_1730980489640{
	border-radius : 25px !important;
}



.card3{
	position: relative;
    overflow: hidden;
	background-color : #000;
	border-radius : 25px !important;
	border : 3px solid #ff0000 !important;
	padding-top : 10px;
	padding-bottom : 5px;
	font-weight : bold !important;	
	color :#fff;
	    z-index: 1; /* Assure que la carte est devant */
}

.card3 p {
    position: relative;
    z-index: 2; /* Place les paragraphes devant la barre animée */
    transition: color 0.3s ease;
}

.card3 h3{
	position: relative;
	color :#fff;
	z-index: 2; /* Place les paragraphes devant la barre animée */
    transition: color 0.3s ease;
}
.card3:hover{
	background-color : #0000;
	color :#fff;
	border-radius : 25px !important;
	border : 3px solid #ff0000 !important;
	font-weight : bold !important;	
	z-index: 2; /* Place les paragraphes devant la barre animée */
    transition: color 0.3s ease;
}
.card3:hover h3 {
	color :#fff;
    transition: color 0.3s ease;
}

.card3 .btn.btn-color-primary{
	border : 2px solid #fff !important;
	background-color: #000;
}	
/* Animation texte Accueil en diagonale */


.text-animation {
    font-weight: bold;
    font-size: 40px;
    color: #fff; /* Couleur du texte de base */
    position: relative;
    overflow: hidden;
    display: inline-block;
    background-color: #000; /* Fond noir pour mieux voir l'effet */
}

.text-animation::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%; /* Commence en dehors à gauche */
    width: 100%;
    height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255, 0, 0, 0.8), transparent); /* Effet lumineux */
    animation: shine 2s infinite; /* Boucle de l'animation */
}

/* Animation de passage */
@keyframes shine {
    0% {
        left: -100%;
    }
    100% {
        left: 100%;
    }
}


/* Animation Accueil en diagonale */
.diagonal-bar {
    position: absolute;
    top: -50%;  /* Commence au-dessus de la carte */
    left: -100%; /* Commence à gauche de la carte */
    width: 1300%; /* Largeur suffisante pour couvrir toute la carte en diagonale */
    height: 1200%; /* Hauteur de la barre */
    background-color: red; /* Couleur rouge pour la barre */
    transform: rotate(45deg); /* Rotation pour la diagonale */
    opacity: 1; /* Transparence de la barre */
    animation: slide-diagonal 3s linear infinite; /* Animation en boucle */
	z-index: 0; /* Place la barre derrière le contenu */
	transition: color 0.2s ease;
}

/* Animation pour faire passer la barre en diagonale */
@keyframes slide-diagonal {
    0% {
        top: -50%;
        left: -100%;
    }
    100% {
        top: 150%; /* Position de fin pour passer en bas à droite */
        left: 100%;
    }
}

/* Conteneur pour centrer le texte horizontalement */

.typewriter-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%; /* Ajustez selon votre besoin */
}

/* Effet machine à écrire */
.typewriter {
 	color: #ff0000;
	text-transform : uppercase;
    font-size: 40px;
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    border-right: 3px solid #ff0000; /* Curseur clignotant */
    width: 0; /* Commence à zéro pour l'animation */
    animation: typing 4s steps(30, end) infinite, blink-caret 0.75s step-end infinite;
    text-align: center;
}

/* Animation de la machine à écrire */
@keyframes typing {
    0% { width: 0; }
    50% { width: 100%; } /* Affiche complètement le texte */
    100% { width: 0; } /* Efface le texte pour recommencer l'animation */
}

/* Animation du curseur clignotant */
@keyframes blink-caret {
    from, to { border-color: transparent; }
    50% { border-color: #ff0000; }
}

/* Conteneur pour centrer et donner un contexte de perspective */
.perspective-container {
    display: flex;
    justify-content: center;
    align-items: center;
    perspective: 560px; /* Distance de perspective pour l'effet de profondeur */
    height: 600px; /* Ajustez la hauteur pour le conteneur */
}

/* Style et animation de l'image */
.animated-image {
    width: 100%; /* Taille initiale de l'image */
    transition: transform 3s ease-in-out; /* Douce transition pour l'animation */
    transform-origin: center; /* Origine de la transformation au centre */
    animation: perspective-animation 6s infinite alternate; /* Animation infinie en boucle */
}

/* Animation de la perspective */
@keyframes perspective-animation {
    0% {
        transform: scale(1) rotateX(0deg) rotateY(0deg);
    }
    50% {
        transform: scale(1.2) rotateX(10deg) rotateY(10deg); /* Zoom et rotation */
    }
    100% {
        transform: scale(1) rotateX(0deg) rotateY(0deg);
    }
}