/* ============================================
   HOMEPAGE COLOR ENHANCEMENTS
   Based on Yolopment Logo Color Scheme
   Dark Blue to Light Blue/Cyan Gradient
   ============================================ */

/* Logo Color Palette */
:root {
  --yolopment-dark-blue: #1e3a8a;      /* Dark blue from logo */
  --yolopment-blue: #2563eb;            /* Primary blue */
  --yolopment-light-blue: #3b82f6;      /* Light blue */
  --yolopment-cyan: #06b6d4;            /* Cyan accent */
  --yolopment-blue-50: #eff6ff;        /* Very light blue */
  --yolopment-blue-100: #dbeafe;        /* Light blue background */
  --yolopment-blue-900: #1e3a8a;        /* Dark blue text */
}

/* Hero Section - Match Logo Gradient */
section[class*="min-h-screen"] {
  background: linear-gradient(135deg, 
    var(--yolopment-dark-blue) 0%, 
    var(--yolopment-blue) 50%, 
    var(--yolopment-light-blue) 100%) !important;
}

/* Hero Background Overlay */
section[class*="min-h-screen"] div[class*="absolute inset-0"] {
  background: linear-gradient(135deg, 
    rgba(30, 58, 138, 0.95) 0%, 
    rgba(37, 99, 235, 0.9) 50%, 
    rgba(59, 130, 246, 0.85) 100%) !important;
}

/* Hero Background Decorations - Blue Theme */
section[class*="min-h-screen"] div[class*="absolute top-1/4"] {
  background: linear-gradient(135deg, 
    rgba(37, 99, 235, 0.25) 0%, 
    rgba(6, 182, 212, 0.25) 100%) !important;
}

section[class*="min-h-screen"] div[class*="absolute bottom-1/4"] {
  background: linear-gradient(135deg, 
    rgba(6, 182, 212, 0.25) 0%, 
    rgba(59, 130, 246, 0.25) 100%) !important;
}

/* Hero Badge - Blue Theme */
div[class*="glass-effect"][class*="rounded-full"] {
  background: rgba(37, 99, 235, 0.2) !important;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(59, 130, 246, 0.3) !important;
}

div[class*="glass-effect"] div[class*="w-2 h-2"][class*="bg-green-400"] {
  background: var(--yolopment-cyan) !important;
}

div[class*="glass-effect"] div[class*="w-2 h-2"][class*="bg-yellow-400"] {
  background: var(--yolopment-light-blue) !important;
}

