/* powred by ABDULLHA YOUSUF +970592171803 custom css */

/* start of add custome font */

/* Add this at the top of your CSS file */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@100;200;300;400;500;600;700&display=swap');

/* Apply the font to your site */
body {
    font-family: 'IBM Plex Sans Arabic', sans-serif;
}


/* end of add custome font */


.sicon-image:before {
    content: "";
    display: inline-block;
    width: 104px;
    height: 72px;
    background-image: url(https://i.ibb.co/7WBPk5S/image.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.sicon-bitcoin:before{
    content: "";
    display: inline-block;
    width: 104px;
    height: 72px;
    background-image: url(https://i.ibb.co/V9R3vLc/image.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.sicon-favorite:before{
    content: "";
    display: inline-block;
    width: 104px;
    height: 72px;
    background-image: url(https://i.ibb.co/nPCGNfN/image.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.sicon-ol:before{
    content: "";
    display: inline-block;
    width: 104px;
    height: 72px;
    background-image: url(https://i.ibb.co/kcB8jRJ/image.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.sicon-mention:before{
    content: "";
    display: inline-block;
    width: 104px;
    height: 72px;
    background-image: url(https://i.ibb.co/qrmNtd8/image.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}


.sicon-delete_col:before{
    content: "";
    display: inline-block;
    width: 104px;
    height: 72px;
    background-image: url(https://i.ibb.co/WynBfj0/image.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}


.sicon-ellipsis-filled:before{
    content: "";
    display: inline-block;
    width: 104px;
    height: 72px;
    background-image: url(https://i.ibb.co/XpWCXnP/image.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}




@media (max-width: 767px) {
.banner-entry:first-of-type {
  grid-column: span 2 / span 2;
}
.gap-4:first-of-type  {
  gap: 0.1rem !important;
}
}



.s-product-card-entry {
  box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
}


.s-block--features__item {
  border-radius : 5px;

}
 
.banner-entry {
  border-radius : 5px;
}

salla-slider.photos-slider .swiper-slide {

box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
}
  
  .store-footer__inner {
  background: #000;
  }

.store-footer { 
 background: #000;
}



.section--title, .s-slider-block__title h2, .s-block__title h2{
  color: rgba(255,0,0,0.1);

  text-transform: uppercase;

  background-size: cover;
  
   background-image: linear-gradient(-225deg, #005779 0%, #000000 29%, #ffffff 67%, #ffffff 100%);
  
  -webkit-background-clip: text;
  animation: background-text-animation 30s linear infinite;
}
@keyframes background-text-animation {
  0%{
    background-position: left 0px top 50%;
  }
  50%{
    background-position: left 1500px top 50%;
  }
  100%{
    background-position: left 0px top 50%;
  }
}


/*==== 3 banners on mobile ===========*/
.scrollBtn.active {
  transform: translateX(25px) !important;
}

@media (max-width: 767px) {
  .scrollBtn {
    bottom: 65px !important;
  }

  .s-block--features__item {
    grid-column: span 2 / span 2;
  }
  
  .banner-entry:nth-child(2) {
    /* Your styles for the second .banner-entry */
    height: 150px; /* Example style */
}

/* Select the third .banner-entry */
.banner-entry:nth-child(3) {
    /* Your styles for the third .banner-entry */
    height: 150px; /* Example style */
}


}



/*================= Banners =================*/
[dir="rtl"] salla-slider.photos-slider .swiper {
  padding-left: 0;
  padding-right: 0;
}

.s-block--photos-slider {
  margin-top: 0;
}

.s-block--photos-slider .swiper-slide {
  padding: 0 !important;
}

salla-slider.photos-slider .swiper-slide {
  margin-left: 0;
  margin-right: 0;
  width: 100%;
}




.s-slider-block__title-right h2::after, .s-block__title h2::after {
    content: "";
    position: absolute;
    bottom: -7px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 5px;
    border: 1px solid var(--color-primary);
    border-radius: 2px;
    background-image: linear-gradient(to right, #000 0%, var(--color-primary) 33.33%, transparent 33.33%, transparent 66.66%, #000 66.66%);
}


.text-primary {
  color: #000;
}




/*========= Footer =========*/
.store-footer__inner {
  border-radius: 30px 30px 0 0;
}


.store-footer h3 {
  width: fit-content;
  background-color: var(--white);
  color: white;
  padding: 0.5rem 0.75rem;
  border-radius: 0.25rem;
}

.store-footer .social-link,
.store-footer .container div:last-child a i {
  background-color: var(--white);
  color: white;
  border: none;
}

.store-footer div:nth-child(2) span,
.store-footer a:hover,
.store-footer .social-link:hover {
  opacity: 1;
}

.store-footer div:nth-child(2) span p {
  color: white;
}

@media (max-width: 767px) {
  .store-footer h3 {
    width: 100%;
  }
  .store-footer__inner .container div {
    text-align: center;
}
  
  .store-footer__inner .container div:first-child div,
  .store-footer__inner .container div a,
  .contact-social ul {
    justify-content: center;
  }
  
  .store-footer:first-of-type::before{
    content: "";
    width: 140px; /* Adjust the width */
    height: 115px; /* Adjust the height */
    background-image: url('https://i.ibb.co/3F9TbkM/image.png'); /* Path to your image */
    background-size: cover; /* Adjust background properties */
    background-repeat: no-repeat;
    margin-top: 20px; /* Adjust margin if needed */
     display: flex;
    margin-right : 129px;
}
}

.s-social-list {
  justify-content: center;
  color : white;
}





/*========= 3 banners on web=========*/

@media (min-width: 1024px) {
  .md\:grid-cols-\[repeat\(3\,minmax\(0\,1fr\)\)\] {
    grid-template-columns: repeat(2, 1fr);
  }

  .grid > a:first-child {
      grid-column: span 2; /* This will make the first banner span across 2 columns */
      background-image: url("https://i.ibb.co/mF395Zb/2.png")!important;
  }
  

.grid > a:nth-child(2),
.grid > a:nth-child(3) {
    grid-column: span 1; /* Ensure they occupy only 1 column */
}

.banner-entry {
  height: 300px !important;
}

}
/*========= end of 3 banners on web=========*/



.sicon-heart::before {
  color: red;
  font-weight: 400;
}