@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swop');
@import url('https://fonts.googleapis.com/css2? family= Andika:ital,wght@0,400;0,700;1,400;1,700 & display=swap');

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
  outline: none;
    font-family: 'Andika', sans-serif;  
}

header{
    background-position: top ;
    background-size: cover;
    background-attachment: fixed;
   
}

/**/
.banner{
    display: flex;
    justify-content: center ; 
    background-color: #1d585f;
   
}
.banner .img{
    font-size: 50px;
    font-weight: bold;
    background-image: url('img/activities/PHOTO-home.jpg');
    background-size: cover;
    background-position: center;
}
.banner .banner-text{
    margin:  50px;
    text-align: center;
    padding: 0 50px;
}
.banner .banner-text h1{
    font-size: 50px;
color: aliceblue;
}
.banner .banner-text p{
    font-size: 20px;
    color: rgb(9, 5, 0);
    font-weight: lighter;
    margin: 18px 0;
    text-align: center;
}


.faca-mais .container{
    display: flex;
    align-items: center;
    padding: 20px;
    font-family: 'Nunito';
    font-style: normal;
  font-weight: 300;
  font-display: swap;
  justify-content: center;
    margin: 0 auto; /* Centraliza o container na página */
    box-sizing: border-box;
 margin-left: 20px;
 margin-right: 20px;

}
/**/
.faca-mais .faca-mais-text{
    width: 80%; 
    padding: 0 40px;
    text-align: justify
    }
.faca-mais .faca-mais-text h3{
     font-size: 30px;
     padding: 20px;
     color: blue;
    }
.faca-mais .faca-mais-text p{
        margin: 5px 0 10px 0;
        font-family: 'Aptos Display';
        background: transparent;
        font-size: 18px;
        color: #000404;
        text-align: justify
    }
    
    .faca-mais .faca-mais-text h4{
font-family: 'Rubik';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  font-size: 25px;
    }

    .faca-mais .faca-mais-text .pontos{
        font-family: 'Aptos Display';
        background-color: rgb(220, 245, 241);
        color: black;
    }

    .faca-mais .faca-mais-text h6{
        font-family: 'arial black';
        font-size: 20px;
    }

.faca-mas{
    position: relative;
    padding: 20px;
}

.faca-mas .contner .faca-mais-text2 h3{
font-size: 30px;
color: blue;
font-family: 'Rubik';
font-style: italic;
margin-left: 140px;
}

.faca-mas .contner .faca-mais-text2 p {
    font-size: 20px;
    color: #1d585f;
    left: 8%; 
    width: 80%;
    margin-top: 20px;
    margin-left: 130px; /* Remove a margem à esquerda */
    background-color: #bcb4b4;
    border: 2px solid brown;
    box-sizing: border-box;
    height: auto;
    overflow: hidden;
    line-height: 1.5;
    text-align: justify; /* Mantém o texto justificado */
}

    .depoimentos h3{
        text-align: center;
        font-size: 30px;
        font-family: 'Times new roman';
    }
    .depoimentos p{
        font-family: 'Arial Black';
       margin-bottom: 20px;
       text-align: center; 
       font-size: 14px;
    }
    .cards{
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
    }
    .depoimentos .card-item{
    background-color: #91bff5e2;
    margin: 15px;
    border-radius: 14px;
    text-align: center;
    width: 350px;
    transition: 0.3s;
    }
    .depoimentos .card-item .nome-user{
        font-weight: 600;
        font-size: 20px;
        margin-bottom: 15px;
        text-align: center;
        font-family: 'Arial Black';
         transition: 0.3s;
    }
    .depoimentos .card-item img{
        border-radius: 100%;
        width: 100px;
        display: block;
        margin: 10px auto;
    }
    .depoimentos .card-item .depoimento-user{
        font-size: 15px;
        padding: 0 15px;
        transition: 0.3s;
    }
    .depoimentos .card-item .estrelas{
        margin: 15px 0;
        border-top: 2px solid blue;
    }
    .depoimentos .card-item .estrelas i{
      color: #4f9cf9; 
      margin-top: 15px;
      font-size: 20px; 
    }
    
    .depoimentos .card-item:hover{
        background-color: darkgreen;
        margin-top: -5px;
    }
    .depoimentos .card-item:hover .nome-user,
    .depoimentos .card-item:hover .depoimento-user{
      color :white  
    }