/* Hero Title - Blue Gradient Text */
h1 span[class*="bg-gradient-to-r"][class*="from-yellow-300"] {
  background: linear-gradient(90deg, 
    var(--yolopment-light-blue) 0%, 
    var(--yolopment-cyan) 50%, 
    #ffffff 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* Hero Description - Blue Accents */
p[class*="text-blue-100"] span[class*="text-yellow-300"] {
  color: var(--yolopment-cyan) !important;
  text-shadow: 0 0 20px rgba(6, 182, 212, 0.5);
}

p[class*="text-blue-100"] span[class*="text-green-300"] {
  color: var(--yolopment-light-blue) !important;
  text-shadow: 0 0 20px rgba(59, 130, 246, 0.5);
}

/* Primary CTA Button - Blue Gradient */
button[class*="bg-gradient-to-r"][class*="from-yellow-400"],
a[class*="bg-gradient-to-r"][class*="from-yellow-400"] {
  background: linear-gradient(135deg, 
    var(--yolopment-blue) 0%, 
    var(--yolopment-light-blue) 50%, 
    var(--yolopment-cyan) 100%) !important;
  color: white !important;
  box-shadow: 0 10px 30px rgba(37, 99, 235, 0.4) !important;
}

button[class*="bg-gradient-to-r"]:hover,
a[class*="bg-gradient-to-r"]:hover {
  background: linear-gradient(135deg, 
    var(--yolopment-light-blue) 0%, 
    var(--yolopment-cyan) 50%, 
    #ffffff 100%) !important;
  box-shadow: 0 15px 40px rgba(6, 182, 212, 0.5) !important;
  transform: translateY(-2px) scale(1.02) !important;
}

/* Stats Cards - Blue Theme */
div[class*="glass-effect"][class*="rounded-2xl"] {
  background: rgba(37, 99, 235, 0.15) !important;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(59, 130, 246, 0.2) !important;
}

div[class*="glass-effect"] div[class*="bg-gradient-to-r"][class*="from-yellow-400"] {
  background: linear-gradient(135deg, 
    var(--yolopment-blue) 0%, 
    var(--yolopment-cyan) 100%) !important;
}

/* Service Cards - Blue Gradients */
div[class*="bg-gradient-to-r"][class*="from-blue-500"][class*="to-cyan-500"] {
  background: linear-gradient(135deg, 
    var(--yolopment-blue) 0%, 
    var(--yolopment-cyan) 100%) !important;
}

div[class*="bg-gradient-to-r"][class*="from-purple-500"] {
  background: linear-gradient(135deg, 
    var(--yolopment-dark-blue) 0%, 
    var(--yolopment-blue) 100%) !important;
}

div[class*="bg-gradient-to-r"][class*="from-orange-500"] {
  background: linear-gradient(135deg, 
    var(--yolopment-light-blue) 0%, 
    var(--yolopment-cyan) 100%) !important;
}

div[class*="bg-gradient-to-r"][class*="from-green-500"] {
  background: linear-gradient(135deg, 
    var(--yolopment-blue) 0%, 
    var(--yolopment-light-blue) 100%) !important;
}

/* Why Choose Section - Blue Theme */
div[class*="bg-gradient-to-r"][class*="from-green-500"][class*="to-emerald-600"] {
  background: linear-gradient(135deg, 
    var(--yolopment-blue) 0%, 
    var(--yolopment-light-blue) 100%) !important;
}

div[class*="bg-gradient-to-r"][class*="from-yellow-500"][class*="to-orange-600"] {
  background: linear-gradient(135deg, 
    var(--yolopment-light-blue) 0%, 
    var(--yolopment-cyan) 100%) !important;
}

div[class*="bg-gradient-to-r"][class*="from-blue-500"][class*="to-indigo-600"] {
  background: linear-gradient(135deg, 
    var(--yolopment-dark-blue) 0%, 
    var(--yolopment-blue) 100%) !important;
}

div[class*="bg-gradient-to-r"][class*="from-purple-500"][class*="to-pink-600"] {
  background: linear-gradient(135deg, 
    var(--yolopment-blue) 0%, 
    var(--yolopment-cyan) 100%) !important;
}

/* CTA Section - Blue Gradient Background */
section[class*="bg-gradient-to-br"][class*="from-[#2563eb]"] {
  background: linear-gradient(135deg, 
    var(--yolopment-dark-blue) 0%, 
    var(--yolopment-blue) 50%, 
    var(--yolopment-light-blue) 100%) !important;
}

/* CTA Section Decorations - Blue Theme */
section[class*="bg-gradient-to-br"] div[class*="bg-yellow-400"] {
  background: var(--yolopment-cyan) !important;
  opacity: 0.25 !important;
}

section[class*="bg-gradient-to-br"] div[class*="bg-purple-400"] {
  background: var(--yolopment-light-blue) !important;
  opacity: 0.2 !important;
}

section[class*="bg-gradient-to-br"] div[class*="bg-green-400"] {
  background: var(--yolopment-cyan) !important;
  opacity: 0.25 !important;
}

/* CTA Section Text - Blue Gradient */
section[class*="bg-gradient-to-br"] h2 span[class*="bg-gradient-to-r"][class*="from-yellow-300"] {
  background: linear-gradient(90deg, 
    #ffffff 0%, 
    var(--yolopment-cyan) 50%, 
    var(--yolopment-light-blue) 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* CTA Section Stats - Blue Theme */
section[class*="bg-gradient-to-br"] div[class*="bg-white/10"] div[class*="text-yellow-300"] {
  color: var(--yolopment-cyan) !important;
}

section[class*="bg-gradient-to-br"] div[class*="bg-white/10"] div[class*="text-green-300"] {
  color: var(--yolopment-light-blue) !important;
}

section[class*="bg-gradient-to-br"] div[class*="bg-white/10"] div[class*="text-blue-300"] {
  color: #ffffff !important;
}

/* Badge Components - Blue Theme */
span[class*="bg-blue-100"][class*="text-[#2563eb]"] {
  background: var(--yolopment-blue-100) !important;
  color: var(--yolopment-blue) !important;
  border-color: var(--yolopment-light-blue) !important;
}

/* Links - Blue Theme */
a[class*="text-[#2563eb]"] {
  color: var(--yolopment-blue) !important;
}

a[class*="text-[#2563eb]"]:hover {
  color: var(--yolopment-dark-blue) !important;
}

/* Buttons - Blue Theme */
button[class*="bg-[#2563eb]"],
a[class*="bg-[#2563eb]"] {
  background: var(--yolopment-blue) !important;
}

button[class*="bg-[#2563eb]"]:hover,
a[class*="bg-[#2563eb]"]:hover {
  background: var(--yolopment-dark-blue) !important;
}

button[class*="border-[#2563eb]"],
a[class*="border-[#2563eb]"] {
  border-color: var(--yolopment-blue) !important;
  color: var(--yolopment-blue) !important;
}

button[class*="border-[#2563eb]"]:hover,
a[class*="border-[#2563eb]"]:hover {
  background: var(--yolopment-blue) !important;
  color: white !important;
}

/* Check Icons - Blue Theme */
svg[class*="text-green-500"],
div[class*="text-green-500"] {
  color: var(--yolopment-blue) !important;
}

/* Glass Effect - Blue Tint */
.glass-effect,
[class*="glass-effect"] {
  background: rgba(37, 99, 235, 0.1) !important;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(59, 130, 246, 0.2) !important;
}

/* Hover Effects - Blue Glow */
div[class*="hover:shadow-xl"]:hover {
  box-shadow: 0 20px 40px rgba(37, 99, 235, 0.2) !important;
}

/* Text Glow - Blue Theme */
.animate-text-glow,
[class*="animate-text-glow"] {
  text-shadow: 0 0 30px rgba(59, 130, 246, 0.6),
               0 0 60px rgba(6, 182, 212, 0.4) !important;
}

/* Loading Spinner - Blue */
div[class*="border-b-2"][class*="border-[#2563eb]"] {
  border-color: var(--yolopment-blue) !important;
}

/* Section Backgrounds - Subtle Blue Tint */
section[class*="bg-gray-50"] {
  background: var(--yolopment-blue-50) !important;
}

/* Icon Colors in Stats - Blue Theme */
div[class*="text-yellow-300"][class*="mr-2"],
div[class*="text-green-300"][class*="ml-4"] {
  color: var(--yolopment-cyan) !important;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
  section[class*="min-h-screen"] {
    background: linear-gradient(180deg, 
      var(--yolopment-dark-blue) 0%, 
      var(--yolopment-blue) 100%) !important;
  }
}

/* Smooth Transitions */
* {
  transition: background-color 0.3s ease, 
              color 0.3s ease, 
              border-color 0.3s ease !important;
}

/* Focus States - Blue Theme */
button:focus,
a:focus {
  outline: 2px solid var(--yolopment-blue) !important;
  outline-offset: 2px !important;
}

/* Selection Color - Blue Theme */
::selection {
  background: var(--yolopment-blue) !important;
  color: white !important;
}

::-moz-selection {
  background: var(--yolopment-blue) !important;
  color: white !important;
}