/*Inicio Video*/

.full-width-video {
  position: relative;
  width: 100%;
  overflow: hidden; /* Garante que o vídeo não saia da área */
}

.full-width-video video {
  width: 100%; /* Faz o vídeo ocupar toda a largura disponível */
  height: auto; /* Mantém a proporção do vídeo */
  object-fit: cover; /* Garante que o vídeo preencha o container */
}

#myVideo {
  display: block;
}
/* Fim Video*/


/* Estilos gerais para o container */
.icons-container {
display: flex;
gap: 40px; /* Espaço entre os itens */
justify-content: center; /* Alinha os itens no centro */
text-align: center;
flex-wrap: wrap; /* Permite que os itens se movam para a linha seguinte em telas pequenas */
padding: 20px;
}

/* Estilos gerais para os itens */
.icon-item {
display: flex;
flex-direction: column;
align-items: center;
}

/* Estilos para ícones */
.icon-item i {
font-size: 4rem; /* Ajuste o tamanho do ícone */
margin-bottom: 10px; /* Espaçamento entre o ícone e o texto */
}

/* Responsividade para telas pequenas (ex: smartphones) */
@media screen and (max-width: 768px) {
.icons-container {
  gap: 20px; /* Menor espaçamento entre os itens */
}

.icon-item {
  flex: 1 1 45%; /* Os itens ocupam até 45% da largura, permitindo dois itens por linha */
  margin-bottom: 20px; /* Espaço entre as linhas */
}

.icon-item i {
  font-size: 3rem; /* Reduz o tamanho do ícone em telas menores */
}
}

/* Responsividade para telas muito pequenas (ex: smartphones verticais) */
@media screen and (max-width: 480px) {
.icons-container {
  gap: 30px; /* Menor espaçamento entre os itens */
}

.icon-item {
  flex: 1 1 100%; /* Os itens ocupam 100% da largura da tela */
  margin-bottom: 15px;
}

.icon-item i {
  font-size: 2.5rem; /* Ajuste do ícone para telas muito pequenas */
}
}



article {
--img-scale: 1.001;
--title-color: black;
--link-icon-translate: -20px;
--link-icon-opacity: 0;
position: relative;
border-radius: 16px;
box-shadow: none;
background: #111;
transform-origin: center;
transition: all 0.4s ease-in-out;
overflow: hidden;
}

article a::after {
position: absolute;
inset-block: 0;
inset-inline: 0;
cursor: pointer;
content: "";
}


figure {
margin: 0;
padding: 0;
aspect-ratio: 16 / 9;
overflow: hidden;
}

article img {
max-width: 100%;
transform-origin: center;
transform: scale(var(--img-scale));
transition: transform 0.4s ease-in-out;
}

.corpo-artigo {
padding: 24px;
}

article a {
display: inline-flex;
align-items: center;
text-decoration: none;
color: #28666e;
}

article a:focus {
outline: 1px dotted #28666e;
}

article a .icone {
min-width: 24px;
width: 24px;
height: 24px;
margin-left: 5px;
transform: translateX(var(--link-icon-translate));
opacity: var(--link-icon-opacity);
transition: all 0.3s;
}

/* Pseudo-seletor relacional para efeitos de hover */
article:has(:hover, :focus) {
--img-scale: 1.1;
--title-color: #28666e;
--link-icon-translate: 0;
--link-icon-opacity: 1;
box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
}

/* Layout genérico */
.artigos {
display: grid;
max-width: 1200px;
margin-inline: auto;
padding-inline: 24px;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 24px;
}

