/*-----------------------------------------------------------------------------------
    Template Name: Template Name
    Version: 1.0
-----------------------------------------------------------------------------------
    
    CSS INDEX
    ===================
	
    01. Template default CSS
    02. Header
    03. Slider
    04. Shipping
    05. Product
    06. Banner
    07. Blog
    08. Testimonial
    09. Brand
    10. Breadcrumb
    11. About
    12. Shop
    13. Sidebar
    14. Contact
    15. My Account
    16. Login & Register
    17. Cart
    18. Wishlist
    19. Compare
    20. Checkout
    21. FAQ
    22. Privacy Policy
    23. 404
-----------------------------------------------------------------------------------*/
/*----------------------------------------*/
/*  01. Template default CSS
/*----------------------------------------*/
/* Font Family

font-family: 'Cormorant Garamond', serif;
font-family: 'Poppins', sans-serif;

*/
/*-- Common Style --*/
/* Example in your all.min.css or custom style */

/* Import plugin CSS */
@import url('plugins/swiper-bundle.min.css');

@import url('plugins/jquery.kashmiribox.css');
@import url('plugins/alert.css');




* {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 0;
  margin: 0;
}

html {
  scroll-behavior: smooth;
}

html,
body {
  height: 100%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
          touch-action: manipulation; /* Disable pinch-to-zoom gestures */
          -webkit-user-select: auto; /* Allow text selection */
          -ms-user-select: auto;
          user-select: auto;
          overflow: auto; /* Ensure scrolling is still allowed */

}

@media screen and (max-width: 380px) {
  html,
  body {
    height: auto;
  }
}

body {
  font-family: "Roboto", sans-serif;
  font-size: 12px;
  color: #171717;
  background: #F5F8FC;
font-variant-ligatures: common-ligatures;
  line-height: 1.55;
}

.body-bg-alice-blue {
  background: F3F8FF;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin: 0;
  padding: 0;
}

h1 {
  font-size: 14px;
  font-weight: 900;
  line-height: 1.7;
}


h2 {
  font-size: 14px;
  font-weight: 1000;
  line-height: 1.6;
}




h3 {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
}

h4 {
  font-size: 15px;
  font-weight: 900;
  line-height: 1.40;
}

h5 {
  font-size: 14px;
  font-weight: 900;
  line-height: 1.56;
}

h6 {
  font-size: 12px;
  font-weight: 900;
  line-height: 0.56;
}

a {
  color: #171717;
  text-decoration: none;
}

a:hover {
  color: #171717;
}

a,
button,
.btn,
img,
input {
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;

}














a,
a:hover,
a:focus,
a:active,
button,
button:focus,
.btn,
.btn:focus,
input,
input:focus,
select,
textarea,
.swiper-pagination-bullet,
.swiper-slide,
.append-button,
.swiper-button-next,
.swiper-button-prev {
  text-decoration: none;
  outline: 0;
  -webkit-box-shadow: none;
          box-shadow: none;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.px-0 {
  padding-left: 0 !important;
  padding-right: 0 !important;
}












.img-full {
  width: 100%;
  overflow: hidden;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center center;
     object-position: center center;
}


.img-fluid {
  max-width: 100%;
  max-height: 98px;
mix-blend-mode: multiply;
  filter: contrast(1);

background-blend-mode: luminosity; 
background-blend-mode: difference; 

background-blend-mode: screen;
  
}































.review-star {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  gap: 5px;

  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  color: #ff9f0a;
  font-size: 14px;
}





.container {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

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

.col-12 {
  padding-left: 15px;
  padding-right: 15px;
}

.text-start {
  text-align: start;
}

.text-center {
  text-align: center;
}

.text-end {
  text-align: end;
}

@media (min-width: 576px) {
  .container,
  .container-sm {
    max-width: 540px;
  }
}

.main-wrapper {
  position: relative;
  height: 100%;
}

.progress-btn {
  position: relative;
  display: inline-block;
}

.progress-btn::after {
  position: absolute;
  content: "";
  border-radius: 50%;
  top: 50%;
  left: 50%;
  height: calc(100% + 24px);
  width: calc(100% + 24px);
  -webkit-transform: translate(-50%, -50%) rotate(45deg);
      -ms-transform: translate(-50%, -50%) rotate(45deg);
          transform: translate(-50%, -50%) rotate(45deg);
  border: 2px solid rgba(255, 55, 95, 0.2);
}

.progress-btn--0::before {
  position: absolute;
  content: "";
  border-radius: 50%;
  top: 50%;
  left: 50%;
  height: calc(100% + 24px);
  width: calc(100% + 24px);
  -webkit-transform: translate(-50%, -50%) rotate(45deg);
      -ms-transform: translate(-50%, -50%) rotate(45deg);
          transform: translate(-50%, -50%) rotate(45deg);
  border-top: 2px solid #ff375f;
  border-right: 2px solid rgba(255, 55, 95, 0);
  border-bottom: 2px solid rgba(255, 55, 95, 0);
  border-left: 2px solid rgba(255, 55, 95, 0);
}

.progress-btn--25::before {
  position: absolute;
  content: "";
  border-radius: 50%;
  top: 50%;
  left: 50%;
  height: calc(100% + 24px);
  width: calc(100% + 24px);
  -webkit-transform: translate(-50%, -50%) rotate(45deg);
      -ms-transform: translate(-50%, -50%) rotate(45deg);
          transform: translate(-50%, -50%) rotate(45deg);
  border-top: 2px solid #ff375f;
  border-right: 2px solid rgba(255, 55, 95, 0);
  border-bottom: 2px solid rgba(255, 55, 95, 0);
  border-left: 2px solid rgba(255, 55, 95, 0);
}

.progress-btn--50::before {
  position: absolute;
  content: "";
  border-radius: 50%;
  top: 50%;
  left: 50%;
  height: calc(100% + 24px);
  width: calc(100% + 24px);
  -webkit-transform: translate(-50%, -50%) rotate(45deg);
      -ms-transform: translate(-50%, -50%) rotate(45deg);
          transform: translate(-50%, -50%) rotate(45deg);
  border-top: 2px solid #ff375f;
  border-right: 2px solid #ff375f;
  border-bottom: 2px solid rgba(255, 55, 95, 0);
  border-left: 2px solid rgba(255, 55, 95, 0);
}

.progress-btn--75::before {
  position: absolute;
  content: "";
  border-radius: 50%;
  top: 50%;
  left: 50%;
  height: calc(100% + 24px);
  width: calc(100% + 24px);
  -webkit-transform: translate(-50%, -50%) rotate(45deg);
      -ms-transform: translate(-50%, -50%) rotate(45deg);
          transform: translate(-50%, -50%) rotate(45deg);
  border-top: 2px solid #ff375f;
  border-right: 2px solid #ff375f;
  border-bottom: 2px solid #ff375f;
  border-left: 2px solid rgba(255, 55, 95, 0);
}

.progress-btn--100::before {
  position: absolute;
  content: "";
  border-radius: 50%;
  top: 50%;
  left: 50%;
  height: calc(100% + 24px);
  width: calc(100% + 24px);
  -webkit-transform: translate(-50%, -50%) rotate(45deg);
      -ms-transform: translate(-50%, -50%) rotate(45deg);
          transform: translate(-50%, -50%) rotate(45deg);
  border-top: 2px solid #A9A9A9;
  border-right: 2px solid #ff375f;
  border-bottom: 2px solid #A9A9A9;
  border-left: 2px solid #A9A9A9;
}

.progress-btn:hover {
  color: white;
}

.visually-hidden,
.visually-hidden-focusable:not(:focus):not(:focus-within) {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.pos-relative {
  position: relative;
}

.overflow-hidden {
  overflow: hidden;
}

.overflow-x-hidden {
  overflow-x: hidden;
}

.flex-start {
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}

.flex-end {
  -webkit-box-pack: end;
  -webkit-justify-content: flex-end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}

.setting-name {
  font-size: 18px;
  margin-bottom: 5px;
}

.setting-email {
  margin-bottom: 5 !important;
}

.default-form-wrapper.profile-wrapper {
  margin-top: 15px;
}

.image {
  position: relative;
}

.upload-file {
  opacity: 0;
  position: absolute;
}

.upload-image-label {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 30px;
  height: 30px;
  background-color: #ff9f0a;
  color: #fff;
  border-radius: 50%;
  position: absolute;
  bottom: 5px;
  right: 0;
  cursor: pointer;
}

.upload-image-label i {
  font-size: 16px;
  line-height: 1;
}









.product-gallery-image {
  
 text-align: center;
 margin-left: auto;
      margin-right: auto;





}

.btn {
  background: none;
  border: none;
  padding: 0;
  font-size: 16px;
  cursor: pointer;
  position: relative;
  overflow: hidden;


}

.btn--default {
  padding: 5px 10px;
  display: inline-block;
}

.btn--default:hover {
  color: white;
}

.btn--block {
  display: block;
}

.btn--round {
  border-radius: 50%;
}

.btn--radius {
  border-radius: 8px;
}

.btn--color-white {
  color: #fff;
}

.btn--color-white {
  color: #fff;
}

.btn--color-radical-red {
  color: #FF375F;
}
.btn--color-orange {
  color: #ff9f0a;
}




.btn--color-pink-swan {
  color: #B4B4B4;
}

.btn--color-maya-blue {
  color: #64D2FF;
}

.btn--color-dodger-blue {
  color: #007AFF;
}
.btn--color-radical-green{

  color: #8400ff;


}


.btn--color-red-orange {
  color: #FF453A;
}
.btn--color-red-airblue {
  color: #00308F;
}





.green {
  color: #0f7c14;
 
  }
  
.red {
  color: #880d0d;
 
  }

  .pure-gray {
  color: gray;
}

.gray {
color: #E0E0E0;
padding-right:10px;
}

.gray-dark{


font-weight: 300;
}


.btn--radical-red {
  background: #FF375F;
}

.btn--bg-white {
  background: #fff;
}

.btn--bg-pink-swan {
  background: #B4B4B4;
}

.btn--bg-maya-blue {
  background: #64D2FF;
}

.btn--bg-dodger-blue {
  background: #007AFF;
}

.btn--bg-red-orange {
  background: #FF453A;
}
.btn--bg-gray {
  background: #D3D3D3;
}

.btn--bg-radio {
   background: #fff;

  border: 1px solid #A9A9A9;
 box-shadow: inset 6px 6px 6px #cbced1, inset -6px -6px 6px white;


}

.btn--box-shadow {
  -webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.05);
          box-shadow: 0 0 6px rgba(0, 0, 0, 0.05);
}

.btn--size-33-33 {
  width: 33px;
  height: 33px;
}

.btn--size-40-40 {
  width: 40px;
  height: 40px;
}

.btn--size-58-58 {
  width: 58px;
  height: 58px;
}

.btn--size-xlarge {
  padding: 18px 0;
}

.btn--font-size-22 {
  font-size: 22px;
}

.btn--font-size-30 {
  font-size: 30px;
}

.btn--center {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}

.btn--social-large {
  padding-left: 20px;
  padding-right: 20px;
}

.btn--rotate-90 {
  -webkit-transform: rotate(90deg);
      -ms-transform: rotate(90deg);
          transform: rotate(90deg);
}

span.ripple {
  position: absolute;
  border-radius: 50%;
  -webkit-transform: scale(0);
      -ms-transform: scale(0);
          transform: scale(0);
  -webkit-animation: ripple 0.6s linear;
          animation: ripple 0.6s linear;
  background-color: rgba(255, 255, 255, 0.7);
}

@-webkit-keyframes ripple {
  to {
    -webkit-transform: scale(4);
            transform: scale(4);
    opacity: 0;
  }
}

@keyframes ripple {
  to {
    -webkit-transform: scale(4);
            transform: scale(4);
    opacity: 0;
  }
}


/* Example: Multi-colored Shadow Background */








#showme ,#showme1{

  opacity:    9; 
  background-color:white;
  width:      100%;
  height:     100%; 
  

  top:        0; 
  left:       0; 
 bottom: 0;
  position:   fixed;




  z-index:99990;
  visibility:visible;


  transition: all 400ms ease-in-out;


}







 .terms-modal {
      display: none;
      position: fixed;
      z-index: 1000;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(126, 126, 126, 0.788);
    }

    .terms-content {
      position: absolute;
      left: 50%;
      bottom: 20px;
      transform: translateX(-50%);
      width: 85%;
      max-width: 300px;
      background-color: #ffffffc2;
      border-radius: 6px;
      padding: 10px;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
      font-family: Arial, sans-serif;
      font-size: 12px;
    }

    .terms-close {
      color: #aaa;
      font-size: 20px;
      font-weight: bold;
      position: absolute;
      top: 6px;
      right: 10px;
      cursor: pointer;
    }

    .terms-close:hover {
      color: black;
    }

    .terms-scroll-body {
      max-height: 140px;
      overflow-y: auto;
      margin-top: 5px;
      padding-right: 8px;
    }

    .terms-text-block {
      color: #333;
    }

    .terms-accept-button {
      display: none;
      width: 100%;
      margin-top: 8px;
      padding: 6px;
      background-color: #4CAF50;
      color: #fff;
      border: none;
      border-radius: 4px;
      font-size: 12px;
      cursor: pointer;
    }

    .terms-accept-button:hover {
      background-color: #45a049;
    }






.load-more {
  text-transform: capitalize;
  display: block;
  margin-top: 15px;
  margin-left: auto;
  margin-right: auto;

}

.load-more-btn {


box-shadow: rgba(0, 0, 0, 0.30) 0px -40px 36px -28px inset;

text-transform: capitalize;
margin-left: 5px;
  line-height: 1;
  font-size: 14px;
  cursor: pointer;
  color: black;
 

    height:40px;
  border-radius: 25px;
  padding: 10px 15px;
 right: 0;
width :98%;
  border: 1px solid #cbced1 ;
	margin-top: 38px;
	

}



.load-more-btn2 {


  box-shadow: rgba(148, 3, 3, 0.3) 0px -40px 36px -28px inset;
  
  text-transform: capitalize;
  margin-left: 5px;
    line-height: 1;
    font-size: 12px;
    cursor: pointer;
    color: rgb(54, 3, 3);
   
  
      height:20px;
    border-radius: 25px;
    padding: 3px 5px;
   right: 0;
  width :auto;
    border: 1px solid #cbced1 ;
   
    
  
  }

  
  .load-more-btn3 {
    box-shadow: rgba(0, 0, 0, 0.2) 0px -2px 4px -1px inset, rgba(0, 0, 0, 0.1) 0px 1px 2px;
    text-transform: capitalize;
    margin-left: 5px;
    font-size: 8px; /* Very small font size */
    cursor: pointer;
    color: #fff; /* White text for contrast */
    background-color: #008b00; /* Dark red background */
    height: 16px; /* Smaller height */
    padding: 2px 3px; /* Compact padding */
    border-radius: 10px; /* Slightly rounded corners */
    border: 1px solid #cbced1;
    transition: all 0.3s ease; /* Smooth transition for hover effects */
}

.load-more-btn3:hover {
    background-color: #B22222; /* Lighter red on hover */
    transform: translateY(-1px); /* Subtle lift effect on hover */
    box-shadow: rgba(0, 0, 0, 0.3) 0px -4px 6px -2px inset, rgba(0, 0, 0, 0.2) 0px 1px 2px; /* Subtle shadow */
}

.load-more-btn3:focus {
    outline: none; /* Removes the default outline when clicked */
    border-color: #ff4500; /* Highlight border color when focused */
}




.apply-btn {
  
  line-height: 1;
  font-size: 14px;
 position: relative; 
overflow: hidden;
 display: inline-block; 
cursor: pointer;
  color: #646464bb;
  background: #fff;
  border-radius: 25px;
  padding: 8px 12px;
  left: 0;
  border: 1px solid #A9A9A9;
 box-shadow: inset 6px 6px 6px #cbced1, inset -6px -6px 6px white;


}



.rating-btn {
  text-transform: capitalize;
margin-left: 5px;
  line-height: 1;
  font-size: 14px;
  cursor: pointer;
  
  background: #fff;
  border-radius: 25px;
  padding: 10px 15px;
 left: 0;
box-shadow: inset 5px 5px 6px #cbced1, inset 13px 23px 16px white;

  border: 1px solid #A9A9A9;
}




.review-btn {
  text-transform: capitalize;
margin-left: 5px;
  line-height: 1;
  font-size: 14px;
  cursor: pointer;
  color: #808080;
  background: #fff;
  border-radius: 25px;
  padding: 10px 15px;
 right: 0;
box-shadow: inset 6px 6px 6px #cbced1, inset -6px -6px 6px white;

  border: 1px solid #A9A9A9;
}








.cancel-btn {
  margin-left: 10px;
  text-transform: capitalize;
  line-height: 1;
  font-size: 14px;
  cursor: pointer;
  color: #fff;
  background: #007aff;
  border-radius: 25px;
  padding: 10px 15px;
 right: 0;
  border: 1px solid #007aff;

}




.btn-payment {
  text-transform: capitalize;
  line-height: 1;
  font-size: 14px;
  color: #fff;
  background: #007aff;
  border-radius: 50px;
  padding: 10px 15px;
  border: 1px solid #007aff;
box-shadow: inset 6px 6px 6px #cbced1, inset -6px -6px 6px white;

}

.btn-payment:hover {
  color: #171717;
}



.btn-social {
  text-transform: capitalize;
  line-height: 1;
  font-size: 9px;
  color: #fff;
  background: #007aff;
  border-radius: 50px;
  padding: 10px 15px;
  border: 1px solid #007aff;
  box-shadow: inset 6px 6px 6px #cbced1, inset -6px -6px 6px white;
  font-weight: 600; /* Optional: makes the text bolder */
  cursor: pointer; /* Adds pointer cursor on hover */
  transition: all 0.3s ease; /* Smooth transition for hover effects */
}

.btn-social:hover {
  color: #171717;
  border-color: #005bb5; /* Darker border on hover */
  box-shadow: inset 4px 4px 4px #a1a9b3, inset -4px -4px 4px white; /* Softer shadow on hover */
}








.skip-btn {
  margin-top: 30px;
  display: inline-block;
  text-transform: capitalize;
  font-weight: 500;
}





#paymentMethod,
#paymentStatus,
#orderStatus,
#deliveryType {
    font-weight: bold;
    text-transform: uppercase;
}



