@charset "UTF-8";

* {
      margin: 0;
      padding: 0;
      font-family: "europa", sans-serif;
}

body {
      font-size: 18px;
}


.hero.is-white {
      background-color: #ffffff;
      color: #0a0a0a;
}

.hero {
      padding-top: 2rem;
}

.hero {
      align-items: stretch;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
}

.has-text-centered {
      text-align: center !important;
}

.hero-body {
      flex-grow: 1;
      flex-shrink: 0;
      padding: 3rem 1.5rem;
}

.container {
      flex-grow: 1;
      margin: 0 auto;
      position: relative;
      width: auto;
}

.columns .is-centered {
      justify-content: center;
}

.columns:last-child {
      margin-bottom: -0.75rem;
}

.columns {
      margin-top: -0.75rem;
}

.tabs:not(:last-child),
.pagination:not(:last-child),
.message:not(:last-child),
.level:not(:last-child),
.breadcrumb:not(:last-child),
.block:not(:last-child),
.title:not(:last-child),
.subtitle:not(:last-child),
.table-container:not(:last-child),
.table:not(:last-child),
.progress:not(:last-child),
.notification:not(:last-child),
.content:not(:last-child),
.box:not(:last-child) {
      margin-bottom: 1.5rem;
}

.title {
      color: #141c3a;
      font-weight: 800;
}

.hero.is-white .title {
      color: #141c3a;
}

.hero.is-white .title {
      color: #0a0a0a;
}

.subtitle {
      font-size: 20px;
      font-weight: 500;
      padding: 0 15%;
}

.avatar {
      margin: 0 auto;
      width: 150px;
}

img {
      height: auto;
      max-width: 100%;
}


.hero-foot {
      padding: 0rem 1.5rem;
}

.hero-head,
.hero-foot {
      flex-grow: 0;
      flex-shrink: 0;
}

.secao {
      margin: auto;
      margin-top: -9rem;
      text-align: center;
      width: 95%;
}

.box {
      display: flex;
      justify-content: space-between;
      border-radius: 12px;
      margin: 0 auto;
      position: relative;
      border: 1px solid rgba(128, 128, 128, 0.233);
      background-color: #ffffff;
}

.texto {
      padding: 1rem;
}

.texto img {
      margin: 0 auto;
}

.h2-box {
      vertical-align: inherit;
      margin-top: 50px;
      color: #6E07F3;
}


.container-projetos {
      text-align: center;
      margin-top: 9rem;
      height: 1000px;
      margin: 20px 100px;

      display: grid;
      /* grid-template-columns: 1fr 1fr 1fr; */
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: 1fr 1fr 1fr;
      gap: 20px;
      justify-items: center;
}

.card {
      width: 100%;
      background-color: #ffffff;
      border: 1px solid #E6ECF8;
      border-radius: 18px;
      padding: 30px 30px;
      box-shadow: 0 5px 5px 0 rgba(233, 240, 243, 0.5), 0 0 0 1px #E6ECF8;
}

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

.span-repos {
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 0 auto;
      width: 180px;
      margin-top: 1rem;
      background-color: #ebf5ff;
      color: #0068d1;
      border-radius: 4px;
}

.container-whats {
      text-align: center;
      margin: 10% 0;
}

.whats {
      display: flex;
      justify-content: center;
      margin: auto;
}

.botao-a{
      display: flex;
      justify-content: center;
      align-items: center;
      width: 40%;
      margin-top: 50px;
      border: 1px solid #6E07F3;
      color: #6E07F3;
      border-radius: 4px;
      height: 2.5rem;
}

.botao-a:hover{
      background-color: #6E07F3;
      color: #ffffff;
}

.centralizar{
      margin-top: 5%;
      display: flex;
      justify-content: center;
}

.circulo{
      margin-right: 30px;
      border: 2px solid #ffffff67;
      padding: 0.5em;
      border-radius: 100%;
      cursor: pointer;

}

.circulo:hover{
      background-color: #ffffff33;
      border-color: #ffffff96;
      transition: 0.5s;
}


/* midia */

@media screen and (max-width:1024px) {
      .media-grid {
            margin-bottom: 50rem;
      }
}

@media screen and (max-width:860px) {
      
      .texto{
            padding: 0;
      }

      .media-grid{
            margin-top: 0;
      }
      
      .container-projetos{
            margin-bottom: 0;
            display: inline-block;
            margin: 0;
      }

      .botao-a{
            width: 100%;
      }
      .botao-a:hover{
            background-color: #ffffff;
            color: #0a0a0a;
      }
}