/*
 * Glassmorphism Cards Effect for "Why Founders Trust Us" Section
 * Based on Figma design and user mockup
 * Target: Section f7d59e3 - Only the 4 main boxes
 */

/* Target only the 4 main cards within the specific section */
.elementor-14354 .elementor-element.elementor-element-f7d59e3 .elementor-element.elementor-element-1255240,
.elementor-14354 .elementor-element.elementor-element-f7d59e3 .elementor-element.elementor-element-ff98ff1,
.elementor-14354 .elementor-element.elementor-element-f7d59e3 .elementor-element.elementor-element-b8fdd76,
.elementor-14354 .elementor-element.elementor-element-f7d59e3 .elementor-element.elementor-element-7366a43 {
  /* True glassmorphism - using container background color with transparency */
  background: rgba(10, 30, 52, 0.12) !important; /* Container color #0a1e34 with transparency */
  backdrop-filter: blur(6px) !important; /* Reduced blur to show pattern better */
  -webkit-backdrop-filter: blur(6px) !important;
  
  /* Remove default border for gradient border */
  border: none !important;
  border-radius: 12px !important;
  
  /* Setup for gradient border and hover effects */
  position: relative !important;
  overflow: hidden !important;
  
  /* Smooth transitions */
  transition: all 0.3s ease, box-shadow 0.3s ease !important;
  
  /* Ensure proper layering */
  box-sizing: border-box !important;
}

/* Gradient border using pseudo-element - default blue gradient */
.elementor-14354 .elementor-element.elementor-element-f7d59e3 .elementor-element.elementor-element-1255240::before,
.elementor-14354 .elementor-element.elementor-element-f7d59e3 .elementor-element.elementor-element-ff98ff1::before,
.elementor-14354 .elementor-element.elementor-element-f7d59e3 .elementor-element.elementor-element-b8fdd76::before,
.elementor-14354 .elementor-element.elementor-element-f7d59e3 .elementor-element.elementor-element-7366a43::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 12px;
  padding: 1px; /* Border width */
  /* Default blue gradient border */
  background: linear-gradient(135deg, 
    rgba(79, 195, 247, 0.8) 0%, 
    rgba(33, 150, 243, 0.6) 25%, 
    rgba(25, 118, 210, 0.4) 75%, 
    rgba(13, 71, 161, 0.3) 100%);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: xor;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  transition: background 0.3s ease;
  z-index: 0;
}

/* Hover state - change gradient border colors */
.elementor-14354 .elementor-element.elementor-element-f7d59e3 .elementor-element.elementor-element-1255240:hover::before,
.elementor-14354 .elementor-element.elementor-element-f7d59e3 .elementor-element.elementor-element-ff98ff1:hover::before,
.elementor-14354 .elementor-element.elementor-element-f7d59e3 .elementor-element.elementor-element-b8fdd76:hover::before,
.elementor-14354 .elementor-element.elementor-element-f7d59e3 .elementor-element.elementor-element-7366a43:hover::before {
  /* Hover: darker navy gradient */
  background: linear-gradient(135deg, 
    rgba(10, 30, 52, 0.9) 0%, 
    rgba(15, 45, 78, 0.8) 25%, 
    rgba(20, 60, 104, 0.7) 75%, 
    rgba(25, 75, 130, 0.6) 100%);
}

/* Very subtle glass texture overlay using ::after - always visible */
.elementor-14354 .elementor-element.elementor-element-f7d59e3 .elementor-element.elementor-element-1255240::after,
.elementor-14354 .elementor-element.elementor-element-f7d59e3 .elementor-element.elementor-element-ff98ff1::after,
.elementor-14354 .elementor-element.elementor-element-f7d59e3 .elementor-element.elementor-element-b8fdd76::after,
.elementor-14354 .elementor-element.elementor-element-f7d59e3 .elementor-element.elementor-element-7366a43::after {
  content: '';
  position: absolute;
  top: 1px; /* Account for border */
  left: 1px;
  right: 1px;
  bottom: 1px;
  /* Very subtle glass texture to maintain pattern visibility */
  background-image: 
    radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.03) 0%, transparent 50%),
    radial-gradient(circle at 70% 70%, rgba(255, 255, 255, 0.015) 0%, transparent 50%);
  opacity: 0.2; /* Even more subtle to show pattern clearly */
  pointer-events: none;
  z-index: 1;
  border-radius: 11px; /* Slightly smaller than border */
  transition: opacity 0.3s ease;
}

