/* Order:-Navbar → Cards → Reviews → Footer → Utilities  */





/* ── Hamburger → X animation ── */

.nav-toggle-btn span {
  transition: transform 0.3s ease, opacity 0.2s ease;
}

.nav-toggle-btn[data-state="open"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-toggle-btn[data-state="open"] span:nth-child(2) {
  opacity: 0;
}

.nav-toggle-btn[data-state="open"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}


/* Mobile drawer */

.mobile-drawer[data-state="open"] {
  transform: translateX(0);
}














/* REVIEW CARDS */

/* Default: scaled down, faded */
.review-card-new {
  transform: scale(0.8);
  opacity: 0.4;
  filter: blur(1px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
  transition: transform 0.6s cubic-bezier(.2,.65,.3,1),
              opacity 0.5s ease,
              box-shadow 0.5s ease,
              filter 0.5s ease;
}

/* One step from center */
.review-card-new.rc-adjacent {
  transform: scale(0.92);
  opacity: 0.75;
  filter: blur(0.3px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
}

/* Active center card */
.review-card-new.rc-active {
  transform: scale(1.02) translateY(-6px);
  opacity: 1;
  filter: blur(0);
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.13),
              0 0 0 1.5px rgba(20, 184, 166, 0.15),
              0 10px 40px rgba(20, 184, 166, 0.08);
}

/* Dot indicators */
.rc-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #cbd5e1;
  cursor: pointer;
  transition: all 0.35s cubic-bezier(.2,.65,.3,1);
}

.rc-dot.rc-dot-active {
  width: 22px;
  background: #14b8a6;
}

/* Partial-fill star rating */
.star-rating {
  position: relative;
  display: inline-block;
  font-size: 1rem;
  line-height: 1;
  letter-spacing: 2px;
}

.star-rating .stars-empty { color: #e2e8f0; }

.star-rating .stars-filled {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  white-space: nowrap;
  color: #14b8a6;
}


/*LOGO CAROUSEL */

.logo-carousel::before,
.logo-carousel::after {
  content: "";
  position: absolute;
  top: 0;
  width: 120px;
  height: 100%;
  z-index: 2;
}

.logo-carousel::before {
  left: 0;
  background: linear-gradient(to right, white, transparent);
}

.logo-carousel::after {
  right: 0;
  background: linear-gradient(to left, white, transparent);
}

.logo-track {
  width: max-content;
  animation: scrollLogos 22s linear infinite;
  will-change: transform;
}

.logo-item {
  height: 70px;
  min-width: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: white;
  border-radius: 14px;
  border: 1px solid rgba(0, 0, 0, 0.05);
  opacity: 0.7;
  transition: all 0.35s ease;
}

.logo-item img {
  max-height: 28px;
  transition: 0.3s ease;
}

.logo-item:hover {
  opacity: 1;
  transform: translateY(-4px) scale(1.05);
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.08);
}

.logo-item:hover img { filter: grayscale(0%); }

.logo-carousel:hover .logo-track { animation-play-state: paused; }


/* FOOTER  */

/* Dark gradient background */
.bg-dark-grad {
  background: linear-gradient(135deg, #0f172a, #020617);
}

/* Column heading with teal left-border accent */
.footer-col-heading {
  padding-left: 12px;
  border-left: 2px solid #2dd4bf;
}

/* Mobile accordion  grid-row trick for smooth expand */
.footer-acc-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* open */
.footer-acc.open .footer-acc-body {
  max-height: 600px; /* increase if needed */
}

/* chevron */
.footer-acc-chevron {
  transition: transform 0.3s ease;
}

.footer-acc.open .footer-acc-chevron {
  transform: rotate(180deg);
}

/* Mobile tap feedback */
.footer-acc-trigger { -webkit-tap-highlight-color: transparent; }
.footer-acc-trigger:active { transform: scale(0.98); }


/*  UTILITIES  */

/* Hide scrollbar */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { scrollbar-width: none; }


/* CTA button shadow */
.cta-btn { box-shadow: 0 10px 25px rgba(42, 157, 143, 0.25); }
.cta-btn:hover { box-shadow: 0 15px 35px rgba(42, 157, 143, 0.35); }

/* WhatsApp float button */
.wa-float { position: relative; }