/* General reset */
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  list-style: none;
  text-decoration: none;
  scroll-behavior: smooth;
}

:root {
  --h1-font: 7rem;
  --h5-font: 2rem;
  --h2-ih: 5rem;
  --menu-font: 1.3rem;
  --h2-font: 3.5rem;
  --p-big-font: 1.2rem;
  --h3-font: 2.9rem;
  --h4-font: 2.4rem;

  --body-font: "Work Sans", sans-serif;
  --title-font: "Mulish", serif;

  --color-grey: #575757;

  --bg-color: #fcfaff;
  --second-bg-color: #e3cfe2;
  --main-color: #87459a;

  --text-color: #fff;
  --second-color: #666;
  --other-color: #623565;
  --contrast-color: #603f3a;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--body-font);
  background-color: #fefcff;
}

figure {
  margin: 0;
}

article a::after {
  content: none; /* Remove o conteúdo adicional */
  position: static; /* Redefine a posição */
  cursor: auto; /* Remove o cursor de ponteiro */
}

/* Article styling */
article {
  display: flex;
  align-items: center;
  position: relative;
  padding: 0;
  background-color: #fff;
  border-radius: 0 !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

main {
  width: 90vw;
}

/* Image full width */
#ïmg-fullw {
  width: 100vw;
  margin: 0;
}

/* Text description general */
.s1-img-container,
.s1-img-container-full,
.s1-img-container01,
.a2-img-container01 {
  display: flex;
  justify-content: center;
  margin-bottom: 5%;
}

.s1-img-container {
  width: 55vw;
}

.s1-img-container-full,
.s1-img-container01,
.a2-img-container01 {
  width: 100vw;
}

.s1-img-container img,
.s1-img-container-full img,
.s1-img-container01 img,
.a2-img-container01 img {
  width: 100%;
}

.s1-img-container01 img,
.a2-img-container01 img {
  width: 55vw;
}

.s1-text-container-1 p,
.a2-text-container-1 p {
  font-family: var(--body-font);
  font-size: 1.3rem;
  line-height: 180%;
  margin-bottom: 5%;
}

#img01 img {
  width: 85% !important;
}

/*                                                                             Header Article                                                                        */
.bold {
  font-weight: 700;
  width: 10vw;
}

/* General Flexbox Utilities */
.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex-start {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.flex-column {
  display: flex;
  flex-direction: column;
}

.flex-row {
  display: flex;
  flex-direction: row;
}

/* General Text Utilities */
.text-standard {
  font-family: var(--body-font);
  font-size: 1.5rem;
  line-height: 140%;
}

.text-small {
  font-size: 1rem;
}

.text-title {
  font-family: var(--title-font);
  font-size: 4rem;
  font-weight: 800;
}

.text-bold {
  font-weight: 700;
}

/* General Width and Spacing Utilities */
.full-width {
  width: 100vw;
}

.full-height {
  height: 100vh;
}

.half-width {
  width: 50vw;
}

.three-quarter-width {
  width: 70vw;
}

.spacing-small {
  margin: 0;
  padding: 0;
}

.spacing-medium {
  margin: 3%;
  padding: 3%;
}

.spacing-large {
  margin: 5%;
  padding: 5%;
}

/* General Breadcrumb Styles */

/* Breadcrumb */
.breadcrumb {
  height: fit-content;
  width: 100vh;
}

.breadcrumb ul {
  display: flex;
  align-items: center;
}

.breadcrumb_list {
  margin: 0;
  width: 100%;
}

.breadcrumb_list li:not(:first-child) {
  margin: 0px 1.5%;
}

.breadcrumb_list li {
  list-style-type: none;
  display: inline;

  color: #ffffff;
}

.breadcrumb_list a {
  color: #ffffff;
  font-size: 1.3rem;
  text-decoration: none;
  font-family: var(--body-font);
  pointer-events: all;
}

.breadcrumb_list a:hover {
  color: #ffffff;
  font-weight: 600;
}

.li-1:after {
  content: "/";
  padding-left: 1%;
  color: #313030;
}

.wrapper {
  height: 5vh;
}

/* Header Section */
.s1-tile-video {
  width: 100%;
  background-color: #623565;
  padding: 2%;
}
.s1-h-title {
  width: 20vw;
  display: flex;
  flex-direction: column;
}

.s1-h-title h3 {
  font-family: var(--title-font);
  font-size: 6rem;
  font-weight: 800;
  margin-bottom: 2vh;
  padding: 0 5%;

  color: #fff;
}

.s1-back {
  width: 5vw; /* Ajustar conforme necessário */
  height: auto;
}

.s1-back i {
  font-size: 2rem;
  cursor: pointer;
}

.s1-container {
  width: 90vw;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  pointer-events: none; /* Desativa interações no contêiner */
}

.s1-header-case {
  width: 100vw;
  margin-top: 2.5%;
  display: flex;
  flex-direction: row;
  justify-content: center;
}

/* Video and Description Section */
.s1-desc-vi {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin: 0;
  padding: 0;
}

.s1-video {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 80vw;
}

.s1-video img {
  max-width: 100%;
  max-height: 500px;
  object-fit: contain;
}

.s1-description {
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
  padding-bottom: 2%;
  border-radius: 5px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  background-color: #faf6f6;
  width: 60vw;
}

/* Tags   1 */
.s1-tag-container {
  display: flex;
  flex-direction: row;
  gap: 2%;
}

.s1-tag-ux h6,
.s1-tag-product h6 {
  color: #fff;
  font-family: var(--title-font);
  font-size: 1rem;
  margin-bottom: 1vh;
  margin-left: 8% !important;

  width: 8vh;
  height: 4vh;

  border-radius: 24px;

  display: flex;
  justify-content: center;
  align-items: center;

  padding: 2%;
}

.s1-tag-ux h6 {
  background-color: #b47bc2;
  width: 12vh;
  margin-left: 18% !important;
}

.s1-tag-product h6 {
  background-color: #816ec7;
  width: 18vh;

  margin-left: 15% !important;
}

/* Icons */
.s1-img-icon {
  display: flex;
  align-items: center;
  width: 30vw;
}

.s1-img-icon img {
  width: 5%;
  margin-right: 5%;
}

/* Divider */
.divider-icon {
  display: flex;
  align-items: center;
  text-align: center;
  width: 100%;
  margin: 3% 0;
}

.divider-icon::before,
.divider-icon::after {
  content: "";
  flex: 1;
  border-bottom: 2px solid #ddd;
  margin: 0 10px;
}

.divider-icon span {
  font-size: 1.5rem;
  color: #333;
}

/* Text Description */
.s1-txt {
  font-family: var(--body-font);
  font-size: 1.5rem;
  line-height: 140%;
  width: 50vw;
}

.s1-list-desc {
  font-family: var(--body-font);
  font-size: 1.5rem;
  line-height: 140%;
  width: 100%;
  display: flex;
  padding-right: 6%;
  margin-right: 5%;
}

.s1-list-desc ul {
  list-style-type: disc;
  font-family: var(--body-font);
  font-size: 1.3rem;
  line-height: 160%;
  width: 50vw;
  margin-left: 2%;
}

.s1-list-desc ul li {
  display: flex;
  flex-direction: column;
  margin-bottom: 3%;
}

#s1-text-desc {
  font-size: 1.5rem;
  font-weight: 500;
  padding: 5% 5% 3% 5%;
  line-height: 150%;
  font-style: italic;
}

