@import url('https://fonts.googleapis.com/css2?family=Noto+Kufi+Arabic:wght@100;200;300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@200;300;400;500;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Readex+Pro:wght@200;300;400;500;600;700&display=swap');
html{
  height: 100%;

}
body{
  font-family: 'Tajawal', sans-serif !important;
    padding: 0;
    margin: 0;
    overflow-x: hidden;
    background-color: #f9f9f9;
    position: relative;
    color: var(--black);
    direction: rtl;
    text-align: right;
    height: 100%;
} 
html{
  overflow-x: hidden;
  scroll-behavior: smooth;
}
:root{
  scroll-behavior: smooth !important;
}
::selection {
  color: #87c657;
  background-color: #87c65721;

}
:root {  
--white: #fff;   
--black: #373434;   
--paragraph: #9a9a9a;   
--main: #ff8d21;   
--wmain: #ff8d21a1;   
--wgray: #f0f0f0;   
--bgray: #686868;   
}
/* == general == ------------------ */ 
#ascrail2000-hr{
  display: none !important;
}
*:focus{
  outline: none;
}
li{
    list-style: none;
}

a{
  text-decoration: none;
}
p{
  font-weight: 500;
  color: var(--paragraph);
  font-size: 15px;
  line-height: 23px;
} 
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6{
  line-height: 1.5;
}
img{
  max-width: 100%;
}
/* Table bordered -------------- */
.table-bordered, .table-bordered td, .table-bordered th {
  border: 1px solid #f0f0f0 !important;
}
/* Table bordered -------------- */
/* == general == ------------------ */
/* intlTelInput ==--------- */ 
.iti{
  width: 100%;
  direction: ltr;
  margin-top: -15px;    
} 
.iti .form-control{
  padding-left: 64px !important;
}
.iti__flag.iti__dz{
  margin-left: 6px;
}
.iti__flag{
  box-shadow: none;
  border: none;
  margin-left: 10px !important;
}
.iti__flag-box .iti__flag{
  margin-right: 10px !important;
  margin-left: 0 !important;
}
.iti__country-list{
  -ms-overflow-style: none;
  scrollbar-width: none;
  box-shadow: 1px 1px 7px rgba(160, 160, 160, 0.2);
  background-color: #fff;
  border: none;
}
.iti--allow-dropdown .iti__flag-container:hover .iti__selected-flag{
  background-color: transparent !important;
}
/* intlTelInput ==--------- */ 

/* pyment form validation ---------------- */
.card-name{
  text-transform: uppercase;
  font-family: 'Readex Pro', sans-serif;
  font-weight: 400 !important;
}
.cc-number{
  text-transform: uppercase;
  font-family: 'Readex Pro', sans-serif;
  font-weight: 400 !important;
}
.cc-exp{
  text-transform: uppercase;
  font-family: 'Readex Pro', sans-serif;
  font-weight: 400 !important;
}
.cc-cvc{
  text-transform: uppercase;
  font-family: 'Readex Pro', sans-serif;
  font-weight: 400 !important;
}
/* pyment form validation ---------------- */

/* nice select ---------------- */
.nice-select{
  width: 100%;
  border-radius: 25px;
  background-color: #fbfbfb;
  border: 2px solid #f4f4f4;
  
  font-size: 14px;
  padding: 13px 21px;
  height: auto;
  line-height: 25px;
  text-align: right !important;
}
.nice-select span{
  
  font-size: 13px;
}
.nice-select::after {
  right: auto;
  left: 12px;
}
.nice-select .option{
  padding-left: 18px;
  padding-right: 18px;
  text-align: right;
}
.nice-select .list{
  width: 100%;
}
.nice-select:hover{
  border: 1px solid #f4f4f4;
}
.nice-select:active, .nice-select.open, .nice-select:focus {
  border-color: #7dc24778;
} 
/* nice select ---------------- */


/* == buttons == ------------------ */

.btn {
  padding: 10px 14px;
  font-weight: 600;
  font-size: 16px;
  border-radius: 40px;
}
.btn:active, 
.btn:focus {
  box-shadow: none; 

}
.btn-outline-primary {
  color: #87c657;
  background-color: transparent;
  border-color: #87c657;
}
.btn-outline-primary:hover{
  background-color: #87c657;
  border-color: #87c657;
  
} 
.btn.btn-outline-primary:active, 
.btn.btn-outline-primary:focus { 
  background-color: transparent;
  border-color: #87c657;
  box-shadow: none;  
  color: #87c657;
} 
/* --------------------- */
.btn-opacity-primary {
  background-color: #edf7e6;
  border-color: #edf7e6;
  color: #87c657 !important;
}
.btn-opacity-primary:hover{
  background-color: #87c657;
  border-color: #87c657;
  color: #fff !important;
  
} 
.btn.btn-opacity-primary:active, 
.btn.btn-opacity-primary:focus {
  background-color: #87c657;
  border-color: #87c657;
  color: #fff !important;
  box-shadow: none; 
} 
/* --------------------- */
.btn-primary {
  color: var(--white);
  background-color: #87c657;
  border-color: #87c657;
}
.btn-primary:hover{
  background-color: transparent;
  border-color: #87c657;
  color: #87c657 !important;
  
} 
.btn.btn-primary:active, 
.btn.btn-primary:focus {
  background-color: #87c657;
  border-color: #87c657;
  box-shadow: none;  
  color: #fff !important;
} 
.btn-primary:disabled{
  background-color: #87c657;
  border-color: #87c657;
}
/* --------------------- */
.btn-danger {
  color: var(--white);
  background-color: #ff4343;
  border-color: #ff4343;
}
.btn-danger:hover{
  background-color: transparent;
  border-color: #ff4343;
  color: #ff4343;
  
} 
.btn.btn-danger:active, 
.btn.btn-danger:focus {
  background-color: transparent;
  border-color: #ff4343;
  box-shadow: none; 
  color: #ff4343;
} 
/* --------------------- */
.btn-warning {
  color: var(--white);
  background-color: #fbad4b;
  border-color: #fbad4b;
}
.btn-warning:hover{
  background-color: transparent;
  border-color: #fbad4b;
  color: #fbad4b;
  
} 
.btn.btn-warning:active, 
.btn.btn-warning:focus {
  background-color: transparent;
  border-color: #fbad4b;
  color: #fbad4b;
  box-shadow: none; 
} 
/* --------------------- */
.btn-secondary {
  color: var(--white);
  background-color: #c3c3c3;
  border-color: #c3c3c3;
}
.btn-secondary:hover{
  background-color: transparent;
  border-color: #c3c3c3;
  color: #c3c3c3;
  
} 
.btn.btn-secondary:active, 
.btn.btn-secondary:focus {
  background-color: transparent;
  border-color: #c3c3c3;
  color: #c3c3c3;
  box-shadow: none; 
} 
/* --------------------- */
.btn-light {
  color: #393939;
  border-color: #fff;
  background-color: #fff;
  border-width: 1px;
}
.btn-light:hover{
  background-color: transparent;
  border-color: #fff;
  color: white;
} 
.btn.btn-light:active, 
.btn.btn-light:focus {
  background-color: var(--65a143);
  border-color: var(--65a143);
  box-shadow: none; 
} 
/* == buttons == ------------------ */

/* == inputs == ------------------ */
.form-control{ 
  background-color: transparent;
  border: 1px solid var(--wgray);
  color: #6a6a6a;
  border-radius: 0;
  padding: 11px 16px !important;
  font-size: 15px;
  font-weight: 500;
  background-color: white;
}
input.form-control{
  border-radius: 70px;
}
textarea.form-control{
  border-radius: 12px;
}

.form-control:focus{  
  box-shadow: none;
  background-color: var(--white) !important;
  border-color: #87c657b0;
}
.form-control::placeholder{
  color: #c1c1c1;
  font-weight: 500;
}
.form-label{
  font-weight: 600;
  font-size: 14px;
}
.form-label span{  
  border-radius: 30px;
  display: inline-block;
  position: relative;
  top: -1px;
  color: #ff3838;
}
.form-label.cvv{
  margin-bottom: 0;
  font-size: 16px;
  
  font-weight: 600;
  font-family: 'Readex Pro', sans-serif;
}
/* == inputs == ------------------ */
 
/* == nice-select == ------------------ */
.nice-select{
  padding: 12px 16px !important;
  border: 1px solid var(--wgray);
  height: auto;
  direction: rtl;
  text-align: right !important;
  line-height: initial;
  border-radius: 70px;
  background-color: transparent;
  color: #6a6a6a;
  font-size: 14px; 
  float: initial;
} 
.nice-select:active, .nice-select.open, .nice-select:focus {
  border-color: #87c657b0;
}
.nice-select *{
  text-align: right !important;
}
.nice-select::after {
  right: initial;
  left: 12px;
}
.nice-select .list{
  width: 100%;
}
.nice-select .option{
  font-weight: 500;
}

/* == nice-select == ------------------ */

/* == form-radio == ------------------ */
.form-check-input:checked[type="radio"]{
  background-color: #7dc247;
  border-color: #7dc247;
}
/* == form-radio == ------------------ */

/* == modal == ------------------ */
.modal-backdrop{
  background-color: #000;
}
.modal-backdrop.show {
  opacity: 0.5;
}
.modal-content{
  border-radius: 10px;
  border: 0;
}
.modal-m{
  max-width: 650px;

}
.modal-header .btn-close{
  margin-right: auto;
  margin-left: 0;
  box-shadow: none ;
}
.btn-close{
  background-color: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23CED2DA'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;
}
.modal-header{
  border-bottom: none;
  z-index: 99;
}
/* == modal == ------------------ */

/* == badge == ------------------ */
.badge{
  padding: 9px 12px;
  border-radius: 30px;
  min-width: 85px;
}
.bg-primary{
}
.badge.bg-success{
  background-color: #87c65736 !important;
  color: #87c657;

}
.badge.bg-warning{
  background-color: #ff923136 !important;
  color: #ff9231;
}
.badge.bg-danger{
  background-color: #ff525236 !important;
  color: #ff5252;
}
/* == badge == ------------------ */

/* datatable  ---------------------------------- */
/* css checkbox ------- */
.select-checkbox{}
th.select-checkbox::before{
  margin-left: 15px;
}
.select-checkbox::before{
  content: " ";
  border-radius: 2px !important;
  width: 1.25rem;
  height: 1.25rem;
  box-shadow: none !important;
  transition: 0.3s;
  background-color: #ffffff5c;
  display: block;
  border: 2px solid #c8c8c84a;
  margin-left: 20px;
}
.select-checkbox.check::before{ 
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e");
  background-color: #7dc247 !important;
  border-color: #7dc247 !important;
} 
/* css checkbox ------- */

table .custom-checkbox .form-check-input{
  margin-left: 20px;
}
table.dataTable thead .sorting .form-check-input{
  margin-left: 15px;

}
table.dataTable thead .sorting{
  background-image: none;
}
.dataTables_paginate{}
.dataTables_wrapper .dataTables_filter{
  margin-bottom: 30px;
}
.dataTables_wrapper .dataTables_paginate span .paginate_button {
  height: 40px;
  width: 40px;
  padding: 0;
  margin-left: 5px;
  line-height: 40px;
  text-align: center;
  border-radius: 2px;
  background-color: #f7f7f7;
  color: #9f9f9f !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.next, .dataTables_wrapper .dataTables_paginate .paginate_button.previous {
  margin-left: 5px;
  font-size: 16px;
  border: 0 !important;
  height: 40px;
  width: auto;
  padding: 0 15px;
  border-radius: 2px;
  line-height: 40px;
  display: inline-block; 
  color: #9f9f9f !important;
  background-color: #f7f7f7;
  border-color: #dcffc0;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.next.disabled, .dataTables_wrapper .dataTables_paginate .paginate_button.previous.disabled {
  color: #9f9f9f !important;
  background-color: #f7f7f7;
}
.dataTables_wrapper .dataTables_paginate span .paginate_button.current {
  color: #fff !important;
  background: #7dc247;
  border-color: #7dc247 !important;
}
.dataTables_wrapper .dataTables_paginate span .paginate_button.current:hover, .dataTables_wrapper .dataTables_paginate span .paginate_button:hover {
  color: #fff !important;
  background: #7dc247 !important;
  border-color: #7dc247;
  
}
.dataTables_wrapper .dataTables_paginate .paginate_button.next.current:hover, .dataTables_wrapper .dataTables_paginate .paginate_button.next.next:hover, .dataTables_wrapper .dataTables_paginate .paginate_button.next.previous:hover, .dataTables_wrapper .dataTables_paginate .paginate_button.previous.current:hover, .dataTables_wrapper .dataTables_paginate .paginate_button.previous.next:hover, .dataTables_wrapper .dataTables_paginate .paginate_button.previous.previous:hover {
  color: #fff !important;
  background: #7dc247 !important;
}
.dataTables_wrapper .dataTables_filter input{
  background-color: #fff !important;
  border: 1px solid #f0f0f0 !important;
  color: #6e6e6e;
  border-radius: 0 !important;
  padding: 10px 16px !important;
  margin-left: 20px !important;
}
.dataTables_wrapper .dataTables_filter input:focus-visible{
  border-color: #7dc247 !important;  
}
.dataTables_wrapper .dataTables_length select{
  background-color: #fff !important;
  border: 1px solid #f0f0f0 !important;
  color: #6e6e6e;
}
.dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_paginate, .dataTables_wrapper .dataTables_processing {
  color: #7e7e7e !important;
}
table.dataTable thead th {
color: #7e7e7e;
  white-space: nowrap;
  font-size: 16px;
  font-weight: 600 !important;
}
table.dataTable thead th, table.dataTable thead td{
  border-bottom: 1px solid #f0f0f0 !important;
  white-space: break-spaces !important;
}
table.dataTable.row-border tbody th, table.dataTable.row-border tbody td, table.dataTable.display tbody th, table.dataTable.display tbody td {
  border: 1px solid #f7f7f7 !important;
  color: #7e7e7e !important;
  word-break: break-all;
}
table.dataTable tbody th, table.dataTable tbody td {
  padding: 12px 12px !important;
} 
table.dataTable.stripe tbody tr.odd, table.dataTable.display tbody tr.odd {
  background-color: #fff  !important;
}
table.dataTable tfoot th, table.dataTable tfoot td{
  border-top: 1px solid #f0f0f0 !important;
}
table.dataTable tfoot th, table.dataTable tfoot td{
color: #7e7e7e;
  font-weight: 600 !important;
  font-size: 17px;

}
table.dataTable.display tbody tr.odd > .sorting_1, table.dataTable.order-column.stripe tbody tr.odd > .sorting_1{
  background-color: #f4f4f4 !important;
}
table.dataTable.hover tbody tr:hover, table.dataTable.display tbody tr:hover{
  background-color: #f9f9f9 !important;
}
.dataTables_wrapper .dataTables_paginate{
  margin-top: 40px;
}
.dataTables_wrapper .dataTables_info{
  margin-top: 40px;

}
/* datatable  ---------------------------------- */

 

/* == intro == ------------------ */

.intro-section{
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: #fffffff0;
  z-index: 111111;
}
.intro-section .video{
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}
.intro-section .video .content{

}
.intro-section .video video{
  width: 225px;
  outline: none !important;
}
.intro-section .loading{
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
  padding-bottom: 50px;
}
.intro-section .loading h3{
  color: #0C1355;
  font-size: 22px;
  font-weight: 500;
}
.intro-section .loading h3 span{
  padding-right: 7px;
}


/* == intro == ------------------ */
 

 

/* == header == ------------------ */
.header{
  box-shadow: 0 4px 15px 0 #d1d1d13d;
  background-color: #fff;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999; 
  padding-top: 0;
}
.header .upper{
  background-color: #87c657;
  background-image: url("../img/png/2548745.png");
  background-size: 180px;
  background-position: revert;
}
.header .upper .content{
  display: flex;
  flex-wrap: wrap; 

}
.header .upper .language{
  margin-right: auto;
  background-color: #fff;
  padding: 4px 10px 8px 10px;
}
.header .upper .language ul{
  margin-bottom: 0;
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  justify-content: end;
}
.header .upper .language ul li:not(:last-child){
  margin-left: 18px;
} 
.header .upper .language ul li.active{
  
}
.header .upper .language ul li a{
  color: #ffff;
  font-weight: 400;
  font-size: 14px;
  font-family: 'Readex Pro', sans-serif !important;
  width: 26px;
  height: 21px;
  border-radius: 5px;
  overflow: hidden;
  display: flex;
}
.header .upper .language ul li a img{
  width: 100%;
  height: 100%;
  object-fit: cover; 
}


.header .lower{
  padding-top: 7px;
  padding-bottom: 8px;
} 
.header .lower .container{
  position: relative;
}
/* .header .lower .container::after{
  content: " ";
  width: 98%;
  height: 1px;
  position: absolute;
  bottom: -14px;
  background-color: #eee;
  right: 0;
  padding: 0 10px;
  left: 0;
  margin: auto;
} */

.header .lower .logo {
  width: 110px;
}
.header .lower .logo a{
  display: flex;
  height: 100%;
  flex-wrap: wrap;
  align-items: center;
}
.header .lower .logo img {
  width: 90%;
  transition: 0.3s;
}

/* logo ------------- */

