@import url(https://fonts.googleapis.com/css?family=Overpass:100,200,300,regular,500,600,700,800,900,100italic,200italic,300italic,italic,500italic,600italic,700italic,800italic,900italic);
@import url(https://fonts.googleapis.com/css?family=Poppins:100,100italic,200,200italic,300,300italic,regular,italic,500,500italic,600,600italic,700,700italic,800,800italic,900,900italic);

/* VARIÁVEIS */
:root{
    --header: #CBD1CF;
    --primary-color: #072B5A;
    --color-grey: #999999;
    --color-black: #252525;
    --color-white: #fff;
    --color-shadow-white: rgba (0, 0, 0, 0.1);
    --color-shadow-white: rgba (255, 255, 255, 0.1);
    --primary-font: 'Poppins', sans-serif;
    --secondary-font: 'Overpass', sans-serif;
}

/*CLASSES PRÉS CONFIGURADAS*/
html{
  scroll-behavior: smooth;
  overflow-x: hidden;
}

.text-justify{
    text-align: justify;
}

a{
    text-decoration: none;
    color: inherit  
}

/* BOTÃO WHATSAPP */
.whatsapp-button {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 1000;
}

.whatsapp-button a {
    display: block;
    width: 50px;
    height: 50px;
    background-color: rgb(37, 211, 102);
    border-radius: 50%;
    text-align: center;
    line-height: 50px;
    box-shadow: 0 0 10px rgba(37, 211, 102, 0.9);
    color: var(--color-white);
    font-size: 24px;
    text-decoration: none;
}

/* ESTILO BOTÃO VOLTAR AO TOPO */
.back-to-top {
    position: fixed;
    bottom: 100px;
    right: 20px;
    width: 30px;
    height: 30px;
    background-color: var(--primary-color);
    color: var(--color-white);
    border-radius: 50%;
    cursor: pointer;
    text-align: center;
    font-size: 18px;
    display: none;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
}

/*HEADER*/
/* Adiciona sombra ao header quando fixo no topo */
header.fixed-top {
  background-color: var(--color-white);
  box-shadow: 0 0 10px rgba(80, 80, 80, 0.4);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Quando o header não estiver fixo (por exemplo, ao rolar para baixo e ele voltar ao normal) */
header {
  box-shadow: none; /* Sem sombra */
}

.navbar-nav li a{
  font-size: 0.8rem;
  font-weight: 500;
  transition: color 0.3s;
}

.navbar-nav li a:hover{
  color: var(--primary-color);
}

.navbar-nav li a.active{
 color: var(--primary-color);
 font-weight: bold;
}

/*NOTICES*/
/* Alterar a cor das setas */
.carousel-control-prev-icon,
.carousel-control-next-icon {
  background-color: var(--primary-color);
  border-radius: 50%; /* Adiciona bordas arredondadas */
  width: 40px;
  height: 40px;
}

/* Aumentar o contraste (opcional) */
.carousel-control-prev-icon:hover,
.carousel-control-next-icon:hover {
  background-color: var(--primary-color); /* Tom mais escuro no hover */
}

/* Alterar a cor padrão do indicador */
.carousel-indicators [data-bs-target] {
    background-color: black; /* Cor azul para os indicadores */
    width: 12px; /* Aumenta o tamanho */
    height: 12px; /* Aumenta o tamanho */
    border-radius: 50%; /* Torna as bolinhas arredondadas */
    opacity: 0.6; /* Deixa as bolinhas semi-transparentes */
  }
  
  /* Indicador ativo */
  .carousel-indicators .active {
    background-color: darkblue; /* Azul escuro para o indicador ativo */
    opacity: 1; /* Totalmente opaco */
  }
  
  /* Adicionar efeito hover nos indicadores */
  .carousel-indicators [data-bs-target]:hover {
    background-color: lightblue; /* Azul claro no hover */
  }

  /*SOBRE*/
  .image-overlay {
    position: relative;
    width: 100%;
    max-width: 1200;
    margin: auto;
    overflow: hidden;
  }

  .image-overlay img {
    width: 100%;
    height: auto; /
  }

  .image-overlay .overlay-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--color-black);
    font-size: 2rem;
    font-weight: bold;
    text-shadow: 2px 2px 5px rgba(172, 166, 166, 0.7);
    text-align: center;
  }

  .about {
    padding: 60px 15px; /* Espaçamento interno */
    background-color: #f8f9fa; /* Cor de fundo clara */
  }
  .about__content h1 {
    font-size: 2.5rem;
    margin-bottom: 20px;
    color: var(--primary-color); /* Cor de destaque para o título */
  }
  .about__text p {
    font-size: 20px;
    line-height: 1.6;
    color: var(--primary-color);
    text-align: justify
  }

  .about__card {
    background-color: #F5F5F5; /* Fundo claro para destacar as cartas */
    padding: 20px;
    border-radius: 10px; /* Bordas arredondadas */
    box-shadow: 0 0 10px rgba(80, 80, 80, 0.4);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }

  .about__card:hover {
    transform: translateY(-10px); /* Efeito de elevação ao passar o mouse */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
  }

  .about__title {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--primary-color);
    margin-bottom: 15px;
  }

  .about__texts {
    font-size: 1rem;
    line-height: 1.8;
    color: var(--primary-color);
    text-align: justify;
  }

  /*CANNABIS*/
  .cannabis__details-img img {
    max-width: 100%;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  }

  .features .feature p {
    margin: 5px 0;
    font-size: 1rem;
  }

  .features .feature {
    margin-bottom: 20px;
  }

  .section-heading {
    font-weight: bold;
    margin-bottom: 20px;
  }

  .text__cannabis{
    font-size: 20px;
    color: var(--primary-color);
  }

  .custom-card {
    background-color: #f8f9fa; /* Cor do fundo clara */
    border: 1px solid #dee2e6; /* Borda leve */
    border-radius: 10px; /* Bordas arredondadas */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombreamento leve */
    padding: 20px; /* Espaçamento interno */
  }

  .custom-card h2 {
    margin-bottom: 20px;
    color: #007bff; /* Azul do Bootstrap */
  }

  .features p {
    text-align: center;
    font-size: 20px;
    margin: 5px 0;
    padding: 10px;
  }

  /*ÁREA DO ASSOCIADO*/
  .text-success{
    color: var(--primary-color);
  }

  .btn-secondary.custom-btn {
    font-size: 0.8rem;
    font-weight: 600;
    transition: color 0.3s, background-color 0.3s, border-color 0.3s;
    background-color: transparent;
    border: 2px solid var(--primary-color);
    color: var(--primary-color);
    padding: 10px 20px;
    text-transform: uppercase;
    text-decoration: none;
    display: inline-block;
    cursor: pointer;
  }
  
  .btn-secondary.custom-btn:hover {
    background-color: var(--primary-color);
    color: var(--color-white);
  }

  /*DEPOIMENTOS*/
  .owl-carousel .testimonial-item {
    text-align: center;
    padding: 20px;
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 8px;
    margin: 10px;
  }
  .owl-carousel .testimonial-item h4 {
    font-size: 16px;
    margin-top: 10px;
    color: #555;
  }

  .owl-dots {
    text-align: center; /* Centraliza os dots */
    margin-top: 20px;   /* Espaço acima dos dots */
  }
  
  .owl-dot {
    display: inline-block;  /* Faz as bolinhas ficarem lado a lado */
    width: 12px;            /* Largura das bolinhas */
    height: 12px;           /* Altura das bolinhas */
    margin: 5px;            /* Espaço entre as bolinhas */
    background: var(--primary-color);       /* Cor padrão */
    border-radius: 50%;     /* Forma circular */
    cursor: pointer;        /* Mostra o cursor de clique */
  }
  
  .owl-dot.active {
    background: var(--color-black); /* Cor das bolinhas ativas */
  }
  
  /*FOOTER*/
  .footer{
    background-color: var(--primary-color);
  }

  /* DOAÇÃO */
