/* Font setup - Using fonts that support Vietnamese */
* {
  font-family: "Inter", "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

@keyframes pulse-glow {
  0%,
  100% {
    transform: scale(1);
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.6);
  }
  50% {
    transform: scale(1.05);
    box-shadow: 0 0 40px rgba(255, 215, 0, 0.9);
  }
}

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

@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Enhanced 3D Text Effects */
@keyframes brightRainbow3D {
  0% {
    color: #ff8fab;
    text-shadow:
      1px 1px 0px #ff6b9d, 2px 2px 0px #ff4081, 3px 3px 0px #e91e63, 4px 4px 0px rgba(0, 0, 0, 0.4), 5px 5px 0px rgba(
        0,
        0,
        0,
        0.5
      ), 6px 6px 12px rgba(255, 143, 171, 0.7), 7px 7px 18px rgba(255, 143, 171, 0.5), 8px 8px 24px rgba(0, 0, 0, 0.3);
  }
  20% {
    color: #ffb74d;
    text-shadow:
      1px 1px 0px #ffa726, 2px 2px 0px #ff9800, 3px 3px 0px #f57c00, 4px 4px 0px rgba(0, 0, 0, 0.4), 5px 5px 0px rgba(
        0,
        0,
        0,
        0.5
      ), 6px 6px 12px rgba(255, 183, 77, 0.7), 7px 7px 18px rgba(255, 183, 77, 0.5), 8px 8px 24px rgba(0, 0, 0, 0.3);
  }
  40% {
    color: #fff176;
    text-shadow:
      1px 1px 0px #ffeb3b, 2px 2px 0px #fdd835, 3px 3px 0px #f9a825, 4px 4px 0px rgba(0, 0, 0, 0.4), 5px 5px 0px rgba(
        0,
        0,
        0,
        0.5
      ), 6px 6px 12px rgba(255, 241, 118, 0.7), 7px 7px 18px rgba(255, 241, 118, 0.5), 8px 8px 24px rgba(0, 0, 0, 0.3);
  }
  60% {
    color: #81c784;
    text-shadow:
      1px 1px 0px #66bb6a, 2px 2px 0px #4caf50, 3px 3px 0px #388e3c, 4px 4px 0px rgba(0, 0, 0, 0.4), 5px 5px 0px rgba(
        0,
        0,
        0,
        0.5
      ), 6px 6px 12px rgba(129, 199, 132, 0.7), 7px 7px 18px rgba(129, 199, 132, 0.5), 8px 8px 24px rgba(0, 0, 0, 0.3);
  }
  80% {
    color: #64b5f6;
    text-shadow:
      1px 1px 0px #42a5f5, 2px 2px 0px #2196f3, 3px 3px 0px #1976d2, 4px 4px 0px rgba(0, 0, 0, 0.4), 5px 5px 0px rgba(
        0,
        0,
        0,
        0.5
      ), 6px 6px 12px rgba(100, 181, 246, 0.7), 7px 7px 18px rgba(100, 181, 246, 0.5), 8px 8px 24px rgba(0, 0, 0, 0.3);
  }
  100% {
    color: #ff8fab;
    text-shadow:
      1px 1px 0px #ff6b9d, 2px 2px 0px #ff4081, 3px 3px 0px #e91e63, 4px 4px 0px rgba(0, 0, 0, 0.4), 5px 5px 0px rgba(
        0,
        0,
        0,
        0.5
      ), 6px 6px 12px rgba(255, 143, 171, 0.7), 7px 7px 18px rgba(255, 143, 171, 0.5), 8px 8px 24px rgba(0, 0, 0, 0.3);
  }
}

