body {
  font-family: "Inter", sans-serif;
}

/* Swiper pagination styling */
.swiper-pagination-bullet {
  background: #6b7280;
  opacity: 0.5;
}

.swiper-pagination-bullet-active {
  background: #0066ff;
  opacity: 1;
}

.swiper-horizontal > .swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal {
  bottom: 0;
}

/* Toast Notification Styles */
.toast-container {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 400px;
}

.toast {
  background: white;
  border-radius: 8px;
  padding: 16px 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  display: flex;
  align-items: center;
  gap: 12px;
  animation: slideInRight 0.3s ease;
  border-left: 4px solid;
  min-width: 300px;
  position: relative;
}

.toast.success {
  border-left-color: #10b981;
}

.toast.error {
  border-left-color: #ef4444;
}

.toast.info {
  border-left-color: #0066ff;
}

.toast-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.toast.success .toast-icon {
  background: #10b981;
  color: white;
}

.toast.error .toast-icon {
  background: #ef4444;
  color: white;
}

.toast.info .toast-icon {
  background: #0066ff;
  color: white;
}

.toast-content {
  flex: 1;
  color: #1f2937;
  font-size: 14px;
}

.toast-close {
  cursor: pointer;
  color: #6b7280;
  transition: color 0.2s;
  flex-shrink: 0;
}

.toast-close:hover {
  color: #1f2937;
}

@keyframes slideInRight {
  from {
    transform: translateX(400px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideOutRight {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(400px);
    opacity: 0;
  }
}

.toast.removing {
  animation: slideOutRight 0.3s ease;
}

.success-message {
  display: none;
  animation: fadeIn 0.5s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Headroom.js - Hide header on scroll down, show on scroll up */
#main-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 50;

  /* Use transform for optimal performance */
  transform: translateY(0);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  /* Initial state */
  will-change: auto;
}

/* When pinned (scrolling up or at top) - show navbar */
#main-nav.headroom--pinned {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* When unpinned (scrolling down) - hide navbar */
#main-nav.headroom--unpinned {
  transform: translateY(-100%);
  box-shadow: none;
}

/* Add extra styling when not at top of page */
#main-nav.headroom--not-top {
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
}

/* Mobile optimizations */
@media (max-width: 768px) {
  #main-nav {
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  }
}

@media (max-width: 640px) {
  .toast-container {
    left: 20px;
    right: 20px;
    max-width: none;
  }

  .toast {
    min-width: auto;
  }
}

/* Footer Accordion Styles */
.footer-accordion-content {
  max-height: 1000px;
  overflow: hidden;
  transition: max-height 0.3s ease, opacity 0.3s ease;
  opacity: 1;
}

.footer-accordion-content.collapsed {
  max-height: 0;
  opacity: 0;
}

#accordion-icon {
  display: inline-block;
  transition: transform 0.3s ease;
}

#accordion-icon.rotated {
  transform: rotate(180deg);
}

@media (min-width: 768px) {
  .footer-accordion-content {
    max-height: none;
    opacity: 1;
  }

  .footer-accordion-content.collapsed {
    max-height: none;
    opacity: 1;
  }

  #accordion-icon {
    display: none;
  }
}

/* Comparison table JS-controlled animation states */
.comparison-table-wrapper.active {
  max-height: 600px;
  opacity: 1;
  margin-bottom: 32px;
}

@media (max-width: 768px) {
  .comparison-table-wrapper.active {
    max-height: 800px;
    overflow-x: auto;
  }
}

/* Testimonials Grid with Subgrid Alignment */
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  grid-template-rows: auto 1fr auto auto;
  align-items: stretch;
}

/* Ensure testimonials-grid doesn't conflict on mobile */
@media (max-width: 767px) {
  .testimonials-grid {
    display: flex !important;
    grid-template-columns: none;
    grid-template-rows: none;
  }
}

.testimonial-card {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 4;
  grid-template-columns: 1fr;
  height: 100%;
}

