/* Reset de estilos básicos */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
    outline: none;
}

/* Estilos do body */
body {
    background-color: white;
    background-image: url('img/background.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    font-family: 'Poppins', sans-serif;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow-x: hidden;
}

@media (max-width: 768px) {
    body {
        background-repeat: repeat-y; /* Faz a imagem se repetir apenas verticalmente */
        background-size: auto; /* Não estica a imagem */
        background-position: top center; /* Posiciona a imagem no topo centralizado */ 
    }
}

/* Estilos do cabeçalho */
header {
    display: flex;
    align-items: center;
    background-color: rgba(250, 231, 107, 0.499);
    backdrop-filter: blur(1px); /* Intensidade do blur */
    padding: 5px 20px;
}

@media (max-width: 768px) {
    header {
        font-size: 8px;
    }
}

.container {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    width: 100%;
}

@media (min-width: 768px) {
    .container {
        padding-left: 135px; 
    }
}

.logo {
    width: 200px;
    height: auto;
}

/* Estilos do menu de navegação */
.ul {
    list-style-type: none;
    display: flex;
    justify-content: center;
    flex-grow: 1;
    margin: 0;
}

.ul li {
    margin: 0 10px;
}

.nav-link {
    padding: 10px;
    color: #131212;
    position: relative;
    text-decoration: none;
}

.nav-link::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 20%;
    height: 2px;
    background-color: #2694b8;
    transform: scaleX(0);
    transition: transform 0.5s ease;
}

.nav-link:hover {
    color: #2694b8;
}

.nav-link:hover::after,
.nav-link:focus::after {
    transform: scaleX(1);
}

/* Estilos dos ícones de redes sociais */
.social-icons {
    display: flex;
    margin-left: auto;
}

.social-icon {
    width: 35px;
    height: auto;
    margin-left: 15px;
    transition: transform 0.3s;
}

@media (max-width: 768px) {
    .social-icon {
        width: 20px;
        height: auto; 
    }      
}

.social-icon:hover {
    transform: scale(1.1);
}