/* Responsividade para telas menores */
@media screen and (max-width: 960px) {
article {
container: card/inline-size;
}

.artigo-wrapper {
display: flex;
flex-direction: column; /* Coloca imagem acima do conteúdo */
gap: 16px; /* Espaço entre a imagem e o conteúdo */
width: 90%; /* Reduz a largura do card */
margin: 0 auto; /* Centraliza o card */
}

figure {
width: 100%;
height: auto;
}

figure img {
width: 100%;
height: auto;
object-fit: cover;
}

.corpo-artigo {
padding-left: 0;
padding-top: 16px; /* Ajusta o padding para o corpo do artigo */
}

/* Reduzindo o tamanho da fonte do título e do texto */
.corpo-artigo h4 {
font-size: 1.2rem;
}

.corpo-artigo p {
font-size: 0.9rem; /* Reduz o tamanho do texto para telas pequenas */
}
}

/* Layout para telas maiores */
@container card (min-width: 380px) {
.artigo-wrapper {
display: grid;
flex-direction: column; /* Coloca imagem acima do conteúdo */  /* 100px 1fr; Imagem à esquerda e conteúdo à direita */
gap: 16px;
width: 100%; /* Ajuste para telas maiores */
}

.corpo-artigo {
padding-left: 0;
}

figure {
width: 100%;
height: 100%;
overflow: hidden;
}

figure img {
height: 100%;
aspect-ratio: 1;
object-fit: cover;
}
}

/* Acessibilidade para ocultar elementos apenas da tela */
.somente-leitura:not(:focus):not(:active) {
clip: rect(0 0 0 0);
clip-path: inset(50%);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
}















.impacto {
  display: flex;
  align-items: center;    /* Centraliza verticalmente os itens */
  justify-content: center;/* Centraliza horizontalmente */
  gap: 10px;              /* Espaço entre os elementos */
  font-size: 40px;        /* Tamanho da fonte para "Impacto" */
  color: #fff;
}

.linha {
  width: 300px;            /* Define uma largura fixa para as linhas */
  height: 2px;            /* Espessura da linha */
  background-color:#fff;/* Cor da linha */
}



.highlight {
color: #7BB0FF; /* Cor para Prêmios e Parcerias */
font-size: 40px;
text-align: center;
}
.white {
color: #FFFFFF; /* Cor branca para "e" */
font-size: 50px;
font-weight: bold;
text-align: center;
}


/*RESPONSABILIDADE SOCIAL */
.responsabilidade{
  color: #FFF; /* Cor para Prêmios e Parcerias */
  font-size: 40px;
  text-align: center;
}

.social{
  color: #7BB0FF; /* Cor para Prêmios e Parcerias */
  font-size: 40px;
  text-align: center;
}




/*seta vertical depois de impacto*/
@media (max-width: 1200px) {
svg {
  width: 90%; /* Reduz o tamanho em telas menores */
}
}

@media (max-width: 768px) {
svg {
  width: 80%; /* Ajusta ainda mais o tamanho para dispositivos pequenos */
}
}

@media (max-width: 480px) {
svg {
  width: 70%; /* Para telas muito pequenas, o SVG ficará um pouco menor */
}
}




/*Carousel */

/* Estilo geral da seção do carrossel */
.splide {
max-width: 100%;
margin: 0 auto; /* Centraliza o carrossel horizontalmente */
overflow: hidden; /* Esconde o conteúdo que ultrapassar a largura da tela */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Efeito de sombra */
}

/* Estilo da lista de slides */
.splide__list {
display: flex;
padding: 0;
margin: 0;
list-style: none; /* Remove bullets */
transition: transform 0.3s ease-in-out; /* Efeito suave na transição entre slides */
}

/* Estilo dos itens do slide */
.splide__slide {
min-width: 100%; /* Garante que cada imagem ocupe a tela inteira */
box-sizing: border-box;
position: relative;
}

/* Estilo das imagens dentro dos slides */
.splide__slide img {
width: 100%;
height: 700px; /* Define uma altura fixa para as imagens */
object-fit: cover; /* Faz com que a imagem preencha o container, cortando se necessário */
display: block;


}

/* Estilo para o carrossel em dispositivos menores */
@media (max-width: 768px) {
.splide__slide img {
  height: 300px; /* Altura menor em dispositivos móveis */
  border-radius: 0; /* Remove os cantos arredondados em telas menores */
}
}

