*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    outline: 0;
    max-width: 100vw;
}

html {
    scroll-behavior: smooth;
    
}

body {
    font-family: sans-serif;
	width: 100%;
	height: 100%;    
   
}

.scroll-menu{
    scroll-margin-top: 70px;
}

.logo-image {
    display: inline-block; /* Garante que o span tenha dimensões */
    width: 176px; /* Defina a largura da imagem */
    height: 35px; /* Defina a altura da imagem */
    background-image: url('../img/logo.png'); /* Substitua pelo caminho da sua imagem */
    background-size: contain; /* Ajusta a imagem para caber dentro do span */
    background-repeat: no-repeat; /* Evita que a imagem se repita */
}

.navbar {
    background-color: #77567a !important; /* Cor de fundo branca */
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1); /* Sombra sutil */
}

.navbar-nav .nav-link, .navbar-brand, .dropdown-item {
    color: #fff !important;
    font-size: 21px;
}

.navbar-dark .navbar-toggler-icon{
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%233a3a3a' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.navbar-nav {
    margin: 0 auto; /* Centraliza os itens horizontalmente */
    display: flex;
    justify-content: center;
    width: 100%;
    gap: 20px; /* Espaçamento entre os links */
}

/* Botão laranja de compra "Order"*/
.order-button{
    background-color: #e43f3f; /* Cor laranja */
    color: #fff; /* Texto branco */
    border: none; /* Remove a borda */
    padding: 10px 20px; /* Tamanho do botão */
    font-size: 20px;
    font-weight: bold;
    cursor: pointer; /* Cursor de pointer */
    border-radius: 5px; /* Bordas arredondadas */
}

.order-button:hover{
    color: #fff;
    background-color: #b31919; /* Cor de hover mais escura */
    transition: background-color 0.3s ease;
}