/* Right Text Section */
.s1-desc {
  width: 30%;
}

.s1-desc h6 {
  font-family: var(--title-font);
  font-size: 1.3rem;
  font-weight: 600;
  margin-bottom: 1vh;
}

.s1-desc p {
  font-family: var(--body-font);
  font-size: 1rem;
}

/* Main Section */
main {
  width: 100vw;
  background-color: #fafafa;
}

.s1-img-container,
.s1-img-container-full,
.s1-img-container01 {
  width: 100vw;
  display: flex;
  justify-content: center;
  margin-bottom: 5%;
}

.s1-img-container01 img {
  width: 55vw;
}

/* Wrapper */
.wrapper {
  height: 5vh;
}

#s1-separator {
  background-color: #fff;
  border: 0;
  border-top: 2px double #cec4cc;
  height: 3px;
  margin: 2rem auto;
  width: 80%;
}

/*                                                                     End  Header Article                                                                      */

/*                                                                section 2 -About the mobile app                                                               */

.s2 {
  width: 100vw;
  height: fit-content;
}

.a2-problem-container {
  width: 100%;
  height: 100%;

  display: flex;
  flex-direction: column;
  background-image: url(/Assets/img/Nebula/s2-background.svg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center bottom;
}

.s2-p-title {
  width: 100%;
}

.s2-p-title h3 {
  font-family: var(--title-font);
  font-size: 5rem;
  font-weight: 800;
  color: var(--bg-color);
  padding: 2% 0 0 5%;

  margin-bottom: 3%;
  text-transform: uppercase;
}

.s2-p-graph {
  width: 100%;
  display: flex;
  justify-content: center;

  padding-top: 5%;
  margin-bottom: 3%;
}

.s2-p-graph img {
  width: 80%;
}

.s2-container-card {
  width: 100vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 5%;
  padding-bottom: 5%;
}

.s2-title-card h5 {
  font-family: var(--title-font);
  font-size: var(--h5-font);
  font-weight: 600;
  color: var(--bg-color);
  width: 50vw;
  margin-bottom: 2%;
  text-align: center;
}

.s2-card {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2 colunas de 100px */
  gap: 5%;

  width: 50vw;
}

.s2-box {
  background-color: #fff;
  border-radius: 12px;
}

.s2-box img {
  padding: 5%;
  width: 100%;
}
/*                                                              end - section 2 -About the mobile app                                                               */

/*                                                                  section 3 -Reading matters                                                                 */
.s3 {
  width: 100vw;
  height: fit-content;
  background: linear-gradient(to right, #3aa2aa 50%, #3e3379 50%);
}

.s3-title {
  text-align: center;
  font-size: 3rem;
  color: white;
  margin: 0 0 20px 0;
}

.s3-title h3 {
  font-family: var(--title-font);
  font-size: var(--h2-font);
  font-weight: 800;
  color: var(--bg-color);
  padding: 2% 0 0 5%;
}

.s3-container {
  display: flex;
  height: 100vh; /* Altura total da tela */
  background-image: url(/Assets/img/Nebula/s3-back-left.svg),
    url(/Assets/img/Nebula/s3-back-right.svg);
  background-size: 50% 100%; /* Cada imagem ocupa 50% da largura e 100% da altura */
  background-position: left bottom, right bottom; /* Posiciona as imagens */
  background-repeat: no-repeat; /* Evita que as imagens se repitam */
}

.s3-left,
.s3-right {
  width: 45%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  padding: 10px;
}

.s3-card {
  padding: 15px;
  border-radius: 20px;
  color: white;
  font-weight: bold;
  text-align: center;
  width: 80%;
  z-index: 2;
}

.s3-center {
  width: 10%;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;

  margin-left: 5%;
}

.s3-center img {
  width: 80vw;

  margin-bottom: 70%;
}

#card01 {
  background-color: #433962;
  border-radius: 32px 0 32px 0;
  width: 10vw;
  padding: 16px;
  margin: 10% 0 0 18%;
  z-index: 2;
}

#card02 {
  background-color: #39624a;
  border-radius: 32px 0 32px 0;
  width: 10vw;
  padding: 16px;

  margin: 0 0 0 50%;
}

#card03 {
  background-color: #0a4366;
  border-radius: 32px 0 32px 0;
  width: 10vw;
  padding: 16px;
  margin: 6% 0 0 15%;
  z-index: 2;
}

#card04 {
  background-color: #fa7903;
  border-radius: 32px 0 32px 0;
  width: 10vw;
  padding: 16px;

  margin: 0 0 0 50%;
}

#card05 {
  background-color: #c8202f;
  border-radius: 32px 0 32px 0;
  width: 10vw;
  padding: 16px;
  margin: 6% 0 0 15%;
  z-index: 2;
}

/*right card*/

#card06 {
  background-color: #7b002c;
  border-radius: 32px 0 32px 0;
  width: 10vw;
  padding: 16px;
  margin: 8% 0 0 55%;
  z-index: 2;
}

#card07 {
  background-color: #0a4366;
  border-radius: 32px 0 32px 0;
  width: 10vw;
  padding: 16px;

  margin: 6% 0 0 15%;
}

#card08 {
  background-color: #433962;
  border-radius: 32px 0 32px 0;
  width: 10vw;
  padding: 16px;
  margin: 8% 0 0 55%;
  z-index: 2;
}

#card09 {
  background-color: #39624a;
  border-radius: 32px 0 32px 0;
  width: 10vw;
  padding: 16px;

  margin: 6% 0 0 15%;
}