/* Controles de navegação do carrossel */
.splide__arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
background-color: rgba(0, 0, 0, 0.5);
color: white;
border: none;
padding: 10px;
cursor: pointer;
z-index: 10;
}

.splide__arrow--prev {
left: 10px;
}

.splide__arrow--next {
right: 10px;
}

.splide__pagination {
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 8px;
}

.splide__pagination__page {
width: 12px;
height: 12px;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.5);
cursor: pointer;
float:center;
}

.splide__pagination__page.is-active {
background-color: white;
}


/* Fim Carousel*/


/*Cards dos projectos*/
:root {
/* Cores */
--brand-color: hsl(46, 100%, 50%);
--black: hsl(0, 0%, 0%);
--white: hsl(0, 0%, 100%);
}

.projects-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(480px, 1fr)); /* 2 cards por linha */
gap: 40px;
max-width: 1000px;
margin: 0 auto;
}

/* CARD COMPONENT */
.card {
display: grid;
place-items: center;
width: 500px;  /* Ajuste para 100% da largura do container */
max-width: 80rem; /* Largura máxima */
height: 30rem; /* Altura para as cards */
max-height: 50rem; /* Limita a altura máxima */
overflow: hidden;
border-radius: 0.625rem;
box-shadow: 0.25rem 0.25rem 0.75rem rgba(0, 0, 0, 0.10);
transition: transform 300ms ease-in-out;
border: none;
gap: 20px;
}

.card > * {
grid-column: 1 / 2;
grid-row: 1 / 2;
}

.card__background {
object-fit: cover;  /* Garante que as imagens cubram a área sem distorcer */
width: 100%;        /* A imagem ocupa 100% da largura da card */
height: 100%;       /* A altura será ajustada para preencher a card */
}

.card__content {
--flow-space: 0.9375rem;
display: flex;
flex-direction: column;
justify-content: space-between;
align-self: flex-end;
height: 55%;
padding: 12% 1.25rem 1.875rem;
background: linear-gradient(
  180deg,
  hsla(0, 0%, 0%, 0) 0%,
  hsla(0, 0%, 0%, 0.3) 10%,
  hsl(0, 0%, 0%) 100%
);
}

.card__content--container {
--flow-space: 1.25rem;
}

.card__title {
position: relative;
width: fit-content;
width: -moz-fit-content; /* Prefixo para Firefox */
}

.card__title::after {
content: "";
position: absolute;
height: 0.3125rem;
width: calc(100% + 1.25rem);
bottom: calc((1.25rem - 0.5rem) * -1);
left: -1.25rem;
background-color: var(--brand-color);
}



.arrow-icon {
transition: transform 0.3s ease;
}

.card__button:hover .arrow-icon {
transform: translateX(5px);
}

@media (any-hover: hover) and (any-pointer: fine) {
.card__content {
  transform: translateY(62%);
  transition: transform 500ms ease-out;
  transition-delay: 500ms;
}

.card__title::after {
  opacity: 0;
  transform: scaleX(0);
  transition: opacity 1000ms ease-in, transform 500ms ease-out;
  transition-delay: 500ms;
  transform-origin: right;
}

.card__background {
  transition: transform 500ms ease-in;
}

.card__content--container > :not(.card__title),
.card__button {
  opacity: 0;
  transition: transform 500ms ease-out, opacity 500ms ease-out;
}

.card:hover,
.card:focus-within {
  transform: scale(1.05);
  transition: transform 500ms ease-in;
}

.card:hover .card__content,
.card:focus-within .card__content {
  transform: translateY(0);
  transition: transform 500ms ease-in;
}

.card:focus-within .card__content {
  transition-duration: 0ms;
}

.card:hover .card__background,
.card:focus-within .card__background {
  transform: scale(1.3);
}

.card:hover .card__content--container > :not(.card__title),
.card:hover .card__button,
.card:focus-within .card__content--container > :not(.card__title),
.card:focus-within .card__button {
  opacity: 1;
  transition: opacity 500ms ease-in;
  transition-delay: 1000ms;
}

.card:hover .card__title::after,
.card:focus-within .card__title::after {
  opacity: 1;
  transform: scaleX(1);
  transform-origin: left;
  transition: opacity 500ms ease-in, transform 500ms ease-in;
  transition-delay: 500ms;
}
}


