/*     ---- body sstyle menu ----      */

@font-face {
    font-family: "fontAr";
    src: url(../font/alfont_com_AlFont_com_FrutigerLTArabic-65Bold-1.ttf);
}
@font-face {
    font-family: 'font1';
    src: url(../font/alfont_com_ArbFONTS-DG-Sahabah-Reg.ttf);
}
@font-face {
    font-family: 'font2';
    src: url(../font/JannaLTBold.ttf);
}
@font-face {
    font-family: 'font3';
    src: url(../font/alfont_com_AlFont_com_Droid-Arabic-Kufi-1.ttf);
}
@font-face {
    font-family: 'font4';
    src: url(../font/Fairuz-Bold.otf);
}
@font-face {
    font-family: 'font5';
    src: url(../font/alfont_com_Montserrat-Arabic-Regular.ttf);
}
@font-face {
    font-family: 'font6';
    src: url(../font/DIN\ Next\ LT\ W23\ Light.otf);
}
body{
    background-color: #E0E3C6;  
    padding: 0;
    margin: 0; 
    font-family: "fontAr";
    max-width: 1920px;
    margin: 0 auto;
    display: block;
}
a{
    text-decoration: none;
}
.wc-block-components-notice-banner.is-error { 
    direction: rtl;
}

/*     ---- header style menu ----      */

/*     ---- header style menu desktop ----      */
header{ 
    display: flex;
    width: 90%;
    margin: 1% 5%; 
    justify-content: space-between;
    align-content: center;
    align-items: center;
} 
.header-user{  
    background-color: #FDFFEE;
    padding: 2% 5%;
    margin: 0; 
}
.header-user-N #menu-menu-head-1 li:last-child a {
    display: none;
}
.header-user-N .menu-buttons{
    width: 20%;
}
.header-user-N .menu-desktop{
    width: 30%;
}
.header-user-N .menu-logo{
    width: 50%;
}
.header-user-N .menu-buttons button{
    width: 24% !important;
    margin-right: 0% !important;
}
.header-user-N .menu-buttons .single-btn3 {
    cursor: pointer;
    margin: 0% 0% 0% 10%;
    background-color: #105804;
    border: none;
    width: 40%;
    height: 55.595px;
    border-radius: 15px;
    display: flex;
    align-content: center;
    align-items: center;
    justify-content: center;
    position: relative;
}
.menu-buttons{
    display: flex;
    width: 10%;
    flex-wrap: wrap; 
    align-items: center;
    align-content: center;
    justify-content: center; 
    position: relative;
} 
.btn-desk-menu{
    display: block !important;
}  
.btn-mob-menu{
    display: none !important;
} 
.menu-btn{
    background-color: #105804;
    border: none;
    width: 40%;
    height: 55.595px;
    border-radius: 15px;
    display: flex;
    align-content: center;
    align-items: center;
    justify-content: center;
    position: relative;
} 
.panier-count {
    color: #FFF;
    text-align: center;
    font-family: 'font2';
    font-size: 0.798rem;
    font-weight: 700;
    line-height: 125.5%;
    background-color: red;
    padding: 8px 7px;
    border-radius: 60px;
    position: absolute;
    top: -30%;
    z-index: 10;
    right: 26%;
}
.header-user-N .panier-count { 
    right: 56% !important;
}
.btn1{
    cursor: pointer;
    margin: 0% 10% 0% 0%;
}
.btn2des{ 
    cursor: pointer;
    margin: 0% 0% 0% 10%; 
} 
.btn2{ 
    display: none;
} 
.menu-single-buttons-right {
    position: relative;
} 
.panier-count1 {
    color: #FFF;
    text-align: center;
    font-family: 'font2';
    font-size: 0.798rem;
    font-weight: 700;
    line-height: 125.5%;
    background-color: red;
    padding: 8px 7px;
    border-radius: 60px;
    position: absolute;
    bottom: 62%;
    right: 25%;
}
.menu-logo{
    display: flex;
    width: 50%;
    flex-wrap: nowrap;
    align-items: center;
    align-content: center;
    justify-content: center;
}
.par-logo{
    width: 35%;
}
.head-logo {
    width: 74%;
    float: right;
}
.par-search{
    width: 65%; 
    padding: 0 5%; 
}
.form-search{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    align-items: center;
}
.form-search-input{
    width: 90%;
    margin: 0% !important;
    height: 46px; 
    border: none;
    border-top-left-radius: 23px;
    border-bottom-left-radius: 23px;
    text-align: right;
    font-size: 1.5rem;
    font-family: Israr-Syria;
    font-weight: 400;
    line-height: normal;
    padding-right: 0;
}
.form-search-input::-ms-input-placeholder { 
    color: rgba(0, 0, 0, 0.20);
    padding-right: 0;
} 
.form-search-input::placeholder {
    color: rgba(0, 0, 0, 0.20);
    padding-right: 0;
}
.form-search-btn{
    cursor: pointer;
    width: 10%;
    margin: 0% !important;
    height: 46px;
    background-color: #fff;
    border: none;
    border-top-right-radius: 23px;
    border-bottom-right-radius: 23px;
    text-align: left;
    padding-left: 0;
}
.menu-desktop{
    display: flex;
    width: 40%;
    flex-wrap: wrap; 
    align-items: center;
    align-content: center;
    justify-content: center;
}
#menu-menu-head-1{
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    list-style: none;
    direction: rtl;
    align-content: center;
    justify-content: space-around;
    align-items: center;
    padding: 0% 0% 0% 5%;
}
#menu-menu-head-1 li:first-child a {
    color: #000; 
    font-family: 'font3';
    font-size: 15pt;
    font-weight: 400;
    line-height: normal;
    text-decoration: underline;
    text-decoration-color: #105804;
    text-underline-offset: 10px;
}
#menu-menu-head-1 li a {
    color: #811F00; 
    font-family: 'font3';
    font-size: 12pt;
    font-weight: 400;
    line-height: normal;
    text-decoration: none;
} 
#menu-menu-head-1 li:last-child a {
    color: #000; 
    font-family: 'font3';
    font-size: 10pt;
    font-weight: 400;
    line-height: normal;
    text-decoration: underline;
    text-decoration-color: #105804;
    text-underline-offset: 10px;
}

/*     ---- header style menu mobile ----      */

.menu-mobile{
    width: 280px;
    height: 100%;
    min-height: 650px;
    background-color: #FDFFEE;
    z-index: 99;
    position: fixed;
    top: 0;
    margin: 0;
    left: 0;
    display: block;
    padding: 0%;
}
.menu-mobile-desk{
    width: 468px;
    height: auto;
    min-height: auto;
    background-color: #fdffeef2;
    z-index: 99;
    position: absolute;
    margin: -3% 0% 0% 5.5%;
    padding: 0%;
}
.menu-mobile-desk .menu-mobile-content li a { 
    font-size: 1.313rem; 
}
.menu-mobile-desk .menu-mobile-content li  { 
    border-radius: 30px;
}
.menu-mobile-desk .menu-mobile-content li:hover  { 
    background-color: #105804;
}
.menu-mobile-desk .menu-mobile-bottom {  
    padding: 4% 0%;
}
.menu-mobile-desk .menu-mobile-top {  
    padding: 20% 5% 30% 5%;
}
.menu-mobile-top{
    border-bottom: 1px #000 solid;
    padding: 5%;
    height: 75%; 
}
.close-btn{
    cursor: pointer;
    direction: rtl;
    width: 100%;
}
.close-btn svg{
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}
.menu-mobile-logo{
    width: 40%;
    margin: 0% 25%;
}
.menu-mobile-head-logo{
    width: 100%;
}
.menu-mobile-top-menu{
    margin-top: 2%;
}
.menu-mobile-content{ 
    list-style: none;
    width: 100%;
    margin: 0;
    padding: 0%; 
}
.menu-mobile-content li{
    border-radius: 10px;
    height: 50px;
    margin: 0 0 5% 0;
    background-color: rgba(233, 151, 0, 0.76);
    display: flex;
    align-content: center;
    justify-content: center;
    align-items: center;
}
.menu-mobile-content li a{
    text-decoration: none;
    color: #FDFFEE; 
    text-align: right;
    font-size: 14px;
    font-weight: 800;
} 
.menu-cat li a { 
    width: 100%;
    height: 100%;
    display: flex;
    align-content: center;
    justify-content: flex-end;
    align-items: center;
    padding-right: 5%;
}
#menu-item-32{
    cursor: pointer;
}
#menu-item-32::before {
    content: ''; 
    display: inline-block;  
    width: 8px;
    height: 14px;
    background-size: contain; 
    background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="16" viewBox="0 0 10 16" fill="none"><path d="M8.09717 -1.66351e-07L10 1.88L3.81916 8L10 14.12L8.09716 16L2.54292e-07 8L8.09717 -1.66351e-07Z" fill="white"/></svg>');
    position: absolute;
    left: 30px;
}
.menu-cat li::before {
    content: ''; 
    display: inline-block;  
    width: 8px;
    height: 14px;
    background-size: contain; 
    background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="16" viewBox="0 0 10 16" fill="none"><path d="M8.09717 -1.66351e-07L10 1.88L3.81916 8L10 14.12L8.09716 16L2.54292e-07 8L8.09717 -1.66351e-07Z" fill="white"/></svg>');
    position: absolute;
    left: 30px;
}
.menu-mobile-bottom{
    display: flex;
    align-content: center;
    justify-content: space-around;
    align-items: center;
    height: 20%;
}
.menu-mobile-bottom a{
    width: 40%;
    padding: 0 0 3% 0;
}
.menu-mobile-bottom-btn{
    cursor: pointer;
    background-color: #E0E3C6;
    color: #000;
    text-align: center;
    font-size: 1.25rem;
    font-weight: 400;
    border: none;
    width: 100%;
    border-radius: 8px;
    font-family: "fontAr";
}

/*     ---- header single style menu ----      */

/*     ---- header single style menu desktop ----      */

.menu-single-btn{
    background: none;
    border: none;
    width: 40%;
    height: 55.595px;
    border-radius: 15px;
    display: flex;
    align-content: center;
    align-items: center;
    justify-content: center;
} 
.single-btn1{
    cursor: pointer;
    margin: 0% 10% 0% 0%;
}
.single-btn2{ 
    cursor: pointer;
    margin: 0% 0% 0% 10%; 
} 
.menu-single-buttons-left{
    display: flex;
    width: 10%;
    flex-wrap: wrap; 
    align-items: center;
    align-content: center;
    justify-content: center; 
}
.single-btn3{
    cursor: pointer;
    margin: 0% 10% 0% 0%;
}
.single-btn4{ 
    cursor: pointer;
    margin: 0% 0% 0% 10%; 
} 
.menu-single-buttons-right{
    display: flex;
    width: 10%;
    flex-wrap: wrap; 
    align-items: center;
    align-content: center;
    justify-content: center; 
}
.menu-single-search{
    width: 80%;
} 
.menu-single-search .par-search {
    width: 66%;
    padding: 0 17%;
}

/*     ---- footer style ----      */

footer{
    background-color: #fff;
    width: 100%;
    padding: 0;
    margin: 0;
    position: relative;
    bottom: 0;
}

/*     ---- footer bar style desktop ----      */

.bar-footer{
    background-color: #fff;
    border-top: #000 2px solid; 
    width: 90%;
    margin: 0 5%;
    padding: 1px;
}
.p-bar-footer{
    color: rgba(0, 0, 0, 0.60);
    text-align: center;
    font-family: 'font3';
    font-size: 1.25rem;
    font-weight: 400;
    line-height: normal;
    display: flex;
    align-content: center;
    justify-content: center;
    align-items: center;
    padding: 0;
    margin: 10px 0;
} 

/*     ---- footer conten style desktop ----      */

