body {
  //  background-image: url("/img/main-banner-1M4G3-contato-heighter.png");
  background-color: #f4f1eb;
  background-image: linear-gradient(
    to top right,
    #e6ddcc42,
    100%,
    #e7d7b69c 10%
  );
  background-size: 10vw;
}

/* modal color background outside */
dialog::backdrop {
  background-color: rgb(0 0 / 0.3);
  background-color: rgba(34, 31, 0, 0.4);
  background-color: rgba(25, 0, 34, 0.4);
  background: #37003c58;
}

/* modal box settings  */
dialog {
  border: none;
  border-radius: 0.5em;
  box-shadow: #37003c58 10px 10px 20px;
  max-width: 300px;
}

/* BTN TOP BAR */
.btn-top-bar {
  display: flex;
  margin: 0 auto;
  margin-left: 250px;
  align-items: center;
  justify-content: left;
  border-radius: 10px;
  padding-top: 20px;
}
/* BTN TOP SETTINGS */
.link-text {
  background: rgba(255, 255, 255, 0.399);
  border: 0.1rem #e5e0e792 solid;
  border-radius: 50px;
  color: #e3005b;
  font-size: 1px;
  padding: 2px;
  margin: 0;
  margin-left: 300px;
  box-shadow: #37003c58 3px 8px 15px;
  cursor: pointer;
}
.link-text:hover {
  border-color: #e3005b;
}

/* BTN BOTTOM BAR */
.btn-bar {
  display: flex;
  margin: 0 auto;
  justify-content: right;
}
/* BTN BOTTOM CLOSE */
.close {
  background: white;
  border: 0.1rem #e5e0e792 solid;
  border-radius: 50px;
  color: #160018;
  font-size: 1px;
  padding: 2px;
  margin-right: 20px;
  justify-content: left;
  box-shadow: #37003c58 3px 8px 15px;
  cursor: pointer;
}
.close:hover {
  border-color: #160018;
}

/*    MODAL    1  */
#modal1 {
  max-width: 600px;
}
#modal1 h2 {
  font-family: Poppins, Helvetica, Arial, sans-serif;
  margin: 15px 40px 10px 40px;
  font-size: 1.1rem;
  font-weight: 500;
  color: #37003c;
}
#modal1 p {
  font-family: Poppins, Helvetica, Arial, sans-serif;
  margin: 20px 45px 20px 40px;
  font-size: 1rem;
  font-weight: 100;
  color: #525252;
}
/* LIST MODAL 1*/
#modal1 ul li {
  font-family: Poppins, Helvetica, Arial, sans-serif;
  font-size: 0.9rem;
  color: #37003c;
  text-decoration: none;
  list-style-type: circle;
  margin: 0 40px 10px 80px;
}

/*    MODAL    2  */
#modal2 {
  max-width: 300px;
}
#modal2 h2 {
  font-family: Poppins, Helvetica, Arial, sans-serif;
  margin: 15px 40px 10px 40px;
  font-size: 1.1rem;
  font-weight: 500;
  color: #37003c;
}
#modal2 p {
  font-family: Poppins, Helvetica, Arial, sans-serif;
  margin: 20px 45px 20px 40px;
  font-size: 1rem;
  font-weight: 100;
  color: #525252;
}
/* LIST */
#modal2 ul li {
  font-family: Poppins, Helvetica, Arial, sans-serif;
  font-size: 0.9rem;
  color: #37003c;
  text-decoration: none;
  list-style-type: circle;
  margin: 0 40px 10px 80px;
}

/*    MODAL    3  */
#modal3 {
  max-width: 300px;
}
#modal3 h2 {
  font-family: Poppins, Helvetica, Arial, sans-serif;
  margin: 15px 40px 10px 40px;
  font-size: 1.1rem;
  font-weight: 500;
  color: #37003c;
}
#modal3 p {
  font-family: Poppins, Helvetica, Arial, sans-serif;
  margin: 20px 45px 20px 40px;
  font-size: 1rem;
  font-weight: 100;
  color: #525252;
}
/* LIST MODAL 3*/
#modal3 ul li {
  font-family: Poppins, Helvetica, Arial, sans-serif;
  font-size: 0.9rem;
  color: #37003c;
  text-decoration: none;
  list-style-type: circle;
  margin: 0 40px 10px 80px;
}

