body {
    padding-top: 4.167vw;
    background-color: #f3f2f0;
    color: #333;
    margin: 0;
  




}


header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    align-items: center;
    padding: 0.742vw 2.604vw;
    background: white;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    z-index: 10;

}






/* tela header */

.pest {
    list-style: none;
    display: flex;
    gap: 2.004vw;
    margin-left: auto;
}




.dropdown-user {
    position: relative;
    display: inline-block;
    margin-left: 10px;
}

.dropbtn {
    background-color: rgba(116, 198, 157, 0.79);
    color: white;
    font-weight: bold;
    border: none;
    border-radius: 50%;
    width: 2.083vw;
    height: 2.083vw;
    cursor: pointer;
}

.dropdown-content-user {
    display: none;
    position: absolute;

    background-color: #2a2a2a;
    min-width: 160px;
    border-radius: 10px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
    z-index: 1;
    text-align: left;
    padding: 15px 15px;
}

.dropdown-content-user a {
    color: white;
    padding: 10px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-content-user a:hover {
    background-color: #3a3a3a;
}


/* tela header fim  */




.fundo {
    background-image: url('fung.png');
    background-size: cover;
    background-position: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    opacity: 0.07;

}

.conteudo {
    z-index: -1;
    padding: 20px;

}



.fundo_pro_sp {
    background-image: url('_pro_sp.png');
    background-size: cover;
    background-position: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    opacity: 0.12;
}

.conteudo_pro_sp {
    z-index: -1;
    padding: 20px;

    
}


.fundo_pro_usu {
    background-image: url('usu.png');
    background-size: cover;
    background-position: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    opacity: 0.12;
}

.conteudo_pro_ved {
    z-index: -1;
    padding: 20px;

}




.fundo_pro_ved {
    background-image: url('ved.png');
    background-size: cover;
    background-position: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    opacity: 0.12;
}

.conteudo_pro_ved {
    z-index: -1;
    padding: 20px;

}









.fundo_log {
    background-image: url('login.png');
    background-size: cover;
    background-position: center;
    position: fixed;

    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;

    opacity: 60%;

}

.conteudo_log {


    z-index: -1;
    padding: 20px;


}


.fundo_log_colb {

    background-image: url('colblogin.png');
    background-size: cover;
    background-position: center;
    position: fixed;

    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;

    opacity: 60%;

}





.logo {

    font-weight: bold;
    color: #74C69D;
    padding-inline: 2.604vw;

}

.great-vibes-regular {
    font-size: 2.083vw;
    font-family: "Great Vibes", cursive;
    font-weight: 400;
    font-style: normal;
    cursor: pointer;
    margin: auto;
}


nav ul {
    list-style: none;
    display: flex;
    gap: 2.604vw;
}

nav ul li a {
    text-decoration: none;
    color: #333;
    font-weight: 500;
}

nav a:hover {
    color: #74C69D;
}

.btn {
    text-decoration: none;
}


/* tela quase benefit4 */
/* tela quase benefit4 */
/* tela quase benefit4 */
/* tela quase benefit4 */




.benefit {
    text-align: center;
    max-width: 13.021vw;
    border: 1px solid #d3b185;

    border-radius: 0.625vw;

    padding: 1.042vw;


    box-shadow: 0 7px 6px rgba(0, 0, 0, 0.05);

}

.benefits {
    display: flex;
    justify-content: space-around;
    background-color: #fef6ed23;
    padding: 8.333vw 0.104vw 2.604vw;
    flex-wrap: wrap;
    gap: 1.042vw;
    max-width: 82.125vw;
    margin: auto;
}

.benefit {
    background-color: #f0ffff70;
    text-align: center;
    max-width: 9.896vw;
}

.iconbenefit {
    margin-bottom: 0.781vw;
}

.benefitsvg {
    width: 3.333vw;
    height: 3.333vw;
    stroke: #8c5319;
    stroke-width: 2;

}

.benefit h3 {
    color: #8c5319;
    font-size: 0.938vw;
    margin-bottom: 0.521vw;
}

.benefit p {
    color: #333;
    font-size: 0.729vw;
    line-height: 1.4;
}

/* tela quase benefit4 FIM*/
hr {
    border: none;
    height: 2px;
    background-color: #ccc;
    /* cinza claro */
    margin: 20px 0;
}



/* tela quase benefit4 entre*/
.delivery-section {
    max-width: 83.125vw;
    margin: auto;
    padding: 1.042vw;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    gap: 4.167vw;
}

.delyv {
    padding: 7.813vw 0.26vw;
}

.delivery-box {
    background-color: #ffffff93;
    border: 1px solid #d3b185;
    border-radius: 0.625vw;
    padding: 1.25vw;
    width: 100%;
    max-width: 37.458vw;
    box-shadow: 0 7px 6px rgba(0, 0, 0, 0.05);
    font-size: 1.302vw;
    text-align: justify;
    line-height: 1.6;
}

.delivery-box h2 {
    color: #8c5319;
    font-size: 1.042vw;
    margin: 0.833vw 0 0.625vw;
}

.delivery-box ul {
    list-style: none;
    padding: 0;
}

.delivery-box ul li::before {
    content: '✔';
    color: #74C69D;
    margin-right: 8px;
}

.delivery-icon {
    text-align: center;
    display: flex;

}

.iconbox {
    width: 4.896vw;
    height: auto;
    margin: auto;

}

.section-title {
    text-align: center;

    font-size: 3.167vw;
    margin: 2.083vw 0 8.333vw;
}

/* tela quase benefit4 entre FIM*/

/* tela quase carrrrlll*/

.carousel-container {
    position: relative;
    max-width: 78.125vw;
    margin: auto;
    overflow: hidden;
}

.carousel-track {
    display: flex;
    gap: 1.563vw;
    overflow-x: hidden;
    overflow-y: hidden;
    scroll-behavior: auto;
    padding: 1.563vw 0;
}

.product-card-rot {

    background: linear-gradient(to bottom, #ffffff, #f0f0f0);
    border-radius: 0.833vw;
    box-shadow: 0 4px 0.521vw rgba(0, 0, 0, 0.1);

    display: flex;

    transition: transform 0.3s ease;
}

.product-card-rot:hover {
    transform: scale(1.02);
}

.product-card-rot img {
    max-width: 80%;

    margin-bottom: 1.042vw;
}

.product-card-rot h3 {
    font-size: 1.042vw;
    color: #333;
    margin-bottom: 0.521vw;
}

.product-card-rot p {
    font-size: 0.729vw;
    color: #666;
    padding: 0 0.521vw;
}

.nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: #fff;
    border: none;
    font-size: 1.875vw;
    padding: 0.521vw 1.042vw;
    cursor: pointer;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    z-index: 4;
    transition: background 0.2s;
}

.nav-btn:hover {
    background-color: #e0e0e0;
}

.header-carrl {
    display: inline-flex;
}

#prev {
    left: -1.042vw;
}

