@import url("https://fonts.googleapis.com/css2?family=Alexandria:wght@300;400;500;600;700&display=swap");
:root {
  --primary-color: #fad600;
  --hover-color: #cfb105;
  --background-color: #1e1e1e;
  --second-bg-color: #fffadc;
  --primary-text-color: #828282;
  --card-color: #ffffff;
  --secondary-text-color: #12100b;
  --checkout-btn: #65b500;
  --bg-input: #f9f9fa;
  --second-bg-input: #101010;
  --second-hover-color: #e0e0cd80;
}

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

a {
  text-decoration: none;
}

.devo-header {
  margin: 30px 0px;
}
.devo-header .devo-header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.devo-header .devo-header-content .logo {
  width: 67px;
  height: 67px;
}
.devo-header .devo-header-content .back {
  border: none;
  background-color: var(--primary-color);
  padding: 3px 11px;
  border-radius: 6px;
  -webkit-margin-end: 15px;
  margin-inline-end: 15px;
  transition: all 0.3s ease-in-out;
}
.devo-header .devo-header-content .back i {
  color: var(--secondary-text-color);
}
.devo-header .devo-header-content .back:hover {
  background-color: var(--hover-color);
}
.devo-header .devo-header-content .lang-cart i {
  color: var(--primary-color);
  transition: all 0.3s ease-in-out;
}
.devo-header .devo-header-content .lang-cart .lang {
  border: none;
  background-color: transparent;
  font-size: 15px;
  transition: all 0.3s ease-in-out;
  color: var(--primary-color);
}
.devo-header .devo-header-content .lang-cart i:hover,
.devo-header .devo-header-content .lang-cart .lang:hover {
  color: var(--hover-color);
}

.devo-intro {
  margin-top: 110px;
}
.devo-intro .devo-intro-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.devo-intro .devo-intro-content h2 {
  margin-bottom: 30px;
}
.devo-intro .devo-intro-content a {
  color: var(--secondary-text-color);
}
.devo-intro .devo-intro-content a div {
  margin-bottom: 30px;
  box-shadow: rgba(149, 157, 165, 0.2) 0px 3px 24px;
  display: flex;
  align-items: center;
  border-radius: 6px;
  justify-content: center;
  width: 300px;
  height: 100px;
  font-weight: 600;
  transition: all 0.3s ease-in-out;
}
.devo-intro .devo-intro-content a div img {
  -webkit-margin-end: 10px;
  margin-inline-end: 10px;
}
.devo-intro .devo-intro-content a div:hover {
  background-color: var(--second-hover-color);
}

.points {
  margin-bottom: 30px;
}
.points .points-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: var(--second-bg-color);
  padding: 10px;
  border-radius: 6px;
}
.points .points-content div {
  display: flex;
  font-size: 10px;
  font-weight: 700;
}
.points .points-content div img {
  -webkit-margin-end: 10px;
  margin-inline-end: 10px;
}
.points .points-content a {
  background-color: var(--primary-color);
  padding: 3px 11px;
  border-radius: 6px;
}
.points .points-content a i {
  color: var(--secondary-text-color);
}

.cover {
  margin-bottom: 30px;
}
.cover .cover-content {
  background-image: url("./assets/Group 359.png");
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 6px;
  padding: 20px;
  width: 100%;
  height: 200px;
  min-height: 170px;
    border-radius: 6px;
  color: var(--card-color);
}
.cover .cover-content h2 {
  -webkit-margin-end: 50px;
  margin-inline-end: 50px;
  font-size: 20px;
  margin-bottom: 15px;
}
.cover .cover-content button {
  background-color: var(--primary-color);
  border: none;
  color: var(--secondary-text-color);
  padding: 6px 10px;
  font-weight: 700;
  font-size: 10px;
  border-radius: 6px;
}

