* {
  transition: background-color 0.3s ease, color 0.3s ease;
}

#hero-section {
  background: url(Images/banner1.png);
  background-size: cover;
}

@media (min-width: 1200px) {
  #sidebar {
    display: block !important;
  }
  .jumpBtn {
    display: none !important;
  }
  #searchNavbar {
    display: none;
  }
}

/* under 1200px SHOW */
@media (max-width: 1199px) {
  .jumpBtn {
    display: block !important;
  }
}

/* extra top margin between 630px and 1500px */
@media (min-width: 630px) and (max-width: 1500px) {
  .themeBtn {
    top: 150px !important;
  }
}
.active-child {
  background: #8317ef22;
  color: #8317ef !important;
}

.btn-primary {
  background: linear-gradient(to right, #8317ef, #b084f8);
  color: white;
  transition: background-color 0.4s ease-in-out, transform 0.2s;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(131, 23, 239, 0.4),
    0 2px 4px rgba(176, 132, 248, 0.3);
}
.btn-primary:hover {
  background: linear-gradient(to right, #b084f8, #8317ef);
  transform: translateY(-2px);
  /* background-color: rgb(246, 241, 250); */
}
.btn-primary:active {
  box-shadow: none;
  transform: translateY(0);
}

.faq-content {
  max-height: 0;
  overflow: hidden;
  padding-top: 0;
  padding-bottom: 0;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  box-sizing: border-box;
  transition: max-height 0.5s ease, padding 0.5s ease;
}

.faq-btn {
  transition: all 0.3s ease;
}

/* HERO Heading */
@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(40px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.animate-fadeInUp {
  animation: fadeInUp 1s ease forwards;
}

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

.animate-marquee {
  animation: marquee 50s linear infinite;
  width: max-content;
  display: flex;
  white-space: nowrap;
}

.tab-underline {
  transition: all 0.3s ease;
}
/* --------------------------------------------------------------------- */

/* TESTIMONIAL SECTION:- FLIP */
.flip-card {
  perspective: 1000px;
}
.flip-inner {
  transform-style: preserve-3d;
}
.flip-front,
.flip-back {
  backface-visibility: hidden;
}
.rotate-y-180 {
  transform: rotateY(180deg);
}

/* -------------------------------------------------------------------------- */
.serviceCard {
  transition: all 0.3s ease;
}
.serviceCardText,
.serviceCardLink {
  transition: all 0.3s ease;
}

/* ---------------------------------------------------------------- */
.response-accordion {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.45s ease;
}

/* optional: a fallback explicit open height (not required if using JS scrollHeight) */
.response-accordion.open {
  /* leave empty or keep a large max-height as fallback */
  max-height: 1000px;
}

.menu-btn {
  width: 100%;
  text-align: left;
  padding: 8px;
  border-radius: 6px;
  font-size: 14px;
  color: #333;
}
.menu-btn:hover {
  background: #b084f8;
  color: white;
}
.active-menu {
  background: #8317ef;
  color: white;
  font-weight: 600;
}

/* Light mode active */
.active-lang {
  background-color: #ead9fd !important;
  border-color: transparent !important;
  transform: translateY(-2px);
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.15);
}

.on-lang {
  background-color: #ead9fd !important;
  border-color: transparent !important;
  transform: translateY(-2px);
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.15);
}

/* Dark mode active */
.dark .on-lang {
  background-color: #303030 !important;
  color: white !important;
}

.on-lang * {
  color: inherit !important;
}

/* Scrollbar for aside section */
aside {
  scrollbar-width: 2px;
  scrollbar-color: #9b9a9a #f1f1f1;
}

/* Chrome, Edge, Safari */
.custom-scrollbar::-webkit-scrollbar {
  width: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background: #c0c0c0;
  border-radius: 10px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}