body {
    background-color: #f0f0f5;
}

#carousel {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    object-fit: cover;
}

#carouselImg {
    width: 700px;
    height: 500px;
    /* object-fit: cover; */
}

@media screen and (min-width: 724px) {
    #carousel {
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 1140px;
        height: 500px;
    }

    #carouselImg {
        width: 700px;
        height: 500px;
    }

    #cardsContents {
    display: block;
    padding: 0;
    object-fit: cover;
    margin-left: auto;
    margin-right: auto;
    background-color: #F0F0F5;
    /* background-color: black; */
    border: none;
    border-radius: 12px;
    overflow-y: auto;
    max-width: max-content!important;
    /* height: 400px; */
    /* barra de rolagem vertical se necessário */
}
#cards {
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 50px;
    width: 90%;
    /* height: 500px; */

    /* background-color: gray */
}

#comprarButton {
    position: left;
    left: 17%;
    bottom: 25px;
    margin-top:50px;
}

#blackground {
    display: inline-block;
    position: absolute;
    background-color: rgb(255, 255, 255);
    border: 30px solid;
    width: 50px;
    height: 34px;
    border: none;
    right: 52px;
    bottom: 11px;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 5px;
    color: white;
}
}


#cards {
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 50px;
    width: 90%;
    /* height: 500px; */

    /* background-color: gray */
}

#comprarButton {
    position: left;
    left: 17%;
    bottom: 25px;
    margin-top:50px;
}

#blackground {
    display: inline-block;
    position: absolute;
    background-color: rgb(255, 255, 255);
    border: 30px solid;
    width: 50px;
    height: 34px;
    border: none;
    right: 52px;
    bottom: 11px;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 5px;
    color: white;
}

#carrinhoQuantidade {
    display: inline-block;
    position: absolute;
    /* background-color: rgb(236, 236, 236); */
    border-radius: 10px;
    top: 2px;
    left: 5px;
    width: 40px;
    height: 30px;

}

#carrinhoQuantidade input {
    position: absolute;
    top: 0px;
    left: -3px;
    height: 30px;
    border: none;
    border-radius: 10px;
    background-color: rgb(236, 236, 236);
}

#carrinhoButton {
    display: inline-block;
    position: absolute;
    background-color: rgb(36, 36, 36);
    width: 51px;
    height: 34px;
    border: none;
    right: 1px;
    bottom: 11px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    color: white;
}

#comprarButton p {
    margin-left: 16%;
    margin-top: 2%;
    font-size: 14px;
}

#cardImages {
    width: 100%;
    height: 300px;
    border: none;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    transition-property: all;
    transition-duration: 5s;
    transition-delay: 2s;
    object-fit: cover;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

/* .cardImages1:hover {
    animation: fadeIn 420ms; 
    content: url("https://images.pexels.com/photos/674010/pexels-photo-674010.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500");
} */

#card-body {
    top: 20px;
}

#cardsContents {
    display: block;
    padding: 0;
    object-fit: cover;
    margin-left: auto;
    margin-right: auto;
    background-color: #F0F0F5;
    /* background-color: black; */
    border: none;
    border-radius: 12px;
    overflow-y: auto;
    max-width: max-content!important;
    width:200px
    /* barra de rolagem vertical se necessário */
}

#titleCard {
    margin-top: -5px;
    font-size: 18px;
    font-style: normal;
    text-align: center;
    margin-right: 30px;
}

#preco {
    position: absolute;
    font-weight: bold;
    font-size: 18px;
    font-style: normal;
    text-align: Left;
    bottom: 0px;
    /* left: 10px; */
    left: 1px;
    margin-bottom: 16.5px;
}

#descricao {
    font-size: 12px !important;
    /* Mantive o menor, remova conforme sua necessidade */
    font-weight: bolder !important;
    line-height: 15px !important;
    text-align: center !important;
    font-family: 'Lexend Deca' !important;
    font-style: normal !important;
    overflow-y: auto !important;
    word-wrap: break-word !important;
    /* Isso garante que o texto quebre */
    /* margin-bottom: 30px !important;
    margin-right: 30px !important; */
    max-height: 50px !important;
    white-space: pre-line !important;
    /* Isso pode ajudar a respeitar as quebras de linha no seu conteúdo */
    max-width: max-content;
}

