html {
  font-size: 20px; /* px signifie 'pixels': la taille de base pour la police est désormais 10 pixels de haut  */
  font-family: "Inter", Arial, Helvetica, sans-serif;
  /*height: 100%;*/
}

body {
  margin: 0;
  padding: 0;
  background-color: rgb(255, 255, 255);
  display: flex;
  flex-direction: column;
  overflow-x: hidden;       /* garde le scroll horizontal bloqué */
  overflow-y: auto;         /* permet le scroll vertical */
  user-select: none !important;
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  padding-top: 100px;
}

@media (max-width: 1000px) {
  body {
    background-color: rgb(110, 138, 163);
  }

}


.content {
  flex: 1;
  padding: 0px;
}

@font-face {
  font-family : Quicksand;
  src: url(fonts/Quicksand.otf);
  font-weight: normal;
}

@font-face {
  font-family : Quicksand;
  src: url(fonts/Quicksand_Bold.otf);
  font-weight: bold;
}

table { 
  border-collapse: collapse; 
  border: 0px solid rgb(0, 0, 0);
}

table td{ 
  border: 0px solid rgb(255, 5, 5);
}


/* STYLE DU HEADER */
/* HEADER FIXE */
.header {
  text-align: center;
  font-size: 15px;
  color: rgb(110, 138, 163);

  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;

  background-color: white;
  box-shadow: 0px 3px 10px -2px rgba(0,0,0,0.7);

  min-height: 100px;                 /* ⬅️ remplace height */
  transition: transform 0.8s ease;   /* même animation */
  transform: translateY(0);
}


/* =====================
   LIGNE UNIQUE (PC)
===================== */
.header-row {
  display: flex;
  align-items: center;
  gap: 16px;

  padding: 10px 16px;
  white-space: nowrap; /* force 1 ligne sur PC */
}

/* =====================
   LOGOS
===================== */
.logo-main {
  max-width: 280px;
  height: auto;
}

.header-partner {
  display: flex;
  flex-direction: column;   /* texte au-dessus, logo en dessous */
  align-items: center;      /* ⬅️ centrage horizontal */
  text-align: center;
  font-size: 11px;
}

.logo-partner {
  max-width: 90px;
  display: block;
}

/* =====================
   NAVIGATION
===================== */
.header-nav {
  flex: 1;                     /* ⬅️ PREND TOUTE LA LARGEUR DISPO */
  display: flex;
  align-items: center;

  justify-content: space-between; /* ⬅️ RÉPARTITION SUR TOUTE LA LARGEUR */
  gap: 0px;

  flex-wrap: nowrap;
  white-space: nowrap;
}

.titrebandeau {
  font-size: 25px;
}


@media (min-width: 1000px) {
  .header-nav a:first-child {
    margin-left: 100px;
  }

    .header-nav a:last-child {
    margin-right: 30px;
  }

  .titrebandeau {
  margin-left: 100px;
}

/* HEADER MASQUÉ (scroll down) */
.header.hidden {
  transform: translateY(-110%);      /* ⬅️ clé : hauteur dynamique */
}
}

/* =====================
   MOBILE
===================== */
@media (max-width: 1000px) {

  .header {
    min-height: 10px;   /* ⬅️ au lieu de 100px */
  }

  .header-row {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    white-space: normal;
    padding: 4px 8px;
  }

  /* Ligne 1 : logo gauche / partner droite */
  .header-logo {
    flex: 0 0 auto;
  }

  .header-partner {
    margin-left: auto;
    text-align: right;
    font-size: 10px;
  }

  /* 🔥 Ligne 2 : navigation pleine largeur */
  .header-nav {
    flex: 0 0 100%;              /* prend toute la ligne */
    display: flex;
    justify-content: space-between; /* ⬅️ répartit les boutons */
    align-items: center;
    flex-wrap: wrap;
    margin-top: 0px;
    padding: 0 0px;             /* marge gauche/droite */
  }

  /* Boutons : largeur flexible */
  .header-nav a {
    flex: 0 0 auto;              /* ⬅️ permet l’étirement */
    text-align: center;
  }

  .header-nav a:nth-child(3) {
    margin-left: 5px;
    text-align: left;
  }

  .header-nav a:last-child {
    margin-right: 5px;
    text-align: right;
  }

    /* bouton logiciel centré */
  .header-nav .btn-logiciel {
    margin: 0px auto;     /* ⬅️ centre horizontalement */
    text-align: center;
  }

  /* Optionnel : réduire les logos */
  .logo-main {
    max-width: 190px;
  }

  .logo-partner {
    max-width: 70px;
  }

  body {
    padding-top: 10px;
  }

  .titrebandeau {
  font-size: 16px;
}

}



