:root {
  --rad: .7rem;
  --dur: .3s;
  --color-dark: #2d2d2d;
  --color-light-1: #f7f7f7;
  --color-light-2: #e2e1e1;
  --color-brand: #fc5d35;
  --font-fam: 'Poppins', sans-serif;
  --height: 2rem;
  --btn-width: 3rem;
  --bez: cubic-bezier(0, 0, 0.43, 1.49);
  --breakpoint-xs: 0;
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

*, *::before, *::after {
  box-sizing: border-box;
}

html {
  font-family: sans-serif;
  line-height: 1.15;
  scroll-behavior: smooth;
  scrollbar-color:  var(--color-brand) var(--color-light-2);

}

body {
  height: 100%;
  width: 100%;
  margin: 0;
  overflow-x: hidden;
  font-family: var(--font-family-sans-serif);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-dark);
  text-align: left;
  background-color: #fff;
}


ol, ul, dl {
  margin-top: 0;
  margin-bottom: 1rem;
}

a {
  color: var(--color-dark);
  text-decoration: none;
  background-color: transparent;
  transition: 0.3s;
}

a:hover {
  color: var(--color-brand);
  text-decoration: none;
}

/*header section*/
.hero_area {
  background-color: var(--color-light-1);
  height: 100%;
}

/* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! */
.navbar {
  position: relative;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: justify;
  justify-content: space-between;
  padding: 0.5rem 1rem;
  padding-top: 1rem
}

.navbar-nav {
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  margin-bottom: 0;
  list-style: none;
}

.navbar-collapse {
  display: flex;
  -ms-flex-positive: 1;
  flex-grow: 1;
}

.nav_container {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

.left-side-nav-bar {
  display: flex ;
  margin-left: auto ;
  -ms-flex-align: center;
  align-items: center ;
  -ms-flex-direction: row;
  flex-direction: row
}
/* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! */


.navbar-brand {
  padding-top: 0.3125rem;
  padding-bottom: 0.3125rem;
  margin-right: 1rem;
  line-height: inherit;
  white-space: nowrap;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 24px;
  display: flex;
  align-items: center;
}

.navbar-brand img {
  width: 45px;
  margin-right: 5px;
}

.navbar-brand span {
  font-size: 20px;
  font-weight: 700;
  color: var(--color-dark);
  margin-top: 5px;
}

.navbar-toggler-l , .navbar-toggler-r {
  padding: 0.25rem 0.75rem;
  font-size: 1.25rem;
  line-height: 1;
  background-color: transparent;
  border: 1px solid transparent;
  margin-right: 10px;
}

.navbar-toggler-icon-l , .navbar-toggler-icon-r {
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  vertical-align: middle;
  content: "";
  background: no-repeat center center;
  background-image: url(images/menu.png);
  background-size: 55px;
}

.navbar-toggler-r {
  display: none;
}

.cart_btn-container , .quote_btn-container {
  display: flex ;
  padding-right: 5px;
  margin-top: 10px;
  margin-left: 1.5rem ;
}

.cart_btn-container img ,.quote_btn-container img {
  height: 30px;
  width: 30px;
}

@media (min-width: 992px) {
  /* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! */
  .navbar {
    -ms-flex-flow: row nowrap;
    flex-flow: row nowrap;
    -ms-flex-pack: start;
    justify-content: flex-start;
  }
  .navbar .navbar-nav {
    -ms-flex-direction: row;
    flex-direction: row;
  }
  /* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! */

  .navbar .navbar-nav .nav-link {
    padding: 15px 15px;
    text-align: center
  }
}

@media (max-width: 992px) {
  .hero_area{
    height: 100%;
    padding-bottom: 5%;
  }
  .navbar-collapse ,  .navbar-toggler-l {
    display: none;
  }
  .navbar-toggler-r {
    display: flex;
  }
}


/* search bar */
.fs {
  position: relative;
  width: 15rem;
  background: var(--color-brand);
  border-radius: var(--rad);
}
.ins, .bs {
  height: var(--height);
  font-family: var(--font-fam);
  border: 0;
  color: var(--color-dark);
  font-size: 17px;
}
.ins {
  outline: 0; 
  width: 100%;
  background: white;
  padding: 0 1.6rem;
  border-radius: var(--rad);
  appearance: none; 
  transition: all var(--dur) var(--bez);
  transition-property: width, border-radius;
  z-index: 1;
  position: relative;
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2); /* Set shadow properties */
}
.ins:not(:placeholder-shown) {
  border-radius: var(--rad) 0 0 var(--rad);
  width: calc(100% - var(--btn-width));
  + button {
    display: block;
  }
}
/* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! */
.bs {
  display: none; 
  position: absolute;
  top: 0;
  right: 0;
  font-weight: 700;
  width: var(--btn-width);
  background: var(--color-brand);
  border-radius: 0 var(--rad) var(--rad) 0;
}
/* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! */