/* Estilos do carrossel */
.carousel {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.carousel-container {
    display: flex;
    transition: transform 0.5s ease;
}

@media (max-width: 768px) {
    .carousel-container {
        height: 200px; 
    }
    .carousel-image {
        object-fit: cover;
    }        
}

.carousel-image {
    min-width: 100%;
    height: auto;
    object-fit: cover;
    margin-bottom: 20px;
}

                                                                                           /* TITULO (IMAGEM) */
.title-image {
    width: 600px; 
    height: auto; 
}

@media (max-width: 768px) {
    .title-image {
        width: 310px;
        height: auto; 
    }      
}



/* BOTÃO DO CARROSSEL */ 
/* From Uiverse.io by MuhammadHasann */ 
.button {
    --black-700: hsla(0 0% 12% / 1);
    --border_radius: 9999px;
    --transtion: 0.3s ease-in-out;
    --offset: 2px;
  
    cursor: pointer;
  
    display: flex;
    align-items: center;
    gap: 0.5rem;
  
  
    padding: 1rem 2rem;
    background-color: transparent;
  
    border: none;
    border-radius: var(--border_radius);
    transform: scale(calc(1 + (var(--active, 0) * 0.1)));
  
    transition: transform var(--transtion);

    position: absolute;  /* Faz o botão ser posicionado em relação ao contêiner mais próximo */
    top: 80%;  /* Coloca o botão no meio da altura */
    left: 42.5%;  /* Coloca o botão no meio da largura */
   

  }
  
  .button::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  
    width: 100%;
    height: 100%;
    background-color: var(--black-700);
  
    border-radius: var(--border_radius);
    box-shadow: inset 0 0.5px hsl(0, 0%, 100%), inset 0 -1px 2px 0 hsl(0, 0%, 0%),
      0px 4px 10px -4px hsla(0 0% 0% / calc(1 - var(--active, 0))),
      0 0 0 calc(var(--active, 0) * 0.375rem) hsla(0, 0%, 13%, 0.75);
  
    transition: all var(--transtion);
    z-index: 0;
  }
  
  .button::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  
    width: 100%;
    height: 100%;
    background-color: hsla(0, 4%, 16%, 0.75);
    background-image: radial-gradient(
        at 51% 89%,
        rgb(26, 26, 26) 0px,
        transparent 50%
      ),
      radial-gradient(at 100% 100%, rgb(7, 7, 7) 0px, transparent 50%),
      radial-gradient(at 22% 91%, rgb(0, 0, 0) 0px, transparent 50%);
    background-position: top;
  
    opacity: var(--active, 0);
    border-radius: var(--border_radius);
    transition: opacity var(--transtion);
    z-index: 2;
  }
  
  .button:is(:hover, :focus-visible) {
    --active: 1;
  }
  .button:active {
    transform: scale(1);
  }
  
  .button .dots_border {
    --size_border: calc(100% + 2px);
  
    overflow: hidden;
  
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  
    width: var(--size_border);
    height: var(--size_border);
    background-color: transparent;
  
    border-radius: var(--border_radius);
    z-index: -10;
  }
  
  .button .dots_border::before {
    content: "";
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%);
    transform-origin: left;
    transform: rotate(0deg);
  
    width: 100%;
    height: 2rem;
    background-color: white;
  
    mask: linear-gradient(transparent 0%, white 120%);
    animation: rotate 2s linear infinite;
  }
  
  @keyframes rotate {
    to {
      transform: rotate(360deg);
    }
  }
  
  .button .sparkle {
    position: relative;
    z-index: 10;
  
    width: 1.75rem;
  }
  
  .button .sparkle .path {
    fill: currentColor;
    stroke: currentColor;
  
    transform-origin: center;
  
    color: hsl(0, 0%, 100%);
  }
  
  .button:is(:hover, :focus) .sparkle .path {
    animation: path 1.5s linear 0.5s infinite;
  }
  
  .button .sparkle .path:nth-child(1) {
    --scale_path_1: 1.2;
  }
  .button .sparkle .path:nth-child(2) {
    --scale_path_2: 1.2;
  }
  .button .sparkle .path:nth-child(3) {
    --scale_path_3: 1.2;
  }
  
  @keyframes path {
    0%,
    34%,
    71%,
    100% {
      transform: scale(1);
    }
    17% {
      transform: scale(var(--scale_path_1, 1));
    }
    49% {
      transform: scale(var(--scale_path_2, 1));
    }
    83% {
      transform: scale(var(--scale_path_3, 1));
    }
  }
  
  .button .text_button {
    position: relative;
    z-index: 10;
  
    background-image: linear-gradient(
      90deg,
      hsla(0 0% 100% / 1) 0%,
      hsla(0 0% 100% / var(--active, 0)) 120%
    );
    background-clip: text;
  
    font-size: 1rem;
    color: transparent;
  }
  
  @media (max-width: 768px) { 
    .button {
        padding: 0.5rem 1rem; 
        width: 6rem; 
        height: 2.5rem; 
        position: absolute;  /* Faz o botão ser posicionado em relação ao contêiner mais próximo */
        top: 60%;  
        left: 70%;  
    }

    .button .dots_border {
        --size_border: calc(100% + 1px); /* ajusta conforme necessário */
    }

    .button .sparkle {
        width: 1rem; /* diminui o tamanho do ícone */
    }

    .button .text_button {
        font-size: 0.875rem; /* diminui o tamanho do texto */
    }
}



/* SEÇÃO SOBRE */

.content {
    padding: 40px 20px;
    max-width: 1000px;
    margin: 0 auto;
    text-align: center;
    font-size: 18px;
    line-height: 1.6;
    background-color: rgba(43, 42, 42, 0.6); /* 0.8 representa 80% de opacidade */
    backdrop-filter: blur(2px); /* Intensidade do blur */
    border-radius: 10px;
    margin-bottom: 40px;
}

@media (max-width: 768px) {
    .content {
        max-width: 350px;
    }       
}

.content h2 {
    font-size: 36px;
    color: #fff;
    margin-bottom: 20px;

}

.profile-section {
    display: flex;
    align-items: center;
    margin: 20px 0;
    gap: 40px;
}

@media (max-width: 768px) { 
    .profile-section {
        flex-direction: column; 
        margin: 40px 0;
    }

    .profile-section img {
        order: -1; 
    }
}

.profile-section img {
    max-width: 300px;
    margin: 0 20px;
    border-radius: 20px;
    transition: transform 0.3s ease, opacity 0.3s ease; /* Para animações de zoom ou opacidade */
}

.profile-section img.hovered {
    transform: scale(1.05); /* Efeito de zoom suave */
    opacity: 0.9; /* Opcional: diminui a opacidade ao passar o mouse */
}

.profile-text {
    flex: 1;
    text-align: center;
}

.profile-text p {
   padding-left: 20px;
   padding-right: 20px;
   color: #fff;
}

.profile-text li {
    padding-left: 20px;
    padding-right: 20px;
    color: #fff;
 }

.left {
    order: 2;
}

.right {
    order: 1;
}

/* Seção de Serviços */
.serviços {
    padding: 20px 0;
    margin-top: 80px;
    margin-bottom: 20px;
}

.serviços-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 60px;
    color: #ffffff;
}

/* Estilos para títulos */
h2 {
    font-size: 50px;
    text-align: center;
    color: #1b1b1b;
}

