/* Add custom CSS styles below */ 
/* Add custom CSS styles below */ 
/* Add custom CSS styles below */ 
/* Add custom CSS styles below */ 
/* Add custom CSS styles below */ 
/* Add custom CSS styles below */ 
/* Add custom CSS styles below */ 
/* Add custom CSS styles below */ 
/* Add custom CSS styles below */ 
/* Add custom CSS styles below */ 
/* Add custom CSS styles below */ 
/* Add custom CSS styles below */ 
/* Add custom CSS styles below */ 
/* Add custom CSS styles below */ 
:root {
    --main-color:#3d169a;
    --second-color:#00bfff;
    --whit-color: #fff;
    --blac-color:#000;
    --logo: url("https://cdn.salla.sa/cdn-cgi/image/fit=scale-down,width=400,height=400,onerror=redirect,format=auto/WlKbON/mkLX6k3BXvLjqYhIkZTmcMJI8neQmoqh3oLgUNC8.png");
   
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  background: #fff;
  z-index: 99998;
  animation: background-fade 4s ease forwards;
  pointer-events: none;
}

/* ===== اللوجو ===== */
body::after {
  content: '';
  position: fixed;
  top: 50%;
  left: 50%;
  width: 150px;
  height: 150px;
  background: var(--logo) no-repeat center;
  background-size: contain;
  transform: translate(-50%, -50%) scale(0.3) rotate(-20deg);
  opacity: 0;
  z-index: 99999;
  pointer-events: none;
  animation: logo-zoom 4s ease forwards;
}

/* ===== أنيميشن اللوجو ===== */
@keyframes logo-zoom {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.3) rotate(-20deg);
  }
  20% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.1) rotate(10deg);
  }
  50% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1) rotate(0deg);
  }
  80% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1) rotate(0deg);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.8) rotate(10deg);
  }
}

/* ===== أنيميشن الخلفية ===== */
@keyframes background-fade {
  0%, 90% { opacity: 1; }
  100%    { opacity: 0; visibility: hidden; }
}






.s-button-element:not(:disabled):not([loading]) {
	pointer-events: auto;
	background-color: var(--main-color);
}
.navbar-brand img {
	max-height: 3rem;
	width: auto;
	max-width: 100px;
}

.header-btn__icon {
	
	color: var(--main-color);
	border: 2px;
}

.banner--fixed img {
  background-color: transparent !important;
  
  width: 100% !important;
  height: auto !important;
  object-fit: cover !important;
}





//////////////sections/////////////////////


 a.slide--cat-entry{
   background:var(--main-color);
   color:#ffff;
   }
   a.slide--cat-entry:hover{
   color:var(--main-color)!important;
   border:2px var(--main-color);
   }
   
.slide--cat-entry h2,.slide--cat-entry i{
  display: none;
}
.s-button-wide {
	/* width: 66px; */
	backgroound-color: var(--main-color) color:white;
	border-radius: 36px 10px 0px 0px;
	background-color: var(--main-color);
	color: #fff;
}




.swiper-slide:nth-child(1) a.slide--cat-entry {
    background-image: url('https://i.ibb.co/Q7rYz1tL/Artboard-1-copy-15.png');
  border: none;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-color: unset;
}

.swiper-slide:nth-child(2) a.slide--cat-entry {
    background-image: url('https://i.ibb.co/pj4yJzpT/Artboard-1-copy-16.png');
  border: none;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-color: unset;
}

.swiper-slide:nth-child(3) a.slide--cat-entry {
    background-image: url('https://i.ibb.co/MDW83hgy/Artboard-1-copy-18.png');
  border: none;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-color: unset;
  display: none;
  
}
.swiper-slide:nth-child(4) a.slide--cat-entry {
    background-image: url('https://i.ibb.co/hG1GhZs/Artboard-1-copy-19.png');
  border: none;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-color: unset;
}
.swiper-slide:nth-child(5) a.slide--cat-entry {
    background-image: url('https://i.ibb.co/LhSM7B5N/Artboard-1-copy-20.png');
  border: none;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-color: unset;
}
.swiper-slide:nth-child(6) a.slide--cat-entry {
    background-image: url('https://i.ibb.co/SDF79xdF/Artboard-1-copy-21.png');
  border: none;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-color: unset;
}