.received_button {
    position: relative;
      text-transform: capitalize;
margin-left: 4px;
  line-height: 1;
  font-size: 14px;
  cursor: pointer;
  color: #fff;
  background-color: #4CAF50;
  border-radius: 25px;
  padding: 10px 15px;
 right: 0;
  border: 1px solid #007aff;
    outline: none;
    cursor: pointer;

    box-shadow: inset 6px 6px 6px #cbced1, inset -6px -6px 6px white;

}

.received_button:hover {
    background: rgb(180, 160, 110);
    color: black;
}








.search-tex-output {

  line-height: 30px;
font-size: 16px;
 color: #007AFF;
  background: #fff;
  border-radius: 5px;
  
  
	 text-transform: capitalize;

margin-top: 5px;
}


.tag {
  text-transform: capitalize;
 
  font-weight: 900;
  line-height: 1.25;
color: green;
  border-radius: 25px;
  padding: 2px 15px 2px 15px;
  border: px solid #007aff;

}











.section-gap-top-25 {
  margin-top: 25px;
}

.section-gap-top-30 {
  margin-top: 30px;
}

.section-gap-top-50 {
  margin-top: 50px;
 
}

.section-gap-top-70 {
  margin-top: 70px;
}
.my-30 {
  margin-top: 30px;
  margin-bottom: 30px;
}

.mt-60 {
  margin-top: 60px;
}

.mt-115 {
  margin-top: 115px;
}

.title-content {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin-top: 20px;
  margin-bottom: 15px;
  /* Rounded corners */
  font-size: 12px;


}





.section-content .title {
  font-size: 22px;
  font-weight: 900;
  line-height: 1.25;
}

.section-content .title span {
  font-weight: 400;
}

.section-content p {
  margin-top: 14px;
}

.search-n-filter-area {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  gap: 18px;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  position: relative;
}

.search-box {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  width: 100%;
}

.search-box input {
  border-radius: 8px;
  height: 40px;
  width: 100%;
  border: none;
  -webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.05);
          box-shadow: 0 0 6px rgba(0, 0, 0, 0.05);
  padding: 10px 50px 10px 20px;
}

.search-box .btn {
  width: 50px;
  height: 100%;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
  right: 0px;
  padding: 5px;
  color: #aaaaaa;
}

.search-box .filter_btn {
  color: #fff;
  border: 0;
  cursor: pointer;
}

.searchable {
  margin-left: 15px;
  margin-right: 15px;
  position: relative;
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

.home-one .searchable {
  margin-left: 0px;
}

.searchable ul {
  padding: 15px 0px;
  position: absolute;
  top: 100%;
  left: 0;
  
  width: 100%;
  text-transform: capitalize;
  display: none;
  list-style-type: none;
  background-color: #fff;
  margin: 15px 0px 0px;
  max-height: 300px;
  overflow-x: hidden;
  overflow-y: auto;
  border-radius: 4px;
}





/* main search css initially */

#noResult {
  display: none;
  color: red;
  font-weight: bold;
}

.search-tex-output {
  padding: 10px;
  margin: 5px;
  display: none; /* Hidden initially */
  align-items: center;
}

.search-tex-output img {
  margin-right: 10px;
}

.product-item-search {
  margin: 10px 0;
  padding: 10px;
  display: none; /* Hidden initially */
  align-items: center;
}

.product-item-search img {
  margin-right: 10px;
}

.suggested-products {
  margin-top: 20px;
}

/* end main search css initially */








.submit__btn,
.close__btn {
  display: none;
}

.btn.close__btn {
  right: 40px;
}

.shop-filter-block__brand {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
}

.shop-filter-block__brand li {
  margin-right: 12px;
}

.shop-filter-block__brand li:last-child {
  margin-right: 0px;
}

.shop-filter-block__brand li button {
  padding: 0;
  margin: 0;
  background: transparent;
  color: #171717;
  border: 0;
}

.shop-filter-block {
  margin-top: 25px;
}

.irs--round .irs-from,
.irs--round .irs-to,
.irs--round .irs-single {
  background-color: #ff375f;
}

.irs--round .irs-from::before,
.irs--round .irs-to::before,
.irs--round .irs-single::before {
  border-top-color: #ff3860;
}

.irs--round .irs-handle {
  border: 4px solid #ff3860;
  -webkit-box-shadow: 0 1px 3px rgba(255, 56, 96, 0.3);
          box-shadow: 0 1px 3px rgba(255, 56, 96, 0.3);
}

.irs--round .irs-bar {
  background-color: #ff3860;
}

#shop-filter-menu {
  margin-top: 25px;
  -webkit-box-shadow: 0px 0px 6px rgba(0, 128, 255, 0.1);
          box-shadow: 0px 0px 6px rgba(0, 128, 255, 0.1);
  background: #fff;
  padding: 25px 15px 25px;
  border-radius: 10px;
}

.mt-0 {
  margin-top: 0px !important;
}

.shop-filter {
  display: none;
}



.swiper-container {
  width: 100%; /* or a fixed width, depending on your layout */
  overflow: hidden;
}







.hero-singel-slide {
  position: relative;
}

.hero-area--style-1 .hero-bg {
  height: 160px;


}


.hero-area--style-1 .hero-bg:hover {
  opacity: 0.5;
}


@media (min-width: 576px) {
  .hero-area--style-1 .hero-bg  {
    height: 240px;
    
  }
}

.hero-area--style-1 .hero-bg img {
  height: 100%;
  border-radius: 5px;
}











.hero-area--style-1 .inner-wrapper {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 0 35px;
}

.hero-area--style-1 .inner-wrapper .content {
  width: 60%;
  text-align: center;
  text-transform: uppercase;
}

.hero-area--style-1 .inner-wrapper .content .title-tag {
  text-transform: capitalize;
  font-weight: 400;
  color: #FF375F;
}

.hero-area--style-1 .inner-wrapper .content .title {
  color: #fff;
}

.hero-area--style-1 .inner-wrapper .content .sub-title {
  font-weight: 300;
  letter-spacing: 1.5px;
  font-size: 12px;
}

.hero-area--style-1 .inner-wrapper .content .sub-title span {
  font-size: 25px;
  font-weight: 900;
  color: #FF375F;
}

.hero-area--style-1 .inner-wrapper .product-img {
  width: 40%;
  position: relative;
}

.hero-area--style-1 .inner-wrapper .shape {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
  left: 0;
  z-index: -1;
}

.hero-area--style-1.hero-area {
  position: relative;
}

.hero-area--style-1.hero-area .swiper-pagination-bullet {
  background: #383636;
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  width: 7px;
  height: 7px;
  margin: 0 7px;
}

.hero-area--style-1.hero-area .swiper-pagination-bullet-active {
  width: 15px;
  background: #FF375F;
  border-radius: 3px;
}

.hero-area--style-1.hero-area .swiper-pagination {
  bottom: -25px;
}

.hero-area--style-2 {
  overflow: hidden;
  border-radius: 10px;
}

.hero-area--style-2 .hero-bg {
  height: 130px;
}

@media (min-width: 576px) {
  .hero-area--style-2 .hero-bg {
    height: 240px;
   

  }
}

.hero-area--style-2 .hero-bg img {
  height: 100%;
  border-radius: 5px;
}

.hero-area--style-2 .inner-wrapper {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 100%;
}

.hero-area--style-2 .inner-wrapper .content {
  text-align: center;
  text-transform: capitalize;
  color: #fff;
}

.hero-area--style-2 .inner-wrapper .content .title {
  font-size: 25px;
  font-weight: 900;
}

.hero-area--style-2 .inner-wrapper .content .sub-title {
  font-size: 25px;
  font-weight: 300;
  letter-spacing: 1.5px;
  margin-top: -10px;
}

.catagories-nav-1 .swiper {
  padding: 40px 15px;
  margin: -40px -15px;
}

.catagories-nav-1 .swiper-slide {
  width: auto;
}

.catagories-nav-1 .btn {
  padding: 1px 10px;
  border-radius: 10px;
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  gap: 10px;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
 
  font-weight: 500;
  -webkit-box-shadow: 13px 15px 30px rgba(0, 17, 252, 0.08);
          box-shadow: 13px 15px 30px rgba(0, 17, 252, 0.08);
}

.catagories-nav-1 .btn .icon img {
  width: 33px;
  height: 33px;
 border-radius: 50px;
  background: #fffffffa;
}

.catagories-nav-1 .btn:hover {
  -webkit-box-shadow: 13px 15px 30px rgba(0, 17, 252, 0.08);
          box-shadow: 13px 15px 30px rgba(0, 17, 252, 0.08);
  color: #0011fc;
}

.catagories-nav-1.catagories-nav-modyfied .swiper {
  padding: 10px;
  margin: -10px;
}

.catagories-nav-1.catagories-nav-modyfied .btn {
  width: 58px;
  height: 60px;
  border-radius: 10px;

  -webkit-box-shadow: 0px 3px 6px rgba(94, 105, 255, 0.16);
          box-shadow: 0px 3px 6px rgba(94, 105, 255, 0.16);
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;

  font-weight: 500;
}

.catagories-nav-1.catagories-nav-modyfied .btn .icon img {
  width: 33px;
  height: 33px;
}

.catagories-nav-1.catagories-nav-modyfied .btn:hover {
  -webkit-box-shadow: 13px 15px 30px rgba(0, 17, 252, 0.08);
          box-shadow: 13px 15px 30px rgba(0, 17, 252, 0.08);
  color: #0011fc;
}

.catagories-nav-2 .swiper-slide {
  width: auto;
}

.catagories-nav-2 .btn {
  font-size: 14px;
  font-weight: 500;
  padding: 10px 15px;
  background: #fff;
  border-radius: 20px;
  display: inline-block;
}

.catagories-nav-2 .btn:hover {
  color: #007AFF;
}

.catagories-nav-3 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  gap: 10px;
}

@media (min-width: 576px) {
  .catagories-nav-3 {
    gap: 25px;
  }
}

.catagories-nav-3 .btn {
  padding: 20px 15px;
  border-radius: 10px;
  -webkit-box-shadow: 0 3px 6px rgba(94, 105, 255, 0.16);
          box-shadow: 0 3px 6px rgba(94, 105, 255, 0.16);
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}




.catagories-wrapper-content,.mrow,.frow,.crow,.vrow,.grow,.hrow,.brow,.rrow{
	display: grid;
  grid-gap: 15px 8px;
  grid-template-columns: repeat(2, 1fr);


}



@media (min-width: 576px) {
  .catagories-wrapper-content.mrow,.frow,.crow,.vrow,.grow,.hrow.brow,.rrow {
    grid-template-columns: repeat(3, 1fr);
  }
}







.catagories-shop-wrapper {
  margin-top: 50px;
}

.product-wrapper-content--4 {
  overflow: hidden;
}

.product-wrapper-content--4 .product-item--style-4:not(:last-child) {
  margin-bottom: 20px;
}

.product-item--style-1 {
  border-radius: 8px;
  padding: 20px 10px;
}

@media (min-width: 576px) {
  .product-item--style-1 {
    padding: 20px 20px;
  }
}

.product-item--style-1 .image {
  display: block;
  text-align: center;
}

.product-item--style-1 .content {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: end;
  -webkit-align-items: flex-end;
      -ms-flex-align: end;
          align-items: flex-end;
  margin-top: 20px;
  font-size: 16px;
}

.product-item--style-1 .content--right .btn {
  background: rgba(255, 255, 255, 0.3);



}

.product-item--style-1 .content--right .btn:hover {
  color: #FF375F;
}

.product-item--style-1 .price {
  display: block;
  font-weight: 900;
}

.product-item--style-2 {
  border-radius: 8px;
}

.product-item--style-2 .image {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  height: 100px;
  width: calc(100% - 20px);
  margin: 0 auto;
  border-radius: 5px;
  overflow: hidden;
  z-index: 1;
}

.product-item--style-2 .image .btn {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(255, 255, 255, 0.3);
}

.product-item--style-2 .content {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: end;
  -webkit-align-items: flex-end;
      -ms-flex-align: end;
          align-items: flex-end;
  margin-top: -20px;
  background: #fff;
  padding: 40px 10px 15px 10px;
  border-radius: 5px;
  font-size: 16px;
  -webkit-box-shadow: 0 0 6px rgba(93, 104, 255, 0.16);
          box-shadow: 0 0 6px rgba(93, 104, 255, 0.16);
}

.product-item--style-2 .content .price {
  display: block;
  font-weight: 900;
}

.product-item--style-2 .content .review-star-text {
  font-weight: 500;
}

.product-item--style-2 .content .review-star-text i {
  color: #ff9f0a;
}

.product-item--style-3 {
  border-radius: 8px;
  background: #fff;
  padding: 20px 25px;
}

.product-item--style-3 .image {
  position: relative;
  margin: 0 auto;
  text-align: center;
  display: block;
}

.product-item--style-3 .image .btn {
  position: absolute;
  top: -8px;
  left: -8px;
  background: rgba(255, 255, 255, 0.3);
  border: 1px solid #e8e8e8;
  background: #fff;
}

.product-item--style-3 .content {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: end;
  -webkit-align-items: flex-end;
      -ms-flex-align: end;
          align-items: flex-end;
  margin-top: 30px;
  border-radius: 5px;
  font-size: 16px;
}

.product-item--style-3 .content .price {
  display: block;
  font-weight: 900;
}

.product-item--style-4 {
  border-radius: 8px;
  background: #fff;
  padding: 10px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 25px;
  position: relative;
  -webkit-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

.product-item--style-4 .image {
  width: 90px;
  height: 90px;
  background: rgba(100, 210, 255, 0.3);
  border-radius: 10px;
}

.product-item--style-4 .image img {
  width: 100%;
  height: 100%;
}

.product-item--style-4 .content {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: end;
  -webkit-align-items: flex-end;
      -ms-flex-align: end;
          align-items: flex-end;
  width: calc(100% - 115px);
  font-size: 16px;
}

.product-item--style-4 .content .price {
  display: block;
  font-weight: 900;
}

.product-item--style-4 .content .btn {
  -webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.16);
          box-shadow: 0 0 6px rgba(0, 0, 0, 0.16);
}

.product-item--style-4 .content .btn:hover {
  color: #FF375F;
}

