/* Style global */
body {
    margin: 0;
    font-family: 'Roboto', sans-serif;
    background-color: #0e0018;
    color: #ffffff;
  }
  
  
  
  /* HERO SECTION */
  .hero-section {
    background: url('/images/bullzimage/bg4.png') no-repeat center center/cover;
    padding: 15px 20px;
    position: relative; 
    overflow: hidden; 
    height: 770px;
  }
  
  .hero-content {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 40px; /* Ajout d'un espace entre les deux colonnes */
    max-width: 1108px;
  margin: 0 auto;
  position: relative;
  overflow: hidden; 
  margin-top: 0px;
  flex-wrap: wrap;
  }
  
  /* max-width: 1108px;
  margin: 0 auto;
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between; 
  overflow: hidden; 
  margin-top: 0px; */
  
  .hero-left, .hero-right {
    flex: 1 1 35%; /* Les deux colonnes prennent 50% de la largeur */
    display: flex;
    flex-direction: column;
    gap: 20px; /* Espacement interne pour chaque colonne */
  }
  
  .hero-right {
  }
  
  .hero-left {
    align-items: flex-start; /* S'assure que le contenu de gauche est bien aligné */
  }
  
  .hero-content-deux {
    max-width: 1108px;
    margin: 0 auto;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between; 
    /* height: 60vh;  */
    overflow: hidden; 
    margin-top: 104px;
  }
  .hero-content-deux h1{
      font-size: 22px;
      color: #ffffff;
      /* color: #9f99a3; */
  }
  
  
  .slides-container {
    display: flex;
    transition: transform 1.2s cubic-bezier(0.25, 1, 0.5, 1); /* Transition plus longue et douce */
    width: 100%;
  }
  
  .slide {
    min-width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative; 
    margin-top: 25px;
  }
  
  
  .slide-text {
    flex: 1 1;
    z-index: 2;
    padding-right: 20px;
    display: flex;
    flex-direction: column;
    gap: 40px;
  }
  
  .slide-text h1{
    font-size: 55px !important;
    margin: 0;
  
  }
  
  .hero-text {
    margin: 0;
  }
  .hero-text-bottom {
    font-size: 21px;
    font-weight: bold;
    margin: 0;
  }
  
  .hero-text-bottom span {
    color: #ff4291;
  }
  
  .slide-image-container {
    flex: 1;
    position: relative;
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }
  
  .hero-absolute-image {
    max-width: 120%;
    height: auto;
    z-index: 9999;
    position: relative; /* Remove absolute positioning for better control */
  }
  
  .hero-content h1 {
    font-size: 50px;
  }
  
  .hero-content h1 span {
    color: #29f4a3;
  }
  
  .hero-content p {
    font-size: 32px;
    font-weight: bold;
  }
  
  .hero-content p span {
    color: #ff4291;
  }
  
  .cta-btn-container {
    display: flex;
    align-items: center;
    gap: 20px;
  }
  
  .cta-btn {
    background-color: #29f4a3;
    border: none;
    padding: 15px 30px;
    cursor: pointer;
    border-radius: 5px;
    font-weight: bold;
    font-size: 24px;
  }
  
  .cta-link-top {
    text-decoration: none;
    color: white;
  }
  
  .cta-btn {
    background-color: #29f4a3;
    border: none;
    padding: 15px 30px;
    cursor: pointer;
    border-radius: 5px;
    font-weight: bold;
    font-size: 24px;
    color: black; 
  }
  
  .cta-btn a {
    text-decoration: none !important;
    color: black !important; 
  }
  
  .cta-btn .a-btn {
    text-decoration: none;
    color: black !important; 
  }
  
  .cta-icons {
    display: flex;
    gap: 10px;
  }
  
  .icon {
    width: 25px;
    height: 25px;
    cursor: pointer;
  }
  
  
  
  /* ADVANTAGE SECTION */
  
  .description-boxes-last-container-advantage {
    padding: 85px 20px;
    /* background-color: #19132f;; */
    background-color: #170028;;
    background: url("/images/bullzimage/bg20.png")  no-repeat center center/cover; ;
  
  }
  .description-boxes-last-container {
    padding: 85px 20px;
    /* background-color: #19132f;; */
    /* background-color: #170028;; */
  }
  
  .section-content-container {
    max-width: 1108px;
    margin: 0 auto;
    display: flex;
    gap: 115px;
  }
  
  .section-content-container-title{
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
  }
  
  .section-content-container-title img{
    width: 100%;
    height: auto;
    margin-top: 0px;
  }
  
  .section-content-container-title h1 {
    color: #ffffff;
    /* color: #9f99a3; */
    font-size: 22px;
    margin: 0;
  }
  
  .section-content-container-title h1 span{
  color: #29F4A3;
  }
  
  .section-content-container-title span:nth-child(2){
  font-size: 12px;
  color: #9f99a3;
  text-align: center;
  }
  
  /* PLAYER PRESENATION */
  
  
  .section-content-player {
    max-width: 1108px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 25px;
  }
  
  .section-content-player-top{
    display: flex;
    gap: 25px;
  }
  .section-content-player-bottom{
    display: flex;
    gap: 25px;
  }
  
  .section-content-container-title-players{
    flex: 1 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    background-color: #05070e;
    /* padding: 15px; */
    border-radius: 10px;
    overflow: hidden; 
    position: relative;
    padding: 15px;
    transition: transform 0.3s ease, background-color 0.3s ease;
  
  }
  .section-content-container-title-players:hover{
    transform: translateY(-5px);
    background-color: #250f2d;
  }
  
  .section-content-container-title-players-bottom-vignette {
    /* background-color: #ff4191; */
    color: #fefcfd;
    background: url(data:image/png;base64,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) no-repeat center center / cover;
    /* padding: 6px 25px; */
    position: absolute;
    top: 0;
    text-align: center;
    width: 128px;
    height: 33px;
    line-height: 30px;
  }
  
  .section-content-container-title-players-bottom-vignette h3{
   font-size: 15px;
   margin: 0;
  }
  .section-content-container-title-players-top {
    border: 1px solid #361328;
    border-radius: 10px;
    /* flex: 1 1; */
    width: 100%;
    overflow: hidden;
    height: 260px;
  }
  .bg1{
    background: url("/images/bullzimage/souris-final.png")  no-repeat center center/cover; ;
    
  }
  .bg2{
    background: url("/images/bullzimage/lapin-final.png")  no-repeat center center/cover; ;
    
  }
  .bg3{
    background: url("/images/bullzimage/renard-final.png")  no-repeat center center/cover; ;
    
  }
  .bg4{
    background: url("/images/bullzimage/loup-final.png")  no-repeat center center/cover; ;
    
  }
  .bg5{
    background: url("/images/bullzimage/aigle-final.png")  no-repeat center center/cover; ;
    
  }
  .bg6{
    background: url("/images/bullzimage/toreau-final.png")  no-repeat center center/cover; ;
    
  }
  
  .section-content-container-title-players-top img {
    width: 100%;
    height: 260px;
    object-fit: contain;
  }
  .section-content-container-title-players-bottom {
    flex: 1 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    justify-content: space-between;
    margin-top: 10px;
  }
  
  
  .section-content-container-title-players-bottom > span:nth-child(1) {
    color: #d8d9d9;
    font-size: 22px;
    font-weight: bold;
  }
  
  .section-content-container-title-players-bottom > span:nth-child(2) {
    color: #dddede;
    font-size: 11px;
    text-align: center;
  }
  
  .section-content-container-title-players-bottom-container-general{
    display: flex;
    width: 100%;
    gap: 10px;
    margin-top: 10px;
  }
  
  .section-content-container-title-players-bottom-container {
    background-color: #121419;
    width: 100%;
    height: 60px;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
  }
  
  .section-content-container-title-players-bottom-container > span:nth-child(1) {
    color: #d8d9d9;
    font-size: 11px;
  }
  
  .section-content-container-title-players-bottom-container > span:nth-child(2) {
    color: #29f4a3;
    font-size: 10px;
    text-align: center;
  }
  
  .bg-level-1{
    background: url('/images/bullzimage/bglevel1.png');
  }
  
  /* .section-content-container-title-players img{
    width: 80%;
    height: auto;
    margin-top: 15px;
  } */
  
  .section-content-container-title-players h1 {
    font-size: 15px;
    margin-bottom: 0px;
    margin-top: 0px;
    color: #9f99a3;
  }
  
  .section-content-container-title-players h1 span{
  color: #29F4A3;
  }
  
  
  .level-advantages {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    width: 100%;
    margin-top: 15px;
  }
  
  .advantage-box {
    background-color: #202023;
    color: #ffffff; /* Texte blanc */
    text-align: center;
    padding: 8px;
    border-radius: 5px;
    font-size: 12px;
    font-weight: bold;
    min-width: 100px;
  }
  .wager {
    color: #22e091;
  }
  
  
  /* Websocket */
  
  .assets-bets {
    display: flex;
    background-color: #0e0018;
    padding: 85px 20px;
    max-width: 1108px;
    margin: 0 auto;
  }
  
  .assets h2 {
    font-size: 22px;
    color: #ffffff;
    /* color: #9f99a3; */
    margin-top: 0px;
    margin-bottom: 29px;
  }
  
  .numbers{
    flex: 1.5;
  }
  
  .numbers {
    flex: 1.5; /* Garder la répartition du flex */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    margin-right: 20px;
  }
  
  .numbers-title {
    font-size: 22px;
    margin-bottom: 29px;
    color: #9f99a3;
  }
  
  .stats-container {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
  }
  
  .stat-box {
    background-color: #1a0e24;
    flex: 1;
    min-width: 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 15px;
    border-radius: 6px;
    cursor: default;
    text-align: center;
    transition: transform 0.3s ease, background-color 0.3s ease;
  }
  
  .stat-box:hover {
    transform: translateY(-5px);
    background-color: #250f2d;
  }
  
  .stat-value {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 5px;
    color: #29f4a3; /* Vert clair pour attirer l’œil */
  }
  
  .stat-label {
    font-size: 14px;
    color: #9f99a3;
  }
  .latest-bets {
    flex: 1;
    width: 32%;
    margin-left: 20px;
  }
  
  .latest-bets h2 {
    font-size: 22px;
    color: #9f99a3;
  }
  
  .asset-value.profit {
    color: #29f4a3; /* Couleur pour le profit */
  }
  
  .asset-value.loss {
    color: #ff4191; /* Couleur pour la perte */
  }
  
  .profit {
    color: #29f4a3; /* Vert pour profit */
  }
  
  .loss {
    color: #ff4191; /* Rouge pour perte */
  }
  
  .asset-value {
    font-size: 14px;
    font-weight: bold;
  }
  
  /* ----- Styles pour "Assets Available" ----- */
  
  .assets-grid {
    display: flex;
    flex-wrap: wrap;
    /* max-height: 475px; */
    overflow-y: auto;
    gap: 8px;
  }
  
  .asset-box {
    background-color: #1a0e24;
    width: 19%;
    padding: 15px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    border-radius: 6px;
    cursor: pointer;
  }
  
  .asset-header {
    display: flex;
    align-items: center;
  }
  
  .asset-logo {
    width: 40px;
    height: 40px;
    border-radius: 50%;
  }
  
  .asset-info {
    flex: 1;
    margin-left: 10px;
  }
  
  .asset-name {
    font-size: 14px;
    color: #dcdcdc;
    display: block;
    margin-bottom: 3px;
  }
  
  .asset-value-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  
  .asset-value {
    font-size: 12px;
    color: #29F4A3;
    margin-right: 10px;
  }
  
  .asset-change {
    font-size: 12px;
    color: #29F4A3;
  }
  
  .asset-change.negative {
    color: #ff4291;
  }
  
  .asset-volatility {
    font-size: 12px;
    color: #aaaaaa;
    margin-top: 10px;
    color: #9f99a3;
  }
  
  .progress-bar-container {
    background-color: #000; 
    height: 5px;
    margin-top: 12px;
    border-radius: 2px;
    width: 100%;
    overflow: hidden;
  }
  
  .progress-bar {
    height: 100%;
    background: linear-gradient(to right, 
    rgb(41, 244, 163), 
    rgb(59, 178, 231), 
    rgb(162, 51, 231), 
    rgb(255, 65, 145));
    transition: width 0.5s ease-in-out;
  }
  
  .progress-bar.progress-incomplete {
    box-shadow: inset -2px 0 5px rgba(0, 0, 0, 0.5); 
  }
  
  /* Latest Bets */
  .latest-bets-scrollable {
    max-height: 324px;
    overflow-y: auto;
  }
  
  .bet-row {
    display: flex;
    align-items: center;
    margin-bottom: 5px;
    padding: 10px;
  }
  
  /* Couleur de fond alternée */
  .bg-dark {
    background-color: #0e0018;
  }
  
  .bg-darker {
    background-color: #1a0c24;
  }
  
  .bet-player {
    display: flex;
    align-items: center;
    width: 45%;
  }
  
  .user-image {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 10px;
  }
  
  .bet-player-info {
    display: flex;
    flex-direction: column;
  }
  
  .bet-user-name {
    color: #9f99a3;
    font-size: 12px;
  }
  
  .bet-amount {
    color: #ffffff;
    font-size: 12px;
  }
  
  .bet-pnl {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 38%;
  }
  
  .bet-pnl-label {
    color: #b7b7b7;
    font-size: 12px;
  }
  
  .bet-pnl-value {
    color: #29f4a3;
    font-size: 12px;
  }
  
  .bet-pnl-value.negative {
    color: #ff4291;
  }
  
  .bet-asset {
    display: flex;
    justify-content: flex-end;
    width: 12%;
  }
  
  .asset-icon {
    position: relative;
    width: 20px;
    height: 20px;
  }
  
  .asset-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  .trend-arrow {
    position: absolute;
    top: 3px;
    left: 27px;
    font-size: 12px;
  }
  
  .trend-arrow.up {
    color: #29f4a3;
  }
  
  .trend-arrow.down {
    color: #ff4291;
  }
  
  
  /* Section 2: How it works */
  .how-it-works {
    padding: 50px 20px;
    background-color: #0e0018;
    background: url('/images/bullzimage/chart-final.svg') no-repeat center center/cover;
    background-size: 120%; 
    /* max-width: 1108px; */
    margin: 0 auto;
    padding-bottom: 110px;
  }
  .how-it-works h1{
   font-size: 35px;
  }
  .how-it-works h1 span{
   column-rule: #29f4a3;
  }
  
  /* Titre de la section */
  .section-title {
    font-size: 24px;
    font-weight: 500;
    text-align: left;
    margin-bottom: 30px;
    color: rgb(211, 211, 211);
    font-size: 20px;
  }
  
  /* Containers */
  .boxes {
    display: flex;
    flex-wrap: wrap;
  }
  
  .box {
    background-color: #16081f;
    padding: 15px;
    width: 19%;
    margin: 0 5px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    min-height: 104px;
  }
  
  .box h3 {
    font-size: 15px;
    margin-bottom: 0px;
    margin-top: 8px;
    color: #9f99a3;
  }
  
  .box-content {
    display: flex;
    align-items: center;
  }
  
  
  .box-content .description {
    font-size: 12px;
    line-height: 1;
    margin: 0;
    flex: 1;
    color: #9f99a3;
    margin-top: 13px;
  }
  
  .box-content p {
    font-size: 11px;
    line-height: 1.4;
    margin: 0;
    flex: 1; 
    color: rgb(211, 211, 211);
  }
  
  .box-content .mini-image {
    width: auto;
    height: 22px;
    margin-right: 12px;
    margin-top: 10px;
  }
  
  .video-placeholder {
    position: relative;
    text-align: center;
  }
  
  .device-image {
    position: relative;
    width: 97%;
    max-width: 820px;
    margin: 0 auto;
    border: 5px solid #494052;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 0 40px rgba(255, 65, 144, 0.04),
                0 0 80px rgba(255, 65, 144, 0.069),
                0 0 160px rgba(255, 65, 144, 0.05),
                0 0 200px rgba(255, 65, 144, 0.039);
  }
  
  .gameplay-video {
    width: 100%;
    height: auto;
    display: block;
  }
  
  .image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); 
    z-index: 2; 
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    opacity: 0.85;
  }
  
  .cta-button-demo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #29f4a3;
    border: none;
    padding: 15px 40px;
    cursor: pointer;
    border-radius: 5px;
    font-weight: bold;
    font-size: 18px;
    color: #fff;
    z-index: 3; 
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
  }
  
  .cta-button-demo:hover {
    background-color: #22e091;
  }
  
  
  .video-thumbnail {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; 
    cursor: pointer;
    z-index: 1; 
  }
  
  
  
  .play-icon {
    font-size: 132px;
    color: #ff4291b3;
    z-index: 3;
    pointer-events: none;
      font-family: Arial, sans-serif; /* Utilisez une police qui ne convertit pas les caractères en emoji */
  }
  
  
  /* REWARDS SECTION */
  .assets-rewards {
    background-color: #19132f;
    padding: 50px 20px;
    border-radius: 10px;
  }
  
  .section-centent-rewards {
    display: flex;
    overflow: hidden; 
    max-width: 1108px;
    margin: 0 auto;
  }
  
  /* Contenu côté gauche */
  .assets-rewards-left {
    width: 60%;
    padding-right: 20px;
  }
  
  .assets-rewards-left h1 {
    font-size: 55px !important;
    margin: 0;
    line-height: 1.4;
    color: #fff;
    margin-bottom: 20px;
  }
  
  .assets-rewards-left h1 span {
    color: #29f4a3;
  }
  
  /* Liste des récompenses */
  .rewards-list {
    list-style-type: none;
    padding: 0;
    margin: 0 0 20px;
  }
  
  .rewards-list li {
    font-size: 18px;
    color: rgb(219, 219, 219);
    margin-bottom: 10px;
    line-height: 1.6;
  }
  
  .rewards-list li::before {
    content: "•";
    margin-right: 10px;
    color: #ff4291;
    font-size: 20px;
  }
  
  /* Bouton CTA */
  .cta-button {
    display: inline-block;
    padding: 12px 24px;
    background-color: #29f4a3;
    color: #000;
    font-size: 16px;
    font-weight: bold;
    border: none;
    border-radius: 5px;
    text-transform: uppercase;
    cursor: pointer;
  }
  
  .cta-button:hover {
    background-color: #25c186;
  }
  
  /* Contenu côté droit */
  .assets-rewards-right {
    width: 40%;
  }
  
  .description-boxes-rewards img {
    position: absolute;
    width: 550px;
    height: auto;
    bottom: -85px; 
    right: 0px; 
    transform: translate(0, 0); 
    border-radius: 10px;
    z-index: 9999;
  }
  
  .eagle-mobile{
    display: none;
  }
  
  .description-boxes-rewards {
    background: url("/images/bullzimage/safe-17.jpg") no-repeat;
    background-position: 910px 49%;
    background-size: 520px;
    padding: 85px 20px;
    background-color: #170028;
  }
  
  .description-boxes {
    background-color: #0e0018;
    padding: 50px 20px;
  }
  
  .section-content {
    max-width: 1108px;
    margin: 0 auto;
  }
  
  .section-content h1 {
    font-size: 35px;
    line-height: 1.4;
    color: #fff;
    margin-bottom: 20px;
    margin-top: 0px;
  }
  .section-content h1 span {
    color:#29F4A3;
  }
  
  .section-content p {
    font-size: 14px;
    color: rgb(219, 219, 219);
    margin-bottom: 40px;
    font-weight: 300;
  }
  .section-content p span{
    color: #25c186;
    text-decoration: underline;
    cursor: pointer;
  }
  
  .boxes-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  
  .box-sec3 {
    background-color: #120a23;
    border-radius: 8px;
    overflow: hidden;
    width: 32%; /* 3 boxes par ligne */
    margin-bottom: 20px;
  }
  
  .box-sec3 {
    display: flex;
  }
  
  .box-image {
    width: 51%;
  }
  
  .box-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  .box-content-sec3 {
    width: 66.66%; /* 2/3 de la box */
    padding: 15px;
    display: flex;
    flex-direction: column;
  }
  
  .box-content-sec3 h3 {
    font-size: 15px;
    margin-bottom: 10px;
    color: rgb(219, 219, 219);
    margin-bottom: 5px;
  }
  
  .box-content-sec3 p {
    font-size: 12px;
    margin-bottom: 10px;
    color: rgb(219, 219, 219);
    margin-top: 0px;
  }
  
  .box-content-sec3 .mini-image {
    width: 160px;
    height: auto;
    margin-top: 5px;
  }
  
  
  /* Section 5: CTA Section */
  .cta-section {
    background: url("/images/bullzimage/tel1.png") no-repeat;
    background-position: 795px 49%;
    background-size: 520px;
    padding: 85px 20px;
    background-color: #170028;
  }
  
  .cta-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 1108px;
    margin: 0 auto;
    z-index: 2; 
  }
  
  .hero-content-end {
    max-width: 600px;
  }
  
  .cta-image {
    position: absolute;
    bottom: 0; 
   right: 89px;;
    max-width: 50%; 
    height: auto; 
    z-index: 1; 
    opacity: 0.9; 
  }
  
  .cta-btn-telegram {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #229ed9;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    border-radius: 5px;
    font-weight: bold;
    font-size: 18px;
    margin-top: 16px;
    color: white;
  }
  
  .cta-btn-telegram .cta-link {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: white;
    gap: 10px;
  }
  
  .cta-btn-telegram .cta-icon {
    width: 25px;
    height: 20px;
  }
  
  .hero-content-end h1 {
    font-size: 50px;
    margin-bottom: 10px;
    margin-top: 0px;
  }
  
  .hero-content-end h1 span {
    color: #29f4a3;
  }
  
  .hero-content-end p {
    font-size: 25px;
    font-weight: bold;
    margin-top: 20px;
  }
  
  .hero-content-end p span {
    color: #ff4291;
  }
  
  .cta-btn-telegram a {
    text-decoration: none; 
    color: inherit; 
  }
  
  
  
  /* Footer */
  .footer {
    background-color: #0e0018;
    padding: 70px;
  }
  
  .footer-nav {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
  }
  .footer-nav span{
    font-size: 11px;
  }
  
  .footer-nav a {
    margin: 0 10px;
    color: #25c186;
    font-size: 11px;
  }
  
  .footer-texts {
    text-align: center;
    margin-bottom: 20px;
    max-width: 700px;
    margin: 0 auto;
  }
  
  .footer-texts p{
    font-size: 11px;
    color: #959595;
  }
  .footer-separator {
    border: none;
    border-top: 1px solid #959595;
    margin-bottom: 20px;
    margin-top: 20px;
    width: 50%;
  }
  
  .payment-icons {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
  }
  
  .payment-icons img {
    margin: 0 10px;
    width: 50px;
    height: 100%;
  }
  
  
  /* Media Queries */
  
  @media (max-width: 1024px) {
    .boxes {
      flex-wrap: wrap;
    }
  
    .box {
      width: 30%;
      margin-bottom: 20px;
    }
  
    .box-content .description br {
      display: none;
    }
  
    .boxes-grid {
      justify-content: space-between;
    }
  
    .box-sec3 {
      width: 48%; /* 2 boxes par ligne */
    }
  
    .asset-box {
      width: 48%; /* 2 assets par ligne */
    }
  
    .assets-rewards {
      flex-direction: column;
      padding: 40px 20px;
    }
  
    .assets-rewards-left {
      width: 100%;
      padding-right: 0;
      text-align: left;
    }
  
    .assets-rewards-left h1 {
      font-size: 26px;
    }
  
    .rewards-list li {
      font-size: 20px;
    }
  
    .assets-rewards-right {
      width: 100%;
      display: none; /* Cache l'image */
    }
  
    .responsive-break {
      display: none;
    }
  
    .cta-btn a {
      text-decoration: none;
    }
  }
  
  @media (max-width: 768px) {
    .navbar-buttons {
      display: block;
    }
  
    .boxes {
      flex-direction: column;
      align-items: center;
    }
  
    .box {
      width: 80%;
      margin-bottom: 20px;
    }
  
    .box-content .description br {
      display: none;
    }
  
    .boxes-grid {
      flex-direction: column;
      align-items: center;
    }
  
    .box-sec3 {
      width: 100%;
      margin-bottom: 10px;
    }
  
    .box-image {
      width: 40%;
    }
  
    .box-content-sec3 {
      width: 60%;
    }
  
    .assets-bets {
      flex-direction: column;
    }
  
    .assets,
    .latest-bets {
      width: 100%;
      margin: 0;
    }
  
  
    .asset-box {
      width: 100%; /* 1 asset par ligne */
    }
  
    .assets-rewards {
      padding: 30px 15px;
    }
  
    .assets-rewards-left h1 {
      font-size: 35px;
    }
  
    .rewards-list li {
      font-size: 18px;
    }
  
    .cta-button {
      font-size: 14px;
      padding: 10px 20px;
    }
  
    .responsive-break {
      display: none;
    }
  
    .cta-btn a {
      text-decoration: none;
      color: inherit;
    }
  
    .section-content-player-top,
    .section-content-player-bottom {
      flex-direction: column; 
      gap: 15px;
    }
  
    .assets-grid{
      max-height: 475px;
    }
  }
  video::-webkit-media-controls {
    display: none !important;
  }
  
  @media (max-width: 480px) {
  
    .navbar-logo .logo-horizontal {
      display: none !important;
    }
  
    .navbar-logo .logo-vertical {
      display: block !important;
      height: 38px; 
      width: auto;
    }
  
    .play-icon{
      font-size: 83px;
      display: flex;
    }
  
    .cta-section {
      background-position: 223px 132px;
      background-size: 223px;
      padding: 50px 20px;
  }
  
  .hero-section {
    height: 1000px;
    background-size: cover;
    background-position: left;
  }
  
    .assets-grid{
      max-height: 475px;
    }
  
  
    .hero-content {
      margin-top: 25px;
  }
  
  .section-content-container-title img {
    width: 85%;
  }
  
    .navbar .navbar-buttons .btn {
      margin-left: 10px;
      display: flex;
      align-items: center; 
      justify-content: center; 
      padding: 10px 15px;
      font-weight: bold;
      cursor: pointer;
      font-size: 14px; 
    }
  
    .section-content-player h2 { 
      font-size: 20px;
    }
  
    .how-it-works {
      padding-bottom: 65px;
  }
  
    .hero-absolute-image {
      top: 93px;
      left: 197px;
      width: 258px;
      display: none;
    }
  
    .box {
      width: 100%;
      margin-bottom: 15px;
    }
  
    .box-content .description br {
      display: none;
    }
  
    .box-content .mini-image {
      width: auto;
      height: 35px;
      margin-left: 10px;
    }
    .assets-bets {
      flex-direction: column;
      padding: 50px 20px;
  }
  
  .description-boxes-last-container-advantage {
    padding: 50px 20px;
  }
  
    .description-boxes-last-container {
      padding: 50px 20px;
  }
    .box-image {
      width: 35%;
    }
  
    .description-boxes-rewards {
      background-position: 250px 210px;
      background-size: 130px;
      padding: 50px 20px;
  }
  
    .section-content h1 {
      font-size: 26px;
    }
  
    .box-content-sec3 {
      width: 65%;
    }
  
    .box-content-sec3 h3 {
      font-size: 16px;
    }
  
    .box-content-sec3 p {
      font-size: 14px;
    }
  
    .box-content-sec3 .mini-image {
      width: 230px;
    }
  
    .how-it-works h1 {
      font-size: 26px;
    }
  
    .box h3 {
      font-size: 16px;
  }
  
  .assets h2 {
    font-size: 20px;
  }
  
  .box-content .description {
    font-size: 14px;
  }
  
  
    .slide{
      margin-top: 0;
  
    }
    .slide-text {
  
      z-index: 2;
      padding: 0px;
      width: 100%; 
    }
    
    .slide-text h1 {
      font-size: 30px !important;
    }
    .hero-text-bottom {
      font-size: 18px;
      
  }
    .slide-image-container {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%); /* Centre l'image */
      z-index: 1; /* Derrière le texte */
      display: none;
    }
  
    .hero-absolute-image {
      max-width: 80%; /* Taille réduite pour mobile */
      height: auto;
      display: block;
    }
  
    .hero-content-deux h1 {
      font-size: 20px;
  }
    .hero-content p {
      font-size: 18px;
      z-index: 9999;
    }
  
    .hero-content-end {
      padding: 0px 0px;
    }
  
    .hero-content-end h1 {
      font-size: 36px;
    }
  
    .hero-content-end p {
      font-size: 21px;
      margin-bottom: 6px;
      margin-top: 8px;
    }
  
    .cta-btn {
      font-size: 14px;
      padding: 12px 24px;
    }
  
    .cta-button-demo {
      padding: 10px 30px;
      font-size: 16px;
    }
  
    .cta-absolute-image {
      top: 190px;
      right: 0px;
      left: 199px;
      width: 220px;
    }
    .assets-rewards {
      padding: 20px 10px;
  
    }
  
    .assets-rewards-left {
      width: 100%;
      position: relative;
      
    }
  
    .assets-rewards-left img {
      position: absolute;
      display: block;
      width: 212px;
      bottom: -48px;
      right: 7px;
    }
  
    .assets-rewards-left h1 {
      font-size: 26px;
    }
  
    .rewards-list li {
      font-size: 16px;
    }
  
    .cta-button {
      font-size: 12px;
      padding: 8px 15px;
    }
  
    .responsive-break {
      display: none;
    }
  
    .section-content-container {
      flex-direction: column;
      flex-wrap: wrap;
    }
  
    .cta-btn a {
      text-decoration: none;
      color: inherit;
    }
  
    .section-content-container-title-players {
      padding: 20px; /* Réduction du padding sur mobile */
    }
  
    .section-content-container-title-players h1 {
      font-size: 14px; /* Taille de la police ajustée */
    }
  
    .section-content-container-title-players span {
      font-size: 12px; /* Ajustement du texte */
    }
  
    .section-content-container-title-players img {
      width: 100%; /* S'adapte à la largeur du conteneur */
    }
  
    .level-advantages {
      grid-template-columns: repeat(2, 1fr); /* 2 colonnes pour mobile */
      gap: 8px; /* Réduction de l'espacement */
    }
  }
  
  @media (max-width: 390px) {
    
    .navbar-logo img {
      height: 20px; 
      width: auto;
    }
  
    .hero-absolute-image {
      top: 85px;
      left: 160px;
      width: 240px;
      display: none;
    }
  
    .box {
      width: 100%;
      margin-bottom: 12px; /* Réduction de l'espacement */
    }
  
    .box-content .description br {
      display: none;
    }
  
    .box-content .mini-image {
      width: auto;
      height: 32px; /* Ajustement de la hauteur */
      margin-left: 8px;
    }
  
    .box-image {
      width: 33%;
    }
  
    .box-content-sec3 {
      width: 67%;
    }
  
    .box-content-sec3 h3 {
      font-size: 15px; /* Police légèrement réduite */
    }
  
    .box-content-sec3 p {
      font-size: 13px; /* Police ajustée */
    }
  
    .box-content-sec3 .mini-image {
      width: 220px;
    }
  
    .section-title {
      font-size: 19px;
    }
  
    .box h3 {
      font-size: 17px;
    }
  
    .box-content .description {
      font-size: 15px;
    }
  
    .hero-content h1 {
      font-size: 35px;
      margin-top: 0px;
    }
  
    .hero-content p {
      font-size: 13px;
      z-index: 9999;
    }
  
    .hero-content-end {
      padding: 0px 18px;
    }
  
    .hero-content-end h1 {
      font-size: 34px;
    }
  
    .hero-content-end p {
      font-size: 17px;
      margin-bottom: 6px;
      margin-top: 7px;
    }
  
    .cta-btn {
      font-size: 15px; /* Ajustement de la taille */
      padding: 11px 22px;
    }
  
    .cta-button-demo {
      padding: 9px 28px;
      font-size: 15px;
    }
  
    .cta-absolute-image {
      top: 234px;
      right: 0px;
      left: 170px;
      width: 192px;
    }
  
    .navbar-logo img {
      height: 38px; /* Taille ajustée */
    }
  
    .assets-rewards {
      padding: 15px 10px;
    }
  
    .assets-rewards-left h1 {
      font-size: 22px;
    }
  
    .rewards-list li {
      font-size: 14px;
    }
  
    .cta-button {
      font-size: 12px;
      padding: 8px 12px;
    }
  
    .responsive-break {
      display: none;
    }
  
    .cta-btn a {
      text-decoration: none;
      color: inherit;
    }
  }
  
  
  /* Formulaire */
  
  
  
  /* Conteneur principal du formulaire */
  .affiliateExportContentForm {
    background: #361c44;
    border-radius: 12px; 
    padding: 20px 30px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1); 
    max-width: 470px; 
    margin: 0 auto; 
  }
  
  /* Titre du formulaire */
  .affiliateExportContentForm h2 {
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    color: #ffffff; 
    margin-bottom: 20px;
  }
  
  /* Champs d'entrée */
  .affiliateExportContentForm input[type="text"],
  .affiliateExportContentForm input[type="password"],
  .affiliateExportContentForm select {
    width: 100%; 
    padding: 15px 15px;
    margin-bottom: 15px; 
    border-radius: 5px; 
    font-size: 12px; 
    color: #333; 
    background: #dfdfdf; 
    box-sizing: border-box;
    transition: border 0.3s ease;
    border: none;
  }
  
  .affiliateExportContentForm input[type="text"]:focus,
  .affiliateExportContentForm input[type="password"]:focus,
  .affiliateExportContentForm select:focus {
    border: 1px solid #007bff;
    outline: none;
  }
  
  /* Bouton d'envoi */
  .affiliateExportContentForm button[type="submit"] {
    width: 100%; 
    padding: 12px 15px;
    background: #29f4a2; 
    color: black;
    font-size: 16px; 
    font-weight: bold;
    border: none;
    border-radius: 5px; 
    cursor: pointer; 
    transition: background 0.3s ease;
  }
  
  .affiliateExportContentForm button[type="submit"]:hover {
  }
  
  /* Messages d'erreur */
  .affiliateExportContentForm .required_input {
    font-size: 12px;
    color: #e74c3c;
    margin-top: -10px;
    margin-bottom: 10px;
    display: block;
  }
  
  /* Espacement spécifique pour téléphone */
  .affiliateExportContentForm .formtelid {
    display: flex;
    gap: 10px;
  }
  
  .affiliateExportContentForm .idtel {
    flex: 1;
  }
  
  .affiliateExportContentForm .telnum {
    flex: 2;
  }
  

  .terms-container {
    max-width: 800px;
    margin: 20px auto;
    padding: 20px;
    font-family: Arial, sans-serif;
    line-height: 1.6;
    color: #c6c6c6;
  }
  
  .terms-container h1 {
    font-size: 2rem;
      color: #808080;
    margin-bottom: 20px;
  }
  
  .terms-container h2 {
    font-size: 1.5rem;
      color: #808080;
    margin-top: 20px;
    margin-bottom: 10px;
  }
  
  .terms-container p {
    margin-bottom: 15px;
  }
  
  .terms-container a {
    color: #007bff;
    text-decoration: none;
  }
  
  .terms-container a:hover {
    text-decoration: underline;
  }