/*               Ahmed +201507350719           */
.sbc-wrapper{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    padding-top: 23px;
}

.sbc-icon{
    background: white !important;
    border-radius: 5px;
    width: 44px;
    height: auto;
    
}


.placement {
	text-align: center;
	margin-bottom: 1rem;
	order: 12;
}

.tab-buttons {
	display: inline-flex;
	gap: 10px;
	overflow: hidden;
}

.tab-btn {
	padding: 8px 16px;
	background-color:#77bf42;
	border: none;
	cursor: pointer;
	border-top-left-radius: 0.375rem;
	border-top-right-radius: 0.375rem;
	color: #050704;
}
.tab-btn.active-tab {
	background-color: #000;
	color: #fff;
}
.custom-tabs-on .article--product-details,
.custom-tabs-on .comments--product,
.custom-tabs-on.product-single salla-product-options {
	display: none;
}

.custom-tabs-on .article--product-details.active-tab,
.custom-tabs-on .comments--product.active-tab,
.custom-tabs-on.product-single salla-product-options.active-tab  {
	display: block;
}





/*               Ahmed +201507350719           */


/* Add custom CSS styles below */
body {
  background-color: #050704;
}

*::selection {
  background-color: #050704;
  color: #050704;
}


.footer__bottom {
  padding: 15px 0;
  background-color: #0a131300;
  background-color: black;
  font-size: var(--font-sm);
}

.home-block--bg {
  background: #0a131300;
  background: #0a131300;
}

.testimonial-entry {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-direction: column;
  height: 100%;
  padding: 20px;
  background-color: #0a1313;
  border-radius: 8px;
}

.testimonial-entry__excerpt {
  color: #ffffff;
}

.footer__block {
  color: #ffffff;
}

.sicon-instagram:before {
  color: #78bf42;
}

.sicon-tiktok:before {
  color: #78bf42;
}

.store-feature p {
  margin: 0;
  color: #ffffff;
  color: #ffffff;
  max-width: 80%;
  margin: 0 auto;
}

.footer .footer-list li a {
  color: #ffffff;
}

.footer .footer-list li a {
  color: #ffffff;
}

html,
body {
  color: #ffffff;
}

:root {
  --color-white: #0a131300;
  --color-grey-dark: #78bf42;
  --color-grey: #0a131300;
  --color-text: #78bf42;
  --color-grey-border: #78bf42;
}

.s-cart-summary-icon svg {
  fill: #78bf42;
}

header .site-header__cart a {
  color: #78bf42;
}

.header-side-panel-trigger {
  color: #78bf42;
}

.nav-mobile .main-nav li a {
  color: #ffffff;
  background-color: #0a1313f0 !important;
}

.article {
  color: #78bf42;
}

.bg-grey {
  background: #0a131300;
}

.s-quantity-input-input {
  color: #78bf42;
  background: #0a131300;
}


.view-comment__comment .comment-wrapper p {
  color: #ffffff;
}

.view-comment__comment .comment-wrapper .badge {
  background-color: #78bf42;
}

[dir=rtl] .s-cart-summary-count {
  background-color: #78bf42;
}

.s-search-input {
  background-color: #0a131300;
}

.checkbox input[type=checkbox]+label:before,
.checkbox input[type=radio]+label:before {
  background-color: #ffffff;
}

.product-block {
  background-color: #0a131300;
  transition: .3s;
  scale: 0.85;
  animation: shadow 2.3s linear infinite;
}

.product-block:hover {
  scale: 0.9;
}

:root {
  --color-danger: #78bf42;
}

header .site-header__wrapper .theme-logo img {
  animation: scale 1.3s linear infinite;
  margin: 0 15px !important;
  height: 70px !important;
}

@media only screen and (max-width: 767px) {
  header .site-header .theme-logo a img {
      height: 50px !important;
  }
}

.btn--grey {
  transition: .3s;
}

.btn--grey:hover {
  background: #78bf42 !important;
  color: #fff;
}

.color-muted {
  color: #fff !important;
}

.s-search-input:focus {
  border-color: #78bf42 !important;
}

.s-search-input::placeholder {
  color: #78bf42 !important;
}

salla-search svg {
  fill: #78bf42 !important;
}

header .site-header__cart a:hover {
  transform: translateY(0) scale(1.08);
}

