/* CONFIGURAÇÃO BÁSICA DO CSS */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;  
}

html,
body {
  font-family: 'Manrope', sans-serif;
  font-size: 16px;
  width: 100%;
  height: 100%;
}

.container {
  text-align: center;
  margin: 0 auto;
  padding: 4rem 6.5rem;
  width: 100%;
  max-width: 1200px;
}

/* Configuração Geral de fonte - cor - botões */
h1{
  font-size: 3rem;
  font-weight: 600;
}

h2 {
  font-size: 2rem;
  font-weight: 600;
  margin: 0;
}



/* ************************************** */
/* CONFIGURAÇÃO DO ARQUIVO ATUAL DO SITE */
/* inicio do main */

#presentation-container {
  padding: 2.5rem 7.5rem;
  height: 100vh;
  background-image: url(../assets/background.png);
  background-size: cover;
  background-repeat: no-repeat;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

#presentation {
  width: 600px;
}

#contact {
  text-align: center;
}

.contact-title {
  margin-top: 0.5rem;
}

.container > p {
  margin-top: 1.2rem;
}

.background-red {
  background-color: #f84646;
  color: #fff;
  text-align: center;
}

.background-grey {
  background-color: #f4f5f7;
}

.background-gradient {
  background: linear-gradient(180deg, #fff, #978989);
}

#qualities {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 3rem;
}

#qualities > img {
  margin: 0 1.5rem;
}

.article-container {
  display: flex;
  margin: 2rem 1rem;
}

.article-container:nth-child(even) {
  flex-direction: row-reverse;
}

.article-container > img {
  width: 40%;
  height: 40%;
}

.article-details {
  display: flex;
  flex-direction: column;
  text-align: left;
  align-items: flex-start;
  justify-content: space-between;
  padding: 0 1rem;
}

.article-details > button {
  margin-top: 1rem;
  transition: opacity 0.5s ease-in-out, transform 0.5s .2s;
}

.article-details > button:hover {
  opacity: 0.8s;
  transform: scale(1.1);
}

button {
  background-color: #f84646;
  color: #fff;
  font-weight: 500;
  font-size: 1.2rem;
  padding: 0.5rem 1.5rem;
  border-radius: 0.5rem;
  border: none;
  cursor: pointer;
}

.container > button {
  margin-top: 1rem;
  transition: opacity 0.5s ease-in-out, transform 0.5s .2s;
}

.container > button:hover {
  opacity: 0.8s;
  transform: scale(1.1);
}

.grid-container {
  display: grid;
  gap: 8rem;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 8rem;
}

.grid-item {
  padding: 20px;
  text-align: center;
}

.grid-item > p {
  font-size: 1.8rem;
  font-weight: 300;
  margin-top: 0.8rem;
}

.grid-container-companies {
  display: grid;
  gap: 1.4rem;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(3, 1fr);
  margin-top: 3rem;
  justify-items: center;
  align-items: center;
}

.grid-item-companies {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background-color: #fff;
  border-radius: 1.6rem;
}

.item-1 {
  grid-area: 3 / 1;
}
.item-2 {
  grid-area: 2 / 2;
}
.item-3 {
  grid-area: 3 / 2;
}
.item-4 {
  grid-area: 1 / 3;
}
.item-5 {
  grid-area: 2 / 3;
}
.item-6 {
  grid-area: 3 / 3;
}
.item-7 {
  grid-area: 2 / 4;
}
.item-8 {
  grid-area: 3 / 4;
}
.item-9 {
  grid-area: 3 / 5;
}

.footer-list {
  display: flex;
  text-align: left;
  justify-content: space-between;
}

.footer-list > ul > li{
  list-style: none;
  margin-bottom: 1rem;
}

.footer-list > ul > li:first-child{
  font-weight: bold;
  margin-bottom: 1rem;
}

.footer-list > ul > li:last-child{
  margin-bottom: 0;
}

.redes-social {
  display: flex;
  justify-content: space-between;
  margin-top: 3rem;
  align-items: center;
}

.redes-social > .rede{
  display: flex;
  justify-content: space-between;
}



/* ************************************** */
/* Inicio das medias screen */
/* max-width:  */
@media only screen and (max-width: 767px) {
  h1 {
    font-size: 2.2rem;
  }

  h2 {
    font-size: 1.4rem;
  }

  p {
    font-size: 1rem;
  }

  footer {
    padding: 4.4rem 1.6rem;
    background-color: #f84646;
    font-size: 1rem;
    color: #fff;
  }

  footer > section {
    flex-direction: column;
  }

  #presentation-container {
    padding: 2rem 1.6rem;
    max-height: 30rem;
    text-align: center;
  }

  #blog > article {
    flex-direction: column-reverse;
  }

  #blog > article:nth-child(even) {
    flex-direction: column-reverse;
  }

  #blog > article > .article-detail {
    margin: 1.4rem 0 0;
  }

  #blog > article:nth-child(even) > div {
    margin: 1.4rem 0 0;
  }

  #blog > article > img {
    width: 100%;
  }

  .grid-container {
    grid-template-columns: 1fr;
  }

  .container {
    padding: 4.4rem 1.6rem;
    text-align: center;
    display: flex;
    flex-direction: column;
  }

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

  #contact > img {
    width: 30%;
    height: 30%;
  }

  section.container .article-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 2rem 1rem;
  }

  section.container .article-container img{
    margin-top: 2rem;
  }

  .qualities {
    flex-direction: column;
    margin-top: 3.6rem;
  }

  .qualities > img {
    transform: rotate(90deg);
    margin: 2rem 0;
  }

  .grid-container-companies {
    grid-template-columns: 1fr;
    grid-template-rows: none;
  }

  .grid-item-companies {
    height: 3.6rem;
  }

  .item-1 {
    grid-area: auto;
  }
  .item-2 {
    grid-area: auto;
  }
  .item-3 {
    grid-area: auto;
  }
  .item-4 {
    grid-area: auto;
  }
  .item-5 {
    grid-area: auto;
  }
  .item-6 {
    grid-area: auto;
  }
  .item-7 {
    grid-area: auto;
  }
  .item-8 {
    grid-area: auto;
  }
  .item-9 {
    grid-area: auto;
  }

  .footer-copyright {
    flex-direction: column-reverse;
    align-items: center;
  }

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

@media only screen and (min-width: 768px) and (max-width: 1023px) {
  h1 {
    font-size: 3.6rem;
  }

  h2 {
    font-size: 2.8rem;
  }

  .presetation-description {
    font-size: 1rem;
  }

  .qualities {
    font-size: 1rem;
    font-weight: 700;
  }

  .grid-container {
    grid-template-columns: repeat(2, 1fr);
  }

  .grid-container-companies {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: none;
  }

  .item-1 {
    grid-area: auto;
  }
  .item-2 {
    grid-area: auto;
  }
  .item-3 {
    grid-area: auto;
  }
  .item-4 {
    grid-area: auto;
  }
  .item-5 {
    grid-area: auto;
  }
  .item-6 {
    grid-area: auto;
  }
  .item-7 {
    grid-area: auto;
  }
  .item-8 {
    grid-area: auto;
  }
  .item-9 {
    grid-area: auto;
  }
}