/*===================== SECTION FIRST OF WEBSITE ===========================*/

.section-banner {
    width: 100%;
    height: 40vw;
    position: relative;
}

.section-banner figure.img-style {
    width: 100%;
    height: 40vw;
    position: absolute;
}
.section-banner figure.img-style::after {
    content: "";
    position: absolute;
    display: flex;
    width: 100%;
    height: 100%;
    background: linear-gradient(119deg, rgb(137 0 0 / 35%) 0%, rgb(0 0 0 / 51%) 30.61%, rgb(63 17 17 / 78%) 101.98%);
    top: 0;
    left: 0;
    right: 0;
}
.section-banner figure.img-style img {
    width: 100%;
    height: 100%;
    display: block;
}

.section-banner .details-banner {
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    z-index: 3;
    align-items: center;
    height: 100%;
    padding: 0vw 13vw;
    gap: 3vw;
    color: white;
}

.section-banner .details-banner .list-action {
    display: flex;
    gap: 2vw;
    z-index: 3;
    width: fit-content;
    justify-content: center;
    align-items: center;
}
.section-banner .list-action a {
    background: var(--color-secundary);
    color: white;
    border-radius: 5px;
    transition: all .5s ease-in-out;
}
.section-banner .list-action a:hover {
    background: white;
    color: var(--color-secundary);
    transition: all .5s ease-in-out;
}

.section-banner .details-banner .list-action .icon {
    width: 4vw;
    height: 4vw;
    padding: 2vw;
    background: white;
    border-radius: 50%;
    border: 1px dashed var(--color-error-alt);
}
.section-banner .details-banner .list-action .icon i {
    animation: pulse 1.2s infinite;
    color: var(--color-secundary); 
    font-size: 1.5vw;
}

@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.1);
    opacity: 0.7;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/*===================== SECTION SECUND OF WEBSITE ===========================*/

