/* 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;
  --title-font-case: "Inika", 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 */
}


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: #161646;
  padding: 2%;
}
.s1-h-title {
  width: 20vw;
  display: flex;
  flex-direction: column;
}

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

  color: #fff;

  /* background-color: #391E1E; */
}

.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;

  margin-right: 5%;
}

.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: #1d0909;
  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: #96afbb;
  width: 12vh;
  margin-left: 18% !important;
}

.s1-tag-product h6 {
  background-color: #6ec793;
  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 02 - purpose and mission                                                                 */

.s2-container {
  background-image: url(/Assets/img/MEA/top-left-quadrado.svg),
    url(/Assets/img/MEA/bottom-right-quadrado.svg);
  background-repeat: no-repeat;
  background-position: top left, bottom right;
  background-size: 4%;
  width: 99vw;
  height: 100vh;

  display: flex;
  flex-direction: row;

  background-color: #faf7f7;

  margin-top: 2%;
}

.s2-left-container {
  flex: 1;
  width: 50%;
  /* background-color: #603f3a; */

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

  padding: 5%;
}

/*title*/
.square {
  display: inline-block; /* Garante que o span tenha comportamento de bloco para mostrar dimensões */
  width: 30px;
  height: 30px;
  background-color: #b12425; /* Cor */

  margin: 2% 1% 0 0;
}

.s2-cont-text {
  /* background-color: cadetblue; */
  padding: 5%;
}

.s2-cont-text h4 {
  font-family: var(--title-font-case);
  font-size: 3rem;
  font-weight: 700;
  color: #391e1e;
}

.s2-title-cont {
  display: flex;
}

.s2-cont-text p {
  font-family: var(--body-font);
  font-size: 1.5rem;
  margin-left: 6%;
}

.s2-icon01 {
  width: 100%;
  display: flex;
  justify-content: center;
  /* 
  background-color: #391E1E; */
}

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

  /* background-color: #391E1E; */
}

.s2-icon01 img {
  width: 20%;
}

.s2-icon02 img {
  width: 10%;
}

.s2-right-container {
  flex: 1;
  width: 50%;
  /* background-color: #603f3a; */

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

  padding: 5%;
}

/*                                                            end - Section 02 - purpose and mission                                                                */

/*                                                               Section 03 -  Role in the Project                                                                */
.s3-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.s3-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 0;
  width: 100vw;
  height: 100vh;
}

.s3-box {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  color: white;
}

.s3-box h4 {
  font-family: var(--title-font-case);
  font-size: 3rem;
  font-weight: 700;
}

.s3-box p {
  font-family: var(--body-font);
  font-size: 1.5rem;
  margin-left: 6%;
  padding: 0 8%;
}

/* Cores específicas para cada quadrado */
.s3-box:nth-child(1) {
  background-color: #121a4e; /* Azul-escuro */
  font-size: 1.5rem;
  font-weight: bold;
}

.s3-box:nth-child(2) {
  background-color: #b22222; /* Vermelho escuro */
  font-size: 1rem;
}

.s3-box:nth-child(3) {
  background-color: #b22222; /* Vermelho escuro */
}

.s3-box:nth-child(4) {
  background-color: #121a4e; /* Azul-escuro */
}

/* Imagem ajustável */
.s3-box img {
  max-width: 100%;
  height: auto;
  display: block;
}

/*                                                            end - Section 03 -  Role in the Project                                                                */

/*                                                                   Section 04 -  Competitors                                                                       */
.s4-container {
  background-image: url(/Assets/img/MEA/bottom-left-quadrado.svg),
    url(/Assets/img/MEA/top-right-quadrado.svg);
  background-repeat: no-repeat;
  background-position: bottom left, top right;
  background-size: 4%;
  padding: 20px;
  background-color: #f9f9f9;

  display: flex;
  flex-direction: row;
  height: fit-content;
  width: 100vw;
}

.s4-title {
  display: flex;
  width: 40vw;
  justify-content: center;
  align-items: center;
}

.s4-title-cont {
  display: flex;
  justify-content: center;
  align-items: center;
}

