:root {
  --main-color: #eaa92d;
  --second-color: #20283f;
  --text-color: #20283f;
    --hue: 223;
    --primary: #eaa92d;
    --trans-dur: 0.3s
}
.flex-col {

    background-image: url(https://g.top4top.io/p_3324rx5yz1.png);
    background-repeat: no-repeat;
    background-size: cover;
}
:root{

--one: #20283F;
--two:#EAA92D;
--three:#EAA92D;
 --logo: url(https://e.top4top.io/p_3327qluno1.png);
--back:#20283F;
--back2:#20283F ;
}
.s-block--hero-slider .swiper-slide .swiper-lazy:after,
.main-menu li:hover>.sub-menu,
.flex-col,
.s-block,
.s-comments-product,

.top-navbar,
.mm-spn.mm-spn--light,
.main-nav-container.fixed-pinned .inner,
.main-nav-container {
   background: var(--back2)!important;
}



.s-button-element:not(:disabled):not([loading]) {
    background: var(--one)!important; !important;
    color: var(--two);
    border: none;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
.s-block--tabs-produtcs .tab-trigger.is-active button{
COLOR:VAR(--two)!important;
}
.s-product-card-entry{
    background-color: var(--three)!important; !important;
  
}
.navbar-brand img
 {
 
transform:scale(1.3);

}

.carousel-slider .swiper-wrapper>div {
    margin: 10px auto;
}

.s-product-card-vertical {
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

.lg\:p-8,
.banner--fixed img,
.container,
.s-block--features__item {
    background: transparent !important;
}

@media only screen and (max-width: 600px) {
    .s-products-slider-card {
        max-width: 185px;
    }
}

@media only screen and (min-width: 600px) {

    .lg\:grid-cols-6 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .lg\:col-span-2 {
        grid-column: span 1/span 1;
    }
}

.flex.mb-6,
.md\:flex,
.s-product-card-content-sub,
.store-footer a,
.s-product-card-content-title a,
.store-footer .contact-social ul,
.footer-is-light .store-footer .store-footer__inner {
    text-align: center !important;
    justify-content: center !important;
}

[dir=ltr] .mm-spn.mm-spn--navbar.mm-spn--main:after,
[dir=rtl] .mm-spn.mm-spn--navbar.mm-spn--main:after,
[dir=rtl] .mm-spn.mm-spn--navbar:after {
    text-align: inherit;
}

.sicon-menu:before,.header-btn__icon,.s-cart-summary-total {
    color: #EAA92D !important;
}
.top-navbar {
display:;
}
.slide--cat-entry i,
.rtl .fix-align,
[dir=rtl] .fix-align,
.s-block--features__item p,
.text-gray-400 {
    color: #EAA92D !important;
}

.top-navbar .s-search-input,
.s-product-card-entry {
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

/* width */
::-webkit-scrollbar {
    width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px #fff;
    border-radius: 10px;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #000;
    border-radius: 10px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #000;
}

.s-slider-block__display-all {
    background: #000;
    padding: 3px 6px 8px 6px;
    border-radius: 37px;
    line-height: 18px;
}

.store-footer h3 {
    color: #EAA92D !important;
    background: #fff;
    border-radius: 8px;
    font-weight: bold;
    padding-top: 0.3rem;
    width: 100%;
    padding-bottom: 0.3rem;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
}
.s-slider-block__display-all{
background:transparent;
}
.slide--cat-entry {
    background: var(--two)!important;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    color: var(--one);
    
}
.slide--cat-entry i{
color:#EAA92D !important;
}

@media only screen and (max-width: 600px) {
    .slide--cat-entry {
        width: 106px !important;
        height: 106px !important;
        border-radius: 65px !important;
    }

    .swiper-slide.slide--one-sixth,
    .swiper-slide.slide--one-sixth.swiper-slide-prev,
    .swiper-slide.slide--one-sixth.swiper-slide-next,
    .swiper-slide.slide--one-sixth.swiper-slide-active {
        width: 40%;
    }

    .slide--cat-entry h4 {
        font-size: 0.775rem;
    }

    .slide--cat-entry i {
        font-size: 28px;
    }
}

.footer-is-light .store-footer .store-footer__inner:before {
    text-align: center;
    content: "";
    display: block;
    height: 110px;
    width: 140px;
    margin: auto auto 20px;
    background-image: var(--logo);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    animation: sigal 1200ms linear infinite;
}

@keyframes sigal {
    0% {
        filter: drop-shadow(2px 4px 6px #504d46)
    }

    100% {
        filter: none;
    }
}

[dir=rtl] .s-slider-block__title h2 {
    text-shadow: 2px 4px #EAA92D ;
    font-size: 25px;
}

.index:before {
    content: "";
    width: 100%;
    height: 100%;
    background: var(--back) var(--logo);
    position: fixed;
    top: 0;
    z-index: 99999999999999999 !important;
    background-size: 250px !important;
    background-repeat: no-repeat;
    background-position: center !important;
    animation-name: logobg;
    animation-duration: 3s;
    animation-fill-mode: forwards;
    bottom: 0;
    left: 0;
    right: 0;

}
.mm-spn.mm-spn--light,.main-menu li.root-level>a,p,h4,.text-2xl{
COLOR:var(--two)!important;

}.lg\:col-span-2 p{
COLOR:#fff!important;

}
@keyframes logobg {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        visibility: hidden
    }
}

.s-block--features__item .feature-icon,
.store-footer a .rtl\:ml-2\.5,
.s-slider-nav-arrow,
.header-btn__icon {
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

.store-footer a .rtl\:ml-2\.5 {
    background: #e8cdad !important;
}


.s-slider-block__display-all {
    animation: signal 1200ms linear infinite;
}

@keyframes signal {
    0% {
        box-shadow: 0 0 0 0 #000;
    }

    100% {
        box-shadow: 0 0 0 5px #e8cdad;
    }
}

.s-slider-block__title {
    margin: 10px auto;
}

.s-button-element:not(:disabled):not([loading]) {
    animation: signal 1200ms linear infinite;
}


@keyframes signal {
    0% {
        box-shadow: 0 0 0 0 #e8cdad;
    }

    100% {
        box-shadow: 0 0 0 5px #fff;
    }
}


/* Add custom CSS styles below */ 
/* General styles */


.iti input, .iti input[type=text], .iti input[type=tel] {
    color: black;
}
.s-login-modal-input {
    color: black;
}
.iti--separate-dial-code .iti__selected-dial-code {
    color: black;
}
.s-verify-input[type=number] {
    color: black;
}
.btn--outline-primary {
    border-width: 1px;
    border-color: var(--text-color);
    color: var(--main-color);
}
.btn--outline-primary:hover {
    background-color: var(--second-color);
    color: var(--main-color);
}
textarea.form-input {
    color: black;
}
b, strong {
    font-weight: bolder;
    color: black;
}


* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.s-block--photos-slider {
    margin-top: 0 !important;
}

.swiper {
    padding-left: 0 !important;
}

salla-slider.photos-slider .swiper-slide {
    position: relative;
    margin-left: 1.1rem;
    margin-right: 0.5rem;
    height: auto;
    width: 100%;
    overflow: hidden;
    padding-left: 0;
    padding-right: 0;
}
.banner-swap {
    background-image: url(https://www2.0zz0.com/2025/01/15/11/580918033.png);

    width: 100%;
    color: #EF5D5F;
    overflow: hidden;
    padding: 10px 0;
margin-bottom: 5px;
    position: relative;
}

.bannt {
    display: flex;
    width: 100%;
    animation: banSwiperScroll 12s linear infinite;
    will-change: transform;
}

.bannt:hover {
    animation-play-state: paused; /* Pause scroll on hover */
}

.banrerr {
    white-space: nowrap;
    padding: 0 50px;
    font-size: 1.2em;
    font-weight: bold;
    display: flex;
    align-items: center;
    position: relative;
    transition: color 0.3s ease, text-shadow 0.3s ease;
}

.banrerr:hover {
    color: #ffffff;
    text-shadow: 0 0 8px #d9a968, 0 0 12px #EF5D5F; /* Glowing effect */
}

.banrerr i {
    margin-left: 10px;
    animation: bounceIcon 1.5s infinite ease-in-out; /* Icon bounce */
}

/* Bouncing icon effect */
@keyframes bounceIcon {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-5px);
    }
}

/* Smooth scrolling renamed from tickerScroll to banSwiperScroll */
@keyframes banSwiperScroll {
    0% {
        transform: translateX(100%);
    }
    100% {
        transform: translateX(-100%);
    }
}

/* menu*/
/* Root Variables */


/* Navbar Modifications */
[dir=rtl] .mm-spn.mm-spn--navbar.mm-spn--main:after {
  padding-right: 0.75rem;
  content: "";
  text-align: center !important;
  display: block;
  height: 90px !important;
  background-image: url(https://e.top4top.io/p_3327qluno1.png);
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: top center !important;
  margin: 30px 50px 11px 50px;
}

/* Navbar Menu Adjustments */
@media (max-width: 650px) {
  ul.main-menu.mm-spn--open {
    margin-top: 100px;
  }
}

.mm-spn.mm-spn--navbar ul::before {
  content: "";
  display: block;
  position: fixed;
  z-index: 2;
  width: 100%;
  opacity: 0.15;
}
/* Content Styling */
.mm-ocd__content {
  background: #d2ddebb8;
}

@media only screen and (max-width: 1024px) {
  .mm-ocd__content {
    overflow-y: auto;
    min-width: 100% !important;
  }

  .mm-spn li a,
  .mm-spn li > span {
    padding: 18px;
    display: flex;
    gap: 1rem;
    margin: 7px;
    text-align: center;
    align-items: center;
    justify-content: center;
  }

  .mm-spn li a span {
    padding: 0;
    font-size: 15px;
    text-shadow: 3px 3px 5px #97aac2;
  }

  .mm-spn.mm-spn--light {
    color: var(--prodCard-btn-background);
    background-color: #ffffff21 !important;
  }

 
}


/* Cancel Icon */
.sicon-cancel::before {
  content: "\ea47";
  color: red;
  text-shadow: 1px 1px 3px black;
  font-size: 25px;
}

/* Navbar Positioning */
@media (min-width: 991px) {
  .mm-spn.mm-spn--navbar ul {
    top: calc(var(--mm-spn-item-height) + 80px);
  }
}

@media (min-width: 650px) {
  .mm-spn.mm-spn--navbar ul {
    top: calc(var(--mm-spn-item-height) + 100px);
  }
}

/* Close Button */
.btn--close-sm {
  background-color: transparent;
}

/* menu*/
/* Latest Products */
.s-product-card-image img {
    height: 100%;
    width: 100%;
    opacity: 0;

    transition: opacity 500ms cubic-bezier(.4,0,.2,1);
    background: 0 0!important;
    transition: 1s
}

/* Footer Inner */
 .store-footer .store-footer__inner {
    background-color: #EF5D5F;
    color: #fff;
    padding: 50px;
    border-radius: 15px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    background-image: url('https://www.transparenttextures.com/patterns/cartographer.png');    border-radius: 55px;
    position: relative;
    transition: all 0.3s ease;
}



/* Footer Outer */


/* Additional Styling */
.leading-6 {
    line-height: 1.5rem;
    font-size: 1.25rem;
    color: #EF5D5F;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

footer a i {
  background-color: #EF5D5F;
}

.copyright-text p {
    color: #ffffff;
}

.s-payments-list-item {
    border: 1px solid #03161f;
}


salla-slider .swiper-pagination-bullet-active {
    opacity: 1;
    background-color: var(--main-color);
}

.store-footer a {
    transition-property: opacity;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
    font-size: 16px;
    font-weight: 400;
}
.store-footer {
  background: linear-gradient(135deg, var(--second-color), #353535);
  border-top: 2px dashed var(--second-color) !important;

    padding: 30px;
    font-size: 14px;
    border-top-left-radius: 125px;
    border-top-right-radius: 125px;
    text-align: center;
    transition: box-shadow 0.3s;
    box-shadow: 0 3px 6px rgba(102, 15, 86, 0.333), 0 6px 20px rgba(190, 78, 169, 0.262);
    position: relative;
    overflow: hidden;
}

.store-footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.1);
    border-radius: inherit;
    backdrop-filter: blur(10px);
    z-index: -1;
}

.footer-is-light .store-footer .store-footer__inner {
    background-color: transparent;
    font-size: 18px !important;
    border-bottom-color: transparent;
}

.store-footer__inner {
    background-color: rgba(255, 255, 255, 0.2) !important;
    color: #fff!important;
    border-radius: 50%;
    padding: 20px;
    backdrop-filter: blur(5px);
}


.store-footer__inner .flex {
    justify-content: center;
}

.store-footer__inner .max-w-sm {
    margin: auto;
}

.footer-list {
    color: white !important;
}

.store-footer__inner .max-w-sm {
    color: white !important;
}

.store-footer a {
    color: white !important;
    text-decoration: none;
}

.store-footer a:hover {
    color: #EF5D5F;
}

.s-contacts-header {
    display: none;
}

.s-contacts-list.s-contacts-list-vertical {
    align-items: center;
}

.store-footer i {
    color: white !important;
    border-color: transparent !important;
}

.store-footer .contact-social {
    border: none;
}

.store-footer__inner {
    text-align: center;
}

.store-footer__inner h3:hover {
    color: white !important;
      

}

.text-center {
    text-align: center;
    padding: 0;
    position: relative;
    font-weight: bold;
    font-size: 1.2rem;
}

.text-center::before {
    content: "برمجه وتطوير ADFAZ";
    display: block;
    text-align: center;
    padding: 10px;
    color: #f9fafb;
    font-size: 1.2rem;
}
.copyright-text p {
    --tw-text-opacity: 1;
    color: rgba(55, 65, 81, 1);
    color: rgb(255 255 255);
}
.store-footer h3 {
    margin-bottom: 0.75rem;
    font-size: 1.125rem;
    line-height: 1.75rem;
    font-weight: 700;
    color: white;
}
@keyframes sigal {
    0% {
        filter: drop-shadow(2px 4px 6px #d5c48c)
    }

    100% {
        filter: none;
    }
} 
.main-nav-container {
    background: transparent;
}
.s-cart-summary-total {
    display: flex;
}
  .rtl\:lg\:pr-20:where([dir="rtl"], [dir="rtl"] *) {
   text-align: center;
    content: "";
    display: block;
    height: 110px;
    width: 211px;
  margin: -19px auto 0px 4%;
      background-image: url(https://e.top4top.io/p_3327qluno1.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    animation: sigal 1200ms linear infinite;
}
    }


.store-footer h3{
background-color:var(--one);
color:var(--two)!important;
}
.footer-is-light .store-footer,
.footer-is-light .store-footer .store-footer__inner
{
background-color:var(--three)!important;
border-radius:20px  20px!important;

}

.s-block--features__item .feature-icon ,.s-slider-block__display-all{
background-color:var(--one);
color:var(--two);
}
.s-block--features__item .feature-icon i{
color:var(--two);
}
@keyframes myAnimation {
    0% {
        transform: scale(1)
    }

    50% {
        transform: scale(1.01)
    }

    100% {
        transform: scale(1)
    }
}
.banner-entry {
     background: 0 0; 
    animation: myAnimation 1s infinite;
}
.s-block--features__item:hover,.s-product-card-entry {
    --c: var(--one);
    --b: 3px;
    --g: 5px;
    padding: calc(var(--g) + var(--b));
    --_g: #0000 25%,var(--c) 0;
    background: conic-gradient(from 180deg at top var(--b) right var(--b),var(--_g)) var(--_i,200%) 0/200% var(--_i,var(--b)) no-repeat,conic-gradient(at bottom var(--b) left var(--b),var(--_g)) 0 var(--_i,200%)/var(--_i,var(--b)) 200% no-repeat;
    transition: .3s,background-position .3s .3s;
    cursor: pointer
}

.s-block--features__item:hover,.s-product-card-entry:hover {
    --_i: 100%;
    transition: .3s,background-size .3s .3s
}
.s-product-card-price{
color:var(--one)!important;
}
/* Apply the animation to the loader */


/*code tani*/

.s-block.s-block--banners>.grid {
    grid-template-columns:1fr 1fr 1fr 1fr ;
  
}

.s-block.s-block--banners>.grid .banner-entry {
    padding-top: 88%;
    height: unset
}

.two-row .banner-entry:first-child {
    grid-column: auto;
    grid-row: auto
}

.s-block.s-block--banners:nth-of-type(19) {
    margin-bottom: 1rem
}

@media(max-width: 991px) {
    .s-block.s-block--banners>.grid {
        grid-template-columns:1fr 1fr 1fr 1fr 
    }

    .s-block.s-block--banners>.grid .banner-entry {
        height: unset
    }
}




.s-block--banners+.s-block--banners,.s-block--features+.s-block--features,.s-block--fixed-banner+.s-block--fixed-banner {
    margin-top: 1em
}

body.index div.app-inner.flex.flex-col.min-h-full>section.s-block--banners:nth-child(n) div div:hover {
    transform: translateY(-8px);
    box-shadow: 0 -10px 10px 10px rgb(0 0 0/1%)!important
}

a.banner-entry.square-photos:hover {
    transition: .3s ease-in-out;
    transform: scale(1.1)
}

.index>div.app-inner.flex.flex-col.min-h-full>section.s-block.s-block--banners.container>div>a.banner-entry.square-photos {
    transition: .5s
}

.index>div.app-inner.flex.flex-col.min-h-full>section.s-block.s-block--banners.container>div>a.banner-entry.square-photos:hover {
    transform: scale(1.1)
}

body.index div.app-inner.flex.flex-col.min-h-full>section.s-block--banners:nth-child(n) div {
    transition: transform .3s,box-shadow .3s
}

.banner-entry {
    background-color: transparent;
}
.lazy__bg {

background-size:COVER!important;
    background-repeat:no-repeat!important;

}