.nav-desktop--horizontal>ul .menu-item>a {
  transition: .3s;
  animation: colorful-text 3s linear infinite;
  background: linear-gradient(90deg, #78bf42, #31600e, #00870e);
  background-size: 80%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: rgba(255, 255, 255, 0);
}

.s-modal-header-inner svg {
  fill: #78bf42 !important;
}

[slot=icon] {
  border-color: #78bf42 !important;
}

salla-modal .s-modal-close svg {
  fill: #77bf42 !important;
}

.side-panel .store-about img {
  margin-bottom: 25px !important;
}

.side-panel .store-about p {
  color: #77bf42 !important;
  font-size: 14px;
}

.side-panel .store-about img {
  animation: scale 1.3s linear infinite;
}

@media only screen and (max-width: 767px) {
  .d-flex {
      flex-direction: row;
      align-items: center;
  }

  a.side-panel-trigger.header-side-panel-trigger.d-md-none.ml-2 {
      order: 4;
  }

  a.mobile-search-trigger.header-side-panel-trigger.d-md-none.ml-2 {
      flex-grow: 1;
      margin-left: 50px;
  }

  header .site-header .main-header-components {
      justify-content: flex-end !important;
      flex-grow: 0 !important;
      order: 2;
  }

  header .site-header__wrapper .form--search {
      background: #0a1313;
      border: 1px solid;
      padding: 10px;
  }
}


.product-block:hover {
  box-shadow: 0px 3px 15px 2px #77bf42 !important;
  transform: scale(1.02);
}

.product-block__info {
  text-align: center;
  background: #000;
}

.choices__list--dropdown {
  background: #0a1313 !important;
}

.choices__list--dropdown .choices__item:hover {
  background: #77bf42 !important;
}

.article p span {
  color: #fff !important;
}

.checkbox--primary input[type=checkbox]:checked+label:after,
.checkbox--primary input[type=radio]:checked+label:after {
  font-size: 20px;
}

.checkbox--large input[type=checkbox]+label:after,
.checkbox--large input[type=radio]+label:after {
  top: -3px;
  right: 1px;
}

.form .form-group salla-tel-input .tel-input,
.form .form-group .form-control {
  color: #fff !important;
}

.form .form-group salla-tel-input .tel-input:hover,
.form .form-group .form-control:hover {
  background: #0a1313 !important;
}

.form .form-group salla-tel-input .tel-input:focus,
.form .form-group salla-tel-input .tel-input:active,
.form .form-group .form-control:focus,
.form .form-group .form-control:active {
  background: #0a1313 !important;
}

.product-sections-wrapper {
  animation: shadow 1.3s linear infinite;
}

.article ul li span,
.article ol li span {
  color: #77bf42 !important;
}

.store-feature__icon {
  animation: moving 4s ease infinite;
  transition: all .4s ease;
  position: relative;
}

.store-feature__icon i {
  color: #fff !important;
  transition: all .3s ease;
}

.store-feature__icon i:hover {
  color: #77bf42 !important;
}

.btn--padded.narrow {
  transition: all .3s ease;
  text-align: center;
  display: flex;
  align-items: flex-end;
  margin-bottom: 20px !important;
}

.btn--padded.narrow:hover {
  background: #77bf42 !important;
  color: #fff;
  border: 1px solid #fff;
}

.splide__arrows button {
  background: #77bf42 !important;
}

.splide__arrow svg {
  fill: #fff;
}

.store-feature {
  background: #2A2B2E !important;
  padding: 19px 10px;
  border-radius: 15px;
  /* box-shadow: 0px 3px 15px 2px #77bf4260 !important; */
  animation: shadow 2.5s linear infinite;
}

.testimonial-entry {
  background: #2A2B2E !important;
  padding: 19px 10px;
  border-radius: 15px;
  transition: .5s;
}

.testimonial-entry:hover {
  opacity: .7;
}

.footer__bottom .container {
  justify-content: center;
}

.container.footer__mid .col-md-4.col-sm-12 {
  display: none;
}

.container.footer__mid .row {
  justify-content: center;
}

.footer .payment-methods-wrap {
  justify-content: center;
  margin-right: -28px;
}

.s-button-light-outline {
  border-color: #78bf42 !important;
}

.s-social-share-btn:hover span svg {
  fill: #78bf42 !important;
}

li.list--table__head.bg-white.b-radius {
  margin-bottom: 10px;
  border: 1px solid;

}

.list--table li:not(:last-of-type) {
  background: #0a1313;
}

li.total.padded-20.bg-white.b-radius.mb-30 {
  background: #0a1313;
}

.s-button-element:not(:disabled):not([loading]) {
  background: #77bf42 !important;
  color: #000;
}

.testimonial-entry__excerpt p,
.testimonial-entry__rate {
  text-align: center !important;
}

.testimonial-entry__info {
  flex-direction: column;
}

.testimonial-entry__info div.title {
  animation: colorful-text 5s linear infinite;
  background: linear-gradient(90deg, #bfff8f, #275803, #69ff79);
  background-size: 80%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: rgba(255, 255, 255, 0);
  margin-top: 10px;
}

.MAcLS {
  animation: scale 1s linear infinite;
}

.title--primary {
  color: #fff !important;
}

.store-notify {
  background: linear-gradient(90deg, rgba(119, 191, 66, 1) 0%, rgba(4, 56, 29, 1) 100%);
  color: #fff !important;
}

.home-block,
.body-blackout,
.home-block--bg,
.footer,
.footer__bottom,
.bg-grey,
.bg-white {
  background: #050704;
}

.side-panel.mobile-side-panel .side-panel__content,
.top-header,
header .site-header,
.header-block--nav-wrapper {
  background: #000;
}

.d-block,
.article a {
  color: #fff;
}

.article a {
  font-weight: 900;
  font-size: 18px;
}

.article a:hover {
  color: #00ff20;
}

header.fixed-pinned .site-header {
  background-color: #130b0b;
}

.s-modal-xs {
  background: #0a1313;
}

.s-modal-title {
  color: #77bf42;
}

.s-login-modal-label {
  color: #fff;
  text-align: center;
  margin-bottom: 1.5rem !important;
}

.s-verify-message {
  color: #fff;
}

.s-verify-timer {
  color: #77bf42;
}

.s-login-modal-input::placeholder {
  color: #77bf42;
}

salla-modal .s-verify-back svg,
salla-modal .s-modal-close svg {
  fill: #77bf42;
}

.s-verify-back {
  background: none
}

.iti input,
.iti input[type=text],
.iti input[type=tel],
.iti--separate-dial-code .iti__selected-dial-code {
  color: #77bf42;
}

.s-localization-modal-title {
  color: #fff;
}

.s-login-modal-input,
.s-localization-modal-label * {
  color: #77bf42;
}

.footer .footer-list li a img {
  border: 1px solid;
  padding: 5px 10px;
  border-radius: 6px;
  animation: scale 1.3s linear infinite, shadow 1.3s linear infinite;
}

.title--has-dash {
  z-index: 100;
}

.title--has-dash:before {
  transition: .3s;
  background: #77bf4260 !important;
}

.title--has-dash:hover::before {
  width: 250px;
  border-left: 10px solid #fff;
  z-index: -1;
}

.s-verify-input,
.iti__country-list {
  background: #0a1313 !important;
}

.banner--square {
  /* animation: shadow 2.3s linear infinite; */
  border-radius: 10px;
  margin: 15px 20px 40px;
  transition: 0.3s;
}

.splide--draggable>.splide__track>.splide__list>.splide__slide {
  padding: 15px;
}

.banner--square:hover {
  transform: translateY(-15px) scale(1.1);
}

@media only screen and (max-width: 767px) {
  .home-block--square-images .row {
      display: grid !important;
      grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)) !important;
      gap: 40px 0px !important;
  }

  .home-block--square-images .row .col-md-4.col-sm-12 {
      padding-left: 0 !important;
      padding-right: 0 !important;
  }

  .banner--square {
      margin: 0 10px 10px !important;
  }
}

