/* Hero Providers Widget Styles */

/* CSS Variables */
#hero-providers {
  --color-gray-50: oklch(.985 .002 247.839);
  --color-gray-100: oklch(.967 .003 264.542);
  --color-gray-200: oklch(.928 .006 264.531);
  --color-gray-300: oklch(.872 .01 258.338);
  --color-gray-400: oklch(.707 .022 261.325);
  --color-gray-500: oklch(.551 .027 264.364);
  --color-gray-600: oklch(.446 .03 256.802);
  --color-gray-700: oklch(.373 .034 259.733);
  --color-gray-800: oklch(.278 .033 256.848);
  --color-gray-900: oklch(.21 .034 264.665);
  --color-blue-500: oklch(.623 .214 259.815);
  --color-blue-600: oklch(.546 .245 262.881);
  --color-blue-900: oklch(.379 .146 265.522);
  --color-purple-500: oklch(.627 .265 303.9);
  --color-purple-600: oklch(.558 .288 302.321);
  --color-purple-900: oklch(.381 .176 304.987);
  --color-green-500: oklch(.723 .219 149.579);
  --color-red-500: oklch(.637 .237 25.331);
  --color-yellow-500: oklch(.795 .184 86.047);
  --color-white: #fff;
  --spacing: .25rem;
  --container-7xl: 80rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;
  --text-5xl: 3rem;
  --text-6xl: 3.75rem;
  --text-lg--line-height: calc(1.75 / 1.125);
  --text-xl--line-height: calc(1.75 / 1.25);
  --text-2xl--line-height: calc(2 / 1.5);
  --text-3xl--line-height: calc(2.25 / 1.875);
  --text-4xl--line-height: calc(2.5 / 2.25);
  --text-5xl--line-height: 1;
  --text-6xl--line-height: 1;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --leading-tight: 1.25;
  --leading-relaxed: 1.625;
  --radius-2xl: 1rem;
  --tw-gradient-from: #0000;
  --tw-gradient-to: #0000;
  --tw-gradient-stops: initial;
  --tw-gradient-via-stops: initial;
  --tw-gradient-from-position: 0%;
  --tw-gradient-to-position: 100%;
  --tw-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

/* Base styles */
#hero-providers {
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  opacity: 1 !important;
  visibility: visible !important;
}

.elementor-editor-active #hero-providers * {
  opacity: 1 !important;
  visibility: visible !important;
  color: inherit !important;
}


#hero-providers h1,
#hero-providers h2,
#hero-providers h3,
#hero-providers p,
#hero-providers div {
  visibility: visible;
}

/* Layout utilities */
#hero-providers .relative {
  position: relative;
}

#hero-providers .absolute {
  position: absolute;
}

#hero-providers .inset-0 {
  inset: calc(var(--spacing) * 0);
}

/* Grid */
#hero-providers .grid {
  display: grid;
}

#hero-providers .grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

#hero-providers .gap-12 {
  gap: calc(var(--spacing) * 12);
}

#hero-providers .items-center {
  align-items: center;
}

/* Flexbox */
#hero-providers .flex {
  display: flex;
}

#hero-providers .flex-wrap {
  flex-wrap: wrap;
}

#hero-providers .items-center {
  align-items: center;
}

#hero-providers .gap-4 {
  gap: calc(var(--spacing) * 4);
}

/* Gradient background */
#hero-providers .bg-gradient-to-br {
  background-image: linear-gradient(to bottom right, var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) 50%, var(--tw-gradient-to) var(--tw-gradient-to-position));
}

#hero-providers .from-gray-50 {
  --tw-gradient-from: var(--color-gray-50);
}

#hero-providers .via-white {
  --tw-gradient-via: var(--color-white);
}

#hero-providers .to-gray-100 {
  --tw-gradient-to: var(--color-gray-100);
}

/* Text gradient */
#hero-providers .bg-gradient-to-r {
  background-image: linear-gradient(to right, var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}

#hero-providers .from-blue-600 {
  --tw-gradient-from: var(--color-blue-600);
}

#hero-providers .to-purple-600 {
  --tw-gradient-to: var(--color-purple-600);
}

#hero-providers .from-blue-900\/20 {
  --tw-gradient-from: rgba(48, 85, 149, 0.2);
}

#hero-providers .to-purple-900\/20 {
  --tw-gradient-to: rgba(97, 45, 127, 0.2);
}

#hero-providers .bg-clip-text {
  background-clip: text;
}

#hero-providers .text-transparent {
  color: transparent;
}

/* Spacing */
#hero-providers .py-16 {
  padding-top: calc(var(--spacing) * 16);
  padding-bottom: calc(var(--spacing) * 16);
}

#hero-providers .py-20 {
  padding-top: calc(var(--spacing) * 20);
  padding-bottom: calc(var(--spacing) * 20);
}

#hero-providers .px-4 {
  padding-left: calc(var(--spacing) * 4);
  padding-right: calc(var(--spacing) * 4);
}