/*    MODAL    4  */
#modal4 {
  max-width: 300px;
}
#modal4 h2 {
  font-family: Poppins, Helvetica, Arial, sans-serif;
  margin: 15px 40px 10px 40px;
  font-size: 1.1rem;
  font-weight: 500;
  color: #37003c;
}
#modal4 p {
  font-family: Poppins, Helvetica, Arial, sans-serif;
  margin: 20px 45px 20px 40px;
  font-size: 1rem;
  font-weight: 100;
  color: #525252;
}
/* LIST MODAL 4*/
#modal4 ul li {
  font-family: Poppins, Helvetica, Arial, sans-serif;
  font-size: 0.9rem;
  color: #37003c;
  text-decoration: none;
  list-style-type: circle;
  margin: 0 40px 10px 80px;
}

/*    MODAL    5  */
#modal5 {
  max-width: 300px;
}
#modal5 h2 {
  font-family: Poppins, Helvetica, Arial, sans-serif;
  margin: 15px 40px 10px 40px;
  font-size: 1.1rem;
  font-weight: 500;
  color: #37003c;
}
#modal5 p {
  font-family: Poppins, Helvetica, Arial, sans-serif;
  margin: 20px 45px 20px 40px;
  font-size: 1rem;
  font-weight: 100;
  color: #525252;
}
/* LIST MODAL 5 */
#modal5 ul li {
  font-family: Poppins, Helvetica, Arial, sans-serif;
  font-size: 0.9rem;
  color: #37003c;
  text-decoration: none;
  list-style-type: circle;
  margin: 0 40px 10px 80px;
}

/*    MODAL    6  */
#modal6 {
  max-width: 300px;
}
#modal6 h2 {
  font-family: Poppins, Helvetica, Arial, sans-serif;
  margin: 15px 40px 10px 40px;
  font-size: 1.1rem;
  font-weight: 500;
  color: #37003c;
}
#modal6 p {
  font-family: Poppins, Helvetica, Arial, sans-serif;
  margin: 20px 45px 20px 40px;
  font-size: 1rem;
  font-weight: 100;
  color: #525252;
}
/* LIST MODAL 6 */
#modal6 ul li {
  font-family: Poppins, Helvetica, Arial, sans-serif;
  font-size: 0.9rem;
  color: #37003c;
  text-decoration: none;
  list-style-type: circle;
  margin: 0 40px 10px 80px;
}

/*    MODAL    7  */
#modal7 {
  max-width: 300px;
}
#modal7 h2 {
  font-family: Poppins, Helvetica, Arial, sans-serif;
  margin: 15px 40px 10px 40px;
  font-size: 1.1rem;
  font-weight: 500;
  color: #37003c;
}
#modal7 p {
  font-family: Poppins, Helvetica, Arial, sans-serif;
  margin: 20px 45px 20px 40px;
  font-size: 1rem;
  font-weight: 100;
  color: #525252;
}
/* LIST MODAL 7*/
#modal7 ul li {
  font-family: Poppins, Helvetica, Arial, sans-serif;
  font-size: 0.9rem;
  color: #37003c;
  text-decoration: none;
  list-style-type: circle;
  margin: 0 40px 10px 80px;
}

/*    MODAL    8  */
#modal8 {
  max-width: 300px;
}
#modal8 h2 {
  font-family: Poppins, Helvetica, Arial, sans-serif;
  margin: 15px 40px 10px 40px;
  font-size: 1.1rem;
  font-weight: 500;
  color: #37003c;
}
#modal8 p {
  font-family: Poppins, Helvetica, Arial, sans-serif;
  margin: 20px 45px 20px 40px;
  font-size: 1rem;
  font-weight: 100;
  color: #525252;
}
/* LIST MODAL 8*/
#modal8 ul li {
  font-family: Poppins, Helvetica, Arial, sans-serif;
  font-size: 0.9rem;
  color: #37003c;
  text-decoration: none;
  list-style-type: circle;
  margin: 0 40px 10px 80px;
}