/* the lang switch */
.switch {
  position: relative;
  display: inline-block;
  margin-left: 20px;
  margin-top: 5px;
}

.switch > span {
  position: absolute;
  top: 10px;
  pointer-events: none;
  font-family: 'Helvetica', Arial, sans-serif;
  font-weight: bold;
  font-size: 12px;
  text-transform: uppercase;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .06);
  width: 50%;
  text-align: center;
}

input.check-toggle-round-flat:checked ~ .off {
  color: var(--color-brand);
}

input.check-toggle-round-flat:checked ~ .on {
  color: white;
}

.switch > span.on {
  left: 0;
  padding-left: 2px;
  color: var(--color-brand);
}

.switch > span.off {
  right: 0;
  padding-right: 2px;
  color: white;
}

.check-toggle {
  position: absolute;
  margin-left: -9999px;
  visibility: hidden;
}

.check-toggle + label {
  display: block;
  position: relative;
  cursor: pointer;
  outline: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

input.check-toggle-round-flat + label {
  padding: 2px;
  width: 100px;
  height: 35px;
  background-color: var(--color-brand);
  -webkit-border-radius: 60px;
  -moz-border-radius: 60px;
  -ms-border-radius: 60px;
  -o-border-radius: 60px;
  border-radius: 60px;
}

input.check-toggle-round-flat + label:before, input.check-toggle-round-flat + label:after {
  display: block;
  position: absolute;
  content: "";
}

input.check-toggle-round-flat + label:before {
  top: 2px;
  left: 2px;
  bottom: 2px;
  right: 2px;
  background-color: var(--color-brand);
  -moz-border-radius: 60px;
  -ms-border-radius: 60px;
  -o-border-radius: 60px;
  border-radius: 60px;
}

input.check-toggle-round-flat + label:after {
  top: 4px;
  left: 4px;
  bottom: 4px;
  width: 48px;
  background-color: white;
  -webkit-border-radius: 52px;
  -moz-border-radius: 52px;
  -ms-border-radius: 52px;
  -o-border-radius: 52px;
  border-radius: 52px;
  -webkit-transition: margin 0.2s;
  -moz-transition: margin 0.2s;
  -o-transition: margin 0.2s;
  transition: margin 0.2s;
}

input.check-toggle-round-flat:checked + label:after {
  margin-left: 44px;
}
/* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! */
/*end header section*/



/* side bar section */
.bar {
  background: white;
  height: 80vh;
  border:5px solid var(--color-brand);
  border-radius: var(--rad);
  width: 18rem;
  position: fixed;
  top: 5rem;
  left: -20rem;
  right: auto;
  z-index: 3;
  transition: 0.5s;
  z-index: 3;
  padding:1rem 0 0 4rem;
  overflow-y:auto;
  scrollbar-color:  var(--color-brand) var(--color-light-2);
}

.admin-permissions {
  display: none;
}
/* side bar section */



/* slider section */
.slider_section {
  padding-top: 8%;
}

.row {
  display: flex;
  margin-right: -15px;
  margin-left: -40px;
}

.col-desc , .col-img {
  max-width: 50%;
  position: relative;
}

.slider_img-box {
  padding-top: 5%;
}

.slider_img-box img {
  max-width: 100%;
}

.slider_item-detail {
  margin-left: 15%;
}

.slider_item-detail h1 {
  font-weight: 700;
  font-size: 60px;
  width: 95%;
}

.slider_item-detail p {
  margin: 45px 0;
}

.shopnow {
  display: flex;
  margin-top: 0%;
  text-transform: uppercase;
}

.shopnow-btn-a {
  display: inline-block;
  padding: 10px 0;
  text-align: center;
  text-transform: uppercase;
  width: 145px;
  outline: none;
  color: var(--color-light-1);
  border: 1px solid transparent;
  background-color: var(--color-brand);
}

.shopnow-btn-a:hover {
  border: 1px solid var(--color-brand);
  color: var(--color-brand);
  background-color: transparent;
}

@media (max-width: 992px) {
  .slider_item-detail h1 {
    font-size: 250%;
  }
  .slider_item-detail p {
    font-size: 12.5px;
  }
}

@media (max-width: 768px) {
  .hero_area{
    height: 100%;
  }
  .row{
    display: block;
  }
  .col-desc , .col-img , .col-md-3{
    max-width: 100%;
  }
  .slider_item-detail p {
    font-size: 12.5px;
    max-width: 100%;
  }
}
/* end slider section */


/* products section*/
.container {
  width: 100%;
  padding: 45px 0;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

.custom_heading {
  text-align: center;
  font-weight: bold;
}

.card-body {
  padding: 1.25rem;
}

.card-title {
  margin-bottom: 0.75rem;
}

.card-subtitle {
  margin-top: -0.375rem;
  margin-bottom: 0;
}

.card-deck {
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
}

.card-deck .card {
  margin-bottom: 15px;
}

.service_section {
  padding: 75px 0;
  position: relative;
}

.service_section .card .card-img-top {
  margin: 20px auto 5px auto;
  width: 95%;
}

.service_section .card {
  position: relative;
  display: flex;
  min-width: 0;
  background-color: #fff;
  background-clip: border-box;
  border: 1px solid rgba(0, 0, 0, 0.125);
  border-radius: 0.25rem;
  text-align: center;
  box-sizing: border-box;
}

.service_section .card .card-price {
  color: black;
}

/* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! */
.service_section .card::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 7px;
  background-color: transparent;
  transition: 0.3s;
}

.service_section .card:hover {
  cursor: pointer;
  border-radius: 0;
  -webkit-box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
  box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
}

.service_section .card:hover::after {
  background-color: var(--color-brand);
}

@media (min-width: 576px) {
  .card-deck {
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    margin-right: -15px;
    margin-left: -15px;
  }
  .card-deck .card {
    display: flex;
    -ms-flex: 1 0 0%;
    flex: 1 0 0%;
    -ms-flex-direction: column;
    flex-direction: column;
    margin-right: 15px;
    margin-bottom: 0;
    margin-left: 15px;
  }
}
/* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! */
/* end products section */



/* log in / sign up / forget password pages */
.login_page {
  background-color: white;
  padding-top: 10%;
  padding-bottom: 10%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.login_box{
  background-color: var(--color-light-1);
  width: 350px;
  padding-top: 2%;
  padding-bottom: 2%;
  padding-left: 2%;
  padding-right: 2%;
  border-radius: var(--rad);
  text-align: center;
  box-shadow: 2.5px 2.5px 5px rgba(0, 0, 0, 0.2); 
}

.login_box h2{
  text-align: center;
  color: var(--color-brand);
  text-transform: capitalize;
}

.inlogin , .inlogin_pass{
  height: 4rem;
  font-family: var(--font-fam);
  border: 0;
  color: var(--color-dark);
  font-size: 17px;
  outline: 0; 
  width: 100%;
  background: white;
  padding: 0 1.6rem;
  border-radius: var(--rad);
  appearance: none; 
  z-index: 1;
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2); /* Set shadow properties */
  transition-property: width, border-radius;
  position: relative;
}

.password_btn{
  text-align: left;
  position: relative;
  background-color: white;
  width: 100%;
  height: 4rem;
}

.show_pass_img, .show_pass_conf_img{
  width: 100%;
}

.pbs {
  position: absolute;
  padding-right: 1.2rem;
  top: 0;
  right: 0;
  border: 0;
  font-family: var(--font-fam);
  height: 4rem;
  display: none; 
  font-size: 17px;
  width: var(--btn-width);
  background: white;
  z-index: 5;
  border-radius: 0 var(--rad) var(--rad) 0;
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2); /* Set shadow properties */
}

