body {
  font-family: "Open Sans", sans-serif;
}
h1,
h2,
h3,
.heading {
  font-family: "Poppins", sans-serif;
}
.hero-heading {
  font-size: 2.5rem;
  font-weight: 700;
}
.subheading {
  font-size: 1.2rem;
  color: #666;
}
.tab-item {
  background-color: #f8f9fa;
  border: 1px solid #dee2e6;
  padding: 0.75rem 1.25rem;
  margin: 0.5rem;
  border-radius: 0.375rem;
  transition: all 0.3s ease;
  cursor: pointer;
  display: inline-block;
}
.tab-item:hover {
  background-color: #e2e6ea;
}

/* General styling for our custom buttons */
.btn-custom {
  font-size: 1.2rem; /* Make the text slightly larger */
  padding: 12px 25px; /* Add internal spacing (top/bottom, left/right) */
  border-radius: 8px; /* Apply rounded corners to the buttons */
  display: inline-flex; /* Use inline-flex to align text and icon horizontally */
  align-items: center; /* Vertically align items (text and icon) in the middle */
  justify-content: center; /* Horizontally align items in the middle (if content allows) */
  text-decoration: none; /* Remove the default underline for links */
  color: white; /* Set the text and icon color to white */
  transition: background-color 0.3s ease, transform 0.3s ease,
    box-shadow 0.3s ease; /* Smooth transitions for hover effects */
  border: none; /* Remove default button border */
}

/* Specific styling for the Facebook Messenger button */
.btn-facebook-messenger {
  background-color: #007bff; /* Bright blue color for Messenger */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
}

/* Hover effect for the Facebook Messenger button */
.btn-facebook-messenger:hover {
  background-color: #0056b3; /* Darker blue on hover */
  transform: translateY(-2px); /* Slight lift effect on hover */
  box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15); /* Slightly larger shadow on hover */
}

/* Specific styling for the WhatsApp button */
.btn-whatsapp {
  background-color: #28a745; /* Green color for WhatsApp */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
}

/* Hover effect for the WhatsApp button */
.btn-whatsapp:hover {
  background-color: #1e7e34; /* Darker green on hover */
  transform: translateY(-2px); /* Slight lift effect on hover */
  box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15); /* Slightly larger shadow on hover */
}

/* Styling for the icon within the custom buttons */
.btn-custom i {
  margin-left: 10px; /* Add space between the "Chat via" text and the icon */
  font-size: 1.3rem; /* Slightly larger icon size for better visibility */
}

/* NEW: Styling for the SVG icons within the buttons */
.btn-custom .btn-icon {
  width: 24px; /* Adjust as needed for your desired icon size */
  height: 24px; /* Ensure proportional scaling */
  margin-left: 10px; /* Space between text and icon */
  /* You might need to set fill if the SVG itself doesn't have a color,
       and you want it to inherit the button's text color.
       This usually works best if the SVG is designed without a fill property. */
  /* fill: currentColor; */
}

.fade-image {
  opacity: 1;
  transition: opacity 0.5s ease-in-out;
}
.fade-out {
  opacity: 0;
}

#itemOne.active,
#itemTwo.active,
#itemThree.active,
#itemFour.active {
  background-color: #e7e3e2;
  color: #111;
}
/* #itemOne.active {
  background-color: #e7e3e2;
}
#itemTwo.active {
  background-color: #e7e3e2;
}
#itemThree.active {
  background-color: #e7e3e2;
  color: #111;
}
#itemFour.active {
  background-color: #e7e3e2;
  color: #111;
}
#itemFour.active .accordion-button {
  color: #111;
} */

.logo-slider {
  overflow: hidden;
  position: relative;
}

.logo-track {
  display: flex;
  width: calc(200%); /* doubled for looping */
  animation: scrollLeft 10s linear infinite;
}

.logo-track img {
  height: 50px;
  margin: 0 20px;
  opacity: 0.8;
  transition: opacity 0.1s;
}

.logo-track img:hover {
  opacity: 1;
}

@keyframes scrollLeft {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

.accordion-button::after {
  display: none; /* hide default arrow */
}
.accordion-button i {
  transition: transform 0.3s ease;
  margin-right: 10px;
}
.accordion-button.collapsed i {
  transform: rotate(0deg);
}
.accordion-button:not(.collapsed) i {
  transform: rotate(90deg);
}
.accordion-collapse.collapse {
  opacity: 0;
  transition: opacity 0.4s ease;
}
.accordion-collapse.collapse.show {
  opacity: 1;
}
/* .accordion-item {
  border: none;
  background-color: transparent;
} */

@media (min-width: 992px) {
  .sticky-card {
    position: sticky;
    top: 100px; /* distance from top of viewport */
  }
}

/* ───────────────── CARD-ONLY BUTTON RULES ───────────────── */
.support-btns .btn-chat {
  /* ← THIS selector means: “only the .btn-chat buttons inside .support-btns” */
  flex: 0 0 auto; /* stop Bootstrap flexbox from stretching the buttons   */
  white-space: nowrap; /* keep "Chat via" + icon on ONE line                   */
  gap: 0.4rem; /* tiny space between text and SVG                      */
}

/* small-screen adjustments (≤ 576 px) */
@media (max-width: 576px) {
  .support-btns .btn-chat {
    font-size: 1rem; /* scale text a touch                                       */
    padding: 10px 18px; /* slimmer padding – still a 44-48 px tall tap target       */
  }
  .support-btns .btn-chat .btn-icon {
    width: 20px; /* shrink the icon so nothing wraps                         */
    height: 20px;
  }
}

footer h5,
footer h6 {
  color: #ffffff;
}

footer p,
footer li {
  font-size: 0.9rem;
}

.footer-link:hover {
  text-decoration: underline;
  color: #ccc;
}