body{
    font-family: "Montserrat", serif;
}

a{
    text-decoration: none;
    color: #DE7B3F;
}

a:hover{
    color:#ffffff;
}

.adoar{
    text-decoration: none;
    color: #DE7B3F;
}

.adoar:hover{
    color:#FAA844;
}

p {
font-size: 1.2em;
}

h1 {
    font-size: 4em;
    font-weight: 800;
 }
 
 /* Para telas menores que 768px (tablets e celulares) */
 @media (max-width: 768px) {
    h1 {
       font-size: 3em;
    }
 }
 
 /* Para telas menores que 480px (celulares pequenos) */
 @media (max-width: 480px) {
    h1 {
       font-size: 2em;
    }
 }

h2 {
    font-size: 3.5em;
    font-weight: 800;
 }
 
 /* Para telas menores que 768px (tablets e celulares) */
 @media (max-width: 768px) {
    h2 {
       font-size: 3em;
    }
 }
 
 /* Para telas menores que 480px (celulares pequenos) */
 @media (max-width: 480px) {
    h2 {
       font-size: 2em;
    }
 }

 h3{
    font-size: 1.8em;
    font-weight: 600;
 }

 /* Para telas menores que 768px (tablets e celulares) */
 @media (max-width: 768px) {
    h3 {
       font-size: 1.5em;
    }
 }
 
 /* Para telas menores que 480px (celulares pequenos) */
 @media (max-width: 480px) {
    h3 {
       font-size: 1.2em;
    }
 }



/* ---------------------------------------------------------------------------------------------------------- */

/* Para telas menores que 768px (tablets e celulares) */
@media (max-width: 768px) {
    p {
       font-size: 16px;
    }
 }
 
 /* Para telas menores que 480px (celulares pequenos) */
 @media (max-width: 480px) {
     p {
       font-size: 16px;
    }
 }
 /* ------------------------------------------------------------------------------------------------------------- */

 .btn-custom {
    background-color: transparent; /* Cor do botão */
    color: #ffffff;
    padding: 10px 20px;
    border: 1px solid #ffffff;
    border-radius: 0px;
}

.btn-custom:hover {
    background-color: rgba(255, 255, 255, 0.5); /* Cor do botão ao passar o mouse */
    color: #ffffff;
}

.btn-custom2 {
    background-color: #FAA844; /* Cor do botão */
    color: #ffffff;
    padding: 10px 20px;
    border: 0px solid #ffffff;
    border-radius: 0px;
}

.btn-custom2:hover {
    background-color: #DE7B3F; /* Cor do botão ao passar o mouse */
    color: #ffffff;
}

/* ------------------------------------------------------------------------------------ */
/* logo */
.logo{
    background-color: #FAA844;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
    height: 120px;
}
/* fim logo */

/* ------------------------------------------------------------------------------------ */

/* MENU */

.navbar{
    background-color:#DE7B3F;
    padding: 5px;
}

.nav-link{
    color: #ffffff;
    margin-left: 5px;
    margin-right: 5px;
}

 /* Para telas menores que 768px (tablets e celulares) */
 @media (max-width: 1024px) {
    .nav-link {
        color: #ffffff;
        font-size: 14px;
    }
 }

.nav-link:hover{
    color: #FAA844;
}

.custom-toggler {
    border: none; /* Remove a borda padrão do botão */
    background-color: transparent; /* Define o fundo como transparente */
    padding: 0.5rem; /* Ajusta o espaçamento ao redor do ícone */
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%; /* Garante que o botão ocupe toda a largura */
    color: #ffffff;
}

.custom-toggler i {
    font-size: 2.5rem; /* Ajuste o tamanho do ícone conforme necessário */
    color: #ffffff; /* Cor do ícone */
}

.custom-toggler:focus, 
.custom-toggler:active {
    outline: none; /* Remove o contorno ao focar ou ativar */
    box-shadow: none; /* Remove a sombra padrão do Bootstrap */
}

/* FIM MENU */

/* ---------------------------------------------------------------------------------------------------------- */

/* HEADER */
.full-height {
    height: 70vh;
    width: 100%;
    background-image: url('https://seufuturo.org.br/img/bg-header.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    position: relative;
    display: flex;
    justify-content: center;
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent); 
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* Alinha o conteúdo na parte inferior */
    align-items: center;
    text-align: center;
    padding-bottom: 150px; /* Adiciona um espaçamento na parte inferior */
}

.overlay h1 {
    color: #ffffff; /* Texto branco */
    font-weight: 800;
}

.overlay h3 {
    color: #ffffff;
}

/* FIM HEADER */

/* ---------------------------------------------------------------------------------------------------------- */