.inlogin_pass:not(:placeholder-shown) {
  border-radius: var(--rad) 0 0 var(--rad);
  width: calc(100% - var(--btn-width));
  + button {
    display: block;
  }
}

.login_btn{
  height: 2.5rem;
  font-family: var(--font-fam);
  border: 0;
  color: var(--color-dark);
  font-size: 17px;
  font-weight: 700;
  width: 150px;
  background: var(--color-brand);
  border-radius: var(--rad);
  transition: 0.3s;
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2); /* Set shadow properties */
}

.login_btn:hover{
  color: white;
  transition: 0.3s;
}
/*end  log in */



/* contact page */
.contact_box{
  background-color: var(--color-light-1);
  width: 600px;
  height: 100%;
  padding-top: 2%;
  padding-bottom: 2%;
  padding-left: 2%;
  padding-right: 2%;
  border-radius: var(--rad);
  text-align: center;
  box-shadow: 2.5px 2.5px 5px rgba(0, 0, 0, 0.2); 
}

#contact_h{
  text-align: center;
  color: var(--color-brand);
  text-transform: capitalize;
}

.message{
  height: 200px;
  font-family: var(--font-fam);
  border: 0;
  color: var(--color-dark);
  font-size: 17px;
  outline: 0; 
  width: 100%;
  background: white;
  padding: 2.5% 2.5%;
  border-radius: var(--rad);
  appearance: none; 
  z-index: 1;
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2); /* Set shadow properties */
  transition-property: width, border-radius;
  position: relative;
}