.myswiper {
  margin-bottom: 30px;
  --swiper-theme-color: var(--primary-color);
}
.myswiper .swiper-slide {
  height: 120px;
  width: 85px !important;
}
.myswiper .swiper-slide .category {
  position: relative;
}
.myswiper .swiper-slide .category img {
  height: 65px;
  width: 100%;
  border-radius: 6px;
}
.myswiper .swiper-slide .category .category-name {
  position: absolute;
  bottom: 3px;
  right: 5px;
  font-size: 14px;
  font-weight: 600;
  color: var(--card-color);
}

.items .items-content .item-card {
  margin-bottom: 20px;
  display: flex;
  box-shadow: rgba(149, 157, 165, 0.2) 0px 3px 24px;
  align-items: center;
  padding: 15px;
  position: relative;
}
.items .items-content .item-card img {
  height: 70px;
  width: 110px;
  border-radius: 6px;
  -webkit-margin-end: 10px;
  margin-inline-end: 10px;
}
.items .items-content .item-card .description h5 {
  font-size: 13px;
  font-weight: 700;
  color: var(--secondary-text-color);
}
.items .items-content .item-card .description span {
  font-size: 10px;
  color: var(--primary-text-color);
}
.items .items-content .item-card .plus-icon {
  position: absolute;
  right: 7px;
  padding: 1px 7px;
  top: 7px;
  background-color: var(--primary-color);
}
.items .items-content .item-card .plus-icon i {
  color: var(--secondary-text-color);
}

.myproduct {
  margin-bottom: 30px;
}
.myproduct .myproduct-content {
  box-shadow: rgba(149, 157, 165, 0.2) 0px 3px 24px;
  padding: 15px;
}
.myproduct .myproduct-content img {
  border-radius: 6px;
  margin-bottom: 30px;
  width: 100%;
  height: 210px;
}
.myproduct .myproduct-content .name h3 {
  color: var(--secondary-text-color);
  font-weight: 700;
}
.myproduct .myproduct-content .name span {
  font-size: 14px;
  color: var(--primary-text-color);
}

.price {
  margin-bottom: 30px;
}
.price .price-content {
  box-shadow: rgba(149, 157, 165, 0.2) 0px 3px 24px;
  padding: 15px;
  display: flex;
  justify-content: space-between;
}
.price .price-content :nth-child(1) {
  color: var(--primary-text-color);
}
.price .price-content :nth-child(2) {
  font-weight: 700;
}

.sizes {
  margin-bottom: 30px;
}
.sizes .sizes-content {
  box-shadow: rgba(149, 157, 165, 0.2) 0px 3px 24px;
  padding: 15px;
}
.sizes .sizes-content h6 {
  color: var(--primary-text-color);
  margin-bottom: 20px;
}
.sizes .sizes-content .size-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.sizes .sizes-content .size-info input[type="radio"] {
  -webkit-margin-end: 5px;
  margin-inline-end: 5px;
}
.sizes .sizes-content .size-info .form-check-input {
  border-color: var(--primary-color);
}
.sizes .sizes-content .size-info .form-check-input:checked {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}

.additions {
  margin-bottom: 30px;
}
.additions .additions-content {
  box-shadow: rgba(149, 157, 165, 0.2) 0px 3px 24px;
  padding: 15px;
}
.additions .additions-content h6 {
  color: var(--primary-text-color);
  margin-bottom: 20px;
}
.additions .additions-content .addition-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.additions .additions-content .addition-info .counter {
  display: flex;
}
.additions .additions-content .addition-info .counter div {
  -webkit-margin-end: 10px;
  margin-inline-end: 10px;
}
.additions .additions-content .addition-info .counter div button {
  border: none;
  background-color: transparent;
}
.additions .additions-content .addition-info div button {
  border: none;
  background-color: transparent;
}

.quantity {
  margin-bottom: 30px;
}
.quantity .quantity-content {
  box-shadow: rgba(149, 157, 165, 0.2) 0px 3px 24px;
  padding: 15px;
  display: flex;
  justify-content: space-between;
}
.quantity .quantity-content div button {
  border: none;
  background-color: transparent;
}

