/* 
 * TESTENZIA ENHANCED HOMEPAGE STYLING
 * Educational theme with vibrant colors for JEE & NEET test platform
 */

/* Main background with educational theme */
body {
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 50%, #f0f9ff 100%) !important;
  background-attachment: fixed !important;
  position: relative !important;
}

/* Educational pattern overlay */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: 
    linear-gradient(rgba(59, 130, 246, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(59, 130, 246, 0.05) 1px, transparent 1px);
  background-size: 20px 20px;
  pointer-events: none;
  z-index: -1;
}

/* Hero section styling */
.jee-neet-hero-section {
  background: linear-gradient(135deg, #4158d0 0%, #c850c0 46%, #ffcc70 100%);
  position: relative;
  overflow: hidden;
  padding: 4rem 0;
  color: white;
  border-radius: 0 0 2rem 2rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  animation: heroGradientShift 15s ease infinite alternate;
}

@keyframes heroGradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* Hero badge styling */
.jee-neet-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(4px);
  padding: 0.5rem 1rem;
  border-radius: 2rem;
  font-weight: 600;
  font-size: 0.9rem;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  animation: badgePulse 3s infinite;
}

@keyframes badgePulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  }
  50% {
    transform: scale(1.05);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
  }
}

/* Hero section patterns */
.jee-neet-hero-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: 
    radial-gradient(circle at 25% 25%, rgba(255, 255, 255, 0.2) 0%, transparent 50%),
    radial-gradient(circle at 75% 75%, rgba(255, 255, 255, 0.2) 0%, transparent 50%);
  opacity: 0.6;
  pointer-events: none;
  z-index: 0;
}

/* Hero content should be above patterns */
.jee-neet-hero-section > * {
  position: relative;
  z-index: 1;
}

/* Enhanced dashboard styling */
.enhanced-dashboard {
  background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 50%, #1d4ed8 100%);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
  position: relative;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  animation: dashboardEntrance 0.8s ease-out forwards;
  transform-style: preserve-3d;
  transform: perspective(1000px) rotateX(2deg);
  transition: transform 0.5s ease-out;
}

.enhanced-dashboard:hover {
  transform: perspective(1000px) rotateX(0deg) translateY(-5px);
}

/* Dashboard entrance animation */
@keyframes dashboardEntrance {
  0% { 
    opacity: 0;
    transform: perspective(1000px) rotateX(5deg) translateY(20px);
  }
  100% { 
    opacity: 1;
    transform: perspective(1000px) rotateX(2deg) translateY(0);
  }
}

/* Dashboard shine effect */
.dashboard-shine {
  position: absolute;
  top: 0;
  left: -150%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg, 
    rgba(255,255,255,0) 0%, 
    rgba(255,255,255,0.2) 50%, 
    rgba(255,255,255,0) 100%
  );
  transform: skewX(-20deg);
  animation: shineEffect 3s infinite;
}

@keyframes shineEffect {
  to {
    left: 150%;
  }
}

/* Dashboard text coloring */
.enhanced-dashboard *, 
.performance-dashboard *, 
.analytics-dashboard * {
  color: white !important;
}

/* Ensure metrics and labels are visible */
.recharts-text, .recharts-label, .recharts-cartesian-axis-tick-value {
  fill: white !important;
  color: white !important;
}

/* Brand name styling */
.brand-testenzia {
  display: inline-block;
  font-weight: bold;
  background: linear-gradient(135deg, #3b82f6, #f97316);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  font-size: 4rem;
  line-height: 1.1;
  margin: 0;
  padding: 0;
  letter-spacing: -0.02em;
}

.brand-test {
  color: #3b82f6;
  display: inline-block;
  transition: all 0.3s ease;
}

.brand-enzia {
  color: #f97316;
  display: inline-block;
  transition: all 0.3s ease;
}

/* Add hover effect to brand name */
.brand-testenzia:hover .brand-test {
  transform: translateY(-2px);
  text-shadow: 0 2px 10px rgba(59, 130, 246, 0.4);
}

.brand-testenzia:hover .brand-enzia {
  transform: translateY(-2px);
  text-shadow: 0 2px 10px rgba(249, 115, 22, 0.4);
}

/* Feature card styling */
.feature-card {
  background: white;
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  transition: all 0.3s ease;
  border-top: 4px solid transparent;
  border-image: linear-gradient(to right, #3b82f6, #f97316);
  border-image-slice: 1;
}

.feature-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.12);
}

