.off-item-percentage-hidden{
    display : none;
}

.off-title-container {
    position: relative;
    margin-block: 50px;
    margin-inline: auto;
    padding-inline: 10px;
}
.off-title-line {
    border-top: rgba(6, 76, 79, 0.4) dashed 2px;
    width: 100%;
}
.off-title-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #f4f4f4;
    padding-inline: 38px;
    font-size: 26px;
    font-weight: 600;
    color: var(--Text-600, #4c4c4c);
}
.todays-off-container {
    position: relative;
    max-width: 1296px;
    margin-inline: auto;
    padding-inline: 20px;
}

.todays-off-container .glide  {
    max-width: 990px;
    margin-inline: auto;
}
.todays-off-container .glide__track {
}
.todays-off-container .glide__slides {
}
.todays-off-container .glide__slide {
    display: flex;
    justify-content: center;
    align-items: center;
}
.todays-off-container .glide__arrow {
    bottom: 88px;
}
.off-item {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    width: fit-content;
    position: relative;
    margin-bottom: 28px;
    height: 290px;
}
.off-item-img {
    width: 134px !important;
    height: 134px !important;
    border-radius: 50%;
}
.off-item-details {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    height: 100%;
}
.off-item-name {
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 8px;
    margin-top: 10px;
    order: 1;
}
.off-item-percentage {
    padding: 7px 22px;
    border-radius: 8px;
    border: 1px solid var(--Tertiary-400, #ffb833);
    backdrop-filter: blur(5px);
    color: var(--Tertiary-400, #ffb833);
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 10px;
    order: 2;
}
.off-item-price {
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 18px;
    order: 3;
}
.off-item-btn {
    border-radius: 10px;
    background: #54250E;
    padding: 11px 23px;
    border: none;
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    order: 4;
}
.off-item-btn:hover {
    background: #ffffff;
    color: #54250E;
}
.off-item-btn:hover ~ .off-item-percentage {
    background: var(--Tertiary-500, #ffa600);
    color: #fff;
}
.todays-off-container .glide__arrow--left {
    left: unset;
    left: 54px;
}
.todays-off-container .glide__arrow--right {
    right: unset;
    right: 54px;
}
@media screen and (max-width: 1296px) {
    .todays-off-container .glide {
        max-width: 791px;
    }
}
@media screen and (max-width: 1050px) {
    .todays-off-container .glide {
        max-width: 592px;
    }
}
@media screen and (max-width: 840px) {
    .todays-off-container .glide {
        max-width: 393px;
    }
    .chef-suggestion-title-container {
        margin-block: 20px;
    }
}
@media screen and (max-width: 640px) {
    .off-title-text{
        font-size:16px;
        padding-inline:14px;
    }
    .off-title-container {
        margin-block: 40px;
    }
    .todays-off-container .glide {
        max-width: 194px;
    }
    .todays-off-container .glide__arrow--left {
        left: unset;
        left: 32px;
    }
    .todays-off-container .glide__arrow--right {
        right: unset;
        right: 32px;
    }
    .off-item-btn {
        background: #54250E;
        color: #ffffff;
    }
    .off-item-percentage {
        background: var(--Tertiary-500, #ffa600);
        color: #fff;
        border-radius: 2px;
    }
}