.product-item--style-4 .cart-link {
  position: absolute;
  width: 65px;
  height: 100%;
  background: rgba(100, 210, 255, 0.3);
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  border-radius: 10px;
  right: calc(0% - 75px);
  color: #007AFF;
  font-size: 22px;
}

.product-item--style-4.active {
  -webkit-transform: translateX(-75px);
      -ms-transform: translateX(-75px);
          transform: translateX(-75px);
}

.product-item--bg-lime-green {
  background: rgba(50, 215, 75, 0.18);
}

.product-item--bg-maya-blue {
  background: rgba(100, 210, 255, 0.18);
}

.product-item--bg-gold {
  background: rgba(255, 214, 10, 0.18);
}
.product-item--bg-multi  {
background: rgb(238,174,202);
background: radial-gradient(circle, rgba(238,174,202,1) 6%, rgba(246,248,251,0.928312750922309) 94%);
}

.product-item--bg-red-orange {
  background: rgba(255, 69, 58, 0.18);
}

.product-item--bg-neon-carrot {
  background: #f8e3d0;
}

.product-item--bg-blue-violet {
  background: #dccff2;
}

.product-item--bg-colonial-white {
  background: #f3efe4;
}

.product-item--bg-solid-pink {
  background: #dfd5d6;
}

.product-item--bg-roti {
  background: #ece5d3;
}

.product-item--bg-prelude {
  color: #de9ff3;
}


.short-btn {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
          padding: 0;
  border: 0;
  background-color: transparent;
  font-weight: normal;
  font-size: 14px;
  color: #8e8e93;
  cursor: pointer;
  justify-content: center; /* Center content */

}

.short-btn:hover {
  color: #FF375F;
}

.short-btn span {
  display: block;
  margin-left: 10px;
}

.short-section {
  display: none;



  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 99999; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */

  background-color: white;


}










.short-wrapper {

  background: #fff;
  -webkit-box-shadow: 0 -11px 16px rgba(93, 104, 255, 0.16);
          box-shadow: 0 -11px 16px rgba(93, 104, 255, 0.16);
  border-radius: 30px 30px 0 0;
  position: fixed;
  width: 100%;
  bottom: 0;
  z-index: 99999;
  padding: 30px 0px 60px 0px;
  left: 50%;
  right: 50%;
  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%);
}

@media (min-width: 576px) {
  .short-wrapper {
    max-width: 540px;
  }
}

.short-wrapper .title {
  font-size: 16px;
  font-weight: 900;
  text-decoration: underline;
  text-align: center;
  display: block;
  margin-bottom: 10px;
}

.short-select-list {
  font-size: 16px;
  padding: 0 20px;
}

.short-select-list .list-item {
  padding: 20px 65px;
  border-bottom: 1px solid #ececec;
}

.short-select-list label {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  cursor: pointer;
}

.short-select-list input[type="radio"] {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  cursor: pointer;
}

.short-select-list .sort-radio-btn {
  position: relative;
}

.short-select-list .sort-radio-btn::after {
  position: absolute;
  content: "";
  width: 12px;
  height: 12px;
  border: 3px solid #dedede;
  border-radius: 50%;
  top: 50%;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
  right: 0;
}

.short-select-list input[type="radio"]:checked + .sort-radio-btn::after {
  border-color: #007AFF;
  box-shadow: inset 6px 6px 6px #cbced1, inset -6px -6px 6px white;


}

.short-btn-group {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 25px;
  margin-top: 40px;
}

.short-btn-group .btn {
  font-size: 18px;
  padding: 18px 42.5px;
  border-radius: 30px;
}

.short-btn-group .btn-cancel {
  color: #000;
  background: rgba(100, 210, 255, 0.3);
}

.short-btn-group .btn-apply {
  color: #fff;
  background: #64d2ff;
}




.user-event-section2 {
   position: fixed;
  width: auto;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 99;
  padding: 10px;
margin: 10px;

background: radial-gradient(circle, rgba(238,174,202,1) 6%, rgba(246,248,251,0.928312750922309) 94%);


  
}






.user-event-section {
  position: fixed;
  width: 100%;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 99;
}







.user-event-area {
  width: 100%;
  height: 60px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  margin: 0 auto;
}

@media (min-width: 576px) {
  .user-event-area {
    max-width: 540px;
  }
}

.user-event-area .user-event {

background:#F5F8FC;;
background: radial-gradient(circle, rgba(255, 222, 237, 1) 0%, rgb(237, 245, 255) 100%);
  height: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

.user-event-area .user-event--left, .user-event-area .user-event--right {
  width: calc(50% - 38px);
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 45px;
  font-size: 22px;
}

.user-event-area .user-event--left {
  border-top-right-radius: 25px;


  
}

.user-event-area .user-event--right {
  border-top-left-radius: 25px;
}

.user-event-area .user-event--center {
  width: 76px;
  background: rgba(255, 255, 255, 0);
  -webkit-transform: translateY(40px);
      -ms-transform: translateY(40px);
          transform: translateY(40px);
  position: relative;
}

.user-event-area .user-event--center::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  bottom: 38px;
  left: 0;
  z-index: -1;
  border-top-right-radius: 0;
  border-top-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;

}

.user-event-area .user-event--center .event-btn-link {
  position: absolute;
  width: 70px;
  height: 70px;
  background: #F5F8FC;
  border-radius: 50%;
  bottom: calc(100% + 5px);
  left: 50%;
  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%);
  -webkit-box-shadow: 0 -11px 25px rgba(75, 99, 255, 0.16);
          box-shadow: 0 -11px 25px rgba(75, 99, 255, 0.16);
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  font-size: 22px;
  color: #007AFF;
}

.user-event-area .user-event--center .event-btn-link:hover {
  color: #FF375F;
}

.event-btn-link {
 
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  -webkit-align-content: center;
      -ms-flex-line-pack: center;
          align-content: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
 /* Border width and style */
   /* Border color */
 color:#ff00aaa4;
 

       
          
}

.event-btn-link:hover {
  color: #FF375F;
}


.icon-wrapper {
  position: relative;
  display: inline-block;
}

.order-count {
  position: absolute;
  top: 20%;
  left: 50%;
  transform: translate(-50%, -50%); /* Center inside parent */
  color: rgb(3, 37, 20);
  font-weight: bold;
  pointer-events: none; /* Ensures it doesn't block clicks */
   background-color: rgba(255, 255, 255, 0.356);
  border-radius: 50%; /* Makes it circular */
  padding: 5px 10px; /* Adjust padding to fit the number */

  /* Merged animations */
  animation: celebrate 2s ease-out infinite, pop 0.5s ease-out;
}

/* Animation for the "celebrate" effect (larger scale and opacity change) */
@keyframes celebrate {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.2);
    opacity: 0.8;
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
}

/* Animation for "pop" effect (shorter scale pop) */
@keyframes pop {
  0% {
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    transform: translate(-50%, -50%) scale(1.3);
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
  }
}





.banner-bg {
  position: relative;
}

.banner-bg .image img {
  border-radius: 10px;
}

.banner-bg .content {
  position: absolute;
  text-align: center;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

.banner-bg .content .title {
  font-size: 25px;
  font-weight: 900;
  line-height: 1.32;
}

.banner-bg .content .title span {
  font-weight: 300;
}

.banner-bg .content a {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.7px;
  text-decoration: underline;
}

.product-gallery-large {
  position: relative;
}

.product-gallery-large .gallery-nav-btn {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  font-weight: 600;
  width: 100%;
  z-index: 1;
}

.product-gallery-large .gallery-nav-btn .text-btn {
  cursor: pointer;
}

.product-gallery-large .product-tag {
  position: absolute;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  top: 0;
  width: 100%;
  z-index: 1;
}

.product-gallery-single-item  .image  {
  text-align: center;
  position: relative;
  z-index: 1;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  height: 272px;
}

.product-gallery-single-item   .image .img-fluid {
  max-width: 250px;
}

.product-gallery-single-item  .image-shape {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%) scale(0.5);
      -ms-transform: translate(-50%, -50%) scale(0.5);
          transform: translate(-50%, -50%) scale(0.5);
  border-radius: 50%;
  -webkit-transition: all 0.5s linear;
  -o-transition: all 0.5s linear;
  transition: all 0.5s linear;
  opacity: 0;
  visibility: hidden;
}

.product-gallery-single-item  .image-shape-1 {
  height: 175px;
  width: 175px;
  background: rgba(255, 255, 255, 0.3);
  z-index: -1;
  -webkit-transition-delay: 0.5s;
       -o-transition-delay: 0.5s;
          transition-delay: 0.5s;
}

