/* Add custom CSS styles below */ 
:root {
  --main-color:#f60;
  --hover-color:#95d359;
}
body:after {
 content: "";
 width: 100%;
 height: 100%;
 top: 0;
 position: fixed;
 z-index: 999999;
 background: white
   url(https://cdn.salla.sa/form-builder/IyK4E4jV36H93E6Rw2F1DV9zVLC2HxC3iG28YAz6.jpg);
 left: 0;
 background-repeat: no-repeat;
 background-position: center;
 background-size: 360px;
 animation-name: fade-in;
 animation-duration: 1.5s;
 transform: scale(0);
 border: none;
}
@keyframes fade-in {
 0% {
   opacity: 1;
   transform: scale(1);
 }
 75% {
   opacity: 1;
   transform: scale(1);
 }
 100% {
   opacity: 0;
   transform: scale(0.1);
 }
}
h2 {
 color:var(--main-color);
}
h2:hover {
 color:var(--hover-color);
}

/* to change background color*/
.flex-col {

 background: white;
}
/* to change baner background*/
.banner--fixed img {
 background-color: white !important;
}
.navbar-brand img{
 max-height: 5rem;
 width: auto; 
 max-width: 200px;
}
 .text-primary {
 color:var(--main-color);
 }

/* header*/
.main-nav-container {
 min-height: 68px;
 background-color: white;
 color: var(--main-color);
}

/* logo */
.navbar-brand img:hover {
 transform: rotate(360deg) scale(1.1);
 transition: 0.8s;
}

@media (min-width: 480px) {
 .navbar-brand img:hover {
 }
}


.navbar-brand img{
margin-left:40px;
}

/* -----nav----- */

.main-menu li > a {
 color: var(--main-color);
 text-decoration-line: none;
}
.main-menu li > a:hover {
 color: var(--hover-color);
 transform: rotate(-10deg);
 transition: 0.5s;
}
@media (max-width: 768px) {
 .main-menu li > a:hover {
   color: var(--hover-color);
   transform: rotate(0deg);
   transform: translateX(-10px);
   transition: 0.5s;
 }
 .mm-spn.mm-spn--light {
   color: var(--hover-color);
   background: var(--main-color);
 }
}
#mobile-menu[data-mm-spn-title="القائمة الرئيسية"] {
 color: var(--hover-color);
 font-size: 18px;
}
.close-btn {
 color: var(--hover-color);
}

/* nav on mobile */
@media only screen and (max-width: 1024px) {
 .mm-spn.mm-spn--light {
   color: var(--hover-color);
   background: white;
 }
 .main-menu li > a:hover {
   color: var(--hover-color);
   transform: rotate(0deg);
   transform: translateX(-10px);
   transition: 0.5s;
 }
}

.main-menu > li > a[href*="offer"] {
 color: var(--hover-color);
}
/* icons from header */
.header-btn__icon {
 color: var(--main-color);
 border-color:var(--mian-color);
}
.header-btn__icon:hover {
 color: var(--hover-color);
 border-color: var(--hover-color);
 transform: rotate(360deg) scale(1.1);
 transition: 1s;
}

.s-products-slider-card:hover {
 color: var(--hover-color);
}
.s-product-card-vertical {
 transition: all 0.3s ease-out;
}

.s-product-card-vertical:hover {
 /* transform: scale(1.05);*/
 box-shadow: var(--hover-color)-1px 2px 16px;
 border-radius: 37% 37% 10% 10%;
}

.s-product-card-image img {
 max-width: 100%;
}
.s-product-card-content {
 color: black;
}
.s-product-card-content a {
 color: var(--main-color);
 text-align: center;
}
.s-product-card-content a:hover {
 color: var(--hover-color);

}
.s-button-btn {
 position: relative;
 transition: all 0.3s ease-in-out;
 box-shadow: 0px 10px 20px #95d359;
 display: flex;
 align-items: center;
 justify-content: center;
 font-weight: bold;
 outline: none;
 overflow: hidden;
}

.s-button-btn:hover {
 background-color: var(--hover-color);
 color:white;
}

.s-button-element:not(:disabled):not([loading]) {
 pointer-events: auto;
 border-color: var(--main-color);
 color: var(--main-color);
}
.s-button-element:not(:disabled):not([loading]):hover {

  border-color: var(--hover-color);
  color:black;
}

.s-button-btn::before {
 content: "";
 position: absolute;
 width: 100px;
 height: 100%;
 background-image: linear-gradient(
   120deg,
   rgba(255, 255, 255, 0) 30%,
   rgba(255, 255, 255, 0.8),
   rgba(255, 255, 255, 0) 70%
 );
 top: 0;
 left: -100px;
 opacity: 0.6;
}

.s-button-btn:hover::before {
 animation: shine 1.5s ease-out infinite;
}

.store-footer__inner {
 background-color: white !important;
 color: var(--hover-color);
 position: relative;
}
@media (min-width: 1024px) {
 .store-footer__inner {
   padding-top: 2rem;
   padding-bottom: 2rem;
 }
}

.footer-is-light .store-footer .store-footer__inner:before {
 text-align: center;
 content: "";
 display: block;
 height: 110px;
 width: 240px;
 margin-left: auto;
 background-image: url(https://cdn.salla.sa/form-builder/IyK4E4jV36H93E6Rw2F1DV9zVLC2HxC3iG28YAz6.jpg);
 background-repeat: no-repeat;
 background-size: contain;
 background-position: center;
 animation: move 2s infinite;
 transtion: 0.6s;
}
.store-footer h3{
color: var(--hover-color);
}
/*
.footer-is-light .store-footer .store-footer__inner:hover:after{
animation: shine 1.5s ease-out infinite;
}
*/

.store-footer__inner a h3 {
 display: none;
}
.store-footer a{
color:var(--main-color);
border-color:var(--main-color);
}
.store-footer a:hover {
 color: var(--hover-color);
 border-color:var(--hover-color);
}
.store-footer a:hover span {
 border-color: var(--hover-color);
}

.text-center::before {
 content: "برمجه وتطوير Happy Seasons";
 display: block;
 text-align: center;
 background:var(--pacificBlue-color);
 padding: 10px;
 color: pacific blue;
}

@keyframes shine {
 0% {
   left: -100px;
 }

 60% {
   left: 100%;
 }

 to {
   left: 100%;
 }
}
.banner-entry {
 width: 42vw;
 min-height: 100px;
}

.lazy__bg {
 background-size: 100% 100%;
 background-size: contain !important;
 background-repeat: no-repeat !important;
}

.gap-3 {
 display: flex;
 flex-wrap: nowrap;
 justify-content: center;
}

@media only screen and (max-width: 600px) {
 .banner-entry {
   height: auto;
 }
}

@media (min-width: 768px) {
 .two-row .banner-entry:first-child {
   height: auto !important;
 }
}
.banner-entry {
  width: 42vw;
  min-height: 100px;
  background: transparent;
}