/* Color-changing shadow animation for title-desc */
@keyframes colorfulShadow {
  0% {
    text-shadow:
      1px 1px 0px #3b82f6, 2px 2px 0px #2563eb, 3px 3px 0px #1d4ed8, 4px 4px 8px rgba(59, 130, 246, 0.6), 5px 5px 15px rgba(
        59,
        130,
        246,
        0.4
      ), 6px 6px 20px rgba(59, 130, 246, 0.3);
  }
  16% {
    text-shadow:
      1px 1px 0px #8b5cf6, 2px 2px 0px #7c3aed, 3px 3px 0px #6d28d9, 4px 4px 8px rgba(139, 92, 246, 0.6), 5px 5px 15px rgba(
        139,
        92,
        246,
        0.4
      ), 6px 6px 20px rgba(139, 92, 246, 0.3);
  }
  33% {
    text-shadow:
      1px 1px 0px #f59e0b, 2px 2px 0px #d97706, 3px 3px 0px #b45309, 4px 4px 8px rgba(245, 158, 11, 0.6), 5px 5px 15px rgba(
        245,
        158,
        11,
        0.4
      ), 6px 6px 20px rgba(245, 158, 11, 0.3);
  }
  50% {
    text-shadow:
      1px 1px 0px #10b981, 2px 2px 0px #059669, 3px 3px 0px #047857, 4px 4px 8px rgba(16, 185, 129, 0.6), 5px 5px 15px rgba(
        16,
        185,
        129,
        0.4
      ), 6px 6px 20px rgba(16, 185, 129, 0.3);
  }
  66% {
    text-shadow:
      1px 1px 0px #ef4444, 2px 2px 0px #dc2626, 3px 3px 0px #b91c1c, 4px 4px 8px rgba(239, 68, 68, 0.6), 5px 5px 15px rgba(
        239,
        68,
        68,
        0.4
      ), 6px 6px 20px rgba(239, 68, 68, 0.3);
  }
  83% {
    text-shadow:
      1px 1px 0px #06b6d4, 2px 2px 0px #0891b2, 3px 3px 0px #0e7490, 4px 4px 8px rgba(6, 182, 212, 0.6), 5px 5px 15px rgba(
        6,
        182,
        212,
        0.4
      ), 6px 6px 20px rgba(6, 182, 212, 0.3);
  }
  100% {
    text-shadow:
      1px 1px 0px #3b82f6, 2px 2px 0px #2563eb, 3px 3px 0px #1d4ed8, 4px 4px 8px rgba(59, 130, 246, 0.6), 5px 5px 15px rgba(
        59,
        130,
        246,
        0.4
      ), 6px 6px 20px rgba(59, 130, 246, 0.3);
  }
}

@keyframes textGlow {
  0%,
  100% {
    filter: brightness(1) saturate(1);
  }
  50% {
    filter: brightness(1.2) saturate(1.3);
  }
}

