@import url('css/bootstrap.min.css');




#navbar{
	background-color: #000000;
}
#navb{
	color: white;
}
.nav-item .btn {	
padding: 10px 20px;
border: unset;
border-radius: 15px;
color: #ffffff;
z-index: 1;
background: #e8e8e8;
position: relative;
font-weight: 1000;
font-size: 13px;
/*-webkit-box-shadow: 4px 8px 19px -3px rgba(0,0,0,0.27);
box-shadow: 4px 8px 19px -3px rgba(0,0,0,0.27);*/
transition: all 250ms;
overflow: hidden;
}
   
.nav-item .btn::before {
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 0;
border-radius: 15px;
background-color: #ffff00;
z-index: -1;
-webkit-box-shadow: 4px 8px 19px -3px rgba(0,0,0,0.27);
box-shadow: 4px 8px 19px -3px rgba(0,0,0,0.27);
transition: all 250ms
}  
.no-underline {
    text-decoration: none;
    color: inherit; /* Pour hériter de la couleur du bouton */
}
.nav-item .btn:hover {
color: #ffffff;
}  
.nav-item .btn:hover::before {
width: 100%;
}

.carousel-caption .btn {
	padding: 10px 20px;
	border: none;
	border-radius: 5px;
	font-weight: bold;
	letter-spacing: 5px;
	background:#000000;
	text-transform: uppercase;
	cursor: pointer;
	color: #000000;
	transition: all 1000ms;
	font-size: 15px;
	position: relative;
	overflow: hidden;
	outline: 2px solid #000000;
  }
  
  .carousel-caption .btn:hover {
	color: #000000;
	transform: scale(1.1);
	outline: 2px solid  #000000;
	box-shadow: 4px 5px 17px -4px #ffff00;
  }
  
  .carousel-caption .btn::before {
	content: "";
	position: absolute;
	left: -50px;
	top: 0;
	width: 0;
	height: 100%;
	background-color: #ffff00;
	transform: skewX(45deg);
	z-index: -1;
	transition: width 1000ms;
  }
  
  .carousel-caption .btn:hover::before {
	width: 250%;
  }
  


.slick-slide {
	margin: 0 10px; /* Optional spacing between slides */
}
#custom-dropdown-menu{
	min-width: 50%; 
    width: auto; 
    left: 0; 
    right: 0; 
}
.section-padding {
	padding: 100px 0;
}
.carousel-item {
	height: 100vh;
	min-height: 300px;
}
.carousel-caption {
	bottom: 160px;
	z-index: 2;
}
.carousel-caption h5 {
	font-size: 45px;
	letter-spacing: 2px;
	margin-top: 25px;
}
.carousel-caption p {
	width: 60%;
	margin: auto;
	font-size: 18px;
	line-height: 1.9;
}
.carousel-inner:before {
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
    top: 0;
	left: 0;
	 /*z-index: 1;* */
}
.navbar .getstarted {
	background: #106eea;
	margin-left: 30px;
	border-radius: 4px;
	font-weight: 400;
	color: #fff;
	text-decoration: none;
	padding: .5rem 1rem;
	line-height: 2.3;
}
.navbar-nav a {
	font-size: 15px;
	font-weight: 500;
}
.navbar-light .navbar-brand {
	color: #000;
	font-size: 25px;
	text-transform: uppercase;
	font-weight: bold;
	letter-spacing: 2px;
}
.navbar-light .navbar-brand:focus, .navbar-light .navbar-brand:hover {
	color: #ffffff;
}
.navbar-light .navbar-nav .nav-link {
	color: #fbfbfb;
}
.navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .nav-link:hover {
	color: #ffffff;
}
.w-100 {
	height: 100vh;
}
.navbar-toggler {
	padding: 1px 5px;
	font-size: 18px;
	line-height: 0.3;
	background: #fff;
}