.product-gallery-single-item  .image-shape-2 {
  height: 271px;
  width: 271px;
  background: #52ffff;
  background: -webkit-linear-gradient(302deg, #52ffff 0%, #4bf2f8 17%, #39d2e6 50%, #1c9fca 94%, #1b9cc9 100%);
  background: -o-linear-gradient(302deg, #52ffff 0%, #4bf2f8 17%, #39d2e6 50%, #1c9fca 94%, #1b9cc9 100%);
  background: linear-gradient(148deg, #52ffff 0%, #4bf2f8 17%, #39d2e6 50%, #1c9fca 94%, #1b9cc9 100%);
  z-index: -2;
  -webkit-transition-delay: 0.3s;
       -o-transition-delay: 0.3s;
          transition-delay: 0.3s;
}

.product-thumb-image {
  margin: 0 auto;
  max-width: 190px;
}

.product-thumb-image .product-thumb-single-item .image {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  border: 1px solid #ccc;
  cursor: pointer;
  margin: 0 auto;
}

.product-thumb-image  .product-thumb-single-item .image img {
  height: 100%;
  width: 100%;
}

.product-thumb-image .swiper-slide-thumb-active .product-thumb-single-item .image {
  background: #ccc;
}

.product-gallery-image {
position: relative; 




}

.product-gallery-image .swiper-slide-active .image-shape {
  opacity: 1;
  visibility: visible;
  -webkit-transform: translate(-50%, -50%) scale(1);
      -ms-transform: translate(-50%, -50%) scale(1);
          transform: translate(-50%, -50%) scale(1);



}

.product-gallery-image .swiper-pagination-bullet {
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  width: 7px;
  height: 7px;
}

.product-gallery-image .swiper-pagination-bullet-active {
  width: 15px;
  background: #25AFD2;
  border-radius: 3px;
}

.product-gallery-image .swiper-pagination {
  bottom: -37px;
}

.product-gallery-image .product-tag {
  position: absolute;
  top: 0;
  width: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  z-index: 1;
}

.product-gallery-image .product-tag .tag-discount {
  font-size: 10px;
  color: #fff;
  background: rgba(50, 215, 75, 0.7);
  border-radius: 5px;
  padding: 5px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}

.product-gallery-details {
  margin-top: 50px;
  background: #fff;
  border-radius: 50px 50px 0 0;
  padding: 30px;
}

@media screen and (max-width: 480px) {
  .product-gallery-details {
    padding: 30px 20px;
  }
}

.product-gallery-details .rating {
  display: inline-block;
  margin-bottom: 4px;
}

.product-gallery-details .title {
  color: #007AFF;
  margin-bottom: 7px;
}

.product-variable-lists {
  margin-top: 20px;
  margin-bottom: 20px;
}

.product-variable-lists .list-item {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}

.product-variable-lists .list-item:not(:last-child) {
  margin-bottom: 25px;
}

.product-variable-lists .left {
  width: 13%;
  font-size: 18px;
}

@media screen and (max-width: 480px) {
  .product-variable-lists .left {
    width: 20%;
  }
}

.product-variable-lists .right {
  width: auto;
}

.product-variable-lists .inner-child-item {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  gap: 15px;
}

@media screen and (max-width: 480px) {
  .product-variable-lists .inner-child-item {
    gap: 10px;
  }
}

.product-variable-lists .inner-child-item label {
  position: relative;
  width: 36px;
  height: 36px;
  display: block;
}

.product-variable-lists .inner-child-item input[type="radio"] {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.product-variable-lists .inner-child-item .size-chart label {
  width: 36px;
  height: 36px;
}

.product-variable-lists .inner-child-item .size-text {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  font-size: 16px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 4px;
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  cursor: pointer;
  background: #fff;
  -webkit-transition: all 0.1s ease;
  -o-transition: all 0.1s ease;
  transition: all 0.1s ease;
}

.product-variable-lists .inner-child-item input[type="radio"]:checked + .size-text {
  background: rgba(100, 210, 255, 0.6);
  border-color: rgba(100, 210, 255, 0.6);
}

.product-variable-lists .color-chart label {
  width: 25px;
  height: 25px;
}

.product-variable-lists .color-chart .color-box {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  border-radius: 50%;
  width: 100%;
  height: 100%;
  cursor: pointer;
  -webkit-transition: all 0.1s ease;
  -o-transition: all 0.1s ease;
  transition: all 0.1s ease;
}

.product-variable-lists .color-chart .color-box--blue {
  background: #25AFD2;
}

.product-variable-lists .color-chart .color-box--orange {
  background: #FF453A;
}

.product-variable-lists .color-chart .color-box--violet {
  background: #7230E0;
}

.product-variable-lists .color-chart .color-box--pink {
  background: #FF375F;
}

.product-variable-lists .color-chart input[type="radio"]:checked + .color-box {
  border: 5px solid rgba(255, 255, 255, 0.3);
}

.price-n-cart {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 30px;
position: relative;
  margin-top: 25px;
}

.price-n-cart .price {
  font-size: 15px;
  font-weight: 800;
  color: #007AFF;
}

.price-n-cart .cart {
  position: absolute;
  background: green;
  border-radius: 50px 0 0 50px;
  width: 220px;
  height: 50px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  right: -30px;
 bottom:0;
  color: #fff;
  font-weight: 800;



}

@media screen and (max-width: 480px) {
  .price-n-cart .cart {
    width: 180px;
    right: -20px;
  }
}

.price-n-cart .cart .icon {
  font-size: 18px;
  display: inline-block;
  margin-right: 7px;
}



.single-cart-item  {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  background: #fff;
  border-radius: 10px;
  padding: 10px 10px 10px 10px;

		-webkit-box-shadow: 10px 10px 5px grey;
	-moz-box-shadow: 10px 10px 5px grey;
	box-shadow: 10px 10px 5px grey;

}

@media (min-width: 576px) {
  .single-cart-item  {
   
    padding: 10px 30px 10px 10px;
  }
}

.single-cart-item .image {
  width: 90px;
  height: 90px;
  background: rgba(100, 210, 255, 0.18);
  border-radius: 10px;
  margin-right: 15px;


}

@media (min-width: 576px) {
  .single-cart-item  .image {
    margin-right: 25px;
  }
}

.single-cart-item .image img {
  border-radius: 10px;
  width: 100px;
  height: 108px;
  margin-top: 18px;

  
}

.single-cart-item .content  {
  position: relative;
  width: calc(100% - 75px);
}

.single-cart-item .content .title {
  font-size: 16px;
  margin-bottom: px;
}

.single-cart-item .content .brand,
.single-cart-item .content .price {
  display: block;
}

.single-cart-item .content .brand {
  font-size: 12px;
  color: #0039a6;

  margin-bottom: 4px;
font-weight: 700;
}



.single-cart-item .content .brand-size {
  font-size: 12px;
  font-weight: 900;
  color: rgb(0, 0, 0);
  background-color: #beb7b7da;  /* Light background color */
  border-bottom: 1px dotted #6d0606; /* Dotted border on the right side */
  border-top-right-radius: 10px;  /* Rounded top-right corner */
  border-bottom-right-radius: 10px; /* Rounded bottom-right corner */ 
}





    

.single-cart-item .content .brand-future{
  font-weight: 900;
  color: rgb(0, 0, 0);
  background-color: #e2dbe9a8;  /* Light background color */
 
  

  border-top-right-radius: 60px;  /* Rounded top-right corner */
  border-bottom-right-radius: 10px; /* Rounded bottom-right corner */ 
  

    }

.single-cart-item .content .brand-color{
font-weight: 900;
 
color: rgba(225, 80, 209, 0.6);
  

    }

.single-cart-item .content .brand-capacity{
  font-weight: 900;
  color: rgb(102, 2, 122);
  background-color: #a09d9d2d;  /* Light background color */
  border-bottom: 0px dotted #f10404; /* Dotted border on the right side */
 

  border-top-right-radius: 60px;  /* Rounded top-right corner */
  border-bottom-right-radius: 10px; /* Rounded bottom-right corner */ 
  

    }




.single-cart-item .content .offer {
  font-size: 14px;
  color: #9ACD32;
border-radius:6px;
font-weight: 700;
margin-right: 18px;
}


.single-cart-item .content .brand-info {
  font-size: 12px;
  color: #D22B2B;
  margin-bottom: 4px;
font-weight: 900;

}


.single-cart-item .content .brand-info .brand-icon {
  font-size: 18px;
  color: #F5F5F5;
  padding-left: 18px;
margin-bottom: 0;
font-weight: 800;

}



.single-cart-item .content .brand-discription {
  font-size: 11px;


  margin-bottom: 4px;
font-weight: 300;

}


.single-cart-item .content .price {
  font-weight: 900;
}


.single-cart-item .content .list-mrp{
	  padding-left: 5px;
color: silver; 
 text-decoration: line-through;
}

.single-cart-item .content .delete-item {
  padding: 0;
  margin: 0;
  border: 0;
  cursor: pointer;
  background-color: transparent;
  color: #171717;
  position: absolute;
  top: 4px;
  right: 0;
  line-height: 1;
}

.single-cart-item .content .delete-item:hover {
  color: #ff375f;
}

.single-cart-item .content .delete-item svg {
  fill: currentColor;
  width: 15px;
  height: auto;
}

.single-cart-item .details {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: end;
  -webkit-align-items: flex-end;
      -ms-flex-align: end;
          align-items: flex-end;
}




	/*#stall csss my own*/
	
	
	/*# Cart items  stall css*/
	
.cart-column {
 display: block;
}

.cart-column {
  display: block;
 }
 
 @keyframes movingDottedBorder {
   0% {
     background-position: 0 100%;
   }
   100% {
     background-position: 20px 100%;
   }
 }
 
 .cart-row {
   margin-top: 30px;
   margin-bottom: 15px;
   min-height: auto;
   border-radius: 7px;
   position: relative;
   padding: 7px;
   border-left: 5px solid  #07082c9a; /* Left border color */
   border-top-left-radius: 15px;  /* Top left corner radius */
   border-bottom-left-radius: 15px; /* Bottom left corner radius */
   border-right: 9px solid  #07082c9a; /* Right border */
   padding-right: 20px; /* Space to avoid overlap */
   border-top-right-radius: 55px;  /* Top right corner radius */
   border-bottom-right-radius: 15px; /* Bottom left corner radius */
   position: relative;

   
  
 
 }
 #a1a5a8, 
 .cart-row::after {
   content: "";
   position: absolute;
   bottom: 0;
   left: 0;
   width: 100%;
   height: 3px;
   background: radial-gradient(circle, #3498db 30%, transparent 30%) repeat-x;
   background-size: 10px 3px;
   animation: movingDottedBorder 1s linear infinite;
 }
 
 
 
.cart-item {   
  position: relative;
}

.cart-title {
font-size: 10px;
margin-top: 4px;
  margin-bottom: 4px;
}

.closecart {
  font-size: 30px;
  float: right;
  cursor: pointer;
 }

.closecart:hover{
  transform: scale(1.5);
}

.cart-header {
    font-weight: bold;
    font-size: 1.25em;
    color: black;
}
.cart-mrp {
  text-decoration: line-through;
 color: gray;
  padding: 4px;
}


.cart-price {
      font-weight: 900;
  color: green;
	margin: 4;
	padding: 4px;
	font-size: 12px;
	line-height: 12px;
}

.cart-tax {
      font-weight: 500;
  color: gray; 
	margin: 4;
	padding: 4px;
	font-size: 10px;
	line-height: 12px;
	
	
}



.cart-quantity  {
  color: darkgray; 
	margin: 4;
	padding: 4px;
	font-size: 14px;
	line-height: 12px;
}

.cart-item-title {
    font-size: 9px;
    margin-top: 5px;
  margin-bottom: 1px;
color: green;
font-weight: 900;
}

.cart-item-image {
    width: 125px;
	height: 100px;
  border-radius: 15px;

	padding-left: 1px;	
padding: 10px; overflow-x: hidden; 
	float: left;
	left:0;
	

}


.estmated-delevery-date  {
  position: absolute;
     top: -2%;
     transform: translateY(-50%);
     right: 50px;
     font-size: 11px;
     background: linear-gradient(to right, #FFA500,#FF4500);
     border-radius: 12px;
     border: 2px white solid;
     padding-left: 5px;  /* Adds 20px space inside the left */
     padding-right: 5px; /* Adds 20px space inside the right */
     animation: slide_up 1.4s ease;
     text-align: center;    
     color: #ffffff;
 
 }
.charges {
  display: none;
}


.tatal-all {
  
  margin-bottom: -6px;
  color: #6b6666;

}



.selefdelv {
  position: absolute;
  top: -18%;
  transform: translateY(-50%);
  right: 50px;
  font-size: xx-small;
  border-radius: 5px;
  border: 2px solid white;
  
  padding-left: 8px;
  padding-right: 5px;
  text-align: center;
  border-top-left-radius: 55px; /* Bottom left corner radius */
  border-bottom-right-radius: 55px; /* Bottom left corner radius */
  background: #33393dc4;
  color: #ffffff;
  margin: 0%;
}




.btn-remove {
 position: absolute;
    top: 2%;
    transform: translateY(-50%);
    right: 18px;
    width: 25px;
    height: 25px;
    border-radius: 50%;
border: 2px white solid;

    animation: slide_up 1.4s ease;
    text-align: center;    
 background: #D3D3D3;

}



.btn-remove:before {
 font-family: "Font Awesome 6 Free"; font-weight: 900; 
font-family: FontAwesome; content: "\00d7"; 
display: inline-block; 
vertical-align: middle;
font-size: 20px; 

}



.cart-quantity-input {
    height: 20px;
    width: 70px;
    border-radius: 5px;
    border: 1px solid #978461;
    background-color: white;
    color: #333;
    padding: 0;
    text-align: left;
    font-size: 16px;
    margin-right: 25px;
}

.cart-row:last-child {
    border-bottom: 1px solid black;
}

.cart-row:last-child .cart-column {
    border: none;
}










.list-offer2,.countdown {
  border: none;
  background: rgb(251,33,100);
background: linear-gradient(to right, #FFA500,#FF4500);
    transform: perspective(500px) rotateY(calc(45deg * var(--i, -1)));
  top: 20%;
  right: -8px;
 font-weight: bold;
  position: absolute;
  font-family: system-ui, sans-serif;
  font-weight: bold;
  font-size: 0.9rem;
  margin: 0;
  cursor: pointer;
  padding: 0.1em 0.5em;
  border-radius: 20px;
    color: #fff;
    overflow: hidden;
}
.list-offer2:hover {
    text-decoration: none;
    color: #fff;
}
.list-offer2:before {
    position: absolute;
    content: '';
    display: inline-block;
    top: -180px;
    left: 0;
    width: 30px;
    height: 100%;
    background-color: #fff;
    animation: shiny-btn1 3s ease-in-out infinite;
}
.list-offer2:hover{
  opacity: .7;
}
.list-offer2:active{
  box-shadow:  4px 4px 6px 0 rgba(255,255,255,.3),
              -4px -4px 6px 0 rgba(116, 125, 136, .2), 
    inset -4px -4px 6px 0 rgba(255,255,255,.2),
    inset 4px 4px 6px 0 rgba(0, 0, 0, .2);
}

         @-webkit-keyframes shiny-btn1 {
            0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; }
            80% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; }
            81% { -webkit-transform: scale(4) rotate(45deg); opacity: 1; }
            100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; }
        }

        @keyframes shiny-btn1 {
          0% { transform: scale(0) rotate(45deg); opacity: 0; }
          80% { transform: scale(0) rotate(45deg); opacity: 0.5; }
          81% { transform: scale(4) rotate(45deg); opacity: 1; }
          100% { transform: scale(50) rotate(45deg); opacity: 0; }
      }
      
    
      


.list-offer3 {
  border: none;
  background: rgb(251,33,100);
background: linear-gradient(to right, #FFA500,#FF4500);
transform: perspective(500px) rotateY(calc(45deg * var(--i, 1)));
 
 font-weight: bold;

  font-family: system-ui, sans-serif;
  font-weight: bold;
  font-size: 0.9rem;
  margin: 0;
  cursor: pointer;
  padding: 0.1em 0.5em;
  border-radius: 20px;
    color: #fff;
    overflow: hidden;
}




.list-offer-color {
  border: none;

  top: -15%;
  left: 5px;
 font-weight: bold;
  position: absolute;
  font-family: system-ui, sans-serif;
  padding: 0.1em 0.5em;
  font-size: 0.7rem;
  margin: 0;
  cursor: pointer;
 
   

}
.color-badge { 
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 2px;
  border: 1px solid #ccc;
}

  
  .list-offer4 {
    border: none;
   
    font-weight: bold;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.534); /* Subtle shadow for depth */
    transition: all 0.3s ease; /* Smooth transition for hover effects */
    color: #01200c;
    font-family: system-ui, sans-serif;
    font-size: 12px;
    margin: 0;
    cursor: pointer;
    padding: 0.1em 0.5em;
    border-radius: 100px;
  
    
    
    bottom: 8px;  /* Align to the top of the container */
    right: -22%;/* Align to the right of the container */
  }
  
  

  .share-product-button {
     border: none;
   
    font-weight: bold;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.534); /* Subtle shadow for depth */
    transition: all 0.3s ease; /* Smooth transition for hover effects */
    color: #01200c;
    font-family: system-ui, sans-serif;
    font-size: 16px;
    margin: 0;
    cursor: pointer;
    padding: 0.1em 0.5em;
    border-radius: 100px;
    background-color: #d9e0e9;
    
    
    bottom: 10px;  /* Align to the top of the container */
    left: -72%;/* Align to the right of the container */
}



  .delevery-boy-order-status{
    border: none;
  
    top: -6%;
    left: 10px;
   font-weight: bold;
    position: absolute;
    font-family: system-ui, sans-serif;
    padding: 0.1em 0.5em;
    font-size: 0.7rem;
    margin: 0;
    cursor: pointer;
    border-radius: 20px;
    border: 2px white solid;
      color: #166e0e;
      overflow: hidden;
      transform:rotateY(-45deg);
      background-color: #faf4f4;
  
  }



  .delevery-boy-order-date{
    border: none;
  
    bottom: -6%;
    right: 10px;
   font-weight: bold;
    position: absolute;
    font-family: system-ui, sans-serif;
    padding: 0.1em 0.5em;
    font-size: 0.7rem;
    margin: 0;
    cursor: pointer;
    border-radius: 20px;
    border: 2px white solid;
      color: #166e0e;
      overflow: hidden;
      transform:rotateY(-45deg);
      background-color: #faf4f4;
  
  }

  
.ticket {
  display: inline-block;
  padding: 1px 8px;
  background-color: #fffbe6;
  border: 1px dashed #d4af37;
  border-radius: 6px;
  font-family: 'Arial', sans-serif;
  font-size: 9px;
  color: #333;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
  position: relative;
  line-height: 1.2;
    margin-right: 10px;
      margin-left: 5px;
    max-width: 150px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Mini Punch Holes */
.ticket::before,
.ticket::after {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  background: #fffbe6;
  border-radius: 50%;
  border: 1px dashed #cfaa30;
  top: 50%;
  transform: translateY(-50%);
}

.ticket::before {
  left: -5px;
}

.ticket::after {
  right: -5px;
}




  .flax {
    display: flex;  /* Aligns items in a row */
    justify-content: space-between;  /* Spaces them evenly */
    align-items: center; /* Centers items vertically */
    gap: 5px; /* Adds spacing between elements */
    width: 100%;
   
}
.flax-up{
    display: flex;  /* Aligns items in a row */
    justify-content: space-between;  /* Spaces them evenly */
    align-items: center; /* Centers items vertically */
    gap: 5px; /* Adds spacing between elements */
    width: 100%;
    margin-top: -12px;
    padding-bottom: 10px;
  
   
}

.very-small-text {
  font-size: 8px; /* Adjust the size as needed */
}

 
.small-text {
  font-size: 10px; /* Adjust the size as needed */
}


.medium-text {
  font-size: 9px; /* Adjust the size as needed */
}











@keyframes slide_top{
  100%{
    transform: translateY(500px  );
  }
  0%   {background: red; left: 0px; bottom: 0px;}
  25%  {background: yellow; right: 200px; bottom: 0px;}
  50%  {background: blue; left: 200px; top: 200px;}
  75%  {background: green; left: 0px; top: 200px;}
  100% {background: red; left: 0px; top: 0px;}
  0%{
    transform: translateY(0px);
  }
}


.zoomInDown{

-webkit-animation-name: zoomInDown;
 animation-name: zoomInDown; 
-webkit-animation-duration: 1s;
 animation-duration: 1s; 
-webkit-animation-fill-mode: both; 
animation-fill-mode: both; 
}

 
@-webkit-keyframes zoomInDown { 
0% { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); 
transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); 
-webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 
animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 
   } 60% { 
    opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
 transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
 -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
 animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 
    } }
 @keyframes zoomInDown 
{ 0% { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } 60% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } ×

































.constant-tilt-shake {
  animation: tilt-shaking 0.3s infinite;
}

@keyframes tilt-shaking {
  0% { transform: rotate(0deg); }
  25% { transform: rotate(5deg); }
  50% { transform: rotate(0eg); }
  75% { transform: rotate(-5deg); }
  100% { transform: rotate(0deg); }
}






.tilt-shaking:hover {
  animation: tilt-shaking 0.15s infinite;
}

.skew-y-shake:hover {
  animation: tilt-shaking 0.25s infinite;
}

.horizontal-shak:hover {
  animation: tilt-n-move-shaking 0.25s infinite;
}

.tilt-shaking {
  animation: tilt-n-move-shaking 0.15s infinite;
}

.tilt-n-move-shaking {
  animation: tilt-shaking 0.3s infinite;
}

.vertical-shake {
  animation: vertical-shaking 0.35s infinite;
}

.horizontal-shake {
  animation: horizontal-shaking 0.35s infinite;
}

.jump-shaking {
  animation: jump-shaking 0.83s infinite;
}

.skew-x-shake {
  animation: skew-x-shake 1.3s infinite;
}

.skew-y-shake {
  animation: skew-y-shake 1.3s infinite;
}

@keyframes tilt-shaking {
  0% { transform: rotate(0deg); }
  25% { transform: rotate(5deg); }
  50% { transform: rotate(0eg); }
  75% { transform: rotate(-5deg); }
  100% { transform: rotate(0deg); }
}

@keyframes tilt-n-move-shaking {
  0% { transform: translate(0, 0) rotate(0deg); }
  25% { transform: translate(5px, 5px) rotate(5deg); }
  50% { transform: translate(0, 0) rotate(0eg); }
  75% { transform: translate(-5px, 5px) rotate(-5deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}

@keyframes vertical-shaking {
  0% { transform: translateY(0) }
  25% { transform: translateY(5px) }
  50% { transform: translateY(-5px) }
  75% { transform: translateY(5px) }
  100% { transform: translateY(0) }
}

@keyframes horizontal-shaking {
  0% { transform: translateX(0) }
  25% { transform: translateX(5px) }
  50% { transform: translateX(-5px) }
  75% { transform: translateX(5px) }
  100% { transform: translateX(0) }
}

@keyframes jump-shaking {
  0% { transform: translateX(0) }
  25% { transform: translateY(-9px) }
  35% { transform: translateY(-9px) rotate(17deg) }
  55% { transform: translateY(-9px) rotate(-17deg) }
  65% { transform: translateY(-9px) rotate(17deg) }
  75% { transform: translateY(-9px) rotate(-17deg) }
  100% { transform: translateY(0) rotate(0) }
}

@keyframes skew-x-shake {
  0% { transform: skewX(-15deg); }
  5% { transform: skewX(15deg); }
  10% { transform: skewX(-15deg); }
  15% { transform: skewX(15deg); }
  20% { transform: skewX(0deg); }
  100% { transform: skewX(0deg); }  
}

@keyframes skew-y-shake {
  0% { transform: skewY(-15deg); }
  5% { transform: skewY(15deg); }
  10% { transform: skewY(-15deg); }
  15% { transform: skewY(15deg); }
  20% { transform: skewY(0deg); }
  100% { transform: skewY(0deg); }  
}







/*Quantity */
.num-in {
  border: 1px solid rgba(0, 0, 0, 0.15);
  background: #ffffff;
  border-radius: 4px;
  height: 34px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 98px;
}

.num-in span {
  width: 33.33%;
  display: block;
  height: 100%;
  position: relative;
  cursor: pointer;
}

.num-in span:before,
.num-in span:after {
  content: "";
  position: absolute;
  background-color: #7230E0;
  height: 2px;
  width: 10px;
  top: 50%;
  left: 50%;
  margin-top: -1px;
  margin-left: -5px;
}

.num-in span.plus:after {
  -webkit-transform: rotate(90deg);
      -ms-transform: rotate(90deg);
          transform: rotate(90deg);
}

.num-in  input {
  width: 33.33%;
  height: auto;
  border: none;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  color: #7230E0;
}


.cart-info-list {
  margin-top: 25px;
}

.cart-info-single-list:not(:last-child) {
  border-bottom: 1px solid #bbecff;
  margin-bottom: 15px;
  padding-bottom: 15px;
}

.cart-info-child {
  font-size: 14px;
  font-weight: 500;
}

.cart-info-child .item {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}

.cart-info-child .item:not(:last-child) {
  margin-bottom: 13px;
}

.cart-info-child .text-left {
  position: relative;
  width: 26%;
  margin-right: 20px;
}

@media (min-width: 576px) {
  .cart-info-child .text-left {
    width: 20%;
    margin-right: 30px;
  }
}

.cart-info-child .text-left::after {
  position: absolute;
  content: ":";
  right: 0;
}

.cart-info-child .total-price {
  font-size: 20px;
  color: #000;
  margin-right: 20px;
  display: inline-block;
}

@media (min-width: 576px) {
  .cart-info-child .total-price {
    margin-right: 40px;
  }
}

.cart-info-child .btn {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  font-size: 14px;
  color: #fff;
  background: #007AFF;
  border-radius: 4px;
  padding: 10px 15px;
}

@media (min-width: 576px) {
  .cart-info-child .btn {
    padding: 8px 15px;
  }
}

.cart-info-child .btn .icon {
  padding-right: 5px;
}

.profile-card-wrapper {
  position: relative;
  padding: 35px 40px;
  border-radius: 10px;
  background: #fff;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 25px;
}

.profile-card-wrapper h2 {
  font-size: 18px;
}

.profile-card-wrapper .profile-shape {
  position: absolute;
}

.profile-card-wrapper .profile-shape-1 {
  top: 0;
  left: 0;
}

.profile-card-wrapper .profile-shape-2 {
  bottom: -5px;
  right: 0;
}

.profile-card-wrapper .image {
  border-radius: 50%;
  margin: -18px;



}

.profile-card-wrapper .image img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
 

}

.profile-card-wrapper .content .title {
  font-weight: 500;
  margin-bottom: 2px;
}

.profile-card-wrapper .content .email,
.profile-card-wrapper .content .id-num {
  display: block;
}



.profile-card-wrapper .content .id-num {
  font-size: 13px;
}

.profile-details-top {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.profile-details-top .text {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  margin-bottom: 5px;
  font-weight: normal;
  font-size: 12px;
  color: #929292;
font-weight: 700;
}

.profile-details-top .price {
  font-weight: 900;
  font-size: 16px;
  color: #1c1c1e;
}

.profile-details-bottom {
  margin-top: 30px;
}

.profile-user-list .profile-list-item {
  border-top: 1px solid rgba(112, 112, 112, 0.1);
  padding-top: 25px;
  padding-bottom: 25px;
}

.profile-single-list .list-item:not(:last-child) {
  margin-bottom: 28px;
}

.profile-single-list .profile-link {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 20px;
  font-weight: 500;
}

.profile-single-list .icon {
  font-size: 18px;
  line-height: 1;
}

.login-section {
  margin-top: 30px;
  margin-bottom: 30px;
}

.login-wrapper .devide-text {
  display: block;
  margin-top: 20px;
  margin-bottom: 20px;
  text-align: center;
}

.login-wrapper .btn:not(:last-child) {
  margin-bottom: 30px;
}

.login-wrapper .btn .icon {
  width: 30px;
  border-right: 1px solid #fff;
  margin-right: 30px;
  display: inline-block;
}

.login-wrapper .btn:hover .icon {
  border-color: #171717;
}

.default-form-wrapper {
  width: 100%;
  margin-top: 30px;
}

.default-form-list .single-form-item:not(:last-child) {
  margin-bottom: 15px;
}

.single-form-item {
  position: relative;
}

.single-form-item input {
  border: 2px solid #e2e7ea;
  border-radius: 50px;
  padding: 18px 20px 18px 42px;
  width: -webkit-fill-available;
  font-size: 12px;
  width: 100%;

  background: #ecf0f3;
 
 
  box-shadow: inset 6px 6px 6px #cbced1, inset -6px -6px 6px white;
}


input:hover{
background: #C0C0C0;

}




input.weight, input.dimensions ,input.pack {
  background: #34353436; /* Green background */
  font-size: 10px;       /* Small font size */
      /* White text color (so it's visible on the green background) */
  
}






.single-form-item input::-webkit-input-placeholder {
  color: #171717;
}

.single-form-item input::-moz-placeholder {
  color: #171717;
}

.single-form-item input:-ms-input-placeholder {
  color: #171717;
}

.single-form-item input::-ms-input-placeholder {
  color: #171717;
}

.single-form-item input::placeholder {
  color: #171717;
}

.single-form-item .icon {
  position: absolute;
  height: calc(100% - 20px);
  top: 50%;
  left: 0;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 40px;
  font-size: 12px;
  border-right: 2px solid #e2e7ea;
}

.forgot-link {
  margin-top: 25px;
  display: block;
  text-align: end;
  margin-bottom: 30px;
}

.create-account-text {
  margin-top: 30px;
  margin-bottom: 40px;
}

.sign-account-text {
  margin-top: 30px;
  margin-bottom: 40px;
}

.page-progress-wrapper {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.contact-btn {
  margin-top: 15px;
}

.register-space-top {
  margin-top: 15px;
}

.intro-section {
  padding-top: 50px;
  padding-bottom: 50px;
  background: #F3F8FF;
  height: 100%;
  min-height: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  padding-left: 15px;
  padding-right: 15px;
}

.intro-wrapper {
  text-align: center;
}

.intro-wrapper .logo {
  margin-bottom: 30px;
}

.intro-wrapper .logo .image {
  display: block;
  margin-bottom: 10px;
}

.intro-wrapper .intro-bg {
  margin-bottom: 30px;
}

.intro-wrapper .intro-text {
  margin-bottom: 50px;
}

.btn--size-58-58 {
  margin: 0 auto;
}

.chat-top-area {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 15px 20px;
  font-size: 16px;
  color: #171717;
  border-radius: 10px;
  background: #fff;
  -webkit-box-shadow: 0px 3px 20px rgba(51, 97, 248, 0.05);
          box-shadow: 0px 3px 20px rgba(51, 97, 248, 0.05);
}

.chat-top-area .image {
  margin-right: 15px;
  position: relative;
}

.chat-top-area .image img {
  border-radius: 50%;
  border: 2px solid #FF375F;
}

.chat-top-area .image .chat-activity {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  position: absolute;
  top: 0;
  right: 10px;
  -webkit-animation: flashing 1.5s infinite linear;
          animation: flashing 1.5s infinite linear;
}

.chat-top-area .image .chat--online {
  background: #35E86A;
}

.chat-top-area .content {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

@-webkit-keyframes flashing {
  0%,
  90% {
    opacity: 1;
  }
  45% {
    opacity: 0;
  }
}

@keyframes flashing {
  0%,
  90% {
    opacity: 1;
  }
  45% {
    opacity: 0;
  }
}

.chat-content-area {
  margin-top: 30px;
  padding-bottom: 90px;
}

.message-content {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  gap: 15px;
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
      -ms-flex-align: start;
          align-items: flex-start;
}

.message-content:not(:last-child) {
  margin-bottom: 20px;
}

.message-content .image img {
  border-radius: 50%;
  border: 2px solid #fff;
}

.message-content p {
  padding: 7px 15px;
  color: #fff;
  display: inline-block;
  border-radius: 0 15px 15px 15px;
}

.message-content p:not(:last-child) {
  margin-bottom: 5px;
}

.message-content .time {
  display: block;
  font-size: 12px;
}

.message-content .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #007AFF;
  -webkit-animation: writingdot 1s linear 0s infinite;
          animation: writingdot 1s linear 0s infinite;
  display: inline-block;
}

.message-content .dot:nth-child(1) {
  -webkit-animation-delay: 0s;
          animation-delay: 0s;
}

.message-content .dot:nth-child(2) {
  -webkit-animation-delay: 0.25s;
          animation-delay: 0.25s;
}

.message-content .dot:nth-child(3) {
  -webkit-animation-delay: 0.5s;
          animation-delay: 0.5s;
}

.agent-message-content {
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}

.agent-message-content p {
  color: #171717;
  background: #f5f5f5;
  -webkit-box-shadow: 0px 3px 20px rgba(51, 97, 248, 0.05);
          box-shadow: 0px 3px 20px rgba(51, 97, 248, 0.05);
  border-radius: 0 15px 15px 15px;
}

.user-message-content {
  -webkit-box-pack: end;
  -webkit-justify-content: flex-end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}

.user-message-content p {
  border-radius: 15px 0px 15px 15px;
  background: #007AFF;
}

@-webkit-keyframes writingdot {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  50% {
    -webkit-transform: translateY(-6px);
            transform: translateY(-6px);
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}

@keyframes writingdot {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  50% {
    -webkit-transform: translateY(-6px);
            transform: translateY(-6px);
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}

.form-group .form-single-item label {
  cursor: pointer;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.form-group .form-single-item input[type="file"] {
  display: none;
}

.form-group .form-attach,
.form-group .form-submit {
  width: 60px;
  color: #171717;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  text-align: center;
  z-index: 1;
  cursor: pointer;
}

.form-group .form-text {
  -webkit-box-flex: 8;
  -webkit-flex-grow: 8;
      -ms-flex-positive: 8;
          flex-grow: 8;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
}




.textarea {
  width: 80%;
  height: 80px;
  padding: 12px 20px;
  box-sizing: border-box;
  border: 4px solid #ccc;
  border-radius: 4px;
  background-color: #f8f8f8;
  font-size: 16px;
  resize: none;
}



.form-group .form-text textarea {
  background-color: #f7f7f7;
  resize: none;
  padding: 8px 15px;
  overflow-y: auto;
  width: 100%;
  font-size: 14px;
  border: 0;
  border-radius: 30px;
}

.chat-bottom-area {
  background-color: #fff;
  border-radius: 0px 0px 30px 30px;
  position: fixed;
  bottom: 0px;
  width: 100%;
  z-index: 2;
  left: 0;
  right: 0;
  padding: 10px 0px;
}

.chat-bottom-area .form-group {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}

.chat-bottom-area svg {
  fill: #007AFF;
  width: 15px;
  height: auto;
}

.billing-information-card {
  margin-bottom: 10px;
  border-radius: 20px 20px 20px 20px;
  background: #fff;
  -webkit-box-shadow: 0px -11px 16px rgba(61, 113, 255, 0.16);
          box-shadow: 0px -11px 16px rgba(61, 113, 255, 0.16);
        

}

.billing-information-title {
  display: block;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  padding: 15px 25px 0px;
}

.billing-information-lists {
  padding: 15px 25px 25px;
 
  margin-bottom: -35px; /* Space between rows of <li> items */
}

.billing-information-list {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin-bottom: 10px;
 
  
  

}




.billing-information-list:last-child {
  margin-bottom: 0;
}

.billing-information-edit-btn {
  width: 100%;
  display: block;
  margin-top: 10px;
}

.shipping-method-card {
  margin-bottom: 20px;
  border-radius: 20px 30px 20px 20px;
  background: #fff;
  -webkit-box-shadow: 0px -11px 16px rgba(61, 113, 255, 0.16);
          box-shadow: 0px -11px 16px rgba(61, 113, 255, 0.16);
}

.shipping-method-title {
  display: block;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.1;
  padding: 0px 10px 0px;
}

.shipping-method-lists {
  padding: 15px 25px 25px;
}

.shipping-method-list {
  display: block;
  position: relative;
}

.shipping-method-list input[type="radio"] {
  position: absolute;
  visibility: hidden;
}

.shipping-method-list label {
  display: block;
  position: relative;
  padding: 8px 0px 8px 30px;
  z-index: 9;
  cursor: pointer;
  font-size: 14px;
}

.shipping-method-list .check {
  display: block;
  position: absolute;
  border: 2px solid #FF375F;
  border-radius: 100%;
  height: 16px;
  width: 16px;
  top: 50%;
  margin-top: -10px;
  left: 0px;
  z-index: 5;
  -webkit-transition: all 0.25s linear;
  -o-transition: all 0.25s linear;
  transition: all 0.25s linear;
}

.shipping-method-list .check::before {
  display: block;
  position: absolute;
  content: "";
  border-radius: 100%;
  height: 6px;
  width: 6px;
  top: 50%;
  left: 50%;
  margin: -3px;
  -webkit-transition: background 0.25s linear;
  -o-transition: background 0.25s linear;
  transition: background 0.25s linear;
}

.shipping-method-list input[type="radio"]:checked ~ .check::before {
  background: #FF375F;
}

.shipping-method-list span i {
  margin-right: 5px;
}

.shipping-method-edit-btn {
  width: 100%;
  display: block;
}

.payment-card {
  border-top: 10px solid #ececec;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding: 15px;
}

.payment-card .total-price {
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
}

.contact-image {
  margin-bottom: 50px;
}

.contact-image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
box-shadow: rgba(0, 0, 0, 0.30) 0px -40px 36px -28px inset;

}

/*----------------------------------------*/
/*  02. Header
/*----------------------------------------*/
.header-top-area {
  margin-top: 10px;

   
}

.header-top-area .event-list {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}

.header-top-area .event-list .list-child {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  gap: 25px;
  -webkit-box-pack: end;
  -webkit-justify-content: flex-end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}

.header-top-area .event-list .list-child .list-item .notch-bg {
  position: relative;
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  top: 7px;
  left: 0;
  z-index: 1;
text-align: center;
font-size: 16px; 
font-weight: bold;
}

.header-top-area .event-list .list-child .list-item .notch-bg--sunset-orange {
  background: #FF5050;
}

.header-top-area .event-list .list-child .list-item .notch-bg--emerald {
  background: #35E86A;
}

.header-top-area .event-list .btn {
  font-size: 16px;
}

.header-top-area .event-list .btn img {
  border-radius: 50%;
}

.header-top-area .main-menu {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.header-top-area .main-menu .menu-line {
  height: 2px;
  width: 18px;
  background: #FF375F;
  display: block;
}

.header-top-area .main-menu .menu-line:not(:first-child) {
  margin-top: 4px;
}

.header-top-area--style-1 .event-list > .list-item {
  width: 33.333%;
}

.header-top-area--style-2 .event-list {
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  gap: 20px;
}

.header-top-area--style-2 .event-list .searchable {
  margin-left: 0;
  margin-right: 0;
}

.header-top-area--style-2 .event-list .list-item {
  width: auto;
}

.header-top-area--style-2 .event-list .list-item:nth-child(2) {
  width: 100%;
}

.header-top-area--style-2 .event-list .list-item ~ .search-box {
  width: 100%;
}

.header-top-area--style-2 .event-list .list-item .search-box {
  width: 100%;
}

.header-top-area--style-3 .event-list {
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 20px;
}

.header-top-area--style-3 .list-item {
  width: auto;
}

.header-top-area--style-3 .list-item:nth-child(2) {
  width: 100%;
}

/*----------------------------------------*/
/*  16. Footer
/*----------------------------------------*/
.footer-section {
  padding-top: 120px;
}

/*****************************
* Layout - Offcanvas
*****************************/
.offcanvas {
  z-index: 99999;
  position: fixed;
  top: 0;
  overflow: auto;
  height: 100%;
  padding: 20px;
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  -webkit-transform: translateX(100%);
      -ms-transform: translateX(100%);
          transform: translateX(100%);
  -webkit-box-shadow: none;
          box-shadow: none;
  background: #f7f7f7;
  width: 100%;
  overflow-x: hidden;
}

.offcanvas-leftside {
  left: 0%;
  -webkit-transform: translateX(-100%);
      -ms-transform: translateX(-100%);
          transform: translateX(-100%);
}

.offcanvas-rightside {
  right: 0%;
  -webkit-transform: translateX(100%);
      -ms-transform: translateX(100%);
          transform: translateX(100%);
}

.offcanvas.offcanvas-open {
  -webkit-transform: translateX(0);
      -ms-transform: translateX(0);
          transform: translateX(0);
}

.offcanvas-overlay {
  position: fixed;
  z-index: 9999;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: none;
  background-color: rgba(0, 0, 0, 0.5);
}

.offcanvas-header {
  margin-bottom: 30px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
          
}




.offcanvas-close {
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  border: none;
  cursor: pointer;
  width: 35px;
  height: 35px;
  background: #fff;
  border-radius: 50px;
  -webkit-box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.05);
          box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.05);
}

.offcanvas-title {
  margin-bottom: 40px;
}

.offcanvas-modify {
  position: relative;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}

.offcanvas-modify span {
  font-size: 18px;
  font-weight: 500;
  line-height: 1.5;
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%);
}

.filter-back-btn {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}

/*Mobile Menu Bottom Area*/
.offcanvas-menu {
  margin: 20px 0;
}

.offcanvas-menu li {
  position: relative;
  padding: 7px 0px;
}

.offcanvas-menu > ul > li {
  border-bottom: 1px solid transparent;
}

.offcanvas-menu > ul > li:last-child {
  border-bottom: none;
}

.offcanvas-menu li a {
  display: block;
  text-decoration: none;
  text-transform: uppercase;
}

.offcanvas-menu li .mobile-sub-menu {
  display: none;
}

.offcanvas-menu-expand::before,
.offcanvas-menu-expand::after {
  position: absolute;
  top: 17px;
  right: 0px;
  z-index: 10;
  height: 1px;
  width: 15px;
  opacity: 1;
  background-color: #FF375F;
  -webkit-transition-property: all;
  -o-transition-property: all;
  transition-property: all;
  -webkit-transition-duration: 500ms;
       -o-transition-duration: 500ms;
          transition-duration: 500ms;
  -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
       -o-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
          transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  content: "";
}

.offcanvas-menu-expand::after {
  -webkit-transform: rotate(90deg);
      -ms-transform: rotate(90deg);
          transform: rotate(90deg);
}

.offcanvas-menu .active > .offcanvas-menu-expand:last-child,
.sub-menu > .active .offcanvas-menu-expand:last-child {
  border-bottom: 1px solid #2f3239;
}

.offcanvas-menu .active > .offcanvas-menu-expand::after,
.sub-menu > .active .offcanvas-menu-expand::after {
  -webkit-transform: rotate(0deg);
      -ms-transform: rotate(0deg);
          transform: rotate(0deg);
}

/*Mobile Menu Contact Info*/
.mobile-contact-info .logo {
  margin: 0 auto;
  width: 100px;
}

.mobile-contact-info .logo img {
  width: 100%;
  height: auto;
}

.mobile-contact-info .address {
  margin-top: 30px;
}

.mobile-contact-info .address span {
  display: block;
}

.mobile-contact-info .social-link li {
  display: inline-block;
  margin-right: 20px;
}

.mobile-contact-info .social-link li:last-child {
  margin-right: 0;
}

.mobile-contact-info .social-link li a {
  display: block;
  text-align: center;
  width: 40px;
  height: 40px;
  line-height: 40px;
  border-radius: 50%;
  background: #2f3239;
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  font-size: 16px;
}

.mobile-contact-info .social-link li a:hover {
  color: #2f3239;
}

.mobile-contact-info .user-link {
  margin-top: 40px;
}

.mobile-contact-info .user-link li {
  display: inline-block;
  margin-right: 15px;
}

.mobile-contact-info .user-link li:last-child {
  margin-right: 0;
}

.mobile-sub-menu a {
  padding-left: 10px;
  font-size: 12px;
}














/*-----------loader --------*/



		


/* Absolute Center Spinner */
	#loader   {
  position: fixed;
  z-index: 9999999;
  height: 2em;
  width: 2em;
  overflow: show;
  margin: auto;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

/* Transparent Overlay */
	#loader:before {
  content: '';
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;



    background: radial-gradient(rgba(20, 20, 20,.8), rgba(0, 0, 0, .8));

  background: -webkit-radial-gradient(rgba(20, 20, 20,.8), rgba(0, 0, 0,.8));
}

/* :not(:required) hides these rules from IE9 and below */
.loading:not(:required) {
  /* hide "loading..." text */
  font: 0/0 a;
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
}

	#loader:not(:required):after {
  content: '';
  display: block;
  font-size: 10px;
  width: 1em;
  height: 1em;
  margin-top: -0.5em;
  animation: spin 1s linear infinite; 
  border-radius: 0.5em;
  -webkit-box-shadow: rgba(255,255,255, 0.75) 1.5em 0 0 0, rgba(255,255,255, 0.75) 1.1em 1.1em 0 0, rgba(255,255,255, 0.75) 0 1.5em 0 0, rgba(255,255,255, 0.75) -1.1em 1.1em 0 0, rgba(255,255,255, 0.75) -1.5em 0 0 0, rgba(255,255,255, 0.75) -1.1em -1.1em 0 0, rgba(255,255,255, 0.75) 0 -1.5em 0 0, rgba(255,255,255, 0.75) 1.1em -1.1em 0 0;
box-shadow: rgba(255,255,255, 0.75) 1.5em 0 0 0, rgba(255,255,255, 0.75) 1.1em 1.1em 0 0, rgba(255,255,255, 0.75) 0 1.5em 0 0, rgba(255,255,255, 0.75) -1.1em 1.1em 0 0, rgba(255,255,255, 0.75) -1.5em 0 0 0, rgba(255,255,255, 0.75) -1.1em -1.1em 0 0, rgba(255,255,255, 0.75) 0 -1.5em 0 0, rgba(255,255,255, 0.75) 1.1em -1.1em 0 0;
}

@keyframes spin { 
			100% { 
				transform: rotate(360deg); 
			} 
		} 


		
		
		
/* Style for the loader at the bottom */
#loader-bottom {
  position: fixed;
  bottom: 55px;  /* Adjust the distance from the bottom */
  left: 50%;  /* Center horizontally */
  transform: translateX(-50%);  /* Offset the left positioning by 50% of the element's width to center */
  
  background: rgba(0, 0, 0, 0.5);  /* Semi-transparent background */
  color: white;
  text-align: center;
  padding: 1px;
  font-size: 16px;
  display: none;  /* Initially hidden */
  z-index: 9999;
  border-radius: 50% ; /* Optional: Add rounded corners to the loader */
}

#loader-bottom img {
  width: 50px;  /* Set the desired size of the loader GIF */
  height: auto;  /* Maintain aspect ratio */
}
		
		
		/*-----------stall loader js wala css --------*/
		
		
#loading, #empty-cart, #trueModal {
  opacity: 9;
  background-color: #DFE3EA;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  position: fixed;
  z-index: 99990;
  visibility: visible;
  overflow: auto; /* Enable scroll if needed */

}