/* STYLE DE LA SECTION 1*/

/* =========================
   HERO — STYLES PC (rappel)
========================= */
.hero-title {
  font-size: 50px;
  color: #fff;
}

.hero-highlight {
  color: rgb(215, 255, 136);
  font-size: 70px;
}

.hero-subtitle {
  font-size: 25px;
  color: #fff;
}

.hero-image img {
  max-width: 150%;
}


/* =========================
   TABLETTE — ANNULATION ANIMATION
========================= */
@media (max-width: 1400px) {
  
    .anim-scroll-left {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  
      .anim-scroll-right {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* =========================
   MOBILE — AFFICHAGE EN COLONNE
========================= */
@media (max-width: 1000px) {
  


  /* 🔥 Sort la table du layout table */
  table,
  tr,
  td {
    display: block !important;
    width: 100vw !important;
    margin: 0;
    padding: 0;
  }

  /* le td prend toute la largeur DISPONIBLE */
  td {
    text-align: center;
  }

  tr td {
    margin-bottom: 0px; /* espace fin entre cellules */
  }

   tr {
    margin-bottom: 10px;
  }

  /* le contenu est réellement centré */
  .cell-inner1 {
    margin: 0 auto;        /* centré */
    padding-left: 10px;    /* ⬅️ marge gauche */
    padding-right: 10px;   /* ⬅️ marge droite */
    box-sizing: border-box;
  }

    /* Pour éviter d'avoir des champs trop larges sur tablette */
  .cell-inner2 {
    margin: 0 auto;        /* centré */
    padding-left: 10px;    /* ⬅️ marge gauche */
    padding-right: 10px;   /* ⬅️ marge droite */
    box-sizing: border-box;
    max-width: 500px;
  }

  /* 🔥 SUPPRIME LES CELLULES VIDES */
  table.hero td:empty {
    display: none !important;
  }

  /* Masque les colonnes vides */
  table.hero td[width="15%"] {
    display: none !important;
  }

  /* Image centrée */
  table.hero .hero-image img {
    display: block !important;
    margin: 0 auto !important;
    width: min(90%, 420px) !important;
    height: auto !important;
  }

  .hero-title {
  font-size: 25px;
  color: #fff;
  }

  .hero-highlight {
    color: rgb(215, 255, 136);
    font-size: 30px;
  }

  /* Sous-titre centré */
  table.hero .hero-subtitle {
    padding: 20px 0px !important;
  }
}

/* STYLE DE LA SECTION 2*/

.section-title-cell {
  height: 200px;
  font-size: 40px;
  vertical-align: middle;
  white-space: nowrap;
  
}

.section-title-logo {
  width: 280px;
  vertical-align: middle;
  margin: 5px auto 0px;        /* logo au-dessus */
}

.section-title-text {
  vertical-align: middle;
}


@media (max-width: 1000px) {

  /* Masque les colonnes vides */
  table.hero td[width="100%"] {
    display: none !important;
  }

  .section-title-cell {
    height: auto;              /* ⬅️ libère la hauteur */
    padding: 16px 0;
    white-space: normal;
    width: 100% !important;
    margin: 0 auto !important;
    line-height: 1;
  }

  .section-title-logo {
    margin: 5px auto 0px;        /* logo au-dessus */
    width: 150px;              /* plus compact */
  }

  .section-title-text {
    font-size: 25px;
  }

    .section-title-cell2 {
    padding: 20px 0px;
    line-height: 1;
  }


  
}



.tablesup {
  text-align: center;
  font-size: 15px;

  color: rgb(110, 138, 163);
  height: 100px;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: white;
  z-index: 1000;
  box-shadow: 0px 3px 10px -2px rgba(0,0,0,0.7);
  border-collapse: collapse;
  transition: transform 0.8s ease; /* animation fluide */
}

/* quand masqué */
.tablesup.hidden {
  transform: translateY(-120px); /* sort vers le haut */
}




.tableinf1 { 
  background:  rgb(110, 138, 163);
  text-align:center; 
  font-size: 15px; 
  color: rgb(255, 255, 255); 
}

.tableinf2 { 
  background:  rgb(255, 255, 255);
  color: rgb(110, 138, 163);
  text-align:center;
}

.tablelog {
  width: 500px;  
  background:  rgb(110, 138, 163);
  border-radius: 10px;
  text-align:center; 
  font-size: 20px; 
  color: rgb(255, 255, 255); 
}

.table-container1 {
  display: inline-block;
  background: white;
  border-radius: 15px;
  border: 0px solid rgb(110,138,163);
  padding: 0px; /* espace entre le bord et la table */
  box-shadow: 0px 8px 20px rgba(0,0,0,0.7); /* ombre plus visible */
  width: fit-content; /* s’adapte au contenu */
  margin: 20px auto; /* centre sur la page */
}

@media (max-width: 1000px) {
  .table-container1 {
    display: none !important;
  }

  .tablelog { 
  border-radius: 0px;
}

}

.tabledetail1 {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  color: rgb(255, 255, 255);
  font-size: 15px;
}

.calqueppal { 
  background-color: rgb(255, 255, 255);
  position: fixed;
  display:block;
  margin-left: auto;
  margin-right: auto;
  top: 100px;
  bottom: 5px;

  text-align: left;
  overflow-y: auto;  /*Permet le défilement vertical */
  border: 0px solid rgb(245, 5, 5);

  z-index: 10;

  user-select: none !important;
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
}

@media (max-width: 1000px) {
  .calqueppal { 
   position: relative !important;
   top: 90px;
  }
}


.trcomptetitre  { 
  height: 40px;
  /*border-bottom: 2px solid rgb(99, 198, 196);*/
  background: linear-gradient(to bottom, rgb(255, 255, 255) 97%, rgb(99, 198, 196));
  background-color: rgb(255, 255, 255);
  font-size: 20px;
  position: -webkit-sticky !important;
  position: sticky !important;
  top: 0 !important;
  text-align: center;
  z-index: 999; /* Important ! */
}


.trcomptetitre td  { 
  padding: 20px 10px 10px 10px !important; /* Force le padding */
  z-index: 999;
}

.trcompte td,
.trcompte2 td,
.trcompte3 td {
  font-size: 15px; 
  padding: 10px 10px 10px 10px !important; /* Force le padding */
  text-align: justify; /* avant on Forcait la justification avec important*/
  vertical-align: middle;
}

.trcompte2 td {
  padding: 4px 10px !important; /* Force le padding */
}

.trcompte3 td {
  line-height: 1.8; 
}

@media (max-width: 1000px) {
  .trcomptetitre {
    position: static !important;   /* annule sticky */
    top: auto !important;
    z-index: auto !important;
    height: auto; 
  }

  .trcomptetitre td {
    display: block;
    width: 100% !important;
    padding: 20px 0px 10px 0px !important; /* Force le padding */
  }

  .trcompte td,
  .trcompte2 td,
  .trcompte3 td {
  padding: 0px 0px !important; /* Force le padding */
  }

  .trcompte3 td {
    line-height: 1.9; 
  } 

  .bouton_abo_mob {
  text-align: center !important;
  }

}




.tableCB {
    width: 280px;                 /* tu peux ajuster */
    background: #92bac4;          /* gris clair */
    border-radius: 12px;          /* angles arrondis */
    border: 0px solid #ccc;       /* bordure fine */
    padding: 12px;                /* espace interne */
    box-shadow: 0 2px 6px rgba(0,0,0,0.35); /* effet carte CB */
     
}

.tableCB td {
    padding: 4px 0;               /* aère les lignes */
    font-family: monospace;       /* style "numéro de CB" */
    font-size: 15px;
    color: #333;
    line-height: 1.2;
}

@media (max-width: 1000px) {
  .tableCB {
    width: 75% !important;      /* ⬅️ clé */
    max-width: 250px !important;
    margin: 0 auto !important;  /* centrée */ 
    padding: 12px 0px 0px 12px;   
  }

  .tableCB tr {
    width: 100% !important;
    min-width: 100% !important;
  }

  .tableCB td {
    width: 100% !important;
    box-sizing: border-box;
  }
}

.cb-wrapper {
    position: relative;
    display: inline-block;
    text-decoration: none;   /* enlève souligné */
}

/* Bandeau caché par défaut */
.cb-hover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(110, 138, 163,0.75);
    color: rgb(164,203,106);
    font-size: 18px;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;

    border-radius: 10px;

    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none; /* clic passe au-dessous */
}

/* Affichage au survol */
.cb-wrapper:hover .cb-hover {
    opacity: 1;
}

.chip {
    width: 36px;
    height: 26px;
    border-radius: 6px;
    background: linear-gradient(135deg, #d9d5c7, #b7b29c);
    border: 2px solid #7f7b68;
    margin-bottom: 5px;
}

.tableCB:hover{
  cursor: pointer;
}

.trtexte1 { 
  color: rgb(100, 198, 196); 
  font-size: 20px; 
  font-weight: bold
}

.trtexte2 { 
  color: rgb(110,138,163); 
  font-size: 50px; 
  font-weight: bold;
  text-shadow: 1px 1px 1px rgba(0,0,0,0.6);
}

.trtexte3 { 
  color: rgb(255, 255, 255);
  font-size: 25px; 
  font-weight: bold
}

.trtexte4 { 
  font-size: 16px;
  color: rgb(255, 255, 255);
  line-height: 1.5;  
}


.trtexte5,
.trtexte10,
.trtexte11{ 
  font-size: 16px;
  color: rgb(110,138,163);
  line-height: 1.5;  
}

.trtexte6 {
  color: rgb(110,138,163); 
  font-size: 16px; 
  font-weight: bold
}

.trtexte7 {
  font-size: 10px; 
}

.trtexte8 {
  font-size: 15px; 
}

.trtexte9 {
  color: rgb(255, 255, 255);
  text-decoration: none;
  display: inline-block;
  font-size: 15px;
  cursor: pointer;
  font-weight: bold
}

.trtexte9:hover{
  color: rgb(164,203,106);
}

.trtexte12{ 
  font-size: 16px;
  color: rgb(110,138,163);
  line-height: 1.5;
  text-align: center;  
}

@media (max-width: 1000px) {
  .trtexte1 { 
    font-size: 15px; 
  }

  .trtexte2 { 
    font-size: 40px; 
  }

  .trtexte4 {
    text-align: justify;
  }

  .trtexte6 { 
    font-size: 13px; 
  }

  .trtexte10 {
    text-align: justify;
  }

  .trtexte11 {
    text-align: center;
  }

  .trtexte12 {
    color: rgb(255, 255, 255);
  }
}

.textehighlight1 { 
  position: relative;
  z-index: 0;
  color: rgb(215, 255, 136);
  font-weight: bold;
  text-decoration: none;
}


.textehighlight1x::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0.1em;
  width: 100%;
  height: 0.8em;
  background:  rgb(215, 255, 136);
  z-index: -1;
  transform: rotate(-1.5deg);
  border-radius: 0.4em;
  opacity: 0.7;
}

.textebullet { 
  list-style-type: disc; 
  margin: 0px; 
  padding-left: 20px;
}

ul.textebullet li {
  margin-bottom: 8px; /* espace vertical entre chaque <li> */
}



.titre1 {
  border: none;
  color: rgb(110, 138, 163);
  text-align: left;
  text-decoration: none;
  display: inline-block;
  font-size: 18px;
  margin: 4px 2px;
  user-select: none !important;
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
}



.bouton-inactif,
.bouton-inactif2 {
  border: none;
  color: rgb(110, 138, 163);
  background-color: rgb(255, 255, 255);
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  cursor: pointer;
  font-weight: bold;
  line-height: 1.5; 
}

.bouton-inactif2 {
  color: rgb(100, 198, 196);
}

.bouton-inactif:hover,
.bouton-inactif2:hover{
  color: rgb(164,203,106);
  font-weight: bold;
}

.image1 {
  width: 500px;
  background-color: white;
  border-radius: 15px;
}

.image1mob {
  display: none;
}

.affich_tab {
  display: none;
}

.affich_mob {
  display: none;
}


@media (max-width: 1400px) {

  .image1 {
    display: none !important;
  }

  .image1mob {
    display: block;
    width: 500px;
    margin: 0 auto;          /* ⬅️ CENTRAGE HORIZONTAL */
    background-color: white;
    border-radius: 15px;
  }

}

@media (max-width: 1400px) {

  .affich_tab {
    display: block;
  }

}

@media (max-width: 1000px) {
  .bouton-inactif {
    font-size: 15px;
  }
  .bouton-inactif2 {
    font-size: 15px;
  }

  .image1 {
    display: none !important;
  }

  .image1mob {
    display: block;
    width: 100%;
    margin: 0 auto;          /* ⬅️ CENTRAGE HORIZONTAL */
    background-color: white;
    border-radius: 15px;
    max-width: 500px;
  }

  .affich_mob {
    display: block;
  }

  .pc-only {
    display: none !important;
  }

}

.bouton-inactif3 {
  border: none;
  color: #fff;
  background-color: rgb(110, 138, 163);
 /*background: linear-gradient(to bottom, rgb(255, 255, 255), rgb(110, 138, 163) 6%);*/
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;

  width: 120px;
  height: 50px; /* 👈 même hauteur pour tous les boutons */

  display: inline-flex;
  flex-direction: column; /* 👈 nécessaire pour centrer verticalement plusieurs lignes */
  justify-content: center; /* 👈 centre verticalement */
  align-items: center;      /* 👈 centre horizontalement */
  text-align: center;

  vertical-align: middle; /* optionnel */
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.45);
  line-height: 1.2; 
}

.bouton-inactif3:hover{
  color: rgb(164,203,106);
}

.bouton-inactif4 {
  border: none;
  color: rgb(255, 255, 255);
  background-color: rgb(110, 138, 163);
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 14px;
  cursor: pointer;
  font-weight: bold;
}

.bouton-inactif4:hover{
  color: rgb(164,203,106);
  font-weight: bold;
}

.bouton-inactif5 {
  border: none;
  color: #fff;
  background-color: rgb(110, 138, 163);
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;

  width: 120px;
  height: 30px; /* 👈 même hauteur pour tous les boutons */

  display: inline-flex;
  flex-direction: column; /* 👈 nécessaire pour centrer verticalement plusieurs lignes */
  justify-content: center; /* 👈 centre verticalement */
  align-items: center;      /* 👈 centre horizontalement */
  text-align: center;

  vertical-align: middle; /* optionnel */
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.45);
}