.send_e_btn{
  height: 2.5rem;
  font-family: var(--font-fam);
  border: 0;
  color: var(--color-dark);
  font-size: 17px;
  font-weight: 700;
  width: 150px;
  background: var(--color-brand);
  border-radius: var(--rad);
  transition: 0.3s;
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2); /* Set shadow properties */
}

.send_e_btn:hover{
  color: white;
  transition: 0.3s;
}
/* end contact page */



/* comments page */
.comments_list {
  background-color: var(--color-light-1);
  width: 50%;
  padding-top: 2%;
  padding-bottom: 2%;
  padding-left: 2%;
  padding-right: 2%;
  border-radius: var(--rad);
  text-align: center;
  box-shadow: 2.5px 2.5px 5px rgba(0, 0, 0, 0.2); 
}

#comments_list_h{
  text-align: center;
  color: var(--color-brand);
  text-transform: capitalize;
}

.comment{
  text-align: left;
  background-color:#ececec;
  border-radius: var(--rad);
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2); 
  padding: 2.5%;
  margin-bottom: 2.5%;
}

.comment_sender{
  padding-left: 2.5%;
  padding-bottom: 1%;
  font-weight: 700;
}

.comment_content{
  padding-left: 5%;
}

.comment_decision{
  text-align: center;
}

.the_list{
  height: 420px;
  padding: 2.5% 2.5%;
  overflow-y: auto;
  background-color: white;
  border-radius: var(--rad);
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2); 
}

.approve , .deny{
  border: 0;
  width: 48%;
  height: 2rem;
  font-size: larger;
  border-radius: 0.5rem;
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2); 
  transition: 0.3s;
}

.deny{
  background-color: var(--color-brand);
}

.deny:hover{
  color:white;
  transition: 0.3s;
}

.approve{
  background-color: white;
}

.approve:hover{
  color:var(--color-brand);
  transition: 0.3s;
}
/* end comments page */



/* admin page */
.admin_page{
  background-color: white;
  padding-top: 10%;
  padding-bottom: 10%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: flex;
} 

.add_admin , .admin_list{  /* add admin have the same css of sign up page */
  background-color: var(--color-light-1);
  height: 570px;
  width: 350px;
  padding-top: 2%;
  padding-bottom: 2%;
  padding-left: 2%;
  padding-right: 2%;
  border-radius: var(--rad);
  text-align: center;
  box-shadow: 2.5px 2.5px 5px rgba(0, 0, 0, 0.2); 
}

.add_box h2 , #admin_list_h , #add_admin_h{
  text-align: center;
  color: var(--color-brand);
  text-transform: capitalize;
}

.admin_account{
  background-color: #f7f7f7;
  height: 60px;
  padding: 5%;
  position: relative;
  text-align: left;
  margin-bottom: 2.5%;
}

.admin_user{
  font-weight: 700;
}

.admin_account:hover .delete_admin ,.admin_account:hover  .edit_admin  {
    display:block;
    transition: 0.3s;
}

.delete_admin ,.edit_admin {
  margin: 5px;
  border: 0;
  width: 30px;
  height: 30px;
  background-color: var(--color-light-2);
  text-align: center;
  border-radius: 0.2rem;
  display: none;
}