/* campanha */
.campanha{
    background: rgb(250,168,68);
background: linear-gradient(0deg, rgba(250,168,68,1) 0%, rgba(255,255,255,1) 87%);
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 50px;
    padding-bottom: 50px;
}

 /* Para telas menores que 768px (tablets e celulares) */
 @media (max-width: 768px) {
    .campanha {
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
    }
 }

.campanha p{
    text-align: center;
 }

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

/* Imagem responsiva */
.campanha1 img {
    max-width: 100%; /* Garante que a imagem não ultrapasse o tamanho do contêiner */
    height: auto;    /* Mantém a proporção da imagem */
}

/* Ajustes para telas menores */
@media (max-width: 1024px) {
    .campanha1 img {
        width: 80%;  /* Reduz o tamanho da imagem para 80% da largura do contêiner */
    }
}

@media (max-width: 480px) {
    .campanha1 img {
        width: 70%;  /* Reduz o tamanho da imagem para 60% da largura do contêiner */
    }
}
/* fim campanha */

/* ---------------------------------------------------------------------------------------------------------- */

/* Como colaborar */

.colaborar{
    height: 60vh;
    width: 100%;
    background-image: url('https://seufuturo.org.br/img/colaborar.jpg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    position: relative;
    display: flex;
    justify-content: center;
    display: flex;
    justify-content: right;
    align-items: center;
    

}

.colabore{
    background-color: #FAA844;
    padding: 50px;
    margin-right: 0px;

}

.colabore h2{
 font-size: 4em;
 color: #ffffff;
 font-weight: 800;
}



/* Ajustes para telas menores */
@media (max-width: 1024px) {
    .colabore h2 {
        font-size: 2.3em;
    }
}

/* Ajustes para telas menores */
@media (max-width: 425px) {
    .colabore h2 {
        font-size: 1.5em;
    }
}


.box1 {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centraliza os itens horizontalmente */
    justify-content: flex-start; /* Garante que o conteúdo inicie no topo */
    padding: 10px;
    text-align: center; /* Centraliza o texto */
   
    
    
}

.box1 img {
    margin-bottom: 10px; /* Espaçamento entre a imagem e o texto */
    max-width: 100%; /* Faz com que a imagem seja responsiva */
    height: auto; /* Mantém a proporção da imagem */
}

.box1 h3 {
    margin: 10px 0; /* Espaçamento ao redor do título */
}

.box1 p {
    margin: 0; /* Remove margens desnecessárias */
}


/* Fim como colaborar */


.box2{

    display: flex;
    flex-direction: column;
    align-items: center; /* Centraliza os itens horizontalmente */
    justify-content: center; /* Garante que o conteúdo inicie no topo */
    padding: 10px;
    text-align: center; /* Centraliza o texto */

}

.box2 img {
    margin-bottom: 10px; /* Espaçamento entre a imagem e o texto */
    max-width: 100%; /* Faz com que a imagem seja responsiva */
    height: auto; /* Mantém a proporção da imagem */
    border-radius: 50px;
}

@media (max-width: 1024px) {
    .box2 img {
        border-radius: 20px;     /* Em telas menores, o vídeo ainda ocupará 100% da largura */
    }
}

.box2 h2{
    font-size: 3em;
}

@media (max-width: 1024px) {
    .box2 h2 {
        font-size: 1.8em;     /* Em telas menores, o vídeo ainda ocupará 100% da largura */
    }
}

@media (max-width: 1024px) {
    .box2 p {
        font-size: 1em;     /* Em telas menores, o vídeo ainda ocupará 100% da largura */
    }
}

/* ----------------------------------------------------------------------------------------------------------------- */


/* doar */
.doar{
    background-color: #FAA844;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding-top: 30px;
    padding-bottom: 30px;
}

#videoPlayer {
    width: 100%;         /* O vídeo ocupará 100% da largura do container */
    height: auto;        /* Mantém a proporção do vídeo */
    max-width: 100%;     /* Limita a largura máxima ao tamanho do container */
    display: block;      /* Remove espaços extras ao redor do vídeo */
    margin: 0 auto 20px; /* Adiciona uma margem inferior entre o vídeo e o texto */
}

.doar .row {
    text-align: center;  /* Centraliza o texto e o botão */
}

.doar h2 {
    color: #ffffff;
    
}

.doar p {
    color: #ffffff;
    
}

#videoPlayer {
    width: 100%;         /* O vídeo ocupará 100% da largura do container */
    height: auto;        /* Mantém a proporção do vídeo */
    max-width: 100%;     /* Limita a largura máxima ao tamanho do container */
    display: block;      /* Remove espaços extras ao redor do vídeo */
    margin: 0 auto;      /* Centraliza o vídeo */
}

