body,.backgroud-need{
  background-color: #092142;
}

.accordion-button {
  background-color: #0a2750; /* Change this color to your desired color */
  color: #fff; /* Change this color to your desired text color */
}

/* Optional: Change the color of the active (expanded) list item */
.accordion-button:not(.collapsed) {
  background-color: #0a2750; /* Change this color to your desired active color */
  color: #fff;
}

.navbar-color{
    background-color: #08182e;
}

.background_image_section{
    background-image: url('../media/background_image.jpg');
}

.btn-free-trial {
  display: flex;
  justify-content: center;
  align-items: center;
}

.spn-style {
  font-weight: bold;
  color: #fff;
}
/* Styles for regular buttons */
.button {
  display: inline-block;
  padding: 10px 20px;
  background-color: transparent; /* Blue color */
  color: #ffffff; /* White text color */
  border-radius: 5px;
  text-decoration: none;
  border: 2px solid #ffffff; /* Bordure de 2 pixels solide blanche */
  font-weight: bold; /* Bold text */
  transition: background-color 0.3s ease;
}
/* Styles pour les boutons en version mobile */
@media (max-width: 767px) {
  .button,
  .whatsapp-button {
      display: block; /* Change display to block for stacking on mobile */
      width: 100%; /* Make the buttons full width */
      margin-bottom: 10px; /* Add some bottom margin for spacing */
  }
}
.scroll-to-top {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 1000;
  font-size: 24px;
  background-color: blue; /* Changer la couleur de fond selon vos préférences */
  color: white; /* Changer la couleur du texte selon vos préférences */
  width: 40px;
  height: 40px;
  text-align: center;
  line-height: 40px;
  border-radius: 50%;
}

.scroll-to-top i {
  vertical-align: middle;
}

/* Afficher le bouton lorsqu'on descend de 100 pixels depuis le haut de la page */
@media (max-width: 768px) {
  .scroll-to-top {
      display: none;
  }
}

@media (min-width: 769px) {
  .scroll-to-top {
      display: none;
  }
}

.button:hover {
  background-color: #5a9be2; /* Darker blue on hover */
}

/* Styles for WhatsApp button */
.whatsapp-button {
  display: inline-block;
  padding: 10px 20px;
  background-color: #25d366; /* Green color for WhatsApp */
  color: #fff; /* White text color */
  border-radius: 5px;
  text-decoration: none;
  font-weight: bold; /* Bold text */
  transition: background-color 0.3s ease;
}

.whatsapp-button:hover {
  background-color: #128c7e; /* Darker green on hover */
}

.navbar-nav {
  width: 100%;
  display: flex;
}

.nav-item {
  flex-grow: 1;
  text-align: center; /* Alignement du texte au centre */
}

.nav-link {
  padding: 0.5rem 1rem; /* Ajout de remplissage pour l'apparence */
}

h5,h1,h3,h2,p,li,i{
    color: #fff;
}
.img-redus{
    border-radius: 0px 0px 300px 300px; 
}
.title-section{
    font-size: 3rem;
    font-weight: bold;
}


.slider-container {
  overflow: hidden;
  width: 100%; /* Adjust the container width as needed */
}
.bi-sizing{
  font-size: 5em;
}

.slider {
  display: flex;
  animation: slideAnimation 20s linear infinite; /* Adjust animation duration as needed */
}

.logo {
  flex-shrink: 0;
  width: 100px; /* Adjust the width of your logos */
  margin-right: 20px; /* Adjust the spacing between logos */
}

@keyframes slideAnimation {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-120px * 23)); /* Adjust based on the number of logos and their width */
  }
}

.image-section-movie-cover{

}


.image-container-cover {
  width: 100%;
  overflow-x: auto;
  white-space: nowrap;
}

.image-cover {
  width: 200px;
  height: 200px;
  object-fit: cover;
  margin-right: 20px;
  animation: moveRight 10s linear infinite;
}

@keyframes moveRight {
  0% { transform: translateX(0); }
  100% { transform: translateX(calc(100% + 20px)); }
}
.slick-prev:before,
.slick-next:before {
   display:none;
}
.image-slide-cover{
  width: 300px;
  height: 400px;
  border-radius: 15px;
}
a{
  text-decoration: none;
  color: #00a4ff;
}

.gg-check {
  box-sizing: border-box;
  position: relative;
  display: block;
  transform: scale(var(--ggs,1));
  width: 22px;
  height: 22px;
  border: 2px solid transparent;
  border-radius: 100px
 }
 
.gg-check::after {
  content: "";
  display: block;
  box-sizing: border-box;
  position: absolute;
  left: 3px;
  top: -1px;
  width: 6px;
  height: 10px;
  border-width: 0 2px 2px 0;
  border-style: solid;
  transform-origin: bottom left;
  transform: rotate(45deg);
  color: #fff;
  
} 

.gg-screen {
  color: #fff;
  width: 22px;
  height: 14px;
}
svg{
  color: #fff;
}
 
.plan-c{
  border:1px solid white;
  border-radius: 15px 15px 15px 15px;
  padding: 10px;
}
.plan-a{
  border:1px solid #ffbe00;
  border-radius: 15px 15px 15px 15px;
  padding: 10px;
}

ul{
  list-style: none;
}


.border-section{
  border: 1px solid white;
  border-radius: 15px;
}

