:root {
    
  --main-color: #000000;
  --second-color: #aecb06;
  --third-color: #fafafa;
  --forth-color: #565655;
  
  /* --third-color: #F0F032; */
  
}
/* -----------------products category style-------------------- */
#categories-container {
  margin-top: 6rem;
  margin-bottom: 6rem;
}
.category-box {
  background-color: #fff;
  margin-bottom: 2rem;
  height: 520px;
  transform: scale(1.05);
  border: 1px solid #00000026;
  border-radius: 5px;
  overflow: hidden;
}

.category-box:hover {
box-shadow: 0px 0px 10px #00000024;

}

.category-box a img {

transition: transform 0.3s ease;
}

.category-box a img:hover {

transform: scale(1.05);
}
.category-box h1 {
font-size: 1.5rem;
color: #aecb06;
margin: 3rem;
}

.category-box h5 {
font-size: 1.1rem;
color: #212121;
/* border: 1px; */
margin: 3rem;
}

.category-img {
background-color: #ffffff;
width: 70%;
height: auto;
border-radius: 8px;
display: inline-block;
position: relative;
margin: 35px;

}



.category-img:before {
content: '';
position: absolute;
border: 3px solid #aecb06;
border-radius: 8px;
width: 105%;
height: 103%;
top: -2px;
left: -4px;
transform: rotate(353deg);
z-index: -1;
}

.category-img:after {
transform: rotate(-3deg);
}


/* -------------products sidebar --- ----------------*/

/* تنسيق الشريط الجانبي */


.sidebar {
height: 100%;
max-height: 100vh;
margin-top: 2rem;
margin-bottom: 2rem;
/* width: 21%; */
/* background-color: #444444; */
/* margin-inline-start: 5px; */
/* border-right: 1px solid #ddd; */
padding: 0;
overflow-y: auto;
}
/* @media only screen and (max-width: 450px) {

.sidebar {

  width: 100vw!important;
}
} */


.sidebar h4 {
color: #ffffff;
margin-bottom: 20px;
}

.sidebar ul {
border-inline-start: 4px solid #aecb06;
padding-left: 4px;

}

.sidebar .li {
background-color: #444444;
border-bottom: 1px solid #00000033;
padding: 3px;


}

.sidebar .nav-item:hover {
background-color: #565655;
color: #ffffff;

}


.sidebar .nav-link {
padding: 10px;
font-size: 15px;
color: #adb5bd;
transition: all 0.5s ease;
border-bottom: 1px solid #00000024;
background-color: #444444;
}

.sidebar .nav-link:hover {
background-color: #565655;
color: #ffffff;

}




.product-details .details-img .images .text-center {
position: relative;
z-index: 3;
}

/* ---------------------------- */





/* القائمة الجانبية على الشاشات الصغيرة */
@media (max-width: 768px) {
.breadcrumbs {
  display: none;
}

.sidebar_mobile_button h5{
  margin-inline-end: 50px;
  float: inline-end;
  font-size: medium;
}

#sidebar {
  position: fixed;
  top: 15vh;
  height: 100%;
  left: -250px;
  width: 250px;
  z-index: 9999;
  transition: all 0.3s ease;
  height: 80vh;
}

/* عند تفعيل القائمة الجانبية */
#sidebar.active {
  left: 0;
}
.sidebar .nav-link{
  font-size: 13px;
  
}
}

/* زر التحكم بالقائمة */
#sidebar-toggle {
position: absolute;
right: 10px;
width: 30px;
height: 30px;
background: transparent;
border: none;
cursor: pointer;
z-index: 300;
transition: all 0.3s ease;
}
#sidebar-toggle:focus{
outline: none!important;
}

/* الأشرطة الثلاثة لزر القائمة */
#sidebar-toggle span {
display: block;
width: 100%;
height: 4px;
background: #333;
margin-bottom: 6px;
transition: all 0.3s ease;
}

/* تحول الأشرطة الثلاثة إلى علامة X */
#sidebar-toggle.active span:nth-child(1) {
transform: rotate(45deg);
position: relative;
top: 8px;
}

#sidebar-toggle.active span:nth-child(2) {
opacity: 0;
}

#sidebar-toggle.active span:nth-child(3) {
transform: rotate(-45deg);
position: relative;
top: -12px;
}