@keyframes slideInLeft {
  0% {
    opacity: 0;
    transform: translateX(-50px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInRight {
  0% {
    opacity: 0;
    transform: translateX(50px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

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

@keyframes megaFloat {
  0%,
  100% {
    transform: perspective(900px) rotateX(25deg) translateY(0px) scale(1);
  }
  25% {
    transform: perspective(900px) rotateX(25deg) translateY(-5px) scale(1.02);
  }
  50% {
    transform: perspective(900px) rotateX(25deg) translateY(-10px) scale(1.03);
  }
  75% {
    transform: perspective(900px) rotateX(25deg) translateY(-3px) scale(1.01);
  }
}

@keyframes subtleGlow {
  0%,
  100% {
    text-shadow: 1px 1px 2px rgba(226, 232, 240, 0.3), 2px 2px 4px rgba(226, 232, 240, 0.2);
    filter: brightness(1);
  }
  50% {
    text-shadow: 1px 1px 4px rgba(226, 232, 240, 0.5), 2px 2px 8px rgba(226, 232, 240, 0.3), 3px 3px 12px
      rgba(226, 232, 240, 0.2);
    filter: brightness(1.1);
  }
}

@keyframes gentleFloat {
  0%,
  100% {
    transform: perspective(400px) rotateX(10deg) translateY(0px);
  }
  50% {
    transform: perspective(400px) rotateX(10deg) translateY(-5px);
  }
}

/* Hero Section - Full Viewport Height */
.hero-section {
  min-height: 100vh;
  height: 100vh;
  padding-top: 6rem; /* Base padding for mobile */
}

/* Tablet and larger screens */
@media (min-width: 768px) {
  .hero-section {
    padding-top: 7rem; /* Tablet padding */
  }
}

/* Desktop and macbook screens */
@media (min-width: 1024px) {
  .hero-section {
    padding-top: 8rem; /* Desktop padding */
  }
}

/* Large desktop screens */
@media (min-width: 1280px) {
  .hero-section {
    padding-top: 9rem; /* Large desktop padding */
  }
}

/* Hero Content Margin - Responsive spacing for banner */
.hero-section .relative.z-40 {
  margin-top: 140px; /* Mobile - banner at top-20 */
}

@media (min-width: 768px) {
  .hero-section .relative.z-40 {
    margin-top: 160px; /* Tablet - banner at top-24 */
  }
}

@media (min-width: 1024px) {
  .hero-section .relative.z-40 {
    margin-top: 200px; /* Desktop - banner at top-28 */
  }
}

@media (min-width: 1280px) {
  .hero-section .relative.z-40 {
    margin-top: 250px; /* XL Desktop - banner at top-32 */
  }
}

/* Main Content Wrapper with Unified Background */
.main-content-wrapper {
  background: linear-gradient(
    135deg,
    rgba(15, 23, 42, 0.95) 0%,
    rgba(30, 41, 59, 0.9) 25%,
    rgba(51, 65, 85, 0.95) 50%,
    rgba(30, 41, 59, 0.9) 75%,
    rgba(15, 23, 42, 0.95) 100%
  );
  backdrop-filter: blur(10px);
}
/* Carousel Styles */
.carousel-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  min-height: 100%;
  opacity: 0;
  transition: opacity 0.6s ease-in-out;
  display: block;
}

.carousel-slide.active {
  opacity: 1;
  position: relative;
  height: auto;
}

.carousel-slide:not(.active) {
  position: absolute;
  height: 0;
  overflow: hidden;
}

.carousel-dot.active {
  background-color: white !important;
  transform: scale(1.1);
}

/* Hero Carousel Styles */
.hero-carousel-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  min-height: 100%;
  opacity: 0;
  transition: opacity 0.6s ease-in-out;
  display: block;
}

.hero-carousel-slide.active {
  opacity: 1;
  position: relative;
  height: auto;
}

.hero-carousel-slide:not(.active) {
  position: absolute;
  height: 0;
  overflow: hidden;
}

.hero-carousel-dot.active {
  background-color: white !important;
  border-color: #10b981 !important;
  transform: scale(1.2);
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.5);
}

/* 3D Text Styles */
.text-3d-blue {
  font-family: "Inter", "Roboto", sans-serif;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #3b82f6;
  text-shadow: 1px 1px 0px #2563eb, 2px 2px 0px #1d4ed8, 3px 3px 0px #1e40af, 4px 4px 5px rgba(59, 130, 246, 0.3), 5px
    5px 10px rgba(59, 130, 246, 0.2);
}

.text-3d-red {
  font-family: "Inter", "Roboto", sans-serif;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #dc2626;
  text-shadow: 1px 1px 0px #b91c1c, 2px 2px 0px #991b1b, 3px 3px 0px #7f1d1d, 4px 4px 5px rgba(220, 38, 38, 0.3), 5px
    5px 10px rgba(220, 38, 38, 0.2);
}

.text-3d-purple {
  font-family: "Inter", "Roboto", sans-serif;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #7c3aed;
  text-shadow: 1px 1px 0px #6d28d9, 2px 2px 0px #5b21b6, 3px 3px 0px #4c1d95, 4px 4px 5px rgba(124, 58, 237, 0.3), 5px
    5px 10px rgba(124, 58, 237, 0.2);
}

.text-3d-gold {
  font-family: "Inter", "Roboto", sans-serif;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #d97706;
  text-shadow: 1px 1px 0px #b45309, 2px 2px 0px #92400e, 3px 3px 0px #78350f, 4px 4px 5px rgba(217, 119, 6, 0.3), 5px
    5px 10px rgba(217, 119, 6, 0.2);
}

.text-3d-green {
  font-family: "Inter", "Roboto", sans-serif;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #10b981;
  text-shadow: 1px 1px 0px #059669, 2px 2px 0px #047857, 3px 3px 0px #065f46, 4px 4px 5px rgba(16, 185, 129, 0.3), 5px
    5px 10px rgba(16, 185, 129, 0.2);
}

.text-3d-green {
  font-family: "Inter", "Roboto", sans-serif;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #059669;
  text-shadow: 1px 1px 0px #047857, 2px 2px 0px #065f46, 3px 3px 0px #064e3b, 4px 4px 5px rgba(5, 150, 105, 0.3), 5px
    5px 10px rgba(5, 150, 105, 0.2);
}

/* Enhanced Title Styles */
.title-main-enhanced {
  font-family: "Inter", "Roboto", sans-serif;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 4px;
  color: #ffffff;
  transform: perspective(900px) rotateX(25deg);
  animation: fadeInUp 1.2s ease-out, colorfulShadow 4s ease-in-out infinite, megaFloat 4s ease-in-out infinite;
  position: relative;
  z-index: 100; /* Increased from 60 to 100 to be above header */
}

.title-main-enhanced::before {
  content: "";
  position: absolute;
  top: -20px;
  left: -20px;
  right: -20px;
  bottom: -20px;
  background: linear-gradient(
    45deg,
    rgba(255, 215, 0, 0.3),
    rgba(255, 20, 147, 0.3),
    rgba(0, 191, 255, 0.3),
    rgba(50, 205, 50, 0.3)
  );
  background-size: 1000% 1000%;
  border-radius: 30px;
  z-index: -1;
  filter: blur(10px);
  animation: gradient-shift 3s ease-in-out infinite;
}

/* Also ensure title-desc-subtle has high z-index */
.title-desc-subtle {
  font-family: "Inter", "Roboto", sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #e2e8f0;
  transform: perspective(400px) rotateX(10deg);
  animation: slideInRight 1s ease-out 0.8s both, subtleGlow 3s ease-in-out infinite, gentleFloat 4s ease-in-out infinite;
  position: relative;
  z-index: 95; /* Increased from 55 to 95 */
}

/* Stats Items */
.stats-item {
  transition: all 0.3s ease;
  position: relative;
  z-index: 90; /* Increased from 55 to 90 */
}

.stats-item:hover {
  transform: scale(1.05) translateY(-5px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

/* Section Cards */
.section-card {
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.8), rgba(30, 41, 59, 0.9));
  border: 2px solid rgba(148, 163, 184, 0.2);
  border-radius: 24px;
  padding: 1.5rem;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  position: relative;
  overflow: hidden;
}

@media (min-width: 768px) {
  .section-card {
    padding: 2rem;
  }
}

.section-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(96, 165, 250, 0.8), transparent);
  animation: gradient-shift 3s ease-in-out infinite;
}

/* Section Background Banners */
.section-banner-blue {
  background: linear-gradient(
    135deg,
    rgba(59, 130, 246, 0.05) 0%,
    rgba(37, 99, 235, 0.08) 25%,
    rgba(29, 78, 216, 0.1) 50%,
    rgba(30, 64, 175, 0.08) 75%,
    rgba(30, 58, 138, 0.05) 100%
  );
  border: 2px solid rgba(96, 165, 250, 0.15);
  box-shadow: 0 0 15px rgba(59, 130, 246, 0.05), inset 0 0 15px rgba(96, 165, 250, 0.03);
  transition: all 0.3s ease;
}

.section-banner-blue:hover {
  border-color: rgba(96, 165, 250, 0.2);
  box-shadow: 0 0 20px rgba(59, 130, 246, 0.08), inset 0 0 20px rgba(96, 165, 250, 0.05);
}

.section-banner-red {
  background: linear-gradient(
    135deg,
    rgba(220, 38, 38, 0.05) 0%,
    rgba(185, 28, 28, 0.08) 25%,
    rgba(153, 27, 27, 0.1) 50%,
    rgba(127, 29, 29, 0.08) 75%,
    rgba(102, 30, 30, 0.05) 100%
  );
  border: 2px solid rgba(220, 38, 38, 0.15);
  box-shadow: 0 0 15px rgba(220, 38, 38, 0.05), inset 0 0 15px rgba(220, 38, 38, 0.03);
  transition: all 0.3s ease;
}

.section-banner-red:hover {
  border-color: rgba(220, 38, 38, 0.2);
  box-shadow: 0 0 20px rgba(220, 38, 38, 0.08), inset 0 0 20px rgba(220, 38, 38, 0.05);
}

.section-banner-purple {
  background: linear-gradient(
    135deg,
    rgba(124, 58, 237, 0.05) 0%,
    rgba(109, 40, 217, 0.08) 25%,
    rgba(91, 33, 182, 0.1) 50%,
    rgba(76, 29, 149, 0.08) 75%,
    rgba(61, 25, 120, 0.05) 100%
  );
  border: 2px solid rgba(124, 58, 237, 0.15);
  box-shadow: 0 0 15px rgba(124, 58, 237, 0.05), inset 0 0 15px rgba(124, 58, 237, 0.03);
  transition: all 0.3s ease;
}

.section-banner-purple:hover {
  border-color: rgba(124, 58, 237, 0.2);
  box-shadow: 0 0 20px rgba(124, 58, 237, 0.08), inset 0 0 20px rgba(124, 58, 237, 0.05);
}

.section-banner-gold {
  background: linear-gradient(
    135deg,
    rgba(217, 119, 6, 0.05) 0%,
    rgba(180, 83, 9, 0.08) 25%,
    rgba(146, 64, 14, 0.1) 50%,
    rgba(120, 53, 15, 0.08) 75%,
    rgba(92, 41, 17, 0.05) 100%
  );
  border: 2px solid rgba(217, 119, 6, 0.15);
  box-shadow: 0 0 15px rgba(217, 119, 6, 0.05), inset 0 0 15px rgba(217, 119, 6, 0.03);
  transition: all 0.3s ease;
}

.section-banner-gold:hover {
  border-color: rgba(217, 119, 6, 0.2);
  box-shadow: 0 0 20px rgba(217, 119, 6, 0.08), inset 0 0 20px rgba(217, 119, 6, 0.05);
}

/* Header Button Styles */
.header-btn-primary {
  background: linear-gradient(135deg, #fbbf24, #f59e0b, #d97706);
  border: 2px solid #fbbf24;
  color: #000;
  padding: 0.5rem 1.25rem;
  border-radius: 0.75rem;
  font-weight: bold;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(251, 191, 36, 0.3);
}

.header-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(251, 191, 36, 0.4);
}

.header-btn-secondary {
  background: linear-gradient(135deg, #34d399, #10b981, #059669);
  border: 2px solid #34d399;
  color: #fff;
  padding: 0.5rem 1.25rem;
  border-radius: 0.75rem;
  font-weight: bold;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(52, 211, 153, 0.3);
}

.header-btn-secondary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(52, 211, 153, 0.4);
}

.header-contact {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.1), rgba(255, 193, 7, 0.1));
  border: 2px solid rgba(255, 215, 0, 0.3);
  color: #ffd700;
  padding: 0.5rem 1rem;
  border-radius: 0.75rem;
  font-weight: bold;
  transition: all 0.3s ease;
}