.delete_admin:hover ,.edit_admin:hover {
  background-color: var(--color-brand);
}

.delete_admin img,.edit_admin img{
  vertical-align: middle;
  width: 20px;
  height: 20px;
}

.admin_decision{
  position: absolute;
  display: flex;
  right : 1.2rem;
  top: 0.6rem;
}
/* end admin page */



/* product  page */
.product_div{
  background-color: white;
  padding: 5%;
  display: flex;
}

.photos_container , .product_info{
  width: 50%;
  padding: 2%;
}

.product_info{direction: ltr;}

.photo_galary{
  height: 30rem;
}

.photo_galary img{
  width: 100%;
}

.golobal_revs{
  cursor: pointer;
  transition: 0.3s;
}

.tags ,.buy_product, .product_rating , .rating2{
  display: flex;
  position: relative;
}

.rating2{
  padding-left: 5%;
  padding-right: 5%;
  cursor: pointer;
}

.rating2:hover .rating3 , .golobal_revs:hover{
  color: var(--color-brand);
  transition: 0.3s;
}

.rating3{
  margin-left: 5px;
  margin-right: 5px;
  margin-top: 2.5px;
  margin-bottom: 0;
  transition: 0.3s;
}

.rate5 , .rate4_5 , .rate4 , .rate3_5 , .rate3 , .rate2_5 , .rate2 , .rate1_5 , .rate1{
  height: 16px;
  width: 80px;
  display: inline-block;
  background-size: contain;
  background-repeat: no-repeat;
  margin-top: 7.5px;
  margin-left: 5px;
}

.rate5{background-image: url("images/5.png");}
.rate4_5{background-image: url("images/4.5.png");}
.rate4{background-image: url("images/4.png");}
.rate3_5{background-image: url("images/3.5.png");}
.rate3{background-image: url("images/3.png");}
.rate2_5{background-image: url("images/2.5.png");}
.rate2{background-image: url("images/2.png");}
.rate1_5{background-image: url("images/1.5.png");}
.rate1{background-image: url("images/1.png");}

.full_star , .empty_star{
  height: 16px;
  width: 16px;
  display: inline-block;
  background-size: contain;
  background-repeat: no-repeat;
  margin-top: 7.5px;
  margin-left: 5px;
  cursor: pointer;
}

.full_star{
  background-image: url("images/full_star.png");
}

.empty_star{
  background-image: url("images/empty_star.png");
}

.quantity_minus , .quantity_plus{
  background-color: var(--color-light-2);
  color: var(--color-dark);
  cursor: pointer;
  font-size: large;
  width: 35px;
  height: 34px;
  vertical-align: middle;
  border: 0;
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2); 
  transition: 0.3s;
  margin-top: -7px;
}

.quantity_minus:hover , .quantity_plus:hover{
  color: var(--color-brand);
}

.quantity_minus{border-radius: 0.5rem 0rem 0rem 0.5rem;  margin-right: -5px;}

.quantity_plus{border-radius: 0rem 0.5rem 0.5rem 0rem;  margin-left: -5px;}

.wanted_quantity{
  background-color: var(--color-light-1);
  color: var(--color-dark);
  font-size: large;
  width: 60px;
  height: 35px;
  border: 0;
  transition: 0.3s;
  outline: none;
  margin: 0; 
  text-align: center;
}

.admin_product{
  display: none;
}

.buy{
  height: 36px;
  border: 0;
  width: 35%;
  font-size: larger;
  cursor: pointer;
  border-radius: 0.5rem;
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2); 
  transition: 0.3s;
  background-color: var(--color-brand);
  position: absolute;
  right: 0;
}

.product_edit , .product_remove , .product_add{
  border: 0;
  width: 48%;
  height: 2rem;
  font-size: larger;
  cursor: pointer;
  border-radius: 0.5rem;
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2); 
  transition: 0.3s;
}

.product_remove , .product_add{
  background-color: var(--color-brand);
}

.product_remove:hover , .product_add:hover , .buy:hover{
  color:white;
  transition: 0.3s;
}

.product_edit{
  background-color: var(--color-light-1);
}

.product_edit:hover{
  color:var(--color-brand);
  transition: 0.3s;
}

.similar_product{
  padding-top: 0;
  background-color: var(--color-light-1);
}