.footer-container{
    background-color: #fff;
    margin: 0% 10%;
    padding: 0;
    direction: rtl;
}
.footer-row{
    display: flex;
    align-items: flex-start;
    justify-content: center;
    align-content: flex-start;
    padding: 2% 0 6% 0;
    margin: 0;
    flex-wrap: wrap;
    width: 100%;
}
#menu-item-66 a{
    font-family: 'font4'; 
}
.footer-col-xl1{
    width: 20%; 
}
.footer-logo{
    margin-bottom: 10%;
    width: 50%;
}
.footer-col-xl1-p{
    color: #E99700;
    text-align: right;
    font-size: 1.25rem;
    font-weight: 300;
    line-height: 31.279px;  
}
.footer-col-xl2{
    width: 80%;
}
.footer-row-ligne1{
    display: flex;
    align-items: center;
    justify-content: space-between;
    align-content: center;
    width: 100%;
}
.menu-footer{
    display: flex;
    align-items: center;
    justify-content: space-between;
    align-content: center;
    width: 100%;
    list-style: none;
    padding: 0;
    flex-wrap: wrap;
}
.menu-footer li:first-child, .menu-footer li:nth-child(2) {
    width: 22%;
    text-align: right;
}
.menu-footer li:nth-child(3){
    width: 16%;
    text-align: center;
}
.menu-footer li:last-child{
    width: 40%;
    text-align: center;
}
.menu-footer li a{
    color: #000; 
    font-family: 'font3';
    font-size: 15pt;
    font-weight: 400;
    line-height: normal;
    text-decoration: underline;
    text-decoration-color: #105804;
    text-underline-offset: 10px;
}
.menu-footer li:first-child a, .menu-footer li:nth-child(2) a{
    padding-right: 10%;
}
.footer-row-ligne2{
    display: flex;
    align-items: center;
    justify-content: center;
    align-content: center;
    flex-wrap: wrap;
    width: 100%;
}
.footer-row-ligne2-row{
    display: flex;
    align-items: center;
    justify-content: center;
    align-content: center;
    flex-wrap: wrap;
    width: 100%;
}
.footer-row-ligne2-row-col{
    padding: 0;
    margin: 0;
}
.ligne2-row-col1{ 
    width: 22%;
} 
.ligne2-row-col2{ 
    width: 22%;
} 
.ligne2-row-col1 .menu-col-footer{    
    list-style: none;
    padding: 0 20% 0 0;
}
.ligne2-row-col2 .menu-col-footer{
    list-style: none;
    padding: 0 15% 0 0;
    width: max-content;
}
.menu-col-footer li { 
    text-align: right;
} 
.menu-col-footer li a{
    color: rgba(0, 0, 0, 0.40); 
    font-family: 'font3';
    font-size: 1.25rem;
    font-weight: 400;
    line-height: normal;
    text-decoration: none;
}                 
.ligne2-row-col3{
    width: 16%;
}                  
.ligne2-row-col4{
    width: 40%;
}
.ligne2-row-col4-p{
    color: rgba(0, 0, 0, 0.40);
    text-align: center;
    font-family: 'font3';
    font-size: 1.25rem;
    font-weight: 400;
    line-height: normal;
    margin-top: 0;
}
.ligne2-row-col4-row{ 
    display: flex;
    align-items: center;
    justify-content: center;
    align-content: center;
    flex-wrap: wrap;
    width: 100%;
}
.ico-soc{
    margin: 0 2%;
}
.ico-soc svg{
    width: 34.9px;
    height: 34.9px;
    flex-shrink: 0;
}

/*     ---- body front page style ----      */

/*     ---- body front page style hero ----      */

.section-hero{
    border-bottom: #000 1px solid;
    direction: rtl;
    display: flex;
    align-items: center;
    justify-content: space-between;
    align-content: center;
    flex-wrap: wrap;
    width: 100%; 
}
.swiperhero{
    width: 100%;
}
.swiperhero .swiper-slide{
    display: flex;
    align-items: center;
    justify-content: space-between;
    align-content: center;
    flex-wrap: wrap;
    width: 100%; 
}
.section-hero-par2{
    width: 50%;
}
.section-hero-img{
    width: 90%;
    padding: 0 5%;
}
.section-hero-par1{
    width: 50%;
}
.hero-title{
    color: #000;
    font-size: 3.295rem;
    font-weight: 400;
    text-align: right;
    margin: 0 5% 0 15%;
    line-height: 90px;
}
.hero-title::first-line{
    color: #811F00;  
    font-weight: 800;
}
.hero-title-2 , .section-hero-par1 h2{
    color: #105804;
    text-align: right;
    font-size: 3.095rem;
    font-weight: 800;
    margin: 0 5%;
}
.hero-title-3 , .section-hero-par1 h3{
    color: #000;
    text-align: right;
    font-size: 2.5rem;
    font-weight: 300;
    margin: 0 5% 0 25%;
    line-height: 65px;
}
.btns-hero{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    align-content: center;
    flex-wrap: wrap;
    width: 90%;
    margin: 0 5%; 
    direction: ltr;
} 
a .hero-btn-2{
    display: flex;
    flex-wrap: wrap;
    color: #105804;
    font-family: 'font1';
    font-size: 1.875rem;
    font-weight: 300;
    line-height: normal;
    margin: 30% 10% 0% 5%;
    width: 100%;
    align-content: center;
    justify-content: center;
    align-items: center;
}
.hero-btn-1{
    color: #FFF;     
    font-family: 'font1';
    font-size: 1.875rem;
    font-weight: 300;
    line-height: normal;
    background-color: #E99700;
    border-radius: 30px;
    margin: 10% 1% 0% 10%;
    padding: 0 6%;
}

/*     ---- body front page style after hero ----      */

.section-after-hero{
    border-bottom: #000 1px solid;
    padding-bottom: 4%;
    background-color: #FDFFEE;
}
.section-after-hero-title{
    color: #000; 
    text-align: center;
    font-family: 'font2';
    font-size: 3.75rem;
    font-weight: 700; 
    margin: 0;
    padding: 1% 0 3% 0;
}

/*     ---- body front page style after hero slider ----      */

.swiper1 .swiper-slide , .auter-prods-row .swiper-slide{
    display: grid !important;
    justify-content: center;
    align-items: center;
}
.swiper1 .swiper-slide-title-div , .auter-prods-row .swiper-slide-title-div {
    width: 269px;
    height: 277.245px; 
    border-radius: 35px;
    background-size: cover;
    background-repeat: no-repeat;
    display: grid;
    align-content: space-between;
    position: relative;
}
.swiper1 .slide-overlay , .auter-prods-row .slide-overlay{
    border-radius: 35px;
    position: absolute;
    top: 0;
    bottom: 0; 
    width: 269px;
    height: 277.245px;
    z-index: 2; 
    background: linear-gradient(180deg, #105804 0.17%, rgba(89, 201, 70, 0.00) 30.62%);
}
.swiper1 .swiper-slide-title , .auter-prods-row .swiper-slide-title {
    position: relative;
    z-index: 3; 
    color: #FFF; 
    text-align: right;
    font-size: 1.188rem;
    font-weight: 800;
    position: relative;
    margin: 0%;
    padding: 4% 10%;
}
.swiper1 .swiper-slide-btn , .auter-prods-row .swiper-slide-btn{
    color: #FFF;
    text-align: center;
    font-size: 2.088rem;
    font-weight: 800;
    border-radius: 14px;
    background: rgba(16, 88, 4, 0.60);
    width: 50%;
    margin: 0 0 5% 8%;
    line-height: 43px;
}
.swiper1 .slide-row-btn , .auter-prods-row .slide-row-btn{
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: space-between;
    position: relative;
}
.swiper1 .slide-row-btn1 , .auter-prods-row .slide-row-btn1{
    color: #FFF;
    text-align: center;
    font-size: 1.875rem;
    font-weight: 400;
    line-height: 48.868px;
    background-color: #E99700;
    border: none;
    font-family: fontAr;
    padding: 0% 6% 2% 6%;
    margin: 6% 0%;
    border-radius: 14px;
}
.swiper1 .slide-row-btn2 , .auter-prods-row .slide-row-btn2{
    color: #FFF; 
    text-align: center;
    font-family: fontAr;
    font-size: 1.875rem;
    font-weight: 400;
    line-height: 48.868px;
    background-color: #105804;
    border: none; 
    padding: 0% 5% 2% 5%;
    margin: 6% 0%;
    border-radius: 14px;
}
.swiper1 .slide-row-btn2-count , .auter-prods-row .slide-row-btn2-count{
    content: '+';
    color: #FFF;
    text-align: center;
    font-family: 'font2';
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 23.845px;
    background-color: red;
    position: absolute;
    left: -11px;
    bottom: 56px;
    border-radius: 20px;
    padding: 1px 7px; 
}
.auter-prods-row .slide-row-btn2-count { 
    left: -11px; 
}

/*     ---- body front page style section valeurs ----      */

.section-valeurs{
    padding: 0 5% 1% 5%;
    background-color: #FDFFEE;
    direction: rtl;
}
.section-valeurs-title{
    color: #000;
    text-align: center; 
    font-family: 'font2';
    font-size: 3.75rem;
    font-weight: 700;
    line-height: 75.3px;
    margin: 0;
    padding: 2% 0 0 0;
}
.section-valeurs-row{
    display: flex;
    align-content: flex-start;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    margin: 5% 0;
}
.section-valeurs-col{
    width: 16%;
    padding: 0% 1%;
}
.icon-svg{
    display: block;
    margin: 0 auto;
    width: 60%;
}
.sec-val-col-title{
    color: #E99700; 
    text-align: center;
    font-family: fontAr;
    font-size: 1.875rem;
    font-weight: 800; 
    margin: 0;
    padding: 0;
}
.sec-val-col-p{
    color: #000;
    text-align: center;
    font-family: fontAr;
    font-size: 1.625rem;
    font-weight: 300;
    line-height: 31.953px;
    margin: 0;
    padding: 0;
} 

/*     ---- body front page style section commentaires ----      */

.section-commentaire{
    padding: 1% 10%;
}
.section-commentaire-title1{
    color: #000;
    text-align: center;
    font-family: 'font2';
    font-size: 3.75rem;
    font-weight: 700;
    line-height: 75.3px;
}
.section-commentaire-title2{
    color: rgb(100,144,81);
    text-align: center;
    font-family: fontAr;
    font-size: 1.875rem;
    font-weight: 800;
    line-height: 36.868px;
}
.section-commentaire-title3{
    color: #000;
    text-align: center;
    font-family: fontAr;
    font-size: 1.625rem;
    font-weight: 300;
    line-height: 31.953px;
}
.swiper2{
    margin: 2% 0% 4% 0%;
    padding: 9% 0% 6% 0% !important;
    direction: rtl;
}
.swiper2 .swiper-slide{
    border-radius: 30px;
    border: 3px solid #E99700; 
    background-color: #FFF;
    box-shadow: 3px 5px 9px 1px rgba(0, 0, 0, 0.25); 
    display: grid;
    height: 243px;
    width: 31.33333% !important;
    margin: 1%;
}
.swiper2 .commentaire-icon{
    width: 125px;
    height: 125px; 
    border-radius: 125px;
    border: 3px solid #E99700; 
    display: block;
    margin: -17% auto 0 auto;
}
.swiper2 .commentaire-title{
    color: #E99700;
    text-align: center;
    font-family: 'font2';
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 35.14px;
    margin: 0;
}
.swiper2 .commentaire-nom{
    color: rgba(158, 158, 158 );
    text-align: center;
    font-family: 'font2';
    font-size: 1.375rem;
    font-weight: 400;
    line-height: 27.61px;
    margin: 0;
}
.swiper2 .commentaire-txt{
    color: rgba(0, 0, 0, 0.80);
    text-align: center;
    font-family: 'font2';
    font-size: 1.375rem;
    font-weight: 400;
    line-height: 27.61px;
    margin: 0;
}
.swiper2 .commentaire-stars{
    display: block;
    margin: 0 auto;
}
.swiper2 .swiper-pagination-bullet{
    width: 14px !important;
    height: 14px !important;
}
.swiper2 .swiper-pagination-bullet-active{
    width: 14px !important;
    height: 14px !important;
    background-color: #E99700 !important;
}



/*     ---- body front page style section offers ----      */

.section-offer{
    background-color: #FDFFEE;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    align-content: center;
    padding: 5% 10%;
    border-bottom: #000 1px solid;
}
.section-offer-txt{
    width: 60%;
    text-align: right;
}
.section-offer-title{ 
    color: #E99700;
    text-align: right;
    font-family: 'font2';
    font-size: 3.75rem;
    font-weight: 700;
    line-height: 75.3px;
    margin: 0% 20% 0% 0%;
}
.section-offer-p{
    color: rgb(0, 0, 0);
    text-align: right;
    font-family: fontAr;
    font-size: 1.875rem;
    font-weight: 300;
    line-height: 43.168px;
    margin: 3% 15%;
}
.section-offer-btn{ 
    color: #FFF;     
    font-family: 'font1';
    font-size: 1.875rem;
    font-weight: 300;
    line-height: normal;
    background-color: #E99700;
    border-radius: 30px;
    margin: 0% 15%;
    padding: 0 6%;
    border: none;
    box-shadow: 0px -4px 8px 2px rgba(0, 0, 0, 0.25) inset;
} 
.section-offer-img{
    width: 40%;
    display: grid;
    justify-content: center;
    align-items: center;
    align-content: center; 
}
.img-offer{
    position: relative;
    width: 100%;
}
.section-offer-img-bg{
    width: 406px;
    height: 406px;
    margin: 0 0 0 10%;
    border-radius: 33px;
}
.offer-overlay{
    border-radius: 33px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 48.28%, rgba(16, 88, 4, 0.70) 92%) ;
    position: absolute;
    top: -0.5%;
    left: 9.1%;
    height: 406px;
    width: 406px;
    box-shadow: 3px 3px 8px 2px rgba(0, 0, 0, 0.25);
    border: 4px solid #E99700;
}
.section-offer-img-row{
    display: flex;
    flex-wrap: wrap;
    width: 406px;
    margin: 0% 0% 0% 10%;
    margin-top: -16%;
    align-content: flex-start;
    justify-content: space-between;
    align-items: flex-start;
    position: relative;
    z-index: 10;
}
.section-offer-img-row-txt{
    width: 35%;
}
.section-offer-img-row-txt-p{
    color: #FFF; 
    font-family: 'font1';
    font-size: 1.25rem;
    font-weight: 300;
    line-height: normal;
    text-align: right;
    padding-right: 10%;
}
.section-offer-img-row-imgs{
    display: flex;
    width: 65%;
    align-content: center;
    justify-content: center;
    align-items: center;
}
.section-offer-img-row-imgs-icon{
    width: 62px;
    height: 62px;
    border-radius: 62px;
    margin-right: -8%;
}
.section-offer-img-row-imgs-ch{
    color: #FFF;
    font-family: Dhyana;
    font-size: 1.75rem;
    font-weight: 700;
    line-height: normal;
    background-color: #E99700;
    border-radius: 50px;
    padding: 5% 3%;
}
.offer-mob{
    display: none;
}

