/* Add custom CSS styles below */ 
@import url(https://fonts.googleapis.com/css2?family=Cairo:wght@200;300;400;500;600;700;800;900;1000&display=swap);

:root{
    --main-color:#fcc165;
    --second-color:#E1407B;
    --third-color:#FFF;
    --hover-color:#E1407B;;
    --logo:url(https://cdn.salla.sa/cdn-cgi/image/fit=scale-down,width=400,height=400,onerror=redirect,format=auto/pQKrEK/WYL7oIXVj0MiWzfcNo3zX0Eht7y9n7swhbNdoIae.png)
}
body:after{
    content:"";
    width:100%;
    height:100%;
    top:0;
    position:fixed;
    z-index:999999;
    background:#fff var(--logo);
    left:0;
    background-repeat:no-repeat;
    background-position:center;
    background-size:160px;
    animation-name:fade-in;
    animation-duration:.5s;
    transform:scale(0);
    border:none
}
@keyframes fade-in{
    0%,75%{
        opacity:1;
        transform:scale(1)
    }
    100%{
        opacity:0;
        transform:scale(.1)
    }
}
*,body,html{
    font-family:Cairo,sans-serif!important
}
.navbar-brand img {
    max-width: 170px;
    height: 5rem !important;
    scale: 2.5;
}

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

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

.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;
}


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

  60% {
    left: 100%;
  }

  to {
    left: 100%;
  }
}

.s-product-card-content  {
  text-align: center !important;
}
.s-product-card-props, .s-product-card-content-sub.justify-between {
  justify-content: center;
}