/* Add custom CSS styles below */ 
@import url('https://fonts.googleapis.com/css2?family=Almarai:wght@300;400;700;800&display=swap');

body {
font-family: "Almarai", sans-serif;
}

.icolor {
  padding: 100px !important;
  background-image: url("https://themes.muffingroup.com/be/carwash3/wp-content/uploads/2022/05/carwash3-section-bg4.svg");
  background-repeat: no-repeat;
  background-position: top center;
  background-size: fill; /* makes the image cover the element */
  filter: grayscale(100%);
}



.icolor .s-block--enhanced-features__item{
background:white!important;
border-radius:15px!important;
box-shadow: 0 0 40px -19px rgba(0,0,0,0.25);
}

.icolor i{
color:#000!important;
}

.slide--one-third article > div{
background-color:white!important;
color:black!important;
}
.slide--one-third article > div > p{
color:#333!important;
}

.slide--one-third article > div > a{
color:#000!important;
}

.slide--one-third article{
transition: 0.4s!important;
}

.slide--one-third article:hover{
color:black!important;
transform: translateY(-15px)!important;
box-shadow: 0px 10px 38px -30px rgba(0,0,0,0.75);
-webkit-box-shadow: 0px 10px 38px -30px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 10px 38px -30px rgba(0,0,0,0.75);
transition: 0.4s;
}

.s-slider-swiper-wrapper{
padding:30px 0px;
}

.swipierse{
margin-top:-30px;
}

body.trans_header.slider_has_overlay .store-header .main-nav-container.fixed-header{
color:black;
background:white;
}

.fixed-header .inner{
box-shadow: 4px 1px 51px -19px rgba(0,0,0,0.75)!important;
margin:10px auto;
width:95%!important;
border-radius:20px;
}

body.trans_header.slider_has_overlay .store-header .main-nav-container a.navbar-brand{
  background-image: url('https://i.postimg.cc/q79m4pV1/png-white.png');
  background-size: contain;
  background-repeat: no-repeat;
  display: inline-block;
  width: 200px; /* عدل حسب حجم الشعار */
  height: 60px; /* عدل حسب الحجم */
  margin-bottom:-15px;

}

body.trans_header.slider_has_overlay .store-header .main-nav-container a.navbar-brand img{
  display: none; /* إخفاء العنصر القديم إن لزم */
}

body.trans_header.slider_has_overlay .store-header .main-nav-container.fixed-header a.navbar-brand {
   background-image: url("http://almodroid.com/wp-content/uploads/2025/09/the-cover-logo.png")!important;
  background-size: contain;
  background-repeat: no-repeat;
  display: inline-block;
  width: 200px; /* عدل حسب حجم الشعار */
  height: 60px; /* عدل حسب الحجم */
  margin-bottom:-10px!important;
}

body.trans_header.slider_has_overlay .store-header .main-nav-container.fixed-header a.navbar-brand img{
  display: none; /* إخفاء العنصر القديم إن لزم */
}

.marquee{
background:#eee;
transform:rotate(2deg);
}

.marquee__group{
 height:50px;
 background:#eee;
 }
 
 .banner--fixed img{
 border-radius: 20px;
 }
 
.store-header .main-nav-container a > span{
font-size:14px!important;
}

body.trans_header.slider_has_overlay .store-header .main-nav-container a > span:hover{
color:#ccc!important;
}

body.trans_header.slider_has_overlay .store-header .main-nav-container.fixed-header a > span:hover{
color:#555!important;
}

.s-product-card-image-full{
border-radius:20px!important;
}

.product-card__promotion{
border-radius:7px!important;
}

.review > div {
  position: relative;
  padding: 20px;
  border-radius: 20px;
  background: #fff;
  color: #fff !important;
  z-index: 1;
  overflow: hidden;
  border: 3px solid #ccc; /* Default gray border */
  box-shadow: 0px 10px 38px -30px rgba(0, 0, 0, 0.35);
  transition: 0.5s;
  animation: borderAnimation 1.5s infinite alternate; /* Adding the animation */
}

@keyframes borderAnimation {
  0% {
    border-color: #eee; /* Lighter gray */
  }
  50% {
    border-color: #888; /* Mid gray */
  }
  100% {
    border-color: #555; /* Darker gray */
  }
}

.review > div:hover {
  position: relative;
  padding: 20px;
  background: #000;
  transition: 0.5s;
  animation: borderAnimation 0.8s infinite alternate; /* Adding the animation */
  transform: translateY(-5px)!important;
  box-shadow: 0px 10px 38px -30px rgba(0, 0, 0, 0.75);
}

.review > div:hover p{
  color: #fff!important;
  
}

.s-comment-form-input{
background-color:#f6f7f8!important;
border:1px solid #cecece!important;
}

.app-inner .container .breadcrumbs {
display:none!important;
}

#app > div.app-inner.flex.flex-col.min-h-full.bg-storeBG > footer > div > div.store-footer__inner > div > div.text-center.order-1.lg\:order-\[unset\] > h3{
color:white;
}

.main-menu li>a:hover{
color:gray!important;
}

.enhanced-title-border:after, .enhanced-title-border:before{
background:black!important;
}

.enhanced-title-border{
border:black 2px solid;
}

.how{
margin-bottom:0px!important
}

.how a{
text-align:center;
border-radius:50px!important;
}
.how a:hover{
background:black;
color: white;
}

.how h2{
color:black;
}

.how .md\:w-5\/12 {
  width: 75.666667%;
}
.how .md\:w-7\/12 {
  width: 49.333333%;
}

.how video{
border-radius:20px!important;
max-height:600px!important;
}

::-webkit-scrollbar {
  width: 12px;
  height: 40px;
}

::-webkit-scrollbar-thumb {
  background: #000;
  border-radius: 6px; 
}

::-webkit-scrollbar-thumb:hover {
  background: #222;
}

* {
  scrollbar-width: thin;
  scrollbar-color: #000 auto;
}


/* للشاشات الصغيرة */
@media (max-width: 768px) {
  footer > div > div.store-footer__inner > div > div > a img{
  max-width:250px!important;
  height:40px!important;
  }
  .icolor{
  padding: 10px !important;
  }  
}
@media (max-width: 430px) {
.how .md\:w-7\/12 {
    width: 90%;
    text-align: center;
}
.how .md\:w-5\/12 {
    width: 90%;
}
.how h2{
text-align:center;
}
.how p{
text-align:center;
}
}