.header-contact:hover {
  border-color: rgba(255, 215, 0, 0.5);
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.15), rgba(255, 193, 7, 0.15));
}

/* Modern Transparent Green Header Styles */
.modern-header {
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.glass-effect {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Enhanced Header Animations */
@keyframes headerGlow {
  0%, 100% {
    box-shadow: 
      0 0 20px rgba(16, 185, 129, 0.3),
      0 0 40px rgba(52, 211, 153, 0.2),
      0 0 60px rgba(5, 150, 105, 0.1);
  }
  50% {
    box-shadow: 
      0 0 30px rgba(16, 185, 129, 0.4),
      0 0 60px rgba(52, 211, 153, 0.3),
      0 0 90px rgba(5, 150, 105, 0.2);
  }
}

.header-glow {
  animation: headerGlow 3s ease-in-out infinite;
}

/* Glassmorphism Button Effects */
.glass-button {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.glass-button:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.3);
  transform: translateY(-2px);
}

/* Enhanced Green Gradient Animation */
@keyframes greenWave {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.green-wave {
  background: linear-gradient(45deg, #10b981, #34d399, #6ee7b7, #10b981);
  background-size: 400% 400%;
  animation: greenWave 6s ease-in-out infinite;
}

/* Logo Enhancement */
.logo-glow {
  filter: drop-shadow(0 0 10px rgba(16, 185, 129, 0.5));
  transition: all 0.3s ease;
}

.logo-glow:hover {
  filter: drop-shadow(0 0 20px rgba(16, 185, 129, 0.8));
  transform: scale(1.05);
}

/* Mobile Header Buttons */
.mobile-btn-primary {
  background: linear-gradient(135deg, #fbbf24, #f59e0b, #d97706);
  border: 2px solid #fbbf24;
  color: #000;
  padding: 0.75rem 1rem;
  border-radius: 0.75rem;
  font-weight: bold;
  transition: all 0.3s ease;
  text-align: center;
  box-shadow: 0 4px 15px rgba(251, 191, 36, 0.3);
}

.mobile-btn-secondary {
  background: linear-gradient(135deg, #34d399, #10b981, #059669);
  border: 2px solid #34d399;
  color: #fff;
  padding: 0.75rem 1rem;
  border-radius: 0.75rem;
  font-weight: bold;
  transition: all 0.3s ease;
  text-align: center;
  box-shadow: 0 4px 15px rgba(52, 211, 153, 0.3);
}

.mobile-contact {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.1), rgba(255, 193, 7, 0.1));
  border: 2px solid rgba(255, 215, 0, 0.3);
  color: #ffd700;
  padding: 0.75rem;
  border-radius: 0.75rem;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Footer Button Styles */
.footer-btn-primary {
  background: linear-gradient(135deg, #fbbf24, #f59e0b, #d97706);
  border: 2px solid rgba(251, 191, 36, 0.5);
  color: #000;
  padding: 0.75rem 1.5rem;
  border-radius: 1rem;
  font-weight: 900;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 8px 25px rgba(251, 191, 36, 0.3), 
              0 4px 15px rgba(251, 191, 36, 0.2),
              inset 0 2px 0 rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(10px);
  transform: perspective(600px) rotateX(6deg);
  width: 100%;
  position: relative;
  overflow: hidden;
}

@media (min-width: 768px) {
  .footer-btn-primary {
    width: auto;
    min-width: 280px;
    padding: 1.25rem 2.5rem;
    border-radius: 1.5rem;
    transform: perspective(800px) rotateX(8deg);
    box-shadow: 0 12px 40px rgba(251, 191, 36, 0.3), 
                0 4px 20px rgba(251, 191, 36, 0.2),
                inset 0 2px 0 rgba(255, 255, 255, 0.4);
  }
}

.footer-btn-primary::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transition: left 0.6s ease-out;
}

.footer-btn-primary:hover::before {
  left: 100%;
}

.footer-btn-primary:hover {
  transform: perspective(800px) rotateX(8deg) translateY(-4px) scale(1.03);
  box-shadow: 0 16px 50px rgba(251, 191, 36, 0.4),
              0 8px 30px rgba(251, 191, 36, 0.3),
              inset 0 2px 0 rgba(255, 255, 255, 0.5);
}

.footer-btn-secondary {
  background: linear-gradient(135deg, rgba(96, 165, 250, 0.1), rgba(139, 92, 246, 0.1), rgba(236, 72, 153, 0.1));
  border: 2px solid rgba(96, 165, 250, 0.5);
  color: #fff;
  padding: 0.75rem 1.5rem;
  border-radius: 1rem;
  font-weight: 900;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 8px 25px rgba(96, 165, 250, 0.3),
              0 4px 15px rgba(96, 165, 250, 0.2),
              inset 0 2px 0 rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  transform: perspective(600px) rotateX(6deg);
  width: 100%;
  position: relative;
  overflow: hidden;
}

@media (min-width: 768px) {
  .footer-btn-secondary {
    width: auto;
    min-width: 280px;
    padding: 1.25rem 2.5rem;
    border-radius: 1.5rem;
    transform: perspective(800px) rotateX(8deg);
    box-shadow: 0 12px 40px rgba(96, 165, 250, 0.3),
                0 4px 20px rgba(96, 165, 250, 0.2),
                inset 0 2px 0 rgba(255, 255, 255, 0.1);
  }
}

.footer-btn-secondary::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(96, 165, 250, 0.3), transparent);
  transition: left 0.6s ease-out;
}

.footer-btn-secondary:hover::before {
  left: 100%;
}

.footer-btn-secondary:hover {
  transform: perspective(800px) rotateX(8deg) translateY(-4px) scale(1.03);
  box-shadow: 0 16px 50px rgba(96, 165, 250, 0.4),
              0 8px 30px rgba(96, 165, 250, 0.3),
              inset 0 2px 0 rgba(255, 255, 255, 0.2);
  border-color: rgba(96, 165, 250, 0.8);
}

/* Footer Info Cards */
.footer-info-card {
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.6), rgba(30, 41, 59, 0.6));
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 1rem;
  padding: 1.5rem;
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
}

