/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Jan 13 2025 | 12:42:08 */
/* 
========================================
	Animation titre
========================================
*/

.text {
/* 	font-size: 60px;
	line-height: 70px; */
  	width: 100%;
/*   height: 40px; */
}

.text-titre {
  	display: inline-block;
  	vertical-align: top;
  	margin: 0;
}

.word {
  	position: absolute;
	display: block;
/*   	width: 220px; */
  	opacity: 0;
}

.letter {
  	display: inline-block;
  	position: relative;
  	float: left;
  	transform: translateZ(25px);
  	transform-origin: 50% 50% 25px;
}

.letter.out {
  	transform: rotateX(90deg);
  	transition: transform 0.32s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.letter.behind {
  	transform: rotateX(-90deg);
}

.letter.in {
  	transform: rotateX(0deg);
  	transition: transform 0.38s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.cow{
/* 	color: #1C9CD6; */
	color: white;
}

.opacity{
	opacity: 1;
}


/* 
========================================
	Animation liste
========================================
*/

/* styles.css */

/* .scroll-wrapper{
	width: 100%;
	overflow: hidden;
} */

.scroll-custom .mcb-column-inner{
	margin: 0;
}
.scroll-container, .scroll-container2{
    position: relative;
    width: 100%;
    overflow: hidden;
/*     background-color: #f0f0f0; */
	transform: rotate(-3deg);
}

.scroll-container-contact{
	transform: rotate(3deg);
}

.scroll-content, .scroll-content2{
    display: flex;
    animation: scroll 10s linear infinite; /* Ajustez la durée pour la vitesse */
    /* Largeur ajustée pour éviter que l'animation ne s'arrête */
    width: max-content;
}

/* .scroll-content2{
	margin-left: -100px;
} */
.scroll-content2{
    display: flex;
    animation: scroll2 10s linear infinite; /* Ajustez la durée pour la vitesse */
    /* Largeur ajustée pour éviter que l'animation ne s'arrête */
    width: max-content;
}

.item, .item2{
    min-width: fit-content;
/*     padding: 20px;
    background-color: #4CAF50;
    color: white; */
    text-align: center;
/*     border-right: 1px solid #fff; */
	margin-left: 50px;
	
	padding: 30px 60px;
	border: 2px solid #BDD7EF;
	color: black;
	color: #BDD7EF;
	color: #7CAEDF;
	font-size: 30px;
	border-radius: 15px;
}

/* Animation keyframes */
@keyframes scroll {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}

@keyframes scroll2 {
    from {
        transform: translateX(-200px);
    }
    to {
        transform: translateX(-50%);
    }
}


@media (max-width: 767px) {
	.text-titre {
  		display: block;
	}
	.item, .item2{
		margin-left: 30px;
		padding: 20px 40px;
		font-size: 20px;
	}
}
