/* Reset y estilo básico */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Smooth scroll per tutti gli elementi HTML */
html {
  scroll-behavior: smooth;
  background-color: #fff;
  max-width: 100vw;
  overflow-x: hidden;
  height: auto;
}

body {
  font-family: "Inter-Regular", Helvetica;
  background-color: #fff;
  padding-top: 5rem;
}

.body-container {
  overflow: hidden!important;
  margin: 0 auto!important;
  display: block;
  background-color: #fff;
}

.body-container-bottom {
  background-color: #fff;
  margin: auto;
}

.body-container-top {
  width: 100vw;
}

.max-screen-width {
  max-width: 1450px!important;
}

.hidden {
  visibility: hidden !important;
}

.divider {
  height: 1px;
  background-color: #eee;
  margin: 20px 0;
}

.download-button-clear {
  text-decoration: none;
  color: black;
  cursor: pointer;
}

.download-button-clear:hover {
  text-decoration: none;
  color: white;
  cursor: pointer;
}

/* Navbar */
.navbar {
  display: flex;
  align-items: center;
  padding: 1rem;
  background-color: white;
  position: fixed;
  /* Cambiado a fixed */
  top: 0;
  /* Asegura que esté en la parte superior */
  left: 0;
  /* Asegura que esté alineada a la izquierda */
  width: 100%;
  /* Asegura que ocupe todo el ancho */
  z-index: 1000;
  /* Asegura que esté por encima de otros elementos */
  box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
}

.burger-icon {
  font-size: 2rem;
  cursor: pointer;
}

.company-icon {
  font-size: 2rem;
  cursor: pointer;
  margin: auto;
  overflow: hidden;
  width: 43px;
}

.download-icon {
  font-size: 2rem;
  cursor: pointer;
}