/* Enhanced golden glow hover effect */
.elementor-14354 .elementor-element.elementor-element-f7d59e3 .elementor-element.elementor-element-1255240:hover,
.elementor-14354 .elementor-element.elementor-element-f7d59e3 .elementor-element.elementor-element-ff98ff1:hover,
.elementor-14354 .elementor-element.elementor-element-f7d59e3 .elementor-element.elementor-element-b8fdd76:hover,
.elementor-14354 .elementor-element.elementor-element-f7d59e3 .elementor-element.elementor-element-7366a43:hover {
  /* Enhanced golden glow */
  box-shadow: 
    0 0 30px rgba(228, 181, 98, 0.4),
    0 0 60px rgba(228, 181, 98, 0.2),
    inset 0 0 30px rgba(228, 181, 98, 0.1) !important;
  
  /* Slightly enhance glass effect on hover */
  background: rgba(10, 30, 52, 0.18) !important;
}

/* Enhance texture subtly on hover */
.elementor-14354 .elementor-element.elementor-element-f7d59e3 .elementor-element.elementor-element-1255240:hover::after,
.elementor-14354 .elementor-element.elementor-element-f7d59e3 .elementor-element.elementor-element-ff98ff1:hover::after,
.elementor-14354 .elementor-element.elementor-element-f7d59e3 .elementor-element.elementor-element-b8fdd76:hover::after,
.elementor-14354 .elementor-element.elementor-element-f7d59e3 .elementor-element.elementor-element-7366a43:hover::after {
  opacity: 0.5;
}

/* Touch active state - enhanced glow effect for mobile */
.elementor-14354 .elementor-element.elementor-element-f7d59e3 .elementor-element.elementor-element-1255240.touch-active,
.elementor-14354 .elementor-element.elementor-element-f7d59e3 .elementor-element.elementor-element-ff98ff1.touch-active,
.elementor-14354 .elementor-element.elementor-element-f7d59e3 .elementor-element.elementor-element-b8fdd76.touch-active,
.elementor-14354 .elementor-element.elementor-element-f7d59e3 .elementor-element.elementor-element-7366a43.touch-active {
  /* Enhanced golden glow for touch devices */
  box-shadow: 
    0 0 30px rgba(228, 181, 98, 0.4),
    0 0 60px rgba(228, 181, 98, 0.2),
    inset 0 0 30px rgba(228, 181, 98, 0.1) !important;
  
  /* Slightly enhance glass effect on touch */
  background: rgba(10, 30, 52, 0.18) !important;
}

/* Touch active texture enhancement */
.elementor-14354 .elementor-element.elementor-element-f7d59e3 .elementor-element.elementor-element-1255240.touch-active::after,
.elementor-14354 .elementor-element.elementor-element-f7d59e3 .elementor-element.elementor-element-ff98ff1.touch-active::after,
.elementor-14354 .elementor-element.elementor-element-f7d59e3 .elementor-element.elementor-element-b8fdd76.touch-active::after,
.elementor-14354 .elementor-element.elementor-element-f7d59e3 .elementor-element.elementor-element-7366a43.touch-active::after {
  opacity: 0.5;
}

/* Focus state for accessibility */
.elementor-14354 .elementor-element.elementor-element-f7d59e3 .elementor-element.elementor-element-1255240:focus-visible,
.elementor-14354 .elementor-element.elementor-element-f7d59e3 .elementor-element.elementor-element-ff98ff1:focus-visible,
.elementor-14354 .elementor-element.elementor-element-f7d59e3 .elementor-element.elementor-element-b8fdd76:focus-visible,
.elementor-14354 .elementor-element.elementor-element-f7d59e3 .elementor-element.elementor-element-7366a43:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.8) !important;
  outline-offset: 2px !important;
}

/* Ensure content is above all effects */
.elementor-14354 .elementor-element.elementor-element-f7d59e3 .elementor-element.elementor-element-1255240 *,
.elementor-14354 .elementor-element.elementor-element-f7d59e3 .elementor-element.elementor-element-ff98ff1 *,
.elementor-14354 .elementor-element.elementor-element-f7d59e3 .elementor-element.elementor-element-b8fdd76 *,
.elementor-14354 .elementor-element.elementor-element-f7d59e3 .elementor-element.elementor-element-7366a43 * {
  position: relative;
  z-index: 2;
}

