w-312356-main/src/index.css

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: 248 100% 99%;
    --foreground: 222.2 84% 4.9%;

    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;

    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;

    --primary: 222.2 47.4% 11.2%;
    --primary-foreground: 210 40% 98%;

    --secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;

    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;

    --accent: 210 40% 96.1%;
    --accent-foreground: 222.2 47.4% 11.2%;

    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;

    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 222.2 84% 4.9%;

    --radius: 0.5rem;
    
    /* Premium Color Palette */
    --brand-primary: 201 100% 56%;
    --brand-secondary: 201 100% 45%;
    --brand-accent: 201 100% 35%;
    --brand-light: 201 100% 95%;
    --brand-soft: 201 100% 98%;
    
    /* Accent Colors */
    --accent-purple: 262 83% 58%;
    --accent-teal: 173 58% 39%;
    --accent-orange: 25 95% 53%;
    --accent-green: 142 76% 36%;
  }

  .dark {
    /* ... (dark mode variables if needed) */
  }
}

@layer base {
  * {
    @apply border-border;
  }

  html, body {
    @apply h-full;
  }

  body {
    @apply bg-background text-gray-700 font-inter antialiased;
    scroll-behavior: smooth;
    background: #f6fbff !important;
    background-attachment: fixed;
    /* Subtle animated grid pattern overlay */
    background-image: 
      radial-gradient(circle at 25% 25%, rgba(25, 161, 230, 0.03) 0%, transparent 50%),
      radial-gradient(circle at 75% 75%, rgba(25, 161, 230, 0.02) 0%, transparent 50%),
      url('data:image/svg+xml;utf8,<svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="0" y="0" width="60" height="60" fill="none"/><path d="M60 0H0V60" stroke="%23e3eaf3" stroke-width="0.5" opacity="0.6"/></svg>');
    background-size: 100% 100%, 100% 100%, 60px 60px;
    background-repeat: no-repeat, no-repeat, repeat;
    background-position: 0 0, 0 0, 0 0;
  }

  /* Enhanced Typography Hierarchy */
  h1, h2, h3, h4, h5, h6 {
    @apply text-gray-900 font-bold;
  }

  h1 {
    @apply text-5xl md:text-6xl lg:text-7xl font-bold leading-tight;
  }

  h2 {
    @apply text-3xl md:text-4xl font-bold leading-tight;
  }

  h3 {
    @apply text-xl md:text-2xl font-bold leading-snug;
  }

  h4 {
    @apply text-lg md:text-xl font-semibold leading-snug;
  }

  p {
    @apply text-base md:text-lg leading-relaxed;
  }
}

/* Enhanced Section Spacing with Premium Backgrounds */
.section-container {
  @apply w-full px-4 sm:px-8 lg:px-16 py-20 md:py-28 lg:py-32;
}

.section-padding {
  @apply py-20 md:py-28 lg:py-32;
}

.divider-spacing {
  @apply mt-0 mb-0 md:mt-0 md:mb-0;
}