#next {
    right: -1.042vw;
}

/* tela quase carrrrlll fim*/
/* tela quase ecolo soso*/

.containercolo {
    max-width: 88.125vw;
    margin: 9.125vw auto;
    text-align: center;
    padding: 0 1.042vw;
    font-size: 2vw;
}



.divider {
    color: #b8924d;
    font-size: 1.042vw;
    margin: 5px 0 1.563vw;
}

.contentcolo {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    text-align: left;
}

.box {
    max-width: 30.833vw;
    padding: 1.042vw;
    font-size: 1.3vw;
}

.box h3 {
    font-size: 2.25vw;
    color: #3d550c;

    display: flex;
    align-items: center;
}

.box h3 svg {
    width: 7.417vw;
    height: 7.417vw;
    margin-right: 0.521vw;
    fill: #74C69D;
}

.ulh {
    list-style: none;
    padding: 0;
}

.ulh li::before {
    content: '✔️';
    margin-right: 8px;
    color: #3d550c;
}


/* tela quase ecolo soso fim*/



.material-symbols-rounded {
    color: #74C69D;

    font-variation-settings:
        'FILL' 0,
        'wght' 100,
        'GRAD' -25,
        'opsz' 34
}

.material-symbols-outlined {
    color: #74C69D;
    font-variation-settings:
        'FILL' 0,
        'wght' 100,
        'GRAD' -25,
        'opsz' 34
}

.material-symbols-outlined:hover {
    color: #1B1B1B;

}

.material-symbols-rounded:hover {
    color: #1B1B1B;

}

.btn-ent {
    text-decoration: none;

}


.btn-ent-the {
    padding: 1px 2.083vw;
    margin-left: auto;
    display: flex;
    gap: 1.104vw;

}