/* Fallback for browsers without backdrop-filter support */
@supports not (backdrop-filter: blur(6px)) {
  .elementor-14354 .elementor-element.elementor-element-f7d59e3 .elementor-element.elementor-element-1255240,
  .elementor-14354 .elementor-element.elementor-element-f7d59e3 .elementor-element.elementor-element-ff98ff1,
  .elementor-14354 .elementor-element.elementor-element-f7d59e3 .elementor-element.elementor-element-b8fdd76,
  .elementor-14354 .elementor-element.elementor-element-f7d59e3 .elementor-element.elementor-element-7366a43 {
    background: rgba(10, 30, 52, 0.20) !important;
  }
}

/* Fallback for mask property */
@supports not (mask: linear-gradient(#fff 0 0)) {
  .elementor-14354 .elementor-element.elementor-element-f7d59e3 .elementor-element.elementor-element-1255240::before,
  .elementor-14354 .elementor-element.elementor-element-f7d59e3 .elementor-element.elementor-element-ff98ff1::before,
  .elementor-14354 .elementor-element.elementor-element-f7d59e3 .elementor-element.elementor-element-b8fdd76::before,
  .elementor-14354 .elementor-element.elementor-element-f7d59e3 .elementor-element.elementor-element-7366a43::before {
    /* Use border instead of gradient border */
    background: none;
    border: 1px solid rgba(79, 195, 247, 0.6);
  }
  
  .elementor-14354 .elementor-element.elementor-element-f7d59e3 .elementor-element.elementor-element-1255240:hover::before,
  .elementor-14354 .elementor-element.elementor-element-f7d59e3 .elementor-element.elementor-element-ff98ff1:hover::before,
  .elementor-14354 .elementor-element.elementor-element-f7d59e3 .elementor-element.elementor-element-b8fdd76:hover::before,
  .elementor-14354 .elementor-element.elementor-element-f7d59e3 .elementor-element.elementor-element-7366a43:hover::before {
    border-color: rgba(10, 30, 52, 0.8);
  }
}

/* Responsive adjustments */

/* Tablet responsive - maintain good glassmorphic effect */
@media (max-width: 1024px) and (min-width: 769px) {
  .elementor-14354 .elementor-element.elementor-element-f7d59e3 .elementor-element.elementor-element-1255240,
  .elementor-14354 .elementor-element.elementor-element-f7d59e3 .elementor-element.elementor-element-ff98ff1,
  .elementor-14354 .elementor-element.elementor-element-f7d59e3 .elementor-element.elementor-element-b8fdd76,
  .elementor-14354 .elementor-element.elementor-element-f7d59e3 .elementor-element.elementor-element-7366a43 {
    /* Maintain strong glassmorphic effect on tablet */
    backdrop-filter: blur(5px) !important;
    -webkit-backdrop-filter: blur(5px) !important;
    /* Keep glassmorphic transparency with container color */
    background: rgba(10, 30, 52, 0.11) !important;
  }
  
  /* Enhanced touch interaction for tablet */
  .elementor-14354 .elementor-element.elementor-element-f7d59e3 .elementor-element.elementor-element-1255240:hover,
  .elementor-14354 .elementor-element.elementor-element-f7d59e3 .elementor-element.elementor-element-ff98ff1:hover,
  .elementor-14354 .elementor-element.elementor-element-f7d59e3 .elementor-element.elementor-element-b8fdd76:hover,
  .elementor-14354 .elementor-element.elementor-element-f7d59e3 .elementor-element.elementor-element-7366a43:hover {
    /* Enhanced golden glow for tablet */
    box-shadow: 
      0 0 25px rgba(228, 181, 98, 0.35),
      0 0 50px rgba(228, 181, 98, 0.18),
      inset 0 0 25px rgba(228, 181, 98, 0.08) !important;
    background: rgba(10, 30, 52, 0.16) !important;
  }
  
  /* Subtle texture on tablet for pattern visibility */
  .elementor-14354 .elementor-element.elementor-element-f7d59e3 .elementor-element.elementor-element-1255240::after,
  .elementor-14354 .elementor-element.elementor-element-f7d59e3 .elementor-element.elementor-element-ff98ff1::after,
  .elementor-14354 .elementor-element.elementor-element-f7d59e3 .elementor-element.elementor-element-b8fdd76::after,
  .elementor-14354 .elementor-element.elementor-element-f7d59e3 .elementor-element.elementor-element-7366a43::after {
    opacity: 0.18; /* Balanced opacity for tablet */
  }
}

/* Mobile responsive - optimized for small screens */
@media (max-width: 768px) {
  .elementor-14354 .elementor-element.elementor-element-f7d59e3 .elementor-element.elementor-element-1255240,
  .elementor-14354 .elementor-element.elementor-element-f7d59e3 .elementor-element.elementor-element-ff98ff1,
  .elementor-14354 .elementor-element.elementor-element-f7d59e3 .elementor-element.elementor-element-b8fdd76,
  .elementor-14354 .elementor-element.elementor-element-f7d59e3 .elementor-element.elementor-element-7366a43 {
    /* Reduce blur for mobile performance while maintaining glassmorphic effect */
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
    /* Keep glassmorphic transparency with container color */
    background: rgba(10, 30, 52, 0.10) !important;
  }
  
  /* Maintain gradient borders on mobile */
  .elementor-14354 .elementor-element.elementor-element-f7d59e3 .elementor-element.elementor-element-1255240::before,
  .elementor-14354 .elementor-element.elementor-element-f7d59e3 .elementor-element.elementor-element-ff98ff1::before,
  .elementor-14354 .elementor-element.elementor-element-f7d59e3 .elementor-element.elementor-element-b8fdd76::before,
  .elementor-14354 .elementor-element.elementor-element-f7d59e3 .elementor-element.elementor-element-7366a43::before {
    border-radius: 12px;
  }
  
  /* Enhanced touch interaction for mobile */
  .elementor-14354 .elementor-element.elementor-element-f7d59e3 .elementor-element.elementor-element-1255240:hover,
  .elementor-14354 .elementor-element.elementor-element-f7d59e3 .elementor-element.elementor-element-ff98ff1:hover,
  .elementor-14354 .elementor-element.elementor-element-f7d59e3 .elementor-element.elementor-element-b8fdd76:hover,
  .elementor-14354 .elementor-element.elementor-element-f7d59e3 .elementor-element.elementor-element-7366a43:hover {
    /* Golden glow optimized for mobile */
    box-shadow: 
      0 0 20px rgba(228, 181, 98, 0.3),
      0 0 40px rgba(228, 181, 98, 0.15),
      inset 0 0 20px rgba(228, 181, 98, 0.06) !important;
    background: rgba(10, 30, 52, 0.15) !important;
  }
  
  /* Active/touch state for mobile - immediate feedback */
  .elementor-14354 .elementor-element.elementor-element-f7d59e3 .elementor-element.elementor-element-1255240:active,
  .elementor-14354 .elementor-element.elementor-element-f7d59e3 .elementor-element.elementor-element-ff98ff1:active,
  .elementor-14354 .elementor-element.elementor-element-f7d59e3 .elementor-element.elementor-element-b8fdd76:active,
  .elementor-14354 .elementor-element.elementor-element-f7d59e3 .elementor-element.elementor-element-7366a43:active {
    /* Enhanced golden glow on tap for immediate feedback */
    box-shadow: 
      0 0 25px rgba(228, 181, 98, 0.4),
      0 0 45px rgba(228, 181, 98, 0.2),
      inset 0 0 25px rgba(228, 181, 98, 0.08) !important;
    background: rgba(10, 30, 52, 0.18) !important;
    transform: scale(0.98); /* Subtle press feedback */
  }
  
  /* Even more subtle texture on mobile for pattern visibility */
  .elementor-14354 .elementor-element.elementor-element-f7d59e3 .elementor-element.elementor-element-1255240::after,
  .elementor-14354 .elementor-element.elementor-element-f7d59e3 .elementor-element.elementor-element-ff98ff1::after,
  .elementor-14354 .elementor-element.elementor-element-f7d59e3 .elementor-element.elementor-element-b8fdd76::after,
  .elementor-14354 .elementor-element.elementor-element-f7d59e3 .elementor-element.elementor-element-7366a43::after {
    border-radius: 11px;
    opacity: 0.15; /* Even more subtle on mobile for pattern visibility */
  }
}

/* Extra small mobile devices - optimized glassmorphic effect */
@media (max-width: 480px) {
  .elementor-14354 .elementor-element.elementor-element-f7d59e3 .elementor-element.elementor-element-1255240,
  .elementor-14354 .elementor-element.elementor-element-f7d59e3 .elementor-element.elementor-element-ff98ff1,
  .elementor-14354 .elementor-element.elementor-element-f7d59e3 .elementor-element.elementor-element-b8fdd76,
  .elementor-14354 .elementor-element.elementor-element-f7d59e3 .elementor-element.elementor-element-7366a43 {
    /* Further optimized for very small screens */
    backdrop-filter: blur(3px) !important;
    -webkit-backdrop-filter: blur(3px) !important;
    /* Maintain glassmorphic transparency with container color */
    background: rgba(10, 30, 52, 0.08) !important;
  }

  /* Compact golden glow for small screens */
  .elementor-14354 .elementor-element.elementor-element-f7d59e3 .elementor-element.elementor-element-1255240:hover,
  .elementor-14354 .elementor-element.elementor-element-f7d59e3 .elementor-element.elementor-element-ff98ff1:hover,
  .elementor-14354 .elementor-element.elementor-element-f7d59e3 .elementor-element.elementor-element-b8fdd76:hover,
  .elementor-14354 .elementor-element.elementor-element-f7d59e3 .elementor-element.elementor-element-7366a43:hover {
    box-shadow: 
      0 0 15px rgba(228, 181, 98, 0.25),
      0 0 30px rgba(228, 181, 98, 0.12),
      inset 0 0 15px rgba(228, 181, 98, 0.05) !important;
    background: rgba(10, 30, 52, 0.12) !important;
  }

  /* Very subtle texture for very small screens */
  .elementor-14354 .elementor-element.elementor-element-f7d59e3 .elementor-element.elementor-element-1255240::after,
  .elementor-14354 .elementor-element.elementor-element-f7d59e3 .elementor-element.elementor-element-ff98ff1::after,
  .elementor-14354 .elementor-element.elementor-element-f7d59e3 .elementor-element.elementor-element-b8fdd76::after,
  .elementor-14354 .elementor-element.elementor-element-f7d59e3 .elementor-element.elementor-element-7366a43::after {
    opacity: 0.12; /* Ultra-subtle for maximum pattern visibility */
  }
}

/* Touch device optimization - better interaction feedback */
@media (hover: none) and (pointer: coarse) {
  .elementor-14354 .elementor-element.elementor-element-f7d59e3 .elementor-element.elementor-element-1255240,
  .elementor-14354 .elementor-element.elementor-element-f7d59e3 .elementor-element.elementor-element-ff98ff1,
  .elementor-14354 .elementor-element.elementor-element-f7d59e3 .elementor-element.elementor-element-b8fdd76,
  .elementor-14354 .elementor-element.elementor-element-f7d59e3 .elementor-element.elementor-element-7366a43 {
    /* Enhanced touch target and smoother transitions */
    transition: all 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, transform 0.1s ease !important;
  }

  /* Enhanced tap feedback with golden glow */
  .elementor-14354 .elementor-element.elementor-element-f7d59e3 .elementor-element.elementor-element-1255240:active,
  .elementor-14354 .elementor-element.elementor-element-f7d59e3 .elementor-element.elementor-element-ff98ff1:active,
  .elementor-14354 .elementor-element.elementor-element-f7d59e3 .elementor-element.elementor-element-b8fdd76:active,
  .elementor-14354 .elementor-element.elementor-element-f7d59e3 .elementor-element.elementor-element-7366a43:active {
    /* Immediate golden feedback on touch */
    box-shadow: 
      0 0 20px rgba(228, 181, 98, 0.35),
      0 0 40px rgba(228, 181, 98, 0.18),
      inset 0 0 20px rgba(228, 181, 98, 0.07) !important;
    background: rgba(10, 30, 52, 0.16) !important;
    transform: scale(0.99); /* Subtle press feedback */
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .elementor-14354 .elementor-element.elementor-element-f7d59e3 .elementor-element.elementor-element-1255240,
  .elementor-14354 .elementor-element.elementor-element-f7d59e3 .elementor-element.elementor-element-ff98ff1,
  .elementor-14354 .elementor-element.elementor-element-f7d59e3 .elementor-element.elementor-element-b8fdd76,
  .elementor-14354 .elementor-element.elementor-element-f7d59e3 .elementor-element.elementor-element-7366a43 {
    transition: none !important;
  }
  
  .elementor-14354 .elementor-element.elementor-element-f7d59e3 .elementor-element.elementor-element-1255240::before,
  .elementor-14354 .elementor-element.elementor-element-f7d59e3 .elementor-element.elementor-element-ff98ff1::before,
  .elementor-14354 .elementor-element.elementor-element-f7d59e3 .elementor-element.elementor-element-b8fdd76::before,
  .elementor-14354 .elementor-element.elementor-element-f7d59e3 .elementor-element.elementor-element-7366a43::before {
    transition: none !important;
  }
}