/* Premium Section Backgrounds */
.section-bg-primary {
  background: linear-gradient(135deg, #f8fbff 0%, #eaf3fa 100%);
}

.section-bg-secondary {
  background: linear-gradient(135deg, #ffffff 0%, #f8fbff 100%);
}

.section-bg-accent {
  background: linear-gradient(135deg, #eaf3fa 0%, #d4e7f7 100%);
}

.section-bg-gradient {
  background: linear-gradient(135deg, #f8fbff 0%, #eaf3fa 50%, #d4e7f7 100%);
}

/* Design System Classes */
.medical-card {
  @apply bg-white/90 backdrop-blur-sm rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300 border border-white/50;
}

.medical-button-primary {
  @apply bg-gradient-to-r from-[#19A1E6] to-[#1587c7] hover:from-[#1587c7] hover:to-[#1273a8] text-white font-semibold px-8 py-4 rounded-xl transition-all duration-300 hover:scale-105 shadow-lg hover:shadow-xl relative overflow-hidden;
}

.medical-button-primary::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s;
}

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

.medical-button-secondary {
  @apply bg-white/80 backdrop-blur-sm border-2 border-[#19A1E6] text-[#19A1E6] hover:bg-gradient-to-r hover:from-[#19A1E6] hover:to-[#1587c7] hover:text-white font-semibold px-8 py-4 rounded-xl transition-all duration-300 hover:scale-105 shadow-lg hover:shadow-xl hover:shadow-[#19A1E6]/20 relative overflow-hidden;
}

.medical-button-secondary::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
  transition: left 0.5s;
}

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

/* Premium CTA variants */
.cta-premium-primary {
  @apply bg-gradient-to-r from-[#19A1E6] via-[#1587c7] to-[#1273a8] hover:from-[#1587c7] hover:via-[#1273a8] hover:to-[#0f5f8a] text-white font-bold px-10 py-5 rounded-xl transition-all duration-500 hover:scale-105 shadow-lg hover:shadow-xl relative overflow-hidden text-lg;
}

.cta-premium-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.7s;
}

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

.cta-premium-secondary {
  @apply bg-white/90 backdrop-blur-md border-2 border-[#19A1E6] text-[#19A1E6] hover:bg-gradient-to-r hover:from-[#19A1E6] hover:via-[#1587c7] hover:to-[#1273a8] hover:text-white font-bold px-10 py-5 rounded-xl transition-all duration-500 hover:scale-105 shadow-xl hover:shadow-2xl hover:shadow-[#19A1E6]/25 relative overflow-hidden text-lg;
}

.cta-premium-secondary::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
  transition: left 0.7s;
}

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

/* Hero CTA specific styles */
.hero-cta-primary {
  @apply bg-gradient-to-r from-[#19A1E6] via-[#1587c7] to-[#1273a8] hover:from-[#1587c7] hover:via-[#1273a8] hover:to-[#0f5f8a] text-white font-bold px-12 py-6 rounded-xl transition-all duration-500 hover:scale-110 shadow-lg hover:shadow-xl relative overflow-hidden text-xl;
}

.hero-cta-primary::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  transition: left 0.8s;
}

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

.hero-cta-secondary {
  @apply bg-white/90 backdrop-blur-md border-2 border-[#19A1E6] text-[#19A1E6] hover:bg-gradient-to-r hover:from-[#19A1E6] hover:via-[#1587c7] hover:to-[#1273a8] hover:text-white font-bold px-12 py-6 rounded-xl transition-all duration-500 hover:scale-110 shadow-xl hover:shadow-2xl hover:shadow-[#19A1E6]/30 relative overflow-hidden text-xl;
}

.hero-cta-secondary::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.8s;
}

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

.navbar-cta-primary {
  @apply bg-gradient-to-r from-[#19A1E6] to-[#1587c7] hover:from-[#1587c7] hover:to-[#1273a8] text-white font-semibold px-6 py-3 rounded-xl transition-all duration-300 hover:scale-105 shadow-lg hover:shadow-xl relative overflow-hidden;
}

.navbar-cta-primary::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s;
}

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

.navbar-cta-secondary {
  @apply bg-white/80 backdrop-blur-sm border-2 border-[#19A1E6] text-[#19A1E6] hover:bg-gradient-to-r hover:from-[#19A1E6] hover:to-[#1587c7] hover:text-white font-semibold px-6 py-3 rounded-xl transition-all duration-300 hover:scale-105 shadow-lg hover:shadow-xl hover:shadow-[#19A1E6]/20 relative overflow-hidden;
}

.navbar-cta-secondary::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
  transition: left 0.5s;
}

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

/* Enhanced Spacing Utilities */
.card-spacing {
  @apply p-8 md:p-10;
}

.icon-title-spacing {
  @apply mb-4 md:mb-6;
}

.title-body-spacing {
  @apply mb-6 md:mb-8;
}

/* Enhanced Hover Effects */
.hover-lift {
  @apply transition-all duration-300 ease-out;
}

.hover-lift:hover {
  @apply transform -translate-y-2 shadow-2xl;
}

/* Smooth Scrolling */
.smooth-scroll {
  scroll-behavior: smooth;
}

/* Premium Banner Styles */
.banner-container {
  @apply relative overflow-hidden rounded-3xl;
  background: linear-gradient(135deg, #f8fbff 0%, #eaf3fa 50%, #d4e7f7 100%);
}

.banner-overlay {
  @apply absolute inset-0;
  background: 
    radial-gradient(circle at 20% 80%, rgba(25, 161, 230, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(25, 161, 230, 0.05) 0%, transparent 50%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
  backdrop-filter: blur(10px);
}

.banner-title {
  @apply text-4xl md:text-5xl lg:text-6xl font-bold text-gray-900 mb-6;
  background: linear-gradient(135deg, #1a202c 0%, #2d3748 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.banner-subtitle {
  @apply text-lg md:text-xl text-gray-600 mb-8 leading-relaxed;
}

/* Enhanced Animations */
@keyframes float {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(-20px) rotate(5deg);
  }
}

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

@keyframes pulse-line {
  0%, 100% {
    transform: scaleX(0);
    opacity: 0;
  }
  50% {
    transform: scaleX(1);
    opacity: 1;
  }
}

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

/* Animation Delays */
.animation-delay-100 {
  animation-delay: 0.1s;
}

.animation-delay-200 {
  animation-delay: 0.2s;
}

.animation-delay-300 {
  animation-delay: 0.3s;
}

.animation-delay-400 {
  animation-delay: 0.4s;
}

.animation-delay-500 {
  animation-delay: 0.5s;
}

/* Animation Classes */
.animate-float {
  animation: float 6s ease-in-out infinite;
}

.animate-circle {
  animation: rotate-float 8s ease-in-out infinite;
}

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

.animate-rotate {
  animation: rotate 20s linear infinite;
}

/* Scroll-based animations */
.animate-fade-in {
  animation: fadeIn 0.8s ease-out forwards;
}

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

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

.animate-slide-in {
  animation: slideIn 0.6s ease-out forwards;
}

/* Enhanced Hover Effects */
.hover-underline {
  @apply relative;
}

.hover-underline:after {
  content: '';
  @apply absolute bottom-0 left-0 w-0 h-0.5 bg-gradient-to-r from-[#19A1E6] to-[#1587c7] transition-all duration-300;
}

.hover-underline:hover:after {
  @apply w-full;
}

.hover-scale {
  @apply transition-transform duration-300 ease-out;
}

.hover-scale:hover {
  @apply scale-105;
}

/* Pulse Animation */
@keyframes pulse-slow {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.8;
    transform: scale(1.05);
  }
}

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

/* Responsive Design */
@media (max-width: 768px) {
  .section-padding {
    @apply py-16 md:py-20;
  }
  
  .btn {
    @apply px-6 py-3 text-sm;
  }
  
  .btn-lg {
    @apply px-8 py-4 text-base;
  }
  
  .btn-md {
    @apply px-6 py-3 text-sm;
  }
  
  .btn-primary {
    @apply bg-[#19A1E6] hover:bg-[#1587c7] text-white;
  }
  
  .btn-secondary {
    @apply bg-white border-2 border-[#19A1E6] text-[#19A1E6] hover:bg-[#19A1E6] hover:text-white;
  }
  
  .btn-ghost {
    @apply bg-transparent hover:bg-gray-100 text-gray-700;
  }
  
  .content-card {
    @apply bg-white rounded-2xl shadow-lg p-6;
  }
  
  .content-card:hover {
    @apply shadow-xl transform -translate-y-1;
  }
}

/* Premium Focus States */
.medical-button-primary, .medical-button-secondary, .cta-premium-primary, .cta-premium-secondary, .hero-cta-primary, .hero-cta-secondary, .navbar-cta-primary, .navbar-cta-secondary, .card-spacing, .title-body-spacing, .icon-title-spacing {
  @apply focus:outline-none focus:ring-4 focus:ring-[#19A1E6]/20 focus:ring-offset-2;
}

/* Premium Glass Effect */
.glass-effect {
  @apply bg-white/10 backdrop-blur-md border border-white/20;
}

/* Premium Gradient Text */
.gradient-text {
  background: linear-gradient(135deg, #19A1E6 0%, #1587c7 50%, #1273a8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Premium Card Hover Effects */
.premium-card {
  @apply bg-white/90 backdrop-blur-sm rounded-2xl shadow-lg border border-white/50 transition-all duration-500;
}

.premium-card:hover {
  @apply shadow-2xl transform -translate-y-2 border-[#19A1E6]/20;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 251, 255, 0.9) 100%);
}

/* Premium Icon Styles */
.premium-icon {
  @apply text-[#19A1E6] transition-all duration-300;
}

.premium-icon:hover {
  @apply text-[#1587c7] scale-110;
}

/* Premium Section Dividers */
.section-divider {
  @apply relative overflow-hidden;
}

.section-divider::after {
  content: '';
  @apply absolute bottom-0 left-0 w-full h-px bg-gradient-to-r from-transparent via-[#19A1E6]/30 to-transparent;
}

/* Premium Loading States */
.loading-shimmer {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* ---Unified Soft Blue Background & Section Wave Gradient Overrides--- */
body {
  background: #f6fbff !important;
}
.section-soft-wave {
  background: linear-gradient(180deg, #e4f1fb 0%, #f6fbff 40%, #f6fbff 60%, #e4f1fb 100%) !important;
}

.section-gradient {
  background: linear-gradient(180deg, #f6fbff 0%, #e4f1fb 100%);
}

body {
  font-family: 'Inter', sans-serif;
}

/* Scrollbar utilities */
@layer utilities {
  .scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .scrollbar-hide::-webkit-scrollbar {
    display: none;
  }
}