#hero-providers .px-6 {
  padding-left: calc(var(--spacing) * 6);
  padding-right: calc(var(--spacing) * 6);
}

#hero-providers .px-8 {
  padding-left: calc(var(--spacing) * 8);
  padding-right: calc(var(--spacing) * 8);
}

#hero-providers .px-10 {
  padding-left: calc(var(--spacing) * 10);
  padding-right: calc(var(--spacing) * 10);
}

#hero-providers .mb-6 {
  margin-bottom: calc(var(--spacing) * 6);
}

#hero-providers .mb-8 {
  margin-bottom: calc(var(--spacing) * 8);
}

#hero-providers .mr-2 {
  margin-right: calc(var(--spacing) * 2);
}

/* Container */
#hero-providers .max-w-7xl {
  max-width: var(--container-7xl);
}

#hero-providers .mx-auto {
  margin-left: auto;
  margin-right: auto;
}

/* Typography */
#hero-providers .text-3xl {
  font-size: var(--text-3xl);
  line-height: var(--text-3xl--line-height);
}

#hero-providers .text-4xl {
  font-size: var(--text-4xl);
  line-height: var(--text-4xl--line-height);
}

#hero-providers .text-5xl {
  font-size: var(--text-5xl);
  line-height: var(--text-5xl--line-height);
}

#hero-providers .text-6xl {
  font-size: var(--text-6xl);
  line-height: var(--text-6xl--line-height);
}

#hero-providers .text-lg {
  font-size: var(--text-lg);
  line-height: var(--text-lg--line-height);
}

#hero-providers .text-xl {
  font-size: var(--text-xl);
  line-height: var(--text-xl--line-height);
}

#hero-providers .text-sm {
  font-size: var(--text-sm);
  line-height: var(--text-sm--line-height);
}

#hero-providers .font-semibold {
  font-weight: var(--font-weight-semibold);
}

#hero-providers .leading-tight {
  line-height: var(--leading-tight);
}

#hero-providers .leading-relaxed {
  line-height: var(--leading-relaxed);
}

/* Text colors */
#hero-providers .text-gray-900 {
  color: var(--color-gray-900) !important;
}

#hero-providers .text-gray-600 {
  color: var(--color-gray-600) !important;
}

#hero-providers .text-gray-500 {
  color: var(--color-gray-500) !important;
}

/* Force text visibility with specific colors */
#hero-providers h1 { color: #1f2937 !important; }
#hero-providers p { color: #4b5563 !important; }
#hero-providers div { color: #6b7280 !important; }

/* Dimensions */
#hero-providers .w-20 {
  width: calc(var(--spacing) * 20);
}

#hero-providers .w-24 {
  width: calc(var(--spacing) * 24);
}

#hero-providers .w-2 {
  width: calc(var(--spacing) * 2);
}

#hero-providers .w-full {
  width: 100%;
}

#hero-providers .h-1 {
  height: calc(var(--spacing) * 1);
}

#hero-providers .h-2 {
  height: calc(var(--spacing) * 2);
}

#hero-providers .h-64 {
  height: calc(var(--spacing) * 64);
}

#hero-providers .h-80 {
  height: calc(var(--spacing) * 80);
}

#hero-providers .h-96 {
  height: calc(var(--spacing) * 96);
}

#hero-providers .h-\[500px\] {
  height: 500px;
}

/* Background colors */
#hero-providers .bg-blue-500 {
  background-color: var(--color-blue-500);
}

#hero-providers .bg-purple-500 {
  background-color: var(--color-purple-500);
}

#hero-providers .bg-green-500 {
  background-color: var(--color-green-500);
}

#hero-providers .bg-red-500 {
  background-color: var(--color-red-500);
}

#hero-providers .bg-yellow-500 {
  background-color: var(--color-yellow-500);
}

/* Border radius */
#hero-providers .rounded-full {
  border-radius: 9999px;
}

#hero-providers .rounded-2xl {
  border-radius: var(--radius-2xl);
}

/* Object fit */
#hero-providers .object-cover {
  object-fit: cover;
}

/* Overflow */
#hero-providers .overflow-hidden {
  overflow: hidden;
}

/* Shadow */
#hero-providers .shadow-2xl {
  box-shadow: var(--tw-shadow);
}

/* Animation */
#hero-providers .fade-in-up {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

#hero-providers.animated .fade-in-up {
  opacity: 1;
  transform: translateY(0);
}

/* Title animation - from bottom left */
#hero-providers h1.fade-in-up {
  opacity: 0;
  transform: translateY(50px) translateX(-50px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

#hero-providers.animated h1.fade-in-up {
  opacity: 1;
  transform: translateY(0) translateX(0);
}

/* Line animation - expands from left */
#hero-providers .w-20.fade-in-up,
#hero-providers .w-24.fade-in-up {
  opacity: 1;
  width: 0 !important;
  margin-left: 0;
  margin-right: auto;
  transform-origin: left;
  transition: width 0.8s ease-out;
}

#hero-providers.animated .w-20.fade-in-up {
  width: calc(var(--spacing) * 20) !important;
}