.testimonial-entry::before,
.testimonial-entry::after {
  content: "";
  position: absolute;
  background-color: #76d449;
  transition: 1s;
  width: 2px;
  height: 0;
}

.testimonial-entry::before {
  top: 0;
  left: 0;
}

.testimonial-entry::after {
  bottom: 0;
  right: 0;
}

.testimonial-entry:hover::before,
.testimonial-entry:hover::after {
  height: 100%;
}

.splide__arrows button {
  z-index: 1001;
}

.s-form-control,
.s-product-options-wrapper,
.s-form-control:focus {
  background: #0a1313;
}

.s-form-control,
.s-form-control:focus {
  border-color: #78bf42;
  color: #fff;
}

.s-product-options-option-label,
.s-product-options-option-label small {
  color: #ddd;
}

.s-product-options-multiple-options-wrapper div label {
  color: #77bf42;
}

.home-block--square-images .row {
  justify-content: center;
}

.col-sm-12:has(.grid-block.products-list-container.vertical-products) {
  position: relative;
}


.badge--primary {
  background-color: #050704;
}

.badge--primary {
  background-color: #ffffff !important;
}

.product-block__thumb .badge.badge--ribbon {
  animation: opacity 1s linear infinite;
}

.product-block::before {
  content: "";
  position: absolute;
  top: -100%;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: #396524;
  z-index: 0;
  transition: all 0.3s;
}

.product-block:hover::before {
  top: 0;
}

.product-block__info {
  background: transparent !important;
}

