@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');
.hidden{
    opacity: 0;
    transition: all 1s;
    transform: translateX(-100%);
}
.tran{
    opacity: 1;
    transform: translateX(0);
}
:root{
    --main-brown:#582D12;
    --sec-brown:#24140a;
    --secound-color-yellow:gold;
    --main-white:#fdf9ea;
    --secound-white:#f8e9ce;
    --label:#a0a0a0;
}
html,body,ul,li,a{
    padding: 0;
    margin: 0;
    text-decoration: none;
    font-family: 'Roboto', sans-serif;
    color: var(--main-brown);
    list-style: none;
}
html{
    scroll-behavior: smooth;
}
body{
    background-color: var(--main-white);
}
.text-product, .text-product-2{
    margin-left: 50px;
    font-weight: 600;
}
.card, .card-testimonial, .card-product{
    box-shadow: rgba(0, 0, 0, 0.08) 0px 4px 12px;
}
.main-container{
    width: 95%;
    margin: auto;
}
.card-sub{
    box-shadow: rgba(0, 0, 0, 0.08) 0px 4px 12px;
}
@media screen and (max-width:476px){
    .text-product, .text-product-2{
        font-size: 13px;
    }
    .row>* {
        width: 50%;
        max-width: 50%;
    }
}