.s4-title-cont h4 {
  font-family: var(--title-font-case);
  font-size: 3rem;
  font-weight: 700;
  color: #391e1e;
}

.s4-container-box {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  width: 60vw;

  /* background-color: blue; */
  margin-left: 40vh;
  margin-bottom: 5%;
}

.s4-container-box .s4-box01,
.s4-container-box .s4-box02,
.s4-container-box .s4-box03 {
  width: 35%;
  border: 6px solid transparent;
  text-align: center;
  height: fit-content;
}

.s4-box01 {
  background-color: #101243;
  border-color: #101243;
  color: #fff;
}

.s4-box02 {
  background-color: #d22727;
  border-color: #d22727;
  color: #fff;

  margin-left: 35%;
}

.s4-box03 {
  background-color: #101243;
  border-color: #101243;
  color: #fff;
}

.s4-container-box figure {
  margin: 0;
  padding: 0;
}

.s4-container-box img {
  max-width: 100%;
  height: auto;
  margin-bottom: 15px;
}

.s4-box-text p {
  font-family: var(--body-font);
  font-size: 1.5rem;
}

/*                                                                 end - Section 04 -  Competitors                                                                    */

/*                                                                 Section 05 -  Target Audience                                                                    */
.s5-container {
  position: relative; /* Necessário para posicionar os elementos corretamente */
  background-image: url(/Assets/img/MEA/bg-quad.png),
    /* O quadriculado como fundo principal */
      url(/Assets/img/MEA/top-left-quadrado2.svg),
    url(/Assets/img/MEA/bottom-right-quadrado2.svg);
  background-repeat: repeat, no-repeat, no-repeat;
  background-position: center, top left, bottom right;
  background-size: 100%, 4%, 4%; /* Quadriculado cobre 100%, quadrados em 4% */

  padding: 20px;
  background-color: #f9f9f9;

  display: flex;
  flex-direction: row;
  height: fit-content;
  width: 100vw;
}

.s5-title-cont h4 {
  font-family: var(--title-font-case);
  font-size: 3rem;
  font-weight: 700;
  color: #391e1e;
}

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

.s5-left-container {
  display: flex;
  flex-direction: column;
  flex: 1;
  height: fit-content;
  /* background-color: #cec4cc; */
  padding: 8%;
  position: relative;
}

.s5-left-box {
  position: absolute; /* Coloca o quadrado amarelo sobre a foto */
  top: 10; /* Ajusta a posição vertical */
  right: 0%; /* Ajusta a posição horizontal */
  z-index: 10; /* Garante que fique acima da foto */
  background-color: #ffc346; /* Cor de fundo do quadrado amarelo */
  padding: 20px;
  max-width: 60%; /* Ajuste do tamanho */
}

.s5-image-wrapper {
  position: relative; /* Necessário para permitir que o quadrado seja posicionado em relação a este contêiner */
  display: inline-block;
  width: fit-content;
}

.s5-border {
  position: absolute;
  top: 250px; /* Ajuste da posição vertical */
  left: 10px; /* Ajuste da posição horizontal */
  width: 20vw; /* Tamanho igual ao da imagem */
  height: 48vh; /* Tamanho igual ao da imagem */
  border: 4px solid #c62828; /* Cor e espessura da borda */
  transform: rotate(5deg); /* Inclinação da borda */
  z-index: 0; /* Garantir que fique atrás da foto */
}

.s5-img-persona img {
  max-width: 100%;
  width: 80%;
  margin-top: 50%;
  position: relative;
  z-index: 1;
}

.s5-left-box p {
  background-color: #ffc346; /* Cor de fundo do texto de "Emma" */
  padding: 20px;
  width: 20vw;
  font-size: 1.5rem;
}

.s5-right-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  padding: 8%;
  /* background-color: aqua; */
}

.s5-img-icon img {
  max-width: 90px; /* Tamanho da imagem de ícone */
  margin-bottom: 5%;
}

.s5-right-text {
  font-size: 1.5rem;
  line-height: 1.5;
}