#card10 {
  background-color: #c8202f;
  border-radius: 32px 0 32px 0;
  width: 10vw;
  padding: 16px;
  margin: 8% 0 0 55%;
  z-index: 2;
}

/*                                                                  end - section 3 -Reading matters                                                                 */

/*                                                                             The process                                                                          */
.a4-text-container {
  width: 100vw;
  height: fit-content;
  display: flex;
  flex-direction: column;

  background-color: #ffffff;

  background-image: url(/Assets/img/Nebula/s4-bg-planets2.svg);
  background-repeat: no-repeat;
  background-size: cover;
}

.s4-process-title {
  padding: 5%;
}

.s4-process-title h5 {
  font-family: var(--title-font);
  font-size: 3rem;
  font-weight: 800;
  padding-bottom: 0.5%;
  color: #fa7903;

  text-align: center;
}

.s4-process-title p {
  font-weight: 300;
  font-size: 1.3rem;
  text-align: center;
}

.s4-box-container {
  width: fit-content;

  display: grid;
  grid-template-columns: repeat(2, 50vh); /* 2 colunas de 100px */
  grid-template-rows: repeat(1, 100%); /* 2 linhas de 100px */
  gap: 50px;

  margin: 5% 0;
}

.s4-box {
  padding: 8%;

  border: 0.3px solid #c1bfbf;
  border-radius: 24px;
  background-color: #ffffff;
  box-shadow: 5px 3px 14px -7px #494949;
}

.s4-box ul {
  margin: 0;
  padding: 0;
  font-size: 1.2rem;

  line-height: 150%;
}
.s4-graph {
  display: flex;
  justify-content: center;
  align-items: center;
}

.s4-graph img {
  width: 80%;
}
/*                                                                       End    The process                                                                          */

/*                                                                     section 6 Competitive Audit                                                                   */

.s6 {
  width: 100vw;
  height: fit-content;
  background-color: #ffffff;
  display: flex;
  justify-content: center;
  background-image: url(/Assets/img/Nebula/s6-background.svg);
}

.s6-text {
  padding: 3% 20% 0 20%;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.s6-text h4 {
  font-family: var(--title-font);
  font-size: 3rem;
  font-weight: 800;
  color: #fa7903;
}

.s6-text p {
  font-family: var(--body-font);
  font-size: var(--p-big-font);
  color: var(--color-grey);
  line-height: 180%;
  width: 60vw;

  display: flex;
  justify-content: center;
}

.s6-image {
  display: flex;
  justify-content: center;
  margin-bottom: 5%;
}

/*                                                                    End - section 6 Competitive Audit                                                                 */

/*                                                                     section 7 USER RESEARCH                                                                   */

.s7 {
  width: 100%;
  height: auto;
  background-color: #432340;
  display: flex;
  justify-content: center;
  background-image: url(/Assets/img/Nebula/s7-background.svg);
}

.s7-text {
  padding: 3% 20% 3% 20%;

  text-align: center;
}

.s7-container {
  width: 100%;
}

.s7-text h4 {
  font-family: var(--title-font);
  font-size: var(--h3-font);
  font-weight: 800;
  color: #fff;
  margin-top: 1.5vh;
}

.s7-text p {
  font-family: var(--body-font);
  font-size: var(--p-big-font);
  color: #fff;
  line-height: 180%;
}

.s7-content {
  width: 100%;
  display: flex;
  flex-direction: row;
  padding: 0 5%;
  background-image: url(/Assets/img/Nebula/s7-illustration.svg);
  background-repeat: no-repeat;
  background-position: bottom left;
}

.s7-left {
  width: 70%;
  padding: 5% 5% 5% 2%;
}

/* left - card01 */
.s7-card01 {
  display: flex;
  margin-bottom: 10%;
  align-items: center;
  height: 20vh;
}

.sf-card-insi {
  padding: 2% 2% 2% 0;
  background-color: #ffffff;
  border-radius: 0 40px 40px 0;
  width: 20vw;
}

.sf-card-insi p {
  font-family: var(--body-font);
  font-size: 1.2rem;
  padding-left: 5%;
  line-height: 150%;
}

.sf-card-n1 {
  height: inherit;
  position: relative;
}

.sf-card-n1 p {
  color: #fff;
  background-color: #858cc9;
  font-family: var(--title-font);
  font-size: 2.5rem;
  padding: 12px 27px;
  position: absolute;
  border-radius: 32px;
  right: -30px;
  top: -30px;
  z-index: 1000;
}

.sf-card-date {
  background-color: #656984;
  position: relative;
  font-family: var(--body-font);
  font-size: 1.2rem;
  color: #fff;
  padding: 3% 1.5% 4% 7.5%;
  border-radius: 24px;
  width: 13vw;
  height: 23vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

.sf-card-date h3 {
  font-family: var(--title-font);
  font-size: 2.8rem;
  color: #87f461;
  font-weight: 800;
}

.sf-card-date p {
  font-family: var(--body-font);
  font-size: 1.2rem;
  color: #fff;
  line-height: 120%;
  padding-right: 5%;
}

/* left - card02 */
.s7-card02 {
  display: flex;
  margin-bottom: 20%;
  align-items: center;
  height: 20vh;
  margin-left: 30%;
}

.sf-card-insi2 {
  padding: 2% 2% 2% 0;
  background-color: #ffffff;
  border-radius: 0 40px 40px 0;
  width: 20vw;
}

.sf-card-insi2 p {
  font-family: var(--body-font);
  font-size: 1.2rem;
  padding-left: 5%;
  line-height: 150%;
}

.sf-card-n2 {
  height: inherit;
  position: relative;
}

.sf-card-n2 p {
  color: #fff;
  background-color: #a67966;
  font-family: var(--title-font);
  font-size: 2.5rem;
  padding: 12px 22px;
  position: absolute;
  border-radius: 32px;
  right: -30px;
  top: -30px;
  z-index: 1000;
}

.sf-card-date2 {
  background-color: #656984;
  position: relative;
  font-family: var(--body-font);
  font-size: 1.2rem;
  color: #fff;
  padding: 3% 1.5% 4% 9.5%;
  border-radius: 24px;
  width: 13vw;
  height: 23vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

.sf-card-date2 h3 {
  font-family: var(--title-font);
  font-size: 2.8rem;
  color: #f9e290;
  font-weight: 800;
}

.sf-card-date2 p {
  font-family: var(--body-font);
  font-size: 1.2rem;
  color: #fff;
  line-height: 120%;
  padding-right: 5%;
}

/* right - card*/

.s7-righ2t {
  width: 30%;
  height: 500px;
  background-image: url(/Assets/img/Nebula/s7-card.svg);
  background-repeat: no-repeat;
  background-position: 50%;
  display: flex;
  align-items: center;
}

.s7-r-card2 p {
  width: 50%;
  left: 30%;
  margin: 35% 30% 30% 30%;
  color: #481e1e;
  font-family: var(--body-font);
  font-size: 1.1rem;
  line-height: 150%;
}

/*                                                                End -  section 7 USER RESEARCH                                                                   */

/*                                                                   section 08- SURVEY RESULTS                                                                  */

.s8 {
  width: 100%;
  height: auto;
  display: flex;
  justify-content: center;
  margin-bottom: 1%;
  background-image: url(/Assets/img/Nebula/s8-background.png);
  box-sizing: border-box;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.s8-text {
  padding: 3% 20%;
  text-align: center;
}

.s8-container {
  width: 100%;
  background: url(/Assets/img/Nebula/s8-hover.png);
  background-repeat: no-repeat;
  background-position: 95% 100%;
}

.s8-text h4 {
  font-family: var(--title-font);
  font-size: var(--h3-font);
  font-weight: 800;
  color: #6b4545;
  margin-top: 1.5vh;
}

.s8-text p {
  font-family: var(--body-font);
  font-size: var(--p-big-font);
  color: var(--color-grey);
  line-height: 180%;
}

.s8-col {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  row-gap: 10%;
}

.s8-graph {
  display: flex;
  flex-direction: row;
  width: 40%;
  margin: 3% 2%;
  align-items: center;
  gap: 2%;
}

.s8-graph-text {
  box-sizing: border-box;
  width: 50%;
  background-color: #fff;
  opacity: 0.85;
}

.s8-graph img {
  box-sizing: border-box;
  width: 13vw;
}

.s8-graph-text h3 {
  font-size: 2.375rem;
  font-family: var(--title-font);
  font-weight: 900;
}

.s8-graph-text p {
  font-size: var(--p-font);
  font-family: var(--body-font);
  color: var(--color-grey);
  line-height: 160%;
}

#graph01 {
  color: #c6d769;
}

#graph02 {
  color: #51aee3;
}

#graph03 {
  color: #85bf58;
}

#graph04 {
  color: #fabc59;
}