@media (max-width: 768px) {
    #videoPlayer {
        width: 100%;     /* Em telas menores, o vídeo ainda ocupará 100% da largura */
    }
}

/* fim doar */

/* ------------------------------------------------------------------------------------------------------ */

/* banner */
.banner {
    background-color: #ffffff;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;

}

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

@media (max-width: 1024px) {
    .banner h2 {
        font-size: 2.5em;     /* Em telas menores, o vídeo ainda ocupará 100% da largura */
    }
}

@media (max-width: 425px) {
    .banner h2 {
        font-size: 2em;     /* Em telas menores, o vídeo ainda ocupará 100% da largura */
    }
}

@media (max-width: 1024px) {
    .banner h3 {
        font-size: 1.2em;     /* Em telas menores, o vídeo ainda ocupará 100% da largura */
    }
}
/* fim do banner */



/* Entidades Beneficiadas */

.entidades1{
    height: 60vh;
    width: 100%;
    background-image: url('https://seufuturo.org.br/img/entidades.jpg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    position: relative;
    display: flex;
    justify-content: center;
    display: flex;
    justify-content: left;
    align-items: center;
    

}

.entidades{
    background-color: #FAA844;
    padding: 50px;
    margin-right: 0px;

}

.entidades h2{
 font-size: 4em;
 color: #ffffff;
 font-weight: 800;
}



/* Ajustes para telas menores */
@media (max-width: 1024px) {
    .entidades h2 {
        font-size: 2.3em;
    }
}

/* Ajustes para telas menores */
@media (max-width: 425px) {
    .entidades h2 {
        font-size: 1.5em;
    }
}


/* Estilo do Botão do Accordion */
.accordion-button {
    background-color: #DE7B3F; /* Fundo laranja inicial */
    color: #ffffff; /* Texto branco */
    font-weight: bold;
    font-size: 0.5em;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none; /* Remove bordas padrão */
}

.accordion-button:not(.collapsed) {
    background-color: #DE7B3F; /* Fundo laranja escuro quando aberto */
    color: #ffffff; /* Texto branco */
}

.accordion-button:hover {
    background-color: #e39932; /* Fundo laranja mais escuro no hover */
    color: #ffffff;
}

.accordion-button:focus {
    box-shadow: none; /* Remove o contorno de foco */
}

/* Estilo do Ícone de Seta */
.accordion-button .bi-chevron-down {
    font-size: 2rem;
    margin-left: auto; /* Alinha a seta à direita */
    color: #ffffff;
    transition: transform 0.3s ease;
}

/* Rotação da seta quando o accordion está aberto */
.accordion-button:not(.collapsed) .bi-chevron-down {
    transform: rotate(180deg); /* Rotaciona a seta quando o accordion está expandido */
}

/* Oculta o ícone padrão do Bootstrap Accordion */
.accordion-button::after {
    display: none;
}


/* Fim Entidades Beneficiadas */


/* O conselho */

.conselho{
    background-color: #F4F4F4;
    height: auto;
    padding-top: 5%;
    padding-bottom: 5px;
}


  .conselho h3 {
    font-weight: bold;
    margin-top: 20px;
  }
  
  .conselho p {
    margin-top: 15px;
  }
  
/* Fim O conselho */

/* back to top */
.back-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: none; /* Remove fundo extra, caso haja */
    border: none; /* Remove borda */
    color: #b05f28; /* Define a cor do ícone */
    font-size: 3rem; /* Tamanho do ícone, ajuste conforme necessário */
    display: none; /* Inicialmente escondido */
    z-index: 100; /* Para garantir que esteja sobre outros elementos */
}

/* Ajustes para telas menores */
@media (max-width: 768px) {
    .back-to-top {
        font-size: 1.8em;
    }
}

.back-to-top i {
    color: #b05f28; /* Define a cor do ícone */
}

/* Exibe o botão quando o usuário rolar a página para baixo */
.show-back-to-top {
    display: block;
}

/* FIM back to top */


/* div sobreposta */

.overlay-carousel {
    position: absolute; /* Para sobrepor as divs */
    top: 85%; /* Ajuste verticalmente */
    left: 50%; /* Centraliza horizontalmente */
    transform: translate(-50%, -50%); /* Centraliza a div */
    width: 90%; /* Largura fixa */
    height: auto; /* Altura fixa */
    background-color: #FAA844; /* Cor de fundo */
    display: flex; /* Usado para alinhar conteúdo */
    flex-direction: column; /* Empilha elementos */
    justify-content: center; /* Centraliza verticalmente */
    align-items: center; /* Centraliza horizontalmente */
    z-index: 10; /* Para garantir que fique sobre as outras divs */
    padding-left: 30px;
    padding-right: 30px;
    padding-top: 3%;
    padding-bottom: 3%;

}