.h2-img {
    width: 100%;
    max-width: 390px;
    height: auto;
    margin: 0 auto; /* Centraliza a imagem */
    display: block; /* Necessário para centralização com margem automática */
}

.h2-img:hover {
    transform: scale(1.05);
    opacity: 0.9; /* Opacidade reduzida ao passar o mouse */
    transition: opacity 0.5s ease; /* Transição suave de 0.5s */
}

/* Estilos para vídeos */
.video-wrapper {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 100px;
}

@media (max-width: 768px) { 
    .video-wrapper {
        gap: 40px;   
    }
    .video-container li {
        margin-bottom: 1px;   
    }
}
.video-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 350px;
}

.video {
    max-width: 50%;
    height: auto;
}

.video-description {
    font-size: 22px;
    text-align: center;
    margin-top: 10px;
    
}

.video-container p {
    font-size: 18px;
    text-align: center;
    margin-top: 10px;
    padding: 0 1px;
}

/* Seção de Avaliações */
.avaliacoes {
    padding: 20px 0;
    background-color: #fff;
    margin-top: 60px;
    margin-bottom: 60px;
    position: relative;
    overflow: hidden;
}

@media (max-width: 768px) { 
    .avaliacoes h2 {
        font-size: 1.5em; 
    }
}

.avaliacoes-text {
    text-align: center;
}

.avaliacoes-wrapper {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
}

/* Estilo para avaliações individuais */
.avaliacao {
    background-color: #fff;
    border-radius: 8px;
    padding: 15px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    max-width: 300px;
    font-size: 20px;
    transition: transform 0.3s;
}

.comentario-img {
    max-width: 400px;
    max-height: 400px;
    border-radius: 10px;
    object-fit: cover; 
}

.avaliacao p {
    margin: 0;
}

.paciente {
    font-weight: bold;
    margin-top: 10px;
}



/* Carrossel de avaliações */
/* Estilos do carrossel para carouseltwo */
.swiper-container {
    width: 99%;
    height: 200px;
    margin-top: 10px; 
    margin-bottom: 40px; 
    overflow: hidden; 
}

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