/*     ---- body front page style section categories ----      */

.section-categories{
    background-color: #FFFFFF; 
    border-bottom: #000 1px solid;
}
.section-categories-title{
    color: #000; 
    text-align: center;
    font-family: 'font2';
    font-size: 3.75rem;
    font-weight: 700; 
    margin: 0;
    padding: 2% 0 1% 0;
    line-height: 75.3px;
}
.categories-cadre{
    background-color: #F6F5F5;
    border: #000 1px solid;
    border-radius: 39px;
    margin: 2% 6%;
}
.categories-row{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    align-content: center;
    justify-content: center; 
    padding: 5%;
}
.categories-col{
    margin: 2%;
    width: 25%;
    filter: drop-shadow(1px 3px 9.7px rgba(0, 0, 0, 0.25));
    background-color: #FFF;
    height: 360px;
    padding: 2%;
    border-radius: 38px;
}
.categories-col-txt{
    height: 80%;
}
.cat-h1{
    color: #E99700; 
    text-align: right;
    font-family: fontAr;
    font-size: 2.188rem;
    font-weight: 800;
    line-height: 43.013px;
    width: 100%;
}
.cat-p{
    color: rgb(158,158,158);
    text-align: right;
    font-family: fontAr;
    font-size: 1.5rem;
    font-weight: 300;
    line-height: 29.495px;
    direction: rtl;
}
.categories-col-btn{
    height: 20%;
    padding: 0 5%;
}
.cat-btn{
    color: #FFF; 
    font-family: fontAr;
    font-size: 1.25rem; 
    border-radius: 12px;
    height: 50px;
    margin: auto 0;
    background-color: rgba(233, 151, 0, 0.76);
    display: flex;
    align-content: center;
    justify-content: center;
    align-items: center;
    border: none;
    padding: 0% 12% 1.5% 18%;
}
.categories-col-btn::before{
    content: ''; 
    display: inline-block;  
    width: 8px;
    height: 14px;
    background-size: contain; 
    background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="16" viewBox="0 0 10 16" fill="none"><path d="M8.09717 -1.66351e-07L10 1.88L3.81916 8L10 14.12L8.09716 16L2.54292e-07 8L8.09717 -1.66351e-07Z" fill="white"/></svg>');
    position: absolute;
    left: 50px;
    bottom: 40px;
}
.categories-col:hover{
    background-color: #105804;
} 
.categories-col:hover .cat-btn{
    color: #105804;  
    background-color: #FFF;
}
.categories-col:hover .categories-col-btn::before{  
    background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="16" viewBox="0 0 10 16" fill="none"><path d="M8.09717 -1.66351e-07L10 1.88L3.81916 8L10 14.12L8.09716 16L2.54292e-07 8L8.09717 -1.66351e-07Z" fill="green"/></svg>');
}
.categories-col:hover .cat-p{
    color: #fff;  
}
.categories-col:hover .cat-h1{
    color: #fff;  
}

/*     ---- body front page style section about ----      */

.section-about{
    background-color: #FDFFEE;
    padding: 0 0 1px 0;  
}
.section-about-title{
    color: #000;
    text-align: center;
    font-family: 'font2';
    font-size: 3.75rem;
    font-weight: 700; 
    margin: 0;
    padding: 2% 0 0 0;
    line-height: 75.3px;
}
.section-about-row{
    display: flex;
    align-content: flex-start;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    margin: 3% 0 5% 0;
}
.section-about-col{
    width: 16%;
    padding: 0% 1%;
}
.section-about-col-icon{
    width: 50%;
    padding: 0% 1%;
    display: block;
    margin: 0 auto;
}
.section-about-col-title{
    color: #000;
    text-align: center;
    font-family: fontAr;
    font-size: 1.875rem;
    font-weight: 800;
    line-height: 36.868px;
    margin: 0;
    padding: 0;
}
.section-about-col-p{ 
    color: #507B48;
    text-align: center;
    font-family: fontAr;
    font-size: 1.625rem;
    font-weight: 300;
    line-height: 31.953px;
    margin: 10% 0 0 0;
    padding: 0;
}

/*     ---- body front page style section promo ----      */

.section-promo{
    padding: 2% 6% 6% 6%;
}
.section-promo-row{
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    align-items: flex-end;
    align-content: flex-end;
    justify-content: center;
    direction: rtl;
}
.section-promo-col2{
    width: 34%;
    margin: 0% 5%;
    padding: 0 3%;
}
.section-promo-col-title{
    color: #105804;
    text-align: right;
    font-family: fontAr;
    font-size: 3.75rem;
    font-weight: 800;
    line-height: 73.737px;
}
.section-promo-col-title span{
    color: #E99700;
}
.section-promo-col-p{
    color: #000;
    text-align: right;
    font-family: fontAr;
    font-size: 1.625rem;
    font-weight: 300;
    line-height: 31.953px;
}
.section-promo-col1{
    width: 35%;
    margin: 0% 0% 0% 11%;
    padding: 0;
}
.section-promo-form{
    width: 100%;
}
.section-promo-form input{
    width: 100%;
    margin: 3% 0;
    background-color: #FFF;
    border: none;
    border-radius: 30px;
    text-align: right;
    color: rgba(0, 0, 0, 0.30);
    font-family: 'font6';
    font-size: 1.875rem;
    font-weight: 300;
    line-height: normal;
    padding: 0% 4% 3% 0%;
}
.section-promo-form-btn{
    color: #FFF;
    font-family: 'font1';
    font-size: 1.875rem;
    font-weight: 300;
    line-height: normal;
    border-radius: 30px;
    background: #E99700;
    box-shadow: 0px -4px 8px 2px rgba(0, 0, 0, 0.25) inset;
    border: none;
    padding: 0% 15%;
    margin: 5% 0%;
}

/*     ---- body front page style section video ----      */

.section-video{ 
    background-color: #FFF;
}
.section-video-row{
    display: flex;
    width: 90%;
    flex-wrap: wrap;
    align-items: center;
    align-content: center;
    justify-content: center;
    padding: 0 5%;
}
.section-video-col-iframe{
    width: 60%;
    margin: 0;
    padding: 0;
}
iframe{
    width: 100%;
    height: 425px;
    margin: 0;
    padding: 0;
}
.section-video-col-playlist{
    width: 35%;
    border: 1px solid #202020;
    border-radius: 12px;
    max-height: 425px;
    margin: 4% 2%;
    padding: 0; 
    overflow-x: hidden;
}
.playlist-title{
    font-family: "YouTube Sans","Roboto",sans-serif;
    font-size: 1.675rem;
    line-height: 2.8rem;
    font-weight: 700;
    padding-right: 2%;
    color: #000;
    text-align: right;
}
.playlist-sous-title{
    font-size: 1rem;
    font-weight: 400;
    line-height: 0.15rem;
    text-align: left;
    margin: 0;
    padding: 0 4%;
}
#playlist{ 
    width: 100%;
    list-style: none;
    margin: 6% 0;
    padding: 0;
}
.video-active{
    background-color: rgb(221 235 232 / 95%);
} 
#playlist li a{
    margin: 2% 0%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    align-content: center;
    flex-wrap: nowrap;
    width: 100%;
    text-decoration: none;
} 
#playlist li a h1{
    color: #0f0f0f;
    cursor: pointer;
    font-size: 0.938rem;
    font-family: Roboto, Arial, sans-serif;
    margin: 0% 3%;
    width: 100%;
    font-weight: 200;
} 
#playlist li a h3{
    color: #0f0f0f;
    cursor: pointer;
    font-size: 0.813rem;
    margin: 0% 2%;
    font-family: Roboto, Arial, sans-serif;
} 
#playlist li a img{ 
    border-radius: 8px;
} 
#playlist li a p{ 
    font-family: Roboto, Arial, sans-serif;
    color: #606060;
    font-size: 0.75rem;
    margin: 3%;
    width: 100%;
    font-weight: 200;
} 

/*     ---- single product page ----      */

/*     ---- single product page head ----      */