.header {
  background-color: #DFE3EA;
  border-radius: 0px 0px 0px 0px;
  position: fixed;
  top: 0px;
  width: 100%;
  z-index: 2;
  left: 0;
  right: 0;
  padding: 10px 15px;
}





.cart-inner {
  touch-action: pan-y;  /* Allow vertical scrolling */
  background-color: #DFE3EA;
  border-radius: 0px;
  position: fixed;
  width: 100%;
  z-index: 1;
  left: 0;
  right: 0;
  padding: 0px 15px;
  height: 78vh;  /* More height for stronger scrolling effect */
  overflow-y: scroll;  /* Always show the scrollbar */
}











				/*-----------done svg icon --------*/
        .tick {
          stroke-dasharray: 40;
          stroke-dashoffset: 40;
          transition: stroke-dashoffset 0.5s ease;
      }
      
      #greenTick:hover .tick {
          stroke-dashoffset: 0;
      }


.messagebox {
	
 background-color:0;
  border-radius: 9px;
  height:33%;
  width:60%;
  
    left:20%;
    top:20%;

  text-align:center;
}




@supports (animation: grow .5s cubic-bezier(.25, .25, .25, 1) forwards) {
     .tick {
        stroke-opacity: 0;
        stroke-dasharray: 29px;
        stroke-dashoffset: 29px;
        animation: draw .5s cubic-bezier(.25, .25, .25, 1) forwards;
        animation-delay: .6s
    }

    .circle {
	     
        fill-opacity: 0;
        stroke: #219a00;
        stroke-width: 16px;
        transform-origin: center;
        transform: scale(0);
        animation: grow 1s cubic-bezier(.25, .25, .25, 1.25) forwards;   
    }   
}