/*inicio de Activites*/

.banners{
    margin:  30px;
    text-align: center;
    padding: 0 50px;
    display: flex;
    justify-content: center ; 
    background-color: #96a17d;

}
.banners .banner-texts{
    margin:  50px;
    text-align: center;
    padding: 0 30px;
    margin-top: 10px;
}
.banners .banner-texts h1{
font-size: 40px;
  color: aliceblue;
  font-family: 'Arial Black';
  
}
.banners .banner-texts p{
    margin-top: 5px;
    font-size: 25px;
    font-family: 'Rubik';
    font-weight: 300;
    color: rgb(243, 247, 248);
    font-weight: lighter;
    margin: 18px 0;
    text-align: center;
    
}

.ver{
    background-color: #ede6e6;
    font:normal 16px Arial, Verdana,serif;
    text-align: left;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-left: 30px;
}
.ver .activities{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;

}
.ver .activities .actividades{
    background-color: white;
    margin: 15px;
    border-radius: 30px;
    text-align: center;
    width: 350px;
    transition: 0.3s;
    }
    .ver .activities .actividades h2{
        font-weight: 600;
        font-size: 20px;
        margin-bottom: 15px;
        text-align: center;
        font-family: 'Arial Black';
        transition: 0.3s;
    }

    .ver .activities .actividades p{
        font-size: 15px;
        padding: 0 15px;
        transition: 0.3s;
        text-align: justify;
        color: rgb(25, 1, 47);
        line-height: 1.5;

    }
    .ver .actividades:hover{
        background-color: rgb(129, 176, 227);
        margin-top: -5px;
    }
    .ver .actividades :hover h2,
    .ver .actividades :hover p{
      color :white  
    }

    /* Container principal da seção */
.sources {
    width: 100%;
    padding: 20px;
    text-align: justify;
    line-height: 1.5;
    background-color: #96a17d;
}

.funds {
    display: flex;
    justify-content: space-between; 
    gap: 70px; 
}

.esquerdo {
    width: 50%; 
    background-color: #a4a3a3; 
    padding: 20px;
    margin-left: 20px;
    box-sizing: border-box;
}
.esquerdo h3{
    font-family: 'Rubik';
    font-style: 'Negrito';
    font-weight: 300;
    font-size: 30px;
    font-display: swap;
    color: #00f;
  }
  .esquerdo p{
    color:#1d585f ;
    margin-top: 20px;
  }

.direito {
    width: 50%; 
    background-color: #3e4a3a; 
    padding: 20px;
    box-sizing: border-box; 
    margin-left: 5px;
}
.direito h3{
    font-family: 'Rubik';
    font-style: 'Negrito';
    font-size: 30px;
    font-display: swap;
    color: rgb(198, 198, 236);
  }
.direito p{
    color:white;
    margin-top: 20px;
  }


/* End of activities*/




/* binging of Departments */
.servicos{
    background-color: #edf3df;
}
.servicos h3{
    text-align: left;
    padding: 20px;
    margin-left: 95px;
}
.servicos p{
    
    width: 80%; 
    color: #301f1f; 
    padding: 1,5px;
    margin-left: 90px;
    box-sizing: border-box;
    text-align: justify;
    line-height: 1.5;
   
}

