:root{
    --logo-font :  "Jaro", sans-serif;
    --main-font :  "IBM Plex Sans Arabic", sans-serif;
    --width_card : 250px;
}
*{
    font-family: var(--main-font);
    list-style: none;
}
article{
    width: 100%;
    min-height: 100vh;
    background-image: url("bg.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    position: relative;
    z-index: 1;
}
article:before{
    content: '';
    width: 100% !important;
    height: 100% !important;
    background-color: #00000088;
    position: absolute;
    top: 0;
    left: 0;
}
article .container{
    position: relative;
}
section{
    width: 100%;
    position: relative;
}
.jumbtron{
    width: 60% !important;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50% , -50%);
}
@media (max-width:992px) {
    .jumbtron{
        width: 100% !important;
    }
}
.logo{
    i{
        font-size: 50px;
    }
}
@media (max-width: 992px) {
    :root{
        --width_card : 30%;
    }
}
@media (max-width: 820px) {
    :root{
        --width_card : 45%;
    }
}
@media (max-width: 660px) {
    :root{
        --width_card : 100%;
    }
}
.card_product .card{
    max-width: var(--width_card) !important;
}

.h{
    position: relative;
    &::before{
        content: "";
        width: 50%;
        height: 3px;
        background-color: rgb(25 135 84);
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
        -moz-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        -o-transform: translateX(-50%);
}
}