.list-content-bottom {
    background: linear-gradient(98deg, #6c0202 0%, #660000 50%, rgb(176 2 3) 101.98%);
    color: white;
    padding-top: 2vw;
}

/*===================== SECTION SECUND OF WEBSITE ---- FIRST SECTION ===========================*/

.list-content-bottom .list-menu-principal .title {
    font-size: 3vw ;
    font-family: var(--font-name);
    color: white;
    padding-bottom: 3vw;
}
.list-content-bottom .list-menu-principal .list-menu {
    width: 70%;
}
.list-content-bottom .list-menu-principal .one-menu {
    justify-content: space-between;
    background: #5e0101ba;
    box-shadow: 0px 0px 3px #7a2e2e;
}
.list-content-bottom .list-menu-principal .one-menu.actif {
    background: white;
    color: var(--color-secundary);
}
.list-content-bottom .list-menu-principal .one-menu .left-content ,
.list-content-bottom .list-menu-principal .one-menu .right-content {
    width: 50%;
    height: auto;
    margin: 2vw 1.5vw;
}
.list-content-bottom .list-menu-principal .one-menu .right-content {
    margin: 0;
}
.list-content-bottom .list-menu-principal .one-menu .right-content .details {
    margin: 2vw 1.5vw;
    font-family: var(--font-name);

}
.list-content-bottom .list-menu-principal .one-menu .right-content .iconify {
    padding: 2vw 1.5vw;
    height: 4vw;
    width: 4vw;
}
.list-content-bottom .list-menu-principal .one-menu.actif .right-content .iconify {
    background: var(--color-primary);
    color: white;
    border-radius: 5px;
}

/*===================== SECTION SECUND OF WEBSITE ---- SECUND SECTION ===========================*/

.list-content-bottom .list-products {
    padding: 0vw 5.2083vw 2.1562vw;
}
.list-content-bottom .list-products .title {
    font-size: 3vw;
    font-family: var(--font-name);
    color: white;
    padding-bottom: 3vw;
}

.list-content-bottom .list-products .list-categories .category {
    background: white;
    padding: 1vw 2vw;
    border-radius: 5px;
    color: var(--color-error-alt);  
    box-shadow: 1px 3px 18px #793f3f;
    transition: all .5s ease-in-out;
}
.list-content-bottom .list-products .list-categories .category:hover ,
.list-content-bottom .list-products .list-categories .category.actif {
    background: var(--color-primary);
    color: white;
    transition: all .5s ease-in-out;
}

.list-content-bottom .list-products .all-products-foods .one-product {
    background: #5e0101ba;
    box-shadow: 0px 0px 3px #7a2e2e;
    padding: 2.5vw 2vw;
    border-radius: 8px;
    width: 23%;
    transition: all .5s ease-in-out;
    border: 1px solid transparent;
}
.list-content-bottom .list-products .all-products-foods .one-product:hover {
    border: 1px solid #7a2e2e;
    transition: all .5s ease-in-out;
    box-shadow: 0px 0px 3px #7a2e2e;
}

.list-content-bottom .list-products .all-products-foods .one-product .img-food {
    width: 14vw;
    height: 14vw;
    display: block;
    position: relative;
    border-radius: 50%;
    margin: 0 auto 2vw auto;
    border: 2px solid transparent;
    transition: all .5s ease-in-out;
}
.list-content-bottom .list-products .all-products-foods .one-product:hover .img-food {
    transition: all .5s ease-in-out;
    border: 2px solid white;
}
.list-content-bottom .list-products .all-products-foods .one-product .img-food img {
    border-radius: 50%;
}

.list-content-bottom .list-products .all-products-foods .one-product .bullet {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #ccc;
    cursor: pointer;
    transition: background 0.3s;
}

.list-content-bottom .list-products .all-products-foods .one-product .bullet.actif {
    /* background: #ff6600; */
    background: var(--color-primary);
}

.list-content-bottom .list-products .all-products-foods .one-product .icon-buy {
    background: var(--color-primary);
    color: white;
    padding: 1vw;
    border-radius: 25px 0 8px 0;
    transition: all .5s ease-in-out;
}
.list-content-bottom .list-products .all-products-foods .one-product:hover .icon-buy {
    background: white;
    color: var(--color-primary);
    transition: all .5s ease-in-out;
}

.list-content-bottom .list-products #loadMore {
    background: var(--color-secundary);
    color: white;
    border-radius: 5px;
    transition: all .5s ease-in-out;

}

@media (max-width:768px) {
    
    .section-banner {
        width: 100%;
        height: 80vh;
    }
    .section-banner figure.img-style {
        width: 100%;
        height: 80vh;
    }
    .section-banner .details-banner .list-action .icon {
        width: 13vw;
        height: 13vw;
    }
    .section-banner .details-banner .list-action .icon i {
        font-size: 4.5vw;
    }
    .list-content-bottom .list-menu-principal .title {
        font-size: 6vw;
        padding-bottom: 5vw;
        padding-top: 3vw;
    }
    .list-content-bottom .list-menu-principal .list-menu {
        width: 86%;
    }
    .list-content-bottom .list-menu-principal .one-menu .right-content {
        width: 18%;
    }
    .list-content-bottom .list-menu-principal .one-menu .left-content {
        width: 100%;
    }
    .list-content-bottom .list-menu-principal .one-menu {
        padding: 3vw 0;
    }

    .list-content-bottom .list-products .title {
        font-size: 8vw;
    }
    .list-content-bottom .list-products .list-categories .category {
        padding: 2vw 5vw;
    }
    .list-content-bottom .list-products .all-products-foods .one-product {
        width: 100%;
        padding: 4.5vw 4vw;
    }
    .list-content-bottom .list-products .all-products-foods .one-product .img-food {
        width: 70vw;
        height: 70vw;
    }
    .list-content-bottom .list-products .all-products-foods .one-product .icon-buy {
        border-radius: 52px 0 8px 0;
        padding: 5vw 3vw 4vw 6vw;
        font-size: 5.3vw;
    }

}