.servicos .resume {
        font-family: 'Arial Black';
        margin-bottom: 20px;
        text-align: justify;
        font-size: 18px;
        padding-left: 40px;
        padding-right: 40px;
        margin-left: 5%;
        margin-right: 5%;
        color: #05149e;  
    }
    .servicos .resume p{
        padding-left: 20px;
        font-family: 'Arial';
        color: #9e057d;
}
.servicos .container > p{
    text-align: center;
   
}
.servicos .rows-card{  
display: flex;
justify-content: center;
margin-top: 20px;
flex-wrap:  wrap;
}
.servicos .rows-card-item{
background-color: rgb(131, 86, 3);
width: 250px;
padding: 20px;
border-radius: 14px;
margin: 10px;  
transition:0,3s ;
}
.servicos .rows-card-item :hover {
background-color: rgb(238, 8, 8);
}
.servicos .rows-card-item :hover p{
 color:  white;
}
.servicos .rows-card-item img:hover{
    background-color:  hsl(125, 87%, 56%);
}
.servicos .rows-card-item img{
    background-color: blueviolet;
    border-radius: 14px ;
    width: 70px;
    padding: 9px;
}
.servicos .rows-card-item p.nome-servico{
    margin: 5px 0;
    transition: 0,3s;
}
.servicos .rows-card-item p.descricao-servico{
transition: 0,3s;
}
/* dados */
.dados{
    background: hsl(0, 23%, 95%);
}
.dados  h3{
    text-align: center;
    font-family: 'Britannic Bold';
}
.dados .controlo{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.dados .dados-item{
text-align: center;
margin: 15px;
color: #036e15;
}
.dados .dados-item img{
    background-color:wheat;
    border-radius: 14px;
    padding: 10px;
    margin-bottom: 15px;
    width: 80px;
}
.dados .dados-item p{
    font-size: 20px;
}
.dados .dados-item p strong {
    font-size: 28px;
}

/* End of Departments */


/* inicio da pagina about*/

.about{
    text-align: justify;
    font-size: 20px;
    transition: 0.3s;
    margin: 50px;
    margin-top: 20px;
    color: #000;
    
}
.contacto-info{
    display: flex;
    justify-content: space-between;
    margin-top: 50px;
}
.contacto-info .left-side{
    width: 50%;
    padding: 30px;
    background-color: #4f9cf9;
    border-radius: 14px;
    margin-right: 50px;
    height: fit-content;
}
.contacto-info .left-side div i{
    font-size: 24px;
    margin-right: 20px;
    color: white;
}
.contacto-info .left-side p{
font-size: 17px;
color: white;
}
.contacto-info .right-side{
    width: 50%;
}
.contacto-info .right-side input{
    display: block;
    width: 100%;
    margin-bottom: 10px;
    height: 47px;
    padding: 15px;
    border-radius: 10px;
    transition: 0.3s;
    border: 1px solid  #f1f1f1;
    color: #21212121;
    font-weight: lighter;
}
.contacto-info .right-side input:focus,
.contacto-info .right-side textarea:focus{
    border-color: #4f9cf9;
}
.contacto-info .right-side textarea{
    border: 1px solid #f1f1f1;
    color: #212121;
    border-radius: 9px;
    margin-bottom: 10px;
    padding: 15px;
    width: 100%;
    transition: 0.3s;
    size: none;
}
.contacto-info .right-side button{
    border: none;
}

/* fim about*/


@media(max-width: 830px){
    /*menu mobile*/
   .ul{
    position:fixed;
    top: 0;
    left: 0;
    background-color: rgb(4, 219, 176);
    width: 100%;
    height: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    clip-path: circle(0% at 100% 0);
    transition: 0.7s;
   }
}
.ul.open{
   clip-path: circle(141.4% at 100% 0); 
}
   .ul a {
    margin: 10px 0;
    font-size: 16px;
   } 

nav .menu-icon{
    display: block; 
   
}
nav .close-icon{
    display: block;
    font-size: 30px;
    position: absolute;
    color : rgb(8, 154, 154);
    top: 46px;
    right: 28px;
} 
.tuangalie {
    position: fixed;
    width: 60px;
    height: 60px;
    bottom: 40px;
    right: 40px;
    background-color: #0e1ce9;
    color: #fff;
    border-radius: 50px;
    text-align: center;
    font-size: 30px;
    box-shadow: 1px 1px 2px  rgb(5, 103, 201);;
    z-index: 1000;
}

/* pagina index */
.faca-mais .faca-mais-text{
    margin-top: 10px;
padding: 0 20px;
order: 1;
}
.faca-mais .container{
    flex-direction: column;
}
.faca-mais .faca-mais-text h3{
    font-size: 48px;
} 
.faca-mais .faca-mais-text,
.faca-mais .faca-mais-img{
    width: 100%;
}
/* fim de ultima consideracoes home */

.banner .banner-text{
    padding: 0;
    margin: 80px;
}
.banner .banner-text h1{
    font-size: 80px;   
}
.banner .banner-text p{
    font-size: 15px;
}
.depoimentos .card-item{
    width: 100%;
}
/* sobre consideracoes */ 
.sobre .container{
    flex-direction: column-reverse;
}
.sobre .sobre-img,
.sobre .sobre-text{
    width: 100%;
}  
.sobre .sobre-text{
    margin-top: 40px  ;
}
/* fim sobre consideracoes */


/* contacto consideracoes */
.contacto .contacto-info{
    flex-direction: column-reverse;
}
.contacto-info .right-side,
.contacto-info .left-side{
    width: 100%;
}
.contacto-info .right-side{
    margin-bottom: 30px;
}
   
@media(max-width:500px){
    .bonner .banner-text h1{
      font-size: 50px;  
    }
    .faca-mais .faca-mais-text h3 {
font-size: 40px;
    }
}


    

/* Geographical*/

.lodos {
    display: flex;
    justify-content: flex-start; /* Alinha à esquerda os elementos dentro do container */
    align-items: center; /* Alinha verticalmente */
    gap: 20px; /* Espaço entre Geographical e o diagrama */
  }
.Geographical{
    text-align: justify;
    margin: 2px;
    padding-left: 20px;
    flex: 1;
    color: #05149e;
    font-size: 30px;
    margin-bottom: 20px;
    margin-top: -5px; /* Move o conteúdo para cima */
}
  .diagrama {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    margin-left: auto; /* Garante que o diagrama fique à direita */
    width: 700px; /* Limita a largura do diagrama */
  max-width:1500%; /* Garante que o diagrama não ultrapasse a largura do container */
  max-height: 1000px;
  box-sizing: border-box;
  background-color: #a8c2a9; /* Cor de fundo do diagrama */
  transform: skew(20); /* Aplica uma distorção para criar o paralelogramo */
  
  /* Ajustando borda e cor de fundo */
  border-radius: 200px;
  color: rgb(44, 44, 49);
  }

  /* Estilos para os setores */
  .caixa {
    width: 220px;
    padding: 20px;
    margin: 10px;
    border: 2px solid #4CAF50;
    border-radius: 8px;
    background-color: #e8eef5;
    text-align: center;
  }

  /* Estilo para as setas */
  .seta {
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 30px solid #4CAF50;
    margin: 10px 0;
  }

  /* Estilo para os setores em linha */
  .setores {
    display: flex;
    justify-content: space-around;
    width: 100%;
  }

  /* Estilo para os sub-setores */
  .subsetores {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    width: 100%;
  }

  .sub-caixa {
    width: 180px;
    padding: 5px;
    margin: 5px;
    border: 2px solid #4CAF50;
    border-radius: 8px;
    background-color: #bdf1ec;
    text-align: center;
  }

/*End of Geographical*/

      
 .whatsapp-link {
    position: fixed;
    width: 60px;
    height: 60px;
    bottom: 40px;
    right: 40px;
    background-color: #25d366;
    color: #fff;
    border-radius: 50px;
    text-align: center;
    font-size: 30px;
    box-shadow: 1px 1px 2px #888;
    z-index: 1000;
}
.fa-Wwatsapp {
margin-top: 16px;
}


/*main*/



:root {
   --primary-color: #1a9cb0;    /* Azul-turquesa */
   --secondary-color: #b15a1f;  /* Laranja terroso */
   --accent-color: #20aa5c;     /* Verde esmeralda para botão de doação */
   --bg-light: #ebe9f3;         /* Bege claro para fundos */
   /* --text-dark:white; */        /* Cinza escuro para textos */
   --white: #1c088f;            /* Branco para contraste */
}
  */

/* Estilos para a página de contato */
.contact-us-section {
    padding: 50px 0;
    background-color: var(--bg-light);
}

.contact-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
}