/*
.banner--square,
.splide--main-slider .splide__slide a img {
  background: -o-linear-gradient(left, #ffff 50%, transparent 50%), -o-linear-gradient(left, #ffff 50%, transparent 50%), -o-linear-gradient(bottom, #ffff 50%, transparent 50%), -o-linear-gradient(bottom, #ffff 50%, transparent 50%);
  background: linear-gradient(90deg, #ffff 50%, transparent 50%), linear-gradient(90deg, #ffff 50%, transparent 50%), linear-gradient(0deg, #ffff 50%, transparent 50%), linear-gradient(0deg, #ffff 50%, transparent 50%);
  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
  background-size: 20px 2px, 20px 2px, 2px 20px, 2px 20px;
  background-position: 0% 0%, 100% 100%, 0% 100%, 100% 0px;
  padding: 2px;
  -webkit-animation: dash 20s linear infinite, shadow 2.3s linear infinite;
  animation: dash 20s linear infinite, shadow 2.3s linear infinite;
}
*/
@keyframes scale {

  0%,
  100% {
      transform: scale(1.1);
      -webkit-transform: scale(1.1);
      -moz-transform: scale(1.1);
      -ms-transform: scale(1.1);
      -o-transform: scale(1.1);
  }

  50% {
      transform: scale(.85);
      -webkit-transform: scale(.85);
      -moz-transform: scale(.85);
      -ms-transform: scale(.85);
      -o-transform: scale(.85);
      opacity: .7;
  }
}

body.store-home:before {
  content: " ";
  background-color: #070509;
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 100%;
  z-index: 9998;
  opacity: 0;
  animation: intro 2.5s;
}

body.store-home:after {
  z-index: 9999;
  position: fixed;
  content: "";
  background-image: url(https://cdn.salla.sa/dGajd/Zb2t40GI2MZbPIokSDwWVFyUv7haE1WRffIknmW4.png) !important;
  background-position: center;
  background-size: 180px;
  background-repeat: no-repeat;
  width: 0px;
  transform: translate(100px, -100px);
  height: 300px;
  right: 50%;
  top: 50%;
  opacity: 0;
  visibility: visible !important;
  background-color: transparent !important;
  animation: intro_logo 2s;
}

@keyframes shadow {

  0%,
  100% {
      box-shadow: 0px 0px 0px 0px #77bf42;
  }

  50% {
      box-shadow: -1px 2px 15px 1px #77bf42;
  }
}

@keyframes colorful-text {
  0% {
      background-position: -500%;
  }

  100% {
      background-position: 500%;
  }
}

@keyframes opacity {
  0% {
      color: #fff;
  }

  100% {
      color: var(--color-text-reverse);
  }
}

@keyframes dash {
  100% {
      background-position: 100% 0%, 0% 100%, 0% 0%, 100% 100%;
  }
}


body:before {
  content: " ";
  background-color: #070509;
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 100%;
  z-index: 9999999999998;
  opacity: 0;
  animation: intro 2.5s
}

body:after {
  z-index: 9999999999999;
  position: fixed;
  content: "";
  background-image: url('https://cdn.salla.sa/YVryo/7HzXtscmvY5cVXqzqKnOckQg4ol4UWPTsZHivXFS.jpg') !important;
  background-position: center;
  background-size: 180px;
  background-repeat: no-repeat;
  width: 0px;
  transform: translate(100px, -100px);
  height: 300px;
  right: 50%;
  top: 50%;
  opacity: 0;
  visibility: visible !important;
  background-color: transparent !important;
  animation: intro_logo 2s
}

@keyframes intro {
  0% {
      width: 100%;
      opacity: 1;
  }

  40% {
      opacity: 1;
  }

  80% {
      opacity: 1;
  }

  99% {
      width: 100%;
  }

  100% {
      width: 0;
      opacity: 0;
      display: none;
  }
}

@keyframes intro_logo {
  0% {
      width: 400px;
      opacity: 0;
  }

  70% {
      width: 185px;
      opacity: 1;
  }

  80% {
      opacity: 1;
  }

  99% {
      width: 50px;
  }

  100% {
      width: 0;
      opacity: 0;
      display: none;
  }
}

#store_numbers {
    border-top: 1px solid var(--color-grey-dark);
    padding: 30px 0;
}

#store_numbers h2 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

.holder-holder {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5rem;
    flex-wrap: wrap;
    font-size: 1.5rem;
}

 #store_numbers .number {
    font-size: 2.4rem;
    direction: ltr;
}

@keyframes moving {

    0%,
    100% {
        top: -15px;
    }

    50% {
        top: 15px;
    }
}

@media only screen and (max-width: 768px) {
  .store-contact-info{
     width:100%;
  }