/* Add custom CSS styles below */ 
body::before {
    content: " ";
    background-color: #ffff;
    position: fixed;
    top: 0;
    left: 0;
    width: 0%;
    height: 100%;
    z-index: 9998;
    opacity: 0;
    animation: intro 2s;
}

body:after {
    z-index: 9999;
    position: fixed;
    content: "";
    background-image: url('https://cdn.salla.sa/EZNDZG/i1mHsqnUOdf6vHHagRa4PFhm402QxiF9yDXqsUlP.png') !important;
    background-position: center;
    background-size: 50px;
    background-repeat: no-repeat;
    width: 0px;
    transform: translate(50px, -50px) scale(2) rotateY(0deg); /* Y-axis rotation */
    height: 100px;
    right: 50%;
    top: 50%;
    opacity: 0;
    visibility: visible !important;
    background-color: transparent !important;
    animation: intro_logo 1.5s;
}

@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: 100px;
        opacity: 0.8;
        transform: translate(50px, -50px) scale(2) rotateY(0deg); /* Initial Y-axis rotation */
    }

    50% {
        opacity: 0.9;
    }

    70% {
        opacity: 1;
    }

    80% {
        opacity: 1;
    }
    99% {
        width: 100px;
    }

    100% {
        width: 0;
        opacity: 0;
        display: none;
        transform: translate(50px, -50px) scale(2) rotateY(360deg); /* Y-axis rotation */
    }
}
/* Styling for carousel control buttons */
/* تحديد موقع الأسهم بالنسبة لعنصر الكاروسيل */
#image-slider-section {
    position: relative; /* جعل العنصر نسبيًا ليمكن تحديد موقع الأسهم بالنسبة له */
}

/* Styling for carousel control buttons */
.carousel-control-prev,
.carousel-control-next {
    width: 50px; /* تعديل حجم الأسهم */
    height: 50px; /* تعديل حجم الأسهم */
    background-color: transparent; /* إزالة لون خلفية الأسهم */
    border: none; /* إزالة الحدود */
    z-index: 1; /* لجعل الأسهم فوق الصور */
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 50%; /* تحديد الموضع بالنسبة للأب */
    transform: translateY(-50%); /* وضع الأسهم في الوسط بالنسبة للصور */
    font-size: 0; /* إخفاء النص */
}

.carousel-control-prev {
    left: 10px; /* المسافة من الجانب الأيسر */
}

.carousel-control-next {
    right: 10px; /* المسافة من الجانب الأيمن */
}

.carousel-control-prev-icon:before,
.carousel-control-next-icon:before {
    content: '\203A'; /* رمز السهم اليساري */
    color: rgba(255, 255, 255, 0.5); /* لون السهم مائل للشفاف */
    font-size: 100px; /* حجم السهم */
    position: relative;
    top: 9px;
    transition: color 0.3s; /* تحديد انتقال اللون */
  
}

.carousel-control-next-icon:before {
    content: '\2039'; /* رمز السهم اليميني */
}

/* تغيير لون السهم عند تحريك المؤشر فوق الصور */
#image-slider-section:hover .carousel-control-prev-icon:before,
#image-slider-section:hover .carousel-control-next-icon:before {
    color: rgb(229 22 87); /* لون السهم عند تحريك المؤشر */
}
/* Styling for carousel indicators */
.carousel-indicators {
    position: absolute;
    bottom: 10px; /* المسافة من أسفل الصور */
    left: 50%; /* تحديد الموضع بالنسبة للأب */
    transform: translateX(-50%); /* وضع الدوائر في الوسط بالنسبة للصور */
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
}

.carousel-indicator {
    width: 10px; /* تعيين عرض الدائرة */
    height: 10px; /* تعيين ارتفاع الدائرة */
    background-color: rgba(255, 255, 255, 0.5); /* لون الدائرة */
    border-radius: 50%; /* شكل الدائرة */
    margin: 0 5px; /* المسافة بين الدوائر */
    cursor: pointer;
    transition: background-color 0.3s; /* تحديد انتقال اللون */
}

.carousel-indicator.active {
    background-color: white; /* لون الدائرة عندما تكون نشطة */
}
.s-block--features__item .feature-icon {
    background-color: #eb195a00;
}

/*gif-icon*/
.sicon-add_col_before:before {
    content: "";
    display: inline-block;
    width: 50px; /* Adjust the width as needed */
    height: 50px; /* Adjust the height as needed */
    background: url('https://i.ibb.co/Drm9dzb/wired-gradient-1845-rose.gif') no-repeat;
    background-size: cover; /* This will make the image cover the entire container */
}

.sicon-add_row_after:before{
 content: "";
    display: inline-block;
    width: 50px; /* Adjust the width as needed */
    height: 50px; /* Adjust the height as needed */
    background: url('https://i.ibb.co/y881RFg/wired-gradient-497-truck-delivery.gif') no-repeat;
    background-size: cover; /* This will make the image cover the entire container */
}
.sicon-add_row_before:before {
 content: "";
    display: inline-block;
    width: 50px; /* Adjust the width as needed */
    height: 50px; /* Adjust the height as needed */
    background: url('https://i.ibb.co/kyY0Bcf/wired-gradient-1339-sale.gif') no-repeat;
    background-size: cover; /* This will make the image cover the entire container */
}

/*add logo in footer*/
a.flex.items-center.m-0::after {
  content: '';
  display: inline-block;
  width: 100px; /* Adjust the width of the logo */
  height: 100px; /* Adjust the height of the logo */
  background-image: url('https://cdn.salla.sa/EZNDZG/i1mHsqnUOdf6vHHagRa4PFhm402QxiF9yDXqsUlP.png');
  background-size: contain;
  background-repeat: no-repeat;
  margin-left: 5px; /* Adjust the space between text and logo */
}

/*footer sitting*/ 
a.flex.items-center.m-0 {
    display: flex;
    flex-direction: column-reverse;
}
.max-w-sm {
    max-width: none; /* This removes the maximum width restriction */
}
#app > div.app-inner.flex.flex-col.min-h-full > footer > div.store-footer__inner > div{
    display: grid;
    justify-items: center;
}