.testimonial-top {
  /* Stars, Title, and Text grouped together at the top */
  grid-row: 1;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.testimonial-header {
  /* Person info - aligned via subgrid */
  grid-row: 3;
}

.testimonial-results {
  /* Results - aligned via subgrid */
  grid-row: 4;
  border-top: 1px solid #e5e7eb;
  padding-top: 1rem;
}

/* Shape Decoration Component - for dynamic SVG shapes */
.shape-decoration {
  position: absolute;
  width: min(80vw, 60vh);
  top: var(--shape-top, auto);
  bottom: var(--shape-bottom, auto);
  left: var(--shape-left, auto);
  right: var(--shape-right, auto);
  zoom: var(--shape-zoom, 1);
  transform: translate(var(--shape-transform-x, 0), var(--shape-transform-y, 0))
    rotate(var(--shape-rotate, 0deg));
}

/* Shape position variants */
.shape-hexagon {
  --shape-top: -25vh;
  --shape-right: -25vh;
  --shape-rotate: 25deg;
  --shape-transform-x: 0;
  --shape-transform-y: 0;
  --shape-zoom: 1;
}

.shape-triangle {
  --shape-bottom: -10vh;
  --shape-left: -25vh;
  --shape-rotate: 67deg;
  --shape-transform-x: 0;
  --shape-transform-y: 0;
  --shape-zoom: 1;
}

.shape-circle {
  --shape-bottom: -25vh;
  --shape-right: -25vh;
  --shape-rotate: 0;
  --shape-transform-x: 0;
  --shape-transform-y: 0;
  --shape-zoom: 1;
}

/* Shape animations */
@keyframes animate-hexagon {
  0% {
    transform: translateY(0) translateX(0);
  }
  30% {
    transform: translateY(0) translateX(10vh) rotate(25deg);
  }
  50% {
    transform: translateY(10vh) translateX(10vh) rotate(45deg);
  }
  80% {
    transform: translateY(10vh) translateX(0) rotate(25deg);
  }
  100% {
    transform: translateY(0) translateX(0);
  }
}

@keyframes animate-triangle {
  0% {
    transform: translateY(0) translateX(0);
  }
  30% {
    transform: translateY(10vh) translateX(0) rotate(25deg);
  }
  50% {
    transform: translateY(10vh) translateX(10vh) rotate(45deg);
  }
  80% {
    transform: translateY(0) translateX(10vh) rotate(25deg);
  }
  100% {
    transform: translateY(0) translateX(0);
  }
}

@keyframes animate-circle {
  0% {
    transform: translateY(0) translateX(0);
  }
  30% {
    transform: translateY(-5vh) translateX(0) rotate(25deg);
  }
  50% {
    transform: translateY(-5vh) translateX(-10vh) rotate(45deg);
  }
  80% {
    transform: translateY(0) translateX(-10vh) rotate(25deg);
  }
  100% {
    transform: translateY(0) translateX(0);
  }
}

.shape-decoration > svg {
  animation-duration: 30s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.shape-hexagon > svg {
  animation-name: animate-hexagon;
}

.shape-triangle > svg {
  animation-name: animate-triangle;
}
  
.shape-circle > svg {
  animation-name: animate-circle;
}

/* Shape Bubble Contact Variant */
.shape-bubble--contact {
  --shape-top: 0;
  --shape-left: 0;
  --shape-zoom: 1;
}

.shape-bubble--contact img {
  width: 100%;
  height: auto;
}

/* Shape Line Contact Variants */
.shape-line--contact {
  --shape-top: 110px;
  --shape-left: 0;
  --shape-zoom: 1;
  width: 1682px;
}

.shape-line--contact img {
  width: 100%;
  height: auto;
}

.shape-line--contact-2 {
  --shape-bottom: 140px;
  --shape-right: 0;
  --shape-zoom: 1;
  width: 1883px;
}

.shape-line--contact-2 img {
  width: 100%;
  height: auto;
}

/* Horizontal Scroll Container - Mobile Only - CSS Grid approach */
.mobile-scroll-container {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 80vw; /* Reduced width shows more of adjacent cards */
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y; /* Allow both horizontal and vertical scrolling */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
  gap: 1.5rem; /* 24px gap between cards */
  padding: 0 calc(50vw - 40vw); /* Exact padding to center 80vw cards on any screen */
  overscroll-behavior-x: contain; /* Prevents page bounce at edges */
  scroll-behavior: smooth; /* Smooth snap behavior */
}

.mobile-scroll-container::-webkit-scrollbar {
  display: none; /* Hide scrollbar on Chrome/Safari */
}

/* Card within scroll container */
.mobile-scroll-card {
  scroll-snap-align: center; /* Snaps to center of viewport */
  scroll-snap-stop: always; /* Forces scroll to stop at each card */
  width: 100%; /* Fill grid column */
  max-width: none; /* Remove max-width on mobile */
}

/* Media query: Revert to standard grid on tablet+ */
@media (min-width: 768px) {
  .mobile-scroll-container {
    display: grid; /* Standard grid on desktop */
    grid-auto-flow: row; /* Reset to row flow */
    grid-auto-columns: auto; /* Reset auto columns */
    overflow-x: visible;
    scroll-snap-type: none;
    padding: 0; /* Remove padding on desktop */
    gap: 2rem; /* Desktop gap */
  }

  .mobile-scroll-card {
    width: auto;
    max-width: none;
  }
}

/* Scroll Indicators (dots) for mobile carousels */
.scroll-indicators {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem 0;
  margin-top: 1.5rem;
}

.scroll-indicator-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #d1d5db; /* Gray-300 */
  transition: all 0.3s ease;
  cursor: pointer;
}

.scroll-indicator-dot.active {
  background-color: #0066ff; /* Blue - brand color */
  width: 24px;
  border-radius: 4px;
}

/* Hide scroll indicators on desktop */
@media (min-width: 768px) {
  .scroll-indicators {
    display: none;
  }
}

/* Pulsing Glow Effect on Next Card (Scroll Hint) */
.mobile-scroll-card.scroll-hint-active {
  animation: pulse-glow 4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse-glow {
  0% {
    box-shadow: 0 0 0 0 rgba(107, 114, 128, 0.3);
  }
  50% {
    box-shadow: 0 0 20px 8px rgba(156, 163, 175, 0.25);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(107, 114, 128, 0.3);
  }
}

/* Remove pulse after scroll interaction */
.mobile-scroll-card.scroll-hint-active.scroll-hint-done {
  animation: none;
  box-shadow: none;
}

/* Hide scroll hint on desktop */
@media (min-width: 768px) {
  .mobile-scroll-card.scroll-hint-active {
    animation: none;
    box-shadow: none;
  }
}


@keyframes topBottom {
  0% {
    transform: translate(0px, 0px);
  }
  50% {
    transform: translate(0px, 20px);
  }
  100% {
    transform: translate(0px, 0px);
  }
}

.top-bottom {
  animation: topBottom 5s ease infinite;
}

/* ============================================
   LANGUAGE SELECTOR STYLES
   ============================================ */

/* Desktop Language Dropdown Trigger */
#language-trigger {
  cursor: pointer;
  position: relative;
  z-index: 50;
  min-height: 40px;
  font-weight: 500;
}

#language-trigger:hover {
  background-color: rgba(55, 65, 81, 0.5);
}