@keyframes grow {
    60% {
        transform: scale(.8);
        stroke-width: 4px;
        fill-opacity: 0;
    }
    100% {
        transform: scale(.9);
        stroke-width: 8px;
        fill-opacity: 1;
        fill: #219a00;
    }
}

@keyframes draw {
    0%, 100% { stroke-opacity: 1; }
    100% { stroke-dashoffset: 0; }
}


				/*----------- end done svg icon --------*/
				
				
				
				/*-----------start  step form --------*/
.step-number {
  background-color: #E8E8E8;
  border-radius: 30px 0px 30px 0px;
  position: fixed;
  top: 0px;
  color: green;
  z-index: 3;
  right: 0;
  padding: 10px 15px;
  }



#myimg,#s_IMG{
	
	width:300px;
	height: 200px;

	
}


   /* Hide the default date picker icon in most browsers */
        input[type="date"]::-webkit-calendar-picker-indicator {
            display: none;
        }

        input[type="date"] {
            -webkit-appearance: none; /* For WebKit-based browsers */
            -moz-appearance: none;    /* For Firefox */
            appearance: none;         /* For other browsers */
            padding-right: 30px;      /* Add some padding for the right side (space for custom icon or to remove space) */
            background-color: #0011fc;
        }

        /* Optionally, add some custom styling to the input */
        input[type="date"] {
            padding: 8px;
            border: 1px solid #ccc;
            border-radius: 50px;
            border-color: #8f0707;   /* Light blue border on focus */

        }









/* Style your form elements here */
  .step {
            display: none;
        }
        .active {
            display: block;
        }

.input-container {
    margin-bottom: 15px;
}

.validation-message {
    color: red;
    font-size: 14px;
    margin-bottom: 10px;
    padding-left: 75px;
   animation: horizontal-shaking 1.95s infinite;
}
  	#uploadLoad,#upProgress {
    color: green;

    }

								/*-----------end  step form --------*/
				
				
                .pac-container:after{
                  content:none !important;
              }
				
              .white-text {
                color: #F5F8FC;
            }
            
				
	.offer-ended {
    color: red;
    font-weight: bold;
    margin-top: 10px;
}

.ended {
    opacity: 0.5; /* Dim the product details */
    pointer-events: none; /* Disable interactions */
}
				
				
				
.single-form-item-clock {
  text-align: center; /* Center the content */
  margin-top: 20px; /* Space above the clock and input */
}

.clock {
  position: relative;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: #222;
  border: 10px solid #f47321; /* Color for the clock border */
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.7), 0 0 30px rgba(0, 0, 0, 0.5); /* Shadow effect */
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  overflow: hidden;
  margin: 0 auto; /* Center the clock horizontally */
  margin-bottom: 10px; /* Space between clock and input */
}

.hand {
  position: absolute;
  background: #f47321; /* Color for the clock hand */
  width: 6px;
  height: 80px;
  bottom: 50%;
  left: 50%;
  transform-origin: bottom center;
  transform: rotate(0deg);
  transition: transform 0.5s ease;
}

.value-display {
  position: absolute;
  font-size: 24px;
  font-weight: bold;
  color: #fff; /* Set text color to white */
  z-index: 2;
}

.label-clock {
  text-align: center;
  margin-top: 10px;
  font-weight: bold;
  color: #fff; /* Set text color to white */
}

/* Input field style */
.time-input {
  width: 200px; /* Width of the input */
  height: 40px; /* Height of the input */
  border: 10px solid #f47321; /* Color for the input border */
  text-align: center; /* Center the text */
  font-size: 24px; /* Font size */
  background: #444; /* Dark background for the input */
  color: #fff; /* White text color */
  border-radius: 20px; /* Rounded corners for oval shape */
  z-index: 3; /* Above the clock hand */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); /* Shadow for the input */
  display: block; /* Block display to center */
  margin: 10px auto; /* Center the input and add space above */
}		
				

.status-message {
  font-weight: bold;
 

  color: green;
  font-size: 12px !important; /* Ensure the size is applied */
  text-transform: uppercase; /* Convert text to uppercase */
  background-image: linear-gradient(
      -225deg,
      #231557 0%,
      #44107a 29%,
      #ff1361 67%,
      #fff800 100%
  );
  background-size: 200% auto; /* Adjust the background size for animation */
  color: transparent; /* Make text color transparent for gradient effect */
  background-clip: text; /* Clip the background to the text */
  -webkit-background-clip: text; /* For Safari compatibility */
  animation: textclip 2s linear infinite; /* Apply animation */
  display: inline-block; /* Required for background clipping */
  margin: 0 auto; /* Center the element */
}

@keyframes textclip {
  0% {
      background-position: 0% center; /* Start position */
  }
  100% {
      background-position: 200% center; /* End position */
    
  }
}

