/* Add custom CSS styles below */ 

@media (max-width: 767px) {
section.s-block.s-block--main-slider-1.s-block--main-slider.s-block--full-bg.wide-placeholder.relative.overflow-hidden.pagination--narrow-buttons.is-first-block button.btn--main.btn--outline.inline.duration-500.transition-colors.rounded.s-button-element.s-button-btn.s-button-solid.s-button-large.s-button-primary.s-button-loader-after {
    margin-right: 114px ;
    
}

/* Hide the scroll-down link */
.scroll-down {
  display: none !important;
}

#testimonials-block-14 {
  background-color: #f178ad !important; /* Replace with your desired color */

}

/* Optional: responsive text size */
@media (min-width: 768px) {
  #testimonials-block-12 .right-side h2 {
    font-size: 2.5rem;
}
}
/* Make the button fully filled */
.btn--main.btn--outline {
  background-color: #ffffff;  /* Fill color of the button */
  color: #222222;             /* Text color */
  border: 0px solid #ffffff;  /* Keep border same as fill */
  transition: all 0.3s ease;
}

/* Force a fill color */
.btn--main.btn--outline {
  background-color: #fff6fb !important;  /* Button fill */
  color: #f076af !important;             /* Text color */
  border-color: #f076af !important;      /* Border matches fill */
}


/* Target the arrow if it’s an SVG */
.btn--main.btn--outline svg {
  fill: #e2518c; /* Arrow color */
}

.btn--main.btn--outline:hover svg {
  fill: #ffcc00; /* Arrow color on hover */
}

/* Hover effect */
.btn--main.btn--outline:hover {
  background-color: #222222;   /* Change background on hover */
  color: #ffffff;              /* Change text color on hover */
  border-color: #ffcc00;       /* Keep border consistent */
}

/* Optional: arrow inside the button */
.btn--main.btn--outline .btn--arrow span {
  background-color: #222222;  /* Arrow color */
}

/* Arrow hover change */
.btn--main.btn--outline:hover .btn--arrow span {
  background-color: #ffffff;  /* Arrow color on hover */
  
}

/* 1. Change the section background */
section.s-block.s-block--enhanced-features {
  background-color: #fff6fb !important; /* Replace with your desired color */
}

/* 2. Change the circular feature icon backgrounds */
.s-block--features__item .w-14.h-14.rounded-full {
  background-color: #f178ad !important; /* Circle fill color */
  color: #ffffff !important;            /* Icon color */
  transition: background-color 0.3s ease; /* Smooth hover transition */
}

/* 3. Hover effect for feature icons */
.s-block--features__item .w-14.h-14.rounded-full:hover {
  background-color: #c2185b !important; /* Slightly darker shade on hover */
}

/* 4. Optional: Button arrow hover color */
.btn--main.btn--outline:hover .btn--arrow span {
  background-color: #ffffff; /* Arrow color on hover */
}

/* Change the big footer block background color */
.store-footer {
  background-color: #FFF7FA !important; /* Replace with your desired color */
  
}

.store-footer .bg-white {
  background-color: #FFF7FA !important; /* Your desired color */
}