.footer-info-card:hover {
  transform: translateY(-3px);
  border-color: rgba(148, 163, 184, 0.3);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

/* Common Animations */
.pulse-glow {
  animation: pulse-glow 3s ease-in-out infinite;
}

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

.hover-scale {
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.hover-scale:hover {
  transform: scale(1.05) translateY(-3px);
}

.feature-hover {
  transition: all 0.3s ease;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.feature-hover:hover {
  transform: scale(1.05) translateY(-5px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.35);
}

/* Video and Background */
.video-overlay {
  background: linear-gradient(45deg, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.8));
}

.youtube-background {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100vw;
  height: 56.25vw;
  min-height: 100vh;
  min-width: 177.77vh;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.youtube-background iframe {
  width: 100%;
  height: 100%;
}

/* Button Styles */
.btn-primary {
  background: linear-gradient(135deg, #fbbf24, #f59e0b, #d97706);
  border: 2px solid rgba(251, 191, 36, 0.5);
  box-shadow: 0 12px 40px rgba(251, 191, 36, 0.3), 
              0 4px 20px rgba(251, 191, 36, 0.2),
              inset 0 2px 0 rgba(255, 255, 255, 0.4), 
              inset 0 -2px 0 rgba(0, 0, 0, 0.1);
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(10px);
  border-radius: 16px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-primary::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
  transition: left 0.6s ease-out;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 50px rgba(251, 191, 36, 0.4), 
              0 8px 30px rgba(251, 191, 36, 0.3),
              inset 0 2px 0 rgba(255, 255, 255, 0.5);
}

.btn-primary:hover::before {
  left: 100%;
}

.btn-secondary {
  background: linear-gradient(135deg, #34d399, #10b981, #059669);
  border: 2px solid rgba(52, 211, 153, 0.5);
  box-shadow: 0 12px 40px rgba(52, 211, 153, 0.3), 
              0 4px 20px rgba(52, 211, 153, 0.2),
              inset 0 2px 0 rgba(255, 255, 255, 0.4), 
              inset 0 -2px 0 rgba(0, 0, 0, 0.1);
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(10px);
  border-radius: 16px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-secondary::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
  transition: left 0.6s ease-out;
}

.btn-secondary:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 50px rgba(52, 211, 153, 0.4), 
              0 8px 30px rgba(52, 211, 153, 0.3),
              inset 0 2px 0 rgba(255, 255, 255, 0.5);
}

.btn-secondary:hover::before {
  left: 100%;
}

/* 3D Button Styles for Registration Section */
.btn-3d-primary {
  background: linear-gradient(135deg, #fbbf24, #f59e0b, #d97706);
  border: 3px solid #fbbf24;
  border-radius: 20px;
  position: relative;
  transform: perspective(1200px) rotateX(15deg) rotateY(-5deg);
  box-shadow: 
    0 20px 40px rgba(251, 191, 36, 0.4),
    0 8px 20px rgba(251, 191, 36, 0.3),
    inset 0 4px 0 rgba(255, 255, 255, 0.5),
    inset 0 -4px 0 rgba(0, 0, 0, 0.2),
    8px 12px 25px rgba(0, 0, 0, 0.15);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
  backdrop-filter: blur(15px);
}

.btn-3d-primary::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.6), transparent);
  transition: left 0.8s ease-out;
}

.btn-3d-primary:hover {
  transform: perspective(1200px) rotateX(10deg) rotateY(-3deg) translateY(-8px) scale(1.05);
  box-shadow: 
    0 30px 60px rgba(251, 191, 36, 0.5),
    0 15px 30px rgba(251, 191, 36, 0.4),
    inset 0 6px 0 rgba(255, 255, 255, 0.6),
    inset 0 -6px 0 rgba(0, 0, 0, 0.3),
    12px 20px 40px rgba(0, 0, 0, 0.2);
}

.btn-3d-primary:hover::before {
  left: 100%;
}

.btn-3d-secondary {
  background: linear-gradient(135deg, #34d399, #10b981, #059669);
  border: 3px solid #34d399;
  border-radius: 20px;
  position: relative;
  transform: perspective(1200px) rotateX(15deg) rotateY(5deg);
  box-shadow: 
    0 20px 40px rgba(52, 211, 153, 0.4),
    0 8px 20px rgba(52, 211, 153, 0.3),
    inset 0 4px 0 rgba(255, 255, 255, 0.5),
    inset 0 -4px 0 rgba(0, 0, 0, 0.2),
    -8px 12px 25px rgba(0, 0, 0, 0.15);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
  backdrop-filter: blur(15px);
}

.btn-3d-secondary::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.6), transparent);
  transition: left 0.8s ease-out;
}