.produit-hero{
    direction: rtl;
}
.produit-hero-row{
    display: flex;
    max-width: 90%;
    width: 90%;
    flex-wrap: wrap;
    justify-content: center;
    align-content: flex-start;
    align-items: flex-start;
    padding: 3% 5%;
}
.produit-hero-social{
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    padding: 46% 0 0 0;
}
.produit-slide{
    width: 50%;
    padding: 3% 0 0 0;
}
#zoom-slider{
    position: relative;
    z-index: 30;
    margin: 0% auto -8% 8.5%;
    width: 41px;
    height: 41px;
}
.mySwiper2{
    margin: 0% auto;
    width: 90%; 
    padding-bottom: 9% !important;
    --swiper-navigation-size: 34px; 
    --swiper-navigation-color: #105804;
}
.mySwiper2 .swiper-slide{
    filter: drop-shadow(4px 4px 5.2px rgba(0, 0, 0, 0.36));
}
.zoom-container {
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.zoom-image {
    transition: transform 0.5s;
    width: 100%;
    height: auto;
}
.zoom-image:hover {
    transform: scale(1.5);
}
.mySwiper2 .swiper-pagination-bullet{
    width: 12px !important;
    height: 12px !important;
    background-color: rgba(16, 88, 4, 0.34) !important;
}
.mySwiper2 .swiper-pagination-bullet-active{
    width: 14px !important;
    height: 14px !important;
    background-color: #105804 !important;
}
.swiper-pagination { 
    padding-bottom: 2%;
}
.mySwiper{
    margin: 0% auto;
    width: 60%; 
}
.mySwiper .swiper-slide{
    flex-shrink: 0;
    width: 100%;
    height: 100%; 
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
}
.mySwiper .swiper-slide img{
    width: 90px;
    height: 90px;
    border-radius: 50px;
}
.produit-info{
    width: 45%;
} 
.produit-title{
    color: #105804;
    text-align: right;
    font-family: "fontAr";
    font-size: 3.438rem;
    font-weight: 800;
    line-height: 86.017px; 
    padding: 0;
    margin: 0;
}
.produit-sous-title{
    color: rgb(103 104 91);
    text-align: right;
    font-family: "fontAr";
    font-size: 1.563rem;
    font-weight: 400;
    line-height: 26.724px;
    padding: 0;
    margin: 3% 0;
}
.produit-preview{
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: flex-start;
    align-items: center; 
    padding: 0;
    margin: 5% 0 0 0;
}
.produit-preview-stars{
    padding: 0;
    margin: auto 0 auto 4%;
}
.produit-preview-valeur{
    color: #000;
    text-align: right;
    font-family: 'font5';
    font-size: 1.5rem;
    font-weight: 900;
    line-height: 37.535px;  
    padding: 0;
    margin:  0;
}
.produit-preview-p{
    color: rgba(0, 0, 0, 0.42);
    text-align: right;
    font-family: 'font5';
    font-size: 1.125rem;
    font-weight: 400;
    line-height: 28.151px;
    text-decoration-line: underline; 
    padding: 0;
    margin:  0 4%;
}
.produit-prix-promo{
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: flex-start;
    align-items: center; 
    padding: 0;
    margin: 4% 0 0 0; 
}
.produit-prix-txt{
    color: #000;
    font-family: 'font5';
    font-size: 3.75rem;
    font-weight: 900; 
    text-transform: uppercase;
    line-height:  36.868px;
    margin: 0; 
}
.produit-prix-txt .madtxt{ 
    font-size: 1.875rem; 
    font-weight: 300; 
    margin: 0; 
}
#priceSaleSelector , #priceRegulerSelector{
    display: none;
}
.produit-prix-remarque{
    color: #E99700;
    text-align: center;
    font-family: "fontAr";
    font-size: 1.375rem;
    font-weight: 300;
    line-height: 27.037px;
    margin: 2% 3% 0 0; 
} 
.produit-prix-avant-promos-txt{
    color: rgba(129, 31, 0, 0.20);
    text-align: right;
    font-family: "font5";
    font-size: 2.875rem;
    font-weight: 300;
    line-height: 56.531px;
    text-transform: uppercase;
    direction: ltr;
    margin: 0;
    width: max-content;
    border-bottom: 3px #F00 solid;
    text-decoration: line-through;
    text-decoration-color: rgba(255, 0, 0, 0.30);
}
.produit-add-cart-info{
    width: 100%;
    display: flex;
    align-content: center;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    margin: 4% 0 0 0;
}
.produit-add-cart-form{
    width: 100%;
    display: flex;
    align-content: center;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
}
.produit-quantity , .produit-poid-selector{
    width: 50%;
    display: flex;
    align-content: center;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
}
.btns-inc-et-des{
    display: grid;
    justify-content: center;
}
.produit-add-cart-btn{
    width: 100%;
    margin: 2% 0; 
}
.produit-add-cart-btn-c{
    width: 45%;
    margin: 2% 0;
    border: none;
    border-radius: 20px;
    background: #105804;
    box-shadow: 0px -4px 8px 2px rgba(0, 0, 0, 0.25) inset;
    color: #FFF;
    font-family: 'font1';
    font-size: 1.625rem; 
    font-weight: 300; 
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.produit-add-cart-btn svg{
    width: 37px;
    height: 37px;
    margin-left: 5%;
}
.produit-info hr{
    border: #000 1px solid;
    opacity: 0.3;
    width: 60%;
    margin-left: 45%;
}
label{
    color: #000;
    text-align: center;
    font-family: "fontAr";
    font-size: 1.375rem;
    font-weight: 400;
    line-height: 27.037px;
    margin: 0 0 0 5%;
}
.next-button,.decrement-button{
    rotate: 180deg;
}
.prev-button,.next-button,.increment-button,.decrement-button{
    width: 24px;
    height: 20px;
    background-color: #e0e3c600;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    display: flex;
    align-content: center;
    justify-content: center;
    align-items: center;
}
.quantity , #itemSelector{
    border: none;
    width: 110px;
    height: 43px;
    border-radius: 9px;
    background: #D9D9D9;
    font-size: 1.25rem;
    padding: 0% 3%;
    text-align: center;
}
#itemSelector option{
    direction: ltr;
}
.produit-descr-title , .produit-descr h2{
    color: rgb(49,50,43);
    text-align: right;
    font-family: "fontAr";
    font-size: 1.563rem;
    font-weight: 800;
    line-height: 30.724px;
    margin: 2% 0 3% 0;
    cursor: pointer;
}
.produit-descr-title::after , .produit-descr h2::after{
    content: ' \25BC'; /* Unicode for the down arrow */
    font-size: 0.8em;
    margin-left: 5px;
}
.produit-descr-p , .produit-descr ul li , .produit-descr ol li, .produit-descr p{
    color: rgb(103,104,91);
    text-align: right;
    font-family: "fontAr";
    font-size: 1.375rem;
    font-weight: 300; 
    line-height: 34.037px;
}
.produit-descr ul li, .produit-descr ol li { 
    margin: 1% 0%;
}
.produit-descr-p , .produit-descr-p, .produit-descr ul , .produit-descr ol , .produit-descr p{  
    display: none;
}
.produit-partage-title{
    color: #000;
    text-align: right;
    font-family: "fontAr";
    font-size: 1.375rem;
    font-weight: 400;
    line-height:  27.037px;
    margin: 0;
}
.produit-partage-icons-row{
    display: flex;
    margin: 2% 0;
}
.produit-partage-icons-col{
    margin-left: 2%;
}
.prod-part-icon svg{
    width: 26px;
    height: 26px;
}
 
#produit-slide-zoom {
    display: none; 
    position: fixed; 
    z-index: 100; 
    left: 0;
    top: 0;
    width: 100%;  
    height: 100%;  
    overflow: auto;  
    background-color: rgba(0,0,0,0.4); 
}
.produit-slide-zoom-content {
    margin: 2% auto 0% auto; 
    height: auto;
    padding: 0px; 
    width: 95%;
    display: flex;
}  
.produit-slide-zoom-content .mySwiper4{  
    width: 20%;
    margin: auto 2%;
    padding: 0;
}  
.produit-slide-zoom-content .mySwiper4 .swiper-wrapper{ 
    display: grid;
    align-items: center;
    justify-content: center;
    align-content: center;
}  
.produit-slide-zoom-content .mySwiper4 .swiper-wrapper .swiper-slide{ 
    width: 100%; 
}   
.produit-slide-zoom-content .mySwiper4 .swiper-wrapper .swiper-slide img{ 
    width: 140px;
    height: 140px;
    border-radius: 70px;
}   
.mySwiper4 .swiper-slide img:hover{ 
    box-shadow: rgba(37, 197, 11, 0.17) 0px -23px 25px 0px inset, rgba(37, 197, 11, 0.15) 0px -36px 30px 0px inset, rgba(37, 197, 11, 0.1) 0px -79px 40px 0px inset, rgba(37, 197, 11, 0.06) 0px 2px 1px, rgba(37, 197, 11, 0.09) 0px 4px 2px, rgba(37, 197, 11, 0.09) 0px 8px 4px, rgba(37, 197, 11, 0.09) 0px 16px 8px, rgba(37, 197, 11, 0.09) 0px 32px 16px;
}
.mySwiper3 {
    margin: 0% auto;
    width: 100%; 
    padding-bottom: 6% !important;
    --swiper-navigation-size: 34px;
    --swiper-navigation-color: #105804;
} 
 .mySwiper3 .swiper-button-prev {
    background-color: #fff;
    border-radius: 72px;
    padding: 1% 1.5% 1% 1.75%;
}
.mySwiper3 .swiper-button-next {
    background-color: #fff;
    border-radius: 72px;
    padding: 1% 1.75% 1% 1.5%;
}
.mySwiper3 .swiper-slide img{ 
    width: 70%;
    margin: 0 auto;
    display: block;
}
.mySwiper3 .swiper-pagination-bullet-active {
    width: 16px !important;
    height: 16px !important;
    background-color: #105804 !important;
}
.mySwiper3 .swiper-pagination-bullet {
    width: 14px !important;
    height: 14px !important;
    background-color: rgba(16, 88, 4, 0.84) !important;
}
#exit-zoom-slider {
    margin: 1% 1% 0 0;
    float: right; 
    cursor: pointer;
    transition: all .2s ease-in-out; 
    width: 3%;
    height: 95%;
} 
#exit-zoom-slider:hover{ 
    transform: scale(1.05);
}
.auter-prods-title{
    color: #105804;
    text-align: center;
    font-family: 'font2';
    font-size: 3.125rem;
    font-weight: 700;
    line-height: 62.75px;
    background-color: #FFFFFF;
    border-top: #000 2px solid;
    border-bottom: #000 2px solid;
    margin: 0;
    padding: 5px 0px 15px 0px;
}
.auter-prods-row{
    width: 90%;
    display: flex;
    flex-wrap: wrap;
    margin: 5%;
}
.auter-prods-row .swiper-slide {
    width: 25%;
    margin-bottom: 5%;
}
.auter-prods-row .slide-row-btn2::before { 
    left: 30px; 
}

/* success notification design */