وهكذا لباقي العناصر */
   #main-links-2 > div:nth-child(2) .swiper-backface-hidden {
          
           flex-wrap: nowrap; /* منع الانتقال إلى أسطر جديدة */
           justify-content:center; /* العناصر تبدأ من اليسار */
           gap: 5px; /* تقليل المسافة بين العناصر */
           margin:0;
           padding: 0;
           align-items: center;
           justify-content:center;
       }
  #main-links-2 > div:nth-child(2).swiper-wrapper.s-slider-swiper-wrapper{
   /* scale: 0; */
   align-items: center;
   justify-content:center;
   }
   @media (max-width: 768px) {
  #main-links-2 > div:nth-child(2) .swiper-wrapper.s-slider-swiper-wrapper{
       
       scale: 0.7;
     }}
     
   @media (max-width: 480px) {
  #main-links-2 > div:nth-child(2).swiper-wrapper.s-slider-swiper-wrapper{
           scale: 0.6;
         }}
   #main-links-2 > div:nth-child(2).swiper-backface-hidden::before {
       content: '‹'; /* السهم الأيسر */
       position: absolute;
       left: 5px;
       top: 50%;
       transform: translateY(-50%);
       font-size: 50px;
       color: var(--main-color);
       z-index: 5;
       pointer-events: none; /* لا يمنع النقر على العناصر */
       opacity: 0.5; /* شفافية للسهم */
   }
   
   /* السهم الأيمن */
   #main-links-2 > div:nth-child(2).swiper-backface-hidden::after {
       content: '›'; /* السهم الأيمن */
       position: absolute;
       right:5px;
       top: 50%;
       transform: translateY(-50%);
       font-size: 50px;
       color: var(--main-color);
       z-index: 5;
       pointer-events: none; /* لا يمنع النقر على العناصر */
       opacity: 0.5; /* شفافية للسهم */
   }
   
   /* إذا كان التمرير غير ممكن، إخفاء الأسهم */
   .swiper-backface-hidden:focus-within::before,
   .swiper-backface-hidden:focus-within::after {
       opacity: 0;
   }
 
 body > div.app-inner.flex.flex-col.min-h-full > section.s-block.s-block--categories > div > salla-slider > div.swiper.s-slider-container.swiper-initialized.swiper-horizontal.swiper-pointer-events.swiper-rtl.swiper-backface-hidden > div {
  justify-content: center;
}
 
 
  /* card */
  
  
 .s-product-card-entry {
	--tw-bg-opacity: 1;
	width: 180px;
	height: 300px;
	border:1.5px solid var(--main-color);
}


 .sicon-shopping-bag::before{
content: "\ea6e" ;

 }

 .s-product-card-content {
	padding: 0.25rem;
}
.s-product-card-vertical .s-product-card-wishlist-btn:where([dir="rtl"], [dir="rtl"] *) {
	left: 4rem;
	/* right: auto; */
	right: initial;
}


.s-product-card-vertical .s-product-card-wishlist-btn button {
	--tw-bg-opacity: 1 !important;
	background-color: var(--main-color) !important;
	color: white !important;
}
.s-product-card-content-title {
	margin-bottom: 0.625rem;
	max-width: 100%;
	line-height: 1.5rem;
	
	
  transform: translateY(20px);

}

@keyframes fadeUp {
  to { opacity: 1; transform: translateY(0); }
}

.navbar-brand{
  animation: upDown 2s ease-in-out infinite;
}

@keyframes upDown {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px); /* يطلع لفوق */
  }
  100% {
    transform: translateY(0); /* يرجع مكانه */
  }
}

.container {
width: 100%;
padding-right: 0px;
  padding-left: 0px;
}
.main-nav-container.fixed-pinned .navbar-brand img {
	max-height: 60px;
}

