/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Jul 31 2025 | 04:02:28 */
/* Add your CSS code here.

For example:
.example {
    color: red;
}

For brushing up on your CSS knowledge, check out http://www.w3schools.com/css/css_syntax.asp

End of comment */ 
.pricing_card_wrapper {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  gap: 16px;
  padding: 20px 15px;
  -webkit-overflow-scrolling: touch;
	flex-wrap: nowrap !important;
}

.pricing_card {
  flex: 0 0 100%; /* Default: 1 card per row (mobile first) */
  min-width: 100%;
  scroll-snap-align: start;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  transition: transform 0.3s;
}

/* Tablet: 2 cards per view */
@media (min-width: 600px) {
  .pricing_card {
    flex: 0 0 calc(100% / 2);
    min-width: calc(100% / 2);
  }
}

/* Desktop: 3 cards per view */
@media (min-width: 900px) {
  .pricing_card {
    flex: 0 0 calc(100% / 3);
    min-width: calc(100% / 3);
  }
}

.pricing_left_arrow, .pricing_right_arrow {
  position: absolute;
  top: 48%;
/*   transform: translateY(-50%); */
  cursor: pointer;
  z-index: 10;
  transition: background 0.3s;
}

.scroll-btn:hover {
  background: #000;
}

.pricing_left_arrow {
  left: 0px;
}

.pricing_right_arrow {
    right: 0px;
}

.pricing_left_arrow button.scroll-btn.left {
    border-radius: 0px 25px 25px 0px !important;
}

.pricing_right_arrow button.scroll-btn.right {
    border-radius: 25px 0px 0px 25px !important;
}
div#cardContainer::-webkit-scrollbar {
    display: none;
}

div#cardContainer {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

@media (max-width: 900px) {
	.pricing_card_wrapper {
	  padding: 20px 0px !important;
	}
}

 @media (min-width: 768px) and (max-width: 900px){
	 .pricing_card_wrapper {
		 padding: 20px 8px !important;
	 }
}