.portfolio .card {
	box-shadow: 15px 15px 40px rgba(0, 0, 0, 0.15);
}
.team .card {
	box-shadow: 15px 15px 40px rgba(0, 0, 0, 0.15);
}
.formation .card-body i {
	font-size: 50px;
}
.team .card-body i {
	font-size: 20px;
}

.my-work{
display: flex;
flex-direction: column;
}
.imge-develper{
width: 1100px;
width: 50vw;
margin: auto;
transform: translateY(2px);
}
	.like-acard{
	text-align: center;
	width: 22%;
	height: 70%;
	position: relative;
    background-color :#ffff00 ;
	border-radius: 20px;
	box-shadow: 0px 15px 10px -15px #111;    
	/*box-shadow: 20px 20px 50px rgb(0, 0, 0);*/
	margin-bottom: 15px;
	display: flex;
	flex-direction: column;
	align-content: center;
	transition: 0.5s ease all;		
	}
	.card-grid {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 10px;
		padding: 10px;
		margin-top: 200px;
		margin-left: -40px;
	  }
	  
	  .flip-card {
		background-color: transparent;
		width: 300px;
		height: 400px;
		perspective: 1000px;
		font-family: sans-serif;
	  }
	  
	  .title2 {
		font-size: 1.5em;
		font-weight: 900;
		text-align: center;
	  }
	  .title {
		font-size: 1.8em;
		font-weight: 600;
		text-align: center;
	  }

	  .titlefor {
		font-size: 1.5em;
		margin-top:318px; 
	  }
	  
	.flip-card-inner {
		position: relative;
		width: 100%;
		height: 100%;
		text-align: center;
		transition: transform 0.8s;
		transform-style: preserve-3d;
	  }
	  
	  .flip-card:hover .flip-card-inner {
		transform: rotateY(180deg);
	  }
	  
	  .flip-card-front, .flip-card-back {
		box-shadow: 0 8px 14px 0 rgba(0,0,0,0.2);
		position: absolute;
		display: flex;
		flex-direction: column;
		justify-content: center;
		width: 100%;
		height: 100%;
		-webkit-backface-visibility: hidden;
		backface-visibility: hidden;
		border: 1px solid rgb(255, 255, 255);
		border-radius: 1rem;
	  }
	  
	  .flip-card-front {
		background: linear-gradient(120deg, #FFEB3B 60%, #FFF176 88%, #FFD54F 40%, #FFEB3B 48%);
		color: #000000; /* Utilisation d'une couleur jaune doré pour le texte */
	  }
	  
	  .flip-card-back {
		background: linear-gradient(120deg, #FFEB3B 30%, #FFD700 88%, #FFF59D 40%, #FFE082 78%);
		color: rgb(0, 0, 0);
		transform: rotateY(180deg);
	  }



		.like-acard h1{
     		font-family: 'Roboto', sans-serif; 
			font-weight: bold;
				/* position: absolute; */
				text-align: center;
				 /* left: 50px; */
				 margin-top: 90%;
				 top:150%;
		}
	#qcm{
		border:  #dcd93e; /* Bordure de 2px d'épaisseur, couleur orange */
		background-color: #ffffff; /* Couleur de fond gris clair */
		color: #000000; /* Couleur du texte noir */
		padding: 10px; /* Ajouter un espace intérieur de 10px */
		border-radius: 8px 8px 8px 8px; /* Bordures arrondies de 8px */
		text-align: justify; /* Centrer le texte */
		font-family: 'Roboto', sans-serif; 
        font-weight: bold;
		font-size: 100%;
		width: 350px; /* Largeur du contenant */
		margin: 20px auto; /* Centrer horizontalement avec un espace vertical */
		margin-bottom: 10px;
		display: inline-block; /* Assure que le lien prend bien en compte les marges/padding */
        margin-top: 10px; /* Ajuste cet espace selon les préférences */
		box-shadow: 0px 15px 10px -15px #111;    
	}
	#qcm:hover {
		color: rgb(223, 238, 131);
		background-color: rgb(0, 0, 0);
		box-shadow: -15px 0px 10px -15px #111;
		transition: 0.5s ease all;

	}
	.qcm-text h2 {
		margin-bottom: 20px; /* Ajuste cet espace selon tes préférences */
	}
	.like-acard h2{
    /* position: absolute; */
	width:80% ;
	margin: auto;
	text-align: center;

	}
	.allmy-work{
	display: flex;
	justify-content: space-around;
	transform: translateX(-25px);
	flex-wrap: wrap;
	}
	.allmy-work2{
	margin-top: 30px;
	}
	.allmy-work3{
	margin-top: 30px;
	}
	.my-work button{
	cursor: pointer;
	}
	.like-acard:hover{
	transform: scale(0.9)  ;
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.486);
	}
	.flip-card-back button{
	position: absolute;
	bottom: 20px;
	background-color: transparent;
	border: transparent;
	color: black;
	text-transform: uppercase;
	width: 80%;
	background-color: #ffffff;
	border-top: 1px solid white;
	border-left: 1px solid white;
	/*box-shadow: 0 10px 10px rgba(0, 0, 0, 0.26);*/
	padding: 10px 15px;
	left:15% ;
	border-radius: 20px;
	transition: 0.5s ease all;
	}
	.like-acard button:hover{
	transform: scale(1.1);
	}
	.like-acard:hover p{
	transform: translateY(20px);
	}
	.flip-card-front .img3{

			
	}
	

	/* Cibler l'image dans la face arrière pour la masquer */

	/*.img-templet:hover{
	transform: scale(1.3) translateY(-20px) ;
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.486);
	}*/
	.text-button button{
	position: relative;
	background-color: transparent;
	outline: none;
	border: none;
	padding:  10px 30px ;
	background-color: rgba(255, 255, 255, 0.384);
	font-size: 30px;
	border-radius: 30px;
	border-bottom: 1px solid white;
	border-left: 1px solid white;
	border-right: 1px solid white;
	cursor: pointer;
	color: rgb(255, 255, 255);
	text-transform: uppercase;
	backdrop-filter: blur(10px);
	transition: 0.5s ease all;
	}
	.me-icons{
		position: absolute;
		display: flex;
		flex-direction: column;
		align-content: center;
		justify-content: center;
		top: 140px;
		right: 200px;	
		transition: 1s ease all;
		opacity: 0;		
	}
	.img-me:hover  .me-icons{
	   
	transform: translate(150px);
	opacity: 1;
	
	}
	.card-body img{
		width: 77px;
	}
	.card-body button {
		background-color: rgba(251, 255, 3, 0.971);
	}
	.card-body button:hover{
		color: #ffffff;
	}
	
	.like-acard:hover{
		color: #1e1f02;
	}
	/*.map-responsive {
		overflow: hidden;
		padding-bottom: 56.25%;
		position: relative;
		height: 0;
	  }
	  .map-responsive iframe {
		left: 0;
		top: 0;
		height: 100%;
		width: 100%;
		position: absolute;
	  }*/