@keyframes pulseBorder {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 107, 107, 0.7);
  }
  70% {
    box-shadow: 0 0 0 8px rgba(255, 107, 107, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 107, 107, 0);
  }
}
.s-search-input-wrapper {
	position: relative;
	display: flex;
	flex-grow: 1;
	align-items: center;
}

.banner--fixed img {
  display: block;
  width: 100%;
  border-radius: .375rem;
  border-style: none;
  --tw-bg-opacity: 1;
  background-color: #f3f4f6;
  background-color: rgba(243, 244, 246, var(--tw-bg-opacity));
  -o-object-fit: cover;
  object-fit: cover;
  background: none;
}

.top-navbar .s-search-input {

border: 2px solid var(--main-color); 
  padding: 10px 20px;
  border-radius: 8px;
  animation: pulseBorder 1.5s ease-in-out infinite;
	}
	@keyframes pulseBorder {
0% {
    box-shadow: 0 0 0 0 rgba(33, 54, 85, 0.7); /* أغمق مع شفافية */
  }
  70% {
    box-shadow: 0 0 0 8px rgba(33, 54, 85, 0); /* يمتد ويختفي */
  }
  100% {
    box-shadow: 0 0 0 0 rgba(33, 54, 85, 0); /* يرجع للصفر */
  }
}
.s-search-icon-wrap:where([dir="rtl"], [dir="rtl"] *) {
	right: 0.3rem;
}

.s-slider-block__title h2:where([dir="rtl"], [dir="rtl"] *)::after
.text-gray-800 {
	--tw-text-opacity: 1;
	/* color: rgba(31, 41, 55, 1); */
	color: rgba(31, 41, 55, var(--tw-text-opacity, 1));
	font-size: 18px;
	display: inline;
}

.mm-spn li a, .mm-spn li > span {
	padding: 18px;
	display: flex;
	align-items: center;
	gap: 1rem;
	background-color: var(--second-color);
	border-radius: 10px;
}
.main-menu li.root-level {
	display: inline-block;
	color: var(--main-color);
	
}
//////////////////////// الفوتر/////////////////////
.s-block, .s-block--tabs-produtcs, .footer-is-light .store-footer, .footer-is-light .store-footer .store-footer__inner {
	background: transparent !important;
}
.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: upDown 2s ease-in-out infinite;
}
.flex.mb-6, .md\:flex, .store-footer a,  .store-footer .contact-social ul, .footer-is-light .store-footer .store-footer__inner {
	text-align: center !important;
	justify-content: center !important;
}
.store-footer h3 {
	background-color: var(--main-color);
	color: white !important;
  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;
   animation: pulseBorder 1.5s ease-in-out infinite;
} 
.store-footer::after {
	content: "";
	top: 0;
	color: var(--second-color) !important;
	font-size: 16px;
	opacity: 0.5;
	margin-right: 35% !important;
}
@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;
}}
 @keyframes sigal {
        0% {
            filter: drop-shadow(2px 4px 6px #504d46)
        }
    
        100% {
            filter: none;
        }
    }

.slider-wrapper{
display:none;
}
.features-section{
display:none;
}
.s-contacts-icon:where([dir="rtl"], [dir="rtl"] *) {
	margin-left: 0.625rem;
	background-color: var(--second-color);
	color:white;
}





}


/* الموبايل - أقل من 480px */
@media (min-width: 380px) and(max-width: 479px) {
  .s-products-list-vertical-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
  }
}

/* التابلت - من 480px لحد 768px */
@media (min-width: 540px) and (max-width: 768px) {
  .s-products-list-vertical-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
  }
}

/* لابتوب وشاشات متوسطة - من 769px لحد 1023px */
@media (min-width: 769px) and (max-width: 1023px) {
  .s-products-list-vertical-cards {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 2rem;
  }
}

/* شاشات كبيرة (ديسكتوب) - من 1024px فأعلى */
@media (min-width: 1024px) {
  .s-products-list-vertical-cards {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 2.625rem;
  }
}

.store-footer::after {
	content: "";
	top: 0;
	color: var(--main-color) !important;
	font-size: 16px;
	/* opacity: 0.5; */
	margin-right: 35% !important;
}
.stats-section{
display:none;
}
.s-products-list-vertical-cards {
	
	margin-left: -71px;
}

 .container {
 min-width: 100%
 }
  