/* Fim Cards dos Projectos*/


/*Titulos premios e parcerias*/

.title-container {
display: flex;
justify-content: center;  /* Centraliza horizontalmente */
align-items: center;      /* Centraliza verticalmente (se houver altura definida) */
gap: 8px;                 /* Espaçamento entre os elementos */
padding: 10px;            /* Adiciona um pouco de espaço ao redor */

}

/* Estilos adicionais para as classes highlight e white */
.highlight {
color: #7BB0FF;           /* Exemplo de cor para destaque */
font-size: 40px;
}

.white {
color: #fff;              /* Cor branca */
font-size: 30px;
}
/*Fim parceirias*/


/* Estilos específicos para a seção de prêmios */
.premios-section {
padding: 40px 0;
background-color: transparent; /* Cor de fundo opcional */
}

.premios-section .grid-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 15px;
}

.premios-section .grid-x {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 20px; /* Espaçamento entre as células */
}

.premios-section .cell {
flex: 1 1 calc(33.333% - 40px); /* 3 colunas por linha */
max-width: calc(33.333% - 40px);
box-sizing: border-box;
display: flex;
align-items: center; /* Alinhamento vertical */
justify-content: center; /* Alinhamento horizontal */
border: 1px solid #fff;
height: 150px; /* Altura fixa para todas as células */
overflow: hidden; /* Garante que a imagem não ultrapasse a célula */
}

.premios-section .cell img {
width: 100%; /* Largura 100% da célula */
height: 100%; /* Altura 100% da célula */
object-fit: contain; /* Mantém a proporção da imagem */
border-radius: 8px; /* Bordas arredondadas */
transition: transform 0.3s ease, box-shadow 0.3s ease; /* Efeito de hover */
}

.premios-section .cell img:hover {
transform: scale(1.05); /* Efeito de zoom no hover */
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); /* Sombra no hover */
}

/* Responsividade */
@media (max-width: 768px) {
.premios-section .cell {
    flex: 1 1 calc(50% - 20px); /* 2 colunas por linha em telas menores */
    max-width: calc(50% - 20px);
}
}

@media (max-width: 480px) {
.premios-section .cell {
    flex: 1 1 100%; /* 1 coluna por linha em telas muito pequenas */
    max-width: 100%;
}
}


/*Marquee parceiros*/

/* Container principal */
.marquee-container {
width: 100%;
overflow: hidden;
background-color: transparent;
padding: 20px 0;
position: relative;
display: flex;
align-items: center;
}

/* Wrapper flexível para animação */
.marquee-wrapper {
display: flex;
width: fit-content;
animation: marquee-scroll 20s linear infinite;
}

/* Imagens dentro do marquee */
.marquee-wrapper img {
width: 150px; /* Tamanho padrão */
height: 100px; /* Altura fixa para uniformidade */
margin-right: 30px; /* Espaçamento entre imagens */
object-fit: contain; /* Mantém proporção sem distorção */
vertical-align: middle; /* Alinha verticalmente */
transition: transform 0.3s ease-in-out;
}

/* Efeito hover */
.marquee-wrapper img:hover {
transform: scale(1.1);
}

/* Animação infinita */
@keyframes marquee-scroll {
0% {
    transform: translateX(0);
}
100% {
    transform: translateX(-50%);
}
}

/* Responsividade */
@media (max-width: 768px) {
.marquee-wrapper img {
    width: 120px;
    height: 80px;
}
}

@media (max-width: 480px) {
.marquee-wrapper img {
    width: 100px;
    height: 70px;
    margin-right: 20px;
}
}


/* Fim marquee parceiros*/