@import url('reset.css');

body, .section-full, .container, .responsive-box {
  background-color: #41416E;
  width: 100vw;
  height: 95vh;
}

 html {
  scroll-behavior: smooth;
}

 header {
  margin-top: 2%;
  margin-bottom: 2%;
  overflow: auto;
} 

.headline {
  font-size: 5vw;
} 

.navegacao {
  display: flex;            /*Essa propriedade transforma o elemento em um flex container. Isso permite que os itens filhos (como links ou botões) sejam organizados de forma flexível dentro do container.*/
  flex-direction: column;   /* Muda a direção para coluna */
  align-items: left;        /*Essa propriedade alinha os itens verticalmente ao centro do container.*/
  justify-content: center;  /*Essa propriedade alinha os itens horizontalmente ao centro do container.*/
  /*column-gap: 5%;           Essa propriedade cria um espaço de 5% entre cada item, na direção da coluna.*/
  row-gap: 40px;            /* Ajusta o espaço entre os itens na coluna */
  list-style: none;         /*Essa propriedade remove os marcadores (bolinhas) que aparecem por padrão em listas não ordenadas.*/
  font-size: 20%;           /*Essa propriedade define o tamanho da fonte dos itens dentro da navegação como 20% do tamanho da fonte padrão.*/
}


.navegacao_link {
  font-size: 0.9rem;        /* Define o tamanho da fonte para 0.9rem*/
  letter-spacing: 0.125rem; /* Adiciona espaço entre as letras.*/
  transform: scale(1.2);    /* Aumenta o tamanho do texto em 20%.*/
   color: #BEBDD3;           /* Define a cor do texto */
  position: relative;       /* Define o contexto de posicionamento para possíveis posicionamentos absolutos ou fixos. */
  -webkit-text-stroke-width: 0.03125rem;  /* Adiciona um contorno ao redor do texto. */
  filter: drop-shadow(0px 0px 2px black); /* -webkit-text-stroke-color: #000;      Define a cor do contorno como preto. */
  /*transform: scale(1.2); comando repetido*/
  text-transform: uppercase;  /*  Converte o texto para letras maiúsculas. */
}

.navegacao_link:hover {
  color: white;
  font-weight: bold;
}


h2 {
  font-size: 200%;
  color: #33A8DB;
  font-weight: bold;
  letter-spacing: 0.25rem;
  text-align: center;
  text-transform: uppercase;
  margin-top: 1.5625rem;
  margin-bottom: 1.5625rem;
}

p {
  color: #BEBDD3;
}


section {
  margin: 6.25rem auto;
  width: 100%;
}


.banner {
  background-image: linear-gradient(rgba(0, 0, 0, .6), rgba(49, 168, 221, .2), rgba(0, 0, 0, .6));
  background-size: auto; /*Faz o gradiente se ajustar automaticamente ao tamanho do elemento.*/
  background-repeat: no-repeat; /* Impede que o gradiente se repita*/
  /*height: 40.625rem; /* Define a altura do banner em 40.625 rem (aproximadamente 650 pixels)*/
  width: 100%; /* Faz o banner ocupar 100% da largura do seu container.*/
  padding-top: 2rem; /* Adiciona um espaço de 2 rem (aproximadamente 32 pixels) na parte superior do banner*/ 
  border-bottom: 0.0625rem solid #33A8DB80; /* Adiciona uma borda sólida na parte inferior do banner com uma cor semi-transparente.*/
}

/*
.banner: Isso indica que o estilo a seguir se aplica a um elemento com a classe banner.
.banner-content: Dentro do elemento com a classe banner, estamos selecionando um elemento com a classe banner-content. 
Imagine que o banner é uma caixa e o banner-content é o conteúdo dentro dessa caixa.
*/
.banner .banner-content {
  color: #055153; /* Define a cor do texto dentro do banner como 7165f2*/
  width: 100vw; /*Faz com que o conteúdo do banner ocupe 100% da largura da viewport (tela do usuário). Isso significa que o conteúdo se ajustará ao tamanho da tela, seja ela grande ou pequena.*/
  margin: auto; /*Centraliza o conteúdo horizontalmente dentro do banner.*/
  text-align: center; /*Alinha o texto dentro do conteúdo do banner ao centro*/
  margin-top: 2%; /* Adiciona uma margem superior de 2% ao conteúdo, criando um espaço entre a parte superior do banner e o início do texto*/
}