.hero {
    text-align: center;
    padding: 1.042vw 0.521vw;
}

.hero h1 {
    font-size: 4.167vw;
    color: #333;
}

.hero p {
    font-size: 1.118vw;
}

.hero span {
    color: #74C69D;
}

.product {
    display: flex;
    justify-content: center;
    padding: 2.604vw 0.208vw;
}

.product img {
    width: 83.333vw;
}

footer {
    background-color: #62cbb6;
    padding: 2.083vw 1.042vw;
    font-family: Arial, sans-serif;
}



.container {
    display: flex;
    justify-content: space-between;
    max-width: 62.5vw;
    margin: auto;
    flex-wrap: wrap;
}

.footer-section {
    flex: 1;
    margin: 0.521vw;
    min-width: 13.021vw;
    font-size: 0.82vw;
}

.logo-fo {
    margin: auto;
}

.great-vibes-regular-logo {
    font-size: 2.083vw;
    font-family: "Great Vibes", cursive;
    font-weight: 400;
    font-style: normal;
    margin: auto;
}

.footer-section h3 {
    font-size: 0.938vw;
    font-weight: bold;
}

.footer-section ul {
    list-style: none;
    padding: 0;
}

.footer-section ul li {
    margin: 0.26vw 0;
}

.footer-section ul li a {
    text-decoration: none;
    color: #000;
}

.footer-section input {
    display: block;
    width: 18.75vw;
    padding: 0.521vw;
    margin: 0.521vw 0;
    border: 1px solid #ccc;
    border-radius: 0.26vw;
}

.footer-section button {
    width: 18.7vw;
    background-color: #161616;
    color: white;
    padding: 0.521vw;
    border: none;
    border-radius: 0.26vw;
    margin: 0.521vw 0;
    cursor: pointer;
}

.footer-bottom {
    padding-left: 18.229vw;
    align-items: center;
    display: flex;
    margin-top: 1.042vw;
    padding-top: 0.521vw;
    font-size: 0.729vw;
}

.footer-car {
    padding-left: 29.167vw;


}

.pixcar {
    width: 13.5vw;
}


i {
    padding-inline: 0.26vw;

}

/* tela quase doacao */
/* tela quase doacao */
/* tela quase doacao */
/* tela quase doacao */

.doacao-section {
    max-width: 88.542vw;
    margin: auto;
    padding: 2.604vw 1.042vw;
}

.doacao-container {
    text-align: justify;

}

.doacao-texto h1 {
    font-size: 6.712vw;
    color: #333;
    max-width: 88.708vw;
}

.doacao-negrito {
    font-weight: bold;
}

.doacao-verde {
    color: #74C69D;
    font-style: italic;

}

.doacao-t {
    color: #74C69D;
    font-style: italic;
    ;

}

.li {
    padding-top: 2.604vw;
}

.doacao-conteudo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2.083vw;
    margin-top: 1.563vw;
}

.doacao-imagem {
    width: 46.875vw;
    border-radius: 1.042vw;
}

.doacao-info {
    text-align: left;
    max-width: 32.458vw;
}

.doacao-info h2 {
    font-size: 2.604vw;
    font-weight: bold;
}

.doacao-info p {
    font-size: 1.302vw;
    color: #444;
    text-align: justify;
    line-height: 1.6;
}

.doacao-botao {
    display: inline-block;
    padding: 0.781vw 1.042vw;
    margin-top: 0.781vw;
    color: #74C69D;
    border: 1px solid #74C69D;
    text-decoration: none;
    font-weight: bold;
    font-size: 1.302vw;
    border-radius: 1.354vw;
    transition: 0.3s;
}

.doacao-botao:hover {
    background-color: #74C69D;
    color: white;
}


/* tela quase category */
/* tela quase category */
/* tela quase category */
/* tela quase category */

.category {
    display: flex;
    justify-content: space-between;
    padding: 2.083vw;
    border-radius: 0.521vw;
    max-width: 88.542vw;
    margin: 1.042vw auto;
    gap: 1.563vw;
}

.carousel-container-of {
    position: relative;
    width: 100%;
    overflow: hidden;
    max-width: 53.125vw;
    border-radius: 0.521vw;
    box-shadow: 0 4px 0.521vw rgba(0, 0, 0, 0.1);
    background-color: rgb(230, 243, 250);
}

.carousel-track-of {
    display: flex;
    transition: transform 0.5s ease;
    width: 100%;
}