/* Container that holds the rotating item */
.container-grocery {
  width: 130px; /* Smaller container */
  height: 150px;
  border: 1px solid;
  perspective: 400px;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Rotating item */
.item-grocery {
  position: relative;
  left: 4px;
  top: 10px;
  padding: 4px;
  width: 100px;
  height: 90px;
  transform-style: preserve-3d;
  transform-origin: 50% 50%;
  animation: rotateGroceryItem 8s linear alternate infinite;
  animation-play-state: running;
}

.item-grocery:hover {
  animation-play-state: paused;
}

@keyframes rotateGroceryItem {
  0% { transform: rotate3d(1, 0, 0, 60deg) rotate(-20deg); }
  100% { transform: rotate3d(1, 0, 0, 60deg) rotate(20deg); }
}
/* Base grocery silver plate */
.base-grocery {
  position: absolute;
  box-sizing: border-box;
  width: 95px;
  height: 90px;
  border-radius: 50%;
  background: radial-gradient(circle at center, 
              #e6e6e6 0%, 
              #c0c0c0 40%, 
              #faf9f9 70%, 
              #f7f5f5 100%);
  border: 2px solid #b0b0b0;
  box-shadow: 
    inset 2px 2px 5px rgba(253, 251, 251, 0.1),       /* Lighter inner shadow */
    inset -2px -2px 5px rgba(255, 255, 255, 0.2), /* Softer inner highlight */
    0 6px 15px rgba(0, 0, 0, 0.25);              /* Outer shadow */
  transform-style: preserve-3d;
  background-size: cover;
}

/* Decorative rings */
.base-grocery::before,
.base-grocery::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.base-grocery::before {
  top: -8px;
  left: -8px;
  right: -8px;
  bottom: -8px;
  border: 2px dotted #dcdcdc;
  z-index: 1;
  box-shadow:
    inset 2px 2px 6px rgba(255, 255, 255, 0.4), /* Soft inner highlight */
    inset -2px -2px 8px rgba(0, 0, 0, 0.3),    /* Darker inner shadow */
    0 8px 25px rgba(0, 0, 0, 0.3),             /* Stronger outer shadow */
    0 12px 40px rgba(100, 100, 100, 0.2),      /* Outer glow-like shadow */
    0 4px 8px rgba(0, 0, 0, 0.4);              /* Crisp shadow */
}

.base-grocery::after {
  top: -14px;
  left: -14px;
  right: -14px;
  bottom: -14px;
  border: 2px double #d6d6d6;
  border-radius: 50%;
  z-index: 0;

  box-shadow:
    inset 2px 2px 6px rgba(255, 255, 255, 0.4),  /* Soft inner highlight */
    inset -2px -2px 8px rgba(0, 0, 0, 0.3),     /* Darker inner shadow */
    0 8px 30px rgba(0, 0, 0, 0.35),             /* Stronger outer shadow */
    0 12px 45px rgba(100, 100, 100, 0.2),       /* Outer glow-like shadow */
    0 4px 10px rgba(0, 0, 0, 0.5);              /* Crisp shadow */
}


/* Wall elements */
.walls-grocery {
  position: absolute;
  width: 80px;
  height: 100px;
  border: 1px solid;
  transform-origin: bottom;
  transform-style: preserve-3d;
  border-top-left-radius: 20px;
  border-bottom-right-radius: 10px;
}

/* Top text */
.wall-text {
  position: relative;
  left: 8px;
  background-color: #29180f8c;
  width: 70px;
  height: 45px;
  transform-origin: center bottom;
  transform: rotateX(-60deg) translateZ(30px) translateX(1px) translateY(15px);
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 3px;
  color: #fff;
  font-size: 9px;
  font-weight: bold;
  overflow: hidden;
  white-space: normal;
  line-height: 1.1;
  flex-wrap: wrap;
}

/* Animated back wall */
.wall-animation {
  position: absolute;
  top: 0;
  background: #ffffbb;
  width: 70px;
  height: 100px;
  transform-origin: center bottom;
  transform: rotateX(-90deg) translateZ(-50px) translateX(10px) translateY(-1px);
  animation: wallBackgroundAnimation 4s linear alternate infinite;

  box-shadow: 
    0 10px 30px rgba(216, 60, 60, 0.9),
    0 5px 12px rgba(77, 72, 31, 0.3),
    0 2px 5px rgba(0, 0, 0, 0.2);
}

@keyframes wallBackgroundAnimation {
  0%, 59.99% { background: #ffffbb; }
  60%, 100% { background: #ffbb55; }
}

/* Buy button */
.buy-btn {
  display: none;
  position: relative;
  top: 2px;
  left: 50%;
  background-color: #4CAF50;
  color: white;
  padding: 3px 6px;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  font-size: 9px;
  z-index: 10;
  transform: rotateX(-90deg) translateZ(60px) translateX(0px) translateY(-50px);
}

.item-grocery:hover .buy-btn {
  display: block;
}


/* Product container style */
#product-container-grocery {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 3px; /* Reduced gap */
  margin: 0;
  padding: 0;
  border-radius: 110px; /* More rounded corners */
  background-color: #fff;
  animation: gradientShift 6s ease-in-out infinite;
 
}


@keyframes gradientShift {
  0% {
    background-image: radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.6) 15%, rgba(204, 226, 255, 0.5) 30%),
                      radial-gradient(circle at 80% 80%, rgba(204, 255, 255, 0.6) 15%, rgba(186, 230, 255, 0.4) 30%);
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.6), 
                0 0 16px rgba(255, 255, 255, 0.4), /* Light glow for snowfall */
                0 0 24px rgba(255, 255, 255, 0.5), /* Adding additional shadows to simulate snow */
                0 0 32px rgba(255, 255, 255, 0.3); /* Soft and deep shadow */
    opacity: 0.9;
  }

  50% {
    background-image: radial-gradient(circle at 15% 15%, rgba(204, 226, 255, 1) 12%, rgba(186, 230, 255, 0.4) 25%),
                      radial-gradient(circle at 85% 70%, rgba(255, 255, 255, 1) 12%, rgba(204, 255, 255, 0.5) 25%);
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.7),
                0 0 24px rgba(255, 255, 255, 0.5), /* Stronger glow */
                0 0 36px rgba(255, 255, 255, 0.6), /* More depth to simulate snowflakes */
                0 0 48px rgba(255, 255, 255, 0.3); /* Deeper shadow for a more intense snow effect */
    opacity: 0.85;
  }

  100% {
    background-image: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.8) 20%, rgba(204, 255, 255, 0.5) 35%),
                      radial-gradient(circle at 75% 25%, rgba(186, 230, 255, 0.8) 18%, rgba(204, 226, 255, 0.3) 40%);
    box-shadow: 0 0 16px rgba(255, 255, 255, 0.8),
                0 0 32px rgba(255, 255, 255, 0.6), /* Soft glow with more intensity */
                0 0 48px rgba(255, 255, 255, 0.7), /* Adding a larger snowfall effect */
                0 0 64px rgba(255, 255, 255, 0.4); /* Heavy snowfall with soft shadows */
    opacity: 0.8;
  }
}




/* Individual product card */
.product-card-grocery {
  margin: 2px; /* Slightly adjusted margin */
  margin-bottom: 12px; /* Reduced bottom margin */
  padding: 0;
  box-sizing: border-box;
}

.wall-text h3, .wall-text p {
  margin: 0;
  padding: 0;
  width: 100%;
  overflow: hidden;
  word-wrap: break-word;
}

/* all grocery page        css  */

/* all grocery page        css  */
/* all grocery page        css  */
/* Container that holds the rotating item */
.container-new {
  width: 100px; /* Further reduced width */
  height: 120px; /* Further reduced height */
  border: 1px solid;
  perspective: 480px;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Rotating item */
.item-new {
  position: relative;
  left: 2px; /* Reduced left offset */
  top: 7px; /* Reduced top offset */
  padding: 3px; /* Further reduced padding */
  width: 80px; /* Further reduced width */
  height: 75px; /* Further reduced height */
  transform-style: preserve-3d;
  transform-origin: 50% 50%;
  animation: rotateNewItem 2s linear alternate infinite;
  animation-play-state: running;
}

/* Pause the rotation on hover without resetting */
.item-new:hover {
  animation-play-state: paused;
}

/* Keyframes for the rotation animation */
@keyframes rotateNewItem {
  0% { 
      transform: rotate3d(1, 0, 0, 60deg) rotate(0deg); 
  }
  100% { 
      transform: rotate3d(1, 0, 0, 60deg) rotate(0deg); 
  }
}

/* Base circle style */
.base-new {
  position: absolute;
  box-sizing: border-box;
  width: 100px; /* Further reduced width */
  height: 85px; /* Further reduced height */
  background-image: 
      linear-gradient(45deg, #000000 25%, #062b09 25%, #e9c9b1 75%, #000000 75%, #000000),
      linear-gradient(-45deg, #000000 25%, #e9c9b1 25%, #e9c9b1 75%, #000000 75%, #000000);
  background-size: 6px 6px; /* Further reduced grid size */
  border-radius: 5%;
  border: 2px solid #2c2d33;
  transform-style: preserve-3d;
  box-shadow: 0 6px 15px rgba(175, 194, 4, 0.747), /* Soft shadow below */
              0 2px 5px rgba(0, 0, 0, 0.3);  /* Slight shadow around the edges */
}

/* Wall elements for design */
.walls-new {
  position: absolute;
  width: 95px; /* Further reduced width */
  height: 105px; /* Further reduced height */
  border: 1px solid;
  transform-origin: bottom;
  transform-style: preserve-3d;
}

/* Style for the top text container */
.wall-text-new {
  position: relative;
  box-sizing: border-box;
  left: 6px; /* Reduced left offset */
  background-color: #29180f8c;
  width: 75px; /* Further reduced width */
  height: 50px; /* Further reduced height */
  transform-origin: center bottom;
  transform: rotateX(-60deg) translateZ(50px) translateX(2px) translateY(10px);
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 1px; /* Reduced padding */
  color: rgb(250, 249, 249);
  font-size: 8px; /* Further reduced font size */
  font-weight: bold;
  overflow: hidden;
  white-space: normal;
  line-height: 1.1;
  flex-wrap: wrap;
}

/* Keyframes for background animation */
.wall-animation-new {
  position: absolute;
  top: 0;
  background: #ffffbb;
  width: 80px; /* Further reduced width */
  height: 105px; /* Further reduced height */
  transform-origin: center bottom;
  transform: rotateX(-90deg) translateZ(-50px) translateX(7px) translateY(-2px);
  animation: wallBackgroundAnimationNew 4s linear alternate infinite;
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.5), /* Soft shadow below */
              0 2px 5px rgba(0, 0, 0, 0.3);  /* Slight shadow around the edges */
}

@keyframes wallBackgroundAnimationNew {
  0%, 59.99% { background: #ffffbb; }
  60%, 100% { background: #ffbb55; }
}

/* Button style */
.buy-btn-new {
  display: none;
  position: relative;
  top: 0px; /* Further reduced top offset */
  left: 50%;
  background-color: #4CAF50;
  color: white;
  padding: 3px 6px; /* Further reduced padding */
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 8px; /* Further reduced font size */
  z-index: 10;
  transform: rotateX(-90deg) translateZ(100px) translateX(2px) translateY(-50px);
}

/* Show button on hover */
.item-new:hover .buy-btn-new {
  display: block;
}

/* Product container style */
#product-container-new {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 1px; /* Reduced gap */
  margin: 0;
  padding: 0;
}

/* Individual product card style */
.product-card-new {
  margin: 1px; /* Reduced margin */
  margin-bottom: 35px; /* Reduced bottom margin */
  padding: 10px;
  box-sizing: border-box;
}

.wall-text-new h3, .wall-text-new p {
  margin: 0;
  padding: 0;
  width: 100%;
  overflow: hidden;
  word-wrap: break-word;
}






/* Container for the product cards */
.container-restaurant {
  width: 80px; /* Further reduced width */
  height: 100px; /* Further reduced height */
  border: 1px solid;
  perspective: 480px;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Rotating item */
.item-restaurant {
  position: relative;
  left: 0px; /* Reduced left offset */
  top: 3px; /* Reduced top offset */
  padding: 1px; /* Further reduced padding */
  width: 60px; /* Further reduced width */
  height: 55px; /* Further reduced height */
  transform-style: preserve-3d;
  transform-origin: 50% 50%;
  animation: rotateRestaurantItem 2s linear alternate infinite;
  animation-play-state: running;
}

/* Pause the rotation on hover without resetting */
.item-restaurant:hover {
  animation-play-state: paused;
}

/* Keyframes for the rotation animation */
@keyframes rotateRestaurantItem {
  0% { 
      transform: rotate3d(1, 0, 0, 60deg) rotate(0deg); 
  }
  100% { 
      transform: rotate3d(1, 0, 0, 60deg) rotate(0deg); 
  }
}

/* Base circle style */
.base-restaurant {
  position: absolute;
  box-sizing: border-box;
  width: 90px; /* Further reduced width */
  height: 75px; /* Further reduced height */
  background-image: 
  linear-gradient(45deg, #f5e1a4 25%, #f9e7b4 25%, #f9e7b4 75%, #f5e1a4 75%, #f5e1a4),
  linear-gradient(-45deg, #f5e1a4 25%, #f9e7b4 25%, #f9e7b4 75%, #f5e1a4 75%, #f5e1a4);

  background-size: 8px 16px; /* Reduced grid size */
  transform-style: preserve-3d;
 
  animation: rotate-background-restaurant 5s infinite linear;
}

/* Optional animation for added movement */
@keyframes rotate-background-restaurant {
  0% { background-position: 0 0; }
  100% { background-position: 100% 100%; }
}

/* Wall elements for design */
.walls-restaurant {
  position: absolute;
  width: 75px; /* Further reduced width */
  height: 85px; /* Further reduced height */
  transform-origin: bottom;
  transform-style: preserve-3d;
}

/* Keyframes for background animation */
.wall-animation-restaurant {
  position: absolute;
  top: 0;
  border-radius: 4%; /* Slightly more rounded edges */
  width: 75px; /* Further reduced width */
  height: 85px; /* Further reduced height */
  transform-origin: center bottom;
  transform: rotateX(-90deg) translateZ(-30px) translateX(4px) translateY(-1px) perspective(600px) rotateX(70deg);
}




/* ========== Buy Button ========== */
.buy-btn-restaurant {
  display: none; /* Hidden by default */
  position: absolute;
  bottom: 110px;
  left: 40%;
  transform: translateX(-50%);
 

  width: 200px;        /* fixed width */
  height: 110px;        /* auto height for multiline */
  padding: 4px 8px;
  font-weight: bold;

  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 12px;
  z-index: 10;
  transition: all 0.3s ease;

  box-sizing: border-box;
  white-space: normal;
  overflow-wrap: break-word;
  text-align: left;
 
  /* overflow: hidden;  remove this to avoid clipping */
}

.item-restaurant:hover .buy-btn-restaurant {
  display: block;
  animation: pulse 0.6s infinite alternate;
  position: absolute;
   text-align: center;
   

}

/* Pseudo elements adjustments */
.buy-btn-restaurant:before,
.buy-btn-restaurant:after {
  box-sizing: border-box;
}





.buy-btn-restaurant:hover {
  transform: translateX(-50%) scale(1.05);
   
}

/* Pulse animation on hover */
@keyframes pulse {
  from { transform: scale(1); }
  to { transform: scale(1.1); }
}

/* Button decorative pseudo-elements */
.buy-btn-restaurant:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 90%;
  width: 100%;
  border-top: 1px solid #F5F8FC;
  border-bottom: 2px solid #000000;
  border-left: 5px solid #f1ce069f;
  border-radius: 62px;
  clip-path: polygon(0% 105%, 0% 0%, 105% 0%, 105% 105%, 43px 105%, 43px 80%, 21px 80%, 21px 105%);
  box-sizing: border-box;
  transition: transform 0.3s ease;
  z-index: -1;
   
}

.buy-btn-restaurant:hover:before {
  transform: scale(1.05);
}

.buy-btn-restaurant:after {
  content: "";
  position: absolute;
  width: 25px;
  height: 30px;
  background: #000000;
  border: 8px solid #580202;
  top: calc(90% - 1px);
  left: 20px;
  clip-path: polygon(0 0, 0% 100%, 100% 0%, calc(100% - 2px) 0, 1px calc(100% - 2px), 1px 0);
  transition: transform 0.3s ease;
  z-index: -1;
}

.buy-btn-restaurant:hover:after {
  transform: translateY(-5px);
}







/* Product container style */
#product-container-restaurant {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 0.px; /* Further reduced gap */
  margin-left: -10px;
  padding: 0;
  left: 0%;
}

/* Individual product card style */
.product-card-restaurant {
  margin: 5px; /* Further reduced margin */
  margin-bottom: 22px; /* Further reduced bottom margin */
  padding: 5px; /* Further reduced padding */
  box-sizing: border-box;
}

/* Wall text */
.wall-text-restaurant h3, .wall-text-restaurant p {
  margin: 0;
  padding: 0;
  width: 100%;
  overflow: hidden;
  word-wrap: break-word;
}










/* ========== Container for the product cards ========== */
.container-bakery {
  width: 70px;
  height: 90px;
  border: 1px solid;
  perspective: 480px;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* ========== Rotating item ========== */
.item-bakery {
  position: relative;
  left: 0px;
  top: 2px;
  padding: 0px;
  width: 50px;
  height: 55px;
  transform-style: preserve-3d;
  transform-origin: 50% 50%;
  animation: rotateBakeryItem 2s linear alternate infinite;
  animation-play-state: running;
}

.item-bakery:hover {
  animation-play-state: paused;
}

/* Rotation animation */
@keyframes rotateBakeryItem {
  0%, 100% {
    transform: rotate3d(1, 0, 0, 60deg) rotate(0deg);
  }
}

/* ========== Base (Bakery Item) ========== */
.base-bakery {
  position: absolute;
  box-sizing: border-box;
  width: 75px;
  height: 65px;
  background: radial-gradient(circle, rgba(238, 174, 174, 1) 0%, rgba(49, 150, 9, 1) 100%);
  background-size: 10px 5px;
  border-radius: 50%;
  border: 2px solid #2c2d33;
  animation: rotate-background-restaurant 5s infinite linear;
  transform-style: preserve-3d;
  box-shadow: 0 5px 10px rgba(175, 194, 4, 0.747),
              0 2px 5px rgba(0, 0, 0, 0.3);
}

/* Background animation */
@keyframes rotate-background-restaurant {
  0% { background-position: 0 0; }
  100% { background-position: 100% 100%; }
}

/* ========== Wall elements ========== */
.walls-bakery {
  position: absolute;
  width: 65px;
  height: 95px;
  transform-origin: bottom;
  transform-style: preserve-3d;
}

.wall-animation-bakery {
  position: absolute;
  top: 0;
  width: 65px;
  height: 125px;
  border-radius: 4%;
  transform-origin: center bottom;
  transform: rotateX(-90deg) translateZ(-20px) translateX(4px) translateY(-1px)
             perspective(600px) rotateX(70deg);
}

/* ========== Buy Button ========== */
.buy-btn-bakery {
  display: none; /* Hidden by default */
  position: absolute;
  bottom: 85px;
  left: 40%;
  transform: translateX(-50%);
  
  width: 200px;        /* fixed width */
  bottom: 110px;      /* auto height for multiline */
  padding: 4px 8px;
  color: green;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 12px;
  z-index: 10;
  transition: all 0.3s ease;

  box-sizing: border-box;
  white-space: normal;
  overflow-wrap: break-word;
  text-align: left;
  line-height: 1.1;
  /* overflow: hidden;  remove this to avoid clipping */
}

.item-bakery:hover .buy-btn-bakery {
  display: block;
  animation: pulse 0.6s infinite alternate;
  position: absolute;
  text-align: center;
  
}

/* Pseudo elements adjustments */
.buy-btn-bakery:before,
.buy-btn-bakery:after {
  box-sizing: border-box;
}





.buy-btn-bakery:hover {
  transform: translateX(-50%) scale(1.05);
}

/* Pulse animation on hover */
@keyframes pulse {
  from { transform: scale(1); }
  to { transform: scale(1.1); }
}

/* Button decorative pseudo-elements */
.buy-btn-bakery:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 90%;
  width: 100%;
  border-top: 1px solid #F5F8FC;
  border-bottom: 2px solid #000000;
  border-left: 5px solid #f1ce069f;
  border-radius: 62px;
  clip-path: polygon(0% 105%, 0% 0%, 105% 0%, 105% 105%, 43px 105%, 43px 80%, 21px 80%, 21px 105%);
  box-sizing: border-box;
  transition: transform 0.3s ease;
  z-index: -1;
}

.buy-btn-bakery:hover:before {
  transform: scale(1.05);
}

.buy-btn-bakery:after {
  content: "";
  position: absolute;
  width: 25px;
  height: 30px;
  background: #000000;
  border: 8px solid #580202;
  top: calc(90% - 1px);
  left: 20px;
  clip-path: polygon(0 0, 0% 100%, 100% 0%, calc(100% - 2px) 0, 1px calc(100% - 2px), 1px 0);
  transition: transform 0.3s ease;
  z-index: -1;
}

.buy-btn-bakery:hover:after {
  transform: translateY(-5px);
}

/* ========== Product Container ========== */
#product-container-bakery {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 0px;
  margin-left: -8px;
  padding: 0;
  left: 0%;
}

/* ========== Individual Product Card ========== */
.product-card-bakery {
  margin: 3px;
  margin-bottom: 6px;
  padding: 10px;
  box-sizing: border-box;
}

/* ========== Wall text ========== */
.wall-text-bakery h3,
.wall-text-bakery p {
  margin: 0;
  padding: 0;
  width: 100%;
  overflow: hidden;
  word-wrap: break-word;
}




/* main index and all product card style */



#productsDeals1, #productsDeals2, #productsDeals3,
 #productsDeals4,#product-container-restaurant-index,#product-container-bakery-index, 
#all-products-container,#dealContainer1, #dealContainer2, #dealContainer3, #dealContainer4,#allProductsContainer,#bestSellers,#newArrivals,.bankdetails
 {
  display: flex;
  flex-wrap: wrap;
  gap: 10px; /* Space between product cards */
}

.product-card,.product-card-index,.product-container-bakery-index {
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  flex: 1 1 calc(50% - 10px); /* Adjusted to 50% for 2 items per row */
  max-width: 480px; /* Set max-width to 280px */
  position: relative;
  overflow: hidden;
  background-color: rgba(251, 252, 249, 0.062);
  display: flex;
  flex-direction: column; /* Stack elements vertically */
}











.product-image {
  height: 150px; /* Fixed height for uniformity */
  border-radius: 8px 8px 0 0;
  position: relative;
  overflow: hidden;
}

.product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Ensures the image covers the area without distortion */
  display: block; /* Ensures no extra space below the image */
}

.mrp-price, .discount-price {
  position: absolute;
  padding: 5px;
  color: white;
  z-index: 2;
}

.mrp-price {
  top: 0;
  left: 0;
  background-color: rgba(255, 0, 0, 0.151);
  border-radius: 8px 0 0 0;
  text-decoration: line-through;
}

.discount-price {
  top: 0;
  right: 0;

  background-color: rgba(255, 0, 0, 0.644);
  border-radius: 50px;
  
}

.product-name {
  position: absolute; /* Position absolute to overlay */
  bottom: 2px; /* Position from bottom */
  left: 0;
  font-size: 9px; /* Adjust font size */
  color: white; /* Change text color for visibility */
  text-align: center; /* Center align text */
  background-color: rgba(0, 0, 0, 0.26); /* Semi-transparent background for readability */
  margin: 0; /* Ensure no margin */
  padding: 2px; /* Padding for better spacing */
}
.price-container {
  padding: 5px; /* Reduced padding */
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0%;
}

.original-price {
  color: rgb(63, 6, 6);
  font-size: 0.875rem; /* Slightly larger font for better readability */
  background-color: rgba(251, 252, 249, 0.062);
  font-weight: bold; /* Make the font bold */
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); /* Add shadow */
  margin: 0; /* Ensure no margin */
  width: 45%; /* Set a fixed width */
  text-align: left; /* Align text to the left */
}
.original-price,.font-size {
  color: rgb(0, 0, 0);
  font-size: 10px; /* Slightly larger font for better readability */
 
}
.countdown-timer {
  font-weight: bold;
  color: rgb(0, 3, 1); /* Color for visibility */
  margin: 0; /* Ensure no margin */
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); /* Add shadow */
 border-radius: 15px;
  text-align: right; /* Align text to the right */
  align-items: center;
 color: red;
font-size: 9px;
}