.download-button-clear {
  display: grid;
  place-items: center;
  font-size: 20px;
  font-weight: 700;
  float: right;
  letter-spacing: 0;
  line-height: normal;
  color: black;
  text-align: center;
  vertical-align: middle;
  background-image: url('../img/rectangle-76-Clear.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 437px;
  height: 68px;
}

.download-button-clear:hover {
  color: white;
  background-image: url('../img/rectangle-76.png');
}

.download-button {
  display: grid;
  place-items: center;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: normal;
  color: white;
  text-align: center;
  vertical-align: middle;
  background-image: url(../img/rectangle-76.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 540px;
  height: 78px;
  border: 0px;
  background-color: transparent;
  border-radius: 40px;
}

.download-button:hover {
  color: black;
  border: 0px;
  background-image: url('../img/rectangle-76-Clear.png');
}

/* Menú oculto por defecto */
.menu-desktop {
  position: fixed;
  top: 3.5rem;
  /* Ajusta para que esté justo debajo del icono */
  left: 0;
  width: 270px;
  /* Puedes ajustar el ancho según prefieras */
  background-color: white;
  display: none;
  flex-direction: column;
  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.1);
  z-index: 20000;
  cursor: pointer;
}

.menu-mobile {
  position: fixed;
  top: 80px;
  /* Ajusta para que esté justo debajo del icono */
  left: 0;
  right: 0;
  /* Puedes ajustar el ancho según prefieras */
  background-color: white;
  display: none;
  flex-direction: column;
  box-shadow: inset 0px 5px 0px 0px rgba(0, 0, 0, 0.1);
  z-index: 300;
  cursor: pointer;
}

.pointer {
  cursor: pointer;
}

.menu-background {
    visibility: hidden;
}

.menu-background {
  cursor: pointer;
}

.menu-background.active {
  position: fixed;
  visibility: visible;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0.5;
  background-color: black;
  z-index: 1000;
}

.menu-element {
  cursor: pointer;
  height: 70px;
  padding: 10px;
  cursor: pointer;
  display: flex;
  margin-top: 5px;
  margin-bottom: 5px;
}

.menu-link {
  text-decoration: none;
  color: black;
  font-size: 17px;
  cursor: pointer;
  margin-left: 25px;
  margin-top: 15px;
}

.active-link {
  box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
}

/* Menú desplegable cuando se activa */
.menu-mobile.active {
  display: flex;
  height: 400px;
  animation: slideDown 0.3s ease forwards;
}

.menu-desktop.active {
  display: flex;
  height: 200px;
  animation: slideDown 0.3s ease forwards;
}

@keyframes slideDown {
  from {
    height: 0;
    overflow: hidden;
  }
  to {
    height: 400px;
    overflow: hidden;
  }
}

.thereport {
  display: block;
  margin: auto;
  background-color: #460073;
  color: white;
}



.keythemes {
  background-color: white;
  color: black;
  float: left;
  font-size: 22px;
  display: block;
  width: 100%;
}

.keythemes h3 {
  padding-left: 10%;
  font-size: 50px;
  padding-bottom: 50px;
}

.keythemes h4 {
  padding-bottom: 50px;
}


.hero {
  display: block;
  float: left;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: white;
  background-image: url('../img/susan-wilkinson-Bn_7fBoM7Bg.png');
  /* Asegúrate de reemplazar con la ruta correcta */
  background-size: cover;
  background-position: center;
  width: 100%;
  padding: 10%;
  /* Espacio interno para centrar el contenido */
}

.hero h1 {
  font-family: "Inter-ExtraBold", Helvetica;
  font-weight: 800;
  font-size: 64px;
  height: 250px;
  text-align: left;
  max-width: 900px;
}

.hero .container {
  display: block;
  height: 250px;
  margin: auto;
}

.button-container {
  width: 100%;
  border-radius: 40px;
  overflow: hidden;
}

.hero .sub-title {
  font-family: "Inter-ExtraBold", Helvetica;
  font-weight: 800;
  font-size: 48px;
  height: 132px;
  margin: auto;
  text-align: left;
  margin: auto;
}

.download-button-slide {
  width: 40px;
  height: 40px;
  float: right;
}

.text3 {
  margin-top: 10%;
  height: 75px;
  display: grid;
  float: left;
  font-size: 18px;
}


.text3 p {
  display: block;
  float: left;
  width: 98%;
}


/* Altura máxima para dispositivos móviles */
@media (max-width: 767px) {
  .hero {
    height: 453px;
  }

  .show-on-desktop {
    display: none;
  }

  .report-title {
    margin-top: 30px;
    width: 100%;
    padding: 15px;
    top: 0;
    left: 0;
    font-family: "Inter-Light", Helvetica;
    font-weight: 200;
    color: white;
    font-size: 12px;
    letter-spacing: 0;
    line-height: normal;
    font-size: 15px;
  }

  .word-space-3 {
    word-spacing: 3px;
  }

  .keys-title {
    font-weight: 600;
  }

  .subtitle {
    font-size: 16px !important;
  }

  .report-text {
    font-weight: 200 !important;
  }
 
  .hero h1 {
    font-size: 36px;
    /* Ajusta el tamaño del texto */
    width: 100%;
    height: 150px;
    margin-top: 50px;
  }

  .hero .container {
    display: block;
    margin: auto;
    width: 100%;
    height: 100px;
  }

  .download-button-clear,
  .download-button {
    width: 100%;
    margin: auto;
    height: 50px;
  }

  .hero .sub-title {
    font-size: 20px;
    width: 100%;
    height: 60px;
    margin: auto;
    text-align: left;
  }

  .quotes {
    display: block;
    float: left;
    width: 100%;
    margin: 0px;
    padding: 20px 0;
    background-color: #E6DCFF;
    color: black;
  }

  .quotes .label {
    width: 280px;
    margin: auto;
    vertical-align: bottom;
  }

  .quotes .label .text-wrapper {
    width: 280px;
    top: 0;
    left: 0;
    font-family: "Inter-Bold", Helvetica;
    font-weight: 700;
    color: #000000;
    font-size: 24px;
    letter-spacing: 0;
    line-height: normal;
  }

  .img-open-quotes {
    width: 50px;
  }

  .img-close-quotes {
    float: right;
    margin-top: -10px;
    width: 50px;
  }

  .quotes .open-quotes {
    display: block;
    font-family: monospace, Helvetica;
    font-weight: 800;
    font-size: 100px;
    height: 50px;
    overflow: hidden;
    letter-spacing: 0;
    text-align: left;
    line-height: normal;
    color: #A100FF;
    margin-top: 20px;
    margin-left: -7px;
  }

  .quotes .close-quotes {
    font-family: monospace, Helvetica;
    font-weight: 800;
    font-size: 100px;
    letter-spacing: 0;
    text-align: right;
    color: #A100FF;
    margin-top: -28px;
  }

  .thereport {
    display: block;
    float: left;
    width: 100%;
    margin: 0px;
    padding-top: 7%;
    min-height: 650px;
  }

  .thereport .label {
    width: 85%;
    height: 126px;
    margin: auto;
    vertical-align: middle;
  }

  .thereport .label .text-wrapper {
    width: 100%;
    padding: 15px;
    top: 0;
    left: 0;
    font-family: "Inter-Regular", Helvetica;
    color: white;
    font-size: 15px;
    font-weight: 400;
    letter-spacing: 0;
    line-height: normal;
  }

  .socialmediamentions {
    background-color: white;
    color: black;
    float: left;
    font-size: 15px;
    padding: 12%;
    display: block;
    width: 100%;
    margin: 0px;
    height: 736px;
  }

  .socialmediamentions h3 {
    font-size: 15px;
    padding-top: 25px;
    padding-bottom: 20px;
  }

  .socialmediamentions p {
    padding-bottom: 50px;
  }

  .keythemes {
    background-color: white;
    color: black;
    float: left;
    font-size: 15px;
    display: block;
    width: 100%;
    margin: 0px;
  }

  .keythemes h3 {
    font-size: 15px;
    padding-top: 25px;
    padding-bottom: 20px;
    padding-left: 12%;
  }


  .slideshow-container {
    position: relative;
    width: 100%;
    height: 726px;
    overflow: hidden;
  }

  .slide {

    position: absolute;
    width: 358px;
    height: 716;
    overflow: hidden;
    display: block;
  }

  .slide-content {
    max-width: 358px;
    max-height: 400px;
    display: block;
    align-items: center;
    justify-content: center;
    background-color: #E6DCFF;
  }

  .slide-image {
    max-width: 358px;
    max-height: 358px;
    float: right;
    display: block;
  }

  .share-container {
    margin: -5px auto 0;
    text-align: center;
  }

  .share-img {
    height: 50px;
  }
  
  .share-link {
    display: inline-block;
    margin: -10px 5px;
  }

  .text {
    max-width: 358px;
    max-height: 400px;
    padding: 35px;
    font-size: 14px;
    float: left;
    display: block;
    background-color: #E6DCFF;
  }

  .text H4 {
    padding-bottom: 35px;
  }

  .text2 {
    width: 100%;
    height: 180px;
    display: block;
    background-color: #E6DCFF;
  }


  .nav-buttons {
    bottom: 10px;
    text-align: right;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-right: 20px
    
  }

  #counter {
    background-color: rgba(255, 255, 255, 0.8);
    border: none;
    padding: 0px 15px;
    cursor: pointer;
    font-size: 20px;
    border-radius: 5px;
    font-weight: 600;
  }

  .prev,
  .next {
    background-color: rgba(255, 255, 255, 0.8);
    border: none;
    cursor: pointer;
    font-size: 45px;
    border-radius: 5px;
  }

  .prev:hover,
  .next:hover {
    background-color: rgba(255, 255, 255, 1);
    /* Cambia el fondo al pasar el mouse */
  }

  .prev:hover,
  .next:hover {
    background-color: rgba(255, 255, 255, 1);
  }

  .slide.active {
    display: block;
    /* Muestra la diapositiva activa */
    transform: scale(1);
    /* Escala al 100% */
    z-index: 2;
    /* Asegura que esté en el frente */
    box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 1px, rgba(0, 0, 0, 0.07) 0px 2px 2px, rgba(0, 0, 0, 0.07) 0px 4px 4px, rgba(0, 0, 0, 0.07) 0px 8px 8px, rgba(0, 0, 0, 0.07) 0px 16px 16px;
  }

  .slide:nth-child(2) {
    transform: scale(0.9);
    z-index: 1;
    margin-left: 50%;
    margin-top: 10px;
  }

  .slide:nth-child(3) {
    transform: scale(0.6);
    z-index: 0;
    margin-top: 20px;
    margin-left: 150px;
  }

  .download-report {
    display: block;
    float: left;
    width: 100%;
    background-color: white;
    overflow: hidden;
  }

  .download-report .right {
    display: block;
    float: right;
    width: 100%;
    background-color: white;
  }

  .download-report .right h3 {
    display: block;
    padding-left: 12%;
    padding-right: 13%;
    margin-top: 100px;
    margin-bottom: 50px;
    width: 437px;
    background-color: white;
  }

  .download-report .right p {
    display: block;
    padding-left: 12%;
    padding-right: 12%;
    margin-top: 50px;
    margin-bottom: 50px;
    text-align: justify;
    background-color: white;
  }

  .download-report .right button {
    margin: 50px auto;
    height: 50px;
    width: 280px;
  }

  .download-report .left {
    display: block;
    float: left;
    width: 100%;
    padding: 0px;
    text-align: center;
  }

  .contact-text {
    display: block;
    margin: auto;
    margin-top: 50px;
    margin-bottom: 50px;
    padding-left: 12%;
    padding-right: 12%;
    text-align: left;
    background-color: white;
  }

  .download-report .left img {
    display: block;
    margin: auto;
    min-width: 343px;
    max-width: 380px;
    padding-top: 12%;
  }

  .footer {
    width: 100%;
    display: block;
    float: left;
    padding: 25px;
    text-align: right;
    background-color: #460073;
  }

  .footer a {
    padding: 2%;
  }

  .chart-wrap {
    position: relative;
    /* Define el contenedor como referencia para posicionamiento absoluto */
    width: 100%;
    margin: auto;
    text-align: center;
  }

  #chart {
    width: 100%;
    /* Asegura que el gráfico ocupe todo el espacio del contenedor */
    height: 100%;
    /* Ajusta al tamaño del contenedor */
  }

  .chart-center-text {
    position: absolute;
    /* Superpone el texto sobre el gráfico */
    display: flex;
    top: 55%;
    /* Centra verticalmente */
    left: 50%;
    /* Centra horizontalmente */
    transform: translate(-50%, -50%);
    /* Ajusta el texto al centro exacto */
    font-size: 16px;
    /* Tamaño del texto */
    font-weight: bold;
    /* Opcional: Negrita */
    color: #000;
    /* Color del texto */
    text-align: center;
    /* Centra texto alineado si es multilinea */
    pointer-events: none;
    /* Evita que interfiera con interacciones del gráfico */
  }

  .chart-center-text h1 {

    font-size: 42px;
    line-height: normal;
  }

  .chart-center-text b {

    font-size: 20px;
    line-height: normal;
  }

  .chart-inside-text {
    font-size: 20px;
    line-height: normal;
    margin-top: -35px;
  }
}