#language-trigger i:last-child {
  transition: transform 0.3s ease;
}

#language-trigger[aria-expanded="true"] i:last-child {
  transform: rotate(180deg);
}

/* Desktop Language Dropdown Menu */
#language-dropdown {
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
  min-width: 200px;
  border-radius: 8px;
}

#language-dropdown.opacity-100 {
  opacity: 1;
}

#language-dropdown.opacity-0 {
  opacity: 0;
  pointer-events: none;
}

/* Language Dropdown Items */
#language-dropdown a {
  cursor: pointer;
  position: relative;
  white-space: nowrap;
  display: flex;
  align-items: center;
}

#language-dropdown a:first-child {
  border-radius: 8px 8px 0 0;
}

#language-dropdown a:last-child {
  border-radius: 0 0 8px 8px;
  border-bottom: none;
}

#language-dropdown a.bg-blue-600 {
  background-color: #0066ff;
  font-weight: 600;
}

/* Mobile Language Menu Toggle */
#mobile-language-arrow {
  transition: transform 0.3s ease;
}

#mobile-language-arrow.rotate-180 {
  transform: rotate(180deg);
}

/* Mobile Language Menu */
#mobile-language-menu {
  display: block;
  max-height: 400px;
  overflow-y: auto;
  animation: slideDown 0.3s ease;
}

#mobile-language-menu.hidden {
  display: none;
  animation: slideUp 0.3s ease;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideUp {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-10px);
  }
}

/* Mobile Language Menu Items */
#mobile-language-menu a {
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#mobile-language-menu a.text-white {
  background-color: #0066ff;
  font-weight: 600;
}

#mobile-language-menu a.text-white:hover {
  background-color: #0052cc;
}

#mobile-language-menu a.text-gray-300:hover {
  background-color: #374151;
  color: #fff;
}

/* Language Icon Styling */
.fa-globe {
  color: #0066ff;
  font-size: 16px;
}

/* Accessibility - Focus states */
#language-trigger:focus,
#language-dropdown a:focus {
  outline: 2px solid #0066ff;
  outline-offset: 2px;
}

/* Smooth transitions */
#language-dropdown {
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}