#graph05 {
  color: #e06da7;
}

#graph06 {
  color: #f28e52;
}

#graph07 {
  color: #51aee3;
}

#graph08 {
  color: #c6d769;
}

#graph09 {
  color: #de64a2;
}

#graph-bold {
  font-weight: 900;
}

/*                                                                End -  section 08- SURVEY RESULTS                                                                  */

/*                                                                   section 09- SWOT ANALYSIS                                                                  */

.s9 {
  width: 100%;
  height: auto;
  display: flex;
  justify-content: center;
  background-image: url(/Assets/img/Nebula/s9-planet01.png),
    url(/Assets/img/Nebula/s9-planet02.png);
  background-repeat: no-repeat;
  background-position: right bottom, left top;
}

.s9-text {
  padding: 2% 10% 0 10%;
  text-align: center;
}

.s9-container {
  width: 100%;
  height: 100%;
}

.s9-text h4 {
  font-family: var(--title-font);
  font-size: var(--h3-font);
  font-weight: 900;
  color: #59305c;
  margin-top: 1.5vh;
}

.s9-text p {
  font-family: var(--body-font);
  font-size: var(--p-big-font);
  color: #59305c;
  line-height: 170%;

  padding: 0 10%;
}

.s9-content {
  display: flex;
  flex-wrap: wrap;
  box-sizing: border-box;
  margin: 0 10%;
}

/*card right*/