.s5-r-text {
  padding: 0%;
  margin-left: 5%;

  /* background-color: cadetblue; */
}

/*                                                                 end - Section 05 -  Target Audience                                                                    */

/*                                                                 Section 06 -  Impact and Results                                                                    */
.s6-container {
  position: relative; /* Necessário para posicionar os elementos corretamente */
  background-image: url(/Assets/img/MEA/top-right-quadrado.svg),
    url(/Assets/img/MEA/bottom-left-quadrado.svg);
  background-position: top right, bottom left;
  background-repeat: no-repeat;
  background-size: 4%; /* Quadriculado cobre 100%, quadrados em 4% */

  padding: 20px;
  background-color: #f9f9f9;

  display: flex;
  flex-direction: row;
  height: fit-content;
  width: 100vw;
}

.s6-left-container {
  display: flex;
  flex-direction: column;
  flex: 1;
  height: fit-content;
  /* background-color: #cec4cc; */
  padding: 8%;
  margin-left: 5%;
  position: relative;
}

.s6-image-wrapper {
  position: relative; /* Necessário para permitir que o quadrado seja posicionado em relação a este contêiner */
  display: inline-block;
  width: fit-content;
}

.s6-border {
  position: absolute;
  top: 80px;
  left: 80px;
  width: 25vw;
  height: 55vh;
  border: 4px solid #c62828;
  transform: rotate(8deg);
  z-index: 0;
}

.s6-img-impact img {
  max-width: 100%;
  width: 80%;
  margin-top: 15%;
  margin-left: 15%;
  position: relative;
  z-index: 1;

  background-color: #a58ca7;
}

.s6-right-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  padding: 8%;
  /* background-color: #cec4cc; */
}

.s6-title-cont h4 {
  font-family: var(--title-font-case);
  font-size: 3rem;
  font-weight: 700;
  color: #391e1e;
}

.s6-title-cont {
  display: flex;
  justify-content: center;
  align-items: center;
}

.s6-right-text {
  /* background-color: #d8d0c0; */
  margin-right: 5vw;
}

.s6-right-text p {
  font-size: 1.5rem;
  line-height: 1.5;
  /* background-color: #5a5454; */
  padding: 0 5%;
  margin-left: 5%;
}

/*                                                              end - Section 06 -  Impact and Results                                                               */

/*                                                                  Section 07 -  Visual Identity                                                                    */

/* Container principal */
.s7-container {
  display: flex;
  /* justify-content: space-between;
  align-items: flex-start; */

  color: #fff;
  width: 100vw;
  /* padding: 40px; */
  /* gap: 20px; */
  height: fit-content;
}

/* Estilo para o lado esquerdo */
.s7-left-container {
  flex: 1;

  background-color: #b71c1c; /* Vermelho */
  height: 100vh;
  width: 50%;
}

.s7-left-text {
  display: flex;
  justify-content: center;

  width: 50vw;
  margin-bottom: 5%;
}

.s7-title-cont {
  padding: 10%;
  width: 100%;
  height: fit-content;

  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 50vw;
  align-items: center;
  /* background-color: rgb(66, 43, 15); */
}

.s7-left-text h4 {
  font-family: var(--title-font-case);
  font-size: 3rem;
  font-weight: 700;
  color: #ffffff;
}

.square2 {
  display: inline-block; /* Garante que o span tenha comportamento de bloco para mostrar dimensões */
  width: 30px;
  height: 30px;
  background-color: #ffffff; /* Cor */

  margin: 2% 1% 1% 0;
}

.s7-title-cont ul {
  /* padding: 0 15%;
  margin-left: 10%; */
  font-size: 1.3rem;
  line-height: 2;

  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  width: 25vw;
}

.s7-title-cont ul li {
  margin-bottom: 40px;
  padding: 5%;

  background-color: #fff;
  color: #000000;
}

.s7-title-cont ul li:last-child {
  margin-bottom: 0; /* Remove o espaço do último item */
}

.s7-left-container ul li .bold {
  font-weight: bold;
}

