/**************************************************************************/
/********************************* VARIABLES ******************************/
/**************************************************************************/
:root {
    --background-color: #ffffff;
    --color-green-light: #eaf3de;
    --color-green-primary: #39B54A;
    --color-green-secondary: #35a444;
    --color-black-primary: #000000;
    --color-yellow-primary: #fdcf17;
    --color-yellow-secondary: #eec319;
    --border-radius: 6px;
    --box-shadow: rgba(0, 0, 0, 0.25) 0px 25px 50px -12px;
    --box-shadow-heavy: rgba(0, 0, 0, 1) 0px 25px 50px -12px;
    --text-shadow: 2px 1px 10px rgba(0, 0, 0, 0.75);
    --line-height: 1.5;
    --font-weight: 700;
}
/*------------------------------------------------------------------------*/


/**************************************************************************/
/****************************** RESET/GLOBAL ******************************/
/**************************************************************************/
html { scroll-behavior: smooth; }
html *, body * { padding: unset; margin: unset; /*font-family: 'Vazirmatn';*/ font-family: 'Rubik', Helvetica, Arial, Lucida, sans-serif; line-height: var(--line-height); }
h1, h2, h3, h4, h5, h6 { /*font-family: 'Playpen Sans Arabic';*/ font-family: 'Roboto', Helvetica, Arial, Lucida, sans-serif; line-height: var(--line-height); hyphens: auto; overflow-wrap: break-word; }
p { line-height: var(--line-height); /*hyphens: auto; overflow-wrap: break-word;*/ margin-block: 1rem; }
ul, ol { list-style-position: outside; margin-left: 1rem; }
li { word-wrap: break-word; overflow-wrap: break-word; hyphens: auto; line-height: var(--line-height); }
html, body { background: var(--background-color); }
img { display: block; }
.container-small { position: relative; width: 90%; max-width: 1570px; margin-inline: auto; }
.container { position: relative; width: 90%; max-width: 1200px; margin-inline: auto; }
a { all: unset; width: fit-content; }
a:hover { cursor: pointer; }
.breadcrumbs { padding-block: 1rem; color: white; }
.breadcrumbs a:hover { text-decoration: underline; }
.breadcrumb_last { font-weight: var(--font-weight); }
.splide__slide img { margin: auto; }
.title { color: var(--color-green-primary); font-size: 3rem; font-weight: var(--font-weight); line-height: 1.2;  }
.sub-title { color: black; font-size: 2rem; font-weight: var(--font-weight); margin-bottom: 2rem; }
.btn-filter, .btn-light { display: block; background: white; border: 2px solid var(--color-green-primary) !important; padding: 1rem; color: var(--color-green-primary); font-weight: 600; font-size: 1.1rem; border-radius: var(--border-radius); box-shadow: var(--box-shadow); transition: all .2s ease-in-out; }
.btn-filter:hover, .btn-light:hover { background: #f8f9fa; }
.btn-main, .wp-element-button, .btn-filter.active { display: block; background: var(--color-green-primary); padding: 1rem; color: white; font-weight: 600; font-size: 1.1rem; border: none; border-radius: var(--border-radius); box-shadow: var(--box-shadow); transition: all .2s ease-in-out; }
.button { display: block !important; background: var(--color-green-primary) !important; padding: 1rem !important; color: white !important; font-weight: 600 !important; font-size: 1.1rem !important; border: none !important; border-radius: var(--border-radius) !important; box-shadow: var(--box-shadow) !important; transition: all .2s ease-in-out !important; }
.button:hover { background: var(--color-green-secondary) !important; }
.btn-main:hover, .wp-element-button:hover, .btn-filter:hover.active { background: var(--color-green-secondary); }
.btn-secondary, .wc-block-components-checkout-return-to-cart-button { display: block; background: var(--color-yellow-primary); padding: 1rem; font-weight: 600; font-size: 1.1rem; border-radius: var(--border-radius); box-shadow: var(--box-shadow); transition: all .2s ease-in-out; }
.wc-block-components-checkout-return-to-cart-button svg { display: none; }
.btn-secondary:hover, .wc-block-components-checkout-return-to-cart-button:hover { background: var(--color-yellow-secondary); }
.btn-arrow { width: 18%; transition: all .25s ease-in-out; filter: drop-shadow(0px 10px 6px rgba(0, 0, 0, 0.25)); user-select: none; will-change: transform; }
.btn-arrow:hover { transform: scale(1.1); cursor: pointer; }

.xoo-wsc-ft-btn, .xoo-wsc-btn { border-radius: var(--border-radius); }
.xoo-wsc-icon-basket6:before { color: var(--color-green-primary); }
.xoo-wsc-sc-subt { margin-top: auto; font-weight: 600; }
.xoo-wsch-text { font-weight: 600; }
.xoo-wsc-sc-count, .xoo-wsc-items-count, .xoo-wsch-items-count { font-weight: 600; }
span.xoo-wsc-sc-count, span.xoo-wsch-items-count { width: 22px; height: 22px; line-height: 22px; right: -14px; top: -7px; }
a.xoo-wsc-ft-btn:nth-child(3) { width: 100%; }
.xoo-wsc-ft-buttons-cont { grid-column-gap: 15px; grid-row-gap: 15px; }
.xoo-wsc-icon-basket6:before { transition: color .2s ease-in-out; }
.xoo-wsc-basket:hover .xoo-wsc-icon-basket6:before { color: var(--color-green-secondary); }

.woocommerce span.onsale { top: 5rem !important; right: .4rem !important; background-color: var(--color-yellow-primary) !important; color: black !important; border-radius: var(--border-radius) !important; border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; padding: 0 !important; padding-inline: 1rem !important; }

/*NAVIGATION TOGGLE*/
#navToggle {
    position: relative;
    z-index: 999;
    cursor: pointer;
    transition: all 0.3s;
    width: 32px;
    height: 24px;
    margin-block: auto;
}

