/* Custom CSS styles for Educational Company Website (Light Mode Only) */

/* --- Custom Variables & Base --- */
:root {
  --primary: #0F766E;
  --secondary: #14B8A6;
  --accent: #F59E0B;
  --bg-light: #F9FAFB;
  --text-dark: #111827; /* Gray 900 for high readability */
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', sans-serif;
  overflow-x: hidden;
  background-color: #F9FAFB;
  color: #374151; /* Gray 700 standard text */
}

/* Hide scrollbar for Chrome, Safari and Opera */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
/* Hide scrollbar for IE, Edge and Firefox */
.no-scrollbar {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

/* --- AI Neural HUD Styling & Keyframes --- */
.ai-hud-card {
  background: rgba(15, 23, 42, 0.88);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.ai-scanline {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #14B8A6, #F59E0B, transparent);
  animation: aiScan 3s linear infinite;
  opacity: 0.7;
}

@keyframes aiScan {
  0% { top: 0%; }
  100% { top: 100%; }
}

@keyframes nodePulse {
  0%, 100% { transform: scale(1); opacity: 0.8; }
  50% { transform: scale(1.3); opacity: 1; filter: drop-shadow(0 0 6px #14B8A6); }
}

.ai-node-pulse {
  animation: nodePulse 2s ease-in-out infinite;
}

.ai-tab-btn.active-tab {
  background-color: #0F766E;
  color: #FFFFFF;
  border-color: #14B8A6;
  box-shadow: 0 4px 12px rgba(15, 118, 110, 0.4);
}

/* --- Loader Animation --- */
#loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #FFFFFF;
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

.spinner {
  width: 50px;
  height: 50px;
  border: 5px solid #E5E7EB;
  border-top-color: #0F766E;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* --- Floating Elements --- */
@keyframes float {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(-20px) rotate(3deg);
  }
}

.floating-shape-1 {
  animation: float 8s ease-in-out infinite;
}

.floating-shape-2 {
  animation: float 6s ease-in-out infinite;
  animation-delay: 2s;
}

.floating-shape-3 {
  animation: float 10s ease-in-out infinite;
  animation-delay: 4s;
}

/* --- Glassmorphism (Light optimized) --- */
.glass {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.5);
}

/* --- Nav Blurs & Dynamic Context --- */
.nav-blur {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

#navbar {
  transition: background-color 0.3s ease, padding 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

#navbar.navbar-transparent .nav-logo-primary {
  color: #FFFFFF;
}
#navbar.navbar-transparent .nav-link {
  color: rgba(255, 255, 255, 0.9);
}
#navbar.navbar-transparent .nav-link:hover,
#navbar.navbar-transparent .nav-link.active {
  color: #FFFFFF;
  border-color: #F59E0B;
}
#navbar.navbar-transparent .mobile-toggle-btn {
  color: #FFFFFF;
}

#navbar.navbar-scrolled .nav-logo-primary {
  color: #0F766E;
}
#navbar.navbar-scrolled .nav-link {
  color: #374151;
}
#navbar.navbar-scrolled .nav-link:hover,
#navbar.navbar-scrolled .nav-link.active {
  color: #0F766E;
  border-color: #0F766E;
}
#navbar.navbar-scrolled .mobile-toggle-btn {
  color: #374151;
}

/* --- Card Hover Effects --- */
.hover-card-trigger {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.hover-card-trigger:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 25px -5px rgba(15, 118, 110, 0.12), 0 10px 10px -5px rgba(15, 118, 110, 0.06);
}

/* --- Custom Timelines --- */
.timeline-item::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #14B8A6;
  border: 4px solid #FFFFFF;
  z-index: 10;
  transition: all 0.3s ease;
}
.timeline-item:hover::after {
  background: #F59E0B;
  transform: translate(-50%, -50%) scale(1.3);
}

@media (max-width: 767px) {
  .timeline-item::after {
    display: none !important;
  }
}


/* --- Logo Marquee Animation --- */
@keyframes marquee {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-50%);
  }
}

.marquee-container {
  overflow: hidden;
  white-space: nowrap;
  position: relative;
}

.marquee-content {
  display: inline-flex;
  animation: marquee 25s linear infinite;
}

.marquee-content:hover {
  animation-play-state: paused;
}

/* Text Marquee */
.text-marquee {
  display: inline-flex;
  animation: marquee 35s linear infinite;
}
.text-marquee:hover {
  animation-play-state: paused;
}

/* Custom Grid Dot Background */
.bg-dots {
  background-image: radial-gradient(rgba(15, 118, 110, 0.15) 1px, transparent 1px);
  background-size: 24px 24px;
}

/* --- Card Shadow Adjustments --- */
.shadow-premium {
  box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.05), 0 5px 15px -5px rgba(0, 0, 0, 0.03);
}

/* Custom glow effects for accent elements */
.glow-primary {
  box-shadow: 0 0 15px rgba(15, 118, 110, 0.3);
}

/* --- Video Background Hero styling --- */
.video-hero-container {
  position: relative;
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  padding-top: 5.5rem; /* 88px clearance below navbar on mobile */
  padding-bottom: 3rem;
}

@media (min-width: 640px) {
  .video-hero-container {
    height: 100vh;
    padding-top: 0;
    padding-bottom: 0;
  }
}

.video-hero-bg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  z-index: 0;
  object-fit: cover;
  pointer-events: none;
}

.video-hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(15, 23, 42, 0.55); /* 55% dark slate overlay */
  z-index: 1;
}

.video-hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
}

/* Mouse Scroll Indicator */
@keyframes scrollIndicator {
  0% { transform: translateY(0) opacity: 1; }
  50% { transform: translateY(8px) opacity: 0.3; }
  100% { transform: translateY(0) opacity: 1; }
}

.scroll-indicator-dot {
  animation: scrollIndicator 1.8s ease-in-out infinite;
}

/* Smooth zoom on hover */
.zoom-img-container {
  overflow: hidden;
}
.zoom-img-container img {
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.zoom-img-container:hover img {
  transform: scale(1.1);
}

/* --- WhatsApp Floating Button & Micro Animations (Compact & Sleek) --- */
@keyframes whatsappPulseRing {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
  }
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 14px rgba(16, 185, 129, 0);
  }
  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
  }
}

@keyframes whatsappSubtleTilt {
  0%, 85%, 100% { transform: rotate(0deg); }
  88%, 94% { transform: rotate(-12deg); }
  91%, 97% { transform: rotate(12deg); }
}

.whatsapp-compact-btn {
  animation: whatsappPulseRing 2.2s infinite;
}

.whatsapp-compact-icon {
  animation: whatsappSubtleTilt 4s ease-in-out infinite;
}