/* Estilo para o lado direito */
.s7-right-container {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50%;

  background-color: #2a265d; /* Azul escuro */
}

.s7-r-container-img {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;

  width: 70%;
  height: fit-content;

  background-color: #fff;
}

/* Estilo para a primeira imagem */
.s7-img:nth-child(1) img {
  width: 40%;
  margin: 0;
}

/* Estilo para a segunda imagem */
.s7-img:nth-child(3) img {
  /* Pulando o span (2º elemento) */
  width: 40%;
}

/* Estilo para a terceira imagem */
.s7-img:nth-child(5) img {
  width: 70%;
  margin-bottom: 5%;
}

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

.s7-r-container-img .separator {
  width: 80%;
  height: 2px;
  background-color: #aaa;
  margin: 20px 0;
}

/*                                                              end - Section 07 -  Visual Identity                                                                   */

/*                                                                    Section 08 -  Mockup                                                                            */
.s8-container {
  width: 100vw;
  margin-top: -5px;
}

.s8-container img {
  width: 100%;
}

/*                                                                 end - Section 08 -  Mockup                                                                         */

/*                                                                 Section 09 -  Professor Max                                                                         */
.s9-container {
  position: relative; /* Necessário para posicionar os elementos corretamente */
  background-image: url(/Assets/img/MEA/top-right-quadrado.svg),
    url(/Assets/img/MEA/bottom-left-quadrado.svg);
  background-position: top right, bottom left;
  background-repeat: no-repeat;
  background-size: 4%; /* Quadriculado cobre 100%, quadrados em 4% */

  padding: 20px;
  background-color: #f9f9f9;

  display: flex;
  flex-direction: row;
  height: fit-content;
  width: 100vw;
}

.s9-left-container {
  display: flex;
  flex-direction: column;
  /* flex: 1; */
  height: fit-content;
  /* background-color: #cec4cc; */
  /* padding: 8%;
  margin-left: 5%; */
  position: relative;
}

.s9-img-max {
  width: 40vw;
}

.s9-img-max img {
  max-width: 100%;
  width: 80%;
  /* margin-top: 15%; */
  margin-left: 15%;
  position: relative;
  z-index: 1;
  /* 
  background-color: #a58ca7; */
}

.s9-right-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* flex: 1; */
  padding: 0 8%;
  width: 60%;
  /* background-color: #742d65; */
}

.s9-title-cont h4 {
  font-family: var(--title-font-case);
  font-size: 3rem;
  font-weight: 700;
  color: #391e1e;
}

.s9-title-cont {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: row;
  width: 50vw;
  margin-left: 20%;
}

.s9-right-text {
  /* background-color: #d8d0c0; */
  margin-right: 5vw;
}

.s9-right-container p {
  font-size: 1.5rem;
  line-height: 1.5;
  /* background-color: #5a5454; */
  /* padding: 0 10%; */
  margin-left: 5%;
}

.s9-max-versions {
  display: flex; /* Define o layout flexível */
  margin-top: 5%;
  gap: 5px; /* Espaçamento entre as imagens */
  justify-content: center; /* Centraliza as imagens no container */
  width: 100%; /* O container ocupa toda a largura */
}

.s9-max-versions img {
  width: 300px; /* Define uma largura fixa para as imagens */
  height: 300px; /* Define uma altura fixa para garantir proporção */
  object-fit: contain; /* Mantém a proporção da imagem dentro do espaço definido */
}

/*                                                              end - Section 09 -  Professor Max                                                                       */

/*                                                                 Section 10 -  Tools and Process                                                                        */

.s10-container {
  position: relative; /* Base para posicionamento */
  background-image: url("/Assets/img/MEA/bg-quad.png"),
    url("/Assets/img/MEA/top-left-quadrado2.svg"),
    url("/Assets/img/MEA/bottom-right-quadrado2.svg");
  background-repeat: repeat, no-repeat, no-repeat;
  background-position: center, top left, bottom right;
  background-size: 100%, 4%, 4%;
  padding: 20px;
  /* background-color: #801d1d; */
  display: flex;
  flex-direction: row;

  height: fit-content;
  width: 100vw;
}