.MyNotificationS{ 
    position: fixed; /* Stay in place */
    z-index: 100; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
.notification-suc-content{
    background-color: #fefefe;
    margin: 2% auto;
    padding: 1%;
    border: 1px solid #888;
    width: 27%;
    height: auto; 
    border-radius: 15px;
    direction: ltr;
}
.notif-suc-head{
    display: flex;
    align-content: center;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    flex-wrap: wrap;
}
.notif-suc-head-ico{
    width: 26px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    color: #fff;
    background-color: #000;
    padding: 0% 0% 1.5% 0%;
    border-radius: 34px;
    margin: 0;
    height: 20px;
}
.notif-suc-head svg{
    display: flex !important;
    justify-content: center;
    align-content: center;
    align-items: center; 
    width: 35px;
    height: 35px;
    margin: auto; 
    cursor: pointer;
    background-color: #000;
}
.notif-suc-head-txt{
    width: 80%;
}
.notif-suc-head-title{
    color: #25C50B;
    text-align: right;
    font-family: "fontAr";
    font-size: 2.278rem;
    font-weight: 800; 
    margin: 0;
    padding: 0;
}
.notif-produit{ 
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center; 
    flex-wrap: wrap;
    margin: 10% 0 8% 0;
} 
.notif-produit-img{
    width: 30%;
}
.notif-produit-img svg{
    margin-right: -5%;
    display: block !important;
    background-color: #25C50B;
    fill: #fff;
    border-radius: 50%;
    flex-grow: 0;
    flex-shrink: 0;
    padding: 2px;
    float: right;
    margin-bottom: -9%;
    position: relative;
    z-index: 1100;
}
.notif-produit-img img{
    width: 100%;
    height: auto;
    border-radius: 15px;
}
.notif-produit-info{
    width: 65%;
    padding: 0 5% 0 0;
}
.notif-produit-info-title{
    color: #105804;
    text-align: right;
    font-family: "fontAr";
    font-size: 1.75rem;
    font-weight: 800;
    line-height: 37.253px;
    margin: 0 0 10% 0;
}
.notif-produit-info-row-ligne{ 
    display: flex;
    justify-content: flex-end;
    align-content: center;
    align-items: center; 
    flex-wrap: wrap;
} 
.notif-produit-info-row-ligne-label{
    width: 35%;
    color: #000;
    text-align: right;
    font-family: "fontAr";
    font-size: 1.325rem;
    font-weight: 400;
    margin: 0 0 5% 0;
}
.notif-produit-info-row-ligne-valeu{
    width: 50%;
    color: #000;
    text-align: center;
    font-family: "fontAr";
    font-size: 1.328rem;
    font-weight: 800; 
    margin: 0;
    margin: 0 0 5% 0;
}
.notif-btn{
    border-radius: 6.345px;
    background: #25C50B;
    color: #FFF;
    text-align: center;
    font-family: "fontAr";
    font-size: 1.325rem;
    font-weight: 800;
    padding: 1% 1% 2% 1%;
    width: 70%;
    display: block;
    margin: 0 auto 5% auto;
} 

/* sidenav right design */

.sidenav-right{
    display: none;  
    position: fixed;  
    z-index: 200;  
    padding: 0px;  
    left: 0;
    top: 0;
    width: 100%;  
    height: 100%;  
    max-height: 100%;  
    overflow: hidden;  
    background-color: rgb(0,0,0);  
    background-color: rgba(0,0,0,0.4); 
}
.sidenav-right-desck{
    position: absolute;
    z-index: 200;
    padding: 0px;
    right: 57%;
    top: 13%;
    width: 100%;
    height: 877px;
    max-height: 100%;
    overflow: hidden; 
    display: none;
}
.sidenav-right-desck .sidenav-right-body{
    background-color: #FDFFEE;
    margin: auto 0;
    padding: 20px;
    border: 1px solid #888;
    width: 30%;
    float: right;
    height: 85%;
    max-height: 85%; 
}
.sidenav-right-body{
    background-color: #FDFFEE;
    margin: auto 0;
    padding: 20px;
    border: 1px solid #888;
    width: 30%;
    height: 100%;
    max-height: 100%;
    float: left;
}
.sidenav-head{
    display: flex;
    align-items: flex-start;
    justify-content: space-around;
    align-content: flex-start;
    height: 10%;
    margin: 0;
    padding: 0;
}
.sidenav-head-ico{
    width: 10%;
    cursor: pointer;
}
.sidenav-head-ico svg{ 
    width: 100%;
    height: 100%; 
    padding: 0%;
    margin: 0%;
}
.sidenav-head-txt{
    width: 90%;
    padding: 0;
    margin: 0;
}
.sidenav-head-title{ 
    color: #25C50B; 
    text-align: right;
    font-family: "fontAr";
    font-size: 1.75rem; 
    padding: 0;
    margin: 0;
    line-height: 25px;
}
.sidenav-main{
    height: 65%;
    padding: 0;
    margin: 0;
    overflow-y: auto;
}
.sidenav-footer{
    height: 25%;
    padding: 0;
    margin:2% 0 0 0; 
}
.sidenav-main-ligne{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    align-content: center;
    width: 100%;
    border-bottom: #000 solid 1px;
}
.sidenav-main-ligne-img{
    width: 26%;
}
.sidenav-main-ligne-img img{
    width: 96%;
    margin: 5% auto;
    border-radius: 6px;
    height: auto;
}
.sidenav-main-ligne-info{
    width: 65%;
    margin: 0 5% 0 0;
}
.sidenav-main-ligne-title{
    color: #E99700; 
    text-align: right;
    font-family: "fontAr";
    font-size: 1.25rem; 
    font-weight: 800; 
    margin: 0;
}
.sidenav-main-row .sidenav-main-ligne:nth-child(2) .sidenav-main-ligne-title,.sidenav-main-row .sidenav-main-ligne:nth-child(4) .sidenav-main-ligne-title,.sidenav-main-row .sidenav-main-ligne:nth-child(6) .sidenav-main-ligne-title,.sidenav-main-row .sidenav-main-ligne:nth-child(8) .sidenav-main-ligne-title{
    color: #105804;  
}
.sidenav-label-info{
    font-size: 1.065rem; 
    margin: 0 0 1% 0;
}
.sidenav-value-info{
    font-size: 1.075rem; 
    margin: 0 0 1% 0;
}
.sidenav-totals{
    display: flex;
    justify-content: space-between;
    align-content: center;
    align-items: center;
    margin: 0;
    color: #000;
    text-align: center;
    font-family: "fontAr"; 
    font-weight: 800; 
    border-bottom: #000 solid 1.5px;
}
.sidenav-total-price{
    font-size: 1.5rem;
}
.sidenav-total-label{
    font-size: 1.45rem;
}
.sidenav-footer-btns{
    display: flex;
    justify-content: space-between;
    align-content: center;
    align-items: center;
}
.sidenav-footer-btn-checkout{
    color: #FFF;
    text-align: center;
    font-family: "fontAr";
    font-size: 1.325rem; 
    font-weight: 800;
    line-height: 15.43px;
    border-radius: 8px; 
    background-color: #25C50B;
    padding: 2% 10% 3% 10%;
    margin: 3% 0 0 0;
}
.sidenav-footer-btn-cart{
    color: #105804; 
    text-align: center;
    font-family: "fontAr";
    font-size: 1.325rem; 
    font-weight: 800;
    line-height: 15.43px;
    border-radius: 8px; 
    background-color: #F1C97E;
    padding: 2% 5% 3% 5%;
    margin: 3% 0 0 0;
}
.alert-warning{
    text-align: right;
    font-size: 1.35rem;
    font-weight: 400;
}

/* single design */

.container-single{
    display: block;
    max-width: 80%;
    width: 80%;
    margin: 0;
    padding: 2% 10%;
    direction: rtl;
    background-color: #fff;
}
.single-title{
    color: #25C50B;
    text-align: right;
    font-family: "fontAr";
    font-size: 1.875rem;
    font-weight: 800;
    line-height: 26px;
    margin: 0 0 1% 0;
}
.single-sous-title{
    color: rgba(0, 0, 0, 0.40);
    text-align: right;
    font-family: 'font3';
    font-size: 1rem; 
    font-weight: 400; 
    margin: 0 0 1% 0;
}
.single-hr{
    border: #000 0.5px solid;
}
.single-content{
    color: #000;
    font-family: "fontAr";  
    line-height: 172.9%;
    text-align: right;
}
.single-content .wp-block-heading{ 
    font-size: 1.25rem; 
    font-weight: 800; 
}
.single-content p strong{ 
    font-size: 1.125rem; 
    font-weight: 400; 
}
.single-content .single-remarque{
    color: rgba(0, 0, 0, 0.40); 
    font-size: 1.125rem; 
    font-weight: 800; 
}
.single-content p{ 
    font-size: 1.125rem; 
    font-weight: 300; 
}

/* single categories products style */
/* single categories products head style */

.categorie-body{
    background-color: #fff;
    width: 100%;
    max-width: 100%;
    border-bottom: #0f0f0f solid 1px;
}
.categorie-head-title-txt{
    font-family: 'font2';
    font-size: 3.125rem;
    font-weight: 700;
    line-height: 63px; 
    text-align: center;
    color:#105804; 
}
.categorie-head-title{
    border-bottom: #0f0f0f 1px solid;
    padding-top: 3%;
}
.category-menu{
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    max-width: 100%;
    justify-content: space-around;
    align-content: center;
    align-items: center;
}
.category-menu-item{
    font-family: "fontAr";
    font-size: 1.313rem;
    font-weight: 400;
    line-height: 26px;
    letter-spacing: 0em;
    text-align: center;
    color: #fff;
    background-color:#00000066;
    border-bottom-left-radius: 22px;
    border-bottom-right-radius: 22px;
    padding: 0.5% 2% 0.75% 2%;
}
.category-menu-item:hover{ 
    background-color:#105804; 
}
.current-category{ 
    background-color:#105804; 
}

/* single categories products body style */

.products-row{
    display: flex;
    flex-wrap: wrap;
    width: 90%; 
    justify-content: flex-end;
    align-content: flex-start;
    align-items: flex-start;
    padding: 5%;
}
.product-item{
    width: 21%;
    margin: 1% 2%;
}
.product-item-img{
    position: relative;
    width: 100%;
}
.product-item-img img{
    width: 100%;
    height: auto;
}
.product-item-link svg{
    background-color: #fff;
    padding: 24% 30%;
    border-radius: 10px;
}
.product-item-btn{
    position: absolute;
    bottom: 4%;
    right: 11%;
    z-index: 20;
}
.product-item-btn-count{ 
    color: #FFF;
    text-align: center;
    font-family: 'font2';
    font-size: 0.825rem;
    font-weight: 900;
    background-color: red;
    border-radius: 52px;
    padding: 0.25px 8px;
    position: absolute;
    bottom: 19%;
    right: 19%;
    z-index: 90;
}
.product-item-info{
    display: flex;
    align-content: flex-start;
    align-items: flex-start;
    justify-content: space-between;
    height: max-content;
    flex-wrap: wrap;
}
.prod-item-title{
    font-family: "fontAr";
    font-size: 1.475rem;
    font-weight: 400;
    line-height: 30px; 
    width: 70%;
    text-align: right;
    color: #000;
}
.prod-item-title:hover{
    color: #105804;
}
.prod-item-prix{
    font-family: "fontAr";
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 29px; 
    text-align: left;
    color: #105804;
    width: 30%;
}
.woocommerce-pagination ul{
    display: flex;
    width: 50%;
    align-content: center;
    justify-content: center;
    align-items: center;
    margin: 0% 25%;
    list-style: none;
    direction: rtl;
}
.woocommerce-pagination ul li{ 
    background-color: #105804; 
    margin: 0% 2% 10% 2%;
    width: 55px;
    height: 55px;
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center; 
}
.woocommerce-pagination ul li .current {
    background-color:  #F1C97E; 
    color: #105804;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;  
    font-size: 1.275rem;
}
.woocommerce-pagination ul li a{ 
    color: #fff; 
    font-size: 1.275rem;
}

/*    ---- cart empty style ----    */

.wc-empty-cart-message{
    width: 70%;
    display: block;
    margin: 0 auto;
    font-size: 1.45rem;
}
.wc-backward{
    border-radius: 6.345px !important;
    background: #25C50B !important;
    color: #FFF !important;
    text-align: center !important;
    font-family: "fontAr" !important;
    font-size: 1.325rem !important;
    font-style: normal !important;
    font-weight: 800 !important;
    padding: 1% !important;
    width: 15% !important;
    display: block !important;
    margin: 0 auto 5% auto !important;
} 

/*     ---- login & register & restor password form user style ----      */
/*     ---- login form user head style ----      */

.div-login{
    direction: rtl;
    margin: 5% 0%;
    width: 100%;
} 
.blue-contenair{
    width: 40%;
    margin: 2% 25%;
    background-color: #F6F5F5;
    box-shadow: 2px 2px 9px 0px #00000040;
    border-radius: 22px;
    padding: 2% 5%;
}
.form-login-title-txt{
    font-family: "fontAr";
    font-size: 2.313rem;
    font-weight: 800; 
    letter-spacing: 0em;
    text-align: center;
    color: #1976D2;
}
.fr-log-user-head{
    display: flex;
    align-items: center;
    justify-content: space-between;
    align-content: center;
    margin: 0% 1% 8% 1%;
}
.fr-log-tit{
    font-family: "fontAr";
    font-size: 1.875rem;
    font-weight: 400;
    line-height: 37px; 
    text-align: center; 
}
.fr-log-tit-ins{
    font-family: "fontAr";
    font-size: 1.125rem;
    font-weight: 400; 
    letter-spacing: 0em;
    text-align: center;
    color: #00000066; 
    cursor: pointer;
}
.woo-form-step2{
    display: none;
}
.woo-next-btn{ 
    color: #fff;
    font-family: "fontAr";
    font-size: 1.25rem;
    font-weight: 800;
    line-height: 25px;
    text-align: center;
    border: none;
    padding: 1% 5% 2% 5%;
    border-radius: 12px;
    display: block;
    cursor: pointer;
}
#woo-next-btn{
    margin: 5% auto 2% 0%;
    background-color: #1976D2;
}
#woo-prev-btn{
    margin: 5% 0%;
    background-color: #00000066; 
}
.form-inscript-user .form-login-woocommerce{
    border-bottom: #000 1px solid;
    padding: 2%;
}
.form-login-woocommerce label , .form-login-woocommerce label, .woocommerce-ResetPassword label{
    font-family: "fontAr";
    font-size: 1.313rem;
    font-weight: 400;
    line-height: 26px; 
    text-align: right; 
    width: 100%; 
}
.woocommerce-ResetPassword label { 
    width: 95%;
    padding-right: 5%;
    margin-bottom: 2%;
}
.form-login-woocommerce input , .woocommerce-ResetPassword input{
    font-family: "fontAr";
    font-size: 1.125rem;
    font-weight: 300;
    line-height: 22px; 
    width: 96%;
    height: 65px;
    border-radius: 22px;
    border: #000 0.5px solid;
    margin: 2% 0%;
    padding: 0% 2% 1.25% 2%;
}
.btns-step2-row{
    display: flex;
    align-content: center;
    justify-content: space-between;
    align-items: center;  
}
.custom-login-button{ 
    color: #fff;
    font-family: "fontAr";
    font-size: 1.25rem;
    font-weight: 800;
    line-height: 25px;
    text-align: center;
    border: none;
    padding: 1% 5% 2% 5%;
    border-radius: 12px;
    display: block;
    margin: 5% auto 2% 0%;
    background-color: #1976D2;
    cursor: pointer;
}
.woocommerce form .form-row {
    width: 100%;
}
.password-option{ 
    display: flex;
    align-content: center;
    justify-content: space-between;
    align-items: center; 
}
.password-option label{ 
    width: 50%;
    display: flex;
    align-content: center;
    justify-content: flex-start;
    align-items: center; 
}
.password-option label input {
    width: 5%;
    margin-left: 2%;
}
.soc-form{
    margin: 1%;
}
.soc-form-head{
    display: flex;
    width: 100%;
    align-content: center;
    justify-content: center;
    align-items: center;
    margin-top: 3%;
}
.soc-form-title{
    font-family: "fontAr";
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 25px;
    letter-spacing: 0em;
    text-align: center; 
    padding: 0 1%;
    width: 10%;
}
.soc-lign{
    border-bottom: 1px solid #000;
    width: 45%;
}
.soc-form-row{
    display: flex; 
    align-content: center;
    justify-content: center;
    align-items: center;
}
.soc-form-btn-ico{
    background-color: #D1D1D1;
    border: none;
    border-radius: 11px;
    margin: 1% 2%;
    Width: 64px;
    Height: 46px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.soc-form-p{
    font-family: "fontAr";
    font-size: 1.25rem;
    font-weight: 300;
    line-height: 33px; 
    text-align: center;
    color: #ADA7A7;  
    margin: 5% 0%;  
}
.soc-form-link{
    color: #000;
    font-weight: 800;
}
/*     ---- cart page style ----      */
/*     ---- cart page head style ----      */

.back-cart{ 
    direction: rtl;
    background-color: #FDFFEE; 
}
.cart-head{
    display: flex;
    width: 80%;
    padding: 1% 10% 4% 10%;
    justify-content: space-between;
    align-content: center;
    align-items: center;
    direction: rtl;
}
.cart-head h1{
    font-family: "fontAr";
    font-size: 25px;
    font-weight: 800;
    line-height: 2.438rem;  

}
.shop-table-head{
    display: flex;
    justify-content: space-between;
    align-content: center;
    align-items: center; 
}
.table-prod-head-item{
    font-family: "fontAr";
    font-size: 1.375rem;
    font-weight: 800;
    line-height: 27px; 
    text-align: right;
    color: #E99700; 
    border: none;
}
.woocommerce table.shop_table {
    border: none; 
    margin: 0 0 24px -1px;
    text-align: right;
    width: 100%;
    border-collapse: separate;
    border-radius: 5px;
}
.woocommerce table.shop_table  tbody tr:first-child td , .woocommerce table.shop_table  tbody tr:last-child td{
    border-top: none;
}
.woocommerce table.shop_table  tbody tr td{
    border-top: 1px solid #000;
}
.cart-body{
    width: 84%;
    max-width: 84%;
    padding: 0 8% 8% 8%;
}
.cart-body-head-desk , .cart-body-body-desk .cart-body-body-item {
    display: flex;
    justify-content: flex-start;
    align-content: center;
    align-items: center;
    width: 100%;
    direction: rtl;
}
.product-thumbnail{
    width: 8%;
    padding: 1% 2%;
}
.product-name{
    width: 15%;
    padding: 2%;
}
.product-name a{
    font-family: "fontAr";
    font-size: 22px;
    font-weight: 800;
    text-align: right;
    color: #105804;
    width: 15%;
}
.product-price{
    width: 15%;
}
.product-quantity{
    width: 19%;
}
.product-poid{
    width: 17%;
}
.poidcart{
    border: none;
    width: 126px;
    height: 43px;
    border-radius: 9px;
    background: #D9D9D9;
    font-size: 1.025rem;
    text-align: center;
}
.product-subtotal{
    width: 17%;
}
.product-subtotal {
    font-family: "fontAr";
    font-size: 1.375rem;
    font-weight: 800;
    line-height: 27px; 
}
.product-remove{ 
    width: 5%;
}
.woocommerce table.shop_table tbody tr .product-thumbnail img{
    width: 98%;
    padding: 1%;
}
.cart-body-body-desk{
    overflow-y: scroll;
    max-height: 420px;  
    width: 100%;
    direction: ltr;
} 
.cart-body-body-desk::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 10px;
    background-color: #F5F5F5;
} 
.cart-body-body-desk::-webkit-scrollbar {
    width: 12px;
    background-color: #F5F5F5;
} 
.cart-body-body-desk::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    background-color: #555;
}
.woocommerce-cart-form__cart-item .product-price{
    font-family: "fontAr";
    font-size: 20px;
    font-weight: 400;
    text-align: center;
}
.woocommerce-cart-form__cart-item .product-subtotal{
    font-family: "fontAr";
    font-size: 22px;
    font-weight: 800;
    text-align: center;
}
.woocommerce a.remove:hover{
    background-color: #ffffff00;
}
.increment-button-cart, .decrement-button-cart {
    width: 24px;
    height: 24px;
    background-color: #ffffff00 !important;
    border: none !important;
    padding: 0 !important;
    margin: 0;
    cursor: pointer;
    display: flex;
    align-content: center;
    justify-content: center;
    align-items: center;
}
.increment-button-cart svg, .decrement-button-cart svg{
    width: 25px;
    height: 25px;
    margin-right: -4%;
} 
.decrement-button-cart{
    rotate: 180deg;
}
.cart-body-body-item .product-quantity {
    display: flex;
    align-content: flex-end;
    justify-content: flex-start;
    align-items: flex-end;
    flex-direction: row; 
}
.woocommerce .quantity .qty {
    width: 100%;
    text-align: center;
    height: 85%;
    margin: 0;
    background-color: transparent;
    border: none;
    font-size: 1.125rem;
}
.td-coup{
    width: 100%;
    display: flex;
    align-content: center;
    justify-content: center;
    align-items: center;
    flex-direction: row;
}
.td-coup .produit-hero-social{
    padding: 0;
}
.td-coup .produit-hero-social svg {
    width: 18px;
    height: 18px;
}
.td-coup-right {
    width: 90%; 
}
.td-coup-right .sidenav-totals{
    margin: 1% auto;
    width: 60%;     
}
.cart-btn-chek .sidenav-footer-btn-checkout {
    font-size: 1.375rem; 
    border-radius: 14px;
    padding: 2% 8% 2.5% 8%;
    margin: 3% auto 1% auto;
    display: block;
    width: fit-content;
}
.coupon{
    margin: 5% auto 3% auto;
    width: 60%;
    padding: 0 2%;
    background-color: #ffffff;
    border: #000 solid 1px;
    border-radius: 18px; 
    display: flex;
    align-content: center;
    justify-content: center;
    align-items: center;
}
.coupon input{
    margin: 1% auto;
    width: 80%;
    padding: 2% 5%;
    font-family: "fontAr";
    font-size: 1.25rem;
    font-weight: 300;
    line-height: 25px;  
    border: none;
}
.coupon input[type=text]:focus{
    border: none;
}
.coupon button{
    margin: 1% auto !important;
    width: 10% !important;
    background-color: #F1C97E !important;
    border-radius: 10px !important; 
    font-size: 1.375rem !important;
    font-weight: 400 !important;
    line-height: 27px !important;
    color: #fff !important;
} 
.cart-body-body-mobile{
    display: none;
}
/*  ------ style de checkout without login ------  */
.wc-block-must-login-prompt{
    text-align: center;
    font-family: 'font3';
    font-size: 1.525rem;
    font-weight: 400;  
    padding: 0;
    margin: 5% auto;
    direction: rtl;
}
.wc-block-must-login-prompt a {
    color: #FFF;
    text-align: center;
    font-family: "fontAr";
    font-size: 1.525rem;
    font-weight: 800;
    line-height: 15.43px;
    border-radius: 8px;
    background-color: #25C50B;
    padding: 5% 0%;
    margin: 6% auto;
    width: 100%;
    display: block;
    direction: rtl;
}

