:root {
  /* Core palette */
  --color-primary:  #C2965D;
  --main-color: #FAF7F2 ; 
  --header-color:  #FAF7F2;
  --text-color-header: #C2965D;
  --color-text-prodect: #C2965D;
  --color-button-product: #FFF;
  --footer-color: #C2965D;
 --text-color-footer: #fff;
}
body[data-template="home"]  {
  background-color: var(--main-color)!important;
}

header {
    background: var(--header-color);
}
header a {
    color: var(--text-color-header);
}

header svg {
    color: var(--text-color-header);
}
button.text-foreground {
    color: black;
}
dialog#mobile-drawer .bg-background.relative.flex.h-full.flex-col {
    background: var(--header-color);
}
@media (max-width:767px){
section.section-hero {
    min-height: 170px !important;
}  
}
@media (min-width: 768px) {
    section.section-hero {
        min-height: 750px !important;
    }
}
/* صورة البنر */
section.section-hero img {
    width: 100% !important;
    height: 100% !important;
    object-fit: fill !important;
    object-position: center !important;
    display: block;
}
section.section-hero .theme-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

@media (min-width:979px){

.products-embla__viewport .products-embla__container {
    justify-content: center;
}
}

a.btn.btn-filled {
    background: var(--main-color);
    border: 1px solid var(--color-primary);
    border-radius: 10px;
    font-size: 20px;
    transition:0.3s;
    color: var(--color-primary);
}
a.btn.btn-filled:hover{
    transform:scale(1.05)
}
@media (max-width:767px){
    a.btn.btn-filled {
    font-size: 13px;
        padding:10px;
}
}
section.section-gallery {
    background: transparent !important;
}
section.section-gallery .grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}


section.section-gallery .group {
    grid-row: span 1 / span 1 !important;
}
.\[\&\[data-items-count\=\'3\'\]\>\*\:first-child\]\:col-span-2[data-items-count="3"]>:first-child {
    grid-column: span 1 / span 1 !important;
}

section.section-gallery img {
    object-fit: contain !important;
    transition:0.3s
}
section.section-gallery img:hover{
    transform:scale(1.05)
}
@media (max-width:767px) {
section.section-gallery .theme-container {
    height: 65px;
}
section.section-gallery .group {
    height: fit-content !important;
}
}

section.section-gallery {
    padding-top: 3rem;
}
.products-embla__container .group .flex {
    text-align: center;
}
.products-embla__container button.btn.btn-outlined {
 background: var(--color-primary);
    color: var(--color-button-product);
    border-radius: 0px 0px 10px 10px;
        font-weight:bold
}
.products-embla__container button.btn.btn-outlined:hover {
    background:#ffffff;
    color:var(--color-primary);
    font-weight:bold;
    border:1px solid var(--color-primary)
}
section.section-products h2{
    color: var(--color-text-prodect);
    position:relative;
    padding-bottom:25px;
}
section.section-products h2:before{
    position:absolute;
    content:"";
    width:200px;
    height:3px;
    background:var(--color-text-prodect);
    bottom:-0px;
    left:50%;
    transform:translateX(-50%);
    border-radius:50px
}
section.section-products h2:after{
    position:absolute;
    content:"";
    width:25px;
    height:25px;
    background:var(--main-color);
    border:3px solid var(--color-text-prodect);
    outline:6px solid var(--main-color);
    bottom:-10px;
    left:50%;
    transform:translateX(-50%);
    border-radius:50px
}
[data-products-carousel="a2168b89-5dce-433e-abd9-69bd4b9ec715"] .products-embla__container {
  
    justify-content: center;
}
section.section-products .flex.items-center.justify-between {
    justify-content: center;
}
.products-embla__container .group {
    border: 1px solid var(--color-primary);
    border-radius: 10px;
    background: white;
    padding: 3px;
}
.products-embla__container h3 {
    color: black;
}
.products-embla__container a {
    color: black;
}
.products-embla__container .group .flex {
    text-align: center;
    align-items: center;
}
.products-embla__progress {
    background: var(--color-text-prodect) !important;
}
button.products-embla__prev {
    background: var(--color-text-prodect);
}
button.products-embla__next {
    background: var(--color-text-prodect);
}
button path {
    fill: var(--main-color);
}
h2.text-foreground {
    color: var(--color-primary);
}

footer#footer {
    background: var(--footer-color);
}
button.loyalty_footer_btn {
    display: none !important;
}
footer h3 {
    color: var(--text-color-footer);
}
footer a {
    color:var(--text-color-footer);
}
footer svg {
    color: var(--text-color-footer);
}
footer p {
    color: var(--text-color-footer);
}