.category-main {
    flex: 0 0 100%;
    display: flex;
    align-items: center;
    padding: 1.042vw;
    box-sizing: border-box;
}

.highlight {
    padding-top: 1.042vw;
    color: #e6b800;
    font-weight: bold;
    font-size: 1.563vw;
}

.category-h {
    font-size: 3.125vw;
    color: #333;
    max-width: 35.417vw;
}

.category-coHP {
    color: #020202;
    max-width: 35.417vw;
    padding-bottom: 2.417vw;
}

.category-btn {
    padding: 0.521vw 1.042vw;
    border: 2px solid rgb(221, 221, 221);
    background: none;
    cursor: pointer;
    font-size: 1em;
    border-radius: 10px;
}

.category-image img {
    max-width: 14.021vw;
    transform: rotate(-1deg);
}

.carousel-buttonof {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    padding: 0.521vw 1.042vw;
    font-size: 2vw;
    background-color: rgba(255, 255, 255, 0.8);
    border: none;
    cursor: pointer;
    z-index: 5;
    border-radius: 2.083vw;
}

.carousel-buttonof.leftf {
    left: 1vw;
}

.carousel-buttonof.rightf {
    right: 1vw;
}

.category-offers {
    display: flex;
    flex-direction: column;
    gap: 1.563vw;
    width: 100%;
}