/* Feature icon container */
.feature-icon-container {
  width: 60px;
  height: 60px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(249, 115, 22, 0.1));
}

/* Button styling */
.btn-primary, .cta-button {
  background: linear-gradient(135deg, #3b82f6, #f97316);
  color: white;
  font-weight: 600;
  border: none;
  border-radius: 8px;
  padding: 0.75rem 2rem;
  transition: all 0.3s ease;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  position: relative;
  overflow: hidden;
  z-index: 1;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Hover effect with glow */
.btn-primary:hover, .cta-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(59, 130, 246, 0.3), 0 4px 10px rgba(249, 115, 22, 0.3);
}

/* Button shine effect */
.btn-primary::after, .cta-button::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -100%;
  width: 70%;
  height: 200%;
  background: linear-gradient(
    90deg, 
    rgba(255,255,255,0) 0%, 
    rgba(255,255,255,0.3) 50%, 
    rgba(255,255,255,0) 100%
  );
  transform: rotate(25deg);
  transition: all 0.5s ease;
  opacity: 0;
}

.btn-primary:hover::after, .cta-button:hover::after {
  left: 100%;
  opacity: 1;
}

/* Subject cards */
.subject-card {
  border-radius: 16px;
  padding: 2rem;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.physics-card {
  background: linear-gradient(135deg, #0061ff 0%, #60efff 100%);
}

.chemistry-card {
  background: linear-gradient(135deg, #f9d423 0%, #ff4e50 100%);
}

.mathematics-card {
  background: linear-gradient(135deg, #0ba360 0%, #3cba92 100%);
}

.subject-card h3 {
  color: white;
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.subject-card p {
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 1.5rem;
}

.subject-icon {
  position: absolute;
  bottom: -30px;
  right: -20px;
  font-size: 8rem;
  opacity: 0.15;
  transform: rotate(-15deg);
}

/* Student testimonial */
.testimonial-card {
  background: white;
  border-radius: 12px;
  padding: 2rem;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

.testimonial-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.testimonial-card::before {
  content: '"';
  position: absolute;
  top: -30px;
  left: 20px;
  font-size: 150px;
  opacity: 0.1;
  font-family: serif;
}

/* Stats counter */
.stats-counter {
  font-size: 2.5rem;
  font-weight: 800;
  background: linear-gradient(135deg, #3b82f6, #f97316);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: inline-block;
}

/* Enhanced Educational Theme Animations */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

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

@keyframes slideInFromLeft {
  from { opacity: 0; transform: translateX(-30px); }
  to { opacity: 1; transform: translateX(0); }
}

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

@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 0.5;
  }
  50% {
    transform: scale(1.05);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 0.5;
  }
}

@keyframes shine {
  0% {
    background-position: -100px;
  }
  40%, 100% {
    background-position: 300px;
  }
}

/* Educational theme specific animations */
@keyframes textPulse {
  0% { text-shadow: 0 0 0 rgba(59, 130, 246, 0); }
  50% { text-shadow: 0 0 5px rgba(59, 130, 246, 0.5); }
  100% { text-shadow: 0 0 0 rgba(59, 130, 246, 0); }
}

@keyframes iconFloat {
  0% { transform: translateY(0) scale(1); opacity: 0.7; }
  50% { transform: translateY(-10px) scale(1.1); opacity: 1; }
  100% { transform: translateY(0) scale(1); opacity: 0.7; }
}

@keyframes subjectReveal {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes cardPop {
  0% { transform: scale(1); }
  40% { transform: scale(1.02); }
  80% { transform: scale(0.98); }
  100% { transform: scale(1); }
}

.animate-fadeIn {
  animation: fadeIn 0.8s ease-out forwards;
}

.animate-slideFromRight {
  animation: slideInFromRight 0.8s ease-out forwards;
}

.animate-slideFromLeft {
  animation: slideInFromLeft 0.8s ease-out forwards;
}

.animate-float {
  animation: float 6s ease-in-out infinite;
}

.animate-pulse {
  animation: pulse 3s ease-in-out infinite;
}

.text-pulse {
  animation: textPulse 2s ease-in-out infinite;
}

.subject-reveal {
  animation: subjectReveal 5s ease infinite;
}

.feature-highlight {
  animation: cardPop 1s ease-out;
}

/* Particles styling */
.particle {
  position: absolute;
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  pointer-events: none;
}

/* Educational icons for subject cards */
.subject-educational-icons {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 5;
}

.ed-icon {
  position: absolute;
  font-size: 24px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.subject-card:hover .ed-icon {
  opacity: 0.7;
}

.ed-icon-1 {
  top: 25%;
  right: 15%;
  animation: iconFloat 4s ease-in-out infinite;
}

.ed-icon-2 {
  top: 35%;
  right: 25%;
  animation: iconFloat 4s ease-in-out 0.5s infinite;
}

.ed-icon-3 {
  top: 45%;
  right: 20%;
  animation: iconFloat 4s ease-in-out 1s infinite;
}

/* Subject Card Enhanced Styles */
.subject-card {
  position: relative;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.subject-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at center, rgba(255,255,255,0.1) 0%, rgba(0,0,0,0) 70%);
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}

.subject-card:hover::before {
  opacity: 1;
}

/* Enhanced Subject Card Styling */
.physics-card::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M50 25C62.1522 25 72 34.8478 72 47C72 59.1522 62.1522 69 50 69C37.8478 69 28 59.1522 28 47C28 34.8478 37.8478 25 50 25ZM50 28C39.5066 28 31 36.5066 31 47C31 57.4934 39.5066 66 50 66C60.4934 66 69 57.4934 69 47C69 36.5066 60.4934 28 50 28Z' fill='white' fill-opacity='0.1'/%3E%3Cpath d='M50 50L80 20M50 50L20 20M50 50L20 80M50 50L80 80' stroke='white' stroke-opacity='0.1' stroke-width='2'/%3E%3C/svg%3E");
  background-size: 100px 100px;
  opacity: 0.2;
  z-index: 0;
}

.chemistry-card::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='30' cy='30' r='10' fill='white' fill-opacity='0.1'/%3E%3Ccircle cx='70' cy='30' r='10' fill='white' fill-opacity='0.1'/%3E%3Ccircle cx='30' cy='70' r='10' fill='white' fill-opacity='0.1'/%3E%3Ccircle cx='70' cy='70' r='10' fill='white' fill-opacity='0.1'/%3E%3Ccircle cx='50' cy='50' r='12' fill='white' fill-opacity='0.1'/%3E%3Cpath d='M30 30L70 70M30 70L70 30M30 30L30 70M70 30L70 70M30 30L70 30M30 70L70 70' stroke='white' stroke-opacity='0.1' stroke-width='2'/%3E%3C/svg%3E");
  background-size: 100px 100px;
  opacity: 0.2;
  z-index: 0;
}

.mathematics-card::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 40H80M20 60H80M40 20V80M60 20V80' stroke='white' stroke-opacity='0.1' stroke-width='2'/%3E%3Cpath d='M25 25L35 35M65 25L75 35M25 75L35 65M65 75L75 65' stroke='white' stroke-opacity='0.1' stroke-width='2'/%3E%3C/svg%3E");
  background-size: 100px 100px;
  opacity: 0.2;
  z-index: 0;
}

.subject-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

/* Button shine effect */
.btn-primary {
  position: relative;
  overflow: hidden;
}

.btn-primary::after {
  content: '';
  position: absolute;
  top: 0;
  left: var(--x-pos, 0);
  width: 30px;
  height: 100%;
  background: linear-gradient(to right, 
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.4) 50%,
    rgba(255,255,255,0) 100%
  );
  transform: translateX(-100%) skewX(-15deg);
  transition: none;
}

.btn-primary:hover::after {
  transform: translateX(500%) skewX(-15deg);
  transition: transform 0.7s ease;
}

/* Particles container */
#particles-js {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

/* Call to action section */
.cta-section {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.95), rgba(124, 58, 237, 0.95));
  padding: 4rem 0;
  border-radius: 16px;
  margin: 4rem 0;
  position: relative;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.cta-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%23ffffff' fill-opacity='0.1' fill-rule='evenodd'/%3E%3C/svg%3E");
  opacity: 0.5;
}