#navToggle span {
    display: block;
    position: absolute;
    height: 4px;
    width: 100%;
    background: black;
    opacity: 1;
    left: 0;
    transform: rotate(0deg);
    transition: all 0.3s;
}

#navToggle span:nth-child(1) {
    top: 0px;
    transform-origin: left center;
}

.open#navToggle span:nth-child(1) {
    transform: rotate(45deg);
    top: -1px;
    left: 5px;
}

#navToggle span:nth-child(2) {
    top: 10px;
    transform-origin: left center;
}

.open#navToggle span:nth-child(2) {
    width: 0%;
    opacity: 0;
}

#navToggle span:nth-child(3) {
    top: 20px;
    transform-origin: left center;
}

.open#navToggle span:nth-child(3) {
    transform: rotate(-45deg);
    top: 22px;
    left: 5px;
}

#backToTop {
    width: 45px;
    height: 45px;
    display: none;
    position: fixed;
    bottom: 40px;
    right: 40px;
    z-index: 999;
    background-color: var(--color-green-primary);
    color: var(--color-black-primary);
    border: none;
    border-radius: 100%;
    cursor: pointer;
    transition: opacity 0.2s ease-in-out;
    box-shadow: 0px 0px 15px 2px #0000001a;
}
#backToTop svg { width: calc(100% + 2px); height: calc(100% + 2px); transform: translate(-1px, -1px); }
#backToTop:hover { background-color: var(--color-green-secondary); }

.reveal_bottom { position: relative; transform: translateY(-20px); opacity: 0; transition: 1s all ease; }
.reveal_bottom.active { transform: translateY(0); opacity: 1; }
.reveal_left { position: relative; transform: translateX(-100px); opacity: 0; transition: .8s all ease; }
.reveal_left.active { transform: translateX(0); opacity: 1; }
.reveal_right { position: relative; transform: translateX(100px); opacity: 0; transition: .8s all ease; }
.reveal_right.active { transform: translateX(0); opacity: 1; }
.reveal { opacity: 0; transition: 1s all ease; }
.reveal.active { opacity: 1; }