/* Start Loading Cart Styles. Author: Mohamed Abidar */
.back-cart.loading {
    position: relative;
}
.back-cart.loading::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #ffffffbb;
    cursor: not-allowed;
    z-index: 10;
}
/* End Loading Cart Styles. Author: Mohamed Abidar */

.woocommerce-checkout .checkout-order-review .woocommerce-checkout-payment {
    display: none;
}
.woocommerce-checkout .main-form .tab.hidden {
    display: none;
}
#customer_details .col-1,
#customer_details .col-2 {
    margin-bottom: 20px;
}
#customer_details .wrapper {
    padding: 25px;
    border-radius: 20px;
    background-color: #AAA4A41C;
}
@media (min-width: 768px) {
    #customer_details .checkout-order-review .wrapper {
        max-width: 400px;
    }
    #customer_details .col-1 .checkout-privacy-info {
        display: none;
    }
}
@media (max-width: 767px) {
    #customer_details {
        display: flex;
        flex-direction: column;
    }
    #customer_details .col-1 { 
        order: 2; 
    }
    #customer_details .col-2 { 
        order: 1; 
    }

    #customer_details .col-1 .checkout-privacy-info {
        display: block;
    }
    #customer_details .col-2 .checkout-privacy-info {
        display: none;
    }
}
.woocommerce-checkout label {
    font-size: 1.1rem;
    text-align: start;
    font-weight: lighter;
}
.woocommerce-checkout form .form-row input.input-text {
    padding: 10px 10px;
    border-radius: 10px;
    border: 1px solid #ccc;
}
.woocommerce-checkout .woocommerce-billing-fields h3,
.woocommerce-checkout #order_review_heading  , #payment h3{
    color: #25C50B;
    margin-top: 0;
    margin-bottom: 5px;
    font-size: 1.5rem;
}
.woocommerce-checkout .woocommerce-billing-fields h4 , #payment h4{
    margin-top: 0;
    font-size: 1.3rem;
    font-weight: bold;
}
.woocommerce-checkout .woocommerce {
    background-color: #fff;
}
.woocommerce-checkout table.shop_table tbody tr td:first-child {
    width: 100%;
}
.or-login {
    text-align: center;
    position: relative;
    margin: 20px 0;
}
.or-login::before,
.or-login::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 45%;
    height: 1px;
    background-color: #ccc;
}
.or-login::before {
    right: 0;
}
.or-login::after {
    left: 0;
}
.checkout-social-login-wrap {
    display: flex;
    justify-content: center;
}
.woocommerce-checkout .container-single {
    padding-top: 10px;
}
.woocommerce-checkout .tab-buttons {
    margin-top: 20px;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.woocommerce-checkout .tab-buttons button {
    display: inline-block;
    padding: 8px 25px 13px;
    border-radius: 8px;
    background-color: #777;
    font-family: inherit;
    font-size: 1rem;
    color: #fff;
    line-height: 1;
    border: none;
    cursor: pointer;
}
.woocommerce-checkout .tab-buttons button:hover {
    opacity: .85;
}
.woocommerce-checkout .tab-buttons .tab-next {
    background-color: #25C50B;
}
.woocommerce-checkout .tab-buttons .tab-prev {
    visibility: hidden;
}
.woocommerce-checkout #place_order {
    visibility: hidden;
}
.woocommerce-checkout .form-row.place-order {
    width: auto;
}
.checkout-privacy-info {
    color: #777;
    font-size: 0.9rem;
    margin-top: 10px;
}
.woocommerce-checkout .woocommerce-info {
    border: none;
    margin-bottom: 0;
    background-color: #fff;
}
.woocommerce-checkout .woocommerce-info::before,
.woocommerce-checkout .woocommerce-info::after {
    display: none;
}
.woocommerce-checkout-review-order-table .cart-subtotal {
/* .woocommerce-checkout-review-order-table .cart-fee { */
    display: none;
}
.woocommerce-checkout .woocommerce-account-fields {
    display: none;
}
.woocommerce-checkout #billing_country_field {
    display: none;
}
/* End Checkout. Author: Mohamed Abidar */
.woocommerce{
    direction: rtl;
}
.woocommerce .woocommerce-info{
    padding: 1em 0em 1em 0em;
    margin: 0 0 0.25em;
    position: relative;
    background-color: #ffffff;
    color: #515151;
    border-top: none;
    list-style: none outside;
    width: auto;
    word-wrap: break-word;
}
.woocommerce-info::before {
    display: none;
}
.woocommerce .woocommerce-info a{ 
    color: #ADA7A7;
    text-decoration: underline; 
}
#customer_details .col-2 { 
    margin: 0% 1%;
    width: 36%;
}
#customer_details .col-1 {  
    margin: 0% 6% 0% 1%;
    width: 55%;
}
.col1-set{
    width: 100%;
    display: flex;
}
.checkout-privacy-info a{
    color: #000;
    text-decoration: underline;
}
.my-order-head{
    display: flex;
    align-content: center;
    align-items: center;
    justify-content: center;
}
.my-order-head h3{
    width: 50%;
}
.my-order-head a{
    width: 50%;
    text-align: left;
    margin-left: 5%;
    color: #797878;
    font-size: 1.125rem;
}
.woocommerce .produit-prix-remarque { 
    font-size: 1.175rem;
    font-weight: 100; 
}
#order_review tfoot th,#order_review tfoot td{
    border-top: 2px solid rgba(0, 0, 0,.8);
}
.coupon-discount{
    display: none;
}
.cart_item td{
    border-top: none !important;
}
/* tfoot .fee{
    display: none;
} */
.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea {
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    outline: 0;
    line-height: normal;
    height: 45px;
    border-radius: 13px;
    border: solid 1px #000;
    font-size: 1.125rem;
    font-family: "fontAr";
    padding: 0 3% 1% 3%;
    direction: rtl;
}
.woocommerce-checkout #payment div.form-row {
    padding: 1em;
    display: none;
}
.woocommerce-checkout #payment {
    background: #e9e6ed00;
    border-radius: 5px;
}
.woocommerce-checkout #payment div.payment_box { 
    display: none;
}
.woocommerce-checkout #payment ul.payment_methods li {
    width: 91%;
    line-height: 2;
    text-align: right;
    font-weight: 400;
    border: solid 1px #000;
    margin: 2% 0%;
    background-color: #fff;
    padding: 1% 4%;
    border-radius: 13px;
}
#payment p{
    padding: 0;
    margin: 8% 0 0 0;
    font-family: "fontAr";
    line-height: 5px;
    font-weight: 100;
}
.woocommerce-checkout #payment ul.payment_methods { 
    border-bottom: none; 
    margin-bottom: 25%; 
}
.woocommerce form .form-row .required {
    color: black; 
}
/* thank you page */ 
.woocommerce-order{
    margin: 5% 15%;
    background-color: #F6F5F5;
    padding: 2% 4%;
    border-radius: 22px;
}
.woocommerce-order .woocommerce-thankyou-order-received{
    color: #25C50B;
    font-size: 3.688rem;
    text-align: center;
    font-family: 'fontAr';
    line-height: 85px;
    margin: 0 0 2% 0;
    padding: 0;
}
.woocommerce-order hr{ 
    border: 2px solid #000;
    width: 10%;
    margin: 3% auto;
}
.num_order{
    font-family: "fontAr";
    font-size: 1.875rem;
    font-weight: 800;
    line-height: 55px;
    text-align: center;
    margin: 0% 0% 3% 0%;
}
.woocommerce-order-details .product-name a {
    font-family: "fontAr";
    font-size: 1.25rem;
    font-weight: 800;
    text-align: right;
    color: #000;
    width: 15%;
}
.order_details thead th {
    color: #E99700;
    font-weight: 700;
    padding: 9px 12px;
    font-size: 1.5rem;
    text-align: right;
    width: 100%;
}
.order_details{
    width: 65% !important;
    margin: 0% auto !important;
}
.order_details td{
    border: none !important;
}
.woocommerce-order-details .product-quantity {
    display: none;
}
.woocommerce table.shop_table tfoot th,.woocommerce table.shop_table tfoot td{
    font-weight: 700;
    border: none;
    padding-top: 10%;
}
.woocommerce-order ul{
    display: flex;
    align-content: center;
    justify-content: center;
    align-items: center;
    width: 65% !important;
    margin: 0 auto !important;
    flex-wrap: wrap;
    padding: 0;
}
.woocommerce-order ul li{ 
    width: 90%;
    border: none !important;
    display: flex;
    align-content: center;
    justify-content: space-between;
    align-items: center;
    padding: 1% 0% !important;
    font-size: 1.175rem !important;
    margin: 0% auto !important;
}
.woocommerce-order ul li strong{  
    font-size: 1.135rem !important;
    color: #979797;
    font-weight: 100;
}
.prixTotalOrd{
    display: flex;
    align-content: center;
    justify-content: space-between;
    align-items: center;
    width: 45% !important;
    margin: 5% auto 0 auto !important;
    flex-wrap: wrap;
    border-bottom: 3px solid #000;
    padding-bottom: 2%;
}
.prixTotalOrd h3{
    font-size: 1.638rem;
    direction: ltr;
}
.go-home{
    display: flex;
    justify-content: center;
    margin: 5% auto 0% auto;
}
.go-home button{
    border: none;
    border-radius: 13px;
    background-color: rgba(0, 0, 0, 0.4);
    color: #fff;
    font-size: 1.375rem;
    padding: 0% 2% 1% 2% ;
    font-family: "fontAr";
    cursor: pointer;
}
.print-order{
    display: flex;
    margin: 5% auto 1% auto;
    justify-content: center;
    width: fit-content;
    border-top: 2px solid #000;
    padding: 0.5% 2%;
    font-size: 1.275rem;
    color: #979797;
    cursor: pointer;
}
@media print {
    header, footer {
      display: none !important;
    }
    .woocommerce-order .woocommerce-thankyou-order-received{ 
      font-size: 2.088rem; 
    }
    .order_details {
        width: 100% !important;
        margin: 0% auto !important;
    }
    .prixTotalOrd { 
        width: 100% !important;
        margin: 5% auto 0 auto !important; 
    }
    .woocommerce-order ul{ 
        width: 100% !important;
        margin: 0 auto !important; 
    }
    .go-home{
        display: none;
    }
    .print-order{
        display: none;  
    }
}