/*@media (max-width:1390px) {
	
}*/
#carte{
	justify-content: space-evenly;
  }
#tarif .card {
	width: 190px;
	background: #00ffa0;
	padding: 1rem;
	left: 0%;
	border-radius: 1rem;
	border: 0.5vmin solid #05060f;
	box-shadow: 0.4rem 0.4rem #05060f;
	overflow: hidden;
	color: black;
  }
  /*Card content*/
  .pricing-block-content {
	display: flex;
	height: 100%;
	width: 450%;
	flex-direction: column;
	gap: 0.5rem;
  }
  
  .pricing-plan {
	color: #05060f;
	font-size: 2rem;
	line-height: 1.25;
	font-weight: 700;
  }
  
  .price-value {
	display: flex;
	color: #05060f;
	font-size: 1.8rem;
	line-height: 1.25;
	font-weight: 700;
  }
  
  .pricing-note {
	opacity: 0.8;
  }
  
  /*Checklist*/
  .check-list {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin-top: 0.5rem;
  }
  
  .check-list-item {
	display: flex;
	align-items: right;
	gap: 4px;
  }
  .video-reviews {
    display: flex;
    flex-direction: row; /* Changement ici pour les aligner horizontalement */
    justify-content: center; /* Centrer les vidéos horizontalement */
    gap: 20px; /* Espacement entre les vidéos */
}