.note {
  margin-bottom: 30px;
}
.note .note-content {
  box-shadow: rgba(149, 157, 165, 0.2) 0px 3px 24px;
  padding: 15px;
}
.note .note-content input {
  width: 100%;
  border: none;
}
.note .note-content input:focus-visible {
  outline: none;
}

.table-num {
  margin-bottom: 30px;
}
.table-num .table-num-content {
  box-shadow: rgba(149, 157, 165, 0.2) 0px 3px 24px;
  padding: 15px;
}
.table-num .table-num-content input {
  width: 100%;
  border: none;
}
.table-num .table-num-content input:focus-visible {
  outline: none;
}

.order-btn .order-btn-content button {
  margin-bottom: 30px;
  width: 100%;
  background-color: var(--primary-color);
  border: none;
  border-radius: 6px;
  padding: 10px;
  font-weight: 600;
  color: var(--secondary-text-color);
  transition: all 0.3s ease-in-out;
}
.order-btn .order-btn-content button i {
  color: var(--secondary-text-color);
  -webkit-margin-end: 10px;
  margin-inline-end: 10px;
}
.order-btn .order-btn-content button:hover {
  background-color: var(--hover-color);
}

.cart-items .cart-content .cart-card {
  margin-bottom: 20px;
  display: flex;
  box-shadow: rgba(149, 157, 165, 0.2) 0px 3px 24px;
  align-items: center;
  padding: 15px;
  position: relative;
}
.cart-items .cart-content .cart-card img {
  height: 75px;
  width: 115px;
  border-radius: 6px;
  -webkit-margin-end: 10px;
  margin-inline-end: 10px;
}
.cart-items .cart-content .cart-card .description {
  width: 100%;
}
.cart-items .cart-content .cart-card .description .badge {
  position: absolute;
  left: 14px;
  top: 14px;
  background-color: var(--hover-color);
}
.cart-items .cart-content .cart-card .description h5 {
  font-size: 13px;
  font-weight: 700;
  color: var(--secondary-text-color);
}
.cart-items .cart-content .cart-card .description div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 10px;
  color: var(--primary-text-color);
}
.cart-items .cart-content .cart-card .description div i {
  font-size: 15px;
  margin-bottom: 10px;
  color: var(--hover-color);
}

.empty-cart {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 70vh;
  margin: 85px 0px;
}
.empty-cart h5 {
  text-align: center;
  color: var(--secondary-text-color);
  font-weight: 700;
}

.checkout-items {
  margin-bottom: 10px;
}
.checkout-title .myshare{
    display: flex;
    justify-content: center;
    margin-top: 20px;
    margin-bottom: 15px;
}
.checkout-title .myshare i{
    color: var(--background-color);
    margin-inline-start: 10px;
    font-size: 18px;
}.checkout-title .myshare i:hover{
    color: var(--hover-color);
}
.checkout-title .myshare span{
    text-align: end;
}
.checkout-items .checkout-title {
  /* text-align: center; */
  margin-bottom: 30px;
  font-size: 14px;

}
.checkout-items .checkout-title h6 {
  font-weight: 700;
  font-size: 14px;
}
.checkout-items .checkout-content .form-check {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}
.checkout-items
  .checkout-content
  .form-check
  .form-check-input[type="checkbox"] {
  -webkit-margin-end: 10px;
  margin-inline-end: 10px;
  border-color: var(--primary-color);
}
.checkout-items .checkout-content .form-check .form-check-input:checked {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}
.checkout-items .checkout-content .form-check label {
  width: 100%;
}
.checkout-items .checkout-content .form-check label .checkout-card {
  display: flex;
  box-shadow: rgba(149, 157, 165, 0.2) 0px 3px 24px;
  align-items: center;
  padding: 15px;
}
.checkout-items .checkout-content .form-check label .checkout-card img {
  height: 80px;
  width: 105px;
  border-radius: 6px;
  -webkit-margin-end: 10px;
  margin-inline-end: 10px;
}
.checkout-items
  .checkout-content
  .form-check
  label
  .checkout-card
  .description {
  width: 100%;
}
.checkout-items
  .checkout-content
  .form-check
  label
  .checkout-card
  .description
  h5 {
  font-size: 13px;
  font-weight: 700;
  color: var(--secondary-text-color);
}
.checkout-items
  .checkout-content
  .form-check
  label
  .checkout-card
  .description
  div {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: var(--primary-text-color);
}