/* Isso significa que o estilo a seguir se aplica a um elemento <h1> que está dentro de um elemento com a classe banner*/
.banner h1 {
  font-size: 2.5rem; /* Define o tamanho da fonte do título.*/
  font-weight: 900; /* Define a espessura da fonte como muito pesada (negrito)*/
  text-transform: uppercase; /* Converte todas as letras do título para maiúsculas.*/
  color: transparent; /* Torna o texto transparente.*/
  background: -webkit-linear-gradient(#27246F, #7D7BA8); /*Aplica um gradiente de cores ao fundo do texto.*/ 
  background-clip: text; /* Faz com que o gradiente de fundo se aplique apenas ao texto, criando um efeito de texto colorido. */
  -webkit-background-clip: text; /* Faz com que o gradiente de fundo se aplique apenas ao texto, criando um efeito de texto colorido. */
  -webkit-text-stroke-width: 0.03125rem; /* Adiciona um contorno ao redor do texto. */
  filter: drop-shadow(0px 0px 2px black); /* -webkit-text-stroke-color: #000;      Define a cor do contorno como preto. */
}

/* Esse trecho de CSS está estilizando um parágrafo (elemento <p>) dentro de um banner. */
.banner p {
  font-size: 1.25rem; /* Define o tamanho da fonte do parágrafo */
  margin: 1rem 0 1.5rem;
}

/* Isso significa que o estilo a seguir se aplica a um elemento com a classe logo que está dentro de um elemento com a classe banner*/
.banner .logo {
  background-color: rgba(0, 0, 0, .2); /*Define a cor de fundo do logo como um preto transparente. O valor rgba permite controlar a opacidade da cor*/
  height: 16.25rem; /* Define a altura e a largura do logo em 16.25 rem (aproximadamente 260 pixels). */
  width: 16.25rem; /* Define a altura e a largura do logo em 16.25 rem (aproximadamente 260 pixels).*/
  margin: auto; /*Centraliza o logo horizontalmente dentro do seu container (o banner).*/
  border-radius: 50%; /*Cria um formato circular para o logo */
  padding: 1rem; /*Adiciona um espaço interno de 1rem em todas as bordas do logo*/ 
  margin-bottom: 1rem; /*  Adiciona uma margem inferior de 1rem ao logo, criando um espaço entre o logo e o próximo elemento*/
  clip-path: polygon(50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 0% 60%, 10% 20%); /*Define uma forma personalizada para o logo*/
}

/*define a aparência e o comportamento da imagem do logo dentro do banner.*/
.banner .logo img {
  margin: auto; /* Centraliza a imagem horizontal e verticalmente dentro do seu container */
  width: 100%; /* Faz com que a imagem ocupe 100% da largura e altura do seu container, garantindo que ela se ajuste ao tamanho do elemento logo.*/ 
  height: 100%; /* Faz com que a imagem ocupe 100% da largura e altura do seu container, garantindo que ela se ajuste ao tamanho do elemento logo.*/
  object-fit: contain; /* Garante que a imagem inteira seja visível dentro do container, mantendo as proporções originais e sem distorcer a imagem*/
  /*drop-shadow: Adiciona uma sombra embaixo da imagem, com um desfoque de 10 pixels e uma cor azul clara semi-transparente. brightness: Aumenta o brilho da imagem em 20%.*/
  filter: drop-shadow(0 0 10px rgba(146, 193, 231, 0.8)) brightness(1.2); 
  clip-path: polygon(50% 0%, 85% 15%, 100% 50%, 85% 85%, 50% 100%, 15% 85%, 0% 50%, 15% 15%);
}

.social-icons {
  position: fixed;
  top: 50px; /* Ajuste conforme necessário */
  right: 50px; /* Ajuste conforme necessário */
  display: flex;
  flex-direction: column;
  align-items: center; /* Centralizar os ícones horizontalmente */  
}

.social-icon {
  position: relative;
  margin-bottom: 20px;
}

.social-icon img {
  width: 3.125rem;
  height: 3.125rem;
  filter: drop-shadow(0rem 0rem 0.625rem rgba(0, 255, 255, 0.5));
  transition: transform 0.3s;
}

.social-icon img:hover {
  transform: scale(1.2);
}


#main {
  width: 100%;
  padding: 2%;
}

#page-content {
  width: 90%;
  margin: 2rem auto;
  padding: 0 2%;
  text-align: center;
  background: rgb(11, 63, 93);
  background: radial-gradient(circle, rgba(11, 63, 93, 0.9248074229691877) 0%, rgba(0, 9, 0, 1) 100%);
  background-image: linear-gradient(rgba(0, 0, 0, .6), rgba(49, 168, 221, .2), rgba(0, 0, 0, .6));
  border-radius: 1.25rem;
  box-shadow: 0.3125rem 0.3125rem 0.3125rem 0.3125rem rgba(90, 86, 86, 0.5);
  overflow: auto;
}