.bouton-inactif5:hover{
  color: rgb(164,203,106);
}

.anim-img {
  display: inline-block;
  transition: transform 0.3s ease; /* durée et douceur de l'effet */
}

.anim-img:hover {
  transform: scale(1.2); /* agrandit à 120% */
}


.anim-scroll {
  display: inline-block;
  opacity: 0; /* invisible au départ */
  transform: scale(0.1);
  transition: transform 2s ease, opacity 0.6s ease;
}

.anim-scroll.visible {
  opacity: 1;
  transform: scale(1);
}


/* ÉTAT INITIAL (hors écran à gauche + invisible) */
.anim-scroll-left {
  opacity: 0;
  transform: translateX(-300px);
  transition: transform 1.8s ease, opacity 0.8s ease;
  will-change: transform, opacity;
}

/* ÉTAT VISIBLE (revient en place + fade-in) */
.anim-scroll-left.visible {
  opacity: 1;
  transform: translateX(0);
}


/* ÉTAT INITIAL (hors écran à gauche + invisible) */
.anim-scroll-right {
  opacity: 0;
  transform: translateX(300px);
  transition: transform 1.8s ease, opacity 0.8s ease;
  will-change: transform, opacity;
}

/* ÉTAT VISIBLE (revient en place + fade-in) */
.anim-scroll-right.visible {
  opacity: 1;
  transform: translateX(0);
}


