.md\:text-end.show_all.md\:block{
  display:none !important;
text-align:center;
margin:5% 0px;
}
.show_all a{
  color: var(--primary-color) !important;
  font-weight: bold;
  border-bottom: 2px solid var(--primary-color);
  font-size: 20px;
  
}

.loading_card_spinner{
position:fixed;
top:40%;
left:40%
}
.loading_card {
min-height: 600px;
bottom: 0;
height: 100%;
right: 0;
background-color: white;
box-shadow: 0 0 5px 5px rgb(0 0 0 / 10%);
opacity: 1;
overflow: hidden;
position: fixed;
top: 0;

width: 100%;
z-index: 1062;
}
@media only screen and (max-width: 500px) {

.loading_card_spinner{
position:fixed;
top:40%;
left:20%;
}

}

.VueCarousel-dot-container{
margin:0px !important;
}

button.VueCarousel-dot {
margin: 0px !important;
}
button.VueCarousel-dot:focus {
outline: none !important;
}
.flag
{
/* margin-top: -51px !important; */
float: left !important;
/* height: 40px !important; */
border-radius: 40% !important;
/* width: 50px !important; */
display: inline-flex;
flex-wrap: wrap;
flex-direction: row-reverse;
align-content: stretch;
justify-content: center;
direction: ltr;
}

.flag img{
width: 35px;
height: 35px;
border-radius: 35px;
border: 1px solid var(--primary-color);
margin-left: 6px;
}
.flag h2
{   
margin-top: 10px;
padding: 0 10px;}

@media (max-width: 400px) {
.flag h2
{   
font-size:9px !important;}

#topnav .logo, #topnav.nav-sticky .logo {
width:60px !important;
}

.product_list_img img{
height:200px !important;
max-height:200px !important;
}
}
.add_address_order .vodal-dialog {

height: 650px !important;
top: 6%;

overflow-y: scroll;
   
   width:650px !important;
}


@media (max-width: 800px) {
   
   .main_product_img {
width: 455px;
max-width:100%;
height: 400px !important;
object-fit: cover;
}


nav .container {
padding-right: 1rem;
padding-left: 1rem;
}

.product_list_img {
height:200px !important;
max-height:200px !important;
}

.product_title{
 font-size:14px !important;
}

.checkout_page{
 display:flex !important;
 flex-direction:column-reverse ;
}

 .add_address_order .vodal-dialog {
  height: 650px !important;
  top: 10%;
  overflow-y: scroll;
  width: 90% !important;
}
}


 @media (max-width: 500px) {
     .page_title {
padding-top: 2rem !important;
padding-bottom: 1rem !important;
}
     .price_card_cart{
  display: flex !important;
flex-direction: column;


}

.track_popup_form {

  top: 25%;
  left: 12%;
  right: 12%;
  background-color: white;
}


.banner_section{
background-size: contain;
max-height: 240px !important;
min-height:240px !important;;
background-position: bottom;
}
}


@media (max-width: 400px) {

.track_popup_form {

  top: 20%;
  left: 8%;
  right: 8%;
  background-color: white;
}
.banner_section{
height: 191px!important ;
max-height:191px !important;
min-height:191px !important;
background-size: contain;
background-position: bottom;
}
    
}

.vs__dropdown-toggle {

padding: 0 0 0px;
border: 0px !important;
}




.banner_section h4{
  min-height:200px;
}
.banner_section .grid{
  padding:10% 5%;
}
.loading_card {
min-height: 600px;
bottom: 0;
height: 100%;
right: 0;
background-color: white;
box-shadow: 0 0 5px 5px rgb(0 0 0 / 10%);
opacity: 1;
overflow: hidden;
position: fixed;
top: 0;

width: 100%;
z-index: 1062;
}
#topnav img.rounded-full
{
filter: invert(1) !important;
}

#topnav .navigation-menu.nav-light > li.active > a {
  --tw-text-opacity: 1 !important;
  color: var(--primary-color) !important;
}
@media only screen and (max-width: 600px) {

.modal-mask {
top: 30%;
position: fixed;
z-index: 99999;
left: 25%;
padding: 2% 5%;
border: 5px solid #f8fafc;
background-color: white;
}
}
.hooper.is-rtl {
width:100% !important;
} 
.col-lg-6{
width:100% !important;
}
@media screen and (min-width: 900px) {

.col-lg-6{
width:50% !important;

}
    
    .btn_filter,.cancel_btn_filter {display:none !important;} 
}



