@font-face {
    font-family: "Bahij_Arabic";
    src: url("/assets/fonts/bahij_ArbFONTS.ttf")  format("TrueType");
}
@font-face {
    font-family: "Amelia";
    src: url("/assets/fonts/Amelia-Basic.otf") format("opentype");
}
@font-face {
    font-family: "Amelia black";
    src: url("/assets/fonts/Amelia-Basic-Black.otf") format("opentype");
}
html[dir="rtl"] {
    font-family: "Bahij_Arabic";
}
html[dir="ltr"] {
    font-family: "Amelia";
}
body {
    background: #f7f8f8;
}
header {
    position: fixed;
    width: 100%;
    z-index: 9;
}
.font-semibold {
    font-family: "Amelia black";
}
html[dir="rtl"] .font-semibold {
    font-family: "Bahij_Arabic";
}
.detail-page header.scrolled{
    background: url('/images/header_detail.png') no-repeat;
    background-size: 100%; 
}
.home-page header.scrolled{
     background: url('/images/header_knor.jpg') no-repeat;
     background-size: 100%; 
}
header.scrolled .logo_header img {
    transition: 0.4s ease;
    width: 100px;
    padding: 10px 0;
}
.menu_principal li a.active {
    border-bottom: solid #AEC843 4px;
}
.select_language::before {
    background-image: url('/images/global_langue.svg');
    content: '';
    position: absolute;
    top: 10px;
    right: 10px;
    width: 18px;
    height: 18px;
    background-size: 18px;
    background-repeat: no-repeat;
}
.select_language::after{
    content: '';
    position: absolute;
    top: 16px;
    right: 10px;
    background-image: url('/images/flech.svg');
    width: 15px;
    height: 15px;
    background-size: 15px;
    background-repeat: no-repeat;
}
#button_select_catgorie::after{
    content: '';
    position: absolute;
    top: 20px;
    left: 10px;
    background-image: url('/images/flech_white.svg');
    width: 15px;
    height: 15px;
    background-size: 15px;
    background-repeat: no-repeat;
}
html[dir="ltr"] .select_language::before{
    left: 10px;
    right: unset;
}
.select_language:hover::after {
    background-image: url('/images/flech_white.svg');
}
.select_language:hover::before {
    background-image: url('/images/global_langue_white.svg');
}
html[dir="rtl"] .select_language::after {
    left: 10px;
    right: unset;
}
.ltr {
    direction: ltr;   
}
.rtl {
    direction: rtl;
}
#data_ingredients{
    min-height: 66px;
    max-height: 66px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}