.contact-info, .contact-form {
    flex: 1;
    min-width: 300px;
}

.contact-info {
    background-color: var(--primary-color);
    color: white;
    padding: 30px;
    border-radius: 8px;
}

.contact-info h2 {
    margin-top: 0;
    border-bottom: 2px solid white;
    padding-bottom: 10px;
    margin-bottom: 20px;
}

.info-item {
    display: flex;
    margin-bottom: 20px;
}

.info-item i {
    font-size: 24px;
    margin-right: 15px;
    margin-top: 5px;
}

.info-item h3 {
    margin: 0 0 5px 0;
}

.contact-form {
    background-color: white;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.contact-form h2 {
    margin-top: 0;
    color: var(--primary-color);
    border-bottom: 2px solid var(--primary-color);
    padding-bottom: 10px;
    margin-bottom: 20px;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    color: var(--text-dark);
}

.form-group input, .form-group textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 16px;
}

.submit-btn {
    background-color: var(--primary-color);
    color: white;
    border: none;
    padding: 12px 25px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s;
}

.submit-btn:hover {
    background-color: #158a9e;
}

/* Estilos para a galeria */
.gallery-section {
    padding: 50px 0;
    background-color: var(--bg-light);
}

.section-title {
    text-align: center;
    color: var(--primary-color);
    margin-bottom: 30px;
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
}

