body {
    background-color: #b3a8e7;
    padding-top: 4%;
}
.left-aligned {
    margin-left: auto; 
}
.bg-dark {
    background-color: #343a404C !important; 
}
.bg-hero {
    background-color: #bcd5f8; height: 70%;
}

.dropdown-item:hover {
    background-color: #343a404C; 
    color: white; 
}

.image-effect-slide {
  position: relative;
  left: -100%; 
  opacity: 0;  
  transition: left 2s ease-in-out, opacity 2s ease-in-out; }
.image-g-out { overflow: hidden;  }
.image-effect-slide.animate { left: 0; opacity: 1; }
.image-effect-slide:hover { transform: scale(1.05); }

.microorganisms-list { background-color: #19d3a5; border-radius: 8px; padding: 15px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); }
.microorganisms-list ul { list-style-type: none; padding: 0; margin: 0; }
.micro organisms-list li { font-size: 18px; font-weight: 500; color: #fff; padding: 10px; transition: background-color 0.3s; border-bottom: 1px solid #7ae4d2; }
.microorganisms-list li:last-child { border-bottom: none; }
.microorganisms-list li:hover { background-color: #17b59b; margin: 5px 0; }

.equal-img { width: 100%; height: auto; max-height: 400px; object-fit: contain; }

.custom-header { font-size: 1.5rem; font-weight: bold; margin-bottom: 0.5rem; text-align: center; }

.table-green {
    background-color: #36977f; /* Verde escuro */
    color: white; /* Texto branco */
  }

  .table-green th,
  .table-green td {
    border-color: #95d5b2; /* Verde claro para as bordas */
  }

/*CABEÇALHOS*/
h1 {
    font-family: 'Sarina', sans-serif; text-shadow: 4px 4px 1px #19d3a5;
}
h2 {
    font-family: 'Chewy', cursive; font-size: 3em; color: #19d3a5;
     text-shadow: -3px 3px 0px white;
     font-size: 80px;
}
h4 {
    font-family: 'Antonio', sans-serif; font-size: 2em; color: #dee7e5;
     text-shadow: 0px 0px 0px white;
     font-size: 30px;
     background-color: #19d3a5; /* Cor verde no fundo */
    padding: 10px 20px;
    border-radius: 20px; /* Cantos arredondados */
    text-align: center;
    color: rgb(255, 255, 255);
    margin-bottom: 10px;
    position: absolute; /* Permite o posicionamento relativo à página */
    
}
.img-stacked {
    display: block;
    margin: 20px auto; /* Centraliza as imagens com um espaçamento entre elas */
    width: 50%; /* Define o mesmo tamanho para as imagens, você pode ajustar para um valor fixo como 300px */
    max-width: 300px; /* Tamanho máximo das imagens para evitar que fiquem muito grandes */
    opacity: 0; /* Inicialmente invisível */
  transform: translateY(20px); /* Inicialmente deslocada para baixo */
  animation: fadeInUp 8s ease forwards; /* Aplica a animação */
}
  @keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(20px); /* Ponto de início da animação */
  }
  100% {
    opacity: 1;
    transform: translateY(0); /* Ponto final da animação */
  }
}



/*IMAGENS*/
.imagem-topo {
    width: 80%;
    margin-bottom: 40px;
    object-fit: cover; 
}

.imagem-bottom {
    width: 80%; 
    margin-top: 40px;
    object-fit: cover;
}

.imagem-esquerda {
    width: 30%;
    object-fit: cover;
    margin-top: 10px; 
    border-radius: 40px;
}

.img-ajustada {
    width: 100%;              
    height: 100%;             
    object-fit: cover;  
}

.img-direita {
    width: 100%;
    height: 100%;
    object-fit: cover;  
}


/*ROTAÇÃO DE IMAGENS*/
.rotating-image {
    animation: rotation 5s linear infinite;
}
@keyframes rotation {
    from {
        transform: rotate(0deg);
    }
    to{
        transform: rotate(360deg);
    }
}


/*TEXTOS*/
.texto1 {
    font-family: 'Antonio', sans-serif;
    font-size: 30px;
    color: white;
    text-shadow: none;
}

.texto2 {
    font-family: 'Antonio', sans-serif;
    font-size: 20px;
    color: white;
    text-shadow: none;
    text-decoration: none;
}

/*RETANGULOS VERDES*/
.centraliza-retangulo {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh
}

.esquerda-retangulo {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    height: 55vh;
}

.direita-retangulo {
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
    height: 55vh;
}

.retangulo-home-1 {
    width: 50%;
    height: 50%;
    background-color: #19d3a5;
    position: relative;
    margin: 25px;
    border-radius: 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: white;
    font-family: 'Antonio', sans-serif;
    padding: 20px;
    font-size: 20px;
    box-sizing: border-box;
}

.retangulo-home-2 {
    width: 50%;
    height: 50%;
    background-color: #19d3a5;
    position: relative;
    margin: 25px;
    border-radius: 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: white;
    font-family: 'Antonio', sans-serif;
    font-size: 20px;
    padding: 20px;
    box-sizing: border-box;
}

.retangulo-team-verde-direita{
    width: 700px;
    height: 280px;
    background-color: #bcd5f8; 
    position: relative;
    border-radius: 15px;
    flex-direction: row;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    text-align: center;
}

.retangulo-team-verde-esquerda{
    width: 700px;
    height: 280px;
    background-color: #bcd5f8; 
    position: relative;
    border-radius: 15px;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    text-align: center;
}


/*ESPAÇO DE FUNDO*/
.background-space {
    width: 100%;
    height: 100px; 
    background-color: #b3a8e7; 
    margin-bottom: 50px; 
}

.background-space-menor {
    width: 100%;
    height: 100px; 
    background-color: #b3a8e7; 
    margin-bottom: 1px; 
}
.background-space-maior {
    width: 100%;
    height: 100px; 
    background-color: #b3a8e7; 
    margin-bottom: 800px; 
}

.header-space{
    width: 100%;
    height: 10px;
    background-color: #bcd5f8; 
    margin-bottom: 50px;
}


/*RETANGULO PARA LINKS OUTRAS ABAS*/

.container-1{
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}

.menu-item {
    background-color: #007bff;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin: 10px;
    border-radius: 40px;
    overflow: hidden;
}

/* Estilos específicos para cada item */
.menu-item:nth-child(1) {
    width: 20%; 
    height: 170px; 
    background-color: #bcd5f8; 
    color: white;
}

.menu-item:nth-child(2) { /*item 3*/
    width: 30%; 
    height: 170px; 
    background-color: #dc2b7a; 
    color: white;
}

.menu-item:nth-child(3) { /*item 6*/
    padding: 40px; 
    width: 44%; 
    height: 170px; 
    background-color: #dc2b7a; 
    color: white;
    top: 40px; 
    left: 220px; 
}

 .menu-item:nth-child(4) { /* item 2 */
    width: 20%; 
    height: 340px; 
    background-color: #bcd5f8; 
    color: white;
}
.menu-item:nth-child(5) { /*item 4*/
    padding: 40px; 
    width: 30%; 
    height: 340px; 
    background-color: #bcd5f8; 
    color: white;
    top: 380px; 
    left: 220px; 
}
.menu-item:nth-child(6) { /*item 5*/
    padding: 40px;
    width: 44%; 
    height: 340px;
    background-color: #dc2b7a; 
    color: white;
    top: 40px; 
    left: 490px;
}
.menu-item:nth-child(7) {
    padding: 80px; 
    width: 52%; 
    height: 170px; 
    background-color: #19d3a5;
    color: white;
    top: 210px; 
    left: 490px; 
}
.menu-item:nth-child(8) {
    padding: 80px; 
    width: 44%; 
    height: 170px; 
    background-color: #19d3a5;
    color: white;
    top: 210px; 
    left: 660px; 
}

/* Responsividade */
@media (max-width: 768px) {
    .menu-item {
        flex: 1 1 100%; /* Em telas menores, os itens ocuparão toda a largura */
        height: auto; /* Altura automática */
    }
}

.menu-item:hover {
    transition: background-color 0.8s;
    background-color: #00FFFF; 
    cursor: pointer;
}


/* CALLOUT */
.bd-callout { text-align: center; padding:1.25rem; margin: 80px auto 1.25rem; border:1px solid #19d3a5; border-left-width:.25rem; border-radius:.90rem; background-color: #19d3a5; width: auto; /* Para se ajustar ao conteúdo */max-width: 100%; /* Responsivo para telas menores */ box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.15); /* Adiciona uma sombra suave */transition: all 0.3s ease; }
.bd-callout h4 { margin-bottom:.25rem }
.bd-callout p:last-child { margin-bottom:0 }
.bd-callout code { border-radius:.25rem }
.bd-callout+.bd-callout { margin-top:-.25rem }
.bd-callout-info {  font-family: 'Antonio', sans-serif; color: #dee7e5;
    text-shadow: 0px 0px 0px white;
    font-size: 20px; border-left-color:#19d3a5 }
.bd-callout-warning { border-left-color:#19d3a5 }
.bd-callout-danger { border-left-color:#19d3a5 }

.bd-callout+.bd-callout {
    margin-top: -.25rem;
}
/* Imagens dentro do retângulo */
.bd-callout img {
    max-width: 100%; 
    background-color: #bcd5f8; /* Cor de fundo roxa */
    padding: 20px; /* Espaçamento interno */
    border-radius: 10px; /* Arredondamento dos cantos */
    height: auto;
}
.row {
    display: flex;
    justify-content: center;
}
/* Responsividade */
@media (max-width: 768px) {
    .bd-callout {
        width: 90%;
        padding: 15px;
    }
}
/* FOOTER */
.footer {
    background: linear-gradient(to right, #b3a8e7, #d6b0e0);
    color: rgb(250, 250, 250);
    text-align: center;
    padding: 20px 0;
    position: relative;
    overflow: hidden;
    transition: background-color 0.5s ease;
    min-height: 100px; /* Tamanho mínimo do footer */
}

.footer:hover {
    background: linear-gradient(to right, #9b8bd7, #c79ed7);
}

.footer-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
}

.logo {
    width: 80px;
    margin-bottom: 20px;
    transition: transform 0.3s ease-in-out;
}

.logo:hover {
    transform: scale(1.1);
}

.social-media {
    display: flex;                
    flex-direction: column;       
    align-items: center;          
    margin-bottom: 20px;         
}

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

.social-title {
    margin-bottom: 15px; 
    font-size: 24px; 
    color: white; 
    text-align: center;
}

.social-icon {
    color: #19d3a5;
    font-size: 15px;
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background-color: #9b8bd7; /* Cor de fundo dos ícones */
    transition: transform 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}

.social-icon:hover {
    transform: scale(1.2);
    color: #9b8bd7;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.email-link {
    color: white;
    font-weight: bold;
    text-decoration: none;
}

.email-link:hover {
    text-decoration: underline;
}

.footer hr {
    border-top: 1px solid #eee6f0;
    margin: 20px 0;
}

footer a i:hover {
    color: #ebd6e6;
}


/* Responsividade */
@media (max-width: 768px) {
    .social-media {
        flex-direction: column;
        gap: 10px;
    }
    .footer {
        height: 100px; /* Altura menor para telas menores, se necessário */
    }

    .logo { width: auto; 
    }
}

footer a { color: white; font-weight: bold; text-decoration: none; }
footer a:hover { color: white; text-decoration: underline; }