#hero-providers.animated .w-24.fade-in-up {
  width: calc(var(--spacing) * 24) !important;
}

/* Image animation - appears from right to left */
#hero-providers .relative.fade-in-up {
  opacity: 0;
  transform: translateX(100px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

#hero-providers.animated .relative.fade-in-up {
  opacity: 1;
  transform: translateX(0);
}

.elementor-editor-active #hero-providers .fade-in-up,
.elementor-editor-active #hero-providers h1.fade-in-up,
.elementor-editor-active #hero-providers .w-20.fade-in-up,
.elementor-editor-active #hero-providers .w-24.fade-in-up,
.elementor-editor-active #hero-providers .relative.fade-in-up {
  opacity: 1 !important;
  transform: translateY(0) translateX(0) !important;
  width: auto !important;
  transition: none !important;
}

.elementor-editor-active #hero-providers .w-20 {
  width: calc(var(--spacing) * 20) !important;
}

.elementor-editor-active #hero-providers .w-24 {
  width: calc(var(--spacing) * 24) !important;
}

/* Header spacing - responsive */
#hero-providers section:first-child {
  margin-top: calc(var(--spacing) * 20) !important; /* ~80px - increased for mobile header */
  padding-top: calc(var(--spacing) * 8) !important; /* ~32px additional padding */
}

/* Responsive Design */
@media (min-width: 640px) {
  #hero-providers section:first-child {
    margin-top: calc(var(--spacing) * 16) !important; /* ~64px - tablet header */
    padding-top: calc(var(--spacing) * 8) !important; /* ~32px additional padding */
  }

  #hero-providers .sm\:py-20 {
    padding-top: calc(var(--spacing) * 20);
    padding-bottom: calc(var(--spacing) * 20);
  }

  #hero-providers .sm\:px-6 {
    padding-left: calc(var(--spacing) * 6);
    padding-right: calc(var(--spacing) * 6);
  }

  #hero-providers .sm\:text-4xl {
    font-size: var(--text-4xl);
    line-height: var(--text-4xl--line-height);
  }

  #hero-providers .sm\:text-xl {
    font-size: var(--text-xl);
    line-height: var(--text-xl--line-height);
  }

  #hero-providers .sm\:mb-8 {
    margin-bottom: calc(var(--spacing) * 8);
  }

  #hero-providers .sm\:w-24 {
    width: calc(var(--spacing) * 24);
  }

  #hero-providers .sm\:h-80 {
    height: calc(var(--spacing) * 80);
  }
}

@media (min-width: 768px) {
  #hero-providers section:first-child {
    margin-top: calc(var(--spacing) * 14) !important; /* ~56px - desktop header */
    padding-top: calc(var(--spacing) * 8) !important; /* ~32px additional padding */
  }

  #hero-providers .md\:py-24 {
    padding-top: calc(var(--spacing) * 24);
    padding-bottom: calc(var(--spacing) * 24);
  }

  #hero-providers .md\:px-8 {
    padding-left: calc(var(--spacing) * 8);
    padding-right: calc(var(--spacing) * 8);
  }

  #hero-providers .md\:text-5xl {
    font-size: var(--text-5xl);
    line-height: var(--text-5xl--line-height);
  }

  #hero-providers .md\:h-96 {
    height: calc(var(--spacing) * 96);
  }
}

@media (min-width: 1024px) {
  #hero-providers section:first-child {
    margin-top: calc(var(--spacing) * 16) !important; /* ~64px - large desktop header */
    padding-top: calc(var(--spacing) * 8) !important; /* ~32px additional padding */
  }

  #hero-providers .lg\:py-32 {
    padding-top: calc(var(--spacing) * 32);
    padding-bottom: calc(var(--spacing) * 32);
  }

  #hero-providers .lg\:px-10 {
    padding-left: calc(var(--spacing) * 10);
    padding-right: calc(var(--spacing) * 10);
  }

  #hero-providers .lg\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #hero-providers .lg\:gap-16 {
    gap: calc(var(--spacing) * 16);
  }

  #hero-providers .lg\:text-6xl {
    font-size: var(--text-6xl);
    line-height: var(--text-6xl--line-height);
  }

  #hero-providers .lg\:h-\[500px\] {
    height: 500px;
  }
}

@media (min-width: 1280px) {
  #hero-providers section:first-child {
    margin-top: calc(var(--spacing) * 16) !important; /* Keep same as 1024px */
    padding-top: calc(var(--spacing) * 8) !important; /* Keep same padding */
  }
}

/* Animation sequence */
#hero-providers .fade-in-up:nth-child(1) { transition-delay: 0.1s; }
#hero-providers .fade-in-up:nth-child(2) { transition-delay: 0.2s; }
#hero-providers .fade-in-up:nth-child(3) { transition-delay: 0.3s; }
#hero-providers .fade-in-up:nth-child(4) { transition-delay: 0.4s; }
#hero-providers .fade-in-up:nth-child(5) { transition-delay: 0.5s; }