@media (min-width: 1280px) {
    .container 
    {max-width: 200%}
  }
  
.s-slider-swiper-wrapper > div {
	width: fit-content !important;
}

.swiper-slide {
	-ms-flex-negative: 0;
	flex-shrink: 0;
	width: fit-content;
	height: 100%;
	position: relative;
	-webkit-transition-property: -webkit-transform;
	transition-property: transform, 
}
.s-product-card-entry {
	--tw-bg-opacity: 1;
	width: 180px;
	height: 300px;
	border: 1.5px solid var(--main-color);
	border-radius: 10px 10px 0px 0px;
}
.s-button-wide {
	/* width: 66px; */
	backgroound-color: var(--main-color) color:white;
	border-radius: 36px 10px 0px 0px;
  background-color: var(--second-color);
}
.s-cart-summary-total {
	font-weight: 600;
	--tw-text-opacity: 1;
	color: rgba(0, 0, 0, 1);
	color: var(--main-color);
	margin-left: 12px;
}



.s-button-primary-outline:hover {

	background-color: var(--main-color);
	
	
	color: var(--whit-color);
}
.s-product-card-price {
	font-size: 0.875rem;
	line-height: 1.25rem;
	font-weight: 700;
	margin-right: 104px;
	margin-top: -36px;
}
.s-button-wide {
	/* width: 66px; */
	backgroound-color: var(--main-color) color:white;
	border-radius: 36px 10px 0px 0px;
	background-color: var(--main-color);
	color: #fff;
}
.store-header{
margin-bottom: -32px;
}
@media (min-width: 640px) {
  .store-header{
margin-bottom: -68px;
}
}
.mm-spn li a, .mm-spn li > span {
	padding: 18px;
	display: flex;
	align-items: center;
	gap: 1rem;
	background-color: var(--main-color);
	border-radius: 10px;
	color: white;
}
.sicon-menu::before {
	content: "\ed7f";
	color: var(--main-color);
	margin-left: 12px;
}
.s-product-card-content-title {
	line-height: 1.5rem;
	margin-bottom: 21px;
}

.banner--fixed img , body{

    background-color: white;
}
.lazy__bg {
	position: absolute;
	top: 0px;
	left: 0px;
	height: 100%;
	width: 100%;
	background-size: cover;
	background-position: center;
	opacity: 0;
	transition-property: opacity;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	transition-duration: 500ms;
	background-color: white;
}
.gap-3 {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 1.75rem;
}
@media (max-width: 767px) {
  .grid-flow-row {
    grid-auto-flow: row;
  }
}
@media(max-width:768px) {
.banner-entry {
  height: 150px !important;
  }
}
@media(min-width:991px) {
 .banner-entry {
    height: 200px !important;
    width: 220px !important;
    margin: auto;
    padding:auto;
  }

  .lazy__bg {
    background-size:70% auto !important;
  }

}
/* الموبايل */
@media (max-width: 768px) {
  .banner-entry {
    height: 150px !important;
    width: 250px !important;
  }
}

/* التابلت - من 769px لحد 1024px */
@media (min-width: 769px) and (max-width: 1024px) {
  .banner-entry {
    height: 200px !important;
    width: 220px !important;
    margin: auto;
    padding:auto;
  }
}

/* لابتوب متوسط */
@media (min-width: 1025px) and (max-width: 1366px) {
  .banner-entry {
    height: 250px !important;
    width: 300px !important;
  }
}

/* شاشات كبيرة */
@media (min-width: 1367px) {
  .banner-entry {
    height: 300px !important;
    width: 350px !important;
  }
}

