/* Mission & Values Section Specific Styles */

/* Floating Quote Animation */
.floating-quote {
  animation: float 3s ease-in-out infinite;
}

@keyframes float {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
}

/* Glassmorphic Effects */
.mission-values-card {
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

/* Glowing Icon Animation */
.glow-icon {
  filter: drop-shadow(0 0 20px rgba(59, 130, 246, 0.5));
  animation: pulse-glow 2s ease-in-out infinite alternate;
}

@keyframes pulse-glow {
  from {
    filter: drop-shadow(0 0 20px rgba(59, 130, 246, 0.5));
  }
  to {
    filter: drop-shadow(0 0 30px rgba(59, 130, 246, 0.8));
  }
}

/* Enhanced Mission Image Styling */
.mission-image-content img {
  transition: transform 0.7s ease;
  border-radius: 1rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.mission-image-content img:hover {
  transform: scale(1.03);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

/* Mission Text Enhanced Spacing */
.mission-text-content p {
  font-size: 1.125rem;
  margin-bottom: 1.5rem;
}

/* Hover Effects for Value Cards */
.value-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.value-card img {
  transition: transform 0.7s ease;
}

.value-card:hover img {
  transform: scale(1.1);
}

/* Responsive Design Improvements */
@media (max-width: 768px) {
  /* Mobile Floating Quote */
  .floating-quote {
    margin: 0 1rem;
    padding: 1rem 1.5rem;
  }
  
  .floating-quote .text-4xl {
    font-size: 2rem;
  }
  
  .floating-quote p {
    font-size: 0.9rem;
  }

  /* Mobile Mission Section */
  .mission-text-content {
    order: 2;
    margin-top: 2rem;
  }

  .mission-image-content {
    order: 1;
  }

  .mission-text-content p {
    font-size: 1rem;
    line-height: 1.7;
  }

  /* Mobile Image Sizing */
  .mission-image-content img {
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    display: block;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  /* Tablet adjustments */
  .mission-text-content p {
    font-size: 1.1rem;
    line-height: 1.7;
  }

  .mission-image-content img {
    max-width: 90%;
    margin: 0 auto;
    display: block;
  }
}

/* Desktop Large Screen Optimizations */
@media (min-width: 1280px) {
  .mission-text-content p {
    font-size: 1.25rem;
    line-height: 1.8;
  }

  .mission-text-content h3 {
    font-size: 2.5rem;
  }
}

/* Smooth transitions for all animations */
* {
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

/* Mobile Layout Adjustments */
@media (max-width: 1024px) {
  .mission-values-card {
    margin: 0 1rem;
  }
  
  .bg-white\/70 {
    background-color: rgba(255, 255, 255, 0.85);
  }
}

/* Enhanced backdrop blur for better mobile support */
@supports not (backdrop-filter: blur(20px)) {
  .mission-values-card {
    background-color: rgba(255, 255, 255, 0.95);
  }
}

/* Subtle divider styling */
.mission-section-divider {
  background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.3), transparent);
  height: 1px;
  margin: 2rem 0;
}

/* Enhanced spacing for better visual hierarchy */
.mission-spacing {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

@media (min-width: 1024px) {
  .mission-spacing {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
}

/* Mobile-specific background image positioning for Our Mission section */
@media (max-width: 767px) {
  /* Target the Our Mission section specifically */
  section[style*="5afa83af-def7-46aa-af5d-7ecfaeae87a8.png"] {
    /* Position background to show the right side with whiteboard/core values */
    background-position: 75% center !important;
    background-size: 150% auto !important;
    /* Ensure the image covers properly while showing the right portion */
    background-repeat: no-repeat !important;
  }
  
  /* Enhance the overlay to ensure the whiteboard content is visible but text is readable */
  section[style*="5afa83af-def7-46aa-af5d-7ecfaeae87a8.png"] .bg-slate-900\/50 {
    background: linear-gradient(
      to right, 
      rgba(15, 23, 42, 0.8) 0%, 
      rgba(15, 23, 42, 0.4) 50%, 
      rgba(15, 23, 42, 0.7) 100%
    ) !important;
  }
  
  /* Enhance text readability on mobile with stronger shadows */
  section[style*="5afa83af-def7-46aa-af5d-7ecfaeae87a8.png"] .text-slate-100,
  section[style*="5afa83af-def7-46aa-af5d-7ecfaeae87a8.png"] .text-white {
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.9) !important;
  }
  
  /* Improve spacing on mobile for better readability */
  section[style*="5afa83af-def7-46aa-af5d-7ecfaeae87a8.png"] .container {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }
  
  /* Adjust text sizing for mobile readability */
  section[style*="5afa83af-def7-46aa-af5d-7ecfaeae87a8.png"] h3 {
    font-size: 2.5rem !important;
    line-height: 1.2 !important;
  }
  
  section[style*="5afa83af-def7-46aa-af5d-7ecfaeae87a8.png"] p {
    font-size: 1rem !important;
    line-height: 1.6 !important;
    margin-bottom: 1.5rem !important;
  }
  
  /* Center text content horizontally to avoid conflict with background repositioning */
  section[style*="5afa83af-def7-46aa-af5d-7ecfaeae87a8.png"] .max-w-4xl {
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
  }
}

/* Tablet specific adjustments (768px to 1023px) - maintain current positioning */
@media (min-width: 768px) and (max-width: 1023px) {
  /* Keep center positioning for tablet */
  section[style*="5afa83af-def7-46aa-af5d-7ecfaeae87a8.png"] {
    background-position: center center !important;
  }
}

/* Desktop specific adjustments (1024px and above) - maintain current positioning */
@media (min-width: 1024px) {
  /* Keep center positioning for desktop */
  section[style*="5afa83af-def7-46aa-af5d-7ecfaeae87a8.png"] {
    background-position: center center !important;
  }
}