@media (max-width: 1440px) {
    .overlay-carousel {
        top: 95%; /* Ajuste verticalmente */
        left: 50%; /* Centraliza horizontalmente */
        padding-top: 6%;
        padding-bottom: 6%;
       
    }
    }


@media (max-width: 425px) {
.overlay-carousel {
    position: absolute; /* Para sobrepor as divs */
    top: 95%; /* Ajuste verticalmente */
    left: 50%; /* Centraliza horizontalmente */
    transform: translate(-50%, -50%); /* Centraliza a div */
    background-color: #FAA844; /* Cor de fundo */
    display: flex; /* Usado para alinhar conteúdo */
    flex-direction: column; /* Empilha elementos */
    justify-content: center; /* Centraliza verticalmente */
    align-items: center; /* Centraliza horizontalmente */
    z-index: 10; /* Para garantir que fique sobre as outras divs */
    padding-left: 30px;
    padding-right: 30px;
}
}

@media (max-width: 425px) {
.overlay-carousel .btn-custom{
   width: 100%;
   height: auto;
   font-size: 10px;
}
}

.carousel-item h4{
    text-align: center; /* Centraliza as frases */
    color: #ffffff;
    font-size: 1.6em;
}

/* Ajustes para telas menores */
@media (max-width: 1440px) {
    .carousel-item h4{
        text-align: center; /* Centraliza as frases */
        color: #ffffff;
        font-size: 1.2em;
    }
}

/* Ajustes para telas menores */
@media (max-width: 1024px) {
    .carousel-item h4{
        text-align: center; /* Centraliza as frases */
        color: #ffffff;
        font-size: 1.5em;
    }
}

/* Ajustes para telas menores */
@media (max-width: 768px) {
    .carousel-item h4{
        text-align: center; /* Centraliza as frases */
        color: #ffffff;
        font-size: 1.2em;
    }
}

/* Ajustes para telas menores */
@media (max-width: 425px) {
    .carousel-item h4{
        text-align: center; /* Centraliza as frases */
        color: #ffffff;
        font-size: 0.8em;
    }
}

/* Ajustes para telas menores */
@media (max-width: 1440px) {
    .overlay-carousel{
        width: 80%; /* Largura fixa */
        height: 20%; /* Altura fixa */
    }
}

.divisao{
    height: 10vh;
}
/* Fim da div sobreposta */


/* parceiros */

.parceiros{
    height: auto;
    padding-top: 50px;
    padding-bottom: 50px;
    display: flex;
    justify-content: center;
    align-items:center;
    flex-direction: column;
}
.owl-carousel .item.box {
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Distribui o conteúdo no box */
    padding: 20px;
    background-color: #dfdfdf;
    text-align: center;
    border: 0px solid #ddd;
    border-radius: 15px;
    margin: 5px;
    min-height: 300px; /* Altura mínima para alinhar os boxes */
  }
  .owl-carousel .item img {
    max-width: 70%;
    height: auto;
    margin-bottom: 10px;
  }
  .owl-carousel .item p {
    text-align: left;
    margin-bottom: 10px;
    font-size: 14px;
    flex-grow: 1; /* Expande o texto para ocupar o espaço necessário */
  }
  
  /* Personalize as setas de navegação */
  .owl-nav .owl-prev, .owl-nav .owl-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: #b05f28;
    font-size: 4rem;
  }
  .owl-nav .owl-prev {
    left: -25px;
  }
  .owl-nav .owl-next {
    right: -25px;
  }
  
  
/* fim parceirtos */


/* footer */
.footer {
    display: flex;
    justify-content: center; /* Centraliza horizontalmente */
    align-items: center;    /* Centraliza verticalmente */
    flex-direction: column; /* Coloca os itens em coluna */
    height: auto;
    padding-top: 50px;
    padding-bottom: 50px;
    background-color: #faa844;
    color: #ffffff;
}

.footer img {
    width: 400px;
    height: auto; /* Mantém a proporção da imagem */
    margin: 0 auto; /* Garante que a imagem esteja centralizada no seu container */
}

.text-center {
    text-align: center; /* Centraliza o texto */
    width: 100%; /* Garante que o container ocupe toda a largura disponível */
}

.footer btn{
width: 300px;
}



/* fim footer */




.btn-visitarinsta{

    background-color: transparent;
    color: #faa844;
    padding: 6px;
    border-radius: 5px;
    
}



.btn-visitarinsta:hover{
    background-color: #faa844;
    color: #ffffff;
    padding: 6px;
    border-radius: 5px;
   
}