.s10-left-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 20px;
  width: 30vw;

  /* background-color: #7d7d9c; */
}

.s10-title-cont {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: row;
  width: 50vw;
  margin-left: 20%;
}

.s10-title-cont h4 {
  font-family: var(--title-font-case);
  font-size: 3rem;
  font-weight: 700;
  color: #391e1e;
}

.s10-right-container {
  display: flex;
  gap: 10px; /* Espaçamento entre os itens */
  padding: 20px;
  align-items: start;

  /* background-color: #6c6d8f; */
  align-items: center;
}

.s10-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 3 colunas */
  gap: 20px; /* Espaçamento entre itens */
  width: 100%; /* O grid ocupa toda a largura */

  padding: 8%;
  /* 
  background-color: #768f6c; */
}

.s10-item {
  font-family: var(--body-font);
  font-size: 1.5rem;
  line-height: 1.5;
  color: #333;

  padding: 5%;
  background-color: hsla(0, 0%, 100%, 0.5);
}

.s10-item img {
  width: 60px; /* Tamanho uniforme das imagens */
  height: 60px;
  object-fit: contain; /* Garante proporção */
  margin: 0 auto; /* Centraliza as imagens */
}

.s10-item .bold {
  font-weight: bold;
  color: #391e1e;
}

.s10-icon {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 30px;
}

/*                                                              end - Section 10 -  Tools and Process                                                                      */

/*                                                             Section 11 -  Soft Skills and Vision                                                                       */

.s11-container {
  position: relative; /* Necessário para posicionar os elementos corretamente */
  background-image: url(/Assets/img/MEA/top-right-quadrado.svg),
    url(/Assets/img/MEA/bottom-left-quadrado.svg);
  background-position: top right, bottom left;
  background-repeat: no-repeat;
  background-size: 4%; /* Quadriculado cobre 100%, quadrados em 4% */

  padding: 20px;
  /* background-color: #471919; */

  display: flex;
  flex-direction: row;
  height: 90vh;
  width: 100vw;
}

.s11-left-container {
  width: 50vw; /* Mantém o limite de 50% da largura */
  /* background-color: #161646; */
  display: flex; /* Permite centralizar o grid dentro do container */
  justify-content: center; /* Centraliza horizontalmente */
  align-items: center; /* Centraliza verticalmente */
  flex: 1;
}

.s11-box-container {
  display: grid; /* Ativa o layout de grid */
  grid-template-columns: repeat(2, 10vw); /* Cada coluna terá exatamente 20vw */
  grid-template-rows: repeat(2, 10vw); /* Cada linha terá exatamente 20vw */
  gap: 0.4vw; /* Espaçamento entre as células */
  /* background-color: #6969c0; */
  box-sizing: border-box; /* Garante que o padding não afete o tamanho total */
}

.s11-box img {
  width: 100%; /* A imagem ocupa todo o tamanho da célula */
  height: 100%; /* Garante que a imagem seja quadrada */
  object-fit: cover; /* Ajusta a imagem para caber sem distorção */
  /* background-color: #85c069; */
}

.s11-box {
  /* background-color: #c06995; */
  display: flex; /* Centraliza o conteúdo no centro da célula */
  justify-content: center;
  align-items: center;

  border: 1px outset #000000;
}

.s11-title-cont h4 {
  font-family: var(--title-font-case);
  font-size: 3rem;
  font-weight: 700;
  color: #391e1e;
}

.s11-title-cont {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: row;
  width: 50vw;
  margin-left: 20%;
}

.s11-right-container {
  display: flex;
  gap: 10px; /* Espaçamento entre os itens */
  padding: 20px;
  align-items: start;
  flex: 1;
  width: 50%;

  /* background-color: #6c6d8f; */
  align-items: center;
  flex-direction: column;
  justify-content: center;
}

.s11-right-text {
  /* background-color: #d8d0c0; */
  margin-right: 5vw;
}