.img-produto {
    width: 551px;
    height: 476px;
    background-image: url('../img/produto.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.apresentacao {
    background: #fff;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 650px;
}

.apresentacao-textos {
    display: flex;
    flex-direction: column; /* Mantém os textos em coluna */
    padding-left: 60px;
    
}

.apresentacao-texto1{
    color: #000;
    margin: 0; /* Remove margens padrão */
    text-align: center; /* Alinha o texto à esquerda */
    font-size: 40px;
    font-weight: bold;   
    line-height: 1.1; /* Reduz espaço entre as linhas */
    margin-bottom: 5px;  
}

.apresentacao-texto2{
    color: #000;
    margin: 0; /* Remove margens padrão */
    text-align: center; 
    font-size: 20px;
    line-height: 1.1; /* Reduz espaço entre as linhas */
    
}

.sub-apresentacao {
    color: #fff;
    background: #77567a;
    text-align: center;
    justify-content: center;
    align-items: center;
    font-size: 40px;
    font-weight: bold;
}

.order {
    background: #eeeeee;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 20px;
    padding-bottom: 20px;
}

.sub-order {
    display: flex;
    justify-content: center; /* Centraliza horizontalmente */
    align-items: center; /* Centraliza verticalmente */
    flex-direction: row; /* Mantém imagem e texto lado a lado */
    color: #000;
    font-size: 40px;
    font-weight: bold;
}

.img-100-money-back {
    width: 274px;
    height: 237px;
    background-image: url('../img/img-100-money-back.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.sub-apresentacao-order {
    color: #fff;
    background: #77567a;
    text-align: center;
    justify-content: center;
    align-items: center;
    font-size: 40px;
    font-weight: bold;
}


.div-ingredientes {
    background: #fbe4fd;
    text-align: center;
    justify-content: center; /* Centraliza as imagens */
    display: flex;
    padding: 20px; /* Adiciona um espaço interno */
    
}

.div-img-texto {
    width: 1500px;
    background-color: #fff;
    display: flex;
    align-items: center; /* Alinha verticalmente ao centro */
    gap: 20px; /* Espaçamento entre imagem e texto */
}

.img-mimosa-pudica {
    width: 290px;
    min-width: 290px;
    height: 262px;
    background-image: url('../img/mimosa-pudica.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.img-bearberry {
    width: 290px;
    min-width: 290px;
    height: 262px;
    background-image: url('../img/bearberry.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.img-probiotic-blend {
    width: 290px;
    min-width: 290px;
    height: 262px;
    background-image: url('../img/probiotic-blend.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.img-granular-berberine {
    width: 290px;
    min-width: 290px;
    height: 262px;
    background-image: url('../img/granular-berberine.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.img-cranberry-extract {
    width: 290px;
    min-width: 290px;
    height: 262px;
    background-image: url('../img/cranberry-extract.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.titulo-texto-ingredientes{
    color: #43a649;
    font-size: 20px;
    font-weight: bold;
}

.texto-ingredients {
    font-size: 18px;
    padding: 20px;
    text-align: justify;
}

.ingredient-item { /* Novo elemento de agrupamento */
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 10px;
}

.ingredient-item p {
    color: #000;
    font-size: 30px;
    font-weight: bold;
    text-align: center;
    width: 264px;
    margin-top: 5px;
}

.ingredient-description {
    color: #797878; /* Cinza claro */
    font-size: 18px;
    font-style: italic;
    width: 264px;
    text-align: left;
}

.about {
    background: #fff;
    text-align: center;
}

.float-right {
    float: right;
}

/* Defina a animação de salto */
@keyframes salto {
    0% {
        transform: scale(1) translateZ(0); /* Posição inicial */
    }
    50% {
    transform: scale(1.2) translateZ(50px); /* Salto para frente da tela */
    }
    100% {
    transform: scale(1) translateZ(0); /* Volta à posição inicial */
    }
}
  
/* Estilo da div */
.div-order1 {
    width: 330px; /* Largura */
    height: 740px; /* Altura */
    background-color: #f9f9f9; /* Cor de fundo */
    border: 4px solid #ccc; /* Bordas cinzas */
    text-align: center;
    border-radius: 10px; /* Bordas arredondadas */
    cursor: pointer;
    transition: transform 0.3s ease; /* Transição suave */
    transform-origin: center center; /* Garantir que o efeito ocorra do centro */
    perspective: 500px; /* Adiciona uma perspectiva para o efeito 3D */
    padding-top: 15px;
}
  
/* Aplicando a animação de salto quando o mouse passar sobre a div */
.div-order1:hover {
    animation: salto 0.5s ease-in-out; /* Chama a animação salto para frente */
}

/* Estilo da div */
.div-order6 {
    width: 330px; /* Largura */
    height: 770px; /* Altura */
    background-color: #f9f7da; /* Cor de fundo */
    border: 4px solid #ccc; /* Bordas cinzas */
    text-align: center;
    border-radius: 10px; /* Bordas arredondadas */
    cursor: pointer;
    transition: transform 0.3s ease; /* Transição suave */
    transform-origin: center center; /* Garantir que o efeito ocorra do centro */
    perspective: 500px; /* Adiciona uma perspectiva para o efeito 3D */
    padding-top: 15px;
}
  
/* Aplicando a animação de salto quando o mouse passar sobre a div */
.div-order6:hover {
    animation: salto 0.5s ease-in-out; /* Chama a animação salto para frente */
}

.div-1bottles-packs{
    background-color: #dc8ab6;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
    
}

.div-6bottles-packs{
    background-color: #77567a;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
    
}

.lable-bottles-packs{
    color: #fff;
    font-size: 50px;
    font-weight: bold;
}

.lable-bottles-packs-sub{
    color: #77567a;
    font-size: 30px;
    font-weight: bold;
}

.img-produto-order-1{
    width: 214px;
    height: 242px;
    background-image: url('../img/produto_menor2.png');
    background-size: contain;
    background-repeat: no-repeat;
}

.img-produto-order-6{
    width: 340px;
    height: 257px;
    background-image: url('../img/produto_menor6.png');
    background-size: contain;
    background-repeat: no-repeat;
}

.img-produto-order-3{
    width: 305px;
    height: 262px;
    background-image: url('../img/produto_menor3.png');
    background-size: contain;
    background-repeat: no-repeat;
}

/* Valores dos dos buttles or packs */
.valor-produto1{
    color: #77567a;
    font-size: 80px;
    font-weight: bold;
}

.valor-produto6{
    color: #77567a;
    font-size: 80px;
    font-weight: bold;
    padding-top: 28px;
}

.valor-produto3{
    color: #77567a;
    font-size: 80px;
    font-weight: bold;
    padding-top: 20px;
}

.img-total-bottle{
    width: 222px;
    height: 28px;
    background-image: url('../img/total-bottle.png');
    background-size: contain;
    background-repeat: no-repeat;
}

.img-total-6bottle{
    width: 232px;
    height: 64px;
    background-image: url('../img/total-6bottle.png');
    background-size: contain;
    background-repeat: no-repeat;
}

.img-total-3bottle{
    width: 222px;
    height: 28px;
    background-image: url('../img/total-3bottle.png');
    background-size: contain;
    background-repeat: no-repeat;
}

.img-visa-master{
    width: 326px;
    height: 46px;
    background-image: url('../img/visa-master.png');
    background-size: contain;
    background-repeat: no-repeat;
}

/* Botão amarelo de compra "Buy Now"*/
.buy-now{
    color: #000;
    font-size: 30px;
    font-weight: bold;
}

.buy-now:hover{
    color: #000;
    font-size: 30px;
    font-weight: bold;
}

.about-container {
    text-align: center;
    margin: 0 auto;
    padding: 20px;
    
}

.about0 {
    text-align: justify;
}

.about4{
    color: #000;
    font-size: 20px;
}

/* desktop */
@media (min-width: 1199px) 
{
    
}

@media (min-width: 768px) and (max-width: 1199px) {
    
    .apresentacao {
        flex-direction: column;
        padding: 20px 10px;
        height: 800px;
    }

    .img-produto {
        width: 100%;
        height: 300px;
    }

    .apresentacao-textos {
        padding-left: 20px;
        padding-top: 20px;
        text-align: center;
    }

    .apresentacao-texto1 {
        font-size: 28px;
    }

    .apresentacao-texto2 {
        font-size: 16px;
    }
    .apresentacao-texto1{
        font-size: 40px;
    }

    .div-img-texto {
        flex-direction: column; /* Coloca a imagem em cima e o texto embaixo */
        text-align: center;
    }

    .texto-ingredients {
        padding: 10px;
    }

    .order .row {
        flex-direction: column;
        align-items: center;
    }

    
    .about0{
        padding: 10px;
    }
    
    .about4{
        font-size: 16px;
    }
    
}

@media (max-width: 767px) {
    .apresentacao {
        flex-direction: column;
        padding: 20px 10px;
        height: 800px;
    }

    .img-produto {
        width: 100%;
        height: 300px;
    }

    .apresentacao-textos {
        padding-left: 20px;
        padding-top: 20px;
        text-align: center;
    }

    .apresentacao-texto1 {
        font-size: 28px;
    }

    .apresentacao-texto2 {
        font-size: 16px;
    }
    .apresentacao-texto1{
        font-size: 40px;
    }

    .div-img-texto {
        flex-direction: column; /* Coloca a imagem em cima e o texto embaixo */
        text-align: center;
    }

    .texto-ingredients {
        padding: 10px;
    }

    .order .row {
        flex-direction: column;
        align-items: center;
    }

    .div-order1,
    .div-order6 {
        width: 100% !important;
        max-width: 330px;
        margin: 0 auto 20px;
    }
    
    .about0{
        padding: 10px;
    }
    
    .about4{
        font-size: 16px;
    }
    
}