/* Altura máxima para pantallas de escritorio */
@media (min-width: 768px) {

  .body-container-bottom {
      padding: 0 20px;
     
  }

  .hero {
    height: 958px;
  }

  .show-on-mobile {
    display: none;
  }

  .quotes {
    display: flex !important;
    justify-content: center;
    align-items: center;
    float: left;
    width: 40%;
    margin: auto;
    padding: 0px;
    height: 836px;
    background-color: #E6DCFF;
    color: black;
    vertical-align: middle;
  }

  .quotes .label {
    width: 263px;
    height: 370px;
    margin: auto;
    vertical-align: bottom;
  }

  .quotes .label .text-wrapper {
    width: 300px;
    height: 336px;
    top: 0;
    left: 0;
    font-family: "Inter-Bold", Helvetica;
    font-weight: 700;
    color: #000000;
    font-size: 40px;
    letter-spacing: 0;
    line-height: normal;
  }

  .quotes .label .text-wrapper1 {
    width: 263px;
    height: 336px;
    top: 0;
    left: 0;
    font-family: "Inter-Light", Helvetica;
    font-weight: 700;
    color: #000000;
    font-size: 40px;
    letter-spacing: 0;
    line-height: normal;
  }

  .img-open-quotes {
    margin-left: -35px;
  }

  .img-close-quotes {
    float: right;
    margin-top: -20px;
  }


  .quotes .open-quotes {
    display: block;
    font-family: "Inter-ExtraBold", Helvetica;
    font-weight: 800;
    font-size: 140px;
    height: 160px;
    overflow: hidden;
    letter-spacing: 0;
    text-align: left;
    line-height: normal;
    color: #A100FF;
  }

  .quotes .close-quotes {
    display: block;
    font-family: "Inter-ExtraBold", Helvetica;
    font-weight: 800;
    font-size: 140px;
    height: 160px;
    margin-top: -80px;
    overflow: hidden;
    letter-spacing: 0;
    text-align: right;
    line-height: normal;
    color: #A100FF;
  }

  .keys-title {
    font-size: 50px;
    font-weight: 600;;
  }

  .thereport {
    display: flex !important;
    justify-content: center;
    align-items: center;
    float: right;
    width: 60%;
    margin: 0px;
    height: 836px;
  }

  .thereport .label {
    width: 80%;
    margin: auto;
    vertical-align: middle;
  }

  .thereport .label .text-wrapper {
    padding: 25px;
    top: 0;
    left: 0;
    font-family: "Inter-Regular", Helvetica;
    color: white;
    font-size: 18px;
    font-weight: 400;
    letter-spacing: 0;
    line-height: normal;
  }

  .thereport .label .text-wrapper b {
    font-weight: 800;
    font-family: "Inter-ExtraBold", Helvetica;
  }

  .thereport .label .text-wrapper1 {
    width: 80%;
    padding: 25px;
    top: 0;
    left: 0;
    font-family: "Inter-Light", Helvetica;
    color: white;
    font-size: 15px;
    font-weight: 300;
    letter-spacing: 0;
    line-height: normal;
  }

  .socialmediamentions {
    background-color: white;
    color: black;
    padding-left: 10%;
    float: left;
    font-size: 22px;
    padding-right: 10%;
    display: block;
  }

  .m-top-section {
    margin-top: 70px;
  }

  .m-bottom-section {
    margin-bottom: 70px;
  }

  .socialmediamentions h3 {
    font-size: 50px;
    padding-top: 100px;
    padding-bottom: 50px;
  }

  .socialmediamentions p {
    padding-bottom: 50px;
  }

  .download-report {
    display: block;
    float: left;
    width: 100%;
    background-color: white;
  }

  .download-report .right {
    display: block;
    padding-left: 5%;
    float: right;
    width: 50%;
    text-align: justify;
    background-color: white;
  }

  .download-report .right h3 {
    display: block;
    margin-top: 100px;
    margin-bottom: 50px;
    width: 100%;
    background-color: white;
  }

  .download-report .right p {
    display: block;
    margin-top: 100px;
    margin-bottom: 130px;
    width: 100%;
    padding-right: 10%;
    text-align: justify;
    background-color: white;
    font-size: 20px
  }

  .download-report .left {
    display: block;
    float: left;
    width: 50%;
    padding: 0px;
    text-align: center;
  }

  .contact-text {
    display: block;
    margin-top: 150px;
    margin-bottom: 200px;
    width: 437px;
    text-align: left;
    background-color: white;
  }

  .contact-button {
    margin-top: 50px;
  }

  .contact-first {
    font-weight: 600;
    font-style: italic;
  }

  .download-report .left img {
    display: block;
    margin: auto;
    height: 700px;
  }

  .download-report .right {
    display: block;
    float: right;
    width: 50%;
    text-align: justify;
    overflow: hidden;
  }

  .download-report .left {
    display: block;
    float: left;
    width: 50%;
    padding: 0px;
    text-align: center;
    overflow: hidden;
  }

  .footer {
    width: 100vw;
    display: block;
    float: left;
    height: 170px;
    padding: 25px;
    text-align: right;
    background-color: #460073;
  }

  .share-container {
    margin: 35px;
  }

  .share-img {
    height: 60px;
  }

  .footer a {
    padding: 0.5%;
  }

  .chart-wrap {
    position: relative;
    /* Define el contenedor como referencia para posicionamiento absoluto */
    width: 600px;
    margin: auto;
    text-align: center;
  }

  #chart {
    width: 100%;
    /* Asegura que el gráfico ocupe todo el espacio del contenedor */
    height: 100%;
    /* Ajusta al tamaño del contenedor */
  }

  .chart-center-text {
    position: absolute;
    /* Superpone el texto sobre el gráfico */
    display: flex;
    top: 50%;
    /* Centra verticalmente */
    left: 50%;
    /* Centra horizontalmente */
    transform: translate(-50%, -50%);
    /* Ajusta el texto al centro exacto */
    font-size: 40px;
    /* Tamaño del texto */
    font-weight: bold;
    /* Opcional: Negrita */
    color: #000;
    /* Color del texto */
    text-align: center;
    /* Centra texto alineado si es multilinea */
    pointer-events: none;
    /* Evita que interfiera con interacciones del gráfico */
  }

  .chart-center-text h1 {

    font-size: 80px;
    line-height: normal;
  }

  .chart-center-text b {

    font-size: 40px;
    line-height: normal;
  }

  .chart-center-text p {
    font-size: 24px;
    line-height: normal;
  }


  .slideshow-container {
    position: relative;
    width: 100%;
    height: 675px;
    overflow: hidden;
  }

  .slide {

    position: absolute;
    width: 1450px;
    height: 100%;
    overflow: hidden;
  }

  .slide-content {
    display: flex;
    background-color: #E6DCFF;
    box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 1px, rgba(0, 0, 0, 0.07) 0px 2px 2px, rgba(0, 0, 0, 0.07) 0px 4px 4px, rgba(0, 0, 0, 0.07) 0px 8px 8px, rgba(0, 0, 0, 0.07) 0px 16px 16px;
    width: 75%;
    height: 100%;
  }

  .slide-image {
    display: block;
    width: 50%;
    float: left;
  }

  .text {
    display: grid;
    float: left;
    place-items: bottom;
    vertical-align: bottom;
    width: 80%;
    font-size: 18px;
    padding: 3%;
    font-size: 22px;
  }

  .text h4 {
    padding-top: 20%;
    padding-bottom: 50px;
    font-size: 24px;
  }

  .text2 {
    margin-top: 50px;
    height: 150px;
    display: grid;
    float: left;
    font-size: 18px;
  }

  .nav-buttons {
    bottom: 10px;
    text-align: right;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-right: 20px
    
  }

  #counter {
    background-color: rgba(255, 255, 255, 0.8);
    border: none;
    padding: 0px 15px;
    cursor: pointer;
    font-size: 20px;
    border-radius: 5px;
    font-weight: 600;
  }

  .prev,
  .next {
    background-color: rgba(255, 255, 255, 0.8);
    border: none;
    cursor: pointer;
    font-size: 45px;
    border-radius: 5px;
  }
  .prev:hover,
  .next:hover {
    background-color: rgba(255, 255, 255, 1);
    /* Cambia el fondo al pasar el mouse */
  }

  .prev:hover,
  .next:hover {
    background-color: rgba(255, 255, 255, 1);
  }

  .slide.active {
    display: block;
    /* Muestra la diapositiva activa */
    transform: scale(1);
    /* Escala al 100% */
    z-index: 2;
    /* Asegura que esté en el frente */
  }

  .slide:nth-child(2) {
    transform: scale(0.8);
    z-index: 1;
    margin-left: 900px;
  }

  .slide:nth-child(3) {
    transform: scale(0.6);
    z-index: 0;
    margin-left: 1100px;
  }
}