.s11-right-container ul li {
  font-size: 1.5rem;
  line-height: 1.5;
  /* background-color: #5a5454; */
  padding: 0 10%;
  /* margin-left: 5%; */
}

/*                                                          end - Section 11 -  Soft Skills and Vision                                                                    */

/*                                                          Section 12 -  final                                                                    */
.s12-container {
  background-color: #dcd0b8; /* Cor da "borda" visível */
  width: 100vw;
  height: 90vh;
  display: flex;
  justify-content: center;
  align-items: center;

  background-image: url(/Assets/img/MEA/ih-frame2.svg);
  background-repeat: no-repeat;
  background-size: 95%; /* Ajusta o tamanho da imagem de fundo para 80% do tamanho da seção */
  background-position: center; /* Centraliza a imagem dentro do espaço disponível */
  box-sizing: border-box; /* Garante que o padding não afete as dimensões externas do container */
}

.s12-text h2 {
  font-family: var(--title-font-case);
  font-size: 3rem;
  font-weight: 700;
  color: #391e1e;
  text-align: center;

}

.s12-text {
  padding: 25%; /* Adiciona o espaçamento interno de 5% */


  display: flex;

  justify-content: center;
  align-items: center;
}
/*                                                          end - Section 12 -  final                                                                   */



/*                                                                    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;
}



/* Estilos para dispositivos com largura máxima de 768px (Tablets) */
@media (max-width: 768px) {
  body {
      font-size: 90%; /* Reduzir o tamanho da fonte */
  }

  main {
      width: 100vw; /* Ajustar a largura do conteúdo principal */
      padding: 0 5%;
  }

  .s1-desc-vi {
      flex-direction: column; /* Empilhar o vídeo e a descrição */
      align-items: center;
  }

  .s1-video {
      width: 100%; /* Ajustar largura para ocupar toda a tela */
      margin-right: 0;
  }

  .s1-description {
      width: 90%; /* Ajustar descrição para telas menores */
  }

  .s3-grid {
      grid-template-columns: 1fr; /* Alterar layout do grid para uma coluna */
      gap: 20px;
  }

  .s7-container {
      flex-direction: column; /* Ajustar layout visual para empilhamento */
      text-align: center;
  }

  .s7-left-container,
  .s7-right-container {
      width: 100%; /* Ajustar larguras para ocupar toda a tela */
  }

  .s7-r-container-img .separator {
      display: none; /* Ocultar separadores entre imagens */
  }
}

/* Estilos para dispositivos com largura máxima de 480px (Celulares) */
@media (max-width: 480px) {
  body {
      font-size: 80%; /* Reduzir ainda mais o tamanho da fonte */
  }

  .s1-h-title h3 {
      font-size: 2.5rem; /* Reduzir tamanho do título */
      text-align: center;
  }

  .s1-tag-ux h6,
  .s1-tag-product h6 {
      font-size: 0.8rem; /* Ajustar tamanho dos textos */
      width: auto;
      margin: 0 auto;
  }

  .s2-container {
      flex-direction: column; /* Alterar layout para empilhar seções */
  }

  .s2-left-container,
  .s2-right-container {
      width: 100%; /* Ajustar largura */
      padding: 5%; /* Ajustar espaçamento */
  }

  .s4-container-box {
      flex-direction: column; /* Empilhar os concorrentes */
      align-items: center;
      margin: 0;
  }

  .s4-container-box .s4-box01,
  .s4-container-box .s4-box02,
  .s4-container-box .s4-box03 {
      width: 80%; /* Ajustar largura das caixas */
      margin: 10px 0;
  }

  .s5-container {
      flex-direction: column; /* Empilhar seções */
  }

  .s5-left-container,
  .s5-right-container {
      width: 100%; /* Largura total */
      padding: 5%;
  }

  .s9-max-versions img {
      width: 80px; /* Reduzir tamanho das imagens */
      height: 80px;
  }

  .footer {
      text-align: center;
  }

  .thankyoumessage h2 {
      font-size: 2rem; /* Ajustar texto de agradecimento */
  }
}