@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-decoration: none;
  border: none;
  outline: none;
  scroll-behavior: smooth;
}

:root {
  --cor-background: #fff;
  --color-icones: #fff;
  --color-linhaVertical: #fff;
  --color-fonteBranca: #fff;
  --color-header: #e30613;
  --color-linhaFooter: #e30613;
  --color-borderIMG: #9a1915;
  --color-corLinha: #9a1915;
  --color-footer: #9a1915;
  --color-menu: #9a1915;
  --color-abaCheck: #9a1915;
  --color-fontePreto: #000;
  --color-aba: #e0e0e0;
  --color-citacao: #5B5859;
}

html {
  overflow-x: hidden;
}

body {
  background-color: #ffffffff;
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: 50;
  font-style: normal;
}

/* início do conteúdo tópicos */

/* Textos */

.titulo-PT {
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-size: 2rem;
  margin-bottom: 0;
  color: #000000;
}

.text-PT {
  font-family: "Montserrat", sans-serif;
  font-weight: 400;
  font-size: 1.2rem;
  text-align: justify;
  width: 90%;
}
/* Linhas */

#line-text-1-cul {
  margin-bottom: 1rem;
  height: 0.2rem;
  width: 34%;
  background-color: var(--color-corLinha);
  margin-left: 0.1rem;
}

#line-text-2-cul {
  margin-bottom: 1rem;
  height: 0.2rem;
  width: 31%;
  background-color: var(--color-corLinha);
  margin-left: 0.1rem;
}

#line-text-3-cul {
  margin-bottom: 1rem;
  height: 0.2rem;
  width: 31%;
  background-color: var(--color-corLinha);
  margin-left: 0.1rem;
}

#line-text-4-cul {
  margin-bottom: 1rem;
  height: 0.2rem;
  width: 19%;
  background-color: var(--color-corLinha);
  margin-left: 0.1rem;
}

#line-text-1-cid {
  margin-bottom: 1rem;
  height: 0.2rem;
  width: 37%;
  background-color: var(--color-corLinha);
  margin-left: 0.1rem;
}

#line-text-2-cid {
  margin-bottom: 1rem;
  height: 0.2rem;
  width: 33%;
  background-color: var(--color-corLinha);
  margin-left: 0.1rem;
}

#line-text-3-cid {
  margin-bottom: 1rem;
  height: 0.2rem;
  width: 25%;
  background-color: var(--color-corLinha);
  margin-left: 0.1rem;
}

#line-text-4-cid {
  margin-bottom: 1rem;
  height: 0.2rem;
  width: 24%;
  background-color: var(--color-corLinha);
  margin-left: 0.1rem;
}

#line-text-1-mov {
  margin-bottom: 1rem;
  height: 0.2rem;
  width: 51%;
  background-color: var(--color-corLinha);
  margin-left: 0.1rem;
}

#line-text-2-mov {
  margin-bottom: 1rem;
  height: 0.2rem;
  width: 19%;
  background-color: var(--color-corLinha);
  margin-left: 0.1rem;
}

#line-text-3-mov {
  margin-bottom: 1rem;
  height: 0.2rem;
  width: 35%;
  background-color: var(--color-corLinha);
  margin-left: 0.1rem;
}

#line-text-1-pol {
  margin-bottom: 1rem;
  height: 0.2rem;
  width: 34%;
  background-color: var(--color-corLinha);
  margin-left: 0.1rem;
}

#line-text-2-pol {
  margin-bottom: 1rem;
  height: 0.2rem;
  width: 29%;
  background-color: var(--color-corLinha);
  margin-left: 0.1rem;
}

#line-text-3-pol {
  margin-bottom: 1rem;
  height: 0.2rem;
  width: 27%;
  background-color: var(--color-corLinha);
  margin-left: 0.1rem;
}

#line-text-1-rev {
  margin-bottom: 1rem;
  height: 0.2rem;
  width: 38%;
  background-color: var(--color-corLinha);
  margin-left: 0.1rem;
}

#line-text-2-rev {
  margin-bottom: 1rem;
  height: 0.2rem;
  width: 40%;
  background-color: var(--color-corLinha);
  margin-left: 0.1rem;
}

#line-text-3-rev {
  margin-bottom: 1rem;
  height: 0.2rem;
  width: 26%;
  background-color: var(--color-corLinha);
  margin-left: 0.1rem;
}

#line-text-1-soc {
  margin-bottom: 1rem;
  height: 0.2rem;
  width: 62%;
  background-color: var(--color-corLinha);
  margin-left: 0.1rem;
}

#line-text-2-soc {
  margin-bottom: 1rem;
  height: 0.2rem;
  width: 54%;
  background-color: var(--color-corLinha);
  margin-left: 0.1rem;
}

#line-text-1-teo {
  margin-bottom: 1rem;
  height: 0.2rem;
  width: 32%;
  background-color: var(--color-corLinha);
  margin-left: 0.1rem;
}

#line-text-2-teo {
  margin-bottom: 1rem;
  height: 0.2rem;
  width: 34%;
  background-color: var(--color-corLinha);
  margin-left: 0.1rem;
}

/* Introdução */

.intro{
  display: flex;
  margin: 1.875rem 0;
  width: 100%;
  margin-top: 5rem;
}
.itens-text{
  display: flex;
  flex-direction: column;
}
.content-intro{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 80%;
  margin-left: 10rem;
  gap: 2rem;
}

.intro-img{
  display: flex;
  justify-content: space-between;
  margin: 1.875rem 0;
  width: 40%;
}

.PT-img{
  width: 18rem;
  height: 18rem;
  border-radius: 50%;
  object-fit: cover;
}


/* Conteúdo */

.line-intro{
  height: 5px;
  margin: 20px auto;
  width: 85%;
  background-color: var(--color-corLinha);
  margin-bottom: 5rem;
  margin-top: 8rem;
}

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

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

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

.movimentos-sociais{
  display: flex;
  flex-direction: column;
  align-items: center;
}

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

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

.container{
  display: flex;
  flex-direction: column;
  width: 90%;
  margin-left: 9.31rem;
}

.content{
  margin-top: 2rem;
  margin-bottom: 3rem;
}

@media screen and (max-width: 767px) {
  .intro {
    display: flex;
    flex-direction: row;
    margin: 2rem 0;
    margin-top: 4rem;
    width: 100%;
  }
  .text-PT{
    width: 100%;
  }
  .content-intro {
    display: flex;
    flex-direction: column;
    width: 85%;
    margin-left: 2rem;
  }

  .intro-img {
    width: 30%;
    margin: 2rem 0;
    justify-content: center;
  }
  

  .PT-img {
    display: flex;
    align-items: center;
    margin-left: 16rem;
    width: 15rem;
    height: 15rem;
  }

  .line-intro {
    width: 80%;
  }

  .cultura,
  .cidadania,
  .movimentos-sociais,
  .politica,
  .revolucao,
  .sociedade-contemporanea,
  .teoria {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0;
  }

  .container {
    width: 95%;
    padding: 0 1rem;
    margin-left: 1rem;
  }

  .content {
    margin-top: 2rem;
    margin-bottom: 3rem;
  }
  .img-ajuste{
    display: flex;
    flex-direction: column;
  }
}