/* NOTRE HISTOIRE DE HOME dans style css*/
/* .experiance-section{
	position:relative;
	padding:100px 0px 100px;
	background-position:center center;
	background-repeat:no-repeat;
} */

/* *****************************************

Les sections d'acceuil

******************************************/



/*SECTION HERO */

.hero-section-m {
  min-height: 70vh; /* Hauteur minimale de 70% de la fenêtre */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  text-align: center;
  padding: 20px;
}

.hero-section-m h1 {
  font-size: 4rem;
  margin: 0;
}

/* Media Queries pour réactivité */
@media (max-width: 768px) {
  .hero-section-m h1 {
      font-size: 3rem;
  }
}

@media (max-width: 480px) {
  .hero-section-m {
      background-image: url('globex/images/_MG_4518.JPG');
  }

  .hero-section-m h1 {
      font-size: 2rem;
  }
}





/* ACTUALITE DE HOME*/

.news-section  {
   background-color:  #faf6f6; 
}

.section-title-home-b {
    font-size: 2.5rem;
    color: #363a3f; /* Couleur du titre */
    font-weight: 700;
    
  }


  .section-title-home {
    font-size: 2.5rem;
    color: #faf6f6; /* Couleur du titre */
    font-weight: 700;
    
  }
  
  .news-section .card-title {
    font-weight: bold;
  }
  
  .news-section .card-text {
    color: #666666;
    text-align: justify;
  }
  

  /* Pour le bouton */

  .news-section .btn-primary {
    background-color: #007FFF;
    border-color: #009cf0;
  }
  
  .news-section .btn-primary:hover {
    background-color: #007bbd;
    border-color: #007bbd;
  }
  
  
  .news-section .section-subtitle {
    font-size: 1.2rem;
    color: #666;
    margin-bottom: 2rem;
  }
  



/* NOUS REJOINDRE DE HOME*/
  .join-us-section {
    background-color: #faf6f6;
  }
  
  .join-us-section .section-title {
    font-size: 2.5rem;
    color: #009cf0;
  }
  
  .join-us-section .section-subtitle {
    font-size: 1.25rem;
    color: #666666;
  }
  
  .join-us-section .info-box h4 {
    font-size: 1.75rem;
    margin-bottom: 20px;
  }
  
  .join-us-section .info-box ul li {
    font-size: 1rem;
    margin-bottom: 10px;
  }
  
  .join-us-section .card {
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
  }
  



/* CAMPAGNE DE HOME*/
  .campaign-section {
    background-color: rgba(102, 102, 102, 1);
  }
  
  .campaign-section .section-title {
    font-size: 2.5rem;
    color: #009cf0;
  }
  
  .campaign-section .section-subtitle {
    font-size: 1.25rem;
    color: #666666;
  }
  
  /*.campaign-section .card-title {
    font-size: 1.5rem;
    margin-bottom: 15px;
  }
  
   .campaign-section .card-text {
    font-size: 1rem;
    margin-bottom: 20px;
  }
  .campaign-section .card {
    border-radius:0rem
  } */
  



  .campaign-section .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: opacity 0.3s ease;
    padding: 1rem;
}

.campaign-section .card:hover .overlay {
    opacity: 1;
}

.campaign-section .card-title, .card-text {
    color: #fff;
    text-align: center;
}

.campaign-section .card {
    border: none;
    border-radius: 0rem;
    overflow: hidden;
}

.campaign-section .card img {
    width: 100%;
    height: auto;
    object-fit: cover;
}



.campaign-section .row.no-gutters {
    margin-right: 0;
    margin-left: 0;
}
.campaign-section .row.no-gutters .col,
.campaign-section .row.no-gutters [class*="col-"] {
    padding-right: 0;
    padding-left: 0;

}




/* Pour le titre d'acceuil  */
.hh1-shadow {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 1); /* Position et couleur de l'ombre */
  color: #009cf0;
}




/* ACTION DE HOME*/
  .actions-section {
    background-color: #f9f9f9;
  }
  
  .actions-section .section-title {
    font-size: 2.5rem;
    color: #009cf0;
  }
  
  .actions-section .section-subtitle {
    font-size: 1.25rem;
    color: #666666;
  }
  
  .actions-section .card-title {
    font-size: 1.5rem;
    color: #333;
  }
  
  .actions-section .card-text {
    font-size: 1rem;
    color: #555;
  }
  
  .actions-section .btn-primary {
    background-color: #009cf0;
    border: none;
  }
  



/* DON DE HOME*/

.donation-section {
  background-color: #f4f4f4;
}

.donation-section .section-title {
  font-size: 2.5rem;
  color: #ffffff;
}

.donation-section .section-subtitle {
  font-size: 1.25rem;
  color: #666666;
}

.donation-content {
  background-color: #fff;
  border-radius: 8px;
}