.category-box1,
.category-box2 {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 2.042vw;
    border-radius: 0.521vw;
    text-align: left;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.category-box1 {
    background-color: rgb(238, 245, 229);
}

.category-box2 {
    background-color: rgb(249, 235, 231);
}

.category-h2 {
    font-size: 2vw;
    color: #333;
}

.category-coPP {
    color: #666;
    padding-bottom: 1vw;
}

.category-box .category-image {
    margin-left: 1.042vw;
}

.category-box .category-content {
    flex: 1;
}

.category-ent {
    padding: 1.042vw;
}

/* tela quase cep */
/* tela quase cep */
/* tela quase cep */
/* tela quase cep */


.cep-container {

    justify-content: center;
    align-items: center;
    background-color: #f9f9f9;
    margin: 0;
    text-align: center;
    padding: 15.625vw 1px;
}

.cep-title {
    font-size: 4.4vw;
    font-weight: bold;
    color: #74C69D;
}

.cep-subtitle {
    font-size: 1.1vw;
    font-weight: bold;
    color: #333;
    margin-bottom: 1.042vw;
}

.cep-input {
    width: 15.625vw;
    padding: 0.521vw;
    border: 2px solid #ccc;
    border-radius: 0.66vw;
    font-size: 1vw;
    display: block;
    margin: 0 auto 0.781vw;
}

.cep-button {
    width: 16.667vw;
    padding: 0.521vw;
    background-color: #74C69D;
    border: none;
    border-radius: 0.66vw;
    font-size: 1vw;
    font-weight: bold;
    color: white;
    cursor: pointer;
}

.cep-button:hover {
    background-color: #74C69D;
}

.cep-link {
    display: block;
    margin-top: 0.521vw;
    font-size: 0.8vw;
    color: #666;
    text-decoration: none;
}

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


/* tela quase login */
/* tela quase login */
/* tela quase login */
/* tela quase login */







.login-box {

    width: 100%;
    margin: auto;
    max-width: 27.344vw;
    min-height: 38.896vw;
    position: relative;
    background: url(https://empreender.com.br/wp-content/uploads/2024/01/O-que-sao-produtos-sustentaveis-x-ideias-para-vender-online.jpg) no-repeat center;
    box-shadow: 0 12px 15px 0 rgba(0, 0, 0, .24), 0 17px 50px 0 rgba(0, 0, 0, .19);
    border-radius: 1.042vw;
}

.login-snip {
    width: 100%;
    height: 100%;
    position: absolute;
    padding: 3.906vw 3.646vw 2.604vw 3.646vw;
    background: rgba(0, 77, 77, .9);
    border-radius: 1.042vw;
}

.login-snip .login,
.login-snip .sign-up-form {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    position: absolute;
    transform: rotateY(180deg);
    backface-visibility: hidden;
    transition: all .4s linear;
}

.login-snip .sign-in,
.login-snip .sign-up,
.login-space .group .check {
    display: none;
}

.login-snip .tab,
.login-space .group .label,
.login-space .group .button {
    text-transform: uppercase;
}

.login-snip .tab {
    font-size: 1.146vw;
    margin-right: 0.781vw;
    padding-bottom: 0.26vw;
    margin: 0 0.781vw 0.521vw 0;
    display: inline-block;
    border-bottom: 2px solid transparent;
}

.login-snip .sign-in:checked+.tab,
.login-snip .sign-up:checked+.tab {
    color: #fff;
    border-color: #1161ee;
}

.login-space {
    min-height: 17.969vw;
    position: relative;
    perspective: 52.083vw;
    transform-style: preserve-3d;
}

.login-space .group {
    margin-bottom: 0.781vw;
}

.login-space .group .label,
.login-space .group .input,
.login-space .group .button {
    width: 100%;
    color: #fff;
    display: block;
}

.login-space .group .input,
.login-space .group .button {
    border: none;
    padding: 0.781vw 1.042vw;
    border-radius: 1.302vw;
    background: rgba(255, 255, 255, .1);
}

.login-space .group input[data-type="password"] {
    text-security: circle;
    -webkit-text-security: circle;
}

.login-space .group .label {
    color: #aaa;
    font-size: 0.625vw;
}

.login-space .group .button {
    background: #1161ee;
}

.login-space .group label .icon {
    width: 0.781vw;
    height: 0.781vw;
    border-radius: 2px;
    position: relative;
    display: inline-block;
    background: rgba(255, 255, 255, .1);
}

.login-space .group label .icon:before,
.login-space .group label .icon:after {
    content: '';
    width: 0.521vw;
    height: 2px;
    background: #fff;
    position: absolute;
    transition: all .2s ease-in-out 0s;
}

.login-space .group label .icon:before {
    left: 3px;
    width: 0.26vw;
    bottom: 0.313vw;
    transform: scale(0) rotate(0);
}

.login-space .group label .icon:after {
    top: 0.313vw;
    right: 0;
    transform: scale(0) rotate(0);
}

.login-space .group .check:checked+label {
    color: #fff;
}

.login-space .group .check:checked+label .icon {
    background: #1161ee;
}

.login-space .group .check:checked+label .icon:before {
    transform: scale(1) rotate(45deg);
}

.login-space .group .check:checked+label .icon:after {
    transform: scale(1) rotate(-45deg);
}

.login-snip .sign-in:checked+.tab+.sign-up+.tab+.login-space .login {
    transform: rotate(0);
}

.login-snip .sign-up:checked+.tab+.login-space .sign-up-form {
    transform: rotate(0);
}

*,
:after,
:before {
    box-sizing: border-box
}

.clearfix:after,
.clearfix:before {
    content: '';
    display: table
}

.clearfix:after {
    clear: both;
    display: block
}

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


.hr {
    height: 2px;
    margin: 3.125vw 0 2.604vw 0;
    background: rgba(255, 255, 255, .2);
}

.foot {
    text-align: center;
}

.footup {
    text-align: center;
    color: #1ab94a;
}

.card {
    width: 26.042vw;
}

::placeholder {
    color: #b3b3b3;
}

.button {
    transition: all 0.2s ease;
    cursor: pointer;
}

.button:active {
    transform: scale(0.95);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3) inset;
}

.row {
    display: flex;
    justify-content: right;
    align-items: center;


    margin: 0.521vw 8.854vw 5.208vw 2.656vw;

}

.card {
    position: relative;
    width: 26.042vw;
}

.input {

    height: 2.3vw;
}














/* tela quase oferta*/
/* tela quase oferta*/
/* tela quase oferta*/
/* tela quase oferta*/

/* Estilo das ofertas */
.oferta {
    background-color: #fff;
    border-radius: 1rem;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    margin: 2rem auto;
    padding: 1.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    max-width: 1000px;
    align-items: center;
}

.oferta-imagem {
    flex: 1 1 250px;
}

.oferta-img {
    max-width: 10vw;
    width: 100%;
    border-radius: 1rem;
    object-fit: cover;
}

.oferta-info {
    flex: 2 1 300px;
}

.oferta-tags {
    margin-bottom: 0.5rem;
}

.tag {
    display: inline-block;
    background-color: #2ECC71;
    color: #fff;
    padding: 0.3rem 0.7rem;
    border-radius: 20px;
    font-size: 0.75rem;
    margin-right: 0.5rem;
    font-weight: bold;
}

.oferta-titulo {
    font-size: 1.5rem;
    color: #2ECC71;
    margin-bottom: 0.5rem;
}

.oferta-desc {
    font-size: 1rem;
    color: #555;
    line-height: 1.4;
}

.oferta-preco {
    flex: 1 1 250px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
}

.preco-promocao .badge {
    background-color: #ABEBC6;
    color: #145A32;
    padding: 0.2rem 0.6rem;
    border-radius: 5px;
    font-size: 0.8rem;
    font-weight: bold;
}

.valores {
    display: flex;
    flex-direction: column;
}

.preco-atual {
    font-size: 1.5rem;
    font-weight: bold;
    color: #2ECC71;
}

.por-refeicao {
    font-size: 0.9rem;
    color: #888;
}

.preco-original del {
    color: #aaa;
}

.preco-regular {
    color: #333;
    font-size: 1rem;
    font-weight: bold;
}

.btn-adicionar {
    background-color: #2ECC71;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 0.7rem 1.2rem;
    font-size: 1rem;
    cursor: pointer;
    transition: 0.3s;
    margin-top: 1rem;
}

.btn-adicionar:hover {
    background-color: #27AE60;
}

.oferta.call {


    padding: 1vw;

    border: 2px solid #2ecc71;
    border-radius: 1vw;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    text-align: left;
    display: flex;

    gap: 0.5rem;
}



/* tela quase contado */
/* tela quase contado */
/* tela quase contado */
/* tela quase contado */
.containercall {
    margin: auto;
    max-width: 36.458vw;
    width: 100%;
    text-align: center;
}

.callh1 {
    font-family: "Great Vibes", cursive;
    font-weight: 400;
    font-size: 3.75vw;


}

.decor.call {
    color: #C9A54A;
    font-size: 1.25vw;
    margin-bottom: 1.042vw;
}


.descricaocall {
    font-size: 1.118vw;
    margin-bottom: 1.563vw;
    line-height: 1.6;
}


.callform {
    display: flex;
    flex-direction: column;
    gap: 0.729vw;
    text-align: left;
}


.calllabel {
    font-weight: bold;
    font-size: 0.729vw;
}


.callinput,
.callselect,
.calltextarea {
    padding: 0.521vw;
    border: 1px solid #ccc;
    border-radius: 4px;

    font-size: 0.729vw;
}


.callbutton {
    background-color: #4B5E0D;
    color: white;
    border: none;
    padding: 0.833vw;
    font-size: 0.833vw;
    font-weight: bold;
    cursor: pointer;
    border-radius: 4px;
    margin-top: 0.521vw;
}

.callbutton:hover {
    background-color: #3d4d0b;
}


.spam-alertcall {
    font-size: 13px;
    color: #666;
    margin-top: 1.042vw;
}


/* tela quase produtos */
/* tela quase produtos */
/* tela quase produtos */
/* tela quase produtos */
/* tela quase produtos */

.barpes {

    top: 4.73vw;
    overflow: hidden;
    padding: 5px;
    z-index: 7;
    transition: transform 0.3s ease;



}



.barpes.hide {
    transform: translateY(-100%);
}



.barpesin {

    padding: 3px;



    background-color: #f5f5f5;
    max-width: 94.037vw;
    margin-left: auto;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;

    margin-right: 3px;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
}



.t1-info-box {
    background-color: #f5f5f5;
    border: 1px solid #ccc;
    padding: 0.521vw;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    width: 11.458vw;
    font-size: 0.729vw;
    position: absolute;

    z-index: 5;
    top: 30%;

    left: auto;

}

.hidden {
    display: none;
}

.categories li ul {
    list-style: none;
    padding-left: 1.042vw;
    display: none;
    background-color: #fff;
    width: 100%;

    box-sizing: border-box;

    margin-top: 5px;

}

.categories li.open>ul {
    display: block;
}





.container_pro {
    display: flex;
    align-items: flex-start;

    max-width: 93.75vw;
    margin: 0 auto;
    padding: 0.02vw 1vw;

}




.sidebar {
    position: sticky;
    top: 1.042vw;

    align-self: flex-start;

    width: 15.625vw;
    background-color: #f5f5f5;
    padding: 1.042vw 3.125vw;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
    z-index: 7;
}




.breadcrumbs {
    font-size: 0.729vw;
    color: #444;
    margin-bottom: 10px;
}

.filter-tag {
    display: flex;
    justify-content: space-between;
    margin-bottom: 1.042vw;
}

.active-filter {
    background-color: #dff000;
    padding: 4px 8px;
    border-radius: 4px;
    font-weight: bold;
}

.clear-filter {
    color: #333;
    text-decoration: underline;
    cursor: pointer;
}

.filter-section {
    margin-bottom: 1.042vw;
}

.filter-section h4 {
    margin-bottom: 8px;
    font-size: 0.833vw;
}

.slider {
    width: 100%;
}

.price-range {
    font-size: 0.729vw;
    color: #666;
}

.categories {
    list-style: none;
    padding: 0;
    width: 13.021vw;
    font-family: Arial, sans-serif;
}

.categories li {
    max-width: 11.458vw;
    padding: 0.521vw;
    cursor: pointer;
    background-color: #f5f5f5;
    border-bottom: 1px solid #ddd;
    position: relative;
    transition: background-color 0.2s ease;
}

.categories li:hover {
    background-color: #e5e5e5;
}

.categories li ul {
    list-style: none;
    padding-left: 1.042vw;
    display: none;
    background-color: #ffffff;
}

.categories li.open>ul {
    display: block;
}

.categories li.selected {
    background-color: #d0ffd0;
    font-weight: bold;
}

.arrow {
    margin-right: 5px;
    font-size: 0.625vw;
}


.products {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 1.042vw;
    padding-left: 5.208vw;
    margin-top: 3vw;
}


.product-card:hover {
    transform: scale(1.01);
}

.product-card {
    transition: transform 0.2s ease;
    background-color: rgba(255, 255, 255, 0.411);
    border-radius: 8px;
    padding: 0.781vw;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    width: 13.542vw;
    height: 19.354vw;
    display: flex;
    flex-direction: column;
    align-items: center;


}

.booba {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.781vw;
    margin-top: auto;



}

.maxim {
    max-width: 11.9vw;
    max-height: 7.813vw;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.maxim img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    margin-bottom: 0.521vw;
    cursor: pointer;

    border: 1px solid transparent;
    border-image: linear-gradient(45deg, #74C69D 25%, transparent 50%, #74C69D 75%) 1;
}

.product-card h3 {
    font-size: 0.781vw;
    text-align: start;
    margin-bottom: 0.417vw;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 11.458vw;
}

.price {
    font-weight: bold;
    margin-bottom: 0.521vw;
    padding: 1px 0.521vw;
}

.quantity-control {
    display: flex;
    align-items: center;
    gap: 0.521vw;
    margin-bottom: 0.521vw;
}

.quantity-control button {
    padding: 0.26vw 0.521vw;
}

.add-btn,
.subscribe-btn {
    width: 12vw;
    padding: 0.417vw;
    margin-top: 5px;
    border: 1px solid #6f9445;
    border-radius: 4px;
    background-color: white;
    cursor: pointer;
    transition: transform 0.3s ease, background-color 0.3s ease;
}

.add-btn:hover {
    background-color: #45945956;
    transform: scale(1.03);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.subscribe-btn:hover {
    background-color: #ffee585b;
    transform: scale(1.03);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}




.t1-ponti {
    margin-left: auto;
    font-size: 1.51vw;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0);
    transition: transform 0.3s ease, background-color 0.3s ease;
}

.t1-ponti:hover {
    transform: scale(1.07);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);

}

.t1-info-wrapper {
    position: relative;
    display: inline-block;

    margin-left: auto;
}

.t1-info-box {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease;


}

.t1-info-wrapper:hover .t1-info-box {
    opacity: 1;
    visibility: visible;
}

.t1-info-box p {
    text-align: start;
    margin-bottom: 0.417vw;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    /* limita */
    overflow: hidden;
    text-overflow: ellipsis;
}






/* tela quase sobre */
/* tela quase sobre */
/* tela quase sobre */
/* tela quase sobre */
/* tela quase sobre */
/* tela quase sobre */


.sobre {
    background: #f5f5f515;
    padding: 4.167vw 1.042vw;
    font-family: 'Poppins', sans-serif;
    color: #333;
}

.sobre .container_sobre {
    max-width: 62.5vw;
    margin: 0 auto;
}

.sobre .titulosobre {
    text-align: center;
    font-size: 2.5vw;
    margin-bottom: 2.604vw;
}

.sobre .titulosobre span {
    color: #3cb371;
}

.secaocard {
    background: #fff;
    border-radius: 1.042vw;
    padding: 1.563vw;
    box-shadow: 0 0.521vw 1.563vw rgba(0, 0, 0, 0.08);
    margin-bottom: 2.083vw;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.secaocard:hover {
    transform: translateY(-10px);
    box-shadow: 0 0.781vw 2.083vw rgba(0, 0, 0, 0.12);
}

.introducaosobre blockquote {
    font-style: italic;
    font-size: 1.042vw;
    color: #666;
    border-left: 5px solid #3cb371;
    padding-left: 0.781vw;
    margin-bottom: 1.042vw;
}

.introducaosobre p {
    font-size: 0.938vw;
    line-height: 1.7;
    margin-top: 2.604vw;
    margin-bottom: 5.208vw;
}

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15.625vw, 1fr));
    gap: 1.563vw;
}