.s9-cardr {
  width: 50%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

/*card left*/

.s9-cardl {
  width: 50%;
  display: flex;
  flex-direction: column;
}

.s9-card-side {
  height: 40vh;
  margin: 5% 10%;
  background-color: rgb(245, 248, 250);
  border-radius: 16px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  padding: 5%;
  display: flex;
  flex-direction: column;
  position: relative;
}

.s9-card-side h5 {
  color: #e5642d;
  font-family: var(--title-font);
  font-size: 2rem;
  font-weight: 800;
  margin-bottom: 2%;
}

.card-le-r {
  color: #3b1139;
  font-family: var(--title-font);
  font-size: 2rem;
  justify-content: flex-end;
  /* Align content to the end (right side) */
  align-items: flex-end;
  /* Align items to the bottom */
  position: absolute;
  /* Position the content absolutely */
  left: 5%;
  /* Align to the right side */
  bottom: 1%;
  /* Align to the bottom */
  font-weight: 800;
}

.card-le-l {
  color: #3b1139;
  font-family: var(--title-font);
  font-size: 2rem;
  justify-content: flex-end;
  /* Align content to the end (right side) */
  align-items: flex-end;
  /* Align items to the bottom */
  position: absolute;
  /* Position the content absolutely */
  right: 5%;
  /* Align to the right side */
  bottom: 1%;
  /* Align to the bottom */
  font-weight: 800;
}

.s9-card-side ul {
  color: #462849;
  font-family: var(--body-font);
  font-size: var(--p-font);
}

.s9-card-side ul li {
  list-style-type: disc;
  list-style-position: inside;
  line-height: 180%;
}

/*                                                                    end  - section 09- SWOT ANALYSIS                                                                */

/*                                                                       section 11 - PERSONAS                                                                       */

.s11 {
  width: 100%;
  height: 180vh;
  display: flex;
  justify-content: center;
  background-image: url(/Assets/img/Nebula/s11-wave-background2.svg);
  background-position: bottom;
  background-repeat: no-repeat;
  background-size: cover;
}

.s11-container {
  width: 100%;
  height: fit-content;
}

.s11-text {
  display: flex;
  justify-content: center;
  margin: 5% 0;
  flex-direction: column;
  align-items: center;

  width: 100%;
}

.s11-text h4 {
  font-family: var(--title-font);
  font-size: var(--h3-font);
  font-weight: 800;
  color: #40161c;
  margin-top: 1.5vh;
}

.s11-text p {
  color: var(--color-grey);
  line-height: 150%;
  font-family: var(--body-font);
  font-size: var(--p-big-font);
}

/*personas*/

.s11-container-personas {
  display: flex;
  box-sizing: border-box;
  justify-content: center;
  flex-direction: row;
  height: fit-content;
  margin-top: 2%;

  /* background-color: #8d5520; */
}

/*persona right*/

.s11-col-r {
  display: flex;
  flex-direction: column;
  width: 50%;
  height: auto;

  /* background-color: #208d29; */
  margin-bottom: 5%;
}

.s11-col-text-p1 {
  display: flex;
  flex-direction: row;
  margin: 3%;
  margin: 0 10% 0 5%;
  flex-direction: column;
  height: fit-content;
  width: 81%;
  justify-content: center;
  padding: 2%;
  background-color: hsl(261, 27%, 58%);
}

.s11-col-text-p1 h5 {
  font-family: var(--title-font);
  font-size: 2.4rem;
  font-weight: 800;
  color: #3f0837;
  margin-top: 1.5vh;
}

.s11-col-text-p1 p {
  font-family: var(--body-font);
  font-size: var(--p-big-font);
  color: #3f0837;
  line-height: 150%;
}

.s11-persona01 {
  margin: 0 10% 0 5%;
  height: 90vh;
  width: 70%;

  /* background-color: #b69696; */
}

.s11-persona01 img {
  height: 100%;
}

/*persona left*/

.s11-col-l {
  display: flex;
  flex-direction: column;
  width: 50%;
  height: auto;

  /* background-color: #206a8d; */
}

.s11-col-text-p2 {
  display: flex;
  flex-direction: row;
  margin: 0 10% 0 5%;
  width: 73.5%;
  flex-direction: column;
  height: fit-content;
  justify-content: center;
  padding: 2%;

  background-color: #5d1f63;
}

.s11-col-text-p2 h5 {
  font-family: var(--title-font);
  font-size: 2.4rem;
  font-weight: 800;
  color: #ffffff;
  margin: 0 5% 0 5%;
}

.s11-col-text-p2 p {
  font-family: var(--body-font);
  font-size: var(--p-big-font);
  color: hsl(0, 0%, 100%);
  line-height: 150%;
  margin: 0 5% 0 5%;
}
.s11-persona02 {
  margin: 0 10% 0 5%;
  height: 90vh;

  /* background-color: #99b696; */
}

.s11-persona02 img {
  height: 100%;
}

/*                                                                       End - section 11 - PERSONAS                                                                  */

/*                                                                       section 12 - USER JOURNEY                                                                      */

.s12 {
  width: 100%;
  height: fit-content;
  display: flex;
  justify-content: center;
  margin-top: -50px;
}

.s12-text {
  padding: 0 10% 0 10%;
  text-align: center;
}

.s12-container {
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: bottom;
  background-size: contain;
}

.s12-text h4 {
  font-family: var(--title-font);
  font-size: var(--h3-font);
  font-weight: 800;
  color: #40161c;
  margin-top: 1.5vh;
}

.s12-text p {
  font-family: var(--body-font);
  font-size: var(--p-big-font);
  color: var(--color-grey);
  line-height: 150%;
}

.s12-image {
  margin-top: 3%;
  display: flex;
  justify-content: center;
}

/*                                                                       section 13 - Mockup                                                                      */

.s13 {
  background-color: #656984;
  width: 100%;
  margin-top: 3%;
}

.s13-img {
  display: flex;
  justify-content: center;
}

/*                                                                       End -section 13 - USER JOURNEY                                                                  */

/*                                                                            section 14- IDEATING                                                                       */

.s14 {
  width: 100%;
  height: fit-content;
  display: flex;
  justify-content: center;
  padding-top: 3%;
  background-image: url(/Assets/img/Nebula/s14-background-top.svg);
  background-repeat: no-repeat;
  background-position: top;
  background-size: contain;
}

.s14-text {
  padding: 0 10% 0 10%;
  text-align: center;
}

.s14-content {
  width: 100%;
  height: 100%;
}

.s14-text h4 {
  font-family: var(--title-font);
  font-size: var(--h3-font);
  font-weight: 900;
  color: #40161c;
  margin-top: 1.5vh;
}

.s14-text p {
  font-family: var(--body-font);
  font-size: var(--p-big-font);
  color: var(--color-grey);
  line-height: 150%;
  padding: 0 10%;
}

.s14-CSD-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  margin-top: 5%;
}

.s14-img-csd {
  width: 50%;
}

.s14-img-csd img {
  width: 100%;
}

.s14-text h5 {
  width: 50%;
}

.s14-text h5 {
  font-family: var(--title-font);
  font-size: 1.8rem;
  font-weight: 800;
  color: #40161c;
  margin-top: 1.5vh;
  width: 20vw;
}

.s14-img-effort {
  display: flex;
  justify-content: center;
  margin: 5% 0;
}

.centered-line {
  width: 80%; /* 80% da largura da página */
  height: 0.5px; /* Espessura da linha */
  background-color: #a69abe; /* Cor da linha */
  margin: 3% auto; /* Centraliza a linha e adiciona espaçamento acima/abaixo */
}

/*                                                                        End - section 14- IDEATING                                                                    */

/*                                                                        section 15- FLOW DIAGRAM                                                                      */

.s15 {
  background: rgb(255, 255, 255);
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(244, 244, 244, 1) 100%
  );
  width: 100%;
  height: fit-content;
  background-image: url(/Assets/img/Nebula/s15-artie.svg),
    url(/Assets/img/Nebula/s15-robot.svg);
  background-repeat: no-repeat;
  background-position: right top, left 3% bottom;
  box-shadow: -1px 6px 9px -5px #000000;
}

.s15-container {
  height: fit-content;
}

.s15-text {
  padding: 0 10% 0 10%;
  text-align: center;
}

.s15-text h4 {
  font-family: var(--title-font);
  font-size: var(--h3-font);
  font-weight: 900;
  color: #163340;
  margin-top: 1.5vh;
}

.s15-text p {
  font-family: var(--body-font);
  font-size: var(--p-big-font);
  color: var(--color-grey);
  line-height: 150%;
  padding: 0 10%;
}

.s15-flow {
  display: flex;
  justify-content: center;
  margin-top: 5vh;
  padding-bottom: 3%;
}

/*                                                                     End -section 15- FLOW DIAGRAM                                                                  */

/*                                                                        section 16-PAPER WIREFRAME                                                                  */

.s16 {
  background-image: url(/Assets/img/Nebula/s16-background-alien.svg);
  background-repeat: no-repeat;
  background-position: bottom left;
  width: 100%;

  height: fit-content;
}

.s16-container {
  height: fit-content;
  display: flex;
  height: 65vh;
  flex-direction: row;
}

.s16-left {
  height: 100%;
  align-items: center;
  display: flex;
}

.s16-text {
  padding: 0 10% 0 10%;
  text-align: center;
}