.video-container {
    width: 300px;
    height: auto;
}

.videol {
    width: 100%;
    height: auto;
    border: 2px solid #ffff00;
    border-radius: 8px;
}






.copy-right-sec{
	padding: 1.8rem;
    background: #82074a;
    color: #fff;
    text-align: center;
}
.copy-right-sec a{
	color: #fcd462;
    font-weight: 500;
}
a{
  text-decoration:none;
}

.customer-reviews h2 {
    text-align: center;
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 20px;
    color: #303030;
}
.imgcard {
	width:90%;
		position: absolute;
		margin-top: 10px  ;
		margin-bottom: 50px;
		border-radius: 20px;
		height: 60%;
		left: 5%; 
		top: 1%;
}
.flip-card-front button{
	
	display:none;
	}
@media only screen and (min-width: 769px) and (max-width: 1000px) {

	.carousel-caption {
		bottom: 370px;
	}
	.carousel-caption p {
		width: 100%;
	}
	.card {
		margin-bottom: 30px;
	}
	.img-area img {
		width: 100%;
	}
	.img-me{ margin-top: 20px;
	
		z-index: auto;
		
		
		}
		.me-icons{
		
			 bottom: -250px;
		  left: 300px; 
		opacity:0;
		}
		.img-me:hover .me-icons{
			left: 10px; 
			opacity:1;
		
		}
		
}
@media only screen and (max-width: 767px) {
	.card-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 5px;
        padding: 5px;
        margin-top:  300px;
		margin-left: 0px;
      }
	  .flip-card {
		background-color: transparent;
		width: 160px;
		height: 360px;
		perspective: 1000px;
		font-family: sans-serif;
	  }
	  
	  
	  .title {
		font-size: 15px;
		font-weight: 550;
		text-align: center;
	  }

	  .titlefor {
		font-size: 20px;
		margin-top:50px; 
	  }
	  .title2 {
		font-size: 15px;
		font-weight: 500;
		text-align: center;
		margin-top:2px; 

	  }
	  .progrmtit{
		font-size: 15px;
		font-weight: 200;
	  }
	  .flip-card-back button{
		position: absolute;
		bottom: 3px;
		background-color: transparent;
		border: transparent;
		color: black;
		text-transform: uppercase;
		width: 80%;
		background-color: #ffffff;
		border-top: 1px solid white;
		border-left: 1px solid white;
		/*box-shadow: 0 10px 10px rgba(0, 0, 0, 0.26);*/
		padding: 10px 15px;
		left:15% ;
		border-radius: 20px;
		transition: 0.5s ease all;
		}
		
		
	.navbar-nav {
		text-align: center;
	}
	.carousel-caption {
		bottom: 125px;
	}
	.carousel-caption h5 {
		font-size: 17px;
	}
	.carousel-caption a {
		padding: 10px 15px;
		font-size: 15px;
	}
	.carousel-caption p {
		width: 100%;
		line-height: 1.6;
		font-size: 12px;
	}
	.about-text {
		padding-top: 50px;
	}
	.card {
		margin-bottom: 30px;
	}
	.like-acard button {
		left:100px ;
	}
	.about-title {
		font-size: 1.8rem;
	}

	.about-description {
		font-size: 1rem;
		margin-bottom: 20px;
	}

	.about-button {
		font-size: 1rem;
		padding: 10px 20px;
	}

	.about-img img {
		width: 60%;
		height: 60%;
	}

	.about-text {
		padding-top: 20px;
	}
	 #vedioenlign iframe {
        height: 100px !important;
    }
	
}