.h-banner {
    display: flex;
    align-items: center;
    overflow: hidden;
    background: var(--app-color-primary);
    color: white;
}

.h-banner-scroll {
    animation: RightToLeft 45s infinite linear;
}

.h-banner-message {
    white-space: nowrap;
    margin: 0 1em;
}

.h-banner .icon-alert {
    background: var(--app-color-primary);
    padding: 16px;
    position: absolute;
    font-size: 18px;
    display: none;
    z-index: 1;
    box-shadow: 0px -2px 4px #232625;
}

@keyframes RightToLeft {
    from {
        transform: translateX(3%);
    }

    to {
        transform: translateX(-100%);
    }
}

.section-banner img {
    min-height: 260px;
    border-radius: 15px;
    object-fit: fill;
    width: 100%;
    border: none;
}

.product-bloc.w-20 {
    width: 16.66%;
}

/* Famous category */
.famous-catory-img-bloc {
    position: relative;
    align-self: center;
}

.famous-catory-img-bloc img {
    box-shadow: 0 0 0 1px #E8E9EB;
    border-radius: 50%;
    padding: 5px;
    width: 100px;
    height: auto;
}

.famous-category-bloc .title {
    font-size: 14px;
    line-height: 16px;
    font-weight: unset;
    font-variation-settings: "wght" 336, "opsz" 8;
    text-align: center;
    margin: 0 auto;
    overflow: hidden;
    padding-top: 4px;
    max-width: 104px;
}

.famous-category-bloc .sub-title {
    font-size: 11px;
    line-height: 16px;
    font-weight: unset;
    font-variation-settings: "wght" 336, "opsz" 8;
    -webkit-box-align: center;
    align-items: center;
    display: flex;
    min-width: 0px;
    -webkit-box-pack: center;
    justify-content: center;
    color: rgb(114, 118, 126);
}

/* Super category */
.super-category-block {
    border-radius: 12px;
    display: flex;
    overflow: hidden;
    min-height: 152px;
    text-decoration: none;
    background-color: rgb(234, 245, 235);
    background-image: url("https://d2guulkeunn7d8.cloudfront.net/assets/home/use_case_tiles/grocery-canada-1dd95cf140499958e2c4c7aee38e45e523b0b5a4be5354f9b7fbbb7628024ce2.png");
    background-position: 100% 100%;
    background-repeat: no-repeat;
    background-size: contain;
}

.super-category-block .title {
    font-size: 21px;
    line-height: 24px;
    font-weight: unset;
    font-variation-settings: "wght" 663, "opsz" 8;
    color: rgb(52, 53, 56);
}

.super-category-block .sub-title {
    margin-top: 4px;
    font-size: 14px;
    line-height: 20px;
    font-weight: unset;
    font-variation-settings: "wght" 663, "opsz" 8;
    color: rgb(28, 125, 28);
}

.super-category-block .description {
    margin-top: 4px;
    font-size: 11px;
    line-height: 16px;
    font-weight: unset;
    font-variation-settings: "wght" 336, "opsz" 8;
    color: rgb(114, 118, 126);
}

.super-category-block .vendor-list {
    margin: 12px 0px 0px;
    padding: 0px;
}


.our-advantages > div {
    padding: 32px;
    min-height: 160px;
    display: flex;
    color: #343538;
    flex-direction: column;
    -webkit-box-pack: start;
    justify-content: flex-start;
    flex: 1;
    background: var(--app-gray-light-6);
    border-radius: 15px;
}

.our-advantages .description {
    font-size: 14px;
    line-height: 20px;
    font-weight: unset;
    font-variation-settings: "wght" 0, "opsz" 8;
    margin-top: 20px;
}

.asked-question-bloc {
    -webkit-align-items: center;
    -webkit-box-align: center;
    align-items: center;
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    -webkit-box-pack: justify;
    justify-content: space-between;
    width: 100%;
    color: #424242;
    padding: 20px;
    height: auto;
    line-height: 36px;
    font-weight: normal;
    border-bottom: 1px solid var(--app-gray-light-1);
    white-space: normal;
    text-align: left;
    -webkit-font-smoothing: antialiased;
}

.famous-category-more i {
    background: var(--app-color-primary);
    color: white;
    padding: 27px;
    border-radius: 50%;
    margin: 7px 0px;
    font-size: 2rem;
}

.section-newsletter {
    background-color: var(--app-green-light-3);
    background-image: url("../images/confetti-1.svg");
    background-blend-mode: overlay;
}

.section-newsletter .newsletter-title {
    text-align: center;
}

.our-advantages>div {
    text-align: center;
    justify-content: center;
}

.our-advantages img {
    width: 250px;
    align-self: center;
}


/* Responsivity */
@media only screen and (max-width: 992px) {

    .h-banner {
        padding: 10px !important;
    }

    .section-banner img {
        border: 1px solid var(--app-gray-light-4);
    }

    .h-banner-message {
        font-size: 13px;
        margin-bottom: 0;
    }

    .section-banner img {
        min-height: auto;
    }

    .famous-catory-img-bloc img {
        width: 80px;
    }

    .famous-category-more i {
        background: var(--app-color-primary);
        color: white;
        padding: 24px;
        border-radius: 50%;
        margin-top: 0px;
        font-size: 1.5rem;
    }

    .super-category-block {
        background-size: 47%;
        min-height: auto;
    }

    .super-category-block .app-button-md {
        height: auto !important;
        font-weight: 200;
        padding: 7px 15px !important;
    }

    .super-category-block .description {
        display: none;
    }

    .super-category-block .title {
        font-size: 17px
    }

    .section-newsletter .newsletter-title {
        font-size: 19px;
        line-height: auto;
        text-align: center;
    }

    .our-advantages>div {
        padding: 12px;
    }

    .our-advantages .description {
        font-size: 15px;
        font-variation-settings: normal;
        line-height: 20px;
        font-weight: 200;
        margin-top: 5px;
        margin-bottom: 0px;
    }

    .our-advantages img {
        width: 190px;
        margin-bottom: 10px;
    }

    .asked-question-bloc {
        font-size: 15px;
        line-height: 20px;
        font-weight: 100;
        padding: 10px;
    }

    .product-bloc .app-button-md {
        height: auto !important;
        padding: 3px 5px !important;
        font-size: 14px !important;
    }

    #carouselExampleIndicators {
        padding-top: 12px !important;
    }

    .famous-category-bloc .title {
        font-size: 12px;
    }
}