.donation-content h4 {
  color: #333;
  font-size: 1.75rem;
}

.donation-content p {
  color: #555;
  font-size: 1rem;
}

.btn-primary {
  background-color: #009cf0;
  border: none;
  padding: 10px 30px;
}



/* Testimonials DE HOME*/
.testimonials-section {
    background-color: #f9f9f9;
  }
  
  .section-title {
    font-size: 2.5rem;
    color: #009cf0;
  }
  
  .section-subtitle {
    font-size: 1.25rem;
    color: #666666;
  }
  
  .testimonial-card {
    background-color: #fff;
    border-radius: 8px;
  }
  
  .testimonial-text {
    font-size: 1.1rem;
    color: #333;
    margin-bottom: 20px;
  }
  
  .testimonial-author {
    text-align: center;
  }
  
  .author-name {
    font-size: 1.2rem;
    color: #009cf0;
    margin-top: 10px;
  }
  
  .author-role {
    font-size: 0.9rem;
    color: #666666;
  }
  


/* *****************************************

Modif Pour le side bar

******************************************/

/*  Debut de modif Pour le side */

.container_nc {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-gap: 10px;
    max-width: 300px;
    /* border: 2px solid #fff; */
}

  

.list-link_nc li a{
	position:relative;
	color: #009cf0;
	font-size:17px;
	padding-left:15px;
	font-weight:500;
	-webkit-transition:all 300ms ease;
	-ms-transition:all 300ms ease;
	-o-transition:all 300ms ease;
	-moz-transition:all 300ms ease;
	transition:all 300ms ease;
}

.sidebar-info-contents .content-inner .container_nc h2{
	position:relative;
	font-size:20px;
	color:#009cf0;
	font-weight:500;
	margin-bottom:20px;
}
/* Fin de modif Pour le side  */






 /* *****************************************

La page des articles
Taille de l'image recommandée :

    Pour les grands écrans (ordinateurs de bureau) :
        Largeur : 1920px
        Hauteur : 1080px (ou un ratio similaire comme 16:9)

    Cela garantit une bonne qualité d'image pour les grands écrans en mode paysage (HD).

    Pour les écrans de taille moyenne (tablettes, laptops) :
        Largeur : 1200px à 1400px
        Hauteur : En fonction du ratio de l'image, idéalement entre 675px et 900px.

    Pour les écrans de taille moyenne, une largeur de 1200px à 1400px sera suffisante tout en garantissant une bonne qualité visuelle.

    Pour les petits écrans (mobiles) :
        Largeur : 768px à 1024px
        Hauteur : Entre 432px et 576px (basé sur le ratio 16:9)

******************************************/



/******************************************

LA BANNIERE DES ARTICLES

******************************************/



.banner-art {
  height: 60vh; /* Prend 50% de la hauteur de la fenêtre */
  display: flex;
  align-items: center; /* Centre verticalement */
  justify-content: center; /* Centre horizontalement */
  background-color: #f8f9fa;
  position: relative;
  overflow: hidden; /* Masquer les débordements */
  margin: 0;
  padding: 0;
  position: relative;
  padding-top: 238px;
}

.banner-art img {
  width: 100%; /* L'image prend toute la largeur de son conteneur */
  height: 100%; /* L'image prend toute la hauteur de son conteneur */
  object-fit: cover; /* Couvre entièrement l'espace tout en maintenant les proportions */
}

/* Texte positionné au-dessus de l'image */
.banner-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: white; /* Couleur du texte */
  z-index: 10;
  padding: 0 15px; /* Ajouter un peu de padding pour le texte */
}

.banner-text h1 {
  font-size: 2rem;
  font-weight: bold;
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7); /* Ajout d'une ombre pour plus de lisibilité */
}



 .banner-text h1 span {
  background-color: rgba(0, 156, 240, 1);
  padding: 0px 20px;
  line-height: 55px; 
  font-size: 40px; 
  font-weight: 700;
}

.banner-art .banner-text h3 {
  font-size: 1.25rem;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7);
  margin-top: 0.5rem;
}

@media (min-width: 768px) {


 .banner-text {
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: white; /* Couleur du texte */
    z-index: 10;
    padding: 0 15px; /* Ajouter un peu de padding pour le texte */
  }


 .banner-text h1 {
    font-size: 1.5rem;
  }

 
  .banner-text h1 span {
    background-color: rgba(0, 156, 240, 1);
    line-height: 55px; 
    font-size: 40px; 
    font-weight: 700;
  }

}

@media (max-width: 767px) {

  .banner-art  {
    padding-top: 0;
    height: auto;
  }

 .banner-text {
    position: absolute;
    left: 33%;
    transform: translate(-50%, -50%);
    text-align: left;
    color: white; /* Couleur du texte */
    z-index: 10;
    padding-top: 41px; /* Ajouter un peu de padding pour le texte */
    padding-right: 0;
    padding-left: 14px;
  }

 .banner-text h1 {
    font-size: 1rem;
  }


  .banner-text h1 span {
    
    line-height: 25px; 
    font-size: 20px; 
    font-weight: 0;
    padding: 0;
  }

 
} 