.checkout-btn {
  margin-bottom: 20px;
}
.checkout-btn .checkout-btn-content button {
  width: 100%;
  background-color: var(--checkout-btn);
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 10px;
  font-weight: 600;
  color: var(--card-color);
}

.checkout-btn .checkout-btn-content button:hover {
  background-color: var(--card-color);
  border: 1px solid var(--checkout-btn);
  color: var(--checkout-btn);
}

.share-btn {
  margin-bottom: 30px;
}
.share-btn .share-btn-content button {
  width: 100%;
  background-color: var(--card-color);
  border: 1px solid var(--checkout-btn);
  border-radius: 6px;
  padding: 10px;
  font-weight: 600;
  color: var(--checkout-btn);
}
.share-btn .share-btn-content button:hover {
  background-color: var(--checkout-btn);
  color: var(--card-color);
}

.tips {
  margin-bottom: 30px;
}
.tips .tips-content {
  position: relative;
}
.tips .tips-content input {
  width: 100%;
  border: none;
  background-color: var(--bg-input);
  border-radius: 6px;
  padding: 15px;
}
.tips .tips-content input:focus-visible {
  outline: none;
}
.tips .tips-content button {
  position: absolute;
  top: 13px;
  right: 8px;
  background-color: var(--primary-color);
  color: var(--secondary-text-color);
  border: none;
  border-radius: 6px;
  padding: 4px 21px;
  font-size: 14px;
}

.checkout-details .checkout-details-content {
  display: flex;
  flex-direction: column;
}
.checkout-details .checkout-details-content div {
  display: flex;
  justify-content: space-between;
  padding: 10px 0px;
}
.checkout-details .checkout-details-content div span {
  color: var(--primary-text-color);
  font-size: 15px;
}
.checkout-details .checkout-details-content div strong {
  font-size: 15px;
}
.checkout-details .checkout-details-content .pay-btn {
  margin-bottom: 30px;
}
.checkout-details .checkout-details-content .pay-btn button {
  width: 100%;
  background-color: var(--primary-color);
  border: 1px solid var(--primary-color);
  border-radius: 6px;
  padding: 10px;
  font-weight: 600;
  transition: all 0.3s ease-in-out;
  color: var(--secondary-text-color);
}
.checkout-details .checkout-details-content .pay-btn button:hover {
  background-color: var(--card-color);
}
.checkout-details .checkout-details-content .cash-btn {
  margin-bottom: 30px;
}
.checkout-details .checkout-details-content .cash-btn button {
  width: 100%;
  background-color: var(--card-color);
  border: 1px solid var(--primary-color);
  border-radius: 6px;
  padding: 10px;
  font-weight: 600;
  color: var(--secondary-text-color);
  transition: all 0.3s ease-in-out;
}
.checkout-details .checkout-details-content .cash-btn button:hover {
  background-color: var(--primary-color);
}
.checkout-details .checkout-details-content :nth-child(4) {
  margin-bottom: 30px;
}

.devo-navbar {
  margin-top: 10px;
  margin-bottom: 30px;
}
.devo-navbar .devo-navbar-content {
  display: flex;
  justify-content: flex-end;
}
.devo-navbar .devo-navbar-content button {
  border: none;
  background-color: transparent;
  color: var(--primary-color);
}