.swiper-slide video {
    width: 99.9%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

@media (min-width: 769px) {
    .swiper-container {
       height: 300px; 
       object-fit: cover; 
       width: 100vw; 
   }
   .swiper-slide video {
       height: 200px;
   }
}

@media (max-width: 768px) {
    .swiper-container {
        width: 100vw; 
        height: 140px; 
    }
    .swiper-slide img {
        width: 100vw; 
        object-fit: cover; 
    }
}






/* Seção "AA nutrition Alliance" */
.AAnutritionalliance {
    text-align: center;
    margin: 30px auto;
    padding: 80px;
    background-color: rgba(43, 42, 42, 0.6); /* 0.8 representa 80% de opacidade */
    /*background-image: url('img/background.jpg');*/
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.AAnutritionalliance h2 {
    font-size: 30px;
    margin-bottom: 40px;
}

.AAnutritionalliance p {
    font-size: 18px;
    color: #fff;
    margin-bottom: 10px;
}

/* Botão "Comunidade Dynami" */
.btn-comunidade {
    display: inline-block;
    padding: 20px 40px;
    font-size: 25px;
    font-weight: bold;
    color: #000;
    background-color: #c2bcac;
    border: 1px solid #000000;
    border-radius: 10px;
    transition: background-color 0.3s;
    text-align: center;
    margin-top: 20px;
}

@media (max-width: 768px) {
    .btn-comunidade {
        padding: 15px 30px;
        font-size: 22px;
    }
}

.btn-comunidade:hover {
    background-color: #2694b8;
    color: #fff;
}

/* Estilos do rodapé */
footer {
    background-color: rgba(255, 255, 255, 0.8);
    padding: 5px 20px;
    height: auto;
}

.footer-container {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    max-width: 1400px;
    margin: 0 auto;
}

/*.footer-logo {
    width: 75px;
    height: auto;
}*/

.footer-info {
    text-align: center;
    font-size: 12px;
    color: #000000;
}

.footer-info a {
    color: #fff;
    text-decoration: none;
    margin-left: 5px;
    /* Adicionado espaço entre os links */
}

.footer-info p {
    margin: 2px 0;
    font-size: 12px;
}

.footer-info a:hover {
    text-decoration: underline;
}

                                                                                            /* METODOS */



.metodos {
    text-align: center;
    margin: 40px 0;
}

.metodos-container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    /* Para garantir que os planos se ajustem em telas menores */
    gap: 40px;
    /* Espaço entre os planos */
}

.metodo {
    background-color: rgba(255, 255, 255, 0.6);
    border-radius: 10px;
    padding: 20px;
    width: 300px;
    /* Largura fixa para cada plano */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s;
}

.metodo:hover {
    transform: scale(1.05);
    /* Efeito de aumento ao passar o mouse NO COMPUTADOR */
}

.metodo.scale-up {
    transform: scale(1.05); /* Aumenta o tamanho da "caixinha NO CELULAR" */
    transition: transform 0.3s ease; /* Suaviza o efeito */
}

.metodo h3 {
    font-size: 24px;
}

.metodo img {
    margin-top: 10px;
    margin-bottom: 10px;
    max-width: 50%;
    height: auto;
}

.metodo p {
    font-size: 16px;
    color: #252525;
    text-align: center;
    margin-top: 20px;
}






.check {
    color: green;
    margin-right: 5px;
}

.x {
    color: red !important;
    margin-right: 5px;
}

.saiba-mais {
    display: inline-block;
    padding: 10px 20px;
    font-size: 16px;
    color: #fff;
    background-color: #c2c0ac;
    border: 1px solid #000000;
    border-radius: 5px;
    text-decoration: none;
    transition: background-color 0.3s;
}

.saiba-mais:hover {
    background-color: #2694b8;
    color: #fff;
}

/* Estilos para a seção F.A.Q */
.faq {
    margin: 40px auto;
    text-align: left;
    max-width: 650px;
    color: #222222;
}

@media (max-width: 768px) { 
    .faq {
        max-width: 290px;
    }
}

.faq h2 {
    font-size: 35px;
    color: #fff;
    margin-bottom: 20px;
}

.faq-item {
    font-weight: bold;
    margin-bottom: 0;
    cursor: pointer;
    background-color: #808080;
    padding: 15px;
    border-radius: 6px;
    border: 1px solid #ffdd81f6;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background-color 0.7s;
}

.faq-item:hover {
    background-color: #e0e0e0;
}

.faq-answer {
    text-align: center;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease; 
    margin-left: 3px;
    margin-right: 3px;
    padding: 5px;
    background-color: rgba(255, 255, 255, 0.6);
    border-radius: 6px;
}

.faq-item.open + .faq-answer {
    max-height: 500px; 
}

.arrow {
    margin-left: 10px;
    transform: rotate(0deg);
    transition: transform 0.3s;
}

.faq-item.open .arrow {
    transform: rotate(90deg); 
}

/* From Uiverse.io by zaeniahmad-id */ 
        /* OOP CSS CODE from Zaeni Ahmad BOTÃO REDES*/
        .redes {
            width: fit-content;
            height: fit-content;
            background-color: rgba(49, 49, 49, 0.8);
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 15px 15px;
            gap: 15px;
            overflow: hidden;
            border-radius: 27px;
            box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.055);
            margin: 0 auto;
            }
    
            /* for all social containers*/
            .redes a {
            width: 52px;
            height: 52px;
            background-color: rgba(117, 117, 117, 0);
            display: flex;
            align-items: center;
            border-radius: 10px;
            justify-content: center;
            overflow: hidden;
            transition: all 0.4s cubic-bezier(0.15, 0.83, 0.66, 1);
            }
    
            .redes a:hover {
            transform: scale(1.2);
            border-radius: 15px;
            }
            /*instagram*/
            .redes a:nth-child(1):hover {
            background-color: #d62976;
            }
            /* linkedin*/
            .redes a:nth-child(2):hover {
            background-color: #0072b1;
            }
            /* whatsapp*/
            .redes a:nth-child(3):hover {
            background-color: #25d366;
            }
    
            .redes a:active {
            transform: scale(1.1);
            transition-duration: 0.3s;
            }
    
            /*first-child*/
            .redes a svg:first-child {
            display: flex;
            scale: 1.3;
            position: absolute;
            width: 17px;
            opacity: 1;
            transform: translateY(0px);
            transition: all 0.4s cubic-bezier(0.15, 0.83, 0.66, 1);
            }
    
            .redes a svg:first-child path {
            fill: rgb(255, 255, 255);
            }
    
            .redes a:hover svg:first-child {
            transform: translateY(-40px);
            opacity: 0;
            }
            /*last-child*/
            .redes a svg:last-child {
            display: flex;
            position: absolute;
            width: 17px;
            transform: translateY(20px);
            opacity: 0;
            transition: all 0.4s cubic-bezier(0.15, 0.83, 0.66, 1);
            }
            .redes a svg:last-child path {
            fill: rgb(255, 255, 255);
            }
    
            .redes a:hover svg:last-child {
            opacity: 1;
            transform: translateY(0px);
            }

            



/* Plano bronze */

p {
    margin-bottom: 1.5em;
    /* Ajuste o valor conforme necessário */
    line-height: 1.6;
    /* Ajusta o espaçamento entre linhas */
}