.banner-home img {
  width: 100%; /* L'image prend toute la largeur de son conteneur */
  height: 100%; /* L'image prend toute la hauteur de son conteneur */
  object-fit: cover; /* Couvre entièrement l'espace tout en maintenant les proportions */
  padding-bottom: 11rem;

}

.banner-home {
  height: 75vh; /* Prend 50% de la hauteur de la fenêtre */
  display: flex;
  align-items: center; /* Centre verticalement */
  justify-content: center; /* Centre horizontalement */
  background-color: #f8f9fa;
  position: relative;
  overflow: hidden; /* Masquer les débordements */
  margin: 0;
  padding: 0;
  position: relative;
  padding-top: 238px;
}

@media (max-width: 767px) {

  .banner-home  {
    padding-top: 0;
    height: auto;
  }

  .banner-home img {
   
    padding-bottom: 0;
  
  }
}

.banner-home-text h1 {
  display:inline-block;  
  line-height: 55px; 
  font-size: 60px; 
  font-weight: 700; 
	text-shadow: 3px .4px 2px rgba(31,35,35,.25);
}


.banner-home-text h1 span{
  background-color: rgba(0, 156, 240, 1);
  padding: 0px 20px;
	line-height: 15px; 
  font-size: 40px; 
  font-weight: 700;
}




/* 
.banner-art {
  height: 60vh; / Prend 50% de la hauteur de la fenêtre 
  display: flex;
  align-items: center; /* Centre verticalement 
  justify-content: center; /* Centre horizontalement 
  background-color: #f8f9fa;
  position: relative;
  overflow: hidden; /* Masquer les débordements 
  margin: 0;
  padding: 0;
  position: relative;
  padding-top: 238px;
}

.banner-art img {
  width: 100%; /* L'image prend toute la largeur de son conteneur 
  height: 100%; /* L'image prend toute la hauteur de son conteneur 
  object-fit: cover; /* Couvre entièrement l'espace tout en maintenant les proportions 
}

/* Texte positionné au-dessus de l'image 
.banner-art .banner-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: white; /* Couleur du texte 
  z-index: 10;
  padding: 0 15px; /* Ajouter un peu de padding pour le texte 
}

.banner-art .banner-text h1 {
  font-size: 0.5rem;
  font-weight: bold;
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7); /* Ajout d'une ombre pour plus de lisibilité 
}

.banner-art .banner-text h3 {
  font-size: 1.25rem;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7);
  margin-top: 0.5rem;
}

@media (min-width: 768px) {
  .banner-art .banner-text h1 {
    font-size: 1.5rem;
  }

  .banner-art .banner-text h3 {
    font-size: 1.5rem;
  }
}

@media (max-width: 767px) {
  .banner-art .banner-text h1 {
    font-size: 1.8rem;
  }

  .banner-art .banner-text h3 {
    font-size: 1rem;
  }
} */


/* padding-top: 238px; */





.news-section-d  {
  padding: 2rem 0;
  margin-left: 1rem;
  margin-right: 1rem;
}


.news-section-d .news-detail {
  padding: 2rem 0;
}

.news-section-d .news-image {
  width: 100%;
  height: auto;
  object-fit: cover;
  margin-bottom: 1.5rem;
}

.news-section-d .news-date {
  font-size: 0.9rem;
  color: #6c757d;
}

.news-section-d .news-theme {
  background-color: #007bff;
  color: white;
  padding: 0.5rem;
  display: inline-block;
  margin-bottom: 1rem;
  border-radius: 5px;
  font-size: 0.85rem;
}

.news-section-d .news-summary {
  font-size: 1.1rem;
  font-weight: bold;
  margin-bottom: 1.5rem;
}

.news-section-d .news-content {
  font-size: 1rem;
  line-height: 1.6;
}

@media (max-width: 767px) {
  .news-section-d .news-summary {
    font-size: 1rem;
  }
}


/* Formulaure */

.form-container {
  margin: 5% auto;
  padding: 2rem;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.1);
}

.form-title {
  font-size: 1.8rem;
  margin-bottom: 1rem;
  font-weight: bold;
  text-align: center;
  color: #007bff;
}

.form-control {
  border-radius: 5px;
  padding: 0.75rem;
}

.form-group {
  margin-bottom: 1.5rem;
}

.btn-primary {
  padding: 0.75rem 1.5rem;
  font-size: 1.1rem;
  font-weight: bold;
  border-radius: 5px;
}

.form-text {
  font-size: 0.85rem;
  color: #6c757d;
}

@media (max-width: 576px) {
  .form-container {
    margin: 10% auto;
  }
}