#wh-toc-sticky-bar { max-width: 84vw; }
.toc .wh-toc-toggle-icon, #wh-toc-sticky-bar { display: none; }
.toc .wh-toc-container { background: none; border: none; box-shadow: var(--box-shadow); }
.toc .wh-toc-container h3 { border-bottom: none; justify-content: center; }
.toc .wh-toc-container a { color: black; font-weight: normal; text-decoration: none; }
.toc .wh-toc-container h3 { border-bottom: none; justify-content: center; }
.toc .wh-toc-container.wh-toc-hide-numbers li { padding-left: 1rem !important; padding-right: 1rem; padding-block: .5rem; margin-bottom: 0; transition: all .2s ease-in-out; }
.toc .wh-toc-container .wh-toc-active-item { background: #eaf3de; border-radius: var(--border-radius); }
.toc .wh-toc-container .wh-toc-active-item a { color: var(--color-green-primary) !important; font-weight: normal !important; }
.toc .wh-toc-container li > a { font-size: 1.1rem; transition: all .2s ease-in-out;  }
.toc .wh-toc-container li > a:hover { text-decoration: underline !important; }
.toc { position: relative; width: 30%; margin-right: 4rem; }
.toc .wh-toc-container { position: sticky; top: 11rem; background: #ffffffcf; padding: 1rem; z-index: 2; }
.faq .product-description { width: 70%; }
/*------------------------------------------------------------------------*/


/**************************************************************************/
/********************************* HEADER *********************************/
/**************************************************************************/
header.header-mobile { display: none; }
header.header-mobile > .container-small { display: flex; justify-content: space-between; padding-block: 1rem; }
header { position: sticky; top: 0; z-index: 999; width: unset !important;  background: white; }
.header--scrolled { box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); }
header .mid-bar .container-small { display: flex; justify-content: space-between; align-items: center; padding-block: 1rem; }
header .header-logo-mobile { display: none; }
header .header-logo-mobile img { width: 100%; }
header .header-logo { display: block; width: 23rem; }
header .header-logo img { width: 100%; will-change: transform; transition: transform .2s ease-in-out; }
header .header-logo:hover img { transform: scale(1.025); }
header .desktop .menu { display: flex; list-style: none; gap: 3rem; color: black; font-size: 1.2rem; font-weight: var(--font-weight); margin: 0; padding: 0; }
header .desktop .menu-item { position: relative; text-decoration: none; }
header .desktop .menu-item a::after { content: ''; position: absolute; width: 100%; height: 2px; bottom: 0; left: 0; background-color: var(--color-green-primary); transform: scaleX(0); transform-origin: bottom center; transition: transform 0.2s ease-in-out; }
header .desktop .menu-item a:hover::after { transform: scaleX(1); }
header .bottom-bar { background: var(--color-green-primary); }
/* header .bottom-bar .dgwt-wcas-search-input { background: none !important; border: none !important; }
header .bottom-bar .dgwt-wcas-search-input::placeholder { color: white !important; } */
header nav.desktop { display: flex; justify-content: center; align-items: end; }
header .shop-utilities { display: flex; gap: 3rem; align-items: center; }
header .shop-utilities .woocommerce { display: flex; gap: 2rem; align-items: baseline; }
header .shop-utilities .woocommerce .account-link { width: 2.2rem; }
header .shop-utilities .woocommerce .account-link img { width: 100%; will-change: transform; transition: transform .2s ease-in-out;  }
header .shop-utilities .woocommerce .account-link:hover img { transform: scale(1.05); }
header .shop-utilities .woocommerce .xoo-wsc-sc-bkcont { will-change: transform; transition: transform .2s ease-in-out; }
header .shop-utilities .woocommerce .xoo-wsc-sc-cont:hover .xoo-wsc-sc-bkcont { transform: scale(1.075); }
header .dgwt-wcas-ico-magnifier-handler { will-change: transform; transition: transform .2s ease-in-out; }
header .dgwt-wcas-ico-magnifier-handler:hover { transform: scale(1.1); }

nav.mobile { display: none; overflow: hidden; padding-bottom: 1rem; max-height: 0rem; transition: all .3s ease-in-out; }
nav.mobile.open { max-height: 100rem; }
.header-mobile .woocommerce { display: flex; align-items: center; gap: 1rem; }
.header-mobile .shop-utilities { justify-content: space-between; gap: unset; margin-block: 2rem; }
.header-mobile .xoo-wsc-sc-cont { margin-left: auto; margin-right: 3rem; }
.header-mobile nav.mobile ul { margin-left: 0; }
.header-mobile nav.mobile li { list-style: none; font-size: 1.3rem; padding-block: .6rem; }
/*------------------------------------------------------------------------*/


/**************************************************************************/
/********************************* FOOTER *********************************/
/**************************************************************************/
footer { position: relative; background: black; color: white; overflow: visible; }
footer p { margin-block: .5rem; line-height: 1.6; }
footer h2 { font-size: 1.6rem; color: var(--color-green-primary); }
footer a { text-decoration: underline; }
footer a:hover { color: var(--color-green-primary);  }
.footer-content { display: flex; justify-content: space-between; gap: 2rem; flex-wrap: wrap; padding-block: 6rem; }
.footer-bottom { text-align: center; padding: .5rem; }
.footer-bottom img { display: unset; width: 5.5rem; margin-bottom: -.075rem; }
.footer-img { position: absolute; top: -3.5rem; left: -15rem; }
.footer-img img { width: 5rem; }
.footer-img-2 { position: absolute; bottom: 0; right: -15rem; }
.footer-img-2 img { width: 12rem; }

/*------------------------------------------------------------------------*/

@media screen and (max-width: 1690px) {  
	.footer-img { left: -10rem; }
	.footer-img-2 { right: -7rem; }
	.footer-img-2 img { width: 8rem; }

}

@media screen and (max-width: 1635px) {  
	.footer-img { left: -4rem; }
	.footer-img-2 { right: -4rem; }

}

@media screen and (max-width: 1525px) { 
	.footer-img { left: 0; }
	.footer-img-2 { right: 0; }
}

@media screen and (max-width: 1415px) { 
	.blog .bee-1 { right: 0 !important; }
}


@media screen and (max-width: 1024px) {  
    header { display: none; }
    header.header-mobile { display: block; }
    .container { padding-inline: var(--padding-small); }
} 



@media (max-width: 500px) {
    header .header-logo { display: none; }
    header .header-logo-mobile { display: block; width: 4rem; }
	#wh-toc-sticky-bar { width: 83% !important; }
}