.gallery-item {
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    transition: transform 0.3s;
}

.gallery-item:hover {
    transform: translateY(-5px);
}

.gallery-item img {
    width: 100%;
    height: auto;
    display: block;
}

/* Estilos para a página de doação */
.donate-section {
    padding: 50px 0;
    background-color: var(--bg-light);
}

.donate-content {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

.donate-description {
    font-size: 18px;
    margin-bottom: 30px;
    line-height: 1.6;
}

.payment-options {
    background-color: white;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.payment-options h3 {
    color: var(--primary-color);
    margin-bottom: 20px;
}

.payment-methods {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    margin-bottom: 30px;
}

.payment-method {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 15px;
    border: 2px solid #ddd;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s;
    width: 100px;
}

.payment-method:hover {
    border-color: var(--primary-color);
}

.payment-method.active {
    border-color: var(--primary-color);
    background-color: #f0f9fc;
}

.payment-method i {
    font-size: 30px;
    margin-bottom: 10px;
    color: var(--primary-color);
}

.donate-button {
    background-color: var(--accent-color);
    color: white;
    border: none;
    padding: 15px 30px;
    border-radius: 4px;
    font-size: 18px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.donate-button:disabled {
    background-color: #ccc;
    cursor: not-allowed;
}

.donate-button:not(:disabled):hover {
    background-color: #188a49;
}

.donate-contact {
    margin-top: 30px;
    font-size: 14px;
    color: #1d1a1a;
}



/* Responsividade */
@media (max-width: 768px) {
    .contact-grid, .donate-content {
        padding: 0 15px;
    }
    
    .payment-methods {
        gap: 10px;
    }
    
    .payment-method {
        width: 80px;
        padding: 10px;
    }
}

/* ===== MODERN NAVIGATION ===== */
.modern-nav {
    background-color: rgb(234, 196, 196);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    max-width: 1200px;
    margin: 0 auto;
    height: 80px;
    color: black;
    
}


.nav-menu {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    transition: all 0.3s ease;
    background-color:  rgb(5, 103, 201);

}

.nav-menu li {
    margin: 0 5px;
    
}

.nav-menu a {
    color: var(--text-dark);
    text-decoration: none;
    padding: 10px 15px;
    display: block;
    font-weight: 500;
    transition: all 0.3s ease;
    border-radius: 4px;

}

.nav-menu a:hover {
  
    background-color: #036e15;
}

.nav-toggle {
    display: none;
    flex-direction: column;
    cursor: pointer;
    width: 30px;
    height: 21px;
    position: relative;
}

.nav-toggle span {
    background-color:#f20808;
    height: 3px;
    width: 100%;
    display: block;
    margin-bottom: 6px;
    border-radius: 3px;
    transition: all 0.3s ease;
}

.nav-toggle.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 6px);
}

.nav-toggle.active span:nth-child(2) {
    opacity: 0;
}

.nav-toggle.active span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -6px);
}