/* ÉTAT INITIAL */
.anim-scroll-top {
  display: inline-block;
  opacity: 0;
  transform: translateY(-70px);
  transition: transform 5s ease, opacity 0.8s ease;
  will-change: transform, opacity;
}

@media (max-width: 1000px) {
  .anim-scroll-top { 
    transform: translateY(-40px); 
  }
}

/* ÉTAT VISIBLE (revient en place + fade-in) */
.anim-scroll-top.visible {
  opacity: 1;
  transform: translateY(0);
}


  .faq-container {
    max-width: 800px;
    margin: 0 auto;
  }

  .faq-item {
    border-bottom: 1px solid rgb(100, 198, 196);
    padding: 15px 0;
  }

  .faq-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: left;
    cursor: pointer;
    font-weight: 600;
    color: rgb(255, 255, 255);
    font-size: 18px;
    transition: color 0.2s;
  }

  .faq-question:hover {
    color: rgb(215, 255, 136);
  }

  .faq-answer {
    display: none;
    margin-top: 10px;
    color: #ffffff;
    line-height: 1.5em;
    text-align: justify;
  }

  .faq-item.active .faq-answer {
    display: block;
  }

  .faq-toggle {
    background-color: transparent;
    border: none;
    font-size: 22px;
    font-weight: bold;
    color: rgb(255, 255, 255);
    cursor: pointer;
    transition: transform 0.2s;
  }

  .faq-item.active .faq-toggle {
    transform: rotate(45deg);
    color: rgb(255, 255, 255);
  }

  .main1 {
  cursor: pointer;
}