.product_comments{
  display: flex;
  background-color: white;
}

.db_value{color: var(--color-brand);}

.product_comments h2 {color: var(--color-dark);}

.reviews_div{
  padding-left: 5%;
  padding-right: 5%;
  width: 50%;
}

.revs{
  margin-top: 2.5px;
  color: var(--color-brand); 
  font-weight: 600;
}

.product_comments_list{
  padding: 5%;
}

.product_comment , .add_comment{
  text-align: left;
  background-color:var(--color-light-1);
  border-radius: var(--rad);
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2); 
  padding: 2.5%;
  margin-bottom: 2.5%;
}

.add_comment{
  background-color: var(--color-brand);
  margin: 5%;
  margin-top: 0%;
  display: none;
}

.comment_rate{
  padding-left: 2%;
}

.add_review_btn{
  cursor: pointer;
  height: 2.5rem;
  font-family: var(--font-fam);
  border: 0;
  color: var(--color-dark);
  font-size: 17px;
  font-weight: 700;
  width: 150px;
  background: var(--color-light-1);
  border-radius: var(--rad);
  transition: 0.3s;
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2); /* Set shadow properties */
}

.add_review_btn:hover{
  color: var(--color-brand);
  transition: 0.3s;
}

.image_background{
  height: 100vh;
  width: 150vh;
  top: 0;
  left: 0;
  background-color: black;
  position: absolute;
  z-index: 5;
  opacity: 0.9;
}

.photo_galary{
  display: flex;
}

.galary{
  width: 25%;
}

.galary_images{
  cursor: pointer;
  border-style: solid;
  border-color: var(--color-dark);
  border-radius: 0.5rem;
  height: 30%;
  width: 100px;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  transition: 0.3s;
}

.galary_images:hover{
  border-color: var(--color-brand);
  transition: 0.3s;
}

.main_photo{
  width: 500px;
  margin-left: 5%;
  margin-right: 5%;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  border-radius: 0.5rem;
}
/* end product  page */



/* add product page */
.add_img{
  background-color: var(--color-light-1);
  background-image: url('images/add.png');
  background-size:30%;
  cursor: pointer;
}

.add_product_name , .add_product_price , .add_product_stock , .add_product_tags{
  font-family: var(--font-fam);
  border: 0;
  color: var(--color-dark);
  font-size: 17px;
  outline: 0; 
  background: var(--color-light-1);
  padding: 0 1.6rem;
  border-radius: var(--rad);
  appearance: none; 
  z-index: 1;
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2); /* Set shadow properties */
  transition-property: width, border-radius;
  position: relative;
}

.add_product_price , .add_product_stock{
  height: 2rem;
  width: 100%;
}

.add_product_name , .add_product_tags{
  padding-top: 2%;
  width: 100%;
  height: 150px;
}
/* add product page */


/* cart page */
.cart_list {
  background-color: var(--color-light-1);
  width: 50%;
  padding-top: 2%;
  padding-bottom: 2%;
  padding-left: 2%;
  padding-right: 2%;
  border-radius: var(--rad);
  text-align: center;
  box-shadow: 2.5px 2.5px 5px rgba(0, 0, 0, 0.2); 
}

#cart_h{
  text-align: center;
  color: var(--color-brand);
  text-transform: capitalize;
}

.cart_product{
  text-align: left;
  background-color:#ececec;
  border-radius: var(--rad);
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2); 
  padding: 2.5%;
  margin-bottom: 2.5%;
  position: relative;
}

.cart_img_name{display: flex;}

.cart_product_img{
  height: 100px;
  width: 100px;
  border-style: solid;
  border-color: var(--color-brand);
  border-radius: 0.5rem;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  transition: 0.3s;
}

.cart_product_name{
  width: calc(100% - 100px);
  padding-left: 2%;
}

.cart_product:hover .cart_delete_product{
  display:block;
  transition: 0.3s;
}

.cart_delete_product{
margin: 5px;
border: 0;
width: 50px;
height: 50px;
position: absolute;
right: 15px;
bottom: 10px;
background-color: var(--color-light-2);
text-align: center;
border-radius: 0.2rem;
cursor: pointer;
/* display: none; */
}

.cart_delete_product:hover{
background-color: var(--color-brand);
}

.cart_delete_product img{
vertical-align: middle;
width: 40px;
height: 40px;
}