/* Button styles */
.btn-primary {
  background: linear-gradient(135deg, #3b82f6, #7c3aed);
  color: white;
  font-weight: 600;
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
  transition: all 0.3s ease;
  box-shadow: 0 4px 6px rgba(59, 130, 246, 0.2);
  position: relative;
  overflow: hidden;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 7px 14px rgba(59, 130, 246, 0.3);
}

.btn-primary::after {
  content: '';
  position: absolute;
  top: -50%;
  right: -50%;
  bottom: -50%;
  left: -50%;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%);
  transform: rotate(45deg) translate(-90%, 0);
  transition: all 0.5s ease-in-out;
}

.btn-primary:hover::after {
  transform: rotate(45deg) translate(90%, 0);
}

/* FAQ styles */
.faq-card {
  background-color: rgba(255, 255, 255, 0.6);
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(59, 130, 246, 0.1);
  transition: all 0.3s ease;
}

.faq-card:hover {
  background-color: rgba(255, 255, 255, 0.9);
  border-color: rgba(59, 130, 246, 0.3);
}

.section-title {
  background: linear-gradient(135deg, #1e40af, #7c3aed);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  position: relative;
}

/* Testimonial card styles */
.testimonial-card {
  background-color: white;
  border-radius: 16px;
  padding: 2rem;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
  position: relative;
  transition: all 0.3s ease;
  border: 1px solid rgba(219, 234, 254, 0.4);
  overflow: hidden;
}

.testimonial-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
  border-color: rgba(59, 130, 246, 0.3);
}

.testimonial-card::before {
  content: '"';
  position: absolute;
  top: 20px;
  right: 25px;
  font-size: 80px;
  font-family: Georgia, serif;
  color: rgba(59, 130, 246, 0.1);
  line-height: 1;
}

/* Testimonial card gradient background */
.testimonial-card::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 5px;
  background: linear-gradient(90deg, #3b82f6, #7c3aed, #ec4899);
  transform: translateY(5px);
  transition: transform 0.3s ease;
}

.testimonial-card:hover::after {
  transform: translateY(0);
}

/* Animated avatar border */
.testimonial-card .rounded-full {
  border: 3px solid transparent;
  background-clip: padding-box;
  position: relative;
}

.testimonial-card .rounded-full::before {
  content: '';
  position: absolute;
  top: -3px;
  left: -3px;
  right: -3px;
  bottom: -3px;
  background: linear-gradient(45deg, #3b82f6, #7c3aed);
  border-radius: 50%;
  z-index: -1;
}

/* Footer styling with enhanced educational theme */
footer {
  position: relative;
  overflow: hidden;
}

footer::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 200px;
  background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.2));
  pointer-events: none;
}

footer svg {
  width: 100%;
  height: 80px;
}