.s16-text h4 {
  font-family: var(--title-font);
  font-size: var(--h3-font);
  font-weight: 900;
  color: #ab5327;
  margin-top: 1.5vh;
  text-align: left;
  padding: 0 10%;
}

.s16-text p {
  font-family: var(--body-font);
  font-size: var(--p-big-font);
  color: var(--color-grey);
  line-height: 150%;
  padding: 0 10%;
  text-align: left;
}

.s16-right {
  height: 100%;
  width: 70vw;
  align-items: center;
  display: grid;
  position: relative;
  /*imperative for the overlapping to work*/
  grid-template-columns: repeat(12, 1fr);
  max-width: 100%;
  padding-right: 5%;
}

.s16-paper01 {
  grid-row: 1;
  grid-column: 1 / span 8;
  padding-top: 15%;
  z-index: 1;
}

.s16-paper02 {
  grid-column: 4 / -1;
  grid-row: 1;
}

.s16-paper01 img,
.s16-paper02 img {
  width: 100%;
  /* Make the image take 100% of its parent's width */
  height: auto;
  /* Maintain aspect ratio */
  max-width: 100%;
  /* Ensure images don't exceed their container width */
  max-height: 100%;
  display: block;
}
/*                                                                   End - section 16-PAPER WIREFRAME                                                                  */

/*                                                                   section 17-LOW FIDELITY PROTOTYPE                                                                 */

.s17 {
  background-color: #f0f0f0;
  background-image: url(/Assets/img/Nebula/s17-background.png);
  background-repeat: no-repeat;
  background-position: bottom left 50%;
  height: fit-content;
  width: 100%;
  padding: 5% 0;
}

.s17-container {
  display: flex;
  width: 100%;
  margin: 2% 0;
  flex-direction: row;

  /* background-color: #b4b6c5; */
}

.s17-left {
  width: 30%;
}

.s17-left img {
  max-width: 100%;
  height: auto;
  margin-left: 10%;
}

.s17-middle {
  width: 50%;
}

.s17-text1 h4 {
  font-family: var(--title-font);
  font-size: var(--h3-font);
  font-weight: 800;
  color: #623565;
  margin-top: 1.5vh;
  text-align: left;
  padding: 0 5%;
}

.s17-text2 {
  background-color: #182338;
  margin-top: 8%;

  margin-left: -15px;
  padding: 2%;
  width: 20vw;
  border-radius: 0 12px 12px 0;
}

.s17-text2 p {
  font-family: var(--body-font);
  font-size: var(--p-big-font);
  color: #fff;
  line-height: 150%;
  /* padding: 0 5%; */
  text-align: left;
  /* background-color: #cbe4c2; */
}

.s17-text3 {
  background-color: #694665;
  margin-top: 2%;
  position: relative; /* Permite ajustar sua posição relativa à sua localização padrão */
  right: -62%; /* Move a caixa para a direita fora do limite */
  padding: 2%;
  width: 20vw;

  border-radius: 12px 0 0 12px;
}

.s17-text3 p {
  font-family: var(--body-font);
  font-size: var(--p-big-font);
  color: #fff;
  line-height: 150%;
  padding: 0 5%;
  text-align: left;
  /* background-color: #cbe4c2; */
}

.s17-right {
  width: 30%;

  /* background-color: #c7cfaa; */
}

.s17-right img {
  max-width: 100%;
  height: auto;
  margin-right: 10%;
}

/*                                                               End-section 17-LOW FIDELITY PROTOTYPE                                                                 */

/*                                                                      section 19-Mocukp                                                                               */
.s19 {
  width: 100%;
  height: 180vh;
  background-image: url(/Assets/img/Nebula/s19-img.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-color: #e8e8e8;
}
/*                                                                   end section 19-Mocukp                                                                               */

/*                                                             section 20-USABILITY TEST-FINDINGS                                                                       */

.s20 {
  width: 100%;
  height: fit-content;
  background: linear-gradient(180deg, rgb(3, 2, 27) 2%, rgb(42 30 129) 100%);

  margin-top: -5vh;
}

.s20-container {
  display: flex;
  width: 100%;
  flex-direction: column;
}

.s20-title {
  display: flex;
  flex-direction: column;
}
.s20-title h4 {
  font-family: var(--title-font);
  font-size: var(--h3-font);
  font-weight: 900;
  color: #ffffff;
  margin-top: 8vh;

  text-align: center;
}

.s20-title p {
  font-family: var(--body-font);
  font-size: var(--p-big-font);
  color: #ffffff;
  line-height: 150%;
  padding: 0 15%;
  text-align: center;

  margin-bottom: 2vh;
}

.s20-title ol {
  font-family: var(--body-font);
  color: #fff;
  font-size: 1.2rem;
  /* background-color: #3aa2aa; */
  /* width: 70vh; */
  justify-content: center;
  padding: 0 33vw;
  margin-left: 0.5%;
}

.s20-title ol li {
  font-family: var(--body-font);
  color: #fff;
  font-size: 1rem;

  /* width: 70vh; */
  justify-content: center;
}

.s20-card-container {
  margin: 5% 10%;

  display: flex;
  flex-direction: row;
  justify-content: center;
}

.s20-gp-card01 {
  display: flex;
  flex-direction: column;
  width: 20vw;

  /* background-color: #868e9e; */
  margin: 0 5%;

}

.s20-gp-card01 h5 {
  color: #ffffff;
  font-size: 1.75rem;
  font-family: var(--title-font);
  font-weight: 600;

  margin-bottom: 2%;
  margin-left: 3%;
}

.s20-gp-card01 h6 {
  color: #0e0627;
  font-size: 1.2rem;
  font-family: var(--title-font);
  font-weight: 400;

  margin-top: -1%;
  margin-left: 15%;

  width: 70%;
  height: fit-content;
  /* background-color: #0a1d44; */
  border: 1px solid #ffffff;
  border-radius: 0 0 12px  12px ;
  padding: 2%;

  z-index: 0;
  text-align: center;

  background: #95B0DB; 
	opacity: 0.8; 
	-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity= 16); /* // for IE8 */
	filter: alpha(opacity= 16); /* //for IE5-7 */
}

.s20-card {
  width: 100%;
  height: fit-content;

  background: rgb(255, 255, 255);
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 1) 72%,
    rgba(253, 249, 249, 1) 100%
  );
  padding: 10% 0 5% 5%;

  border-color: #d4d4d4;
  border-width: medium;
  border-radius: 24px;
  border-style: solid;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;

  z-index: 1;
}

