.blacklayer {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 0;
  background-size: cover;
}

/*--------------------------------------------------------------
	Hyper page 1
--------------------------------------------------------------*/
.navbar-logo {
      width:200px ; 
}


.hyper-caption {
  position: relative;
  display: table;
  height: 100%;
  width: 70%;
  margin: 0 auto;
}


.hyper-caption {
  position: relative;
  display: table;
  height: 100%;
  width: 100%;
  margin: 0 auto;
}

.testimonial-title
{
	width: 50%;
	margin: 0 auto;
	
}

.line
{
	width: 50%;
	margin: 0 auto;
	border-bottom:1px solid #7c4091;
	margin-top:10px;

}

.lineb
{
	width: 100%;
	margin: 0 auto;
	border-bottom:1px solid #7c4091;
	margin-top:10px;
	margin-bottom:20px;

}

/*--------------------------------------------------------------
	Hyper Expertise
--------------------------------------------------------------*/


.fixed {
	position: relative;
	margin-top: 15px;
	margin-right:10px;
    text-align: right;

}


.space {
	margin-top: 35px;

}

.air {
	margin-bottom: 20px;

}


.wirks {
	height: 350px;

}


/*--------------------------------------------------------------
	Hyper Services
--------------------------------------------------------------*/


.icon-serv {
 width: 140px;
 margin-top: 5px;
 margin-left:8px;
}



/*--------------------------------------------------------------
	Mes photos
--------------------------------------------------------------*/

img.byben{
vertical-align:middle; 
width:35px; 
display:inline-block;
}

img.dots{
vertical-align:middle; 
width:35px; 
display:inline-block;
}

img.dits{
vertical-align:top; 
width:35px; 
display:inline-block; 
margin-right:10px; 
position: relative;
top: -7px;
}
/*--------------------------------------------------------------
	Social Icons
--------------------------------------------------------------*/

.rs {

padding-right: 20px;
font-size: 25px; 
color: #ffffff;
  }

  #rs {
	  padding-left:6px;
	 margin-left: auto;
     margin-right: auto;
	 width:150px;
     padding-left: 10px;

  }
  



/* Style all font awesome icons */
.fa {}

/* Add a hover effect if you want */
.fa:hover {}

/* Set a specific color for each brand */

/* Facebook Twitter YouTube*/
.fa-facebook, .fa-twitter, .fa-youtube-play, .fa-file-text,.fa-instagram {
 color: white;   

}




.fa-facebook:hover, .fa-instagram:hover, .fa-twitter:hover, .fa-youtube-play:hover , .fa-file-text:hover {
opacity: 0.4;
color: grey;
transition: all 0.125s ease-in-out 0s;}


/*--------------------------------------------------------------
	Mon Kontact
--------------------------------------------------------------*/

/*--------------------------------------------------------------
	Mon Footer
--------------------------------------------------------------*/

.mcopyright > a {
    color: white;
}


.mcopyright a:hover {
opacity: 0.4;
color: grey;
transition: all 0.125s ease-in-out 0s;
}



.mcopyright, p.mcopyright {
    margin: 0;
}

.msocial-links {
  text-align: right;
}

.msocial-links a {
  display: inline-block;
  padding: 0 6px;
 }

  .mcopyright, .msocial-links {
    display: inline-block;
	margin-bottom:10px;
		
  }
  
   
/*--------------------------------------------------------------
	Mes Quotes
--------------------------------------------------------------*/
  
.testimonial-text {
margin-top: 25px;

}

.testimonial-text:before {
  content: url('../images/hb/quoteo.png');
  background-repeat: no-repeat;
  display: inline;
  height: 0;
  line-height: 0;
  left: -10px;
  position: relative;
  top: -10px;

}
.testimonial-text:after {
  content: url('../images/hb/quotec.png');
  display: inline;
  height: 0;
  line-height: 0;
  left: 10px;
  position: relative;
  top: 30px;

}

.testimonial-text1 {
   text-align:center;
  font-style: normal;
  font-weight:bold;
  font-size: 20px;
}


.btcfri {
top:120px; 
width: 90px;
}

.options {
 width:30px;
}

.logotop {
width:360px;
}

.plusvid {
    margin-top: 10px;
width:200px;
}

@media screen and (max-width:767px){
	
.logotop {
width:260px;
}

.plusvid {

width:160px;
}
    
.options {
 transform: rotate(90deg);

}

.btcfri {
top:90px; 
width: 75px;
}


	}
	
	
	/*--------------------------------------------------------------
	Projets
--------------------------------------------------------------*/