.section-blog{
    background-image: url(../img/back-blog.jpg);
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
    margin: 0;
    width: 80%;
    padding: 5% 10%;
    direction: rtl;
}
.blog-title{
    color: #fff;
    margin: 0;
    padding: 0;
    font-size: 3.125rem;
}
.blog-sous-title{
    color: #fff;
    margin: 0;
    padding: 0;
    font-size: 2.25rem;
    font-family: "fontAr";
    font-weight: 100;
}
.article-search-form{
    display: flex;
    background-color: #fff;
    padding: 0.5%;
    border-radius: 50px;
    width: 32%;
    align-content: center;
    justify-content: center;
    align-items: center;
    margin: 5% 0% 0% 0%;
}
.search_for{
    display: flex;
    align-content: center;
    justify-content: center;
    align-items: center;
    margin: 0 4%;
    width: 68%;
}
.search_for svg{
    width: 24px;
    height: 24px;
}
.search_for input{
    font-size: 1.375rem;
    color: #292D32;
    background-color: transparent;
    border: none;
    font-family: "fontAr";
    width: 85%;
    padding: 0% 3% 0% 0%;
}
.article-search-form button{
    background-color: #25C50B;
    border: none;
    font-size: 1.375rem;
    color: #fff;
    font-family: "fontAr";
    padding: 1% 9%;
    border-radius: 50px;
} 
.arch-body{
    direction: rtl;
    max-width:  1920px;
}
.archive-section1{
    margin: 3%;
    padding: 0;
}
.archive-section-title{
    font-family: "fontAr";
    font-size: 2.125rem;
    margin: 0 5% 0 0;
    padding: 0;
}
.row-pop-arts{
    margin: 0;
    padding: 0;
}
.col-pop-art{
    margin: 1% 0;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    align-content: flex-start;
}
.popular-post{
    width: 40%;
    margin: 0% 5%;
}
.post-thumbnail a img{
    width: 100%;
    margin: 0;
    padding: 0
}
.post-details{
    margin: 0;
    padding: 0;
}
.post-details-info{
    display: flex;
    justify-content: space-between;
    align-content: center;
    align-items: center;
    margin: 0;
    padding: 0;
}
.post-details-info-right{
    display: flex;
    justify-content: flex-start;
    align-content: center;
    align-items: center;
    margin: 0;
    opacity: 0.4;
    padding: 0;
    width: 60%;
}
.post-author{ 
    font-family: "fontAr";
    padding: 0 0 0 1%;
    font-size: 1.025rem;
}
.post-date{
    font-family: "fontAr";
    padding: 0 1% 0 0;
    font-size: 1.125rem;
}
.post-details-info-left{
    display: flex;
    align-content: center;
    align-items: center;
    margin: 0;
    padding: 0;
    opacity: 0.4;
    width: 40%;
    justify-content: flex-end;
}
.post-details-info-left svg{
    width: 22px;
    height: 22px;  
    padding: 0 2% 0 0;
}
.post-details-info-left .post-views{ 
    font-family: "fontAr";
    font-size: 1.125rem;
}
.post-title {
    margin: 5% 0 0 0;
    padding: 0;
    font-family: "fontAr";
    font-size: 1.75rem;
    line-height: 13px;
}
.post-title a{
    color: #8C9609;
}
.post-excerpt{
    margin: 5% 0 0 0;
    padding: 0;
    font-family: "fontAr";
    font-size: 1.25rem;
    line-height: 34px;
    font-weight: 100;
    min-height: 105px;
}
.read-more{
    background-color: #C1C1C1;
    color: #ffffff;
    font-size: 0.985rem;
    padding: 0% 3% 1% 3%;
    width: fit-content;
    border-radius: 30px;
    line-height: 30px;
    float: left;
}
.read-more:hover{
    background-color: #8C9609; 
}
.archive-section2,.archive-section3{
    margin: 3% 6%;
    padding: 0;
}
.archive-section2 .archive-section-title {
    margin: 6% 2% -4% 0%; 
}
.mySwiperresArt .swiper-wrapper .swiper-slide .popular-post {
    width: 90%;
    margin: 0% 5%;
}
.mySwiperresArt .swiper-wrapper .swiper-slide .post-details-info-right { 
    width: 90%;
}
.mySwiperresArt .swiper-wrapper .swiper-slide  .post-title {
    margin: 10% 0 0 0;
    font-size: 1.575rem; 
}
.mySwiperresArt .swiper-wrapper .swiper-slide .post-excerpt { 
    font-size: 1.025rem; 
}
.mySwiperresArt .swiper-wrapper .swiper-slide .read-more { 
    font-size: 0.95rem;
    padding: 0% 5% 1% 5%; 
}
.mySwiperresArt .swiper-wrapper{
    padding: 6% 0% 0% 0%;
}
.mySwiperresArt .swiper-container {
    position: relative;
} 
.mySwiperresArt .swiper-button-prev,.mySwiperresArt  .swiper-button-next {
    position: absolute;
    top: 20px;
    z-index: 10;
    color: #000;
    background-color: #838383;
    border-radius: 56px;
} 
.mySwiperresArt .swiper-button-prev {
    right: 92% !important;
    padding: 6.5px 10px 6.5px 13px;
} 
.mySwiperresArt .swiper-button-next {
    left: 1% !important;
    padding: 6.5px 13px 6.5px 10px;
}
.mySwiperresArt{
    --swiper-navigation-size: 24px;
    --swiper-navigation-top-offset: 50%;
    --swiper-navigation-sides-offset: 10px;
    --swiper-navigation-color: var(--swiper-theme-color);
}
.archive-section3 .archive-section-title {
    margin: 1% 0 2% 0; 
}
.mySwiperartsarch .swiper-wrapper .swiper-slide .post-details-info-right { 
    width: 90%;
}
.mySwiperartsarch .swiper-wrapper .swiper-slide  .post-title {
    margin: 10% 0 0 0;
    font-size: 1.575rem; 
}
.mySwiperartsarch .swiper-wrapper .swiper-slide .post-excerpt { 
    font-size: 1.025rem; 
}
.mySwiperartsarch .swiper-wrapper .swiper-slide .read-more { 
    font-size: 0.95rem;
    padding: 0% 5% 1% 5%; 
} 
.mySwiperartsarch .swiper-wrapper{
    padding: 0% 0% 8% 0%;
}
.mySwiperartsarch{
    --swiper-pagination-color: #8C9609;
    --swiper-pagination-fraction-color: inherit;
    --swiper-pagination-progressbar-bg-color: rgb(0 0 0 / 0%);
    --swiper-pagination-progressbar-size: 9px;
    --swiper-pagination-bullet-size: 30px;
    --swiper-pagination-bullet-width: 34px;
    --swiper-pagination-bullet-height: 34px;
    --swiper-pagination-bullet-inactive-color: #000; 
    --swiper-pagination-bullet-inactive-opacity: 1;
    --swiper-pagination-bullet-opacity: 1;
    --swiper-pagination-bullet-horizontal-gap: 4px;
    --swiper-pagination-bullet-vertical-gap: 6px;
}
.mySwiperartsarch .swiper-pagination { 
    direction: ltr;
}
.mySwiperartsarch .swiper-pagination-bullet {
    width: var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 8px));
    height: var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 8px));
    display: inline-block;
    border-radius: var(--swiper-pagination-bullet-border-radius, 50%);
    background: #0000;
    opacity: var(--swiper-pagination-bullet-inactive-opacity, .2);
}
.mySwiperartsarch .swiper-pagination-bullet-active {
    opacity: var(--swiper-pagination-bullet-opacity, 1);
    background: var(--swiper-pagination-color, var(--swiper-theme-color));
    color: #fff;
}