.filter-shadow {
    filter:drop-shadow(20px 10px 50px #0000007a);
}
.bg-welcome {
    background: url(/images/background_knor.jpg);
    background-repeat: no-repeat;
    background-size: 100%;
    height: 450px;
}
.bg-mobile-welcome {
    background: url(/images/mobile_home.png);
    background-repeat: no-repeat;
    background-size: 100%;
}
.p-103 {
    padding-top: 103px;
}
.section_type {
    border: solid #007b2b;
    border-radius: 30px;
}
.search_button {
    right: -220px;
    top:-8px;
}
html[dir="ltr"] .welcome_title {
    line-height: 55px;
}
html[dir="ltr"] .welcome_desc1 {
    margin-bottom: -15px;
}
html[dir="ltr"] #phone {
    text-align: left;
}
html[dir="rtl"] .search_button {
    left: -200px;
    right: unset;
    top:-8px;
}
:focus-visible {
    outline: unset !important;
}
input:focus-visible {
    outline: unset !important;
}
button:focus {
    outline: unset !important;
}
button.bg-006633:hover{
    background: #AEC843;
    color:#fff;
}
button.bg-AEC843:hover{
    background: #007b2b;
    color:#fff;
}
button.bg-006633:hover .play_audio {
    filter: brightness(5);
}
footer {
    background: #DCE0CC;
    padding: 50px 0;
}
.bg-006633{
    background-color: #007b2b;
}
.bg-black{
    background-color: #000;
}
.bg-black-700{
    background-color: rgb(0 0 0/ 70%);
}
.bg-004b97 {
    background: #004b97;
}
.bg-e2e8f0{
    background-color: #e2e8f0;
}
.max-h-300 {
    max-height: 380px;
}
.h-300 {
    height: 300px;
}
.w-fit {
    width: fit-content;
}
.slider .slick-slide img {
    height: 130px;
}
.slider {
    background: #f7f8f8;
}
.slick-slide.slick-active {
    margin: 0 10px;
}
.min-h-42 {
    min-height: 42px;
}
.min-h-60 {
    min-height: 60px;
}
.bg-AEC843{
    background: #AEC843;
}
.color-006633 {
    color:#007b2b;
}
.color-AEC843 {
    color:#AEC843;
}
.color-b4b4b4 {
    color:#b4b4b4;
}
.color-ccc{
    color: #ccc;
}
.selected.gold {
    color: gold !important;
}
.language-switcher{
    margin-top: -10px;
}
.bg-start {
    background: url('/images/bg_start.png');
    width: 100%;
    height: 300px;
}
.bg-start-hover {
    background: rgb(0 123 43 / 80%);
    width: 100%;
    height: 100%;
}
.start_recept {
    font-size: 38px;
    font-weight: 800;
    text-align: center;
    padding: 5px 100px 5px 50px;
    border-radius: 50px;
}
.bg-start button {
    top: -180px;
}
.start_recept:after {
    content: '';
    width: 40px;
    height: 100%;
    background: url(/images/start_home.svg) no-repeat;
    position: absolute;
    top: 14px;
    right: 10px;
}
.bg-start .start_recept:after {
    background: url(/images/start.svg) no-repeat;
}
.start_recept:hover:after {
    background: url(/images/start_white.svg) no-repeat;
}
.img_w_effect {
    margin-top: -10px;
}
html body .slider .slick-prev:before {
    content: url('/images/left.svg');
}
html body .slider .slick-next:before {
    content: url('/images/right.svg');
}
html body .slider .slick-prev {
    left: 25px;
    right: unset;
}
html body .slider .slick-next {
    right: 25px;
    left: unset;
}
.slider .slick-prev, .slider .slick-next {
    width: 60px;
    height: 60px;
    z-index: 1;
    top: 50%;
}
.slider {
    width: 100%;
    margin: auto;
    padding: 40px 0;
}
.slider template {
    display: none !important;
}
.slick-slide img {
    width: 100%;
    height: auto;
}
html[dir="ltr"] .content_list {
    flex-direction: row-reverse;
}
html[dir="ltr"] .detail_result {
    text-align: left;
}
.start_detail {
    background-repeat: no-repeat;
    min-height: 550px;
    background-size: 100% 640px;
}
html[dir="rtl"] .list_result .float-left {
    float: right;
}
.share_button:before,
.buy_marjane:before {
    content: '';
    width: 25px;
    height: 25px;
    position: absolute;
    background-size: 25px;
    background-repeat: no-repeat;
    top: 8px;
    left: 10px;
}
.share_button:before{
    background-image: url('/images/share.svg');
}
.share_button:hover:before{
    background-image: url('/images/share-white.svg');
}
.buy_marjane:before {
    background-image: url('/images/shop_icone.svg');
}
html[dir="ltr"] .share_button:before {
    left:unset;
    right: 10px;
} 
#grid_container {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Two columns */
    gap: 1rem;
    padding: 1rem;
}
#grid_container li {
    background-color: #f5f5f5;
    color: #007b2b;
    padding: 5px 20px;
    border-radius: 10px;
    box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2);
}
ul#recipe_steps {
    width: 70%;
    counter-reset: counter;
}
ul#recipe_steps li {
    border-bottom: solid #ccc;
    padding-bottom: 10px;
    margin-bottom: 10px;
    font-size: 18px;
    color: #433f3f;
}
ul#recipe_steps li:before {
    content: counter(counter);
    counter-increment: counter;
    color: #007b2b;
    background-color: #fff;
    display: inline-flex;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    margin-right: 16px;
    border-radius: 50%;
    box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2);
}
html[dir="rtl"] ul#recipe_steps li:before {
    margin-left: 16px;
    margin-right: 0;
}
ul#recipe_steps li:last-child {
    border: unset;
}
.play_audio {
    position: relative;
}
html[dir="rtl"] .play_audio {
    left: 15px;
}
html[dir="ltr"] .play_audio {
    right: 15px;
}
.img_bouillon {
    height: 200px;
    background: url(/images/bouillon/BG_detail.jpg);
    border-radius: 20px;
    text-align: center;
    display: flex;
    align-items: center;
    width: 300px;
}
.slick-slide.clicked #info_ingrd,
.grid-item.clicked_mobile {
    border: solid 4px #5ab058;
    position: relative;
}
.slick-slide.clicked #info_ingrd:after,
.grid-item.clicked_mobile:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgb(90 176 88 / 50%);
    top: 0;
    left: 0;
    border-radius: 20px;
}
.grid-item.clicked_mobile:after {
    border-radius:unset;
}
.select_categorie {
    width: 70%;
    margin: auto;
}
.select_categorie button {
    border: 2px solid #1b8b46;
    height: 60px;
    margin: 5px;
    border-radius: 30px;
    background: #fff;
    width: 20%;
}
.img_result img {
    border-radius: 5px;
}
.button_generate{
    position: absolute;
    bottom: 45px;
    left: 15px;
}
body footer {
    padding: 30px 0;
}