@media screen and (max-width: 600px) {

.track_popup_form .row {
display: flex;
flex-direction: column-reverse;
}
.md\:text-end.show_all.md\:block{display:block !important;}

nav .container {
padding-right: 2rem;
padding-left: 2rem;
}
a.lgin_btn_header {
font-size: 9px;
}
}

.track_popup .container {

  padding-right: 0.2px !important;
  padding-left: 0.2px !important;
}

#animated-text-strip {
background: #ffffff !important;
display:none;

}

.group p {
font-size: 20px;
font-weight: bold;
}




.VueCarousel-dot-container {
margin: 0px !important;
}

button.VueCarousel-dot {
margin: 0px !important;
}

button.VueCarousel-dot:focus {
outline: none !important;
}

.main_product_img {
width: 455px;
height: 592px;
object-fit: cover;
}

.flag {
/* margin-top: -51px !important; */
float: left !important;
/* height: 40px !important; */
border-radius: 40% !important;
/* width: 50px !important; */
display: inline-flex;
flex-wrap: wrap;
flex-direction: row-reverse;
align-content: stretch;
justify-content: center;
direction: ltr;
}

.flag img {
width: 35px;
height: 35px;
border-radius: 35px;
border: 1px solid var(--primary-color);
margin-left: 6px;
}

.flag h2 {
margin-top: 10px;
padding: 0 10px;
}


.loading_card_spinner{
position:fixed;
top:40%;
left:40%
}

.page_title{
padding-top: 6rem !important;
padding-bottom: 1rem !important;

}

.form-select{
background-position: left 0.5rem center !important;

}
.btn_header_cart a, .btn_header_cart a:hover {
font-size: 12px;
}

.loading_address{
margin:100px 200px !important
}

[dir="rtl"] .vs__dropdown-option {
text-align: right !important;
}
.sections_mobile{
  display: none !important;
}

@media (min-width: 1200px) {
.add_address_order .vodal-dialog {
width: fit-content !important;
padding: 0px !important;
height: max-content !important;
top: 20%;
min-width:500px;
}

.banner_section {
min-height: 500px !important;
background-size:cover !important;
}


}

@media (max-width: 1000px) {
  .filter_mobile{
    display: block;
    position: fixed;
    top: 80px;
    background-color: white;
    z-index: 9;
    height: 100%;
    width:100%;
    overflow-y: scroll;
  
  }
  .cancel_btn_filter{
    position: fixed;
    bottom: 5%;
    z-index: 99;
    left: 5%;
   min-width:100px !important;
    display: none !important;
  }
  .btn_filter{
    position: fixed;
    bottom: 5%;
    z-index: 99;
    left: 5%;
   min-width:100px !important;
    display: block !important;
  }



.banner_section{
height: 400px;
background-size: contain !important;
background-position: bottom !important;  
}

.filter_mobile{
  display:none;
}

.section_website{
  display:none !important
}
.sections_mobile{
  display: block !important;
}
.section_item{
  margin:0px 8px;
}

}



@media (max-width: 800px) {


.loading_card_spinner{
position:fixed;
top:30%;
left:35%
}

.banner_section {
height: 400px !important;
background-size: contain !important;
background-position: bottom !important;}


}
@media (max-width: 650px) {
.banner_section
{
height: 300px !important;
background-size: contain !important;
background-position: bottom !important;
}
}

@media (max-width: 500px) {
.banner_section {
height: 240 !important;
background-size: contain !important;
background-position: bottom !important;
}


}
@media (max-width: 450px) {
.banner_section {
height: 210px !important;
background-size: contain !important;
background-position: bottom !important;
}


}

@media (max-width: 400px) {
.flag h2 {
font-size: 9px !important;
}

#topnav .logo,
#topnav.nav-sticky .logo {
width: 60px !important;
}

.product_list_img {
height: 200px !important;
}

.loading_card_spinner{
position:fixed;
top:30%;
left:25%
}

.banner_section {
height: 200px  !important;
background-size: contain !important;
background-position: bottom !important;
}


}

@media (max-width: 350px) {
.banner_section {
height: 140 !important;
background-size: contain !important;
background-position: bottom !important;
}


}

.price_one_product span{
  font-size:20px;
}
  .product_description {
  min-height: fit-content !important;
}

.section_grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.section_grid::-webkit-scrollbar {
  height: 8px; /* ارتفاع شريط التمرير */
}
.section_grid::-webkit-scrollbar-thumb {
  background-color: #cccccc; /* لون شريط التمرير */
  border-radius: 4px; /* حواف مستديرة */
}

.slide-left {
  animation: 1s slide-left;
}
@keyframes slide-left {
  from {
    left: 100%;
  }
  to {
   left: 0%;
  }
}