.cart_product_details{
  font-size: large;
  font-weight: 600;
}

.total_price_cart{
  text-align: left;
  font-size : x-large;
  font-weight: 700;
}

.pay{
  border: 0;
  width: 30%;
  height: 2.5rem;
  font-size: larger;
  font-weight: 700;
  border-radius: 0.5rem;
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2); 
  transition: 0.3s;
  background-color: var(--color-brand);
  cursor: pointer;
}

.pay:hover{
  color:white;
  transition: 0.3s;
}
/* end cart page */



/* search page */
.search_container{
  display: flex;
  background-color: white;
}

.search_side_bar{
  padding-left: 2.5%;
  padding-right: 2.5%;
  width: 75%;
  background-color: var(--color-light-1);
}

.price_range{
  transition: 0.3s;
}

.price_range:hover{
  cursor: pointer;
  color: var(--color-brand);
  transition: 0.3s;
}

.min_search , .max_search{
  height: 2rem;
  width: 100px;
  font-family: var(--font-fam);
  border: 0;
  color: var(--color-dark);
  font-size: 17px;
  outline: 0; 
  background: white;
  text-align: center;
  border-radius: var(--rad);
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2); /* Set shadow properties */
  margin: 1%;
  
}

.search_by_price{
  border: 0;
  width: 48%;
  height: 2rem;
  font-size: larger;
  cursor: pointer;
  background-color: var(--color-brand);
  border-radius: 0.5rem;
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2); 
  transition: 0.3s;
  margin-top: 3%;
}

.search_by_price:hover{
  color:white;
  transition: 0.3s;
}

.searched_sentence{
  padding-left: 20px;
  font-size: xx-large;
  font-weight: 700;
  display:none ;
  position: absolute;
  top: 60px;
  left: 2%;
}

.sort_section{
  position: absolute;
  top: 75px;
  right: 2%;
}

.search_sort{
  height: 25px;
  background-color: var(--color-light-1);
  border-radius: 0.3rem;
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2); /* Set shadow properties */
  border: 0;
  font-size: large;
  font-weight: 500;
}

.search_sort_lable{
  height: 25px;
  border: 0;
  margin-right: -5px;
  font-size: large;
  font-weight: 600;
}
/* end search page */


/* pay page */
.payment_box{
  background-color: var(--color-light-1);
  width: 600px;
  height: 100%;
  padding-top: 2%;
  padding-bottom: 2%;
  padding-left: 2%;
  padding-right: 2%;
  border-radius: var(--rad);
  text-align: center;
  box-shadow: 2.5px 2.5px 5px rgba(0, 0, 0, 0.2); 
}

#payment_h{
  text-align: center;
  color: var(--color-brand);
  text-transform: capitalize;
}

.pay_img{
  height: 50px;
  width: 100px;
  background-color: white;
  border-radius: 0.3rem;
  border-style:solid;
  border-color: var(--color-dark);
  cursor: pointer;
  transition: 0.3s;
}

.radio-img{
  margin: 3.5%;
}

.radio-img  > input { 
  display:none;
}

.radio-img  > img{
  cursor:pointer;
  border-color: var(--color-dark);
}

.radio-img  > input:checked + img{ 
  border-color: var(--color-brand);
}
/* end pay page */


/* info section */ 
.col-info {
  position: relative;
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  -ms-flex: 0 0 25%;
  flex: 0 0 25%;
  max-width: 25%;
}

.info_section{
  background-color: var(--color-light-1);
  padding: 75px 0;
  padding-left: 10%;
}

.info_section ul {
  padding: 10px;
}

.info_section ul li {
  list-style-type: none;
  margin: 3px 0;
}

.info_section h5 {
  margin-bottom: 12px;
  font-size: 22px;
}

.info_section .social-box {
  margin: 25px 0;
}

.info_section .social-box img {
  width: 35px;
  margin-right: 5px;
}

@media (max-width: 768px) {
  .row{
    display: block;
  }
  .col-info{
    max-width: 100%;
  }
}
/* end info section */



/* footer section*/
.footer_section {
  background-color: var(--color-light-2);
  padding: 20px 0;
  font-family: "Roboto", sans-serif;
}

.footer_section p {
  color: var(--color-dark);
  margin: 0;
  text-align: center;
}

.footer_section a {
  color: var(--color-dark);
}
/* end footer section*/