#languageSwitcher button {
  background: none; /* Supprime le fond par défaut des boutons */
  border: none; /* Supprime la bordure des boutons */
  padding: 0; /* Supprime le padding autour des icônes */
}

.flag-icon {
  display: inline-block; /* Permet l'ajustement de la taille */
  width: 32px; /* Largeur du drapeau */
  margin-right: 10px; /* Espacement à droite de chaque bouton */
  height: 32px; /* Hauteur du drapeau */
  background-size: contain; /* S'assure que l'image est entièrement contenue dans l'élément */
  background-repeat: no-repeat; /* Empêche l'image de se répéter */
}
/* Optionnel : pour éviter un espace supplémentaire après le dernier bouton */
#languageSwitcher button:last-child {
  margin-right: 0;
}
@media (max-width: 319px) { /* Adapté pour les petits appareils */
  .navbar-brand {
    flex-grow: 1; /* Permet à la marque du navbar de prendre l'espace disponible */
  }
  
  #languageSwitcher {
    /* Assurez-vous que le switcher de langue n'occupe pas trop d'espace et reste aligné */
    flex-grow: 0;
    margin-left: auto; /* Pousse le switcher de langue vers la droite */
  }

  .navbar-toggler {
    /* Ajuste le toggle du menu hamburger si nécessaire */
    margin-left: 10px; /* Espace à gauche du menu hamburger */
  }

  .navbar-nav {
    /* Alignement et style des éléments de navigation quand le menu est ouvert */
    margin-top: 10px;
  }

  .nav-item {
    padding: 5px 0; /* Espace entre les éléments du menu */
  }

  .navbar {
    padding: 5px; /* Réduit le padding global de la navbar */
  }
}
/* Styles par défaut */
.container {
  width: 100%;
  margin: 0 auto;
  
}
/* Style par défaut pour la barre, cachée sur les versions de bureau */
.bottom-bar {
  display: none; /* Cache la barre par défaut */
  position: fixed;
  bottom: 0;
  left: 0;
  width: 96%;
  background-color: #092142; /* Couleur de fond */
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.2); /* Ombre pour séparation */
  z-index: 999;
  padding: 10px 0;
  justify-content: center;
  align-items: center;
  
}
/* Style par défaut pour la barre, affichée uniquement sur les versions de bureau */
.right-bar {
  display: none; /* Cache la barre par défaut */
  position: fixed;
  top: 50%;
  right: 0; /* Déplace la barre à droite */
  transform: translateY(-50%); /* Centrer verticalement */
  background-color: #092142; /* Gris foncé pour l'arrière-plan */
  padding: 10px;
  z-index: 999;
  border-radius: 5px 0 0 5px; /* Arrondir les coins gauches */
}

.right-button {
  display: block; /* Chaque bouton s'affiche sur sa propre ligne */
  margin-bottom: 10px; /* Espace entre les boutons */
  padding: 10px;
  color: white;
  text-decoration: none;
  text-align: center;
  background-color: #007BFF; /* Bleu par défaut pour les boutons */
  transition: background-color 0.3s;
}

.right-button:last-child {
  margin-bottom: 0; /* Pas d'espace après le dernier bouton */
}

.right-button:hover {
  background-color: #0056b3; /* Bleu plus foncé au survol */
}

/* Style pour la barre fixe droite sur les versions de bureau */
@media (min-width: 769px) {
  .right-bar {
      display: block; /* Rend la barre visible sur les appareils de bureau */
  }
}

/* Style pour les boutons dans la barre fixe, visibles uniquement sur mobile */
@media (max-width: 768px) {
  .bottom-bar {
      display: flex; /* Rend la barre visible sur les appareils mobiles */
  }

  .bottom-button {
      margin: 0 10px;
      padding: 10px 30px; /* Taille des boutons */
      border-radius: 5px;
      font-weight: bold;
      text-transform: uppercase; /* Texte en majuscules */
      text-decoration: none;
      transition: background-color 0.3s;
      color: #fff; /* Texte noir */
      font-size: 1em;
      border: none; /* Pas de bordure */
  }

  .whatsapp-button {
      background-color: #25D366; /* Vert WhatsApp */
  }

  .subscription-button {
      background-color: #007BFF; /* Bleu pour le bouton d'abonnement */
  }

  .bottom-button:hover {
      filter: brightness(85%);
  }
}

.image-slide-cover {
  display: none; /* Masquer par défaut */
}

/* Media query pour les petits écrans mobiles */
@media screen and (max-width: 480px) {
  .image-slide-cover {
    display: block; /* Montrer les images pour les petits écrans */
    max-width: 100%;
    max-height: none; /* Hauteur flexible */
    width: auto;
    height: auto;
    margin: 0 auto; /* Centrer l'image si elle n'est pas aussi large que le conteneur */
  }
}
@media screen and (max-width: 768px) {
  /* Assurez-vous que les styles appliqués pour les appareils mobiles ne modifient pas le niveau de zoom */
  body {
      /* Supprimez tout zoom ou échelle */
      zoom: 1;
      transform: none;
      /* Autres styles vont ici */
      transform-origin: top left;
  }
}
.autoplay {
  margin-top: 2rem;
}
.zoom-content {
  transform: scale(0.974);
  transform-origin: top left;
}

/* Assure-toi que les éléments positionnés fixement ne sont pas affectés */
.bottom-bar, .right-bar {
  transform: none; /* Annule tout transform appliqué globalement */
}