.secaocard h2 {
    font-size: 1.458vw;
    color: #3cb371;
    margin-bottom: 0.521vw;
}

.secaocard p {
    font-size: 0.885vw;
    line-height: 1.6;
    color: #444;
}

.cta {
    text-align: center;
    margin-top: 2.604vw;
}

.botao {
    background: #3cb371;
    color: white;
    padding: 0.833vw 2.604vw;
    border-radius: 2.604vw;
    text-decoration: none;
    font-size: 1.042vw;
    font-weight: bold;
    transition: background 0.3s, transform 0.3s;
}

.botao:hover {
    background: #2e8b57;
    transform: scale(1.05);
}








/* tela quase perfil colo */
/* tela quase perfil colo */
/* tela quase perfil colo */
/* tela quase perfil colo */
/* tela quase perfil colo */


.cop {
    max-width: 72.917vw;
    font-family: Arial, sans-serif;
    background: #f5f5f5;
    padding-top: 0.521vw;
    margin: auto;
}

.perfil-header {
    background: #000;
    color: white;
    padding-bottom: 2.604vw;
    position: relative;
}

.perfil-header2 {
    background: #000;
    color: white;
    margin-top: 2.604vw;
    padding-bottom: 2.604vw;
    position: relative;
    border-top-right-radius: 1.042vw;
    border-top-left-radius: 1.042vw;
}



