/* Custom Theme Styles - Purple-Blue Color Scheme */

/* Enhanced gradient backgrounds */
.hero-area {
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #0a0e27 100%) !important;
  position: relative;
}

.hero-area::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 30% 20%, rgba(139, 92, 246, 0.3) 0%, transparent 50%),
              radial-gradient(circle at 70% 80%, rgba(99, 102, 241, 0.2) 0%, transparent 50%);
  pointer-events: none;
}

/* Enhanced button styles */
.mybtn1 {
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%) !important;
  border: 2px solid #6366f1 !important;
  box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3) !important;
  transition: all 0.3s ease !important;
}

.mybtn1:hover {
  background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%) !important;
  border: 2px solid #8b5cf6 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(99, 102, 241, 0.4) !important;
}

/* Enhanced header note */
.header-note {
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%) !important;
  box-shadow: -1px 8px 20px rgba(99, 102, 241, 0.3) !important;
}

/* Enhanced footer */
.footer {
  background: linear-gradient(135deg, #1a1f3a 0%, #0a0e27 100%) !important;
}

.footer-images {
  background: linear-gradient(135deg, #1a1f3a 0%, #0a0e27 100%) !important;
}

/* Enhanced game play section */
.game-play-section {
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%) !important;
}

/* Enhanced text shadows */
h1, h2, h3, h4, h5, h6 {
  text-shadow: 0 2px 4px rgba(99, 102, 241, 0.3) !important;
}

/* Enhanced card styles */
.single-play {
  background: rgba(26, 31, 58, 0.8) !important;
  border: 1px solid rgba(99, 102, 241, 0.3) !important;
  border-radius: 15px !important;
  backdrop-filter: blur(10px) !important;
  transition: all 0.3s ease !important;
}

.single-play:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 10px 30px rgba(99, 102, 241, 0.2) !important;
  border: 1px solid rgba(139, 92, 246, 0.5) !important;
}

/* Enhanced icon boxes */
.iconbox-wrapper {
  transition: all 0.3s ease !important;
}

.iconbox-wrapper:hover {
  transform: translateY(-5px) !important;
}

.iconbox-bg {
  border-radius: 15px !important;
  overflow: hidden !important;
}

/* Enhanced navbar */
.navbar {
  background: rgba(10, 14, 39, 0.95) !important;
  backdrop-filter: blur(10px) !important;
  border-bottom: 1px solid rgba(99, 102, 241, 0.2) !important;
}

.nav-link {
  color: #e0e7ff !important;
  transition: all 0.3s ease !important;
}

.nav-link:hover {
  color: #6366f1 !important;
  text-shadow: 0 0 10px rgba(99, 102, 241, 0.5) !important;
}

/* Enhanced scrollbar */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #0a0e27;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);
}

/* Enhanced animations */
@keyframes glow {
  0%, 100% {
    box-shadow: 0 0 20px rgba(99, 102, 241, 0.3);
  }
  50% {
    box-shadow: 0 0 30px rgba(139, 92, 246, 0.5);
  }
}

.mybtn1 {
  animation: glow 3s ease-in-out infinite !important;
}

/* Enhanced loading animation */
.loader {
  border: 4px solid rgba(99, 102, 241, 0.3) !important;
  border-top: 4px solid #6366f1 !important;
}

/* Enhanced form elements */
input, textarea, select {
  background: rgba(26, 31, 58, 0.8) !important;
  border: 1px solid rgba(99, 102, 241, 0.3) !important;
  color: #e0e7ff !important;
  border-radius: 8px !important;
}

input:focus, textarea:focus, select:focus {
  border: 1px solid #6366f1 !important;
  box-shadow: 0 0 10px rgba(99, 102, 241, 0.3) !important;
  outline: none !important;
}

/* Enhanced cookie notice */
#cookie-notice {
  background: rgba(10, 14, 39, 0.95) !important;
  border-top: 2px solid #6366f1 !important;
  backdrop-filter: blur(10px) !important;
}

.cn-button {
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%) !important;
  border: none !important;
  border-radius: 20px !important;
}