.s20-container-card-text {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  margin: 2% 0;
}

.s20-c-text {
  font-family: var(--body-font);
  margin-left: 2%;
}

.s20-c-text p {
  /* margin-left: 5%; */
  font-size: 1rem;
  /* padding: 3% 5%; */
}

.s20-c-number {
  font-family: var(--title-font); /* Define a fonte */
  font-size: 1.313rem; /* Tamanho do texto */
  background-color: #e5642d; /* Cor do fundo */
  color: #ffffff; /* Cor do número */
  width: 50px; /* Largura fixa para o círculo */
  height: 50px; /* Altura igual à largura */
  line-height: 50px; /* Define o alinhamento vertical */
  text-align: center; /* Centraliza o texto horizontalmente */
  border-radius: 50%; /* Cria o formato de círculo */
  display: inline-block; /* Garante que o círculo não se estenda */
}

.n02 {
  width: 50px !important;
}

@media (max-width: 1200px) {
  .s20-c-number {
    width: 40px; /* Ajusta a largura em telas menores */
    height: 40px; /* Mantém a altura igual à largura */
    line-height: 40px; /* Ajusta o alinhamento vertical */
    font-size: 1rem; /* Reduz o tamanho do texto */
  }

  .n02 {
    width: 40px !important;
  }
}

#s20-card2 {
  display: flex;
  justify-content: flex-start;
}

/*                                                               section 21-ACCEBILITY CONSIDERATIONS                                                                    */

.s21 {
  width: 100%;

  background-image: url(/Assets/img/Nebula/s21-cadeirante01.svg),
    url(/Assets/img/Nebula/s21-cadeirante02.svg),
    url(/Assets/img/Nebula/s21-background-full.png);

  background-repeat: no-repeat;
  background-size: 20%, 20%, cover;
  background-position: bottom 50px left 10px, bottom 50px right 10px, center;
  padding-bottom: 5%;
}

.s21-container {
  display: flex;
  width: 100%;
  flex-direction: column;
}

.s21-title h5 {
  font-family: var(--title-font);
  font-size: var(--h3-font);
  font-weight: 800;
  color: #ffffff;
  margin-top: 10vh;
  text-align: center;
}

.s21-card-container {
  display: flex;
  flex-wrap: wrap;
  box-sizing: border-box;
  justify-content: center;

  width: 100%;
  row-gap: 3vh;

  margin: 5% 0 10% 0;
}

.s21-card-gp {
  width: 30%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.s21-number {
  background-color: #b068aa;
  color: #ffffff;
  border-radius: 100%;
  padding: 3% 6%;
  margin-bottom: -8%;

  z-index: 1;
}

.s21-number p {
  font-family: var(--title-font);
  font-weight: 700;
  font-size: 2rem;

  display: flex;
  justify-content: flex-start;
  position: relative;
  box-sizing: 10px;
  max-width: fit-content;
  color: #fff;
  border-radius: 24px;
  margin-bottom: 5%;
}

.s21-card-content {
  background-color: #623565;
  width: 13vw;
  height: 20vh;

  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 32px;
}

.s21-card-content h5 {
  font-family: var(--title-font);
  font-weight: 700;
  font-size: 1.75rem;

  color: #ffff;
  text-align: center;
}
/*                                                           end-section 21-ACCEBILITY CONSIDERATIONS                                                                    */

/*                                                            section 22-WEBSITE CREATED FOR NEBULA                                                                      */
.s22 {
  width: 100%;
  height: fit-content;
  margin-top: -3%;
  /* background-color: #7c3de0; */
}

.s22-container {
  height: 100%;
  /* background-color: #493133; */
  display: flex;
  justify-content: space-between; /* Garantir que os filhos fiquem em 50% */
  align-items: center;
}

.s22-text {
  /* background-color: #35979e; */
  flex: 1; /* Dividir igualmente com a imagem */
  height: 100%;
  padding-right: 30px;

  display: flex;
  justify-content: center;
}

.s22-text h4 {
  font-family: var(--title-font);
  font-size: 2.375rem;
  font-weight: 800;
  color: #ab5327;
  text-align: right;
  width: 50%;
  /* 
  background-color: #182338; */
}

.s22-img-container {
  flex: 1; /* Dividir igualmente com o texto */

  padding-right: 5%;
}

.s22-img-container img {
  width: 100%;
  /* background-color: #1c0d1b; */
}

/*                                                        end-section 22-WEBSITE CREATED FOR NEBULA                                                                      */

/*                                                                 section 23-Takeways                                                                                   */

.s23 {
  width: 100%;
  height: fit-content;
  background-color: #462849;
  background-image: url(/Assets/img/Nebula/s23-background.png);
}

.s23-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.s23-text {
  /* background-color: #35979E; */
  right: 30px;
  width: 100%;
  margin-top: 3%;
}

.s23-text h4 {
  font-family: var(--title-font);
  font-size: 5rem;
  font-weight: 800;
  color: #ffffff;
  margin-top: 1.5vh;
  text-align: center;
}

.s23-content-container {
  background-color: #ffffff40;
  display: flex;
  margin: 2% 20%;

  padding: 2% 2%;

  border-radius: 12px;
}

.s23-container-text {
  /* background-color: #0c3115; */
  width: 50%;
  margin-right: 10%;
}

.s23-container-text h5 {
  font-family: var(--title-font);
  font-size: 2.5rem;
  font-weight: 800;
  color: #ffffff;
  margin-top: 1.5vh;
  text-align: left;
  margin-bottom: 3%;
}

.s23-container-text p {
  font-family: var(--body-font);
  font-size: 1.5rem;
  font-style: italic;
  color: #fff;
  line-height: 180%;

}

.s23-container-text2 {
  /* background-color: #aee0a9; */
  width: 50%;
  margin-left: 10%;
}

.s23-container-text2 h5 {
  font-family: var(--title-font);
  font-size: 2.5rem;
  font-weight: 800;
  color: #ffffff;
  margin-top: 1.5vh;
  text-align: left;
  margin-bottom: 3%;
}

.s23-container-text2 ul {
  /* background-color: #151464; */
  color: #fff;
  line-height: 180%;
  padding-left: 20px; /* Adding padding to make space for the bullets */
}

.s23-container-text2 ul li {
  display: inline-block;
  position: relative;
  margin-right: 8%; /* Adjust as needed */
  font-family: var(--body-font);
  font-size: 1.2rem;
  margin-left: 5%;
}

.s23-container-text2 ul li::before {
  content: "☑️"; /* Add checkmark icons */
  color: #fff; /* Color of the marker */
  position: absolute;
  left: -10%; /* Adjust to align the marker properly */

}


/*                                                               end - section 23-Takeways                                                                               */

/*                                                                 section 24-NEXT STEPS                                                                                  */

.s24 {
  width: 100%;
  height: fit-content;

  background: rgb(232, 232, 232);
  background: linear-gradient(
    180deg,
    rgba(232, 232, 232, 1) 2%,
    rgba(255, 255, 255, 1) 100%
  );

  margin-bottom: 5%;
}

.s24-container {
  /* background-color: #e4ccde; */

  display: flex;
  width: 100%;
  flex-direction: column;
}

.s24-text h4 {
  font-family: var(--title-font);
  font-size: var(--h3-font);
  font-weight: 800;
  color: #ab5327;

  margin-top: 4vh;

  text-align: center;
}

.s24-card-container {
  margin-top: 5%;
  display: flex;
  justify-content: center;

  /* background-color: #8bb3ca; */
}

.s24-card-group,
.s24-card-group3 {
  /* background-color: #c6e0c1; */

  display: flex;
  align-items: center;
  flex-direction: column;

  width: 22%;
  height: 33vh;
}

.s24-card-group {
  margin-right: 5%;
}

.s24-number {
  background-color: #ab5327;
  color: #ffffff;

  border-radius: 100%;
  padding: 3% 6%;

  margin-bottom: -5%;

  z-index: 1;
}

.s24-number h5 {
  font-family: var(--title-font);
  font-weight: 700;
  font-size: 2rem;

  display: flex;
  justify-content: flex-start;
  position: relative;
  box-sizing: 10px;
  max-width: fit-content;
  /* padding: 4px 8px; */
  color: #fff;
  border-radius: 24px;
  margin-bottom: 5%;
}

.s24-card {
  height: 100%;
  padding: 10%;

  background: rgb(255, 255, 255);
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 1) 72%,
    rgba(253, 249, 249, 1) 100%
  );

  border-color: #d4d4d4;
  border-width: 2px;
  border-radius: 24px;
  border-style: solid;
}

