/* Zigma Software - Main Stylesheet */

:root {
  /* Color Palette */
  --primary: #005791;
  --primary-container: #0670b7;
  --secondary: #b71323;
  --secondary-container: #db3238;
  --background: #f9f9ff;
  --surface: #ffffff;
  --on-background: #111c2d;
  --on-surface: #111c2d;
  --outline: #717882;
  --outline-variant: #c0c7d2;
}

/* Base styles */
body {
  font-family: 'Inter', sans-serif;
  background-color: var(--background);
  color: var(--on-background);
  margin: 0;
  padding: 0;
}

/* Ensure main navigation links are spaced evenly */
#main-nav .nav-links {
  display: none;
  gap: 20px;
  align-items: center;
}
#main-nav .nav-links a,
#main-nav .nav-links button {
  white-space: nowrap;
}

/* Desktop nav: hidden below wide desktop, shown at 1400px+ */
@media (max-width: 1399px) {
  #main-nav > div > div.items-center.gap-sm.font-poppins {
    display: none !important;
  }
  #mobile-menu-toggle {
    display: flex !important;
  }
}

@media (min-width: 1400px) {
  #main-nav > div > div.items-center.gap-sm.font-poppins {
    display: flex !important;
  }
  #mobile-menu-toggle {
    display: none !important;
  }
  #mobile-menu {
    display: none !important;
  }
}

/* Crop logo in header to remove unwanted bottom artifact */
#main-nav .logo-crop {
  height: 48px; /* slightly smaller than the image height to hide the bottom line */
  overflow: hidden;
  display: inline-block;
}
#main-nav .logo-crop img {
  display: block;
  transform: translateY(-3px);
}

/* Styles for 'Why Choose Us' feature cards */
.why-card {
  border: 2px solid #3b4652;
  border-radius: 8px;
  min-height: 160px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: #ffffff;
}
.why-card .icon {
  font-size: 36px;
  color: var(--secondary);
  background: transparent;
}
.why-card h4 {
  margin: 0.5rem 0 0.25rem 0;
}
.why-card p {
  margin: 0;
  font-size: 14px;
  color: var(--on-surface-variant);
}

/* Explicit section label/title sizing to ensure consistent visual order */
.section-label {
  font-size: 13px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  display: block;
}
.section-title {
  font-size: 2.5rem; /* ~40px */
}
.section-title-lg {
  font-size: 3rem; /* ~48px for large screens */
}

/* Partner logos grid */
.partners-grid .partner-card {
  border: 1px dashed #e6edf2;
  border-radius: 8px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  color: var(--primary);
  font-weight: 600;
}

.partner-logo {
  max-height: 64px;
  max-width: 100%;
  object-fit: contain;
  display: block;
}
/* Hover effect for partner logo cards */
.partner-logo-card {
  transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s, background-color 0.3s;
}
.partner-logo-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 15px rgba(0,59,117,0.3);
  border-color: #C8102E;
  background-color: rgba(0,59,117,0.1);
}
.partner-logo-card img {
  transition: transform 0.3s;
}
.partner-logo-card:hover img {
  transform: scale(1.05);
}

/* ========================================
   Mobile Responsiveness Overrides
   ======================================== */

@media (max-width: 639px) {
  .text-justify {
    text-align: left;
  }

  section.py-24 {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }

  section.py-20 {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }

  section.py-16 {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }

  .px-margin-desktop {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .vibrant-card {
    padding: 1rem !important;
  }

  .vibrant-card .w-16.h-16 {
    width: 2.75rem;
    height: 2.75rem;
  }

  .vibrant-card .material-symbols-outlined.text-4xl {
    font-size: 1.5rem;
  }

  .vibrant-card .rounded-2xl {
    border-radius: 1rem;
  }

  .vibrant-card p,
  .vibrant-card .text-on-surface-variant {
    font-size: 0.875rem;
  }

  .vibrant-card .mb-6 {
    margin-bottom: 0.75rem;
  }

  .vibrant-card .mb-8 {
    margin-bottom: 1rem;
  }

  .partner-logo-card {
    padding: 0.75rem !important;
    height: 5rem !important;
  }

  .clients-container {
    gap: 16px;
  }

  .text-primary.font-extrabold {
    word-break: break-word;
    hyphens: auto;
  }

  footer .text-lg {
    font-size: 0.9375rem;
  }

  footer .text-xl {
    font-size: 1.125rem;
  }

  footer .gap-12 {
    gap: 2rem;
  }
}

/* ========================================
   JavaScript-Driven Mobile Adjustments
   Set by main.js via data-mobile on <html>
   ======================================== */

html[data-mobile] main section p {
  font-size: 0.9375rem;
}

html[data-mobile] footer p {
  font-size: 0.875rem;
}

html[data-mobile] .text-on-surface-variant {
  font-size: 0.875rem;
}