.devo-login .devo-login-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.devo-login .devo-login-content div {
  margin-bottom: 60px;
}
.devo-login .devo-login-content span {
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  color: var(--primary-text-color);
  width: 100%;
  font-weight: 500;
}
.devo-login .devo-login-content span img {
  -webkit-margin-end: 10px;
  margin-inline-end: 10px;
}
.devo-login .devo-login-content input {
  margin-bottom: 20px;
  width: 100%;
  border-radius: 6px;
  background-color: var(--second-bg-input);
  border: none;
  padding: 10px;
  color: var(--card-color);
}
.devo-login .devo-login-content input:focus-visible {
  outline: none;
}
.devo-login .devo-login-content .eye {
  position: relative;
  width: 100%;
}
.devo-login .devo-login-content .eye input {
  margin-bottom: 20px;
  border-radius: 6px;
  background-color: var(--second-bg-input);
  border: none;
  padding: 10px 0px;
}
.devo-login .devo-login-content .eye img {
  position: absolute;
  top: 10px;
  right: 10px;
  height: 23px;
  width: 23px;
}
.devo-login .devo-login-content .btn-login {
  margin-bottom: 60px;
  width: 100%;
  background-color: var(--primary-color);
  border: 1px solid var(--primary-color);
  border-radius: 6px;
  color: var(--secondary-text-color);
  padding: 15px 0px;
  font-weight: 700;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease-in-out;
}
.devo-login .devo-login-content .btn-login:hover {
  background-color: var(--hover-color);
}
.devo-login .devo-login-content .btn-guest {
    width: 100%;
}
.devo-login .devo-login-content .btn-guest button{
  color: var(--primary-color);
   font-weight: 700;
   width: 100%;

   background-color: transparent;
   border: 1px solid var(--primary-color);
   border-radius: 6px;
   padding: 15px 0px;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: all 0.3s ease-in-out;
}



.devo-login .devo-login-content .btn-guest button:hover{
    color: var(--secondary-text-color); background-color: var(--hover-color);
    border: 1px solid transparent;

}
.modal-dialog {
    margin-bottom: 0 !important;

}
.modal-content{
    background-color: rgb(30, 30, 30);
    margin-bottom: 0 !important;
     box-shadow: 1px -2px 6px 3px #404040;

}
.modal-content .modal-body{
    margin: 20px 0 !important;
}
.modal-content label{
    color: var(--primary-text-color);
    margin-bottom: 5px;
}
.modal-content .modal-footer{
    margin-bottom: 20px !important;
     --bs-modal-footer-border-color: #404040;


}
.modal-content .modal-footer button:nth-child(2){
    background-color: var(--primary-color);
    border: 1px solid var(--primary-color);
    color: var(--secondary-text-color);
}

[dir="rtl"] .devo-header .devo-header-content .back i {
  transform: rotate(180deg);
}
[dir="rtl"] .points .points-content a i {
  transform: rotate(180deg);
}
[dir="rtl"] .form-check .form-check-input {
  float: right;
}
[dir="rtl"] .tips .tips-content button {
  left: 8px;
  right: auto;
}
[dir="rtl"] .items .items-content .item-card .plus-icon {
  left: 7px;
  right: auto;
}
[dir="rtl"] .devo-login .devo-login-content .eye img {
  left: 10px;
  right: auto;
}
[dir="rtl"] .cart-items .cart-content .cart-card .description .badge {
  left: auto;
  right: 14px;
} /*# sourceMappingURL=style.css.map */
.counter{
    display: flex;
    align-items: center;

}
.counter i{
    margin-bottom: 0 !important;
}
.share-app{
    margin-top: 20px;
    margin-bottom: 10px;
}
.share-app .list-share{
    display: flex;
    list-style-type:none ;
    justify-content: space-evenly;
    align-items: center;
    margin: 0;
    padding: 0;
}
.share-app .list-share i{
    font-size: 18px;
    color: var(--background-color );
}
.share-app .list-share i:hover{

    color: var(--hover-color );
}

    /*  make payment status span centered and its color green and text color grey */
    .payment-status{
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: var(--checkout-btn);
        color: var( --bg-input);
        border-radius: 6px;
        padding: 5px 10px;
        font-size: 12px;
        font-weight: 700;
        text-align: center;
        width: 100%;
        margin-bottom: 20px;
        height: 40px;
    }