.btn-3d-secondary:hover {
  transform: perspective(1200px) rotateX(10deg) rotateY(3deg) translateY(-8px) scale(1.05);
  box-shadow: 
    0 30px 60px rgba(52, 211, 153, 0.5),
    0 15px 30px rgba(52, 211, 153, 0.4),
    inset 0 6px 0 rgba(255, 255, 255, 0.6),
    inset 0 -6px 0 rgba(0, 0, 0, 0.3),
    -12px 20px 40px rgba(0, 0, 0, 0.2);
}

.btn-3d-secondary:hover::before {
  left: 100%;
}

/* Utility Classes */
.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-right: 8px;
}

.cyber-text {
  background: linear-gradient(45deg, #60a5fa, #a78bfa, #fbbf24, #34d399);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradient-shift 2s ease-in-out infinite;
}

/* Match Cards */
.match-card {
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.9), rgba(51, 65, 85, 0.9));
  border: 2px solid rgba(96, 165, 250, 0.3);
  transition: all 0.3s ease;
}

.match-card:hover {
  border-color: rgba(96, 165, 250, 0.5);
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(96, 165, 250, 0.15);
}

.odds-btn {
  transition: all 0.2s ease;
}

.odds-btn:hover {
  transform: scale(1.03);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

/* Ripple Effect */
.ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  transform: scale(0);
  animation: ripple-animation 0.8s linear;
  pointer-events: none;
}