/* ===== MODERN FOOTER ===== */
.footer-modern {
    background-color: var(--primary-color);
    color: white;
    padding: 50px 0 20px;
}

.footer-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: 30px;
}

.footer-column {
    flex: 1;
    min-width: 250px;
    margin-bottom: 30px;
    padding: 0 15px;
}

.footer-column h3 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 20px;
    border-bottom: 2px solid rgba(255, 255, 255, 0.3);
    padding-bottom: 10px;
}

.footer-column p {
    margin-bottom: 10px;
    line-height: 1.6;
}

.footer-column i {
    margin-right: 10px;
    width: 20px;
    text-align: center;
}

.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links li {
    margin-bottom: 10px;
}

.footer-links a {
    color: white;
    text-decoration: none;
    transition: all 0.3s;
}

.footer-links a:hover {
    color: var(--secondary-color);
    padding-left: 5px;
}

.social-icons {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
}

.social-icons a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    color: white;
    font-size: 18px;
    transition: all 0.3s;
}

.social-icons a:hover {
    background-color: var(--secondary-color);
    transform: translateY(-3px);
}

.newsletter h4 {
    font-size: 16px;
    margin-bottom: 10px;
}

.newsletter form {
    display: flex;
}

.newsletter input {
    flex-grow: 1;
    padding: 10px;
    border: none;
    border-radius: 4px 0 0 4px;
    font-size: 14px;
}

.newsletter button {
    background-color: var(--secondary-color);
    color: white;
    border: none;
    padding: 0 15px;
    border-radius: 0 4px 4px 0;
    cursor: pointer;
    transition: background-color 0.3s;
}

.newsletter button:hover {
    background-color: #c15a1e;
}

.footer-bottom {
    text-align: center;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* Responsive Styles */
@media (max-width: 992px) {
    .nav-toggle {
        display: flex;
    }
    
    .nav-menu {
        position: fixed;
        top: 80px;
        left: -100%;
        width: 80%;
        max-width: 300px;
        height: calc(100vh - 80px);
        background-color: white;
        flex-direction: column;
        align-items: flex-start;
        padding: 20px;
        box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
        overflow-y: auto;
    }
    
    .nav-menu.active {
        left: 0;
    }
    
    .nav-menu li {
        width: 100%;
        margin: 0;
        margin-bottom: 10px;
    }
    
    .nav-menu a {
        width: 100%;
        padding: 12px;
    }
    
    .language-selector {
        margin-left: 0;
        margin-top: 15px;
        width: 100%;
    }
    
    .selected-language {
        justify-content: space-between;
    }
    
    .language-dropdown {
        position: static;
        width: 100%;
        margin-top: 10px;
        box-shadow: none;
        border: 1px solid #eee;
    }
    
    .footer-column {
        flex: 0 0 100%;
        margin-bottom: 30px;
    }
}

@media (max-width: 768px) {
    .footer-column {
        flex: 0 0 100%;
    }
}

  /* Estilos para o seletor de idioma */
.language-selector {
    position: relative;
}

.selected-language {
    display: flex;
    align-items: center;
    cursor: pointer;
    padding: 8px 12px;
    background-color: rgba(0, 0, 0, 0.05);
    border-radius: 4px;
}

.selected-language img {
    width: 20px;
    height: 15px;
    margin-right: 5px;
}

.language-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    background-color: white;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    border-radius: 4px;
    width: 150px;
    display: none;
    z-index: 1000;
}

.language-dropdown.active {
    display: block;
}

.language-dropdown li {
    padding: 8px 12px;
    display: flex;
    align-items: center;
    cursor: pointer;
}

.language-dropdown li:hover {
    background-color: #f5f5f5;
}

.language-dropdown img {
    width: 20px;
    height: 15px;
    margin-right: 10px;
}