html,
body {
    overflow-x: hidden;
    width: 100%;
}

.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.review-card {
  overflow: visible;
  position: relative;
  transition: all 0.3s ease;
  align-self: flex-start;
}

.review-card.review-open {
  z-index: 50;
  transform: translateY(-10px);
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
}

/* collapsed state */
.review-text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

/* expanded state */
.review-text.expanded {
  display: block;
  overflow: visible;
  -webkit-line-clamp: unset;
}

/* Hero Animations */
.hero-animate {
  opacity: 0;
}

.fade-up {
  animation: fadeUp 0.8s ease forwards;
}

.slide-right {
  animation: slideRight 1s ease forwards;
}

.delay-1 {
  animation-delay: 0.2s;
}

.delay-2 {
  animation-delay: 0.6s;
}

.delay-3 {
  animation-delay: 1s;
}

.delay-4 {
  animation-delay: 1.4s;
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(200px) scale(0.95);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes slideRight {
  from {
    opacity: 0;
    transform: translateX(80px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.progress-line {
  position: relative;
  width: 100%;
  height: 2px;
  background: #d1d5db;
  border-radius: 9999px;
}

.progress-dot {
  position: absolute;
  top: 50%;
  width: 20px;
  height: 4px;
  background: #ff4b33;
  border-radius: 9999px;
  transform: translateY(-50%);
  transition: left 0.4s ease;
}

/* Generic animation starter */
.animate-section {
  opacity: 0;
  will-change: transform, opacity;
}

.fade-left.animate-in {
  animation: fadeLeft 0.9s ease forwards;
}

.fade-right.animate-in {
  animation: fadeRight 0.9s ease forwards;
}

/* Delays */
.delay-1 {
  animation-delay: 0.2s;
}

.delay-2 {
  animation-delay: 0.6s;
}

.delay-3 {
  animation-delay: 1s;
}

.marquee-track {
  display: flex;
  align-items: center;
  width: max-content;
  gap: 2rem; /* controls spacing between company names */
  animation: marquee 25s linear infinite;
}

.company {
  flex: 0 0 auto; /* don't force equal widths */
  white-space: nowrap;
  text-align: center;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--primary-color); /* your primary color */
}

/* Tablet */
@media (min-width: 768px) {
  .company {
    font-size: 1.7rem;
  }

  .marquee-track {
    gap: 3rem;
  }
}

/* Desktop */
@media (min-width: 1024px) {
  .company {
    font-size: 2rem;
  }

  .marquee-track {
    gap: 4rem;
  }
}

/* Different font styles */
.serif {
  font-family: Georgia, serif;
}

.sans {
  font-family: Arial, sans-serif;
}

.script {
  font-family: "Brush Script MT", cursive;
}

.mono {
  font-family: "Courier New", monospace;
}

.display {
  font-family: Impact, sans-serif;
  letter-spacing: 1px;
}

.luxury {
  font-family: "Times New Roman", serif;
  font-style: italic;
}

/* ===================================
   WHY CHOOSE US SECTION
=================================== */

.why-us-section {
  position: relative;
  background:
    linear-gradient(
      135deg,
      #09075e 0%,
      #0b3f4c 100%
    );
}

/* Connected boxes/grid pattern */
.why-us-section::before {
  content: "";
  position: absolute;
  inset: 0;

  background-image:
    linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);

  background-size: 60px 60px;

  opacity: 1;
}

.why-us-section::after {
  content: "";
  position: absolute;
  inset: 0;

  background-image:
    linear-gradient(
      90deg,
      transparent 49%,
      rgba(255,255,255,.04) 50%,
      transparent 51%
    ),
    linear-gradient(
      transparent 49%,
      rgba(255,255,255,.04) 50%,
      transparent 51%
    );

  background-size: 180px 180px;

  pointer-events: none;
}

/* Keep content above pattern */
.why-us-section > div {
  position: relative;
  z-index: 2;
}

/* Floating Glass Cards */
.feature-card {
  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  border: 1px solid rgba(255,255,255,0.15);

  border-radius: 24px;

  box-shadow:
    0 20px 40px rgba(0,0,0,0.18),
    0 5px 15px rgba(0,0,0,0.1);

  position: relative;
}

/* Hover effect */
.feature-card:hover {
  transform: translateY(-12px);
  background: rgba(255,255,255,0.12);

  box-shadow:
    0 30px 60px rgba(0,0,0,0.25),
    0 10px 25px rgba(0,0,0,0.15);
}

.fade-up.animate-in {
  animation: fadeUp 0.9s ease forwards;
}

.fade-up.animate-in {
  animation: fadeUp 1.1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.fade-left.animate-in {
  animation: fadeLeft 1.1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.fade-right.animate-in {
  animation: fadeRight 1.1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.animate-section {
  opacity: 0;
  will-change: transform, opacity;
}

.fade-up {
  transform: translateY(200px);
}

.fade-left {
  transform: translateX(200px);
}

.fade-right {
  transform: translateX(-200px);
}

.faq-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
}

.faq-item.active .faq-content {
  max-height: 200px;
}

.faq-item.active i {
  transform: rotate(45deg);
}

.faq-item {
  background: #fff;
  transition: 0.3s ease;
}

.faq-item:hover {
  box-shadow: 0 10px 25px rgba(0,0,0,.08);
}

/* Perfect seamless loop */
@keyframes marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

@keyframes fadeLeft {
  from {
    opacity: 0;
    transform: translateX(200px) scale(0.95);
  }

  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

@keyframes fadeRight {
  from {
    opacity: 0;
    transform: translateX(-200px) scale(0.95);
  }

  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}