/* navbar ------------- */
.header .lower .navbar-sec {
  padding: 0 16px;
  width: calc(100% - 110px);
  justify-content: space-between;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.header .lower .navbar-sec .overlay {
  display: none;
}
.header .lower .navbar-sec .links{
  width: calc(100% - 298px);
  display: flex;
  flex-wrap: wrap;
}
.header .lower .navbar-sec .links > .row{
}
.header .lower .navbar-sec .links ul {
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  margin-bottom: 0
}

.header .lower .navbar-sec .links ul li { 
  margin: 0 4px;
}

.header .lower .navbar-sec .links ul li a {
  color: #393939;
  font-weight: 600;
  font-size: 17px;
  transition: 0.5s; 
  padding: 4px 9px;
  align-items: center;
  display: block; 
}

.header .lower .navbar-sec .links ul li a::after {
  content: " ";
  width: 100%;
  height: 2px;
  background-color: transparent;
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  transition: 0.5s;
  z-index: 9;
} 
.header .lower .navbar-sec .links ul li.active a {
  color: #87c657;
} 
.header .lower .navbar-sec .links ul li a:hover {
  transition: 0.5s;
  color: #87c657;
}

/* navbar ------------- */

/* shoping card ------------- */
.basket-card{ 
  display: flex;
flex-wrap: wrap;
width: 298px;
justify-content: left;
}
.basket-card .shoping-card{ 
  padding-right: 10px;
  display: flex;
  flex-wrap: wrap;
  justify-content: left;
  height: 100%;
  align-items: center;
}
.basket-card .shoping-card .open-card{
  display: flex;
  flex-wrap: wrap;
  justify-content: left;
  background: none;
  padding: 0;
  border: 0;
}
.basket-card .shoping-card .open-card .icon{
  position: relative;
  width: 50px;
  height: 52px;
  background-color: #87c657;
  border-radius: 6px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  margin-right: 9px; 

}
.basket-card .shoping-card .open-card .icon img{
  width: 36px;
}
.basket-card .shoping-card .icon i{
  color: #fff;
} 
.basket-card .shoping-card .text{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: left;
  width: calc(100% - 59px);
}
.basket-card .shoping-card .text h3{
  padding-bottom: 0;
  margin-bottom: 0;
  font-size: 18px;
  font-weight: 700;
  display: block;
  width: 100%;
  color: #373434;
  text-align: left;
}
.basket-card .shoping-card .text span{
  display: block;
  font-size: 13px; 
  color: #9a9a9a;
  font-weight: 500;
  margin-top: -6px;

}

.basket-card .account{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.basket-card .account ul{
  padding: 0;
  margin-bottom: 0;
}
.basket-card .account ul li{}
.basket-card .account ul li a{
  background-color: #fff; 
  color: #9a9a9a;
  font-weight: 600;
  font-size: 16px;
  transition: 0.5s;
  display: block;
  padding: 8px 18px !important;
  border-radius: 40px;
  border: 1px solid #f1f1ef;
  position: relative; 
}
.basket-card .account ul li a span{
  width: 12px;
  height: 12px;
  border-radius: 50px;
  background-color: #87c657;
  display: block;
  position: absolute;
  top: -5px;
  left: 6px;
  border: 2px solid white;
}
.basket-card .account ul li a:hover{
  background-color: #87c657;
  border: 1px solid #87c657;
  color: #fff;
}
.basket-card .account ul li i{
  margin-right: 6px;
  font-size: 18px;
  margin-left: 6px;
}

/* shoping card ------------- */
.bottom-menu{
  display: none;
}
.toggle-btn{
  display: none;
}

/* sticky ------------- */

.header.sticky{
  top: 0;
  position: fixed; 
  padding: 0;
}
.header.sticky .bottom { 
}
.header.sticky .navbar ul li a::after { 
}
.header.sticky .navbar ul li a{
  padding: 22px 14px;
}
.header.sticky .upper{
  transition: 0.3s;
  padding: 0;
  height: 0;
  overflow: hidden; 
  border: none;
}
.header.sticky .lower .logo img{
  width: 70%;
  transition: 0.3s;
}
/* sticky ------------- */

/* == header == ------------------ */
 
/* select-branch ---------------------------------- */
.select-branch-section{
  display: none;
}
.select-branch-section .select-branch .item .action{
  width: 106px;
}
.select-branch-section .select-branch .item .branch-detail.detailtext{
  justify-content: space-between;
  align-items: center;
  height: 100%;
} 

.select-branch{  
}
.select-branch .branch-content{
  background-color: white;
  padding: 10px 10px;
  border-radius: 14px;
border: 2px solid #f4f4f4;
}
.select-branch .branch-content .boxes{
  padding: 0;
}
.select-branch > .content{  
}
.select-branch .row{ 
}
.select-branch .item{
  width: 44%;
}  
.select-branch .item-action{
  width: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.select-branch .item-action .action .btn{
  background-color: #f7f7f7;
  border-color: #f7f7f7;
  color: #373434;
}
.select-branch .item-action .action .btn:hover{
  background-color: #87c657;
  border-color: #87c657;
  color: #fff !important;
}
.select-branch .item:nth-child(2) .text{
  /* width: 100%; */
  
}
.select-branch .item .branch-detail{
  display: flex;
  flex-wrap: wrap;
}
.select-branch .item .content{
  display: flex;
  flex-wrap: wrap;
  background-color: #f7f7f7;
  border-radius: 10px; 
  position: relative;
  height: 70px;
}
.select-branch .item .content .default-content{
  position: absolute;
  z-index: 0; 
  padding: 9px 10px; 
  top: 2px;
right: 1px;
width: 100%;
}
.select-branch .item.active .content .default-content{
  display: none;
}
.select-branch .item.active .content .slider-content{
  opacity: 1;
}
.select-branch .item .content .slider-content{
  padding: 9px 10px;
  opacity: 0;
}
.select-branch .item .content .sm-item{
  display: flex;
  flex-wrap: wrap;  
}
.select-branch .item .content .sm-item .sm-content{
  display: flex;
  flex-wrap: wrap; 
  direction: rtl;
  width: 100%;
}
.select-branch .item .content .slick-prev{
  left: 0;
  top: 0;
  z-index: 99;
  transform: rotate(90deg);
}
.select-branch .item .content .slick-next{
  left: 0;
  bottom: 0;
  right: initial;
  z-index: 99;
  transform: rotate(90deg);
  top: initial;
}
.select-branch .item .content .slick-prev::before{}
.select-branch .item .content .slick-next::before{}
.select-branch .item .content .slick-prev::before, .slick-next::before {
  color: #87c657;
}
/* country image ----------------- */

 
/* country image ----------------- */

.select-branch .item .image{
  width: 50px;
  height: 50px;
  margin-left: 15px;
} 
.select-branch .item .image img{
  height: 100%;
  width: 100%;
  border-radius: 10px;
  object-fit: cover;
  object-position: center;
} 
.select-branch .item .text{
  /* width: calc(100% - 70px); */
} 
.select-branch .item .text h4{
  font-size: 14px;
  color: #b5b5b5;
  font-weight: 600;
  margin-bottom: 2px;
} 
.select-branch .item .text h3{
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 0;
} 
.select-branch .item .action{
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.select-branch .item .action .btn{
}
/* select-branch ---------------------------------- */

/* selected-branch ---------------------------------- */
.header .social-m{
  width: auto;
}
.selected-branch{ 
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.section-title{ 
}
.section-title h3{
  font-size: 21px;
  font-weight: 800; 
}
.selected-branch .boxes{
  border-radius: 10px; 
  padding: 0 0;
}
.selected-branch .boxes .item{}
.selected-branch .boxes .item .content{
  background-color: transparent;
  height: auto;
  border-radius: 0;
}
.selected-branch .boxes .item .content .mitem:not(:last-child){
  padding-bottom: 10px;
}
.selected-branch .boxes .item .content h4{
  font-size: 15px;
  color: #6a6a6a;
  font-weight: 600;
  margin-bottom: 6px;
  text-align: center;
}
.selected-branch .boxes .item .content h3{
  color: #373434;
  direction: ltr;
  text-align: right;
  margin-bottom: 0;
  font-weight: 500;
  font-size: 15px;
  font-family: 'Readex Pro', sans-serif;
}
.selected-branch .boxes .item .content .map{
  margin-top: 9px;
}
.selected-branch .boxes .item .content .map .btn{
  padding: 7px 13px;
  font-size: 12px;
  margin: 0 auto;
  display: block;
}
.selected-branch .boxes .item .content .map iframe{
  width: 100%;
  border-radius: 10px;
  height: 110px;
  -webkit-filter: grayscale(100%);
}


.selected-branch .boxes .item .content ul{
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 0;
  justify-content: right;
}
.selected-branch .boxes .item .content ul li{
  margin-left: 10px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.selected-branch .boxes .item .content ul li:last-child{
  margin-left: 0;
}  
.selected-branch .boxes .item .content ul li .btn{
  font-size: 15px;
  line-height: 20px;
  color: #fff;
  text-transform: uppercase;
  font-weight: 600;
  padding: 8px 20px 9px 20px;
  border-radius: 25px;
  
}
.selected-branch .boxes .item .content ul li .btn.btn-primary i{
  margin-right: 10px;
}
.selected-branch .boxes .item .content ul li .btn.btn-warning{
  background-color: #f1f1ef00;
  border-color: #f1f1ef;
  text-transform: uppercase;
  color: #a3a3a3;
  font-size: 19px;
  padding: 3px 7px;
  width: 43px;
  height: 43px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}
.selected-branch .boxes .item .content ul li .btn.btn-primary:hover{
  background-color: #edf7e6;
  border-color: #edf7e6;
  color: #87c657 !important;
}
.selected-branch .boxes .item .content ul li .btn.btn-warning:hover{
  background-color: #feb04c;
  border-color: #feb04c;
  color: #fff;

}

/* selected-branch ---------------------------------- */

/* categorie-section ---------------------------------- */
.categorie-section{
  padding-top: 12em;
} 
.categorie-section .boxes{
  direction: ltr;
}
.categorie-section .boxes > .row{
  justify-content: center;
  direction: rtl;
}
.categorie-section .boxes .item{
  margin-bottom: 0;
  width: 17vh;
  padding: 1px;
}
.categorie-section .boxes .item .content{
  border: 2px solid #fff;
  border-radius: 10px;
  background-color: white;
  border: 2px solid #f4f4f4; 
  transition: 0.3s;

} 
  
.categorie-section .boxes .item .content .image{
  height: 111px;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center; 
} 
.categorie-section .boxes .item .content .image img{
  width: 75px;
  transition: 0.1s;
}
.categorie-section .boxes .item .content .title{
  padding-top: 0;
}
.categorie-section .boxes .item .content .title h3{
  font-size: 13px;
  font-weight: 700;
  transition: 0.3s;
  color: #373434;
  text-align: center;
}

.categorie-section .boxes .item.active .content{
  background-color: #87c657;
  border: 2px solid #87c657;
  transition: 0.3s;
}
.categorie-section .boxes .item.active .image img{
  filter: brightness(0) invert(1);
  transition: 0.1s;
}
.categorie-section .boxes .item.active .content .title h3{
  color: #fff;
  transition: 0.3s;
}

.categorie-section .boxes .owl-nav {
  height: 0;
  margin: auto;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.categorie-section .boxes .owl-nav button {
  background-color: #d9d9d9;
  width: 24px;
  height: 24px;
  margin-top: -92px;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  border-radius: 20px;
  transition: 0.3s;
}
.categorie-section .boxes .owl-nav button:hover{
  background-color: #87c657;
  transition: 0.3s;

}

.categorie-section .boxes .owl-nav button i {
  color: #fff;
  font-size: 13px;
  margin-top: 1px;
}

.categorie-section .boxes .owl-nav button.owl-prev {
  padding: 0 6px !important;
  margin-left: -31px;
}

.categorie-section .boxes .owl-nav button.owl-next {
  padding: 0 6px !important;
  margin-right: -31px;
}

/* categorie-section ---------------------------------- */


/* best-seller ---------------------------------- */
.product-section{
  padding-top: 2em;
} 
.product-section .boxes{
  
}
.product-section .boxes > .row > .item{ 
  margin-bottom: 24px;
}
/* disabled -------------------- */
.product-section .boxes > .row > .item.disabled *{
  pointer-events: none; 
}
.product-section .boxes > .row > .item.disabled *::selection{
  background-color: transparent; 
}
.product-section .boxes > .row > .item.disabled .content .image-carousel .default-image{
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}
.product-section .boxes .item.disabled .content .discount{
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
  opacity: 0.7;
}
.product-section .boxes .item.disabled .content .bottom{
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
  opacity: 0.7;
}
.product-section .boxes .item.disabled .content .title h3::selection{
  color: #373434;
}
 
.product-section .boxes .item.disabled .content .image-carousel .addetions-layers{
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
  opacity: 0.7;
}
.product-section .boxes .item.disabled .content .image-carousel .plate{
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
  opacity: 0.7;
}
.product-section .boxes .item.disabled .content .image-carousel .image-content{
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}
/* disabled -------------------- */

.product-section .boxes .item .content{ 
  border-radius: 10px;
  background-color: white;
  border: 2px solid #f4f4f4; 
  transition: 0.3s;
  position: relative;
} 
  
/* discount --------------- */
.product-section .boxes .item .content .discount{
  position: absolute;
  top: 20px;
  right: 20px;
  background-color: #ff1919bd;
  padding: 1px 8px;
  border-radius: 100px;
  direction: ltr;
  display: flex;
  flex-wrap: wrap;
  z-index: 9;
}
.product-section .boxes .item .content .discount span{
  margin-bottom: 0;
  font-size: 16px;
  color: #fff;
  font-weight: 600;
}
/* discount --------------- */

/* label-tage --------------- */
.product-section .boxes .item .content .label-tage{
  position: absolute;
  top: 20px;
  left: -29px;
  background-color: #87c657;
  padding: 0 0 6px 0;
  direction: ltr;
  display: flex;
  flex-wrap: wrap;
  transform: rotate(-45deg);
  width: 130px;
  text-align: center;
  justify-content: center;
  height: 30px;
  align-items: center;
  z-index: 9;
}
.product-section .boxes .item .content .label-tage span{
  margin-bottom: 0;
  font-size: 16px;
  color: #fff;
  font-weight: 600;
  padding-top: 2px;
}
.label-tage.bg-danger{
  background-color: #ff3838 !important;
}
.label-tage.bg-warning{
  background-color: #ffa545 !important;
}
.label-tage.bg-info{
  background-color: #53a3ff !important;
}

/* label-tage --------------- */

/* image-carousel --------------- */

.product-section .boxes .item .content .image-carousel{
  background-repeat: no-repeat;
  background-size: 300px;
  background-position: center;
  position: relative; 
  overflow: hidden;
  height: 360px;
}
.product-section .boxes .item .content .image-carousel .plate{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  height: 100%; 
  transition: 0.3s;

}
.product-section .boxes .item .content .image-carousel .plate img{

  object-fit: contain;
  transition: 0.6s;

}
.product-section .boxes .item .content .image-carousel .plate .main-img{
  animation: spins 1.8s ease-in-out;
  transform: rotate(0deg);
  height: 100%;
  width: 90%;
}
.product-section .boxes .item .content .image-carousel .plate .main-img.active{
  animation: spin 1.8s ease-in-out;
  transition: 0.6s;
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  20% {
    transform: rotate(-8deg);
  }
  40% {
    transform: rotate(0deg);
  }
  60% {
    transform: rotate(-4deg);
  }
  100% {
    transform: rotate(0deg);
  } 
}
@keyframes spins {
  0% {
    transform: rotate(0deg);
  }
  20% {
    transform: rotate(-8deg);
  }
  40% {
    transform: rotate(0deg);
  }
  60% {
    transform: rotate(-4deg);
  }
  100% {
    transform: rotate(0deg);
  } 
} 

@keyframes effectspin {
  0% {
    transform: rotate(0deg);
  }
  20% {
    transform: rotate(4deg);
  }
  40% {
    transform: rotate(0deg);
  }
  60% {
    transform: rotate(2deg);
  }
  100% {
    transform: rotate(0deg);
  } 
}
@keyframes effectspins {
  0% {
    transform: rotate(0deg);
  }
  20% {
    transform: rotate(4deg);
  }
  40% {
    transform: rotate(0deg);
  }
  60% {
    transform: rotate(2deg);
  }
  100% {
    transform: rotate(0deg);
  } 
} 
.product-section .boxes .item .content .image-carousel .plate .effects{
  position: absolute;
  top: 0;
  left: 0;
  animation: effectspins 1.7s ease-in-out;
  transform: rotate(0deg);
  width: 90%;
  height: 100%;
  margin: auto;
  right: 0;
  bottom: 0;
}
.product-section .boxes .item .content .image-carousel .plate .effects.active{
  animation: effectspin 1.7s ease-in-out;
  transition: 0.6s;
}

.product-section .boxes .item .content .image-carousel .item{
  height: 100%;
}
.product-section .boxes .item .content .image-carousel .image-content{
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  height: 100%;

}
.product-section .boxes .item .content .image-carousel .image-content .img{
  height: 100%;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center; 
  border-radius: 10px;
} 
.product-section .boxes .item .content .image-carousel .image-content img{
  width: 86%;
  transition: 0.4s;
}  
/* image-carousel --------------- */

/* additions --------------- */
.product-section .boxes .item .additions{
  padding: 7px 0;
  direction: ltr;
  background-color: #fff;
  border-radius: 10px;
  margin: 0 14px;
  /* box-shadow: 0 4px 15px 0 #d1d1d14f; */
}
.product-section .boxes .item .additions ul{
  padding: 0;
  display: flex;
  flex-wrap: wrap;
}
.product-section .boxes .item .additions .item{ 
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.product-section .boxes .item .additions .item .img{
  width: 64px;
  height: 54px;
  border: 1px solid #f1f1f1;
  padding: 2px 3px;
  border-radius: 10px;
  transition: 0.3s;
  cursor: pointer;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}
.product-section .boxes .item .additions .item:hover .img{
  transition: 0.3s;
  border: 1px solid #87c657;
}
.product-section .boxes .item .additions .item .img .check{
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: 0.3s;
}
.product-section .boxes .item .additions .item .img.active{
  border: 1px solid #87c657;

}
.product-section .boxes .item .additions .item .img.active .check{
  opacity: 1;
  background-color: #87c6577a;
  border-radius: 9px;
  color: #fff;
  transition: 0.3s;
}
.product-section .boxes .item .additions .item .img.active:hover{
  transition: 0.3s;
  border: 1px solid #87c657;
}
.product-section .boxes .item .additions .item .img .check i{
  width: 20px;
  height: 20px;
  background-color: #87c657;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  border-radius: 30px;
  font-size: 13px;
}

.product-section .boxes .item .additions .item .img img{
  width: 88%; 
  object-fit: contain;
} 
.product-section .boxes .item .additions .item .img .hidden{
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
}
.product-section .boxes .item .additions .item .img .hidden img{
  opacity: 0;
}
.product-section .boxes .item .owl-nav { 
  height: 0;
  margin: auto;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.product-section .boxes .item .owl-nav button {}

.product-section .boxes .item .owl-nav button i {
  color: #cecece;
  font-size: 13px;
}

.product-section .boxes .item .owl-nav button.owl-prev {
  padding: 0 3px !important;
  margin-left: -17px;
  margin-top: -49px;
}

.product-section .boxes .item .owl-nav button.owl-next {
  padding: 0 3px !important;
  margin-right: -17px;
  margin-top: -49px;
}
.product-section .boxes .owl-carousel .owl-stage{
  margin: 0 auto;
  width: max-content;
}

/* additions --------------- */



/* addetions layers --------------- */
.product-section .boxes .item .content .image-carousel .addetions-layers{
position: absolute;
top: 0;
left: 0;
width: 100%;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
height: 100%;
z-index: 9;   
}
.product-section .boxes .item .content .image-carousel .addetions-layers img{
height: 100%;
width: 55%;
object-fit: contain;
transform: scale(2.1);
transition: 0.3s;
opacity: 0;
position: absolute;
top: 0;
left: 0;
right: 0;
margin: auto;
}
.product-section .boxes .item .content .image-carousel .addetions-layers img.active{
transform: scale(1);
opacity: 1;
}
.product-section .boxes .item .content .image-carousel .addetions-layers img{}
/* addetions layers --------------- */

/* price --------------- */

.product-section .boxes .item .content .price{
text-align: left;
width: 82px;
}
.product-section .boxes .item .content .price h3{
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 0;
  padding-top: 15px;
  color: #87c657;
}  
/* price --------------- */

/* title --------------- */

.product-section .boxes .item .content .title{
padding-top: 14px;
text-align: right;
width: calc(100% - 82px);
}
.product-section .boxes .item .content .title h3{
  font-size: 20px;
font-weight: 800;
transition: 0.3s;
color: #373434;
}
.product-section .boxes .item .content .title a{
  display: block;
}
.product-section .boxes .item .content .title a:hover h3{
transition: 0.3s;
color: #87c657;

}
.product-section .boxes .item .content .descreption p{
  font-size: 15px;
margin-bottom: 3px;
}
.product-section .boxes .item .content .descreption p span{
font-weight: 600;
font-size: 14px;
color: #87c657;
}
/* title --------------- */

/* sizes btn --------------- */

.product-section .boxes .item .content .size{}
.product-section .boxes .item .content .size ul{
padding: 0;
display: flex;
flex-wrap: wrap;
justify-content: center;
margin-bottom: 0;
}
.product-section .boxes .item .content .size > span{
  font-weight: 600;
  color: #999;
  font-size: 14px;
  display: block;
margin-bottom: 10px;
}
.product-section .boxes .item .content .size ul li{
margin-left: 10px;
} 
.product-section .boxes .item .content .size ul li .size-btn{
border: 0;
width: 40px;
height: 40px; 
border-radius: 50px;
font-weight: 600;
font-size: 15px; 
transition: 0.3s;
text-transform: capitalize;
background-color: #f4f4f4;
color: #87c657;
} 
.product-section .boxes .item .content .size ul li .size-btn:hover{
background-color: #87c657;
color: #fff;
box-shadow: 0 4px 15px 0 #87c657;
transition: 0.3s;
}
.product-section .boxes .item .content .size ul li.active .size-btn{
background-color: #87c657;
box-shadow: 0 4px 15px 0 #87c657;
color: #fff;
}
.product-section .boxes .item .content .size ul li:last-child{
  margin: 0;
}
/* sizes btn --------------- */

/* quantity --------------- */
.product-section .boxes .item .content .quantity{}
.product-section .boxes .item .content .quantity span{
  font-weight: 600;
  color: #999;
  font-size: 15px;
  display: block;
  margin-bottom: 10px;
}


.product-quantity .qty-input {
  color: #000;
  background-color: transparent;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 3px 4px;
  border-radius: 53px;
  border: 1px solid #eee;
}
.product-quantity .qty-input .product-qty,
.product-quantity .qty-input .qty-count {
  background-color: transparent;
  color: inherit;
  font-weight: 500;
  font-size: inherit;
  border: none;
  display: inline-block;
  min-width: 0; 
  line-height: 1;
}
.product-quantity .qty-input .product-qty:focus,
.product-quantity .qty-input .qty-count:focus {
  outline: none;
}
.product-quantity .qty-input .product-qty {
  width: 50px;
  min-width: 0;
  display: inline-block;
  text-align: center;
  color: #3b3b3b;
  -webkit-appearance: textfield;
     -moz-appearance: textfield;
          appearance: textfield;
}
.product-quantity .qty-input .product-qty::-webkit-outer-spin-button, .product-quantity .qty-input .product-qty::-webkit-inner-spin-button {
  -webkit-appearance: none;
          appearance: none;
  margin: 0;
}
.product-quantity .qty-input .qty-count {
  padding: 0;
  cursor: pointer;
  width: 31px;
  height: 31px;
  font-size: 1.25em;
  text-indent: -100px;
  overflow: hidden;
  position: relative;
  border-radius: 30px;
}
.product-quantity .qty-input .qty-count:before, .product-quantity .qty-input .qty-count:after {
  content: "";
  height: 2px;
  width: 10px;
  position: absolute;
  display: block;
  background-color: #fff;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}
.product-quantity .qty-input .qty-count--minus {
  background-color: #ddd;
  color: #000;
}
.product-quantity .qty-input .qty-count--minus:hover{
  background-color: #87c657;
  color: #fff;
  transition: 0.3s;
}
.product-quantity .qty-input .qty-count--add {
  background-color: #ddd;
  color: #fff;
  transition: 0.3s;
}
.product-quantity .qty-input .qty-count--add:hover{
  background-color: #87c657;
  color: #fff;
  transition: 0.3s;
}
.product-quantity .qty-input .qty-count--add:after {
  transform: rotate(90deg);
}
.product-quantity .qty-input .qty-count:disabled {
  color: #c1c1c1;
  background-color: #f4f4f4;
  cursor: not-allowed;
  border-color: transparent;
}
.product-quantity .qty-input .qty-count:disabled:before, .product-quantity .qty-input .qty-count:disabled:after {
  background-color: #ccc;
}  

/* quantity --------------- */





/* pizza size --------------- */ 
/* large ---------- */ 
.product-section .boxes .item .content.l .image-carousel .plate .main-img{ 
width: 100%; 
}
.product-section .boxes .item .content.l .image-carousel .plate{
  transform: scale(1.1);
  transition: 0.3s;
}

.product-section .boxes .item .content.l .image-carousel .plate .effects{ 
width: 100%; 
}
.product-section .boxes .item .content.l .image-carousel .image-content img{
width: 100%;
transform: scale(1.1);
} 
.product-section .boxes .item .content.l .image-carousel .addetions-layers img.active{
  transform: scale(1.2);
opacity: 1;
}
/* large ---------- */

/* small ---------- */
.product-section .boxes .item .content.s .image-carousel .owl-item.active .image-content img{
width: 38%;
}
.product-section .boxes .item .content.s .image-carousel .plate .main-img{ 
  width: 73%;
}

.product-section .boxes .item .content.s .image-carousel .plate .effects{ 
  width: 75%;
}
.product-section .boxes .item .content.s .image-carousel .image-content img{
  width: 69%;
} 
.product-section .boxes .item .content.s .image-carousel .addetions-layers img.active{
  transform: scale(0.8);
opacity: 1;
}
/* small ---------- */ 
/* pizza size --------------- */

/* bottom --------------- */
.product-section .boxes .item .content{ 
border-radius: 10px;
background-color: white;
border: 2px solid #f4f4f4; 
transition: 0.3s;
position: relative;
} 
.product-section .boxes .item .content .bottom{
padding-left: 20px;
padding-right: 20px; 
padding-bottom: 20px;
position: relative;
padding-top: 10px;
}
.product-section .boxes .item .content .bottom .progress-sec{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding: 3px 4px;
  background-color: #fff;
  border-radius: 7px;
  border: 1px solid #f7f7f7;
  position: absolute;
  top: -22px;
  width: calc(100% - 100px);
  left: 19px;
  box-shadow: 0 4px 15px 0 #d1d1d13d;
  z-index: 99;
}
.product-section .boxes .item .content .bottom .progress-sec .gift{
  padding-left: 12px;
  width: 37px;
}
.product-section .boxes .item .content .bottom .progress-sec .gift .btn{
  background-color: transparent;
  border: 0;
  padding: 0;
}
.product-section .boxes .item .content .bottom .progress-sec .gift img{
  width: 25px;
  margin-top: -5px;
}
.product-section .boxes .item .content .bottom .progress-sec .progress{
  width: calc(100% - 80px);
  height: 8px;
}
.product-section .boxes .item .content .bottom .progress-sec .progress .progress-bar{
  background-color: #87c657;
}
.product-section .boxes .item .content .bottom .progress-sec h5{
  margin-bottom: 0;
  width: 40px;
  text-align: center;
  font-size: 18px;
}
.product-section .boxes .item .content .bottom .top-sec{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  position: relative;
  padding-top: 7px;
}
.product-section .boxes .item .content .bottom .top-sec .progress{

}
.product-section .boxes .item .content .bottom .descreption{
  width: 100%;
}
.product-section .boxes .item .content .bottom .price-size{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding-top: 10px;
}


.product-section .boxes .item .content .bottom .action {
margin-top: 30px;
display: flex;
flex-wrap: nowrap;
}
.product-section .boxes .item .content .bottom .action .btn{
width: 100%;
}
.product-section .boxes .item .content .bottom .action .btn.add-tocard-btn.added{
  background-color: transparent;
  border-color: #87c657;
  color: #87c657;
} 
.product-section .boxes .item .content .bottom .action .btn.add-tocard-btn.added:hover{
 
}
.product-section .boxes .item .content .bottom .action .add-to-card{
  width: 55%;
}
.product-section .boxes .item .content .bottom .action .add-to-card .btn{

}
.product-section .boxes .item .content .bottom .action .edit-addetions{
  width: 41%;
  padding-right: 12px;
}
.product-section .boxes .item .content .bottom .action .edit-addetions .btn{}
.product-section .boxes .item .content .bottom .action .product-detail{
  padding-right: 12px;
}
.product-section .boxes .item .content .bottom .action .product-detail .btn.btn-secondary{
  width: 47px;
  padding: 4px 4px;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}
.product-section .boxes .item .content .bottom .action .product-detail .btn.btn-secondary i{
  font-size: 21px;
}
.product-section .boxes .item .content .bottom .action .product-detail .btn.btn-secondary img{
  width: 29px;
  transition: 0.3s;
  filter: brightness(2)
}
.product-section .boxes .item .content .bottom .action .product-detail .btn.btn-secondary:hover img{
  filter: initial;
  transition: 0.3s;

}
.product-section .boxes .item .content .bottom .action .item .edit-addetions{
}
.product-section .boxes .item .content .bottom .action {
margin-top: 30px;
}
.product-section .boxes .item .content .bottom .action .btn{
width: 100%;
} 
.product-section .boxes .item .content .bottom .price-size{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}


/* bottom --------------- */

/* modal --------------- */
.product-section .boxes .item .modal-content{}
.product-section .boxes .item .modal-content .modal-header{
  justify-content: center;
  position: relative;
}
.product-section .boxes .item .modal-content .modal-header h1{
  font-size: 20px;
  font-weight: 800;
  width: 100%;
text-align: center;
}
.product-section .boxes .item .modal-content .modal-header .btn-close{
  position: absolute;
  top: -21px;
  left: 13px;
  background-color: white;
  opacity: 1;
  border-radius: 6px 6px 0 0;
}

.product-section .boxes .item .product-model{}
.product-section .boxes .item .product-model .modal-content-sec{}
.product-section .boxes .item .product-model .modal-content-sec .content{
  border: none;
}
.product-section .boxes .item .product-model .content .image-carousel .image-content img{

}
.product-section .boxes .item .product-model .modal-content-sec .additions{
  margin-bottom: 20px;
}  
.product-section .boxes .item .modal-content .modal-footer{
  border-top: 0; 
  padding-bottom: 18px; 

}
.product-section .boxes .item .modal-content .modal-footer .save-item{
  width: 60%;
  margin: 0;
  padding-left: 18px;
}
.product-section .boxes .item .modal-content .modal-footer .delete-item{
  margin: 0;
  width: calc(100% - 60%);


}

.product-section .boxes .item .modal-content .modal-footer .btn{
  padding: 10px 34px;
  width: 100%;
}


.product-section .boxes .item .product-model .additions-detials{
  background-color: #fff;
  padding: 10px 4px;
  border-radius: 0;
  border-top: 2px solid #f4f4f4;
}
.product-section .boxes .item .product-model .additions-detials .price-part{
  position: relative;
  display: flex;
  flex-wrap: wrap;
}
.product-section .boxes .item .product-model .additions-detials .price-part .num{ 
  border-radius: 60px; 
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
} 
.product-section .boxes .item .product-model .additions-detials .price-part .after{
  border-radius: 10px;
  background-color: #b0f77a1f;
  border: 2px solid #87c65754;
  padding: 3px 5px;
}
.product-section .boxes .item .product-model .additions-detials .price-part .after span{
  font-size: 11px;
  color: #87c657;
  font-weight: 500;
  margin-top: -1px;
  display: block;
}
.product-section .boxes .item .product-model .additions-detials .price-part .after h4{
    margin-bottom: 0;
    font-size: 21px;
    font-weight: 700;
    color: #87c657;
}

.product-section .boxes .item .product-model .additions-detials .price-part .before{
  border-radius: 10px;
  background-color: white;
  border: 2px solid #f4f4f4;
  padding: 3px 5px;
  margin-left: 10px;  
}
.product-section .boxes .item .product-model .additions-detials .price-part .before span{
  font-size: 13px;
color: #a8a8a8;
  font-weight: 500;
  margin-top: -1px;
  display: block;
}
.product-section .boxes .item .product-model .additions-detials .price-part .before h4{
    margin-bottom: 0;
    font-size: 21px;
    font-weight: 700;
  color: #a8a8a8;
}


.product-section .boxes .item .product-model .additions-detials .price-part .add-list{}
.product-section .boxes .item .product-model .additions-detials .price-part .add-list h5{
  font-weight: 600;
  font-size: 13px;
  color: #87c657;
  margin-bottom: 4px;
}
.product-section .boxes .item .product-model .additions-detials .price-part .add-list ul{
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 0;
}
.product-section .boxes .item .product-model .additions-detials .price-part .add-list ul li{
  display: flex;
  flex-wrap: wrap;
  margin-left: 7px;
  background-color: #f7f7f7;
  border-radius: 20px;
  padding: 0px 7px;
  margin-bottom: 4px;
} 
.product-section .boxes .item .product-model .additions-detials .price-part .add-list ul li h3{
  margin-bottom: 0;
  font-size: 14px;
  color: #999;
  font-weight: 500;
}

.product-section .boxes .item .product-model .additions-detials .price-part .item{
  display: flex;
  flex-wrap: wrap;
  justify-content: left;
  align-items: center;
}

/* modal --------------- */

/* nutritional values modal --------------- */
.product-section .boxes .item .nutritionalvalues{

}
.product-section .boxes .item .nutritionalvalues .tabs-nvalues{}
.product-section .boxes .item .nutritionalvalues .tabs-nvalues ul{
  padding: 0 0;
  border-radius: 60px;
  border: 0;
  justify-content: space-between;
} 
.product-section .boxes .item .nutritionalvalues .tab-content{
  margin-top: 17px;
}
.product-section .boxes .item .nutritionalvalues .tab-content .text-content{
  border-radius: 10px;
  background-color: #f7f7f7;
  padding: 10px 10px;
}
.product-section .boxes .item .nutritionalvalues .tab-content .table{
  background-color: white;
  margin-bottom: 0;
}
.product-section .boxes .item .nutritionalvalues .tab-content .table td{
  font-weight: 500;
  font-size: 15px;
}
.product-section .boxes .item .nutritionalvalues .tab-content .table td i{
  color: #87c657;
  margin-left: 8px;
}

.nutritionalvalues .tabs-nvalues .nav-tabs .nav-item{
  width: 48%;
}
.nutritionalvalues .tabs-nvalues .nav-tabs .nav-item .btn{
  padding: 7px 14px;
  width: 100%;
  color: #939393;
  background-color: #f7f7f7;
  border-color: #f7f7f7;
  transition: 0.4s;
}
.nutritionalvalues .tabs-nvalues .nav-tabs .nav-item .btn.active{
  color: var(--white);
  background-color: #87c657;
  border-color: #87c657;
  transition: 0.4s;
}
.nutritionalvalues .tabs-nvalues .nav-tabs .nav-item .btn.active:hover{
  color: #fff !important;
}
.product-section .boxes .item .nutritionalvalues .nvalues-image{}
.product-section .boxes .item .nutritionalvalues .nvalues-image .image-content{
  position: relative;
  overflow: hidden;
  height: 360px;
  margin-bottom: 20px;
}
.product-section .boxes .item .nutritionalvalues .nvalues-image .image-content img{
  animation: defaultimg 1.8s ease-in-out;
  transform: rotate(0deg);
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.product-section .modal-header .ptitle{
  padding-top: 20px;
}
.product-section .modal-header .ptitle h3{
  font-size: 25px;
  font-weight: 800;
  transition: 0.3s;
  color: #373434;
}

/* nutritional values modal --------------- */








/* best-seller ---------------------------------- */


/* default product ---------------------------------- */
.product-section .boxes .item .content .image-carousel .default-image{
  height: 100%;
}
.product-section .boxes .item .content .bottom{
  border-top: 1px solid #f4f4f4;

}
.product-section .boxes .item .content .image-carousel .default-image img{
  animation: defaultimg 1.8s ease-in-out;
  transform: rotate(0deg);
  width: 100%;
  height: 100%;
  object-fit: contain;
}
 
.product-section .boxes .item.default .content .bottom .action .add-to-card{
  width: 100%;
} 
@keyframes defaultimg {
  0% {
    transform: rotate(0deg);
  }
  20% {
    transform: rotate(-8deg);
  }
  40% {
    transform: rotate(0deg);
  }
  60% {
    transform: rotate(-4deg);
  }
  100% {
    transform: rotate(0deg);
  } 
} 
/* default product ---------------------------------- */


/* footer-section  ---------------------------------- */

.landing-footer .footer-section{
  margin-top: 0;
}
.footer-section{
  padding-top: 4em;
  padding-bottom: 0;
  background-color: #202020;
  margin-top: 6em;
  position: relative;
}
.footer-section::after{
  /* content: ' '; */
  background-image: url("../img/png/1009dark.png");
  background-size: cover;
  background-position: bottom;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  opacity: 0.6;
  z-index: 0;
}
.footer-section .top_part{
  padding-bottom: 3em;
  position: relative;
  z-index: 9;
  
}
.footer-section .item{}
.footer-section .item.links{
  padding-right: 5em;
}
.footer-section .item .item-content{
  padding-top: 27px;
}
.footer-section .item .item-content .content{
  display: flex;
  flex-wrap: wrap;
}

.footer-section .item .image{
  padding-bottom: 20px;
}
.footer-section .item .image img{
  width: 110px;
}
.footer-section .item .text{}
.footer-section .item .text p{} 

.footer-section .item .main-title{
  position: relative;
}
.footer-section .item .main-title::after {
content: " ";
width: 35px;
height: 2px;
background-color: #87c657;
position: absolute;
right: 0;
}
.footer-section .item .main-title h3{
  font-weight: 700;
  font-size: 20px;
  color: white;
}
 
/* social media ----------------- */
.footer-section .item .social-media {
  margin-left: 0;
  margin-top: 30px;
  padding-bottom: 0;
} 
.footer-section .item .social-media h5{
  font-weight: 600;
  font-size: 17px;
  color: white;
}
.footer-section .item .social-media ul {
  margin-top: 0;
  padding: 0;
}

.footer-section .item .social-media ul li {
  display: inline-block;
  margin: 0;
  padding: 0 0;
}

.footer-section .item .social-media ul li a {
  text-align: center;
  font-size: 17px;
  transition: 0.3s;
  color: #d1d1d1; 
  height: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 26px;
}
.footer-section .item .social-media ul li a:hover{
  transition: 0.3s;
  color: #87c657;
}

.footer-section .item .social-media ul li a i {
  margin-top: 0;
  margin-left: 0; 
}
/* social media ----------------- */

/* contact info  ----------------- */
.footer-section .item .contact-info{
  padding-top: 24px;
}
.footer-section .item .contact-info ul{
  padding-right: 0;
}
.footer-section .item .contact-info ul li{
  display: flex;
  flex-wrap: wrap;
  padding: 4px 0;
}
.footer-section .item .contact-info ul li a{
  display: block;
  font-weight: 500;
  color: #9b9b9b;
  transition: 0.3s;
  direction: ltr;
  font-size: 16px;
}
.footer-section .item .contact-info ul li .icon{
  padding-left: 10px;
}
.footer-section .item .contact-info ul li .icon i{
  color: #87c657;
}
/* contact info  ----------------- */


/* newslater ----------------- */
.footer-section .item .send{
  width: 63px;
}
.footer-section .item .send .btn{
  padding: 10px 0;
  width: 44px;
  text-align: center;
  box-shadow: 0 6px 29px 0 rgb(255, 56, 56);
}
.footer-section .item .send .btn:hover{
  transition: 0.3s; 
}
.footer-section .item .email{
  width: calc(100% - 63px);
}
.footer-section .item .email .form-control{
  box-shadow: 0 6px 21px -4px rgb(220, 220, 220);
  border: 1px solid #fff;
  background-color: white;
}
/* newslater ----------------- */

/* links ----------------- */
.footer-section .item .item-content .links{}
.footer-section .item .item-content .links ul{ 
  padding-right: 0;
}
.footer-section .item .item-content .links ul li{}
.footer-section .item .item-content .links ul li a{
  padding: 7px 0;
  display: block;
  font-weight: 500;
  color: #9b9b9b;
  transition: 0.3s;
  font-size: 16px;
  position: relative;
}
.footer-section .item .item-content .links ul li a::before{
  content: "\f100";
  font-family: "Font Awesome 6 free" !important;
  font-weight: 900;
  margin-left: 4px;
  font-size: 12px;
  transition: 0.3s;
}
.footer-section .item .item-content .links ul li a:hover{
  transition: 0.3s;
  color: #87c657;
}
.footer-section .item .item-content .links ul li a:hover::before{
  transition: 0.3s;
  padding-right: 10px;
}
/* links ----------------- */

/* footer bottom  ----------------- */
.footer-section .buttom_part {
  border-top: 1px solid #383838;
  padding-bottom: 20px;
  padding-top: 23px;
  margin-top: 0;
  position: relative;
  z-index: 9;
}
.footer-section .buttom_part .center {
text-align:center
}
.footer-section .buttom_part .center p {
display:inline-block;
margin-bottom:0
}
.footer-section .buttom_part .center a {
display:inline-block
}
.footer-section .buttom_part .center a strong {
  color: #87c657;
}
/* footer bottom  ----------------- */







/* footer-section  ---------------------------------- */


/* open card ---------------------------------- */
.open-card .modal-dialog{
  margin-right: 0;
  margin-top: 0;
  height: 100%;
  margin-bottom: 0;
  width: 410px;
  max-width: 100%;
  margin-left: 0;
}
.open-card .modal-content{
  height: 100%;
  border-radius: 0;
}
.open-card .modal-content .modal-header{
  border-bottom: 1px solid #f4f4f4;
}
.open-card .modal-header .btn-close{
  margin-left: 0;
  margin-right: 0;
}
.open-card .modal-title{
  font-weight: 800;
  font-size: 18px;
  
}
.modal.fade .modal-dialog{ 
}
.modal.show .modal-dialog {
transform: none;
}
.open-card .card-items{}
.open-card .card-items .item{
  display: flex;
  flex-wrap: wrap;
  padding: 17px 0;
  border-bottom: 1px solid #f0f0f0;
  position: relative;
}
.open-card .card-items .item .image{
  width: 70px;
  height: 70px;
  border-radius: 10px;
  border: 1px solid #f0f0f0;
}
.open-card .card-items .item .image img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.open-card .card-items .item .details{
  width: calc(100% - 70px);
  padding-right: 7px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}
.open-card .card-items .item .details h3{
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 0;
}
.open-card .card-items .item .details .price{ 
} 
.open-card .card-items .item .details .price span{
  display: inline-block;
}
.open-card .card-items .item .details .price span.quantity{}
.open-card .card-items .item .details .price span.amount{
  color: #58ac18;
  font-weight: 600;
  font-size: 15px;
  
}
.open-card .card-items .item .details .content{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 100%;
}
.open-card .card-items .item .details .addetion{
  padding-top: 13px;
}
.open-card .card-items .item .details .addetion ul{
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 0;
}
.open-card .card-items .item .details .addetion ul li{
  display: flex;
  flex-wrap: wrap;
  margin-left: 7px; 
  margin-bottom: 4px;
}
.open-card .card-items .item .details .addetion ul li span{
  margin-bottom: 0;
  font-size: 12px;
  color: #999;
  font-weight: 500;
  background-color: #f7f7f7;
  border-radius: 20px;
  padding: 0px 7px;
}
.open-card .card-items .item .details .content .title{
  width: calc(100% - 114px);
}
.open-card .card-items .item .details .quantity-count{
  display: flex;
  flex-wrap: wrap; 
  width: 114px;
  
}
.open-card .card-items .item .details .quantity-count .product-quantity .qty-input .qty-count{
  width: 23px;
height: 23px;
}
.open-card .card-items .item .details .quantity-count .product-quantity .qty-input .product-qty{
  width: 30px;
}
.open-card .card-items .item .close{
  width: 20px;
  display: flex; 
  margin-right: 8px;
  left: 0;
  position: absolute;
  top: 32px;
}
.open-card .card-items .item .close .delete{
  background-color: transparent;
  width: 22px;
  height: 22px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  border: 1px solid #f2f2f2;
  border-radius: 20px;
  justify-content: center; 
}
.open-card .card-items .item .close i{
  font-size: 13px;
}
.open-card .modal-footer{
  display: block;
  padding: 0;
  border-top: 0;
}
.open-card .modal-footer .total{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 100%;
  padding: 3px 20px 10px 20px;
  margin: 0;
  border-bottom: 1px solid #f0f0f0;
}
.open-card .modal-footer .total .title{}
.open-card .modal-footer .total .title h3{
  margin-bottom: 0;
  font-size: 22px;
  font-weight: 800;
  transition: 0.3s;
  color: #373434;
}
.open-card .modal-footer .total .number{}
.open-card .modal-footer .total .number h4{
  margin-bottom: 0;
  font-size: 22px;
  font-weight: 800;
  transition: 0.3s;
  color: #373434;
  direction: ltr;
}
.open-card .modal-footer .btn{
  width: 100%;
  padding: 11px 18px;
  margin: 7px 0;
}
.open-card .modal-footer .btn.btn-secondary{
  background-color: #fff;
  border: 1px solid #ddd;
  color: #212529;
}
.open-card .modal-footer .btn.btn-secondary:hover{
  background-color: #e0e0e0;
  border: 1px solid #e0e0e0;
}
.open-card .modal-footer .client-number{
  padding: 10px 20px 20px 20px;
}
.open-card .modal-footer .client-number .item{}
.open-card .modal-footer .client-number .item:first-child{
  margin-bottom: 13px;
}
.open-card .modal-footer .client-number .item .form-label{
  display: block;
  margin-bottom: 16px;
}
.open-card .modal-footer .discreption{
  padding: 0 13px;
}
.open-card .modal-footer .discreption label{}
.open-card .modal-footer .discreption textarea{
  background-color: #f8f8f8;
}
/* open card ---------------------------------- */

/* about section  ---------------------------------- */
.about-section{
  padding-top: 2em;
}
.section-title{
  position: relative;
  padding-bottom: 1em;
} 
.section-title::after{
  content: " ";
  width: 39px;
  height: 3px;
  background-color: #87c657;
  display: block;
  top: 36px;
  position: absolute;
}
.about-section .text{}
.about-section .text p{}
/* about section  ---------------------------------- */

/* referaces section  ---------------------------------- */
.referaces-section{
  padding-top: 3em;
  padding-bottom: 2em;
}

.referaces-section .boxes {
  margin-top: 0;
}

.referaces-section .boxes .item {
  margin-bottom: 20px;
}

.referaces-section .boxes .item .image {
  border-radius: 13px;
  transition: 0.3s;
  height: 98px;
  background-color: white;
  box-shadow: 0 2px 3px 0 #c6c6c63d;
}
.referaces-section .boxes .item:hover .image{
  border-color: #8cd1565c;
  transition: 0.3s;

}

.referaces-section .boxes .item .image img {
  margin: 0 auto;
  display: block;
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.referaces-section .boxes .item a {
  display: block;
  height: 100%;
}
 
.referaces-section .boxes .item .icon i {
  transition: 0.3s;
  color: #e6e6e6;
  font-size: 35px;
}

.referaces-section .boxes .item .icon h3 {
  transition: 0.3s;
  color: #d9d9d9;
  font-size: 23px;
  text-shadow: none;
  line-height: 31px;
  margin-bottom: 0;
  font-weight: 300;
}

/* referaces section  ---------------------------------- */

/* nutritional-values section  ---------------------------------- */

/* nutritional-values section  ---------------------------------- */











/* toggle menu --------- */
.toggle-btn{
  margin-right: 20px;
}
.toggle-btn{
  display: none;
}
.menu_btn{ 
}
.menu_btn input#menu1 {
  display: none;
}

.menu_btn .icon { 
  cursor: pointer;
  display: block;
  height: 24px;
  padding: 0;
  width: 24px;
}

.menu_btn .hamburger  {
  position: relative;
  z-index: 200;
  /* border: 1px solid #000; */
  text-align: center;
  height: 30px;
  padding: 0;
  width: 34px;
  margin-top: 3px;
}
.hamburger-inner, .hamburger-inner::after, .hamburger-inner::before{
  background-color: #000;
  width: 24px;
height: 2px;
}
.hamburger-box{ 
  width: 25px;
  height: 24px;
  margin-top: 6px;
}

.hamburger-inner::before {
  top: -7px;
}
.hamburger-inner::after {
  top: 7px;

}
.menu_btn .hamburger.is-active .hamburger-inner::before{
  top: -10px;
}
.menu_btn .hamburger.is-active .hamburger-inner::after{
  top: 10px;
}
.hamburger.is-active .hamburger-inner, .hamburger.is-active .hamburger-inner::after, .hamburger.is-active .hamburger-inner::before{
  background-color: #000;
}
.menu_btn .hamburger-box{
  margin-top: 3px;
  width: 24px;
}
/* toggle menu --------- */







/* inner pages =============================== */
/* banner ==----------------- */
.banner-section{
  position: relative;
  margin-top: 9em;
  background-color: #f9f9f9;
  height: 210px;
}
.banner-sections::after {
content: ' ';
background-image: url("../img/png/1009dark.png");
background-size: cover;
background-position: bottom;
width: 100%;
height: 100%;
position: absolute;
left: 0;
right: 0;
top: 0;
opacity: 0.6;
z-index: 0;
}
.banner-section .container{
  height: 100%;
  
}
.banner-section .row{
  align-items: center;
  height: 100%;
}
.banner-section .content{
}
.banner-section .content .title{
  text-align: center;
}
.banner-section .content .title h3{
  font-weight: 800;
  font-size: 24px;
}
.banner-section .content .tree-links{
margin-bottom: 0;
}
.banner-section .content .tree-links ul{
  justify-content: center;
padding: 0;
margin-bottom: 0;
display: flex;
flex-wrap: wrap;
}
.banner-section .content .tree-links ul li{ 
margin-left: 24px;
position: relative;
}
.banner-section .content .tree-links ul li::after { 
  content: "\f053";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  position: absolute;
  left: -20px;
  top: 2px;
  width: 11px;
  display: block;
  background-repeat: no-repeat;
  background-size: auto;
  background-position: center;
  color: #61646b;
  font-size: 10px;
}
.banner-section .content .tree-links ul li:last-child:after{
display: none;
}
.banner-section .content .tree-links ul li:last-child{
  margin: 0;
} 
.banner-section .content .tree-links ul li a{
color: #61646b;
font-size: 13px;
font-weight: 500;
display: block;
transition: all 0.3s;
}
.banner-section .content .tree-links ul li a:hover{
  color: #87c657;
}
.banner-section .content .tree-links ul li .icon{
  color: #87c657;
}
.banner-section .content .tree-links ul li .icon img{
width: 13px;
margin-top: -2px;
} 
/* banner ==----------------- */

/* about ==----------------- */
.page-content{
  padding-top: 5em;
  padding-bottom: 6em;
  background-color: white;
}
.page-content.bg-grey{
  background-color: #f9f9f9;
}
.page-content .card{
  border-radius: 10px;
  background-color: white;
  border: none;
  box-shadow: 0 4px 15px 0 #d1d1d10d;
  transition: 0.3s;
  position: relative;
}
.page-content .card .card-body{
  padding: 39px 30px;
}
.page-content .about{}
.page-content .about p{}
/* about ==----------------- */

/* footer ==----------------- */
.inner-footer .footer-section{
  margin-top: 0;
}
/* footer ==----------------- */

/* clientreview ==----------------- */ 
.page-content .clientreview{
  padding-top: 0;
}
.clientreview{
  padding-top: 3em;
  background-color: #f9f9f9;
  padding-bottom: 3em;
}
.clientreview .item{}
.clientreview .item .content{
  background-color: white;
  padding: 40px 20px 20px 20px;
  border-radius: 10px;
  margin: 10px auto;
  width: 100%;
  box-shadow: 0 2px 6px 0 #d1d1d13d;
}
.clientreview .item .content .icon{
  margin-top: -64px;
}
.clientreview .item .content .icon img{
  width: 48px;
}
.clientreview .item .content .details{} 
.clientreview .item .content .details .title{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding-top: 10px;
  padding-bottom: 13px;
} 
.clientreview .item .content .details .title .name{} 
.clientreview .item .content .details .title .name h3{
  text-align: center;
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 0;
  color: #373434;
  transition: all 0.3s;
} 
.clientreview .item .content .details .title .stars{} 
.clientreview .item .content .details .title .stars ul{
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 0;
  padding: 0;
  direction: ltr;
} 
.clientreview .item .content .details .title .stars ul li{} 
.clientreview .item .content .details .title .stars ul li i{
  color: #e6e6e6;
} 
.clientreview .item .content .details .title .stars ul li.active i{
  color: #ffba4e;
} 
.clientreview .item .content .details .texts{} 
.clientreview .item .content .details .texts p{
  display: block;
  text-align: center;
  margin-top: 0;
  background-color: #eeeeee4d;
  padding: 20px 8px;
  border-radius: 13px;
  margin-bottom: 0; 
}
/* clientreview ==----------------- */

/* branchs ==----------------- */ 
.page-content .branchs{}
.page-content .branchs .main-item{
  padding-bottom: 2em;
}
.page-content .branchs .main-item .title {
  position: relative;
  padding-bottom: 26px;
}
.page-content .branchs .main-item .title::after{
  content: " ";
  width: 100%;
  height: 1px;
  display: block;
  position: absolute;
  left: 0;
  top: 15px;
  background-color: #e4e4e4;
}
.page-content .branchs .main-item .title h3{
  font-weight: 700;
  font-size: 19px;
  display: inline-block;
  background-color: white;
  z-index: 9;
  position: relative;
  padding-left: 30px;
  margin-bottom: 0;
} 
/* hello  */
/* coming soon -------------- */
.page-content .branchs .main-item .boxes .item.soon{
  position: relative;
}
.page-content .branchs .main-item .boxes .item.soon .content{
  box-shadow: 0 4px 15px 0 #d1d1d10d;
  border: 1px solid #e9e9e975;
}
.page-content .branchs .main-item .boxes .item.soon .content *::selection{
  background-color: transparent;
}
.page-content .branchs .main-item .boxes .item.soon .content *{
  filter: blur(4px);
  -webkit-filter: blur(4px);
  box-shadow: 0 4px 15px 0 #d1d1d10d;
  pointer-events: none;
  cursor: pointer;
} 
.page-content .branchs .main-item .boxes .item.soon .content .flag img{
  filter: blur(14px);
  -webkit-filter: blur(14px);
}
.page-content .branchs .main-item .boxes .item.soon .coming-soon{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}
.page-content .branchs .main-item .boxes .item.soon .coming-soon h3{
  font-weight: 500;
  font-size: 21px;
  color: #fff;
  font-family: 'Readex Pro', sans-serif;
  background-color: #87c657;
  padding: 0 13px 3px 13px;
  border-radius: 10px;
}
/* coming soon -------------- */

.page-content .branches-section .main-content{
  padding-top: 40px;
}

/* branchs ==----------------- */

 
/* nutritional-values ==----------------- */
.page-content .nutritional-values{
  padding-top: 0;
}
.nutritional-values{
  padding-top: 3em;
  padding-bottom: 2em;
}
.nutritional-values .item{
  margin-bottom: 27px;
}
.nutritional-values .item .content{
  background-color: white; 
  border-radius: 17px; 
  width: 100%;
  box-shadow: 0 2px 6px 0 #d1d1d13d;
  padding: 10px 10px;
}
.nutritional-values .item .content .image{
  height: 250px;
  overflow: hidden;
  border-radius: 10px;
}
.nutritional-values .item .content .image img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: 0.3s;
}
.nutritional-values .item:hover .content .image img{
  transition: 0.3s;
  transform: scale(1.2);
}
.nutritional-values .item .content .bottom{
  padding: 10px 0 0 0;
}
.nutritional-values .item .content .bottom .title{}
.nutritional-values .item .content .bottom .title h3{
  font-weight: 800;
  font-size: 17px;
}
.nutritional-values .item .content .bottom .detail{
} 
.nutritional-values .item .content .bottom .detail p{
}
/* nutritional-values ==----------------- */



/* get-branche-section ==----------------- */
.get-branche-section{
  margin-top: 6em;
  padding-top: 80px;
  padding-bottom: 80px;
  background-color: #f9f9f9;
  position: relative;

} 
.get-branche-section .main-content{
  position: relative;
  z-index: 9;
}
.get-branche-section::after {
  content: " ";
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background-image: url("../img/png/2548745g.png");
  background-size: 330px;
  background-position: revert;
  z-index: 0;
  border-radius: 20px;
  opacity: 0.3;
}
.get-branche-section .text{}
.get-branche-section .text .content{}
.get-branche-section .text .content h3{}
.get-branche-section .text .content p{}
.get-branche-section .text .content a{} 
.get-branche-section .container{
  height: 100%;
}
.get-branche-section .container .item{
  height: 100%;
  text-align: center;
  width: 70%;
  margin: 0 auto;
}
.get-branche-section .container .item .row{
  height: 100%;
}
.get-branche-section .container .item .text{}
.get-branche-section .container .item .image{
  width: 190px;
  margin: 0 auto;
}

.get-branche-section .item{
  position: relative; 
  border-radius: 20px;  
} 
.get-branche-section .image{
  z-index: 99;
}
.get-branche-section .image .content{
}
.get-branche-section .image img{
  width: 100%;
  height: 100%;
  object-fit: cover; 
}
.get-branche-section .text{ 
z-index: 99;
text-align: center;
}
.get-branche-section .text .content{ 
  margin-top: 40px;
}
.get-branche-section .text h3{
  font-size: 25px;
  font-weight: 800; 
  display: inline-block; 
  border-radius: 10px;
  margin-bottom: 0;
} 
.get-branche-section .text button{ 
  padding: 9px 40px; 
  margin-top: 30px;
} 
.get-branche-section .text p{
  margin-top: 12px; 
}


.get-branche-section.ex-2 .text{
text-align: right; 
}
.get-branche-section.ex-2 .text .content {
  margin-top: 0;
  padding-right: 30px;
  width: 80%;
}
/* get-branche-section ==----------------- */


/* contact ==----------------- */
.contact-section{
  padding-top: 4em;
}
.contact-section .title{}
.contact-section .title h3{
  font-weight: 800;
  font-size: 21px;
}
.contact-section .text .form-sec{}
.contact-section .text .form-sec .dont-have-acc{
  margin-top: 30px;
  margin-bottom: 40px;
}
.contact-section .text .form-sec .dont-have-acc h5{
  color: #1C2126;
  font-weight: 500;
  font-size: 15px;
}
.contact-section .text .form-sec .dont-have-acc h5 a{
  color: #EA1450;
  transition: 0.3s;
  margin-right: 4px;
}
.contact-section .text .form-sec .dont-have-acc h5 a:hover{
  transition: 0.3s;
  opacity: 0.7;

}
.contact-section .text .form-sec .form-box{}
.contact-section .text .form-sec .form-box .item{} 
.contact-section .text .form-sec .form-box .other{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 20px;
}
.contact-section .text .form-sec .form-box .other .switch{}
.contact-section .text .form-sec .form-box .other .switch .form-check {}
.contact-section .text .form-sec .form-box .other .switch .form-check .form-check-input{
  
}
.contact-section .text .form-sec .form-box .other .switch .form-check .form-check-label{}
.contact-section .text .form-sec .form-box .other .pass-reset{}
.contact-section .text .form-sec .form-box .other .pass-reset a{
  font-weight: 500;
  font-size: 15px;
  color: #EA1450;
  transition: 0.3s;
}
.contact-section .text .form-sec .form-box .other .pass-reset a:hover {
  transition: 0.3s;
  opacity: 0.7;
}
.contact-section .text .form-sec .form-box .login-btn{}
.contact-section .text .form-sec .form-box .login-btn .btn{
  display: block;
  width: 100%; 
}
.contact-section .text .form-sec .form-box .log-with{}
.contact-section .text .form-sec .form-box .log-with{}
.contact-section .text .form-sec .form-box .log-with .or {
  width: 100%;
  text-align: center;
  position: relative;
  margin-top: 28px;
 }
.contact-section .text .form-sec .form-box .log-with .or::after{
  content: " ";
  width: 100%;
  height: 1px;
  display: block;
  background-color: #C6CEDF;
  margin-top: -10px;
}
 .contact-section .text .form-sec .form-box .log-with .or span {
  text-align: center;
  display: inline;
  font-size: 14px;
  background-color: #fff;
  padding: 0 20px;
  color: #333B42;
 }
 .contact-section .text .form-sec .form-box .log-with .log-social{
  margin-top: 29px;
 }
 .contact-section .text .form-sec .form-box .log-with .log-social ul{
  text-align: center;
 }
 .contact-section .text .form-sec .form-box .log-with .log-social ul li{
  display: inline-block;
 }
 .contact-section .text .form-sec .form-box .log-with .log-social .link{
  width: 73px;
  height: 73px;
  display: flex;
  margin: 0 4px;
  border: 1px solid #C0C5CE;
  border-radius: 248px;
  justify-content: center;
  align-items: center;
  padding: 10px;
  transition: all 0.3s;
 }
 .contact-section .text .form-sec .form-box .log-with .log-social .link img{
  width: 27px;
 }
 .contact-section .text .form-sec .form-box .log-with .log-social .link.facebook:hover{
   border-color: #EA1450;
 }
 .contact-section .text .form-sec .form-box .log-with .log-social .link.google:hover{
   border-color: #EA1450;
 }

 .contact-section .image{}
 .contact-section .image img{
  width: 92%;
  margin: 0 auto;
  padding-top: 20px;
 }


.contact-section .text .form-sec .form-box .gender{}
.contact-section .text .form-sec .form-box .gender h3{
  color: #1C2126;
  font-weight: 500;
  font-size: 15px;
} 
.contact-section .text .form-sec .form-box .gender ul{
  padding: 0;
  display: flex;
  flex-wrap: wrap;
} 
.contact-section .text .form-sec .form-box .gender ul li{} 
.contact-section .text .form-sec .form-box .gender ul li .form-check{} 

.contact-section .text .form-sec .form-box .policy{
  margin-top: 20px;
} 

.contact-section .follow-us-sec{
  width: 100%;
  margin-top: 23px;
}
.contact-section .follow-us-sec h3{
  color: #1C2126;
  margin-bottom: 20px;
  font-weight: 800;
  font-size: 21px;
}
.contact-section .follow-us-sec .social-media{ 
  margin-bottom: 40px;
}
 
.contact-section .follow-us-sec .social-media ul{
  margin-top: 0;
  padding-right: 0;
}
.contact-section .follow-us-sec .social-media ul li{
  display: inline-block;
  margin: 0 4px;
}
.contact-section .follow-us-sec .social-media ul li a{
  text-align: center;
  font-size: 17px;
  transition: 0.3s;
  background-color: #87C657;
  padding: 0;
  border-radius: 70px;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
} 
.contact-section .follow-us-sec .social-media ul li a i{
  
}
.contact-section .follow-us-sec .social-media ul li .icon{}
.contact-section .follow-us-sec .social-media ul li .icon img{
  width: 20px;
  transition: all 0.3s;
  margin-top: -1px;
}
.contact-section .follow-us-sec .social-media ul li a:hover{
  background-color: #ffc455;
  
} 
 

.contact-section .contact_info{ 
  margin-bottom: 3em;
}
.contact-section .contact_info .content{ 
  margin-top: 2em;
  padding-top: 1em; 
  padding-bottom: 21px;

}
.contact-section .contact_info .content h4{
  font-weight: 500;
  font-size: 18px;
}

.contact-section .contact_info .content ul{
  padding: 0;
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
}
.contact-section .contact_info .content ul li{
  display: flex;
  flex-wrap: wrap;
  margin-left: 20px;
}
.contact-section .contact_info .content ul li h4{
  direction: ltr;
  color: #9f9f9f;
  font-size: 15px;
  font-weight: 400;
  font-family: 'Readex Pro', sans-serif;
}
.contact-section .contact_info .content ul li h4 a{
  color: #a2a2a2;
  transition: 0.3s;
  display: flex;
  flex-wrap: wrap;
}
.contact-section .contact_info .content ul li h4 a:hover{
  color: #87c657;
  transition: 0.3s;

}
.contact-section .contact_info .content ul li p{
  font-weight: 400;
  font-size: 15px;
  color: #a2a2a2;
  line-height: inherit;
  direction: ltr;
  font-family: 'Readex Pro', sans-serif;
  margin-bottom: 0;
}
.contact-section .contact_info .content ul li i{
  color: #87c657;
  font-size: 14px; 
}
.contact-section .contact_info .content ul li .icon{
  width: 30px;

}
.contact-section .contact_info .content ul li .fa-phone{
  transform: rotate(265deg);
}

.contact-section .franchising-section{ 
  margin-top: 2em;
} 
.contact-section .franchising-section h3{
  color: #1C2126;
  margin-bottom: 20px;
  font-weight: 800;
  font-size: 21px;
  position: relative;
  z-index: 9;
}
.contact-section .franchising-section .action{
  position: relative;
  z-index: 9;
}
.contact-section .franchising-section .action .btn{
  padding: 10px 44px;
}

/* modal ----------------- */
.franchising-modal{}
.franchising-modal .modal-header{}
.franchising-modal .modal-header h1{
  color: #1C2126;
  margin-bottom: 20px;
  font-weight: 800;
  font-size: 20px;
  margin-bottom: 0;
}
.franchising-modal .modal-footer{
  border-top: 0;
  padding-top: 0;
}
.franchising-modal .form-content{}
.franchising-modal .modal-footer .btn{
  width: 100%;
}

/* modal ----------------- */


/* contact ==----------------- */

 
/* card ==----------------- */


/* new items ==----------------- */
.page-content .card-section .items{ 
  padding: 0 10px;
}
.page-content .card-section .items .item{
  
}
.page-content .card-section .items .item .content{
  display: flex;
  flex-wrap: nowrap;
  border: 1px solid #f4f4f4;
  padding: 10px 10px;
  border-radius: 18px;
  margin-bottom: 12px;
  align-items: center;
  transition: 0.3s;
  cursor: pointer;
}
.page-content .card-section .items .item .content:hover{
  transition: 0.3s;
  background-color: #fbfbfb;
}
.page-content .card-section .items .item .content .mini-item{}
.page-content .card-section .items .item .content .mini-item.image{
  width: 60px;
}
.page-content .card-section .items .item .content .mini-item.details{}
.page-content .card-section .items .item .content .mini-item.price{
  width: 80px;
  text-align: center;
}
.page-content .card-section .items .item .content .mini-item.quantity{
}
.page-content .card-section .items .item .content .mini-item.delete-action{
  width: 50px;
}


.page-content .card-section .items .item .content .mini-item.title{
  width: calc(100% - 270px);
  padding-right: 20px;
}
.page-content .card-section .items .item .content .mini-item.title a{
  display: inline-block;
}
.page-content .card-section .items .item .content .mini-item.title h3{
  font-weight: 800;
  font-size: 16px;
  color: #373434;
  transition: 0.3s;
}
.page-content .card-section .items .item .content .mini-item .details{}
.page-content .card-section .items .item .content .mini-item .details ul{
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 0;
}
.page-content .card-section .items .item .content .mini-item .details ul li{
  display: flex;
  flex-wrap: wrap;
  margin-left: 7px; 
  margin-bottom: 4px;
}
.page-content .card-section .items .item .content .mini-item .details ul li span{
  margin-bottom: 0;
  font-size: 13px;
  color: #999;
  font-weight: 500;
  background-color: #f7f7f7;
  border-radius: 20px;
  padding: 0px 7px;
}
.page-content .card-section .items .item .content .mini-item h5
{
  margin-bottom: 0;
  direction: ltr;
  color: #777777;
  font-size: 17px;
  font-weight: 400;
  font-family: 'Readex Pro', sans-serif;
}
.page-content .card-section .items .item .content .mini-item .delete{
  display: flex;
  flex-wrap: wrap;
  align-items: center; 
  justify-content: center;
  
}
.page-content .card-section .items .item .content .mini-item .delete .no-style{
  background: none;
  border: 0;
}
.page-content .card-section .items .item .content .mini-item .delete .delete-btn{}
.page-content .card-section .items .item .content .mini-item .delete .delete-btn:hover i{}
.page-content .card-section .items .item .content .mini-item .delete i{
  color: #ff3838;
  font-size: 16px;
}
/* new items ==----------------- */




.page-content .card-section{
  width: 87%; 
  margin: 0 auto;
}
.page-content .card-section.checkout{
  width: 77%;
}
.page-content .card-section .table-sec{ 
  overflow-x: scroll;
}
.page-content .card-section .table-sec th{
  background-color: #87c657;
  border: 1px solid #83aa66 !important;
  color: #fff;
}
.page-content .card-section .table-sec tr{
  border-radius: 40px;
}
.page-content .card-section .table-sec td{
  border: 1px solid #efefef !important;
  vertical-align: middle;
}
.page-content .card-section .table-sec td h5{
  margin-bottom: 0;
  direction: ltr;
  color: #777777;
  font-size: 18px;
  font-weight: 400;
  font-family: 'Readex Pro', sans-serif;
}
.page-content .card-section .table-sec td .product-quantity{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.page-content .card-section .table-sec .delete{
  display: flex;
  flex-wrap: wrap;
  align-items: center; 
  justify-content: center;
  
}
.page-content .card-section .table-sec .delete .no-style{
  background: none;
  border: 0;
}
.page-content .card-section .table-sec .delete .delete-btn{}
.page-content .card-section .table-sec .delete .delete-btn:hover i{}
.page-content .card-section .table-sec .delete i{
  color: #ff3838;
  font-size: 16px;
}

.page-content .card-section .table-sec .image{
  width: 70px;
  height: 63px;
  border: 1px solid #e5e5e5;
  border-radius: 5px;
}
.page-content .card-section .table-sec .image img{
  height: 100%;
  width: 100%;
  object-fit: cover;
}
.page-content .card-section .table-sec .title{}
.page-content .card-section .table-sec .title a{
  display: inline-block;
}
.page-content .card-section .table-sec .title h3{
  font-weight: 800;
  font-size: 16px;
  color: #373434;
  transition: 0.3s;
}
.page-content .card-section .table-sec .title h3:hover{
  color: #87c657;
  transition: 0.3s;

}
.page-content .card-section .table-sec .details{}
.page-content .card-section .table-sec .details ul{
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 0;
}
.page-content .card-section .table-sec .details ul li{
  display: flex;
  flex-wrap: wrap;
  margin-left: 7px; 
  margin-bottom: 4px;
}
.page-content .card-section .table-sec .details ul li span{
  margin-bottom: 0;
  font-size: 13px;
  color: #999;
  font-weight: 500;
  background-color: #f7f7f7;
  border-radius: 20px;
  padding: 0px 7px;
}

/* table information -------------- */
.page-content .card-section .table-info{
 
} 
/* table information -------------- */
.page-content .card-section .order-information{ 
}
.page-content .card-section .order-information .row{
  justify-content: center;
}
.page-content .card-section .order-information .order-detail{

} 
.page-content .card-section .order-information .content{
  background-color: #f7f7f7; 
  border-radius: 10px;
  padding: 12px;
} 
.page-content .card-section .order-information .title{
  padding-bottom: 10px;
} 
.page-content .card-section .order-information .title h3{
  font-weight: 700;
  font-size: 18px;
  color: #373434;
} 
.page-content .card-section .order-information .order-detail  .content .information{
  display: flex;
  flex-wrap: wrap;
  padding: 10px 20px 5px 20px;
  justify-content: space-between;
  margin-top: 9px;
  border-radius: 10px;
  border: 2px solid #fff;
  background-color: white;
} 
.page-content .card-section .order-information .content .information .item{
  display: flex;
  flex-wrap: wrap;
  align-items: end;
} 
.page-content .card-section .order-information .content .information .item .btn{
  padding: 9px 14px;
}
.page-content .card-section .order-information .content .information .item h2{
  font-weight: 600;
  font-size: 17px;
  color: #9d9d9d;
  margin-bottom: 0;
}
.page-content .card-section .order-information .content .information .item h3{
  font-weight: 600;
  font-size: 19px;
  color: #9d9d9d;
  margin-right: 9px; 
  margin-bottom: 0;
}
.page-content .card-section .order-information .client-detail{

} 
.page-content .card-section .order-information .client-detail .information{
} 
.page-content .card-section .order-information .client-detail .information .item .btn{
  width: 100%;
}


.page-content .card-section .order-information .checkout{
}
.page-content .card-section .order-information .checkout .information{
}
.page-content .card-section .order-information .checkout-block{
}
.page-content .card-section .order-information .checkout-block .main-title{}
.page-content .card-section .order-information .checkout-block .main-title h3{
  font-weight: 600;
  font-size: 21px;
  color: #373434;
  margin-left: 29px;
  margin-bottom: 0;
}
.page-content .card-section .order-information .checkout-block .checkout-block-content{
 
}
.page-content .card-section .note{
  margin-bottom: 3em;
  margin-top: 2em;
}
.page-content .card-section .note .title{}
.page-content .card-section .note .title h3{
  font-weight: 600;
  font-size: 17px;
  color: #373434;
  margin-left: 29px;
  padding-bottom: 12px;
}


.page-content .card-section .order-information .checkout-adress{
  padding-top: 3px;
  text-align: center;
  display: flex;
  flex-wrap: wrap; 
  
}
.page-content .card-section .order-information .checkout-adress .item{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding-bottom: 10px;
}
.page-content .card-section .order-information .checkout-adress h3{
  font-weight: 600;
  font-size: 17px;
  color: #373434;
  margin-left: 29px;
  margin-bottom: 0;
}
.page-content .card-section .order-information .checkout-adress .selection{
  width: calc(100% - 180px);
  padding-left: 20px;
}
.page-content .card-section .order-information .checkout-adress .selection .nice-select{
  background-color: #fff;
  
}
.page-content .card-section .order-information .checkout-adress .selection .nice-select span{
  font-family: "Roboto", sans-serif;
  font-size: 14px;
  font-weight: 400;
  width: 100%;
  display: block;
  overflow: hidden;
}
.page-content .card-section .order-information .checkout-adress .selection .nice-select .option{
  font-size: 15px;

}

.page-content .card-section .order-information .checkout-adress .add{
  text-align: right;
  width: 180px;
}
.page-content .card-section .order-information .checkout-adress .add .btn{
  padding: 9px 19px;
  font-size: 15px;
  width: 100%;
}

.page-content .card-section .order-information .checkout-payment .title{}
.page-content .card-section .order-information .checkout-payment .title h3{
  font-weight: 600;
  font-size: 17px;
  color: #373434;
  margin-left: 29px;
  margin-bottom: 0;
}
.page-content .card-section .order-information .checkout-payment .payment-selection{
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 10px;
  margin-top: 10px;
}
.page-content .card-section .order-information .checkout-payment .payment-selection .form-check{
  margin-left: 7px;
  background-color: #f6f6f6;
  border: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: right;
  align-items: center;
  border-radius: 10px;
  color: #989292;
  font-weight: 600;
  transition: 0.3s;
  position: relative;
  cursor: pointer;
  padding: 0;
  margin-bottom: 10px;
}
.page-content .card-section .order-information .checkout-payment .payment-selection .form-check .form-check-input{
  float: right;
  margin-left: 0;
  margin-right: 0;
  position: absolute;
  right: 11px;
  top: 12px;
  box-shadow: none;
  border: 1px solid gainsboro;
}
.page-content .card-section .order-information .checkout-payment .payment-selection .form-check .form-check-label{
  margin-right: 0;
  cursor: pointer;
  padding: 12px 33px 12px 21px;
  background-color: #f6f6f6;
  border-radius: 12px;
}
.page-content .card-section .order-information .checkout-payment .payment-selection .form-check.active .form-check-label{
  background-color: #87c657;
  color: #fff;
}
.page-content .card-section .order-information .checkout-payment{
  padding-top: 3em;
}
.page-content .card-section .order-information .checkout-payment .content-ul{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.page-content .card-section .order-information .checkout-payment ul{
  border: 0;
  padding: 3px 3px;
  border-radius: 60px;
  margin-bottom: 15px;
  width: 100%;
}
.page-content .card-section .order-information .checkout-payment ul li{
  margin-left: 11px;
}
.page-content .card-section .order-information .checkout-payment ul li .nav-link{
  width: 100%;
  padding: 14px 22px;
  border: none;
  position: relative;
  transition: 0.3s;
  display: flex;
  flex-wrap: wrap;
  justify-content: right;
  align-items: center;
  border-radius: 10px;
  color: #989292;
  font-weight: 600;
  transition: 0.3s;
  position: relative;
  background-color: #f6f6f6;
}
.page-content .card-section .order-information .checkout-payment ul li .nav-link i{
  margin-left: 12px;
  opacity: 0;
  transition: 0.3s;
}
.page-content .card-section .order-information .checkout-payment ul li .nav-link.active i{
  opacity: 1;
  transition: 0.3s;
}
.page-content .card-section .order-information .checkout-payment ul li .nav-link:hover{
  transition: 0.3s;
  background-color: #e7e7e7;

}
.page-content .card-section .order-information .checkout-payment ul li .nav-link.active{
  background-color: #87c657;
  color: #fff;
}

.page-content .card-section .order-information .checkout-payment .tab-content{ 
}
.page-content .card-section .order-information .checkout-payment .tab-content .tab-pane{
 
}
.page-content .card-section .order-information .checkout-payment .tab-content .tab-pane.active {
  opacity: 1;
}

.page-content .card-section .order-detail-sec{
  margin-top: 30px;
  width: 470px;
  margin-right: auto;
  padding: 16px 10px;
  border-radius: 11px;
  border: 1px solid #f4f4f4;
  display: flex;
  flex-wrap: wrap;
}
.page-content .card-section .order-detail-sec .item{
  margin: 0 4px; 
  border-radius: 4px;
  padding: 3px 14px;
  }
.page-content .card-section .order-detail-sec .item h3{
  font-weight: 500;
  font-size: 20px;
  color: #373434;
  margin-bottom: 0;
}
.page-content .card-section .order-detail-sec .item span{
  color: #87c657;
  font-weight: 600;
  font-size: 26px;
}
.page-content .card-section .action{
  margin-top: 40px;
}
.page-content .card-section .action a{
  width: 100%;
}
.page-content .card-section .action i{
  margin-right: 10px;
}

.login-modal .modal-backdrop{
  background: rgba(0, 0, 0, 0.08);
  -webkit-backdrop-filter: blur(25px);
  backdrop-filter: blur(25px);
}
.login-modal .modal-backdrop.show{
  opacity: 1;
}

/* card ==----------------- */

/* branch-info ==----------------- */
.page-content .branches-section{
  padding-top: 0;
}
.page-content .branches-section .boxes{
  padding-top: 0;
}
.branch-info{
  padding-top: 3em;
}
.branch-info .item{}
.branch-info .main-content{
  padding-left: 10px;
  padding-right: 10px;
  padding-bottom: 10px;
  padding-top: 10px;
  border-radius: 10px;
  background-color: white;
  border: 2px solid #f4f4f4;
}
.branch-info .item .content{

  transition: 0.3s;
  position: relative;
  display: flex;
  flex-wrap: wrap;
}
.branch-info .item .content h4{
  font-weight: 600;
  font-size: 16px;
  color: #aeaeae;
  margin-bottom: 0;
}
.branch-info .item .content h3{
  font-weight: 600;
  font-size: 16px;
  color: #373434;
  margin-bottom: 0;
}
.branch-info .item .content h3.en{
  direction: ltr;
  font-size: 16px;
  font-weight: 400;
  font-family: 'Readex Pro', sans-serif;
}
.branch-info .item .content .icon{
  width: 50px;
  height: 50px;
  background-color: #87c657;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  margin-left: 14px; 
  background-size: 260px;
  background-position: bottom;
}
.branch-info .item .content .icon img{
  width: 26px;
}
.branch-info .item .content .text{
  width: calc(100% - 64px);
}
.branch-info .item .content .text a{
  color: #373434;
  transition: 0.3s;
}
.branch-info .item .content .text a:hover{
  transition: 0.3s;
  color: #87c657;

}


/* branch-info ==----------------- */





/* inner pages =============================== */

/* landing =============================== */
body.landing-page{
  background-color: #fff;
}



/* slider ---------------------------------- */
.slider-section { 
  direction: ltr;
  background-color: #fff;
  padding-bottom: 0;
  background-image: url("../img/png/1009dark.png");
  background-size: cover;
  background-position: bottom;
  position: relative;
  margin-top: 140px;
} 
.mobile-slider{
  display: none;
}

.slider-section .caption{
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  z-index: 9;
}
.slider-section .caption .content{ 
  text-align: center;
  margin-top: -110px;
}
.slider-section .caption .container{
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}
.slider-section .caption span{
  font-size: 21px;
  color: #fff;
  font-weight: 600;
  background-color: #87c657;
  border-radius: 10px;
  padding: 0 20px 4px 20px; 
}
.slider-section .caption h3{
  margin-top: 20px;
  font-weight: 700;
  font-size: 36px;
  color: white;
}
.slider-section .caption .action{
  margin-top: 40px;
}
.slider-section .caption .action a{
  margin-right: 16px;
  padding: 10px 34px;
} 
.slider-section .item {
  position: relative;
}
.slider-section .item::after{
  content: " ";
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background: #0f0f0f2e;
}

.slider-section .item .image {
  height: 79vh;
  position: relative;
}
.slider-section .item .image::after{
  content: " ";
  border: 1px solid #ebebeb5c;
}

.slider-section .item .image img { 
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: center;
}


.slider-section .main-slider .owl-nav {
  height: 0;
  margin: auto;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.slider-section .main-slider .owl-nav button {
  background-color: #87c657;
  width: 46px;
  height: 46px;
  position: absolute;
  top: 330px;
}

.slider-section .main-slider .owl-nav button i {
  color: #fff;
}

.slider-section .main-slider .owl-nav button.owl-prev {
  padding: 0 6px !important;
  margin-left: 30px;
}

.slider-section .main-slider .owl-nav button.owl-next {
  padding: 0 6px !important;
  margin-right: 30px;
  right: 0;
}

.slider-section .main-slider .owl-dots{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 20px;
  position: absolute;
  bottom: 26px;
  left: 0;
  right: 0;
}
.slider-section .main-slider .owl-dots .owl-dot{
  width: 15px;
  height: 15px;
  background-color: #fff;
  margin: 0 6px;
  border-radius: 50px;
  border: 2px solid white;
}
.slider-section .main-slider .owl-dots .owl-dot.active{
  background-color: #87c657;
}
.slider-section{}
.slider-section .line{
  position: absolute;
  left: 0;
  width: 100%;
  height: 47px;
  bottom: 0;
  z-index: 99;
  background-image: url("../img/png/line.png");
  background-size: contain;
  background-position: bottom;
}
.slider-section .line img{}
/* slider ---------------------------------- */

/* about landing ---------------------------------- */
.about-landing{
  padding-top: 5em;
  padding-bottom: 6em;

}
.about-landing .text .title{ 
  padding-top: 0;
}
.about-landing .text h4{
  display: inline-block;
  font-weight: 600;
  font-size: 19px;
  color: #87c657;
}
.about-landing .text h3{
  font-weight: 800;
  font-size: 30px;
  line-height: 40px;
}
.about-landing .text .detail{}
.about-landing .text .detail p{} 

.about-landing .image{
  position: relative;
}   
.about-landing .image .experiens{
  display: flex;
  flex-wrap: wrap;
  position: absolute;
  bottom: 18px;
  right: 30px;
  background-color: white;
  border-radius: 10px;
  padding: 4px 10px;
}
.about-landing .image .experiens .number{}
.about-landing .image .experiens .number h4{
  margin-bottom: 0;
  font-weight: 800;
  font-size: 58px;
  height: 55px;
  line-height: 56px;
  color: #87c657;
}
.about-landing .image .experiens .textt{
  padding-right: 10px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.about-landing .image .experiens .textt h3{
  font-weight: 700;
  font-size: 22px;
  margin-bottom: 0;
}
.about-landing .image .bottom{
  position: relative;
}
.about-landing .image .bottom img{
  border-radius: 20px;
  box-shadow: 9px 9px 0 0 #87c657;
}

.about-landing .text .branches-about{
  padding-top: 2em;
}
.about-landing .text .branches-about h1{
  font-weight: 600;
  font-size: 19px;
  color: #373434;
}
.about-landing .text .branches-about .list-sec{}
.about-landing .text .branches-about .list-sec ul{
  margin-bottom: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
}
.about-landing .text .branches-about .list-sec ul li{
  border-radius: 13px;
  transition: 0.3s;
  background-color: white;
  box-shadow: 0 2px 3px 0 #c6c6c63d;
  padding: 6px 10px;
  margin-left: 20px;
  width: 22%;
  margin-bottom: 19px;
  /* border: 2px solid #f3f3f3; */
}
.about-landing .text .branches-about .list-sec ul li h2{
  margin-bottom: 0;
  font-weight: 600;
  font-size: 16px;
  color: #757575;
}
.about-landing .text .branches-about .list-sec ul li h5{
  margin-bottom: 0;
font-size: 15px;
color: #a3a3a3;
}
/* about landing ---------------------------------- */

/* nutritional-boxes ---------------------------------- */
.nutritional-boxes{
  padding-top: 2em;
  padding-bottom: 6em;
}
.nutritional-boxes .row{
  justify-content: center;
}
.nutritional-boxes .item{
  position: relative;
  background-color: #f9f9f9;
  border-radius: 20px;
  margin-bottom: 20px;
  padding-top: 20px;
  padding-bottom: 10px;
}
.nutritional-boxes .item:nth-child(2n){
  border-radius: 20px;
  background-color: #87c657;

}
.nutritional-boxes .item::after{
  content: " ";
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background-image: url("../img/png/2548745g.png");
  background-size: 330px;
  background-position: revert;
  z-index: 0;
  border-radius: 20px;opacity: 1;
}
.nutritional-boxes .item:nth-child(2n)::after{
  content: " ";
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background-image: url("../img/png/2548745.png");
  background-size: 330px;
  background-position: revert;
  z-index: 0;
  border-radius: 20px;opacity: 1;

}
.nutritional-boxes .item:nth-child(2n) .text{
  position: relative;
  z-index: 99;
}
.nutritional-boxes .item:nth-child(2n) .image{
  position: relative;
  z-index: 99;
}
.nutritional-boxes .item:nth-child(2n) .text h3{
  color: #fff;
}
.nutritional-boxes .item:nth-child(2n) .text p{
  color: #fff;

}
.nutritional-boxes .item .image{
  z-index: 99;
}
.nutritional-boxes .item .image .content{
}
.nutritional-boxes .item .image img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 30px;
}
.nutritional-boxes .item .text{
  display: flex;
flex-wrap: wrap;
align-items: center;
z-index: 99;
}
.nutritional-boxes .item .text .content{
  padding-right: 3em;
}
.nutritional-boxes .item .text h3{
  font-size: 24px;
  font-weight: 800;
}
.nutritional-boxes .item .text p{}
/* nutritional-boxes ---------------------------------- */

/* branches-section ---------------------------------- */
.branches-section{
  padding-top: 1em; 
  padding-bottom: 3em; 
  background-size: 740px;
  background-position: center;
  position: relative;
}
.branches-section .main-content{
  background-color: #f9f9f9;
  position: relative;
  padding: 20px 20px;
  border-radius: 20px;
} 
.branches-section .section-title{
z-index: 9;
position: relative;
  
}
.branches-section .section-title h3{
}
.branches-section .section-title::after{
}
.branches-section .main-content::after {
  content: " ";
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background-size: 330px;
  background-position: revert;
  z-index: 0;
  border-radius: 20px;
  background-image: url("../img/png/2548745g.png");
}
.branches-section .boxes{
  padding-top: 20px;
  position: relative;
  z-index: 9;
}
.branches-section .boxes .item{
  margin-bottom: 23px;
}
.branches-section .boxes .item .content{
  background-color: white;
  box-shadow: 0 0px 5px 0 #c6c6c63d;
  padding: 16px 10px;
  border-radius: 13px;
  position: relative;
}
.branches-section .boxes .item .content .image{
  width: 25px;
  overflow: hidden;
  position: absolute;
  left: 12px;
  top: 11px;
  display: flex;
  height: 25px;
  border-radius: 70px;
}
.branches-section .boxes .item .content .image img{ 
  width: 100%;
height: 100%;
object-fit: cover;
}
.branches-section .boxes .item .content .num{
  background-color: #87c657;
  width: 36px;
  border-radius: 0 13px 0 30px;
  height: 35px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  position: absolute;
  right: 0;
  top: 0;
}
.branches-section .boxes .item .content .num h3{
  color: white;
  font-size: 21px;
  font-weight: 500;
  margin-left: 3px;
}
.branches-section .boxes .item .title{
  padding-top: 0;
  display: flex;
flex-wrap: wrap;
}
.branches-section .boxes .item .title h3{
  margin-bottom: 0;
  font-weight: 600;
  font-size: 18px;
  color: #757575;
}
.branches-section .boxes .item .title span{
  margin-bottom: 0;
  font-size: 15px;
  color: #a2a2a2;
  font-weight: 600;
  margin-top: 4px;
  margin-right: 10px;
}
.branches-section .boxes .item .details{
  padding-top: 20px;
}
.branches-section .boxes .item .details ul{
  padding: 0;
}
.branches-section .boxes .item .details ul li{}
.branches-section .boxes .item .details ul li h4{
  direction: ltr;
  color: #9f9f9f;
  font-size: 14px;
  font-weight: 400;
  font-family: 'Readex Pro', sans-serif;
}
.branches-section .boxes .item .details ul li h4 a{
  color: #a2a2a2;
  transition: 0.3s;
}
.branches-section .boxes .item .details ul li h4 a:hover{
  color: #87c657;
  transition: 0.3s;

}
.branches-section .boxes .item .details ul li p{
  font-weight: 400;
  font-size: 14px;
  color: #a2a2a2;
  line-height: inherit;
  direction: ltr;
  font-family: 'Readex Pro', sans-serif;
}
.branches-section .boxes .item .details ul li i{
  font-size: 14px; 
}
.branches-section .boxes .item .details ul li .fa-phone{
  transform: rotate(265deg);
}


.branches-section .boxes .item .actions{}
.branches-section .boxes .item .actions ul{
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 0;
}
.branches-section .boxes .item .actions ul li{
  margin-left: 10px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.branches-section .boxes .item .actions ul li:last-child{
  margin-left: 0;
}
.branches-section .boxes .item .actions ul li:nth-child(1){
  width: calc(100% - 82px);
  margin-left: 0;
}
.branches-section .boxes .item .actions ul li:nth-child(2){
  width: 34px;
}
.branches-section .boxes .item .actions ul li:nth-child(3){
  width: 34px;
}

.branches-section .boxes .item .actions ul li:nth-child(1) .btn{
  width: 100%;
  margin-left: 10px;
}
.branches-section .boxes .item .actions ul li .btn{
  font-size: 15px;
  line-height: 20px;
  color: #fff; 
  font-weight: 600;
  padding: 8px 20px 9px 20px;
  border-radius: 25px;
  
}
.branches-section .boxes .item .actions ul li .btn.btn-primary i{
  margin-right: 10px;
}
.branches-section .boxes .item .actions ul li .btn.btn-warning{
  background-color: #f1f1ef00;
  border-color: #f1f1ef;
  text-transform: uppercase;
  color: #a3a3a3;
  font-size: 16px;
  padding: 3px 7px;
  width: 33px;
  height: 33px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}
.branches-section .boxes .item .actions ul li .btn.btn-primary:hover{
  background-color: #edf7e6;
  border-color: #edf7e6;
  color: #87c657 !important;
}
.branches-section .boxes .item .actions ul li .btn.btn-warning:hover{
  background-color: #feb04c;
  border-color: #feb04c;
  color: #fff;

}


/* coming soon -------------- */ 
.branches-section .boxes .item.soon{
  position: relative;
}
.branches-section .boxes .item.soon .content{ 
}
.branches-section .boxes .item .content .image{
  filter: blur(0) !important;
  -webkit-filter: blur(0) !important;
}
.branches-section .boxes .item.soon .content *::selection{
  background-color: transparent;
}
.branches-section .boxes .item.soon .content *{

  box-shadow: 0 4px 15px 0 #d1d1d10d;
  pointer-events: none;
  cursor: pointer;
} 
.branches-section .boxes .item.soon .content .title{
    filter: blur(4px);
  -webkit-filter: blur(4px);
}
.branches-section .boxes .item.soon .content .details{
    filter: blur(4px);
  -webkit-filter: blur(4px);
}
.branches-section .boxes .item.soon .content .actions{
    filter: blur(4px);
  -webkit-filter: blur(4px);
}

.branches-section .boxes .item.soon .content .flag img{
  filter: blur(14px);
  -webkit-filter: blur(14px);
}
.branches-section .boxes .item.soon .coming-soon{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  z-index: 9;
}
.branches-section .boxes .item.soon .coming-soon h3{
  font-weight: 500;
  font-size: 21px;
  color: #fff;
  font-family: 'Readex Pro', sans-serif;
  background-color: #87c657;
  padding: 0 13px 3px 13px;
  border-radius: 10px;
}

.slick-vertical .slick-slide {
  /* width: 316px !important; */
}
.categorie-section .boxes .item .content.active{
  background-color: #87c657;
  border: 2px solid #87c657;
  transition: 0.3s;
}
.categorie-section .boxes .item .content.active .image img{
  filter: brightness(0) invert(1);
  transition: 0.1s;
}

.categorie-section .boxes .item .content.active .title h3{
  color: #fff;
  transition: 0.3s;
}


/* underconstruction ---------------------------------- */
.coming-soon{
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}
.coming-soon .container{

}
.coming-soon .box{
  margin: 0 auto;
  width: 800px;
  text-align: center;
}
.coming-soon .box .icon{
  padding-bottom: 1em;
} 
.coming-soon .box .icon img{
  width: 210px;
} 

.coming-soon .box .text{
  padding-bottom: 30px;
}
.coming-soon .box .text h3{
  font-weight: 900;
  font-size: 41px;
}
.coming-soon .box .text p{
  font-size: 16px;
  margin-bottom: 0;
} 
.coming-soon .box .back{}
.coming-soon .box .back .btn{}

/* underconstruction ---------------------------------- */


/* payment-select ---------------------------------- */
.payment-select{
  display: flex;
  flex-wrap: wrap;
  padding-top: 10px;
  padding-bottom: 19px; 
  justify-content: space-between;
}
.payment-select .item{
  width: 49%;
  margin-bottom: 0 !important;
}
.payment-select .item .content{ 
  position: relative;
}
.payment-select .item .content button{
  display: block;
  width: 100%;
  padding: 6px 10px;
  background-color: transparent;
  border-radius: 9px;
  box-shadow: 0 4px 15px 0 #d1d1d13d;
  border: 1px solid #f2f2f2;
  position: relative;
  transition: 0.3s;
  display: flex;
  flex-wrap: wrap;
  justify-content: right;
  align-items: center;
}
.payment-select .item .content button .check{
  position: absolute;
  left: 7px;
  top: 7px;
  background-color: #f2f2f2;
  width: 18px;
  height: 18px;
  border-radius: 40px;
  line-height: 18px;
}
.payment-select .item .content button .check i{
  font-size: 12px;
  display: none;
}
.payment-select .item .content button.active .check i{
  display: initial;
}
.payment-select .item .content button.active{
  background-color: #87c657; 
  border: 1px solid #87c657;
}
.payment-select .item .content button.active .check{
  background-color: #fff;
}
.payment-select .item .content button.active .check i{
  color: #87c657;
}
.payment-select .item .content button.active .icon img {
  filter: brightness(0) invert(1);
  transition: 0.1s;
}
.payment-select .item .content button.active .title h3{
color: #fff;
}
.payment-select .item .content button:hover{
  border-color: #87c657;
  transition: 0.3s;
} 
.pyament-selection-title{}
.pyament-selection-title h3{
  font-weight: 600;
font-size: 14px;
margin-bottom: 0;
}
.payment-select .item .content button .icon{
  height: 33px;
  display: flex;
align-items: center;
}
.payment-select .item .content button .icon img{
  width: 27px;
}
.payment-select .item .content button .title{
  padding-right: 7px;
}
.payment-select .item .content button .title h3{
  font-size: 15px;
  margin-bottom: 0;
  color: #343434;
  font-weight: 600;
}
.payment-modal{
  max-width: 590px;
}
.payment-select-modal .modal-title{
  font-weight: 600;
  margin: 0 auto;
}
.payment-select-modal .modal-header{
  padding: 19px 30px;
  position: relative;
}
.payment-select-modal .modal-header .btn-close{
  position: absolute;
  left: 32px;
}
/* payment-select ---------------------------------- */

/* offers-section ---------------------------------- */
.offers-section{}
.offers-section .boxes{}

.offers-section .boxes .item{ 
  margin-bottom: 21px;
} 
.offers-section .boxes .item .content{
  box-shadow: 0 11px 23px 0px #ececec57;
  border: 1px solid #f3f3f3;
  border-radius: 10px;
  position: relative;
  transition: 0.3s;
  padding: 5px 5px;
}   
.offers-section .boxes .item .content .text{
  padding: 7px 0 10px 0;
}
.offers-section .boxes .item .content .image{
  border-radius: 10px;
  overflow: hidden;
  height: 250px;
  position: relative;
}
.offers-section .boxes .item .content .image img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: 0.3s;
}
.offers-section .boxes .item:hover .content .image img{
  transition: 0.3s;
  transform: scale(1.1);
} 
.offers-section .boxes .item .content .text .title{}
.offers-section .boxes .item .content .text .title a{
  display: block;
  color: #424242;
  transition: 0.3s;
}
.offers-section .boxes .item .content .text .title a:hover{
  transition: 0.3s;
  color: #007cdc;
}
.offers-section .boxes .item .content .text h3{
  font-weight: 600;
  font-size: 17px;
}
.offers-section .boxes .item .content .text p{}  
.offers-section .boxes .item .content .text ul{
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  margin-bottom: 0;
}
.offers-section .boxes .item .content .text ul li{
  margin-left: 10px;
}
.offers-section .boxes .item .content .text ul li span{
  color: #888;
  font-size: 15px;
}
.offers-section .boxes .item .content .text ul li i{
  color: #87c657;

}
/* offers-section ---------------------------------- */



/* login system ---------------------------------- */
.login-signup{
  padding-top: 3em;
}
.login-signup .content{ 
  padding-top: 4em;
}
.login-signup .content .title{
  text-align: center;
}
.login-signup .content .title .icon{
  width: 45px;
  height: 45px;
  background-color: #87c657;
  border-radius: 30px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
}
.login-signup .content .title .icon i{
  color: white;
  font-size: 19px;
}
.login-signup .content .title h3{ 
  font-weight: 700;
  font-size: 31px;
  margin-bottom: 7px;
  margin-top: 9px;
}
.login-signup .content .title p{}
.login-signup .content .title p span{
  direction: ltr;
  display: inline-block;
}
.login-signup .content .box{
  margin-top: 24px;
  background-color: #fff;
  padding: 20px 20px;
  border-radius: 17px;
  box-shadow: 0 4px 15px 0 #ccc3;
  width: 470px;
  margin-left: auto;
  margin-right: auto;
}

/* otp --------------------- */
.login-signup .content .form-sec.otp-form{
  padding-top: 10px;
}
.login-signup .content .form-sec.otp-form .inp_box{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  direction: ltr;
}

.login-signup .content .form-sec.otp-form .inp-box{
}
.login-signup .content .form-sec.otp-form input{
  width: 22%;
  padding: 11px 16px !important;
  border-radius: 10px;
  height: 110px;
  font-size: 55px !important;
  text-align: center !important;
} 
.form-sec.otp-form .form-control.is-invalid, .form-sec.otp-form .was-validated .form-control:invalid{
  background-position: 5px 5px;
  background-size: 21px;
  border-color: #ff3549;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23ff3549' stroke='none'/%3e%3c/svg%3e");
}
.form-sec.otp-form .form-control.is-valid, .form-sec.otp-form .was-validated .form-control:valid{
  background-position: 5px 5px;
  background-size: 21px;
  border-color: #87c657;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%2387c657' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
}
.login-signup.otp-form-box {
  padding-top: 0;

}
.login-signup.otp-form-box .content{
  padding-top: 0;
}
.login-signup.otp-form-box .content .box{
  box-shadow: initial;
}

/* otp --------------------- */
.login-signup .content .form-sec{}
.login-signup .content .form-sec .item{}
.login-signup .content .form-sec .item .iti{
  margin-top: 0;
}
.login-signup .content .form-sec .item .iti .form-control{
 height: 50px;
}
.login-signup .content .form-sec .item .form-label{
  font-weight: 500;
  font-size: 15px;
}
.login-signup .content .form-sec .item .form-control[type="email"]{
  text-align: left;
  font-size: 17px;
  direction: initial;
}
.login-signup .content .form-sec .item .form-control[type="text"]{
  padding-right: 58px;
}
.login-signup .content .form-sec .item .form-control[type="password"]{
  text-align: left;
  font-size: 17px;
}
.login-signup .content .form-sec .item .inp-box{
  position: relative;
}
.login-signup .content .form-sec .item .inp-box .icon{
  position: absolute;
  bottom: 0;
  top: 1px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding: 0 14px;
  background-color: #fdfdfd;
  margin-right: 1px;
  border-radius: 0 40px 40px 0;
  height: 96%;
  z-index: 9;
}
.login-signup .content .form-sec .item .inp-box .icon i{
  font-style: normal;
  color: #353535;
}
.login-signup .content .form-sec .item .pass-reset{
  float: left;
}
.login-signup .content .form-sec .item .pass-reset a {
  font-weight: 500;
  font-size: 14px;
  color: #ACACAC;
  transition: 0.3s;
}
.login-signup .content .form-sec .item .pass-reset a:hover{
  color: #ff3838;
  transition: 0.3s;

}
.login-signup .content .form-sec .item .btn{ 
  display: block;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 29px;
  padding-bottom: 10px;
}
.login-signup .content .other{}
.login-signup .content .other ul{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.login-signup .content .other ul li{ 
}
.login-signup .content .other ul li a{
  padding: 7px 18px;
  margin: 0 5px;
  display: block;
  border-radius: 30px;
  border: 1px solid #eee;
  color: #adadad;
  text-align: center;
  transition: 0.3s;
}
.login-signup .content .other ul li i{
  margin-left: 11px;
}
.login-signup .content .other ul li.facebook a{}
.login-signup .content .other ul li.facebook a:hover{
  background-color: #2c92ff;
  border-color: #2c92ff;
  color: white;
}
.login-signup .content .other ul li.google a{}
.login-signup .content .other ul li.google a:hover{
  background-color: #ff3838;
  border-color: #ff3838;
  color: white;
}
.login-signup .content .other .or{
  width: 100%;
  text-align: center;
  position: relative;
  margin-top: 28px;
  margin-bottom: 32px;
}
.login-signup .content .other .or span {
  text-align: center;
  display: inline;
  font-size: 14px;
  background-color: #fff;
  padding: 0 20px;
  color: #9B9B9B;
}
.login-signup .content .other .or::after {
content: " ";
width: 100%;
height: 1px;
display: block;
background-color: #EEE;
margin-top: -10px;
}
.login-signup .content .orsignup{
  padding-top: 26px;
}
.login-signup .content .orsignup p{
  text-align: center;
  margin-bottom: 0;
  font-weight: 500;
  font-size: 14px;
  color: #ACACAC;
  transition: 0.3s;
}
.login-signup .content .orsignup a{
  color: #87c657;
  font-weight: 600;
  transition: 0.3s;
}
.login-signup .content .orsignup a:hover{    
  transition: 0.3s;
  color: #3e3e3e;

}
/* login system ---------------------------------- */

/* favorite ---------------------------------- */
.favorite-section{
  padding-top: 100px;
}
.favorite-section .product-section .boxes > .row > .item {

}
.favorite-section .product-section .boxes > .row > .item .content .discount{
 
}
.favorite-section .product-section .boxes > .row > .item .content .discount button{
  background-color: #ff2e3b;
  width: 45px;
  height: 45px;
  border-radius: 30px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  color: #fff;
  transition: 0.3s;
  border: 2px solid #ff2e3b;
  font-size: 18px;
}
.favorite-section .product-section .boxes > .row > .item .content .discount button:hover{
  transition: 0.3s;
  background-color: #fff;
  color: #ff2e3b;
}
.favorite-section .product-section .boxes > .row > .item .content .discount button i{
  margin-top: 2px;
}
.product-section .item .top-sec .favorite-btn{
  position: absolute;
  top: -36px;
  right: 10px;
  z-index: 99;
  left: 0;
  width: 50px;
}
.product-section .item .top-sec .favorite-btn.active a{
  background-color: #ff2e3b;
  border: 2px solid #ff2e3b;
  color: #fff;
}
.favorite-section .right .product-section .boxes .item .content .bottom{
}
.product-section .item .top-sec .favorite-btn a{
  width: 45px;
  height: 45px;
  border-radius: 150px;
  background-color: #fff;
  border: 2px solid #f4f4f4;
  box-shadow: 0 4px 15px 0 #d1d1d13d;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  color: #cbcbcb;
  font-size: 19px;
}
.product-section .item .top-sec .favorite-btn i{
  margin-top: 2px;
}
/* favorite ---------------------------------- */

/* orders-section ---------------------------------- */
.favorite-section .nav-tabs{
  border: 0;
  display: block;
} 
.favorite-section .nav-link{
  border: 1px solid #f2f2f2;
  border-radius: 10px;
  margin-left: 10px;
  background-color: #fbfbfb;
  color: #a5a5a5;
  font-weight: 500;
  transition: 0.3s;
  padding: 10px 19px;
  width: 100%;
  margin-bottom: 7px;
  text-align: right;
} 
.favorite-section .nav-link:hover{
  background-color: #87c657;
  border: 1px solid #87c657;
  transition: 0.3s;
  color: #fff;
}
.favorite-section .nav-link.active{
  background-color: #87c657;
  border: 1px solid #87c657;
  color: #fff;
} 
.favorite-section .tab-content{
  padding-top: 2em;
}

.favorite-section .left{}
.favorite-section .left ul{
  padding: 0;
}
.favorite-section .right{}
.favorite-section .right .col-content{
  padding: 0 20px;

}
.favorite-section .right .col-content .main-title{
  padding-bottom: 10px;
}
.favorite-section .right .col-content .main-title h3{
  font-size: 23px;
  font-weight: 500;
}
.favorite-section .right .col-content .edit{
  padding: 0;
  text-align: center;
  margin-bottom: 0;
}
.favorite-section .right .col-content .edit li{}
.favorite-section .right .col-content .edit li a{
  padding: 10px;
  color: #c1c1c1;
  transition: 0.3s;
}
.favorite-section .right .col-content .edit li a:hover{
  transition: 0.3s;
  color: #87c657;
}
.favorite-section .right .col-content .edit li a i{}

.favorite-section .right .col-content td a{
  color: #7e7e7e ;
  transition: 0.3s;

}
.favorite-section .right .col-content td a:hover{
  transition: 0.3s;
  color: #87c657;
}


/* orders-section ---------------------------------- */

/* orders-details ---------------------------------- */
.favorite-section .right .col-content .order-section{}
.favorite-section .right .col-content .order-section .top-action{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  border: 1px solid #f2f2f2;
  border-radius: 10px; 
  background-color: #fbfbfb;
  color: #a5a5a5;
  font-weight: 500;
  transition: 0.3s;
  width: 100%; 
  text-align: right;
  padding: 7px;
  padding: 3px 5px;
}
.favorite-section .right .col-content .order-section .top-action .back-action{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.favorite-section .right .col-content .order-section .top-action .back-action .back a{
  padding: 8px 11px;
  background-color: #87c657;
  border-radius: 10px;
  color: #fff;
  height: 40px;
  line-height: 20px;
  display: block;
}
.favorite-section .right .col-content .order-section .top-action .back-action i{
  position: relative;
  top: 4px;
  margin-right: 5px;
}
.favorite-section .right .col-content .order-section .top-action .back-action .action{
  margin-left: 12px;
}
.favorite-section .right .col-content .order-section .top-action .back-action .action ul{
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
}
.favorite-section .right .col-content .order-section .top-action .back-action .action ul li{}
.favorite-section .right .col-content .order-section .top-action .back-action .action ul li a{
  display: block;
  padding: 8px 10px;
  color: #aeaeae;
  height: 40px;
  line-height: 20px;
  font-size: 17px;
  text-align: center;
  transition: 0.3s;
}
.favorite-section .right .col-content .order-section .top-action .back-action .action ul li a:hover{
  transition: 0.3s;
  color: #87c657;
}
.favorite-section .right .col-content .order-section .top-action .back-action .action ul li:nth-child(2) a{
  font-size: 20px;

}
.favorite-section .right .col-content .order-section .top-action .back-action .action ul li i{
  margin: 0;
}

.favorite-section .right .col-content .order-section .top-action .details{
  display: flex;
  flex-wrap: wrap;
  padding: 8px 19px;
}
.favorite-section .right .col-content .order-section .top-action .details h3{
  margin-bottom: 0;
  font-size: 17px;
  margin-left: 8px;
  border-left: 1px solid #ddd;
  padding-left: 8px;
}
.favorite-section .right .col-content .order-section .top-action .details h3 strong.total{
  color:#87c657;
}
.favorite-section .right .col-content .order-section .top-action .details h3:last-child{
  border: 0;
}
.favorite-section .right .col-content .order-section .product-section{}

.favorite-section .right .col-content .order-section .product-section .item{}
.favorite-section .right .col-content .order-section .product-section .item .total{
  border-top: 1px solid #eaeaea;
  padding-top: 7px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.favorite-section .right .col-content .order-section .product-section .item .total h3{
  font-size: 18px;
  color: #87c657;
  margin-bottom: 0;
  font-weight: 600;
}
 
.favorite-section .right .col-content .order-section .product-section .item .content .quantity span{
}
.favorite-section .right .col-content .order-section .product-section .item .content .descreption p span{
  color: #999;
}
.favorite-section .right .col-content .order-section .product-section .item .content .image-carousel{
  height: 280px;
}
.favorite-section .right .col-content .order-section .product-section .item .content .price{
  position: absolute;
  left: 10px;
  top: -32px;
  background-color: #87c657;
  width: auto;
  height: auto;
  padding: 4px 9px;
  border-radius: 9px;
}
.favorite-section .right .col-content .order-section .product-section .item .content .price h3{
  color: #fff;
  padding-top: 0;
}
.favorite-section .right .col-content .order-section .product-section .item .content .bottom{
  padding-bottom: 11px;
  padding-left: 12px;
  padding-right: 12px;
}
/* orders-details ---------------------------------- */

/* winner popup ---------------------------------- */
.winner-modal-body{ 
}

.winner-modal{

}
.winner-modal .image{
  margin-top: -30px;
}
.winner-modal .image lottie-player{
  width: 280px; 
  margin: 0 auto;
}
.winner-modal .text{
  text-align: center;
  padding-top: 20px;
  padding-bottom: 40px;
}
.winner-modal .text h3{
  font-weight: 600;
}
.winner-modal .text p{}
.winner-modal .text a{
  padding: 10px 24px;
}

/* winner popup ---------------------------------- */





/* settings ---------------------------------- */

.settings-content .form-sec{}
.settings-content .form-sec .item{}
.settings-content .form-sec .item .iti{
  margin-top: 0;
}
.settings-content .form-sec .item .iti .form-control{
 height: 50px;
}
.settings-content .form-sec .item .form-label{
  font-weight: 500;
  font-size: 15px;
}
.settings-content .form-sec .item .form-control[type="email"]{
  text-align: left;
  font-size: 17px;
  direction: initial;
}
.settings-content .form-sec .item .form-control[type="text"]{
  padding-right: 58px !important;
}
.settings-content .form-sec .item .form-control[type="password"]{
  text-align: left;
  font-size: 17px;
}
.settings-content .form-sec .item .inp-box{
  position: relative;
}
.settings-content .form-sec .item .inp-box .icon{
  position: absolute;
  bottom: 0;
  top: 1px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding: 0 14px;
  background-color: #fdfdfd;
  margin-right: 1px;
  border-radius: 0 40px 40px 0;
  height: 96%;
  z-index: 9;
}
.settings-content .form-sec .item .inp-box .icon i{
  font-style: normal;
  color: #353535;
}
.settings-content .form-sec .item .pass-reset{
  float: left;
}
.settings-content .form-sec .item .pass-reset a {
  font-weight: 500;
  font-size: 14px;
  color: #ACACAC;
  transition: 0.3s;
}
.settings-content .form-sec .item .pass-reset a:hover{
  color: #ff3838;
  transition: 0.3s;

}
.settings-content .form-sec .item .btn{ 
  display: block;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 29px;
  padding-bottom: 10px;
}
.settings-content .adresses-list{ 
}
.settings-content .adresses-list .items{}
.settings-content .adresses-list .items .content{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  border: 1px solid #f4f4f4;
  padding: 10px 10px;
  border-radius: 10px;
  margin-bottom: 12px;
  align-items: center;
  transition: 0.3s;
  cursor: pointer;
}
.settings-content .adresses-list .items .content:hover {
  transition: 0.3s;
  background-color: #fbfbfb;
}
.settings-content .adresses-list .items .content .text{
  display: flex;
  flex-wrap: wrap;
}
.settings-content .adresses-list .items .content .text .it{
  padding-left: 60px;
}
.settings-content .adresses-list .items .content .text .it span{
  font-size: 15px;
}
.settings-content .adresses-list .items .content .text .it p{
  margin-bottom: 0;
}
.settings-content .adresses-list .items .content .delete{}
.settings-content .adresses-list .items .content .delete ul{
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 0;
  padding: 0;
}
.settings-content .adresses-list .items .content .delete ul li{
}
.settings-content .adresses-list .items .content .delete ul li a{
  padding: 6px 10px;
  transition: 0.3s;
}
.settings-content .adresses-list .items .content .delete ul li i{}

.settings-content .adresses-list .items .content .delete ul li.delete-action a{
  color: #ff3838;
}
.settings-content .adresses-list .items .content .delete ul li.delete-action a:hover{
  opacity: 0.7;

  transition: 0.3s;
}
.settings-content .adresses-list .items .content .delete ul li.edit-action a{
  color: #9f9f9f;
}
.settings-content .adresses-list .items .content .delete ul li.edit-action a:hover{
  opacity: 0.7;

  transition: 0.3s;
}

/* settings ---------------------------------- */

.header .overlay{
  display: none;
}
.toggle-btn{
  display: none;
}
@media (max-width: 1400px){ 
  .categorie-section .boxes .item{
    width: 15vh;
  }
  /* categories ==--------------- */
  .product-section .boxes .item .content .bottom .action .btn{
    padding: 10px 8px;
  }  
  /* categories ==--------------- */
  .select-branch .item {
    width: 41%;
  } 
  

}

/* 1200px ==------------------------------------- */
@media (max-width: 1200px){
  .categorie-section .boxes .item {
    width: 17vh;
  }
  /* categories ==--------------- */
  .product-section .boxes .item .content .image-carousel{
    height: 380px;
  }
  /* modal ----------- */ 
  .product-section .boxes .item .product-model .modal-content-sec .content .image-carousel{
    height: 360px;
  }
  /* modal ----------- */
  /* categories ==--------------- */
  
  /* footer ---------- */
  .footer-section .item.links {
    padding-right: 2em;
  }
  .footer-section .item .pyment ul li{
    height: 26px;
    width: 39px;
  }
  /* footer ---------- */

  /* header ---------- */
  .header .lower .logo img {
    width: 90%;
  }
  .header .lower .navbar-sec ul li a{ 
    font-size: 14px;
  }
  .header.sticky .navbar-sec ul li a{
    padding: 22px 10px;
  }
  .header .lower .logo {
    width: 100px;
    padding-left: 0;
  }
  .header .lower .navbar-sec{
    width: calc(100% - 100px);
  }
  .header .lower .navbar-sec ul li a::after {
    height: 1px;
    display: none;
  }

  /* header ---------- */
  

  /* header ---------- */
  .selected-branch .boxes .item .content ul li .btn.btn-warning{
    width: 40px;
    height: 40px;
  }
  .selected-branch .boxes .item .content ul li{
    margin-left: 0;
  }
  /* header ---------- */

  /* card ==--------------- */
  .page-content .card-section .table-sec{
    width: 100%;
  }
  .page-content .card-section .order-information{
    width: 100%;
  }
  .page-content .card-section .table-sec td h5{
    font-size: 17px;
  }
  .page-content .card-section .table-sec .title h3{
    font-size: 16px;
  }
  /* card ==--------------- */

  /* landing page ================== */
  .landing-page .header .lower .navbar-sec .links{
    transition: 0.3s;
    position: fixed;
    right: -1000px;
    top: 0;
    width: 50%;
    height: 100%;
    background-color: white;
    z-index: 99;
    box-shadow: 0 4px 15px 0 #d1d1d13d;
  }
  .landing-page .header .lower .navbar-sec .links.is-active{
    right: 0;
    transition: 0.3s;

  }
  .header .lower .navbar-sec ul{
    display: block;
    width: 100%;
  }
  .header .lower .navbar-sec ul li a {
    font-size: 16px;
    padding: 16px 9px;
    border-bottom: 1px solid #f2f2f2;
  }
  .header .lower .navbar-sec{
    justify-content: end;
  }
  .header .lower .navbar-sec .overlay {
    display: none;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0%;
  }
  .header .lower .navbar-sec .overlay.ac {
    display: block;
  }
  .toggle-btn{
    display: block;
  }
  .referaces-section .boxes .item .image{
    height: 84px;
  }
  .nutritional-boxes .item .text h3 {
    font-size: 21px;
  }
  .nutritional-boxes .item .text .content {
    padding-right: 1em;
  } 
  /* shoping-card ---------------------------------- */
.basket-card .shoping-card{
  position: fixed; 
  left: 0;
  width: 100%;
  height: auto;
  bottom: 20px;
}
.basket-card .shoping-card .open-card{
  background-color: #87c657;
  margin: 0 auto;
  border-radius: 9px;
  padding-right: 17px;
}
.basket-card .shoping-card .open-card .icon{
  background-color: #66a339;
  border-radius: 6px;
  width: 45px;
  height: 40px;
  margin: 5px;
}
.basket-card .shoping-card .open-card .icon img {
  width: 28px;
}
.basket-card .shoping-card .text h3{
  color: #fff;
  width: auto;
  padding-right: 10px;
  border-right: 1px solid #ffffffc2;
  margin-right: 10px; 

}
.basket-card .shoping-card .text span{
  color: #fff; 
  font-size: 15px;
  margin-top: 0;
  font-weight: 600;
}
.basket-card .shoping-card .text{
  flex-direction: row-reverse;
  align-items: center;
  padding-left: 10px;
  width: auto;
} 
/* shoping-card ---------------------------------- */
  .basket-card{
    width: 148px;
  }
  .header .lower .navbar-sec .links{
    width: calc(100% - 148px);
  }
  /* landing page ================== */
  .favorite-section .left ul{
    display: flex;
    flex-wrap: wrap;
  }
  .favorite-section .left ul li{
    margin-left: 10px;
  }
  .favorite-section .right .col-content{
    padding: 0 ;
  }


}
/* 1200px ==------------------------------------- */


/* 1024px ==------------------------------------- */
@media (max-width: 1024px){
  /* landing page ================== */
  .about-landing .text h3{
    font-size: 24px;
    line-height: 29px;
  }
  .slider-section .caption h3{
    font-size: 34px;
  }
  
  /* landing page ================== */

  /* card page ------------ */

  /* card page ------------ */


}
/* 1024px ==------------------------------------- */

/* 1024px ==------------------------------------- */
@media (max-width: 1024px){ 
  /* landing page ------------ */

  /* landing page ------------ */
}
/* 1024px ==------------------------------------- */

/* 991px ==------------------------------------- */
@media (max-width: 991px){ 
  .get-branche-section .container .item{
    width: 100%;
  }
  .get-branche-section .item .text h3{
    font-size: 22px;  margin-bottom: 7px;
  }
  .get-branche-section .item .text p{
    margin-bottom: 20px;
  }
  .get-branche-section .item .text button{
    padding: 6px 40px;
  }
  /* selected-branch ==--------------- */ 
  .section-title h3 {
    font-size: 18px;
  }
  .selected-branch .boxes .item .content .map .btn{
    padding: 10px 14px;
  }
  .select-branch-section {
    display: block;
    padding-top: 12em;
  }
  .categorie-section{
    padding-top: 2em;
  }
  .categorie-section .boxes{
    position: relative;
  }
  .categorie-section .boxes::after{
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f101";
    width: 40px;
    height: 40px; 
    position: absolute;
    right: -30px;
    top: 52px;
    color: #c8c8c8;
        display: flex;
    flex-wrap: wrap;
    align-items: center; 
    justify-content: end;
  }
  .categorie-section .boxes::before{
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f100";
    width: 40px;
    height: 40px; 
    position: absolute;
    left: -30px;
    top: 52px;
    text-align: left;
    color: #c8c8c8;
        display: flex;
    flex-wrap: wrap;
    align-items: center;
  }
  .select-branch .item .content .default-content{
    padding: 6px 9px;
  }
  .select-branch .item .content .slider-content{
    padding: 6px 6px;
  }
  .select-branch .item .content{
    /* height: auto; */
  }
  .selected-branch .boxes .item .content ul li:last-child {
    margin-right: 8px;
  }
  /* selected-branch ==--------------- */

  /* header ---------- */
  .header .lower .navbar-sec .linkss{
    z-index: 9;
  }
  .toggle-btn{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }
  .header .lower .navbar-sec .basket-card{ 
    width: auto;
  }
  .header .lower .navbar-sec .linkss{ 
    position: fixed;
    right: -1000px;
    height: 100%;
    top: 0;
    background-color: white;
    width: 58%;
    box-shadow: 0 4px 15px 0 #d1d1d133;
    padding: 0 18px;
    transition: 0.5s;
  }
  .header .lower .navbar-sec .linkss.is-active{
    transition: 0.5s;
    right: 0;
  }
  .header .lower .navbar-sec ul{
    display: block;
  }
  .header .lower .navbar-sec ul li a{
    height: auto;
    border-bottom: 1px solid #f4f4f4;
    padding: 15px 10px;
  }
  .header.sticky .navbar-sec ul li a{
    padding: 15px 10px;

  }
  .header .lower .navbar-sec ul li{
    height: auto;
  } 
  .header .lower .navbar-sec{
    justify-content: left;
  }
  .header .bottom{
    padding: 10px 0;
  }
  .header .lower .navbar-sec .overlay.ac {
    display: block;
  }
  .header .lower .navbar-sec .overlay {
    display: none;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0%;
  }
  .header .lower .navbar-sec .links .row{
    display: none;
  }
  
  /* header ---------- */

  /* card ==--------------- */
  .page-content .card-section .order-information .client-detail {
    margin-top: 19px;
  }
  .page-content .card-section .order-information .content .title h3{
    font-size: 17px;
  }
  .page-content .card-section .order-information .content .title h3{
    margin-bottom: 0;
  }
  .page-content .card-section .order-information .client-detail .information {
    margin-top: 6px;
  }
  .page-content .card-section .order-information .order-detail .content .information{
    margin-top: 6px;
    padding: 10px 10px;
  }
  .page-content .card-section .order-information .content .information .item h2{
    font-size: 16px;
  }
  .page-content .card-section .order-information .content .information .item h3{
    font-size: 18px;
  }
  .page-content .card-section .order-information{
    padding: 20px 0;
  }
  .page-content .card-section .table-sec .table{
    width: 860px;
  }
  /* card ==--------------- */

  /* landing page ================== */
  .landing-page .header .lower .navbar-sec .links{
    width: 60%;
  }
  .slider-section .caption h3{
    font-size: 35px;
  }
  .slider-section .caption span{
    padding: 3px 20px 6px 20px;
  }
  .about-landing .text h3{
    font-size: 25px;
    line-height: 29px;
  }
  .about-landing .image .experiens .number h4{
    font-size: 32px;
  }
  .about-landing .image .experiens .number h4{
    font-size: 32px;
    height: 34px;
    line-height: 33px;
  }
  .about-landing .image .experiens .textt{
    padding-right: 4px;
  }
  .about-landing .image .experiens .textt h3{
    font-size: 16px;
  }
  .about-landing .image .experiens{
    padding: 0px 6px;
    bottom: 12px;
    right: 10px;
  }
  .about-landing{
    padding-top: 4em;
  }
  .nutritional-boxes .item .text h3 {
    font-size: 18px;
  }
  .contact-section .text{
    margin-bottom: 3em;
  }
  /* landing page ================== */
  .branch-info .item{
    width: 100%;
    margin-bottom: 20px;
  }
  .branch-info .item .content h4{
    font-size: 15px;
  } 
  .branch-info .item .content h3{
    font-size: 15px;
  }
  
  
  .categorie-section .boxes > .row{
    overflow-x: scroll;
    margin: 0;
    flex-wrap: nowrap;
    justify-content: initial;
  }
  .categorie-section .boxes .item{ 
    width: 160px;
    padding: 0;
    margin-right: 12px;
  }
/* underconstruction ---------------------------------- */
.coming-soon .box{
  width: 100%;
}
/* underconstruction ---------------------------------- */

.select-branch .item{
  width: 33.33333333%;
}
.select-branch .branch-content .boxes .item{
  width: auto;
}
.select-branch .item .action .btn {
  padding: 10px 26px;
} 

.page-content .card-section .order-detail-sec{
  width: 100%;
}
.page-content .card-section{
  width: 100%;
}
.settings-content .adresses-list .items .content{
  position: relative;
}
.settings-content .adresses-list .items .content .delete {
  position: absolute;
  left: 10px;
  top: 10px;
}
.settings-content .adresses-list .items .content .text .it{
  margin-bottom: 10px;
}
.favorite-section .right .col-content .order-section .top-action .back-action{
  margin-top: 10px;
  margin-bottom: 10px;
}
.contact-section .container > .row{ 
}
.contact-section .image img{
  width: 52%;
}
.contact-section .image{
  display: none;
}
.contact-section .contact_info {
  margin-bottom: 0em;
}
}
/* 991px ==------------------------------------- */

/* 768px ==------------------------------------- */
@media (max-width: 768px){ 
  /* header ---------- */
  .header .lower .navbar-sec .linkss{
    width: 67%;
  }
  .basket-card .shoping-card .open-card .icon{
    width: 45px; 
  }
  .basket-card .shoping-card .open-card .icon img {
    width: 29px;
  }
  /* header ---------- */

  /* selected-branch ==--------------- */
  .selected-branch .boxes .item:last-child{
    margin-bottom: 0;
  }
  .section-title h3 {
    font-size: 20px;
  }
  .select-branch .item{
    margin-bottom: 12px;
    width: 100%;
  }
  .select-branch .item .image{
    width: 46px;
    height: 48px;
    margin-left: 13px;
  } 
  .select-branch .item .text h4{ 
    font-size: 13px;
  }
  .select-branch .item .content{
    height: 65px;
  }
  .select-branch .item .image img{
    border-radius: 6px;
  }
  .select-branch .item .text h4{
    margin-bottom: 0;
  }
  /* selected-branch ==--------------- */
  
  /* categories ==--------------- */
  .categorie-section .boxes .item .content .title h3{
    font-size: 15px;
  }
  /* modal ----------- */
  .product-section .boxes .item .product-model .additions-detials .price-part .item{
    justify-content: right;
  }
  .product-section .boxes .item .product-model .additions-detials .price-part .item:first-child{
    margin-bottom: 17px;
  }
  .product-section .boxes .item .product-model .additions-detials .price-part .add-list{
    width: 100%;
  }
  .product-section .boxes .item .product-model .additions-detials .price-part{
    padding-top: 10px;
  }
  .product-section .boxes .item .modal-content .modal-footer .btn{
    padding: 10px 10px;
  }
  /* modal ----------- */
  
  /* categories ==--------------- */


  /* footer ---------- */
  .footer-section .item.links {
    padding-right: calc(var(--bs-gutter-x) * .5);
  }
  .footer-section .item{
    margin-bottom: 40px;
  }
  .footer-section .top_part {
    padding-bottom: 1em;
  }
  /* footer ---------- */

  /* card ==--------------- */
  .page-content .card-section .table-sec{
  }
  .page-content .card-section .table-sec table{
    width: 730px;
  }
  .page-content .card-section .order-information .content .information .item{
    margin-bottom: 13px;
  }
  .page-content .card-section .order-information .order-detail .content .information .item{
    margin-bottom: 0;
  }
  .page-content .card-section .order-information .title h3 {
    font-weight: 700;
    font-size: 18px;
  }
  /* card ==--------------- */

  .banner-section{
    height: 170px;
  }

  /* landing page ================== */
  .slider-section .line{
    height: 32px;
    
  }
  .about-landing .row{
    flex-direction: column-reverse;
  }
  .about-landing .image{
    margin-bottom: 40px;
  }
  .about-landing .image .experiens .textt h3 {
    font-size: 20px;
  }
  .about-landing .image .experiens .number h4 {
    font-size: 35px;
  }
  .about-landing .image .experiens{
    bottom: 22px;
    right: 20px;
  }
  .nutritional-boxes .item{
    width: 46%;
    margin-left: 10px;
    margin-right: 10px;
  }
  .nutritional-boxes .item .text .content {
    padding-right: 0;
  }
  .nutritional-boxes .item .text h3 {
    font-size: 17px;
  }
  /* landing page ================== */

  /* underconstruction ---------------------------------- */
  .coming-soon .box .text h3{
    font-size: 31px;
  }
  .favorite-section .right .col-content .order-section{
    overflow: auto;
  }
  .favorite-section .right .col-content .order-section .table_box{
    width: 810px;
  }
  .favorite-section .right .col-content .order-section .table_box .dataTables_length{
    float: left;
  }
  .favorite-section .right .col-content .order-section .table_box .dataTables_filter{
    float: right;

  }
  .dataTables_wrapper .dataTables_paginate{
    text-align: right;
  }

  /* underconstruction ---------------------------------- */

  /* card ---------------------------------- */
  .page-content .card-section .items .item{
    width: 770px;
    max-width: initial;
  }
  .page-content .card-section .items{
    overflow: auto;
  }
  .page-content .card-section .order-information .checkout-adress .selection{
    width: 100%;
    padding: 0;
  }
  .page-content .card-section .order-information .checkout-adress .add{
    margin-top: 17px;
  }


  /* card ---------------------------------- */
  .login-signup .content .box{
    width: 100%;
  }
  .login-signup .content .title h3{
    font-size: 27px;
  }
  .login-signup .content .box{
    padding: 20px 10px;
  }
  .get-branche-section{
    padding-top: 70px;
  }

 
}
/* 768px ==------------------------------------- */

/* 600px ==------------------------------------- */
@media (max-width: 600px){ 
  .get-branche-section .container .item .image{
    width: 151px;
  }
  .favorite-section .nav-link{
    padding: 6px 9px;
    text-align: center;
  }
  /* header ---------- */
  .header .lower .navbar-sec .linkss {
    width: 77%;
    padding: 0 0;
  }
  .header .lower .logo{
    width: 87px;
  }
  .header .lower .navbar-sec{
    padding: 0 12px;
    width: calc(100% - 87px);
  }
  .header .upper .text p{
    display: none;
  }
  .select-branch-section{
    padding-top: 11em;
  }
  .slick-slider{
    height: 100%;
  }
  /* header ---------- */

  /* categories ==------------------------  */ 
  .categorie-section .boxes .owl-nav button{
    margin-left: 5px !important;
    margin-right: 5px !important;
    margin-top: 0; 
  }
  .categorie-section .boxes .owl-nav{
    justify-content: center;
    height: initial;
    margin-top: 9px;

  }
  /* modal ----------- */
  .product-section .boxes .item .product-model .modal-content-sec .additions{
    margin-bottom: 7px;
    padding-top: 0;
  }
  .product-section .boxes .item .product-model .additions-detials{
    padding-bottom: 0;
  }
  /* modal ----------- */
  /* categories ==------------------------  */

  /* select-branch ==------------------------  */
  .select-branch .item .text h3{
    font-size: 16px;
  }
  .select-branch .item .text h4 {
    font-size: 13px;
  }
  /* select-branch ==------------------------  */

  /* footer ---------- */
  .footer-section .item .main-title h3{
    font-size: 18px;
  }
  .footer-section .item .social-media h5{
    font-size: 18px;
  }
  /* footer ---------- */
  
  /* basket ---------- */
  .open-card .modal-footer .total .title h3{
    font-size: 19px;
  }
  .open-card .modal-footer .total .number h4{
    font-size: 19px;

  }
  /* basket ---------- */
  /* product ==------------------------  */

  .product-section .modal-header .ptitle h3 {
    font-size: 22px;
  }
  .product-section .boxes .item .nutritionalvalues .nvalues-image .image-content{
    height: 310px;
  }
  /* product ==------------------------  */

  /* card ==--------------- */
  .page-content .card-section .order-information .content .information .item h2{
    font-size: 15px;
  }
  .page-content .card-section .order-information .content .information .item h3{
    font-size: 17px;
  }
  .page-content .card-section .order-information .client-detail .information .item .btn{
    padding: 8px 14px;
  }
  .page-content .card-section .table-sec th{
    font-size: 16px;
  }
  .page-content .card-section .table-sec .title h3{
    font-size: 15px;
font-weight: 600;
  }
  /* card ==--------------- */

  .banner-section{
    margin-top: 7em;
  }


  /* landing page ================== */
  .landing-page .header .lower .navbar-sec .links {
    width: 70%;
  }
  .slider-section{
    margin-top: 130px;
  }
  .slider-section .line {
    height: 19px;
  }
  .slider-section .caption h3 {
    font-size: 26px;
  }
  .slider-section .caption .action a{
    padding: 6px 25px;
  }
  .slider-section .main-slider .owl-nav button{
    bottom: 60px;
    top: initial;
    width: 28px;
    height: 38px;
  }
  .about-landing{
    padding-bottom: 4em;
  }
  .about-landing .text h3 {
    font-size: 22px;
    line-height: 28px;
  }
  .referaces-section .boxes .item .image {
    height: 87px;
  }
  .nutritional-boxes{
    padding-bottom: 4em;
  }
  .contact-section .follow-us-sec .social-media ul li a{
    width: 37px;
    height: 37px;
  }
  .contact-section .contact_info .content h4{
    font-size: 19px;
  }
  .contact-section .follow-us-sec h3{
    font-size: 19px;
  }
  .contact-section .title h3{
    font-size: 20px;
  }
  .slider-section .caption span{
    font-size: 17px;
  }
  .header .upper .language ul li:not(:last-child) {
    margin-left: 9px;
  } 
  .header .upper .language ul li a{
    width: 23px;
height: 18px;
  }

  /* landing page ================== */
  .select-branch .item .action .btn{
    padding: 7px 14px;
  }
  .desktop-slider{
    display: none;
  }
  .mobile-slider{
    display: block;
  }
/* shoping-card ---------------------------------- */
.basket-card .shoping-card .open-card .icon{
  height: 35px;
}
.open-card .modal-footer .discreption textarea{
  height: 70px;
}
.open-card .modal-footer .client-number {
  padding: 2px 20px 20px 20px;
}
.open-card .modal-footer .client-number .item:first-child {
  margin-bottom: 6px;
}
.open-card .card-items .item{
  padding: 10px 0;
}
.categorie-section .boxes::after {
      top: -53px;
      right: auto;
  width: 20px;
  left: 30px;
  height: 23px;
}
.categorie-section .boxes::before {
      top: -53px;
      left: 0;
      width: 23px;
      height: 23px;
}
.page-content .card-section .order-detail-sec{
  width: 100%;
}
.login-signup .content .form-sec.otp-form input{
  font-size: 46px !important;
}
/* shoping-card ---------------------------------- */
.get-branche-section .item .text h3 {
  font-size: 20px;
}
.contact-section .image{
  display: block;
}
.contact-section .image img {
  width: 77%;
  margin: 0 auto;
  display: block;
  padding-top: 0;
}
.contact-section .text .form-sec .form-box .item textarea{
  height: 200px;
}
}


/* 600px ==------------------------------------- */ 


/* 480px ==------------------------------------- */
@media (max-width: 480px){
  .nutritional-boxes .row{
    margin: 0;
  }
  .nutritional-boxes .item{
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
}
/* 480px ==------------------------------------- */


/* 480px ==------------------------------------- */
@media (max-width: 420px){ 
  /* categories ==------------------------  */
  /* modal ----------- */
  .product-section .boxes .item .product-model .modal-content-sec .content .image-carousel {
    height: 330px;
  }
  .product-section .boxes .item .product-model .modal-content-sec .content .image-carousel .plate .main-img{
    width: 100%; 
  }
  .product-section .boxes .item .product-model .modal-content-sec .content .image-carousel .plate .effects{
    width: 100%; 
  }
  .product-section .boxes .item .product-model .modal-content-sec .content .image-carousel .image-content img {
    width: 100%; 
  }
  .product-section .boxes .item .product-model .modal-content-sec .content .image-carousel .addetions-layers img{
    width: 64%;
  }
  /* modal ----------- */
  .product-section .boxes .item .content .image-carousel{
    height: 330px;
  }
  /* categories ==------------------------  */

  /* product ==------------------------  */
  .product-section .boxes .item .nutritionalvalues .nvalues-image .image-content{
    height: 250px;
  }
  /* product ==------------------------  */

}



/* 480px ==------------------------------------- */


/* 350px ==------------------------------------- */
@media (max-width: 350px){  
    /* header ---------- */ 
  .header .lower .navbar-sec{
    width: calc(100% - 90px);
  } 
  .basket-card .shoping-card .icon{
    width: 27px;
    height: 28px;
    border: 0px solid white;
    border-radius: 5px;
  }
  .menu_btn .hamburger{
    margin-top: 1px;
  }
  .basket-card .shoping-card .text span {
    margin-top: -4px;
  }
  .basket-card .shoping-card .open-card .icon{
    width: 40px;
    height: 40px;
  }
  .basket-card .shoping-card .open-card .icon img {
    width: 25px;
  }
  .toggle-btn {
    margin-right: 14px;
  }
  .basket-card .shoping-card .text h3{
    font-size: 16px;
  }
  /* header ---------- */

  /* product ---------- */
  .product-section .boxes .item .content .bottom{
    padding-left: 10px;
    padding-right: 10px;
  }
  .product-section .boxes .item .content .bottom .action .btn {
    padding: 6px 3px;
    font-size: 14px;
  }
  .product-section .boxes .item .content .bottom .action .product-detail .btn.btn-secondary{
    width: 36px;
  }
  .product-section .boxes .item .content .bottom .action .product-detail .btn.btn-secondary i {
    font-size: 17px;
  }
  /* product ---------- */

  /* basket ---------- */
  .open-card .card-items .item .close{
    margin-right: 7px;
  }
  .open-card .card-items .item .details .quantity-count .product-quantity .qty-input .qty-count {
    width: 17px;
    height: 17px;
    font-size: 12px;
  }
  .open-card .card-items .item .image{
    width: 60px;
    height: 60px;
  }
  .open-card .card-items .item .details{
    width: calc(100% - 60px);
  }
  /* basket ---------- */
  .payment-select .item .content button .check{
    width: 14px;
height: 14px;
line-height: 12px;
  }
  .payment-select .item .content button .check i{
    font-size: 10px;
  }
  .payment-select .item .content button .title h3{
    font-size: 14px;
  }

}



/* 350px ==------------------------------------- */
.btn-primary.disabled, .btn-primary:disabled {
    color: #fff;
    background-color: #87c757;
    border-color: #87c757;
}

.content .bottom .action .product-detail .btn.btn-secondary:focus, .product-section .boxes .item .content .bottom .action .product-detail .btn.btn-secondary:active {
    background: #c3c3c3;
}

.modal.show .modal-dialog {
    margin-top: 40px;
}

.categorie-section .boxes .owl-nav button.owl-next {
    left: -40px;
}

.categorie-section .boxes .owl-nav button.owl-prev {
    right: -39px;
}

.slider-section .item::after {
content: none !important
}
.img-size {
    position: absolute;
    z-index: 1;
    top: 0;
    right: 0;
    max-width: 150px;
    display: none;
}
.product-section .boxes .item .content .size ul li .size-btn:hover {
    background-color: #f4f4f4 !important;
    box-shadow: none !important;
    color: #87c757 !important;
}
.product-section .boxes .item .content .size ul li.active .size-btn:hover {
    background-color: #87c657 !important;
    box-shadow: 0 4px 15px 0 #87c657 !important;
    color: #fff !important;
}
.product-section .boxes .item .content .label-tage span{
    direction: rtl;
}
.get-branche-section p{
    padding: 0 200px;
}
@media (max-width: 420px) {
    .product-section .boxes .item .content .image-carousel {
        height: auto !important;
    }
    .product-section .boxes .item .content .title, .product-section .boxes .item .content .price h3 {
        padding-top: 0px;
    }
}
@media (max-width: 600px) {
    .orders-items .item .content .mini-item.image {
        width: 22px !important;
    }
    .basket-card .shoping-card {
        width: 100% !important;
    }
    .select-branch .item {
        width: 100% !important;
    }
    .select-branch  .item:last-child {
        width: 100% !important;
    }
    .get-branche-section p{
        padding: 0 0px;
    }
    .header .lower .navbar-sec ul li a, .header .btn-primary {
        font-size: 12px !important;
    }
    .select-branch-section {
       padding-top: 8em;
    }
    .product-section .boxes .item .content .quantity {
        display: inline-flex;
    }
    .product-section .boxes .item .content .quantity span {
        margin-top: 9px;
    }
    .product-section .boxes .item .content .quantity .quantity-count {
        margin: 0 10px;
    }
    .product-section .boxes .item .content .bottom .action {
        margin-top: 16px;
    }
    .categorie-section .boxes .item {
        width: 100px;
        padding-bottom: 10px;
    }
    .categorie-section .boxes .item .content .image {
        height: 71px;
    }
    .categorie-section .boxes .item .content .image img {
        width: 49px;
    }
    .categorie-section .boxes .item .content .title h3 {
        font-size: 11px !important;
    }
    .product-section {
        padding-top: 1em;
    }
    .page-content .card-section .items .item .content .mini-item {
        float: right !important;
    }
    .page-content .card-section .items .item .content .mini-item .price:not(.total_price) {
        display: none;
    }
}    
.product-section .boxes .item .content .image-carousel {
    height: inherit !important;
}
.iti__a11y-text {
    display: none;
}
.iti--show-selected-dial-code .iti__selected-flag {
    border-radius: 30px 0 0 30px;
}
.iti .form-control {
    padding-left: 95px !important;
}
.iti--show-selected-dial-code .iti__selected-flag {
    background-color: transparent;
}
.inp_box.otp input {
    border-color: #d1d1d1;
}
.header .lower .navbar-sec .links {
    width: calc(100% - 302px);
}
.basket-card {
    width: 302px;
}
.login-signup .content .form-sec .item div:not(.inp_box) .form-control[type="text"] {
    padding-right: 58px !important;
}
.product-section .boxes .item .content .label-tage span {
    font-size: 12px;
    padding-top: 7px;
}
.nutritionalvalues .tabs-nvalues .nav-tabs .nav-item {
    display: inline-block;
}
label {
    position: relative;
}
span.required {
    width: 4px;
    height: 4px;
    background: #f00;
    display: block;
    border-radius: 100px;
    position: absolute;
    left: -6px;
    top: 1px;
}
.favorite-btn {
    cursor: pointer;
}
.modal.show .modal-dialog {
    margin-top: 0;
}
.login-modal .modal-backdrop{
  background: rgba(0, 0, 0, 0.08) !important;
  -webkit-backdrop-filter: blur(25px) !important;
  backdrop-filter: blur(25px) !important;
}
.page-content .card-section .order-information .checkout-payment .payment-selection .form-check .form-check-input{
  float: right !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  position: absolute !important;
  right: 11px !important;
  top: 12px !important;
  box-shadow: none !important;
  border: 1px solid gainsboro !important;
  z-index: 1;
}
.basket-card .account ul li a {
    font-size: 14px;
}


.rating-container {
/*  background-image: url("https://www.toptal.com/designers/subtlepatterns/patterns/concrete-texture.png");*/
  display: flex;
  flex-wrap: wrap;
/*  height: 100vh;*/
  align-items: center;
  justify-content: center;
/*  padding: 0 20px;*/
}

.rating {
  display: flex;
  width: 100%;
  justify-content: center;
  overflow: hidden;
  flex-direction: row-reverse;
  height: 150px;
  position: relative;
}

.rating-0 {
  filter: grayscale(100%);
}

.rating > input {
  display: none;
}

.rating > label {
  cursor: pointer;
  width: 40px;
  height: 40px;
  margin-top: auto;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='126.729' height='126.73'%3e%3cpath fill='%23e3e3e3' d='M121.215 44.212l-34.899-3.3c-2.2-.2-4.101-1.6-5-3.7l-12.5-30.3c-2-5-9.101-5-11.101 0l-12.4 30.3c-.8 2.1-2.8 3.5-5 3.7l-34.9 3.3c-5.2.5-7.3 7-3.4 10.5l26.3 23.1c1.7 1.5 2.4 3.7 1.9 5.9l-7.9 32.399c-1.2 5.101 4.3 9.3 8.9 6.601l29.1-17.101c1.9-1.1 4.2-1.1 6.1 0l29.101 17.101c4.6 2.699 10.1-1.4 8.899-6.601l-7.8-32.399c-.5-2.2.2-4.4 1.9-5.9l26.3-23.1c3.8-3.5 1.6-10-3.6-10.5z'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 76%;
  transition: .3s;
}

.rating > input:checked ~ label,
.rating > input:checked ~ label ~ label {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='126.729' height='126.73'%3e%3cpath fill='%23fcd93a' d='M121.215 44.212l-34.899-3.3c-2.2-.2-4.101-1.6-5-3.7l-12.5-30.3c-2-5-9.101-5-11.101 0l-12.4 30.3c-.8 2.1-2.8 3.5-5 3.7l-34.9 3.3c-5.2.5-7.3 7-3.4 10.5l26.3 23.1c1.7 1.5 2.4 3.7 1.9 5.9l-7.9 32.399c-1.2 5.101 4.3 9.3 8.9 6.601l29.1-17.101c1.9-1.1 4.2-1.1 6.1 0l29.101 17.101c4.6 2.699 10.1-1.4 8.899-6.601l-7.8-32.399c-.5-2.2.2-4.4 1.9-5.9l26.3-23.1c3.8-3.5 1.6-10-3.6-10.5z'/%3e%3c/svg%3e");
}


.rating > input:not(:checked) ~ label:hover,
.rating > input:not(:checked) ~ label:hover ~ label {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='126.729' height='126.73'%3e%3cpath fill='%23d8b11e' d='M121.215 44.212l-34.899-3.3c-2.2-.2-4.101-1.6-5-3.7l-12.5-30.3c-2-5-9.101-5-11.101 0l-12.4 30.3c-.8 2.1-2.8 3.5-5 3.7l-34.9 3.3c-5.2.5-7.3 7-3.4 10.5l26.3 23.1c1.7 1.5 2.4 3.7 1.9 5.9l-7.9 32.399c-1.2 5.101 4.3 9.3 8.9 6.601l29.1-17.101c1.9-1.1 4.2-1.1 6.1 0l29.101 17.101c4.6 2.699 10.1-1.4 8.899-6.601l-7.8-32.399c-.5-2.2.2-4.4 1.9-5.9l26.3-23.1c3.8-3.5 1.6-10-3.6-10.5z'/%3e%3c/svg%3e");
}

.emoji-wrapper {
  width: 100%;
  text-align: center;
  height: 100px;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
}

.emoji-wrapper:before,
.emoji-wrapper:after{
  content: "";
  height: 15px;
  width: 100%;
  position: absolute;
  left: 0;
  z-index: 1;
}

.emoji-wrapper:before {
  top: 0;
  background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 35%,rgba(255,255,255,0) 100%);
}

.emoji-wrapper:after{
  bottom: 0;
  background: linear-gradient(to top, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 35%,rgba(255,255,255,0) 100%);
}

.emoji {
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: .3s;
}

.emoji > svg {
  margin: 15px 0; 
  width: 70px;
  height: 70px;
  flex-shrink: 0;
}

#rating-1:checked ~ .emoji-wrapper > .emoji { transform: translateY(-100px); }
#rating-2:checked ~ .emoji-wrapper > .emoji { transform: translateY(-200px); }
#rating-3:checked ~ .emoji-wrapper > .emoji { transform: translateY(-300px); }
#rating-4:checked ~ .emoji-wrapper > .emoji { transform: translateY(-400px); }
#rating-5:checked ~ .emoji-wrapper > .emoji { transform: translateY(-500px); }

.feedback {
  max-width: 360px;
  background-color: #fff;
  width: 100%;
  padding: 30px;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: center;
/*  box-shadow: 0 4px 30px rgba(0,0,0,.05);*/
}
.order-section .product-section .boxes .item .content .title h3 {
    font-size: 17px;
}
.page-content .card-section .items .item .content .mini-item h5 {
    direction: inherit !important;
}
.page-content .card-section .items.orders-items .item .content .mini-item.title {
    width: 440px;
}
@media (max-width: 768px){
  .page-content .card-section .items .item{
    width: fit-content;
    max-width: initial;
  }
    .page-content .card-section .items .item .content .mini-item, .page-content .card-section .items .item .content .mini-item.title, .page-content .card-section .items .item .content {
    display: inline-block;
  }
  .page-content .card-section .items .item .content {
    width: 100%;
  }
  .page-content .card-section .items .item .content .mini-item.title {
    width: 80%;
  }
  .page-content .card-section .items .item .content .mini-item.price {
    width: 67px;
  }
  .orders-items .mini-item.image, .orders-items .mini-item.titile{
    margin-bottom: 10px;
    width: auto;
  }
    .orders-items .delete-action{
        margin-top: 10px;
    }
    .page-content .card-section .items.orders-items .item .content .mini-item.title {
        width: 80%;
    }
    .product-section .boxes .item .content .price h3 {
        font-size: 24px !important;
    }
    .product-section .boxes .item .content .title h3 {
        font-size: 18px !important; 
    }
}

span.franchis-line{
    border-bottom: 2.3px solid #fbad4b;
    width: 70px;
    position: absolute;
    border-radius: 20px;
    top: 36px;
    margin: 0 28px;
}   
.favorite-section .product-section .boxes .item .content .title h3 {
    font-size: 15px;
}
.favorite-section .product-section .boxes .item .content .bottom .action .edit-addetions .btn, .favorite-section .product-section .boxes .item .content .bottom .action .add-to-card .btn {
    font-size: 14px;
}
.sidebar nav .badge.bg-success {
    min-width: inherit;
    margin-top: -4px;
    line-height: 1.2em;
    padding-bottom: 3px;
    font-size: 15px;
}
.sidebar nav .nav-link-badge:hover .badge.bg-success, .sidebar nav .nav-link-badge.active .badge.bg-success {
    background-color: #fff !important;
    color: #86C658;
}
.iti {
    margin-top: 0; 
}
.cal-text {
    color: #87c657;
}
.product-section .boxes .item .content .size ul li .size-btn, .product-section .boxes .item .content .size ul li.active .size-btn {
    width: inherit;
    min-width: 40px;
}
.page-content .card-section .order-information .checkout-adress .selection .nice-select span {
    font-family: 'Tajawal', sans-serif !important;
}
@media (min-resolution: 2x) {
    .iti__flag {
        background-image: url(../img/flags.png?1);
    }
}
@media (max-width: 600px) {
    .nutritionalvalues .tabs-nvalues .nav-tabs .nav-item .btn, .cancel_addetions {
      font-size: 14px !important;
    }
    .favorite-section .right .col-content .order-section .top-action .details h3 {
        font-size: 15px;
    }
    .order-details .boxes .item .content .image-carousel {
        width: 100px;
        float: right;
    }
    .order-details .item .content .quantity span, .order-details .boxes .item .content .title h3 {
        margin:0 !important;
    }
    .order-details .boxes .item .content .bottom .price-size {
        padding-top: 0;
    }
    .order-details .item .total {
        border: none !important;
        padding: 0px !important;
    }
    .order-details .item .total h3 {
        font-size: 14px !important;
    }
    .order-details .boxes .item .content .bottom .top-sec {
        padding: 0;
    }
    .favorite-section .right .col-content .order-section .top-action .details h3 {
        border: none;
    }
    .page-content .card-section .items .item .content .mini-item.price:not(.total_price) {
        display: none;
    }
    .product-section .boxes .item .content .bottom .top-sec {
        padding-top: 27px;
    }
    .order-details .boxes .item .content .bottom .top-sec {
        padding: 0;
    }
    .product-quantity .qty-input .qty-count {
        width: 21px;
        height: 21px;
    }
    .page-content .card-section .items .item .content .mini-item .delete {
        margin-top: 5px;
    }
    .page-content .card-section .items .item .content .mini-item.title {
        padding: 0;
    }
    .page-content .card-section .order-information .checkout-payment .payment-selection .form-check {
        font-size: 14px;
    }
    .select-branch .item-action .action .btn {
        padding: 6px 20px;
    }
    .orders-items .delete-action {
        margin-top: 5px;
    }
    .product-section .boxes .item .content {
        float: right;
        width: 100%;
    }
    .favorite-section .right .col-content .order-section .product-section .item .content .bottom {
        float: right;
        width: 68%;
    } 
    .order-details .boxes .item .content .title h3 {
        padding: 0 10px !important;
    }
    .order-details .boxes .item .content .title {
        width: 100%;
    }
    .order-details .boxes .item .content .top-sec {
        display: block !important;
    }
    .favorite-section .right .col-content .edit li a {
        padding: 0 10px;
    }
    .page-content .card-section .items .item .content .mini-item {
        margin-bottom: 0px !important;
    }
    .page-content .card-section .items .item .content .mini-item.image, .page-content .card-section .items .item .content .mini-item.quantity {
        padding-top: 5px;
    }
    .page-content .card-section .items .item .content .mini-item.delete-action {
        width: 50px;
        position: absolute;
        left: 30px;
        margin-top: 8px;
    }
    .mini-item.price .text-start {
        text-align: right !important;
    }
}

.bg-info.light{
    background-color: #d5ecff !important;
    color: #3da7ff !important;
}
.form-control.is-invalid, .was-validated .form-control:invalid {
    background-position: left calc(.375em + .1875rem) center;
}

/* links tree page*/
.links-tree {
    background-color: #87c657;
}
.links-tree  {
    padding-top: 60px;
}
.links-tree .content{
    margin: 0 auto;
}
.links-tree .logo {
    background: #fff;
    width: 140px;
    margin: 0 auto 20px;
    padding: 8px 26px 11px;
    border-radius: 9px;
    box-shadow: 0px 0 13px 0px #68a738;
}
.links-tree .social li {
    display: inline-block;
    padding: 10px;
}
.links-tree .social li a{
    color: #fff;
    font-size: 26px;
}
.links-tree .card{
    border-radius: 28px;
    margin: 0 0 30px;
    box-shadow: 0px 0 13px 0px #68a738;
    border: none;
}
.links-tree .card li {
    display: inline-block;
}
.links-tree .card .country {
    width: 30px;
    height: 30px;
    border-radius: 50px;
    overflow: hidden;
    position: absolute;
    left: 11px;
    top: 9px;
}
.links-tree .card .country img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.links-tree .card .title {
    position: absolute;
    left: 50px;
    top: 13px;
    font-size: 15px;
}
.links-tree .card .title a{
    color: #333;
    font-weight: bold;
}
.links-tree .card .link {
    float: right;
    margin: 10px;
    margin:3px 0px;
}
.links-tree .card .link a{
    padding: 0px;
    height: 35px;
    width: 35px;
    font-size: 19px;
    padding-top: 2px;
    margin-top: 5px;
    margin-right: 5px;
    margin-bottom: 4px;
}
.links-tree .card .link.menu-link {
    margin-right: 6px;
}
.links-tree .card .link .btn-default {
    background-color: #ddd;
    color: #999;
}


.links-tree .qr{
    width: 160px;
    margin: 30px auto;
}

#iyzico-container {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.6);
    z-index: 9999;
    align-items: center;
    justify-content: center;
}

#iyzico-popup {
    width: 90%;
    max-width: 550px;
    height: 650px;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 5px 25px rgba(0,0,0,0.3);
    position: relative;
    padding: 20px;
}

#iyzico-frame {
    width: 100%;
    height: 100%;
    border: none;
}

#iyzico-close {
    position: absolute;
    top: 8px;
    right: 12px;
    background: transparent;
    border: none;
    font-size: 22px;
    color: #555;
    cursor: pointer;
    z-index: 10000;
}