@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;700&display=swap');

:root{
  --verde-header: #2E948A;
  --verde-footer: #419488;
  --verde-azulado: #009688;
  --cinza-retangulo: #C4C4C4;
  --cinza-bg: #F6F6F6;
  --rosa: #FF4081;
}

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  list-style: none;
  font-family: 'Ubuntu', sans-serif;
  overflow-x: hidden;
  scroll-behavior: smooth;
}

a{
  text-decoration: none;
}

hr{
  height: 5px;
  background-color: var(--cinza-retangulo);
  border: none;
  border-radius: 20px;
}

.container{
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
}
            /* Container para ser reusado */

            /*  SECTION HEADER COMEÇA AQUI */

header {
  width: 100vw;
  height: 117px;
  background-color: var(--verde-header);
  box-shadow: 0px 3px 7px rgba(0, 0, 0, 0.25);
}

header .nav-container{
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
  width: 90%; 
  max-width: 1255px;
  margin: 0 auto;
  
}
/* Se a tela for menor que 1255px, o container vai ter width de 90% do tamanho todo da tela; se for maior, terá o máximo de 1255px */

header .nav-container nav a{
  text-transform: uppercase;
  color: #FDFDFD;
  font-size: 20px;
  font-weight: 700;
  margin: 15px;
  /* padding: 15px; */
  transition: all 0.3s ease;
}

header .nav-container nav a:hover{
  color: #C4C4C4;
}

            /*  SECTION HEADER TERMINA AQUI */

            /*  SECTION 1º MAIN COMEÇA AQUI */

.first-main{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 1028px;
  margin: 125px auto 66px auto;
}

.first-main .title h1{
  font-size: 60px;
  font-weight: 700;
  color: var(--rosa);
  margin-bottom: 19px;
  width: 488px;
}

.first-main .title p{
  font-size: 27px;
  color: #555555;
  margin-bottom: 38px;
}