.s24-card h6 {
  font-family: var(--body-font);
  font-size: 1.1rem;
  color: #462849;
  font-weight: 700;
  margin-bottom: 3%;
}

.s24-card p {
  font-family: var(--body-font);
  font-size: 1.1rem;
  color: #462849;
  line-height: 170%;
}

/*                                                             end - section 24-NEXT STEPS                                                                                */

/*                                                                    section 25-footer                                                                                   */

.s25 {
  width: 100%;
  height: fit-content;

  background: rgb(232, 232, 232);
  background-image: url(/Assets/img/Nebula/s25-mountain.svg),
    url(/Assets/img/Nebula/s25-tree.svg),
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 1) 100%,
      rgba(232, 232, 232, 1) 2%
    );

  background-repeat: no-repeat;

  background-position: bottom right, bottom left 20px;
}

.s25-container {
  /* background-color: #e4ccde; */

  display: flex;
  width: 100%;
  height: 100%;
  margin: 2% 0;
  flex-direction: column;
}

.s25-text {
  /* background-color: #cf9ccc; */
  padding: 3% 10%;
  display: flex;
  justify-content: center;
  flex-direction: column;
}

.s25-text h3 {
  font-family: var(--title-font);
  font-weight: 700;
  font-size: 3rem;
  text-align: center;

  color: #462849;
  margin-bottom: 1%;
}

.s25-text p {
  font-family: var(--body-font);
  font-size: 1.2rem;
  text-align: center;
}

.s25-img01 {
  /* background-color: #bdc0d1; */
  display: flex;
  justify-content: center;
  height: 30vh;
  /* box-sizing: 50px; */
}

.s25-img01 img {
  height: 80%;
}

.s25-qrcode-redes {
  /* background-color: #add8ba; */
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.s25-qrcode-redes > *:nth-last-child(n + 2) {
  margin-right: 5%;
}

/*thank you message*/

.thankyoumessage {
  padding: 5%;
  width: 100%;
  background: rgb(241, 241, 241);
  background: linear-gradient(
    180deg,
    rgba(241, 241, 241, 1) 0%,
    rgba(255, 255, 255, 1) 100%
  );
  text-align: center;

  background-image: url(/Assets/img/Nebula/trees.png),
    url(/Assets/img/Nebula/montanha2.png);
  background-repeat: no-repeat;
  background-position: bottom left, bottom right;

  height: 80vh;
}

.thankyoumessage h2 {
  font-family: var(--title-font);
  font-size: 4rem;
  font-weight: 800;
  color: #462849;

  margin-bottom: 1%;
  margin-top: 5%;
}

.thankyoumessage p {
  font-family: var(--body-font);
  font-size: 1.2rem;

  color: #462849;
  margin-bottom: 5%;
}

.btn {
  display: inline-block;
  padding: 16px 45px;
  background: #b068aa;
  color: var(--text-color);
  font-size: var(--p-font);
  font-weight: 600;
  transition: all ease 0.5s;
  border-radius: 5px;
}

.btn:hover {
  background-color: #581c5c;
  transform: scale(102%);
  color: #ffffff;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.23);
}

/*footer*/

.social-media {
  width: 100vw;
  height: fit-content;
  background-color: #5d3160;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.logo-end {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 40%;
  height: 100%;
  justify-content: center;
  margin-top: -95px;
}

.container-logo-end {
  background-color: #e6642e;
  border-radius: 50%;
  width: 15%;
  margin: 5% 0;
}

.container-logo-end img {
  width: 100%;
  padding: 15%;
  margin-bottom: 5%;
}

.social_media-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.sm_icon {
  display: flex;
  width: 40%;
  justify-content: center;
  margin-bottom: 20px;
}

.end-text p {
  font-family: var(--title-font);
  color: #fff;
  text-align: center;
  margin-bottom: 3%;
}

.sm_icon img {
  width: 10%;
  transition: 0.3s ease-in-out;
  cursor: pointer;
  padding: 0.5% 1%;
  border: 0.5px dashed #fff;
  border-radius: 50%;

  margin-left: 3%;
}

.sm_icon img:hover {
  transform: scale(120%);
  background: rgba(201, 184, 195, 0.1);
}

.scroll-btn i {
  position: fixed;
  right: 2.2rem;
  bottom: 2.2rem;
  color: var(--text-color);
  background: var(--main-color);
  font-size: 23px;
  padding: 9px;
  border-radius: 0.8rem;
}

.card-mob-group {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: center;
  display: none;
}