.blacknoir {
color:#000000;
font-weight:bold;
}


.whiteblanc {
color:#ffffff;

}

.bauld {
font-weight:bold;

}

.wites {
     background-color:#ffffff; 
	 margin:0px 0px 0px 0px;
	 padding:7px 0px 0px 0px;
	 background-image: url('../images/dots.jpg');
	 background-repeat:no-repeat;
	 background-position:bottom 10px left 10px;
	 background-size:70px;
	 ba
	
		 
}

.pricewind {   
	 padding:5px 5px 5px 5px;
	 margin-bottom:30px;
}




/*--------------------------------------------------------------
	Pricee Table
--------------------------------------------------------------*/
.pricee-table {
  background: #fff;
  border: 1px solid #eaeaea;
  padding: 15px 10px;
  margin: 15px 0 20px;
  border-radius: 2px;
  position: relative;
  min-height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.description {
  color: #333;
  margin-bottom: 10px;
}



.price-content-bottom {
  align-self: flex-end;
  text-align: right;
    margin-top: 10px;
  padding-right: 20px;
  padding-bottom: 10px;
}

.price {
  font-size: 36px;
  color: #111;
  font-weight: bold;
  margin: 0;
  padding: 0;
  line-height: 1;
}

.price span {
  font-size: 18px;
  font-weight: normal;
  margin-left: 4px;
}

.amountoffer {
  text-decoration: line-through;
  font-size: 16px;
  color: red;
  margin-top: 5px;
  font-weight: bold;
  display: block;
}

/*--------------------------------------------------------------
	Chorale List
--------------------------------------------------------------*/

.chorale-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.chorale-list li {
  display: flex;
  align-items: flex-start;
  margin-bottom: 20px;
  text-align: left;
}

.chorale-list img {
  width: 40px;
  margin-right: 15px;
  flex-shrink: 0;
}

.chorale-list div {
  max-width: 100%;
}

@media (max-width: 768px) {
  .chorale-list li {
    flex-direction: column;
    align-items: flex-start;
  }

  .chorale-list img {
    margin-bottom: 10px;
  }
}


/*---------------------------------------
  DOWNLOAD
-----------------------------------------*/
.download {
  border: 5px dotted #d35085;
  border-radius: 12px;
  padding: 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  flex-wrap: wrap;
  margin-bottom: 40px;
  background-color: #fff;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.download-text {
  max-width: 600px;
}

.download-icons {
  display: flex;
  align-items: center;
}

.download-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.download-icons a img {
  transition: transform 0.2s ease;
}

.download-icons a:hover img {
  transform: scale(1.05);
}

.download-label {
  margin-top: 12px;
  font-size: 1.5rem;
  color: #333;

}

/* Responsive pour grands écrans */
@media (min-width: 992px) {
  .download-icons {
    flex-wrap: nowrap;
    gap: 40px;
  }
  
  .download-label {
    font-size: 1.2rem;
    margin-top: 15px;
  }
}





.text-section {
  background: rgba(0, 0, 0, 0.6); /* Optionnel : ajoute un fond sombre pour la lisibilité */
  color: white;
  font-size: 15px;
  padding: 40px;
  flex-direction: column;
  display: flex;
  justify-content: center;   /* Centre horizontalement */
  align-items: center;       /* Centre verticalement */
  text-align: left;        /* Centre le texte dans le bloc */
  min-height: 500px;         /* Assure une hauteur suffisante pour centrer verticalement */
}



.past-header {
  margin: 0 0 15px;
}

.past-title {
    font-weight: bold;
  line-height: 1.1;
  font-size: 22px;
  color: #ffffff;
  margin: 0;
}


.navlogo {
  width: 250px !important;
  margin-top: 7px;
}

/* Media query en dernier pour qu'elle ait la priorité */
@media (max-width: 767px) {
  .navlogo {
    width: 200px !important;
    margin-left: 20px !important;
    margin-top: 10px !important; /* facultatif : ajuster si besoin */
  }
}



/* Logo  */
.logogo {
  width: 450px !important;
}

/* Les Enchanteurs */
.logo-enchanteurs {
  width: 450px !important;
  margin-bottom: 15px;
}

/* Media query : tout ça s'applique en dessous de 768px */
@media (max-width: 767px) {
  .logogo {
    width: 350px !important;
  }

  .logo-enchanteurs {
    width: 350px !important;
  }
}