.banner--fixed img , body{

    background-color: white;
}
.lazy__bg {
	position: absolute;
	top: 0px;
	left: 0px;
	height: 100%;
	width: 100%;
	background-size: cover;
	background-position: center;
	opacity: 0;
	transition-property: opacity;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	transition-duration: 500ms;
	background-color: white;
}
.gap-3 {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 1.75rem;
}
@media (max-width: 767px) {
  .grid-flow-row {
    grid-auto-flow: row;
  }
}
@media(max-width:768px) {
.banner-entry {
  height: 150px !important;
  }
}
@media(min-width:991px) {
 .banner-entry {
    height: 200px !important;
    width: 220px !important;
    margin: auto;
    padding:auto;
  }

  .lazy__bg {
    background-size:70% auto !important;
  }

}
/* الموبايل */
@media (max-width: 768px) {
  .banner-entry {
    height: 150px !important;
    width: 250px !important;
  }
}

/* التابلت - من 769px لحد 1024px */
@media (min-width: 769px) and (max-width: 1024px) {
  .banner-entry {
    height: 200px !important;
    width: 220px !important;
    margin: auto;
    padding:auto;
  }
}

/* لابتوب متوسط */
@media (min-width: 1025px) and (max-width: 1366px) {
  .banner-entry {
    height: 250px !important;
    width: 300px !important;
  }
}

/* شاشات كبيرة */
@media (min-width: 1367px) {
  .banner-entry {
    height: 300px !important;
    width: 350px !important;
  }
}
.main-menu>li#offers ,
.main-menu>li>a[href*=offer]  {
    display:none;
}

.py-5 {
	padding-bottom: 1.25rem;
	padding-top: 1.25rem;
	margin-top: 55px;
  margin-right: 10px;
}
.font-bold {
	font-weight: 700;
	margin-right: 5px;
}
.s-slider-block__title h2:where([dir="rtl"], [dir="rtl"] *) {
  position: relative;
  text-align: center;
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--main-color, #2a2a2a); /* fallback لو المتغير مش متعرف */
  margin-right: 20%;
  width: 100%;
}

/* الشريط الأبيض اللي هيعدي فوق النص */
.s-slider-block__title h2:where([dir="rtl"], [dir="rtl"] *)::after {
  content: "";
  position: absolute;
  bottom: -10px; /* 👈 نزول الخط 10px تحت */
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 4px;
  background: linear-gradient(90deg, var(--main-color), var(--main-color));
  border-radius: 4px;
  animation: glow 1s infinite alternate;
}


@keyframes glow {
  from { box-shadow: 0 0 5px var(--main-color); }
  to   { box-shadow: 0 0 15px var(--main-color-dark, #000000); }
}


.store-footer__inner{background-color: white !important;}



header.store-header::before {
  content: "🛍️  تشكيلة تيشرتات كلاسيكية ورياضية بأعلى جودة! 🌟";
  display: block;
  text-align: center;
  background: linear-gradient(90deg, var(--second-color), var(--main-color));
  color: #fff;
  font-size: clamp(12px, 2vw, 20px); /* 👈 متجاوب مع جميع الشاشات */
  font-weight: bold;
  padding: 14px 0;
  letter-spacing: 1px;
  border-bottom: 2px solid var(--main-color);
  position: relative;
  z-index: 10;
  animation: changeText 24s infinite;
  transition: opacity 0.5s ease;
}

/* أنيميشن تغيير الجمل */
@keyframes changeText {
  0%, 10% {
    content: "🛍️  تشكيلة تيشرتات كلاسيكية ورياضية بأعلى جودة🌟";
  }
  11%, 20% {
    content: "✨ اكتشف أناقتك مع ترافيلا - جودة تستحق الثقة 💪";
  }
  21%, 30% {
    content: "🚚 شحن آمن وسلس";
  }
  31%, 40% {
    content: "🛎️ دعم فني على مدار24 الساعة";
  }
  41%, 50% {
    content: "✅ منتجات أصلية 100%";
  }
  51%, 60% {
    content: "💸 عروض وتخفيضات أسبوعية";
  }
  61%, 70% {
    content: "🔄 خدمة استرجاع خلال 14 يوم";
  }
  71%, 80% {
    content: "💳 طرق دفع متعددة وآمنة";
  }
  81%, 100% {
    content: "🛍️ تشكيلة تيشرتات كلاسيكية ورياضية بأعلى جودة! 🌟";
  }
}
.banner--fixed img {background:unset;}