/* Modal styles */
.modal {
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Stay in place */
  z-index: 1000;
  /* Sit on top */
  left: 0;
  top: 0;
  width: 100%;
  /* Full width */
  height: 100%;
  /* Full height */
  background-color: rgba(0, 0, 0, 0.5);
  /* Black background with opacity */
}

/* Modal content */
.modal-content {
  background-color: #fff;
  margin: 15% auto;
  /* Centered vertically and horizontally */
  padding: 20px;
  border-radius: 8px;
  width: 80%;
  /* Adjust width as needed */
  max-width: 500px;
  /* Max width for larger screens */
  text-align: center;
  position: relative;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Close button */
.close {
  position: absolute;
  top: 10px;
  right: 20px;
  color: #aaa;
  font-size: 24px;
  font-weight: bold;
  background: none;
  border: none;
  cursor: pointer;
}

.close:hover {
  color: #000;
}

@media screen and (max-width: 869px) {
  .img-open-quotes {
    margin: 0;
  }

  .img-close-quotes {
    margin: 0 20px 0 0 ;
  }
  
}

.pie {
  flex: 1 0 225px;
  max-width: 325px;
  aspect-ratio: 1;
  background-image:
    radial-gradient(white 0 40%,
      transparent 40% 70% white 70%),
    conic-gradient(#A100FF 36%,
      #DCAFFF 20%,
      #BE82FF 20%,
      #7500C0 12%,
      #B455AA 9%,
      #1B1464 4%);
}