@keyframes ripple-animation {
  to {
    transform: scale(4);
    opacity: 0;
  }
}

/* Mobile Menu Animations */
#mobile-menu {
  transition: all 0.3s ease-in-out;
  transform-origin: top;
}

#mobile-menu.hidden {
  transform: scaleY(0);
  opacity: 0;
}

#mobile-menu:not(.hidden) {
  transform: scaleY(1);
  opacity: 1;
}

/* Mobile Responsive Improvements */
@media (max-width: 768px) {
  .youtube-background {
    width: 100vw;
    height: 100vh;
  }

  .hero-section {
    padding-top: 4.5rem; /* Adjusted for modern header on mobile */
  }

  .title-main-enhanced {
    font-size: 2rem; /* Reduced from 2.5rem */
    letter-spacing: 1px;
    position: relative;
    z-index: 100;
    text-shadow:
      1px 1px 0px #ff6b9d, 2px 2px 0px #ff4081, 3px 3px 0px #e91e63, 4px 4px 0px rgba(0, 0, 0, 0.4), 5px 5px 8px rgba(
        255,
        143,
        171,
        0.6
      ), 6px 6px 12px rgba(255, 143, 171, 0.4);
  }

  .title-main-enhanced::before {
    top: -8px;
    left: -8px;
    right: -8px;
    bottom: -8px;
    filter: blur(4px);
  }

  .title-desc-subtle {
    font-size: 0.875rem; /* Reduced size */
    margin-bottom: 1rem;
  }

  /* Mobile Tournament Compact Styles */
  .mobile-tournament-compact {
    margin-bottom: 1rem;
  }

  header {
    padding: 0.75rem 0;
    min-height: 4rem; /* Adjusted for modern header */
  }

  .section-card {
    margin-bottom: 2rem;
  }
}