.article-head{
    background-image: url(../img/head-art.jpg);
    background-position: center;
    background-size: 100%;
    background-repeat: no-repeat; 
    width: 80%;
    direction: rtl;
    padding: 5% 10% 2% 10%;
    margin: 0;
} 
.articl-title{
    color: #fff;
    margin: 0;
    font-size: 3.975rem;
    padding: 25% 0% 8% 0%;
}
.row-rs-partage{
    display: flex;
    justify-content: flex-end;
    align-items: center;
    align-content: center;
}
.row-rs-partage a{
    margin: 0px 4px;
    color:  #fff;
}
.articl-body{
    padding: 0;
    margin: 0;
    direction: rtl;
}
.art-info .author{
    margin: 0;
    padding: 0;
    font-size: 1.125rem;
    opacity: 0.4;
    margin: 0%;
}
.art-info .last-updated{
    margin: 0;
    padding: 0;
    font-size: 1.125rem;
}
.articl-content{
    width: 78%;
    margin: 1% auto 2% auto;
    height: max-content;
    padding: 1% 0% 2% 0%;
}
.articl-content h2{
    font-size: 2.125rem;
    color: #8C9609;
    margin: 0% 0% 2% 0%;
}
.articl-content p{
    font-size: 1.35rem;  
    font-family: "font3";
}
.articl-content p strong{
    font-size: 1.35rem;  
    line-height: 75px;
} 
.articl-content .size-large img{
    width: 100%;
}
.articl-content .alignleft{
    width: 40%;
}
.articl-content .alignleft img{
    width: 100%;
}
.articl-body hr{
    width: 78%;
    border: solid 1px #818181;
    margin: 0 auto 2% auto;
}
.articl-foot{
    width: 100%;
    margin: 1% 0%;
    direction: rtl;
}
.art-comm-btn{
    display: flex;
    align-content: center;
    justify-content: center;
    align-items: center;
    width: 12%;
    border: none;
    background-color: #8C9609;
    border-radius: 15px;
    font-size: 1.313rem;
    font-family: 'font3';
    color: #fff;
    margin: 1% auto;
    font-weight: 100;
    padding: 0% 1% 0.25% 1%;
}
.art-comm-btn:hover{
    background-color: #000;
}
.art-comm-btn svg{
    width: 25px;
    height: 25px;
    margin: 0 0 0 5%;
}
.title-art-plus{
    font-family: "fontAr";
    font-size: 2.125rem;
    margin: 0% 6% 1% 0%;
    padding: 0;
    color: #8C9609;
}
.mySwiperarts .swiper-wrapper .swiper-slide .post-details-info-right { 
    width: 90%;
}
.mySwiperarts .swiper-wrapper .swiper-slide  .post-title {
    margin: 10% 0 0 0;
    font-size: 1.575rem; 
}
.mySwiperarts .swiper-wrapper .swiper-slide .post-excerpt { 
    font-size: 1.025rem; 
}
.mySwiperarts .swiper-wrapper .swiper-slide .read-more { 
    font-size: 0.95rem;
    padding: 0% 5% 1% 5%; 
} 
.mySwiperarts .swiper-wrapper{
    padding: 0% 0% 6% 0%;
}
.mySwiperarts{
    --swiper-pagination-color: #8C9609;
    --swiper-pagination-fraction-color: inherit;
    --swiper-pagination-progressbar-bg-color: rgb(0 0 0 / 0%);
    --swiper-pagination-progressbar-size: 9px;
    --swiper-pagination-bullet-size: 30px;
    --swiper-pagination-bullet-width: 34px;
    --swiper-pagination-bullet-height: 34px;
    --swiper-pagination-bullet-inactive-color: #000; 
    --swiper-pagination-bullet-inactive-opacity: 1;
    --swiper-pagination-bullet-opacity: 1;
    --swiper-pagination-bullet-horizontal-gap: 4px;
    --swiper-pagination-bullet-vertical-gap: 6px;
}
.mySwiperarts .swiper-pagination { 
    direction: ltr;
}
.mySwiperarts .swiper-pagination-bullet {
    width: var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 8px));
    height: var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 8px));
    display: inline-block;
    border-radius: var(--swiper-pagination-bullet-border-radius, 50%);
    background: #0000;
    opacity: var(--swiper-pagination-bullet-inactive-opacity, .2);
}
.mySwiperarts .swiper-pagination-bullet-active {
    opacity: var(--swiper-pagination-bullet-opacity, 1);
    background: var(--swiper-pagination-color, var(--swiper-theme-color));
    color: #fff;
} 
.mySwiperarts{
    width: 88%;
    margin: 0% 6% 3% 6%;
} 
/* The Modal (background) */
.box-comm {
    display: none;  
    position: fixed;  
    z-index: 10;  
    left: 0;
    top: 0;
    width: 100%;  
    height: 100%; 
    overflow: auto;  
    background-color: rgb(0,0,0); 
    background-color: rgba(0,0,0,0.4); 
} 
.modal-comm-content {
    background-color: #fefefe;
    margin: 5% auto;  
    padding: 20px;
    border: 1px solid #888;
    width: 60%;  
    border-radius: 12px;
}
.closeCommBoxbtn {
    color: #FFF;
    float: right;
    font-size: 0.895rem;
    font-weight: bold;
    width: fit-content;
    margin: 0% 97% 1% 0%;
    background-color: #000;
    border-radius: 120px;
    padding: 6px 10px;
    border: none;
}
.closeCommBoxbtn:hover,.closeCommBoxbtn:focus {
    color: white;
    background-color: #8C9609;
    text-decoration: none;
    cursor: pointer;
}
.modal-comm-content h3{
    text-align: center;
    font-size: 2.25rem;
    margin: 0 0 2% 0;
    padding: 0;
    color: #8C9609;
    font-family: 'font2';
    font-weight: 100;
}
.modal-comm-content .comment-notes{
    color: red;
    margin: 1% 5% 0% 5%;
    padding: 0;
    font-size: 1.25rem;
    font-family: 'font3';
    font-weight: 100;
}
.modal-comm-content p{
    display: flex;
    align-content: flex-start;
    align-items: flex-start;
    justify-content: flex-start;
    margin: 5%;
    width: 90%;
}
.modal-comm-content .comment-form-cookies-consent{ 
    align-content: center;
    align-items: center;
    justify-content: flex-start; 
}
.modal-comm-content label {
    width: 20%;
    color: #686868;
    text-align: right;
    font-family: "font3";
    font-size: 1.175rem;
    font-weight: 100;
    line-height: 27.037px;
    margin: 0 0 0 2%;
}
.modal-comm-content .comment-form-cookies-consent label{
    width: fit-content;
    font-size: 1.015rem;
}
.modal-comm-content p textarea,.modal-comm-content p input{
    width: 75%; 
}
.modal-comm-content p input{ 
    height: 45px;
}
.modal-comm-content .comment-form-cookies-consent  input{
    width: 5%;
    height: 15px;
}
.modal-comm-content p input[type="submit"]{ 
    border: none;
    font-family: "font3";
    font-size: 1.175rem;
    background-color: #8C9609;
    color: #fff;
    width: fit-content;
    height: auto;
    padding: 0.5% 4% 0.75% 4%;
    display: block;
    margin: 0 auto;
    border-radius: 8px;
}
.single-post .article-head {
    position: relative;
    z-index: -1;
    margin-top: -100px;
}
.single-post .article-head::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.5);
    z-index: -1;
}
.single-post #menu-menu-head-1 li a {
    color: #fff;
}
.single-post .head-logo {
    filter: brightness(0) invert(1);
}
.single-post .menu-buttons .menu-btn,
.single-post .header-user-N .menu-buttons .single-btn3 {
    background-color: transparent;
}
.single-post #menu-menu-head-1 li:first-child a {
    text-decoration-color: #fff;
}
.section-hero {
    border-bottom: none;
}
.slider-wrap {
    position: relative;
}
.slider-wrap img {
    display: block;
}
.slider-buttons {
    position: absolute;
    bottom: 30px;
    z-index: 99;
    display: flex;
    align-items: center;
    width: 50%;
    margin-inline-start: 50%;
    justify-content: center;
}
.slider-buttons .hero-btn-1,
.slider-buttons .a-hero-btn-2,
.slider-buttons .hero-btn-2 {
    margin: 0 0 0 0;
}
.slider-buttons .hero-btn-1 {
    margin-inline-start: 20px;
}
@media (max-width:480px) {
    .slider-buttons {
        bottom: 15px;
    }
    .slider-buttons .hero-btn-1 {
        font-size: .8rem;
    }
}
.section-hero {
	padding-bottom: 0;
}
header.header-user-N {
    position: sticky;
    top: 0;
    background: #e0e3c6;
    z-index: 1000;
    margin: 0 0;
    padding: 10px 5%;
    box-shadow:  0 2px 5px rgba(0, 0, 0, 0.1);
}