.title__donation {
  color: var(--primary-color);
}

.text__donation {
  text-align: justify;
  font-size: 17px;
  color: var(--primary-color);
  padding: 20px;
  font-weight: 400;
}

.text__donation__card {
  text-align: center;
  font-size: 17px;
  color: var(--primary-color);
}

.cards__donation {
  border: 2px solid var(--primary-color);
  border-radius: 20px;
  padding: 1rem;
  transition: background-color 0.3s, transform 0.2s;
}

.cards__donation:hover {
  transform: scale(1.05);
}

  /* ISENÇAO */

  .title__exemption {
    margin-bottom: 20px;
    color: var(--primary-color);
    font-size: 24px;
}

.text__exemption {
    margin-bottom: 25px;
    color: var(--primary-color);
    font-size: 16px;
}

.exemption__content p {
    margin: 20px 0 20px;
    color: var(--primary-color);
}

.exemption__content {
    margin: 0 auto;
    width: 80%;
}

.exemption__content ul {
    margin: 0 0 20px;
}

.btn-secondary {
    font-size: 1rem;
    font-weight: 600;
    transition: color 0.3s;
    background-color: transparent;
    border: 2px solid var(--primary-color);
    color: var(--primary-color);
    padding: 10px 20px;
    text-transform: uppercase;
    text-decoration: none;
    display: inline-block;
    cursor: pointer;
}

.btn-secondary:hover {
    background-color: var(--primary-color);
    color: var(--color-white);
}