.first-main .title .sabermais-btn{
  background-color: #fff;
  color: var(--rosa);
  border: 2px solid #FF4081;
  border-radius: 62px;
  padding: 8.5px 26px;
  font-size: 26px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.first-main .title .sabermais-btn:hover{
  background-color: var(--rosa);
  color: #fff;
}

.first-main img{
  width: 501px;
  /* height: 511px; */
}

            /*  SECTION 1º MAIN TERMINA AQUI */

            /*  SECTION 2º MAIN COMEÇA AQUI */

.second-main{
  width: 100vw;
  /* height: 730px; */
  background-color: var(--cinza-bg);
  display: flex;
}

.second-main .container{
  display: flex;
  gap: 121px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 109px;
  margin-bottom: 119px;
}

.second-main .container .ilustracao{
  /* height: 502px; */
  width: 300px;
  text-align: center;

}

.second-main .container .ilustracao img{
  height: 270px;
  margin-bottom: 43px;
}

.second-main .container .ilustracao h4{
  font-size: 25px;
  font-weight: 700;
  color: var(--rosa);
  margin-bottom: 23px;
}

.second-main .container .ilustracao p{
  font-size: 17px;
  margin-bottom: 27px;
}

.second-main .container .ilustracao .ilustracao-btn{
  background-color: var(--rosa);
  color: #fff;
  border-radius: 62px;
  border: 2px var(--rosa) solid;
  outline: none;
  padding: 15px 9px;
  width: 230px;
  font-size: 20px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.second-main .container .ilustracao .ilustracao-btn:hover{
  background-color: #fff;
  color: var(--rosa);
}

            /*  SECTION 2º MAIN TERMINA AQUI */

            /*  O QUE FALAM SOBRE NÓS COMEÇA AQUI */

.talk-about-us{
  /* height: 700px; */
  margin-top: 119px;
  margin-bottom: 155px;
}

.talk-about-us .container{
  display: flex;
  flex-direction: column;
  /* justify-content: center; */
  max-width: 1087px;
  width: 90%;
  align-items: flex-start;
  position: relative;
  left: -25px;
}

.talk-about-us h1{
  position: relative;
  left: 0px;
  top: 0;
  font-weight: 700;
  font-size: 37px;
  font-family: 'Nunito';
  color: var(--verde-azulado);
  text-transform: uppercase;
  margin-bottom: 78px;

}

.talk-about-us .grid-section{
  display: grid;
  grid-template-columns: repeat(2, 500px);
  grid-template-rows: repeat(2, auto);
  column-gap: 97px;
  row-gap: 86px;
}

.talk-about-us .grid-section .grid{
  display: flex;
}

.talk-about-us .grid-section .grid img{
  margin-right: 28px;
  width: 104px;
  height: 104px;
}

.talk-about-us .grid-section .grid .grid-text{
  width: 380px;
  line-height: 25px;
  font-weight: 300;
  font-size: 18px;
}

.talk-about-us .grid-section .grid .grid-text .person-name{
  font-weight: bold;
}

            /*  O QUE FALAM SOBRE NÓS TERMINA AQUI */

            /*  MAIS CONTEÚDO COMEÇA AQUI */

.mais-conteudo{
  /* height: 750px; */
  padding-top: 91px;
  padding-bottom: 53px;
  background-color: var(--cinza-bg);
}

.mais-conteudo .container{
  display: flex;
  flex-direction: column;
  /* height: 100%; */
  max-width: 1200px;
  width: 90%;
}

.mais-conteudo .container h1{
  font-weight: 700;
  font-size: 37px;
  color: var(--verde-azulado);
  text-transform: uppercase;
}

.mais-conteudo .container .ver-posts{
  width: 289px;
  margin-bottom: 53px;
}

.mais-conteudo .conteudo-container{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 109px;
  align-items: center;
  margin-top: 73px;
  margin-bottom: 101px;
}

.mais-conteudo a{
  align-self: center;
}

.mais-conteudo a .ver-posts{
  /* align-self: center; */
  align-items: center;
  background-color: #fff;
  color: var(--rosa);
  border: 2px solid #FF4081;
  border-radius: 62px;
  padding: 8.5px 26px;
  font-size: 26px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.mais-conteudo .ver-posts:hover{
  background-color: var(--rosa);
  color: #fff;
}

.mais-conteudo .conteudo-container .conteudo{
  width: 319px;
}

.mais-conteudo .conteudo-container .conteudo img{
  margin-bottom: 11px;
}

.mais-conteudo .conteudo-container .conteudo .titulo{
  font-weight: 700;
  font-size: 27px;
  color: var(--verde-azulado);
}

.mais-conteudo .conteudo-container .conteudo .descricao{
  font-size: 18px;
}

            /*  MAIS CONTEÚDO TERMINA AQUI */

            /*  FOOTER COMEÇA AQUI */

footer{
  width: 100vw;
  background-color: var(--verde-footer);
}

footer .container{
margin: 30px auto;
  max-width: 1255px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

footer .container .footer-links{
  display: flex;
  flex-direction: column;
}

footer .container .footer-links a{
  font-size: 20px;
  padding: 5px;
  font-family: 'Ubuntu';
  color: #fff;
}

footer .container .footer-btn{
  display: flex;
  flex-direction: column;
  
}

footer .container .footer-btn button{
  background-color: var(--verde-azulado);
  color: #fff;
  border: 2px solid #fff;
  border-radius: 62px;
  padding: 14px;
  margin: 13px;
  width: 289px;
  font-size: 20px;
  cursor: pointer;
}

            /*  FOOTER TERMINA AQUI */

            /* PÁGINA CURSOS.HTML COMEÇA AQUI */
main{
  font-family: 'Ubuntu';
}
.cursos-title h1{
  font-weight: 700;
  font-size: 60px;
  margin-top: 81px;
  color: var(--rosa);
}

.cursos-title p{
  font-size: 20px;
  color: #555555;
}

.cursos-container .curso-options{
  display: grid; 
  grid-template-columns: 1fr 2fr; 
  gap: 53px;
  align-items: center;
  margin-top: 40px;
  margin-bottom: 68px;
}

.cursos-container .curso-options img{
  padding: 53px 0;
}

.cursos-container .curso-options .options-txt h4{
  font-weight: 700;
  font-size: 35px;
  color: var(--rosa);
  margin-bottom: 37px;
}

.cursos-container .curso-options .options-txt p{
  font-weight: 300;
  font-size: 18px;
  margin-bottom: 53px;
}

.cursos-container .curso-options .options-txt button{
  align-self: center;
  background-color: var(--verde-footer);
  color: #fff ;
  border-radius: 62px;
  border: none;
  width: 216px;
  padding: 13px 8px;
  font-size: 20px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.cursos-container .curso-options .options-txt button:hover{
  background-color: #1a7e6f;
}

            /* PÁGINA CURSOS.HTML TERMINA AQUI */

            /* RESPONSIVIDADE */

@media (max-width: 1100px){
  .first-main .title{
    text-align: center;
    margin-top: 0;
  }
  .first-main .title .sabermais-btn{
    margin-bottom: 30px;
  } 
  .first-main img{
    display: none;
  }

  .talk-about-us .container{
    align-items: center;
  }
  .talk-about-us .grid-section{
    grid-template-columns: 600px;
    grid-template-rows: repeat(4, auto);
  }
  .talk-about-us .grid-section .grid{
    width: 800px;
  }
  .talk-about-us .grid-section .grid .grid-text{
    width: 481px;
  }
  .mais-conteudo .container h1{
    text-align: center;
  }

            /* Página Cursos */

  .cursos-container .curso-options img{
    width: 250px;
  }
}

@media (max-width:850px){
  footer .container img{
    width: 200px;
  }
  footer .container .footer-btn button{
    font-size: 14px;
    width: 180px;
  }
}


@media (max-width:680px){
  .first-main .title h1{
    font-size: 38px;
    width: 250px;
  }
  .first-main .title p{
    font-size: 18px;
  }
  .first-main .title .sabermais-btn{
    font-size: 18px;
  }

  .talk-about-us .container{
    left: 0;
  }
  .talk-about-us h1{
    text-align: center;
    font-size: 32px;
  }
  .talk-about-us .grid-section{
    grid-template-columns: 400px;
    grid-template-rows: repeat(4, auto);
  }
  .talk-about-us .grid-section .grid{
    width: 600px;
  }
  .talk-about-us .grid-section .grid .grid-text{
    width: 270px;
  }

  header{
    height: 150px;
  }
  header .nav-container{
    flex-direction: column;
    justify-content: space-evenly;
  }
  header .nav-container nav a{
    font-size: 14px;
  }

            /* Página Cursos */

  .cursos-container .curso-options{
    display: flex;
    text-align: center;
  }
  .cursos-container .curso-options img{
    display: none;
  }
}

@media (max-width:580px){
  footer .container{
    flex-direction: column;
  }
  footer .container .footer-links{
    flex-direction: row;
    margin: 15px auto;
  }
  footer .container .footer-btn button{
    margin: 4px;
    width: 260px;
  }
}

@media (max-width:430px){
  .talk-about-us .grid-section{
    grid-template-columns: 250px;
    grid-template-rows: repeat(4, auto);
    text-align: center;
  }
  .talk-about-us .container .grid-section .grid img{
    display: none;
  }
}