/* 🔥 FIX iOS INPUT OVERFLOW */
*,
*::before,
*::after {
  box-sizing: border-box;
}

input:not([type="checkbox"]):not([type="radio"]),
textarea,
select {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
}


input[type='text'] {border: none; width: 100%; height: 25px; font-size: 15px; text-align: center;}
input[type='text2'] {border: none; width: 50%; height: 25px; font-size: 15px; text-align: left;}
input[type='email'] {border: none; width: 100%; height: 25px; font-size: 15px; text-align: center;}
input[type='password'] {border: none; width: 100%; height: 25px; font-size: 15px; text-align: center;}
input[type='submit'] {border: none; width: 100%; height: 25px; text-align: center;}

@media (max-width: 1000px) {
  input[type="text"],
  input[type="email"],
  input[type="password"] {
    font-size: 18px;
  }
  input[type="text2"] {
    font-size: 16px;
  }
}

.input-password {
  position: relative;
  width: 100%;
}

.input-password input {
  width: 100%;
  padding-right: 0px; /* ⬅️ espace pour l’œil */
}

.toggle-password {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  user-select: none;
  font-size: 18px;
  color: rgb(110,138,163);
}

.checkbox-line {
  display: flex;           /* pas inline-flex */
  align-items: flex-start; /* checkbox en haut */
  gap: 8px;
}

.popup-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.popup-box {
    background:  rgb(110, 138, 163);
    color: rgb(255, 255, 255);
    padding: 25px 30px;
    border-radius: 10px;
    text-align: center;
    width: 400px;
    box-shadow: 0 10px 30px rgba(255, 255, 255, 0.5);
}

.popup-box h3 {
    margin-top: 0;
}

.popup-box button {
    margin-top: 15px;
    padding: 8px 20px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    background-color: rgb(255, 255, 255);
    color: rgb(110, 138, 163);
    font-weight: bold;
}