.perfil-info {
    display: flex;
    align-items: center;
    padding: 0 1.042vw;
    position: relative;
    top: 0.825vw;
}

.logo_loj {
    width: 4.167vw;
    height: 4.167vw;
    border-radius: 0.521vw;
    border: 3px solid white;
    margin-right: 0.781vw;
}

.dados {
    flex-grow: 1;
}

.dadosh1 {
    margin: 0;
    font-size: 1.146vw;
}

.dadosp {
    margin: 5px 0;
}

.seguir-btn {


    border: none;
    padding: 0.521vw 0.781vw;
    border-radius: 1.563vw;
    cursor: pointer;
    font-weight: bold;
}

.detalhes-loja {
    background: white;
    padding: 1.042vw;
    border-bottom: 1px solid #ddd;
}

.detalhes-loja p {
    margin: 8px 0;
}

.abas {
    display: flex;
    border-bottom: 1px solid #ccc;
    background: white;
}

.abasbutt {
    flex: 1;
    padding: 0.781vw;
    border: none;
    background: white;
    font-weight: bold;
    cursor: pointer;
}

.abasbutt:hover {
    background: #eee;
}

.conteudo {
    padding: 1.042vw;
}

.tab {
    display: none;
}

.tab.active {
    display: block;
}

.post,
.destaque,
.avaliacao,
.promocao {
    background: white;
    margin-bottom: 0.781vw;
    padding: 0.781vw;
    border-radius: 10px;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
}

.abasbutt {
    padding: 0.521vw 1.042vw;
    border: none;
    background-color: transparent;
    cursor: pointer;
    font-weight: bold;
    color: #333;
    transition: all 0.3s ease;
    border-bottom: 3px solid transparent;
}

.abasbutt.ativo {
    border-bottom: 3px solid #F20000;
    /* cor destaque */
    color: #F20000;
}

.conteudo-aba {
    display: none;
    opacity: 0;
    transform: translateY(0.521vw);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.conteudo-aba.ativo {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

.capa-loja {
    width: 100%;
    height: 20.833vw;
    overflow: hidden;
    position: relative;
    background-color: #f5f5f5;
}

.capa_img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 5px solid #000000;
}