.countdown-timer2 {
  font-weight: bold;
  color: green;
  margin: 5px 0;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  border-radius: 15px;
  text-align: left;
  font-size: 9px;
  line-height: 1.3;
  padding: 4px 6px;
}

.so-far-msg {
  font-size: 8px;
  color: rgb(121, 15, 15);
}

.location-info {
  font-size: 10px;
  color: #333;
  margin-top: 5px;
}

.distance-hint {
  font-size: 9px;
  color: #c00;
}





.msg-icn {
  display: inline-block;
  position: relative;
  padding: 5px 5px;
  color: #000;
  box-sizing: border-box;
  max-width: 300px;
  min-width: 80px;
  min-height: 38px;
  display: flex;
  border-radius: 100px; /* Optional, for rounded corners */
  transition: transform 0.3s ease; /* Smooth transition for animation */
}

.msg-icn:hover {
  animation: pulse 0.6s infinite alternate; /* Apply the pulse animation on hover */
}

@keyframes pulse {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.1);
  }
}

.msg-icn:before {
  content: "";
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  height: 90%;
  width: 100%;
  border-top: 1px solid #F5F8FC;
 
  border-bottom: 2px solid #000000;

  
  border-left: 5px solid #f1ce069f;
  border-radius: 62px;
  box-sizing: border-box;
  clip-path: polygon(0% 105%, 0% 0%, 105% 0%, 105% 105%, 43px 105%, 43px 80%, 21px 80%, 21px 105%);
  transition: transform 0.3s ease; /* Smooth transition for the :before element */
}

.msg-icn:hover:before {
  transform: scale(1.05); /* Slightly enlarge the background on hover */
}

.msg-icn:after {
  content: "";
  position: absolute;
  display: block;
  width: 25px;
  height: 30px;
  background: #000000;
  border: 8px solid #580202;
  top: calc(90% - 1px);
  left: 20px;
  box-sizing: border-box;
  clip-path: polygon(0 0, 0% 100%, 100% 0%, calc(100% - 2px) 0, 1px calc(100% - 2px), 1px 0);
  transition: transform 0.3s ease; /* Smooth transition for the :after element */
}

.msg-icn:hover:after {
  transform: translateY(-5px); /* Slight upward movement on hover */
}




.border {
  
  border-top: 1px solid #D6E1F0;      /* Light blue */
  border-bottom: 1px solid #FF5733;    /* Vibrant orange */
  border-left: 5px solid #8A2BE2;     /* Deep violet */
  border-radius: 62px;
  box-sizing: border-box;
  clip-path: polygon(0% 105%, 0% 0%, 105% 0%, 105% 105%, 80px 105%, 80px 75%, 40px 75%, 40px 105%);
}

/* Style for the container holding the dropdown */
.assimg-agent {
  width: 300px; /* Set the desired width for the container */
  border-top: 1px solid #D6E1F0; /* Light blue */
  border-bottom: 1px solid #FF5733; /* Vibrant orange */
  border-left: 5px solid #8A2BE2; /* Deep violet */
  border-radius: 15px; /* Slightly rounded corners for a softer look */
  box-sizing: border-box;
  margin-bottom: 20%;
  margin-left: -1%;
  position: absolute;
  background: #f0f0f0; /* Set background to light gray */
  z-index: 999;
  padding: 20px; /* Increase padding for a more spacious layout */
  animation: borderAnimation 5s ease-in-out infinite; /* Apply the animation */
  font-size: 12px; /* Slightly larger font size */
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Subtle shadow for depth */
  transition: all 0.3s ease; /* Smooth transition effect */
}

/* Hover effect for the container to add interactivity */
.assimg-agent:hover {
  transform: scale(1.05); /* Slightly scale up the container */
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.25); /* More prominent shadow on hover */
}

/* Styling for the dropdown itself */
.assimg-agent-dropdown {
  width: 150px; /* Make the dropdown smaller */
  padding: 8px; /* Adjust padding for better look */
  font-size: 12px; /* Set a smaller font size */
  border-radius: 5px;
  border: 1px solid #ccc; /* Border around the dropdown */
  background-color: #fff;
  color: #333;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  text-overflow: ellipsis; /* Adds ellipsis for long options */
  overflow: hidden; /* Hide overflowing text */
  margin-bottom: 15px;
  border-radius: 10%; /* Rounded corners for the dropdown */
  transition: background-color 0.3s ease; /* Smooth background transition */
}

/* Hover effect for the dropdown */
.assimg-agent-dropdown:hover {
  background-color: #f0f0f0; /* Light gray hover effect */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Slight shadow on hover */
}

/* Option styling */
.assimg-agent-dropdown option {
  width: 150px; /* This will match the width of the select */
  white-space: nowrap; /* Prevent the text from wrapping */
  overflow: hidden; /* Hide overflow text */
  text-overflow: ellipsis; /* Add ellipsis for overflowing text */
  border-radius: 10%;
  padding: 5px; /* Add padding for better spacing */
  background-color: #fff; /* Ensure options have a white background */
  color: #333;
}

/* Hover effect for options */
.assimg-agent-dropdown option:hover {
  background-color: #e9e9e9; /* Light gray hover effect for options */
  color: #000; /* Change text color on hover for better contrast */
}



.phone-auth-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(4px);
  z-index: 999999998;
  -webkit-overflow-scrolling: touch;
}

.phone-auth-modal {
  position: fixed;
  bottom: 35%;
  left: 50%;
  transform: translateX(-50%) translateY(100%);
  width: 95vw;
  max-width: 360px;
  max-height: 70vh;
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
  padding: 20px 18px 18px;
  overflow-y: auto;
transition: top 0.25s ease;
  opacity: 0;
  z-index: 99999999;
  outline: none;
  border-top: 4px solid #00b894;
  border-bottom: 4px solid #d63031;
  font-size: 0.9rem;
}


  .phone-auth-modal.show {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
  }

.phone-auth-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}
  .phone-auth-header h2 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: #222;
  }
.phone-auth-close-btn {
  background: #e74c3c;
  border: none;
  font-size: 1.5rem;
  color: #fff;
  width: 20px;
  height: 20px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 2px solid #c0392b;
  cursor: pointer;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
  
  /* Positioning the button in the top-right corner */
  position: absolute;  /* Use absolute positioning */
  top: 5px;  /* Move the button 10px above the container */
  right: 5px;  /* Move the button 10px to the right */
}

.phone-auth-close-btn:hover {
  background: #c0392b;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
  transform: translateY(-2px);
}

.phone-auth-close-btn:focus {
  outline: none;
  box-shadow: 0 0 0 4px rgba(255, 87, 34, 0.5);
}

  .phone-auth-content label {
    display: block;
    margin: 8px 0 4px;
    font-weight: bold;
    font-size: 0.8rem;
    color: #333;
  }

  .phone-auth-content input[type="tel"] {
    width: 75%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 10px;
    font-size: 0.9em;
  }

  .otp-boxes {
    display: flex;
    justify-content: space-between;
    margin-top: 6px;
    margin-right: 6px;
  }

  .otp-boxes input {
    width: 1.8em;
    height: 2em;
    font-size: 1em;
    text-align: center;
    border: 1px solid #ccc;
    border-radius: 4px;
  }



  .message {
    padding: 8px;
    border-radius: 6px;
    margin-top: 12px;
    display: none;
    font-size: 0.8rem;
    font-weight: 500;
  }

  .info    { background: #e7f7fe; color: #31708f; }
  .error   { background: #f8d7da; color: #721c24; }
  .success { background: #d4edda; color: #155724; }

  @media (max-width: 320px) {
    .phone-auth-modal {
      width: 98vw;
      padding: 10px 12px;
      max-height: 70vh;
    }

    .otp-boxes input {
      width: 1.6em;
      height: 1.9em;
      font-size: 0.9em;
    }

    .phone-auth-header h2 {
      font-size: 0.9rem;
    }

   
  }






.phone-auth-message {
  position: relative;
   top: 20%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 20px;
  color: #f9f9f9;

  max-width: 300px;
  min-width: 80px;
  min-height: 38px;
  border-radius: 100px;
  box-sizing: border-box;
 transition: top 0.25s ease;
  z-index: 1;
}

.phone-auth-message:hover::before {
  transform: scale(1.05);
}

.phone-auth-message:hover::after {
  transform: translateY(-5px);
}

.phone-auth-message::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 90%;
  width: 100%;
  border-top: 1px solid #F5F8FC;
  border-bottom: 2px solid #F5F8FC;
  border-left: 5px solid #f1ce069f;
  border-radius: 62px;
  box-sizing: border-box;
  clip-path: polygon(0% 105%, 0% 0%, 105% 0%, 105% 105%, 43px 105%, 43px 80%, 21px 80%, 21px 105%);
  transition: transform 0.3s ease;
  z-index: -1;
}

.phone-auth-message::after {
  content: "";
  position: absolute;
  width: 25px;
  height: 30px;
  background: #000;
  border: 8px solid #7FFF00;
  top: calc(90% - 1px);
  left: 20px;
  box-sizing: border-box;
  clip-path: polygon(0 0, 0% 100%, 100% 0%, calc(100% - 2px) 0, 1px calc(100% - 2px), 1px 0);
  transition: transform 0.3s ease;
  z-index: -1;
}

.msg-icn:hover {
  animation: pulse 0.6s infinite alternate;
}

@keyframes pulse {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.1);
  }
}








.loginMessages {
    color: #000;
    font-size: 8px;
    padding: 3px 4px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    overflow: hidden;
    position: relative;
    margin-top: -20px ;
  }

  /* Base animation class */
  .slide-in {
    position: relative;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
  }

  @keyframes slideFromTop {
    0% { opacity: 0; transform: translateY(-100%); }
    100% { opacity: 1; transform: translateY(0); }
  }
  .slide-top {
    animation-name: slideFromTop;
  }

  @keyframes slideFromLeft {
    0% { opacity: 0; transform: translateX(-100%); }
    100% { opacity: 1; transform: translateX(0); }
  }
  .slide-left {
    animation-name: slideFromLeft;
  }

  @keyframes slideFromBottom {
    0% { opacity: 0; transform: translateY(100%); }
    100% { opacity: 1; transform: translateY(0); }
  }
  .slide-bottom {
    animation-name: slideFromBottom;
  }

  @keyframes slideFromRight {
    0% { opacity: 0; transform: translateX(100%); }
    100% { opacity: 1; transform: translateX(0); }
  }
  .slide-right {
    animation-name: slideFromRight;
  }




#bannerAdContainer {
            width: 320px; /* Standard banner width */
            height: 50px; /* Standard banner height */
            margin: 20px auto;
            background-color: #e0f2f7; /* Light blue background for placeholder */
            border: 1px dashed #90caf9; /* Dashed border to indicate placeholder */
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.9em;
            color: #555;
            overflow: hidden; /* Ensure ad content stays within bounds */
        }