/* Estilos existentes... */

/* Media Query para smartphones */
@media (max-width: 768px) {


    #cardsContents {
        display: block;
        padding: 0;
        object-fit: cover;
        margin-left: auto;
        margin-right: auto;
        background-color: #fefefe;
        border: none;
        border-radius: 12px;
        width: 250px;
        /* height: 370px; */
        overflow-y: auto;
        max-width: max-content;
        /* barra de rolagem vertical se necessário */
        /* text-align: center; */
    }

    #cartNumberss {
        background-color: black;
        color: #FEFEFE;
        border-radius: 50%;
        font-size: 16px;
        position: absolute;
        z-index: 1;
        left: -15px;
        top: -7px;
        font-size: larger;
        width: 30px;
        height: 30px;
        text-align: center;
    }

    #mainNavbar {
        width: 100%;
        overflow-x: hidden;

    }    
}

#bagIcon {
    position: relative;
    left: 5px;
    z-index: 4;
    margin-right: 10px;
    margin-top: 5%;
    color: rgb(185, 185, 185)
}

#carrinhoQuantidadeNumber {
    position: absolute;
    border: 3px solid rgb(255, 255, 255);
    /* left: 32px; */
}

#carrinhoQuantidadeNumber[type=number] {
    background-color: white;
}

#carrinhoQuantidadeNumberUp {
    position: absolute;
    border: none;
    left: 24px;
    top: -6px;
    background: none;
}

#carrinhoQuantidadeNumberUp:hover {
    position: absolute;
    border: none;
    left: 24px;
    top: -8px;
    background: none;
}

#carrinhoQuantidadeNumberUp i {
    position: absolute;
    z-index: 30;
    left: 0px;
    top: 0px;
    background: none;
}

#carrinhoQuantidadeNumberDown {
    position: absolute;
    border: none;
    left: 24px;
    top: 4px;
    background: none;
}

#carrinhoQuantidadeNumberDown:hover {
    position: absolute;
    border: none;
    left: 24px;
    top: 3px;
    background: none;
}

#carrinhoQuantidadeNumberDown i {
    position: absolute;
    z-index: 30;
    left: 0px;
    top: 0px;
    background: none;
}

#carrinhoQuantidadeNumber::-webkit-outer-spin-button,
#carrinhoQuantidadeNumber::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

#carrinhoQuantidadeNumber[type=number] {
    -moz-appearance: textfield;
}

#carrinhoQuantidadeNumber:focus, #carrinhoQuantidadeNumber:focus {
    outline: none;
}

.container1 {
    display: flex;
    justify-content: center;
    align-items: center;
}

.imagem-redonda {
    text-align: center;
    margin: 10px;
    margin: 50px;
    /* Adiciona um espaçamento de 35px ao redor dos elementos */
    display: inline-block;
    /* Isso evita que o espaçamento afete a disposição flex */
}

.imagem-redonda img {
    max-width: 100%;
    height: auto;
    border-radius: 50%;
    width: 150px;
    /* Defina o tamanho desejado para a imagem */
    height: 150px;
    /* Defina o tamanho desejado para a imagem */
}

.imagem-redonda a {
    text-decoration: none;
    font-size: 25px;
    font-weight: lighter;
    color: black;
}

.imagem-redonda p {
    margin-top: 10px;
}

.imagem-redonda a:hover p {
    color: black;
    /* Ou a cor desejada para o texto */
    color: #c1936b;
    font-weight: bolder;
    transition: color 0.5s ease-in-out;
    /* Transição de 2 segundos */
}

@media (max-width: 768px) {
    .container1 {
        flex-direction: column;
    }

    .imagem-redonda {
        margin: 10px 0;
    }
}