@media (max-width: 640px) {
  .hero-section {
    padding-top: 3.5rem; /* Further reduced for smaller screens */
  }

  .title-main-enhanced {
    font-size: 1.75rem; /* Further reduced */
    letter-spacing: 0.5px;
    line-height: 1.1;
  }

  .btn-primary,
  .btn-secondary {
    min-height: 50px;
    padding: 0.75rem 1.5rem;
    font-size: 0.875rem;
    line-height: 1.2;
  }

  .btn-icon {
    width: 20px;
    height: 20px;
    margin-right: 6px;
    font-size: 1rem;
  }

  header {
    padding: 0.5rem 0;
    min-height: 3rem; /* Compact header */
  }
}

@media (max-width: 480px) {
  .hero-section {
    padding-top: 3rem; /* Optimized for very small screens */
  }

  .title-main-enhanced {
    font-size: 1.5rem; /* Compact size */
    letter-spacing: 0.5px;
    position: relative;
    z-index: 100;
  }

  .btn-primary,
  .btn-secondary {
    min-height: 45px;
    padding: 0.625rem 1.25rem;
    font-size: 0.8125rem;
  }

  .btn-icon {
    width: 18px;
    height: 18px;
    font-size: 0.875rem;
  }
}

@media (max-width: 360px) {
  .hero-section {
    padding-top: 2.5rem; /* Minimal padding for very small screens */
  }

  .title-main-enhanced {
    font-size: 1.375rem; /* Very compact */
    letter-spacing: 0.25px;
    position: relative;
    z-index: 100;
  }
}