/*
 * SmartPC Styles
 * Version: 1.0.0 (Official Release)
 * Generated by UXMagic Copilot
 * Last Updated: 2024
 * 
 * Table of Contents:
 * 1. CSS Reset & Base Styles
 * 2. Typography
 * 3. Layout & Grid
 * 4. Components
 * 5. Utilities
 * 6. Responsive Design
 */

/* ==========================================================================
   1. CSS Reset & Base Styles
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
  flex-wrap: wrap !important;
}

html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.6;
  color: #333;
  background-color: #fff;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.dark body {
  background-color: #0F0F0F;
  color: #f3f4f6;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ==========================================================================
   2. Typography
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 1rem 0;
  font-weight: 600;
  line-height: 1.3;
}

p {
  margin: 0 0 1rem 0;
}

a {
  color: #007bff;
  text-decoration: none;
  transition: color 0.2s ease;
}

a:hover {
  color: #0056b3;
  text-decoration: underline;
}

/* ==========================================================================
   3. Layout & Grid
   ========================================================================== */

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

.row {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -0.5rem;
}

.col {
  flex: 1;
  padding: 0 0.5rem;
}

/* ==========================================================================
   4. Components
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.5rem;
  border: 1px solid transparent;
  border-radius: 0.375rem;
  font-size: 1rem;
  font-weight: 500;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease;
  background-color: #007bff;
  color: white;
}

.btn:hover {
  background-color: #0056b3;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 123, 255, 0.25);
}

.card {
  background: white;
  border: 1px solid #e9ecef;
  border-radius: 0.5rem;
  padding: 1.5rem;
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  transition: box-shadow 0.2s ease;
}

.card:hover {
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

/* ==========================================================================
   5. Utilities
   ========================================================================== */

.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.mb-1 { margin-bottom: 0.25rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 1rem; }
.mb-4 { margin-bottom: 1.5rem; }

.d-none { display: none; }
.d-block { display: block; }
.d-flex { display: flex; }

/* ==========================================================================
   6. Responsive Design
   ========================================================================== */

@media (max-width: 768px) {
  .container {
    padding: 0 0.75rem;
  }
  
  .row {
    flex-direction: column;
  }
  
  .btn {
    width: 100%;
    margin-bottom: 0.5rem;
  }
}

@media (max-width: 576px) {
  .container {
    padding: 0 0.5rem;
  }
  
  h1 { font-size: 1.75rem; }
  h2 { font-size: 1.5rem; }
  h3 { font-size: 1.25rem; }
}

/* ==========================================================================
   Modern Contact Cards - Redesigned
   ========================================================================== */

.contact-card-modern {
  position: relative;
  cursor: pointer;
  will-change: transform, box-shadow;
  backface-visibility: hidden;
  transform: translateZ(0);
}

.contact-card-modern::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 1.5rem;
  padding: 2px;
  background: linear-gradient(135deg, transparent, rgba(59, 130, 246, 0.1), transparent);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.contact-card-modern:hover::before {
  opacity: 1;
}

.contact-card-modern:active {
  transform: translateY(-1px) scale(0.99) translateZ(0);
  transition: transform 0.1s ease;
}

/* Animation pour les icônes des cartes */
@keyframes iconFloat {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-5px) rotate(5deg);
  }
}

.contact-card-modern:hover .fa-phone,
.contact-card-modern:hover .fa-envelope,
.contact-card-modern:hover .fa-map-marker-alt {
  animation: iconFloat 2s ease-in-out infinite;
}

/* Effet de brillance au survol */
.contact-card-modern::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    45deg,
    transparent 30%,
    rgba(255, 255, 255, 0.1) 50%,
    transparent 70%
  );
  transform: rotate(45deg);
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}

.contact-card-modern:hover::after {
  opacity: 1;
  animation: shine 1.5s ease-in-out;
}

@keyframes shine {
  0% {
    transform: translateX(-100%) translateY(-100%) rotate(45deg);
  }
  100% {
    transform: translateX(100%) translateY(100%) rotate(45deg);
  }
}

/* Responsive adjustments for modern contact cards */
@media (max-width: 767px) {
  .contact-card-modern {
    min-height: auto;
    padding: 1.5rem !important;
  }
  
  .contact-card-modern .w-20 {
    width: 4rem;
    height: 4rem;
  }
  
  .contact-card-modern h4 {
    font-size: 1.25rem !important;
  }
  
  .contact-card-modern p {
    font-size: 0.875rem !important;
  }
}

/* Force equal height for contact cards on mobile */
@media (max-width: 767px) {
  .contact-cards-container {
    display: flex;
    flex-direction: column;
    gap: 2rem;
  }
  
  .contact-card {
    width: 100%;
    height: 200px !important;
    min-height: 200px !important;
    max-height: 200px !important;
    text-decoration: none !important;
    color: inherit;
  }
  
  /* Hover effect for clickable contact cards */
  .contact-card:hover {
    transform: translateY(-4px);
    text-decoration: none !important;
  }
  
  .contact-card:active {
    transform: translateY(-2px) scale(0.98);
    text-decoration: none !important;
  }
  
  .contact-card:focus {
    text-decoration: none !important;
    outline: none;
  }
  
  .contact-card:visited {
    text-decoration: none !important;
  }
}

/* ==========================================================================
   7. Project Specific Styles
   ========================================================================== */

body {
  font-family: 'Inter', sans-serif;
  transition: background-color 0.3s ease, color 0.3s ease;
  background-color: #fff;
  color: #1f2937;
}

html.dark body {
  background-color: #0F0F0F;
  color: #f3f4f6;
}

/* Theme transition overlay animation */
.theme-transition {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 9999;
  overflow: hidden;
}

.theme-transition::before {
  content: '';
  position: absolute;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  top: var(--transition-y, 50%);
  left: var(--transition-x, 50%);
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  transition: opacity 0.3s ease-in-out, transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.theme-transition.active::before {
  opacity: 1;
  transform: translate(-50%, -50%) scale(15);
}

/* Light to dark transition - black overlay */
.theme-transition.light-to-dark::before {
  background: radial-gradient(circle, 
                              rgba(15, 15, 15, 0.98) 0%, 
                              rgba(15, 15, 15, 0.95) 30%,
                              rgba(15, 15, 15, 0.85) 50%,
                              transparent 70%);
}

/* Dark to light transition - white overlay */
.theme-transition.dark-to-light::before {
  background: radial-gradient(circle, 
                              rgba(255, 255, 255, 0.98) 0%, 
                              rgba(255, 255, 255, 0.95) 30%,
                              rgba(255, 255, 255, 0.85) 50%,
                              transparent 70%);
}

/* Smooth transitions for theme switching - Optimized for performance */
html {
  transition: background-color 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  /* Don't use transform on html as it can break fixed positioning */
  backface-visibility: hidden;
}

body {
  transition: background-color 0.5s cubic-bezier(0.4, 0, 0.2, 1),
              color 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Only apply transitions to interactive elements and specific components */
nav, .glass-nav {
  transition: background-color 0.5s cubic-bezier(0.4, 0, 0.2, 1),
              border-color 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

a, button, input, textarea, select, label,
.card, .service-card, .tip-card {
  transition: background-color 0.5s cubic-bezier(0.4, 0, 0.2, 1),
              color 0.5s cubic-bezier(0.4, 0, 0.2, 1),
              border-color 0.5s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  /* Force hardware acceleration for better performance */
  transform: translateZ(0);
  will-change: contents;
}

/* Remove will-change after interaction to free memory */
a:not(:hover), button:not(:hover), input:not(:focus), textarea:not(:focus) {
  will-change: auto;
}

/* Exclude elements that shouldn't transition */
img, video, canvas, svg, iframe,
.particle, .bg-orb {
  transition: none !important;
}


/* Specific transitions for interactive elements - Optimized */
button, a, input, textarea, select {
  transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  /* Use GPU acceleration */
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* Navbar fixed positioning - Highest priority for all devices */
.glass-nav,
nav.glass-nav,
#navbar,
nav#navbar,
nav[id="navbar"],
nav.glass-nav#navbar {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  max-width: 100vw !important;
  background: rgba(255, 255, 255, 0.85) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border-bottom: 1px solid rgba(0,0,0,0.05) !important;
  /* Optimize backdrop filter performance */
  will-change: backdrop-filter;
  transform: translateZ(0);
  /* Remove contain to ensure fixed positioning works */
  contain: none !important;
  z-index: 99997 !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
}

.dark .glass-nav,
.dark nav.glass-nav,
.dark #navbar,
.dark nav#navbar {
  background: rgba(26, 26, 26, 0.85) !important;
  border-bottom: 1px solid rgba(255,255,255,0.05) !important;
}

/* ==========================================================================
   Mobile & Tablet Navigation - Modern Design
   ========================================================================== */

/* Ensure navbar is fixed on mobile and tablet */
@media (max-width: 1024px) {
  .glass-nav,
  nav.glass-nav,
  #navbar,
  nav#navbar,
  nav[id="navbar"],
  nav.glass-nav#navbar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
    z-index: 99997 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
  }
}

@media (max-width: 767px) {
  .glass-nav,
  nav.glass-nav,
  #navbar,
  nav#navbar,
  nav[id="navbar"],
  nav.glass-nav#navbar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
    z-index: 99997 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
  }
}

/* Mobile Menu Animations */
@keyframes menuSlideIn {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes menuSlideOut {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(100%);
    opacity: 0;
  }
}

@keyframes overlayFadeIn {
  from {
    opacity: 0;
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
  }
  to {
    opacity: 1;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }
}

@keyframes overlayFadeOut {
  from {
    opacity: 1;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }
  to {
    opacity: 0;
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
  }
}

@keyframes menuItemFadeIn {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@media (max-width: 767px) {
  /* Mobile Navigation Buttons - Aligned and consistent */
  .mobile-nav-btn {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0;
  }

  .mobile-nav-btn i {
    font-size: 14px !important;
    line-height: 1 !important;
  }

  /* Mobile Menu Overlay */
  .mobile-menu-overlay {
    position: fixed;
    inset: 0;
    z-index: 99998;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    opacity: 0;
    pointer-events: none;
    animation: overlayFadeOut 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  }

  .mobile-menu-overlay.active {
    opacity: 1;
    pointer-events: auto;
    animation: overlayFadeIn 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  }

  /* Mobile Menu Sidebar - Slide from right */
  .mobile-menu-sidebar {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: 320px;
    max-width: 85vw;
    z-index: 99999;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    box-shadow: -10px 0 40px rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* Ensure content doesn't get cut off */
    box-sizing: border-box;
    transform: translateX(100%);
    opacity: 0;
    pointer-events: none;
    animation: menuSlideOut 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    will-change: transform, opacity;
  }

  .dark .mobile-menu-sidebar {
    background: rgba(26, 26, 26, 0.98);
    box-shadow: -10px 0 40px rgba(0, 0, 0, 0.4);
  }

  .mobile-menu-sidebar.active {
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
    animation: menuSlideIn 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  }

  /* Mobile Menu Items */
  .mobile-menu-item {
    display: flex;
    align-items: center;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    opacity: 0;
    transform: translateX(20px);
  }

  .mobile-menu-sidebar.active .mobile-menu-item {
    animation: menuItemFadeIn 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  }

  .mobile-menu-sidebar.active .mobile-menu-item:nth-child(1) {
    animation-delay: 0.05s;
  }

  .mobile-menu-sidebar.active .mobile-menu-item:nth-child(2) {
    animation-delay: 0.1s;
  }

  .mobile-menu-sidebar.active .mobile-menu-item:nth-child(3) {
    animation-delay: 0.15s;
  }

  .mobile-menu-sidebar.active .mobile-menu-item:nth-child(4) {
    animation-delay: 0.2s;
  }

  .mobile-menu-sidebar.active .mobile-menu-item:nth-child(5) {
    animation-delay: 0.25s;
  }

  .mobile-menu-sidebar.active .mobile-menu-item:nth-child(6) {
    animation-delay: 0.3s;
  }

  .mobile-menu-item:hover {
    transform: translateX(4px);
  }

  /* Menu Header Animation */
  .mobile-menu-sidebar > div:first-child {
    opacity: 0;
    transform: translateY(-10px);
  }

  .mobile-menu-sidebar.active > div:first-child {
    animation: menuItemFadeIn 0.3s cubic-bezier(0.4, 0, 0.2, 1) 0.1s forwards;
  }

  /* Theme toggle in menu - special styling */
  #theme-toggle-menu {
    justify-content: space-between;
  }

  #theme-toggle-menu .fa-moon,
  #theme-toggle-menu .fa-sun {
    position: relative;
  }

  /* Mobile Menu Close Button - Improved */
  #mobile-menu-close {
    flex-shrink: 0;
    cursor: pointer;
    position: relative;
  }

  #mobile-menu-close:active {
    transform: scale(0.95);
  }

  /* Mobile Menu CTA */
  .mobile-menu-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0;
    transform: translateY(10px);
  }

  .mobile-menu-sidebar.active .mobile-menu-cta {
    animation: menuItemFadeIn 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.35s forwards;
  }

  /* Ensure menu content doesn't get cut off by borders */
  .mobile-menu-sidebar {
    box-sizing: border-box;
  }

  /* Smooth scrollbar for mobile menu */
  .mobile-menu-sidebar::-webkit-scrollbar {
    width: 6px;
  }

  .mobile-menu-sidebar::-webkit-scrollbar-track {
    background: transparent;
  }

  .mobile-menu-sidebar::-webkit-scrollbar-thumb {
    background: rgba(156, 163, 175, 0.3);
    border-radius: 3px;
  }

  .dark .mobile-menu-sidebar::-webkit-scrollbar-thumb {
    background: rgba(75, 85, 99, 0.5);
  }
}

/* Tablet adjustments */
@media (min-width: 640px) and (max-width: 767px) {
  .mobile-menu-sidebar {
    width: 380px;
  }
}

.gradient-text {
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  background-image: linear-gradient(135deg, #2563EB, #3B82F6, #60A5FA);
  background-size: 200% 200%;
  animation: gradient-flow 3s ease infinite
}

.dark .gradient-text {
  background-image: linear-gradient(135deg, #60A5FA, #3B82F6, #2563EB)
}

@keyframes gradient-flow {
  0%, 100% {
  background-position: 0% 50%
}

50% {
  background-position: 100% 50%
}


}

::-webkit-scrollbar {
  width: 8px
}

::-webkit-scrollbar-track {
  background: transparent
}

::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px
}

.dark ::-webkit-scrollbar-thumb {
  background: #4b5563
}

.process-step {
  opacity: 0;
  transform: translateY(30px)
}

.process-step.animate {
  animation: slideUp 0.6s ease-out forwards
}

@keyframes slideUp {
  to {
  opacity: 1;
  transform: translateY(0)
}


}

.process-line {
  width: 0;
  transition: width 1.5s ease-in-out
}

.process-line.animate {
  width: 100%
}

/* Calendly widget styles removed - using CTA button instead */

/* Booking CTA Card - Adapt to content on all screens */
.booking-cta-card {
  height: auto;
  min-height: auto;
  max-height: none;
}

@media (max-width: 767px) {
  /* Booking CTA Card - Mobile optimizations */
  .booking-cta-card {
    width: 100%;
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
  }
  
  /* Reduce padding on mobile for compact design */
  .booking-cta-card > div:first-child {
    padding: 1.5rem !important;
  }
  
  .booking-cta-card > div:last-child {
    padding: 1.5rem !important;
  }
  
  /* Reduce title size on mobile */
  .booking-cta-card h3 {
    font-size: 1.75rem !important;
  }
  
  .booking-cta-card p {
    font-size: 0.9375rem !important;
  }
  
  /* Reduce icon size on mobile */
  .booking-cta-card > div:first-child i {
    font-size: 1.75rem !important;
  }
}

.service-card {
  min-height: 420px;
  display: flex;
  flex-direction: column
}

.service-card-content {
  flex: 1;
  display: flex;
  flex-direction: column
}

.tip-card {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  /* Hardware acceleration */
  transform: translateZ(0);
  backface-visibility: hidden;
  contain: layout style;
}

.tip-card:hover {
  transform: translateY(-8px) scale(1.02) translateZ(0);
}

.bg-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.3;
  pointer-events: none;
  z-index: 0;
  /* Optimize blur performance */
  will-change: transform, opacity;
  transform: translateZ(0);
  /* Isolate expensive filter operations */
  contain: strict;
}

.dark .bg-orb {
  opacity: 0.2;
}

.bg-orb-1 {
  width: 500px;
  height: 500px;
  background: linear-gradient(135deg, #3B82F6, #2563EB);
  top: -10%;
  right: -10%;
  animation: gradient-shift 20s ease-in-out infinite
}

.bg-orb-2 {
  width: 400px;
  height: 400px;
  background: linear-gradient(135deg, #22C55E, #16A34A);
  bottom: -5%;
  left: -5%;
  animation: gradient-shift 25s ease-in-out infinite reverse
}

.bg-orb-3 {
  width: 350px;
  height: 350px;
  background: linear-gradient(135deg, #8B5CF6, #6366F1);
  top: 40%;
  left: 50%;
  animation: float-slow 15s ease-in-out infinite
}

.particle {
  position: absolute;
  width: 4px;
  height: 4px;
  background: rgba(59, 130, 246, 0.4);
  border-radius: 50%;
  pointer-events: none;
  animation: particle-float 15s ease-in-out infinite;
  top: 0;
  /* Optimize animation performance */
  will-change: transform, opacity;
  transform: translateZ(0);
  backface-visibility: hidden;
  contain: strict;
}

.dark .particle {
  background: rgba(96, 165, 250, 0.3);
}

@keyframes particle-float {
  0% {
    transform: translateY(100vh) translateX(0);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: translateY(-100px) translateX(20px);
    opacity: 0;
  }
}

.service-card {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.3s ease,
              display 0.3s ease;
  /* Hardware acceleration */
  transform: translateZ(0);
  backface-visibility: hidden;
  contain: layout style;
}

/* Service cards as links - remove default link styling */
a.service-card {
  text-decoration: none !important;
  color: inherit;
  cursor: pointer;
}

a.service-card:visited {
  color: inherit;
}

a.service-card:focus {
  outline: 2px solid rgba(59, 130, 246, 0.5);
  outline-offset: 2px;
}

.service-card:hover {
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
  transform: translateY(-12px) translateZ(0);
}

.dark .service-card:hover {
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}

/* Ensure nested links in service cards don't interfere */
.service-card a {
  pointer-events: none;
  text-decoration: none;
}

/* Services Navigation for Mobile/Tablet */
/* Services Navigation - Visible on Mobile/Tablet */
.services-nav-mobile {
  display: block;
  visibility: visible;
  width: calc(100% + 2rem);
  max-width: calc(100% + 2rem);
  margin: 0 -1rem 1.5rem -1rem;
  position: sticky;
  top: 70px;
  z-index: 10;
  background: rgba(243, 244, 246, 0.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 1.25rem 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  border-radius: 2rem;
  box-sizing: border-box;
  overflow: visible;
  height: auto;
}

.dark .services-nav-mobile {
  background: rgba(38, 38, 38, 0.95);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.services-nav-container {
  display: flex;
  gap: 0.75rem;
  overflow-x: hidden !important;
  overflow-y: visible;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 0.75rem 1rem;
  -webkit-overflow-scrolling: touch;
  justify-content: center;
  align-items: center;
  scroll-behavior: smooth;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
  flex-wrap: wrap !important;
}

.services-nav-container::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.services-nav-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  flex-shrink: 0;
  width: 85px;
  min-width: 85px;
  max-width: 85px;
  height: 85px;
  min-height: 85px;
  max-height: 85px;
  padding: 0.5rem 0.25rem;
  border-radius: 1rem;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.85));
  border: 2px solid rgba(229, 231, 235, 0.6);
  color: #4b5563;
  font-size: 0.6875rem;
  font-weight: 600;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  white-space: normal;
  word-wrap: break-word;
  text-align: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06),
              0 1px 2px rgba(0, 0, 0, 0.04);
  position: relative;
  overflow: visible;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 1;
  isolation: isolate;
  box-sizing: border-box;
}

/* Suppression de l'animation ::before pour éviter les conflits */

.dark .services-nav-btn {
  background: linear-gradient(135deg, rgba(26, 26, 26, 0.95), rgba(38, 38, 38, 0.85));
  border-color: rgba(55, 65, 81, 0.6);
  color: #d1d5db;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3),
              0 1px 3px rgba(0, 0, 0, 0.2),
              inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.dark .services-nav-btn::before {
  background: linear-gradient(90deg, 
    transparent, 
    rgba(255, 255, 255, 0.1), 
    transparent);
}

.services-nav-btn i {
  font-size: 1.125rem;
  transition: transform 0.25s ease, color 0.25s ease;
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: auto;
  line-height: 1;
}

.dark .services-nav-btn i {
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
}

.services-nav-btn span {
  font-size: 0.6875rem;
  line-height: 1.2;
  text-align: center;
  position: relative;
  z-index: 2;
  transition: transform 0.25s ease, font-weight 0.25s ease;
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
  overflow: visible;
  word-wrap: break-word;
  hyphens: auto;
}

/* Hover Animation - Simplified */
.services-nav-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1),
              0 2px 4px rgba(0, 0, 0, 0.06);
  border-color: rgba(59, 130, 246, 0.4);
  background: linear-gradient(135deg, rgba(255, 255, 255, 1), rgba(249, 250, 251, 0.95));
  color: #3b82f6;
}

.dark .services-nav-btn:hover {
  border-color: rgba(59, 130, 246, 0.5);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4),
              0 2px 4px rgba(0, 0, 0, 0.2);
  background: linear-gradient(135deg, rgba(30, 30, 30, 1), rgba(38, 38, 38, 0.95));
  color: #60a5fa;
}

.services-nav-btn:hover i {
  transform: scale(1.1);
  color: #3b82f6;
}

.dark .services-nav-btn:hover i {
  color: #60a5fa;
}

.services-nav-btn:hover span {
  font-weight: 700;
}

/* Click Animation - Simplified */
.services-nav-btn:active {
  transform: translateY(-1px);
  transition: transform 0.1s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.services-nav-btn:active i {
  transform: scale(1.05);
}

.services-nav-btn:active span {
  transform: none;
}

/* Suppression des animations complexes de ripple et clicking */

.service-nav-btn.active,
.services-nav-btn.active {
  color: white !important;
  transform: translateY(-2px);
  position: relative;
  border-radius: 1rem !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12),
              0 2px 4px rgba(0, 0, 0, 0.08);
  width: 85px !important;
  min-width: 85px !important;
  max-width: 85px !important;
  height: 85px !important;
  min-height: 85px !important;
  max-height: 85px !important;
  padding: 0.5rem 0.25rem !important;
}

/* Blue - Réparation */
.service-nav-btn.active[data-color="blue"],
.services-nav-btn.active[data-color="blue"] {
  background: linear-gradient(135deg, #3B82F6, #2563EB) !important;
  border-color: #3B82F6 !important;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2),
              0 1px 4px rgba(59, 130, 246, 0.15),
              0 0 0 1px rgba(59, 130, 246, 0.1),
              inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* Purple - Montage */
.service-nav-btn.active[data-color="purple"],
.services-nav-btn.active[data-color="purple"] {
  background: linear-gradient(135deg, #A855F7, #9333EA) !important;
  border-color: #A855F7 !important;
  box-shadow: 0 4px 12px rgba(168, 85, 247, 0.2),
              0 1px 4px rgba(168, 85, 247, 0.15),
              0 0 0 1px rgba(168, 85, 247, 0.1),
              inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* Green - Optimisation */
.service-nav-btn.active[data-color="green"],
.services-nav-btn.active[data-color="green"] {
  background: linear-gradient(135deg, #10B981, #059669) !important;
  border-color: #10B981 !important;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.2),
              0 1px 4px rgba(16, 185, 129, 0.15),
              0 0 0 1px rgba(16, 185, 129, 0.1),
              inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* Orange - Domotique */
.service-nav-btn.active[data-color="orange"],
.services-nav-btn.active[data-color="orange"] {
  background: linear-gradient(135deg, #F97316, #EA580C) !important;
  border-color: #F97316 !important;
  box-shadow: 0 4px 12px rgba(249, 115, 22, 0.2),
              0 1px 4px rgba(249, 115, 22, 0.15),
              0 0 0 1px rgba(249, 115, 22, 0.1),
              inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* Red - Gaming */
.service-nav-btn.active[data-color="red"],
.services-nav-btn.active[data-color="red"] {
  background: linear-gradient(135deg, #EF4444, #DC2626) !important;
  border-color: #EF4444 !important;
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.2),
              0 1px 4px rgba(239, 68, 68, 0.15),
              0 0 0 1px rgba(239, 68, 68, 0.1),
              inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* Blue-dark - Premium - Always styled with blue background */
.service-nav-btn[data-color="blue-dark"],
.services-nav-btn[data-color="blue-dark"] {
  background: linear-gradient(135deg, #3B82F6, #2563EB) !important;
  border-color: #3B82F6 !important;
  color: white !important;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.2);
}

.service-nav-btn[data-color="blue-dark"] i,
.services-nav-btn[data-color="blue-dark"] i {
  color: #FACC15 !important;
  filter: drop-shadow(0 1px 2px rgba(250, 204, 21, 0.3));
}

.service-nav-btn[data-color="blue-dark"]:hover,
.services-nav-btn[data-color="blue-dark"]:hover {
  background: linear-gradient(135deg, #2563EB, #1D4ED8) !important;
  border-color: #2563EB !important;
  box-shadow: 0 8px 20px rgba(59, 130, 246, 0.4);
}

.service-nav-btn.active[data-color="blue-dark"],
.services-nav-btn.active[data-color="blue-dark"] {
  background: linear-gradient(135deg, #1D4ED8, #1E40AF, #1E3A8A) !important;
  border-color: #1D4ED8 !important;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3),
              0 1px 4px rgba(37, 99, 235, 0.2),
              0 0 0 1px rgba(37, 99, 235, 0.15),
              inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.service-nav-btn.active[data-color="blue-dark"] i,
.services-nav-btn.active[data-color="blue-dark"] i {
  color: #FDE047 !important;
  filter: drop-shadow(0 1px 2px rgba(253, 224, 71, 0.4));
}

/* Premium button in dark mode */
.dark .service-nav-btn[data-color="blue-dark"],
.dark .services-nav-btn[data-color="blue-dark"] {
  background: linear-gradient(135deg, #3B82F6, #2563EB) !important;
  border-color: #3B82F6 !important;
  color: white !important;
}

.dark .service-nav-btn[data-color="blue-dark"]:hover,
.dark .services-nav-btn[data-color="blue-dark"]:hover {
  background: linear-gradient(135deg, #2563EB, #1D4ED8) !important;
  border-color: #2563EB !important;
}

.dark .service-nav-btn.active[data-color="blue-dark"],
.dark .services-nav-btn.active[data-color="blue-dark"] {
  background: linear-gradient(135deg, #1D4ED8, #1E40AF, #1E3A8A) !important;
  border-color: #1D4ED8 !important;
}

/* Suppression des animations keyframes obsolètes */

.services-nav-btn.active i {
  transform: scale(1.1);
  filter: drop-shadow(0 1px 2px rgba(255, 255, 255, 0.2));
}

.services-nav-btn.active span {
  font-weight: 700;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Active button hover state - Simplified */
.service-nav-btn.active:hover,
.services-nav-btn.active:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15),
              0 2px 6px rgba(0, 0, 0, 0.1);
}

/* Dark mode hover states - Simplified */
.dark .service-nav-btn.active:hover,
.dark .services-nav-btn.active:hover {
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4),
              0 2px 6px rgba(0, 0, 0, 0.2);
}

.services-nav-btn.active:hover i {
  transform: scale(1.15);
}

/* Mobile/Tablet: Transform grid to single column, show one service at a time */
@media (max-width: 1023px) {
  .services-grid-desktop {
    display: block !important;
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    position: relative;
    min-height: 500px; /* Prevent layout shift during transitions */
  }
  
  .service-item {
    display: none !important;
    opacity: 0;
    transform: translateX(40px) scale(0.96);
    transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                filter 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    width: 100%;
    max-width: 100%;
    margin-bottom: 0;
    filter: blur(6px);
    will-change: opacity, transform, filter;
    visibility: hidden;
  }
  
  /* Service item leaving (fade out) */
  .service-item.leaving {
    display: flex !important;
    opacity: 0 !important;
    transform: translateX(-40px) scale(0.96) !important;
    filter: blur(6px) !important;
    pointer-events: none;
    visibility: visible;
  }
  
  /* Service item entering (fade in) */
  .service-item.entering {
    display: flex !important;
    opacity: 0;
    transform: translateX(40px) scale(0.96);
    filter: blur(6px);
    pointer-events: none;
    visibility: visible;
  }
  
  /* Service item active (fully visible) */
  .service-item.active {
    display: flex !important;
    opacity: 1 !important;
    transform: translateX(0) scale(1) !important;
    filter: blur(0) !important;
    pointer-events: auto;
    visibility: visible;
  }
  
  /* Hide first service by default - will be shown by JS if active */
  .service-item[data-service-index="0"]:not(.active) {
    display: none !important;
  }
  
  /* Animation keyframes for smoother transitions */
  @keyframes serviceFadeIn {
    from {
      opacity: 0;
      transform: translateX(40px) scale(0.96);
      filter: blur(6px);
    }
    to {
      opacity: 1;
      transform: translateX(0) scale(1);
      filter: blur(0);
    }
  }
  
  @keyframes serviceFadeOut {
    from {
      opacity: 1;
      transform: translateX(0) scale(1);
      filter: blur(0);
    }
    to {
      opacity: 0;
      transform: translateX(-40px) scale(0.96);
      filter: blur(6px);
    }
  }
  
  /* Reduce section height */
  #services {
    min-height: auto;
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
  
  /* Compact service cards on mobile */
  .service-card {
    min-height: auto;
    margin-bottom: 0;
    width: 100%;
  }
  
  .service-card h3 {
    font-size: 1.5rem;
    margin-bottom: 0.75rem;
    line-height: 1.3;
  }
  
  .service-card p {
    font-size: 0.875rem;
    margin-bottom: 1rem;
    line-height: 1.5;
  }
  
  .service-card ul {
    margin-bottom: 1rem;
  }
  
  .service-card ul li {
    font-size: 0.875rem;
    margin-bottom: 0.5rem;
    line-height: 1.4;
  }
  
  .service-card .w-16 {
    width: 3rem;
    height: 3rem;
  }
  
  .service-card .text-3xl {
    font-size: 1.75rem;
  }
  
  .service-card .text-2xl {
    font-size: 1.5rem;
  }
  
  /* Show navigation on mobile/tablet */
  .services-nav-mobile {
    display: block;
    width: calc(100% + 2rem);
    max-width: calc(100% + 2rem);
    margin: 0 -1rem 1.5rem -1rem;
    padding: 1.25rem 0;
    overflow: visible;
  }
  
  .services-nav-container {
    gap: 0.625rem;
    padding: 0.75rem 1rem;
    justify-content: center;
    align-items: center;
    overflow-y: visible;
    overflow-x: auto;
  }
  
  .services-nav-btn {
    width: 85px !important;
    min-width: 85px !important;
    max-width: 85px !important;
    height: 85px !important;
    min-height: 85px !important;
    max-height: 85px !important;
    padding: 0.5rem 0.25rem !important;
    border-radius: 1rem;
  }
  
  .service-nav-btn.active,
  .services-nav-btn.active {
    width: 85px !important;
    min-width: 85px !important;
    max-width: 85px !important;
    height: 85px !important;
    min-height: 85px !important;
    max-height: 85px !important;
    padding: 0.5rem 0.25rem !important;
  }
  
  .services-nav-btn i {
    font-size: 1.25rem;
  }
  
  .services-nav-btn span {
    font-size: 0.75rem;
  }
  
  .services-nav-btn.active::after {
    border-radius: 1rem;
  }
}

/* Tablet optimizations */
@media (min-width: 640px) and (max-width: 1023px) {
  .services-nav-mobile {
    top: 75px;
    width: calc(100% + 2rem);
    max-width: calc(100% + 2rem);
    margin: 0 -1rem 1.5rem -1rem;
    padding: 1.375rem 0;
    overflow: visible;
    display: block !important;
    visibility: visible !important;
    height: auto !important;
  }
  
  .services-nav-container {
    gap: 0.75rem;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    overflow-x: hidden !important;
    overflow-y: visible;
    padding: 0.875rem 1rem;
  }
  
  .services-nav-btn {
    width: 85px !important;
    min-width: 85px !important;
    max-width: 85px !important;
    height: 85px !important;
    min-height: 85px !important;
    max-height: 85px !important;
    padding: 0.5rem 0.25rem !important;
    flex: 0 0 auto;
    border-radius: 1rem;
  }
  
  .service-nav-btn.active,
  .services-nav-btn.active {
    width: 85px !important;
    min-width: 85px !important;
    max-width: 85px !important;
    height: 85px !important;
    min-height: 85px !important;
    max-height: 85px !important;
    padding: 0.5rem 0.25rem !important;
  }
  
  .services-nav-btn i {
    font-size: 1.375rem;
  }
  
  .services-nav-btn span {
    font-size: 0.8125rem;
  }
  
  .services-nav-btn.active::after {
    border-radius: 1rem;
  }
}

/* Desktop: Show grid, hide navigation - FORCE HIDE */
@media (min-width: 1024px) {
  .services-nav-mobile {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    left: -9999px !important;
  }
  
  .services-grid-desktop {
    display: grid !important;
  }
  
  .service-item {
    display: flex !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    visibility: visible !important;
  }
}

.price-range-container {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease-in-out, opacity 0.3s ease-in-out;
  opacity: 0
}

.price-range-container.show {
  max-height: 300px;
  opacity: 1
}

.price-bar {
  width: 0;
  transition: width 1s ease-out
}

.price-bar.animate {
  width: 100%
}

[data-aos] {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important
}

.aos-init[data-aos] {
  opacity: 1 !important;
  transform: none !important
}

.aos-animate {
  opacity: 1 !important;
  transform: none !important
}

/* Fog fade-in animation for sections - Optimized for performance */
.section-fade-in {
  opacity: 0;
  transform: translateY(30px) translateZ(0);
  /* Use filter blur only during animation, optimized */
  filter: blur(4px);
  transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              filter 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
  /* Only use will-change during animation */
  will-change: opacity, transform, filter;
  /* Force hardware acceleration */
  backface-visibility: hidden;
  /* Isolate repaints for better performance */
  contain: layout style paint;
}

/* Mobile optimization: Reduce animation complexity for better performance */
@media (max-width: 767px) {
  .section-fade-in {
    filter: blur(2px);
    transform: translateY(20px) translateZ(0);
    transition: opacity 0.6s ease-out,
                transform 0.6s ease-out,
                filter 0.6s ease-out !important;
    will-change: auto; /* Reduce will-change usage on mobile */
  }
  
  /* Reduce particle animations on mobile */
  .particle {
    animation-duration: 12s !important;
  }
  
  /* Simplify background orbs on mobile */
  .bg-orb {
    animation-duration: 20s !important;
  }
}

/* Visible state - ensure sections maintain visibility when already animated (prevents re-animation) */
.section-fade-in.visible {
  opacity: 1 !important;
  transform: translateY(0) translateZ(0) !important;
  filter: blur(0) !important;
  /* Remove will-change after animation to free memory (done in JS after delay) */
}

*, ::before, ::after{
  --tw-border-spacing-x:0;
  --tw-border-spacing-y:0;
  --tw-translate-x:0;
  --tw-translate-y:0;
  --tw-rotate:0;
  --tw-skew-x:0;
  --tw-skew-y:0;
  --tw-scale-x:1;
  --tw-scale-y:1;
  --tw-pan-x: ;
  --tw-pan-y: ;
  --tw-pinch-zoom: ;
  --tw-scroll-snap-strictness:proximity;
  --tw-gradient-from-position: ;
  --tw-gradient-via-position: ;
  --tw-gradient-to-position: ;
  --tw-ordinal: ;
  --tw-slashed-zero: ;
  --tw-numeric-figure: ;
  --tw-numeric-spacing: ;
  --tw-numeric-fraction: ;
  --tw-ring-inset: ;
  --tw-ring-offset-width:0px;
  --tw-ring-offset-color:#fff;
  --tw-ring-color:rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow:0 0 #0000;
  --tw-ring-shadow:0 0 #0000;
  --tw-shadow:0 0 #0000;
  --tw-shadow-colored:0 0 #0000;
  --tw-blur: ;
  --tw-brightness: ;
  --tw-contrast: ;
  --tw-grayscale: ;
  --tw-hue-rotate: ;
  --tw-invert: ;
  --tw-saturate: ;
  --tw-sepia: ;
  --tw-drop-shadow: ;
  --tw-backdrop-blur: ;
  --tw-backdrop-brightness: ;
  --tw-backdrop-contrast: ;
  --tw-backdrop-grayscale: ;
  --tw-backdrop-hue-rotate: ;
  --tw-backdrop-invert: ;
  --tw-backdrop-opacity: ;
  --tw-backdrop-saturate: ;
  --tw-backdrop-sepia: ;
  --tw-contain-size: ;
  --tw-contain-layout: ;
  --tw-contain-paint: ;
  --tw-contain-style: 
}

::backdrop{
  --tw-border-spacing-x:0;
  --tw-border-spacing-y:0;
  --tw-translate-x:0;
  --tw-translate-y:0;
  --tw-rotate:0;
  --tw-skew-x:0;
  --tw-skew-y:0;
  --tw-scale-x:1;
  --tw-scale-y:1;
  --tw-pan-x: ;
  --tw-pan-y: ;
  --tw-pinch-zoom: ;
  --tw-scroll-snap-strictness:proximity;
  --tw-gradient-from-position: ;
  --tw-gradient-via-position: ;
  --tw-gradient-to-position: ;
  --tw-ordinal: ;
  --tw-slashed-zero: ;
  --tw-numeric-figure: ;
  --tw-numeric-spacing: ;
  --tw-numeric-fraction: ;
  --tw-ring-inset: ;
  --tw-ring-offset-width:0px;
  --tw-ring-offset-color:#fff;
  --tw-ring-color:rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow:0 0 #0000;
  --tw-ring-shadow:0 0 #0000;
  --tw-shadow:0 0 #0000;
  --tw-shadow-colored:0 0 #0000;
  --tw-blur: ;
  --tw-brightness: ;
  --tw-contrast: ;
  --tw-grayscale: ;
  --tw-hue-rotate: ;
  --tw-invert: ;
  --tw-saturate: ;
  --tw-sepia: ;
  --tw-drop-shadow: ;
  --tw-backdrop-blur: ;
  --tw-backdrop-brightness: ;
  --tw-backdrop-contrast: ;
  --tw-backdrop-grayscale: ;
  --tw-backdrop-hue-rotate: ;
  --tw-backdrop-invert: ;
  --tw-backdrop-opacity: ;
  --tw-backdrop-saturate: ;
  --tw-backdrop-sepia: ;
  --tw-contain-size: ;
  --tw-contain-layout: ;
  --tw-contain-paint: ;
  --tw-contain-style: 
}

*,::after,::before{
  box-sizing:border-box;
  border-width:0;
  border-style:solid;
  border-color:#e5e7eb
}

::after,::before{
  --tw-content:''
}

:host,html{
  line-height:1.5;
  -webkit-text-size-adjust:100%;
  -moz-tab-size:4;
  tab-size:4;
  font-family:Inter, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
  font-feature-settings:normal;
  font-variation-settings:normal;
  -webkit-tap-highlight-color:transparent;
  font-display:swap
}

body{
  margin:0;
  line-height:inherit
}

hr{
  height:0;
  color:inherit;
  border-top-width:1px
}

abbr:where([title]){
  -webkit-text-decoration:underline dotted;
  text-decoration:underline dotted
}

h1,h2,h3,h4,h5,h6{
  font-size:inherit;
  font-weight:inherit
}

a{
  color:inherit;
  text-decoration:inherit
}

b,strong{
  font-weight:bolder
}

code,kbd,pre,samp{
  font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-feature-settings:normal;
  font-variation-settings:normal;
  font-size:1em
}

small{
  font-size:80%
}

sub,sup{
  font-size:75%;
  line-height:0;
  position:relative;
  vertical-align:baseline
}

sub{
  bottom:-.25em
}

sup{
  top:-.5em
}

table{
  text-indent:0;
  border-color:inherit;
  border-collapse:collapse
}

button,input,optgroup,select,textarea{
  font-family:inherit;
  font-feature-settings:inherit;
  font-variation-settings:inherit;
  font-size:100%;
  font-weight:inherit;
  line-height:inherit;
  letter-spacing:inherit;
  color:inherit;
  margin:0;
  padding:0
}

button,select{
  text-transform:none
}

button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){
  -webkit-appearance:button;
  background-color:transparent;
  background-image:none
}

:-moz-focusring{
  outline:auto
}

:-moz-ui-invalid{
  box-shadow:none
}

progress{
  vertical-align:baseline
}

::-webkit-inner-spin-button,::-webkit-outer-spin-button{
  height:auto
}

[type=search]{
  -webkit-appearance:textfield;
  outline-offset:-2px
}

::-webkit-search-decoration{
  -webkit-appearance:none
}

::-webkit-file-upload-button{
  -webkit-appearance:button;
  font:inherit
}

summary{
  display:list-item
}

blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{
  margin:0
}

fieldset{
  margin:0;
  padding:0
}

legend{
  padding:0
}

menu,ol,ul{
  list-style:none;
  margin:0;
  padding:0
}

dialog{
  padding:0
}

textarea{
  resize:vertical
}

input::placeholder,textarea::placeholder{
  opacity:1;
  color:#9ca3af
}

[role=button],button{
  cursor:pointer
}

:disabled{
  cursor:default
}

audio,canvas,embed,iframe,img,object,svg,video{
  display:block;
  vertical-align:middle
}

img,video{
  max-width:100%;
  height:auto
}

[hidden]:where(:not([hidden=until-found])){
  display:none
}

.fixed{
  position:fixed
}

.absolute{
  position:absolute
}

.relative{
  position:relative
}

.inset-0{
  inset:0px
}

.-bottom-8{
  bottom:-2rem
}

.-left-8{
  left:-2rem
}

.bottom-0{
  bottom:0px
}

.bottom-8{
  bottom:2rem
}

.left-0{
  left:0px
}

.left-8{
  left:2rem
}

.left-1\/2{
  left:50%
}

.right-0{
  right:0px
}

.right-8{
  right:2rem
}

.top-0{
  top:0px
}

.top-1\/2{
  top:50%
}

.top-8{
  top:2rem
}

.z-0{
  z-index:0
}

.z-10{
  z-index:10
}

.z-50{
  z-index:50
}

.col-span-1{
  grid-column:span 1 / span 1
}

.mx-auto{
  margin-left:auto;
  margin-right:auto
}

.-mb-16{
  margin-bottom:-4rem
}

.-ml-16{
  margin-left:-4rem
}

.-mr-20{
  margin-right:-5rem
}

.-mt-20{
  margin-top:-5rem
}

.mb-10{
  margin-bottom:2.5rem
}

.mb-12{
  margin-bottom:3rem
}

.mb-16{
  margin-bottom:4rem
}

.mb-2{
  margin-bottom:0.5rem
}

.mb-20{
  margin-bottom:5rem
}

.mb-3{
  margin-bottom:0.75rem
}

.mb-4{
  margin-bottom:1rem
}

.mb-6{
  margin-bottom:1.5rem
}

.mb-8{
  margin-bottom:2rem
}

.mr-2{
  margin-right:0.5rem
}

.mt-1{
  margin-top:0.25rem
}

.mt-12{
  margin-top:3rem
}

.mt-2{
  margin-top:0.5rem
}

.mt-auto{
  margin-top:auto
}

.mb-5{
  margin-bottom:1.25rem
}

.mr-3{
  margin-right:0.75rem
}

.mt-0\.5{
  margin-top:0.125rem
}

.mt-16{
  margin-top:4rem
}

.mt-4{
  margin-top:1rem
}

.mt-6{
  margin-top:1.5rem
}

.block{
  display:block
}

.inline-block{
  display:inline-block
}

.flex{
  display:flex
}

.inline-flex{
  display:inline-flex
}

.grid{
  display:grid
}

.hidden{
  display:none
}

.aspect-\[4\/3\]{
  aspect-ratio:4/3
}

.h-1{
  height:0.25rem
}

.h-10{
  height:2.5rem
}

.h-12{
  height:3rem
}

.h-14{
  height:3.5rem
}

.h-16{
  height:4rem
}

.h-2{
  height:0.5rem
}

.h-20{
  height:5rem
}

.h-32{
  height:8rem
}

.h-4{
  height:1rem
}

.h-40{
  height:10rem
}

.h-56{
  height:14rem
}

.h-72{
  height:18rem
}

.h-full{
  height:100%
}

.h-3{
  height:0.75rem
}

.w-10{
  width:2.5rem
}

.w-12{
  width:3rem
}

.w-14{
  width:3.5rem
}

.w-16{
  width:4rem
}

.w-2{
  width:0.5rem
}

.w-20{
  width:5rem
}

.w-32{
  width:8rem
}

.w-40{
  width:10rem
}

.w-\[166\%\]{
  width:166%
}

.w-\[30\%\]{
  width:30%
}

.w-\[60\%\]{
  width:60%
}

.w-\[80\%\]{
  width:80%
}

.w-fit{
  width:-moz-fit-content;
  width:fit-content
}

.w-full{
  width:100%
}

.w-px{
  width:1px
}

.max-w-3xl{
  max-width:48rem
}

.max-w-7xl{
  max-width:80rem
}

.max-w-xl{
  max-width:36rem
}

.max-w-xs{
  max-width:20rem
}

.flex-1{
  flex:1 1 0%
}

.flex-shrink-0{
  flex-shrink:0
}

.origin-bottom-left{
  transform-origin:bottom left
}

.-translate-y-1\/2{
  --tw-translate-y:-50%;
  transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.-translate-x-1\/2{
  --tw-translate-x:-50%;
  transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.skew-y-3{
  --tw-skew-y:3deg;
  transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.transform{
  transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

@keyframes bounce-subtle{
  0%, 100%{
  transform:translateY(0)
}

50%{
  transform:translateY(-10px)
}


}

.animate-bounce-subtle{
  animation:bounce-subtle 2s ease-in-out infinite
}

@keyframes float{
  0%, 100%{
  transform:translateY(0px)
}

50%{
  transform:translateY(-20px)
}


}

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

@keyframes gradient-shift{
  0%, 100%{
    transform: translate(0, 0) scale(1);
    opacity: 0.3;
  }
  25%{
    transform: translate(30px, -30px) scale(1.1);
    opacity: 0.4;
  }
  50%{
    transform: translate(-20px, 20px) scale(0.9);
    opacity: 0.35;
  }
  75%{
    transform: translate(20px, 30px) scale(1.05);
    opacity: 0.4;
  }
}

@keyframes float-slow{
  0%, 100%{
    transform: translate(0, 0);
  }
  33%{
    transform: translate(20px, -30px);
  }
  66%{
    transform: translate(-20px, 20px);
  }
}

@keyframes float-reverse{
  0%, 100%{
    transform: translate(0, 0) scale(1);
  }
  50%{
    transform: translate(-30px, 30px) scale(1.1);
  }
}

@keyframes pulse{
  50%{
  opacity:.5
}


}

.animate-pulse{
  animation:pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite
}

@keyframes pulse-glow{
  0%, 100%{
  box-shadow:0 0 20px rgba(59, 130, 246, 0.3)
}

50%{
  box-shadow:0 0 40px rgba(59, 130, 246, 0.6)
}


}

.animate-pulse-glow{
  animation:pulse-glow 2s ease-in-out infinite
}

@keyframes price-pulse{
  0%, 100%{
  transform:scale(1)
}

50%{
  transform:scale(1.05)
}


}

.animate-price-pulse{
  animation:price-pulse 2s ease-in-out infinite
}

.resize-none{
  resize:none
}

.grid-cols-1{
  grid-template-columns:repeat(1, minmax(0, 1fr))
}

.grid-cols-2{
  grid-template-columns:repeat(2, minmax(0, 1fr))
}

.flex-col{
  flex-direction:column
}

.flex-wrap{
  flex-wrap:wrap
}

.items-start{
  align-items:flex-start
}

.items-center{
  align-items:center
}

.justify-center{
  justify-content:center
}

.justify-between{
  justify-content:space-between
}

.gap-10{
  gap:2.5rem
}

.gap-12{
  gap:3rem
}

.gap-2{
  gap:0.5rem
}

.gap-20{
  gap:5rem
}

.gap-3{
  gap:0.75rem
}

.gap-4{
  gap:1rem
}

.gap-5{
  gap:1.25rem
}

.gap-6{
  gap:1.5rem
}

.gap-8{
  gap:2rem
}

.gap-16{
  gap:4rem
}

.space-x-8 > :not([hidden]) ~ :not([hidden]){
  --tw-space-x-reverse:0;
  margin-right:calc(2rem * var(--tw-space-x-reverse));
  margin-left:calc(2rem * calc(1 - var(--tw-space-x-reverse)))
}

.space-y-10 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse:0;
  margin-top:calc(2.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom:calc(2.5rem * var(--tw-space-y-reverse))
}

.space-y-3 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse:0;
  margin-top:calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom:calc(0.75rem * var(--tw-space-y-reverse))
}

.space-y-6 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse:0;
  margin-top:calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom:calc(1.5rem * var(--tw-space-y-reverse))
}

.space-y-8 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse:0;
  margin-top:calc(2rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom:calc(2rem * var(--tw-space-y-reverse))
}

.space-y-2 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse:0;
  margin-top:calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom:calc(0.5rem * var(--tw-space-y-reverse))
}

.space-y-4 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse:0;
  margin-top:calc(1rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom:calc(1rem * var(--tw-space-y-reverse))
}

.overflow-hidden{
  overflow:hidden
}

.scroll-smooth{
  scroll-behavior:smooth
}

.rounded-2xl{
  border-radius:1rem
}

.rounded-3xl{
  border-radius:1.5rem
}

.rounded-full{
  border-radius:9999px
}

.rounded-xl{
  border-radius:0.75rem
}

.border{
  border-width:1px
}

.border-2{
  border-width:2px
}

.border-t-2{
  border-top-width:2px
}

.border-blue-200{
  --tw-border-opacity:1;
  border-color:rgb(191 219 254 / var(--tw-border-opacity, 1))
}

.border-gray-100{
  --tw-border-opacity:1;
  border-color:rgb(243 244 246 / var(--tw-border-opacity, 1))
}

.border-gray-200{
  --tw-border-opacity:1;
  border-color:rgb(229 231 235 / var(--tw-border-opacity, 1))
}

.border-green-200{
  --tw-border-opacity:1;
  border-color:rgb(187 247 208 / var(--tw-border-opacity, 1))
}

.border-purple-200{
  --tw-border-opacity:1;
  border-color:rgb(233 213 255 / var(--tw-border-opacity, 1))
}

.border-white\/20{
  border-color:rgb(255 255 255 / 0.2)
}

.bg-\[\#F3F4F6\]{
  --tw-bg-opacity:1;
  background-color:rgb(243 244 246 / var(--tw-bg-opacity, 1))
}

.bg-\[\#FAF9F6\]{
  --tw-bg-opacity:1;
  background-color:rgb(250 249 246 / var(--tw-bg-opacity, 1))
}

.bg-blue-50{
  --tw-bg-opacity:1;
  background-color:rgb(239 246 255 / var(--tw-bg-opacity, 1))
}

.bg-gray-200{
  --tw-bg-opacity:1;
  background-color:rgb(229 231 235 / var(--tw-bg-opacity, 1))
}

.bg-gray-400{
  --tw-bg-opacity:1;
  background-color:rgb(156 163 175 / var(--tw-bg-opacity, 1))
}

.bg-green-500{
  --tw-bg-opacity:1;
  background-color:rgb(34 197 94 / var(--tw-bg-opacity, 1))
}

.bg-white{
  --tw-bg-opacity:1;
  background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))
}

.bg-white\/10{
  background-color:rgb(255 255 255 / 0.1)
}

.bg-white\/20{
  background-color:rgb(255 255 255 / 0.2)
}

.bg-white\/95{
  background-color:rgb(255 255 255 / 0.95)
}

.bg-yellow-400{
  --tw-bg-opacity:1;
  background-color:rgb(250 204 21 / var(--tw-bg-opacity, 1))
}

.bg-gray-100{
  --tw-bg-opacity:1;
  background-color:rgb(243 244 246 / var(--tw-bg-opacity, 1))
}

.bg-gradient-to-br{
  background-image:linear-gradient(to bottom right, var(--tw-gradient-stops))
}

.bg-gradient-to-r{
  background-image:linear-gradient(to right, var(--tw-gradient-stops))
}

.bg-gradient-to-t{
  background-image:linear-gradient(to top, var(--tw-gradient-stops))
}

.from-black\/60{
  --tw-gradient-from:rgb(0 0 0 / 0.6) var(--tw-gradient-from-position);
  --tw-gradient-to:rgb(0 0 0 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)
}

.from-blue-200{
  --tw-gradient-from:#bfdbfe var(--tw-gradient-from-position);
  --tw-gradient-to:rgb(191 219 254 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)
}

.from-blue-50{
  --tw-gradient-from:#eff6ff var(--tw-gradient-from-position);
  --tw-gradient-to:rgb(239 246 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)
}

.from-blue-500{
  --tw-gradient-from:#3b82f6 var(--tw-gradient-from-position);
  --tw-gradient-to:rgb(59 130 246 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)
}

.from-blue-600{
  --tw-gradient-from:#2563eb var(--tw-gradient-from-position);
  --tw-gradient-to:rgb(37 99 235 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)
}

.from-green-50{
  --tw-gradient-from:#f0fdf4 var(--tw-gradient-from-position);
  --tw-gradient-to:rgb(240 253 244 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)
}

.from-green-500{
  --tw-gradient-from:#22c55e var(--tw-gradient-from-position);
  --tw-gradient-to:rgb(34 197 94 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)
}

.from-green-600{
  --tw-gradient-from:#16a34a var(--tw-gradient-from-position);
  --tw-gradient-to:rgb(22 163 74 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)
}

.from-orange-500{
  --tw-gradient-from:#f97316 var(--tw-gradient-from-position);
  --tw-gradient-to:rgb(249 115 22 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)
}

.from-purple-50{
  --tw-gradient-from:#faf5ff var(--tw-gradient-from-position);
  --tw-gradient-to:rgb(250 245 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)
}

.from-purple-500{
  --tw-gradient-from:#a855f7 var(--tw-gradient-from-position);
  --tw-gradient-to:rgb(168 85 247 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)
}

.from-purple-600{
  --tw-gradient-from:#9333ea var(--tw-gradient-from-position);
  --tw-gradient-to:rgb(147 51 234 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)
}

.from-red-500{
  --tw-gradient-from:#ef4444 var(--tw-gradient-from-position);
  --tw-gradient-to:rgb(239 68 68 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)
}

.via-blue-300{
  --tw-gradient-to:rgb(147 197 253 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops:var(--tw-gradient-from), #93c5fd var(--tw-gradient-via-position), var(--tw-gradient-to)
}

.via-blue-700{
  --tw-gradient-to:rgb(29 78 216 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops:var(--tw-gradient-from), #1d4ed8 var(--tw-gradient-via-position), var(--tw-gradient-to)
}

.via-transparent{
  --tw-gradient-to:rgb(0 0 0 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops:var(--tw-gradient-from), transparent var(--tw-gradient-via-position), var(--tw-gradient-to)
}

.via-green-700{
  --tw-gradient-to:rgb(21 128 61 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops:var(--tw-gradient-from), #15803d var(--tw-gradient-via-position), var(--tw-gradient-to)
}

.via-purple-500{
  --tw-gradient-to:rgb(168 85 247 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops:var(--tw-gradient-from), #a855f7 var(--tw-gradient-via-position), var(--tw-gradient-to)
}

.to-blue-100{
  --tw-gradient-to:#dbeafe var(--tw-gradient-to-position)
}

.to-blue-200{
  --tw-gradient-to:#bfdbfe var(--tw-gradient-to-position)
}

.to-blue-600{
  --tw-gradient-to:#2563eb var(--tw-gradient-to-position)
}

.to-blue-700{
  --tw-gradient-to:#1d4ed8 var(--tw-gradient-to-position)
}

.to-blue-800{
  --tw-gradient-to:#1e40af var(--tw-gradient-to-position)
}

.to-green-100{
  --tw-gradient-to:#dcfce7 var(--tw-gradient-to-position)
}

.to-green-600{
  --tw-gradient-to:#16a34a var(--tw-gradient-to-position)
}

.to-green-700{
  --tw-gradient-to:#15803d var(--tw-gradient-to-position)
}

.to-orange-600{
  --tw-gradient-to:#ea580c var(--tw-gradient-to-position)
}

.to-purple-100{
  --tw-gradient-to:#f3e8ff var(--tw-gradient-to-position)
}

.to-purple-50{
  --tw-gradient-to:#faf5ff var(--tw-gradient-to-position)
}

.to-purple-600{
  --tw-gradient-to:#9333ea var(--tw-gradient-to-position)
}

.to-purple-700{
  --tw-gradient-to:#7e22ce var(--tw-gradient-to-position)
}

.to-red-600{
  --tw-gradient-to:#dc2626 var(--tw-gradient-to-position)
}

.to-transparent{
  --tw-gradient-to:transparent var(--tw-gradient-to-position)
}

.to-green-800{
  --tw-gradient-to:#166534 var(--tw-gradient-to-position)
}

.object-cover{
  object-fit:cover
}

.p-10{
  padding:2.5rem
}

.p-5{
  padding:1.25rem
}

.p-6{
  padding:1.5rem
}

.p-8{
  padding:2rem
}

.px-4{
  padding-left:1rem;
  padding-right:1rem
}

.px-5{
  padding-left:1.25rem;
  padding-right:1.25rem
}

.px-6{
  padding-left:1.5rem;
  padding-right:1.5rem
}

.px-8{
  padding-left:2rem;
  padding-right:2rem
}

.py-1\.5{
  padding-top:0.375rem;
  padding-bottom:0.375rem
}

.py-2{
  padding-top:0.5rem;
  padding-bottom:0.5rem
}

.py-2\.5{
  padding-top:0.625rem;
  padding-bottom:0.625rem
}

.py-24{
  padding-top:6rem;
  padding-bottom:6rem
}

.py-4{
  padding-top:1rem;
  padding-bottom:1rem
}

.py-5{
  padding-top:1.25rem;
  padding-bottom:1.25rem
}

.pb-20{
  padding-bottom:5rem
}

.pt-32{
  padding-top:8rem
}

.pb-10{
  padding-bottom:2.5rem
}

.pt-10{
  padding-top:2.5rem
}

.pt-20{
  padding-top:5rem
}

.text-center{
  text-align:center
}

.text-right{
  text-align:right
}

.text-2xl{
  font-size:1.5rem;
  line-height:2rem
}

.text-3xl{
  font-size:1.875rem;
  line-height:2.25rem
}

.text-4xl{
  font-size:2.25rem;
  line-height:2.5rem
}

.text-5xl{
  font-size:3rem;
  line-height:1
}

.text-lg{
  font-size:1.125rem;
  line-height:1.75rem
}

.text-sm{
  font-size:0.875rem;
  line-height:1.25rem
}

.text-xl{
  font-size:1.25rem;
  line-height:1.75rem
}

.text-xs{
  font-size:0.75rem;
  line-height:1rem
}

.font-bold{
  font-weight:700
}

.font-extrabold{
  font-weight:800
}

.font-medium{
  font-weight:500
}

.font-semibold{
  font-weight:600
}

.uppercase{
  text-transform:uppercase
}

.italic{
  font-style:italic
}

.leading-relaxed{
  line-height:1.625
}

.leading-tight{
  line-height:1.25
}

.tracking-tight{
  letter-spacing:-0.025em
}

.tracking-wide{
  letter-spacing:0.025em
}

.text-blue-100{
  --tw-text-opacity:1;
  color:rgb(219 234 254 / var(--tw-text-opacity, 1))
}

.text-blue-500{
  --tw-text-opacity:1;
  color:rgb(59 130 246 / var(--tw-text-opacity, 1))
}

.text-blue-600{
  --tw-text-opacity:1;
  color:rgb(37 99 235 / var(--tw-text-opacity, 1))
}

.text-blue-900{
  --tw-text-opacity:1;
  color:rgb(30 58 138 / var(--tw-text-opacity, 1))
}

.text-gray-500{
  --tw-text-opacity:1;
  color:rgb(107 114 128 / var(--tw-text-opacity, 1))
}

.text-gray-600{
  --tw-text-opacity:1;
  color:rgb(75 85 99 / var(--tw-text-opacity, 1))
}

.text-gray-700{
  --tw-text-opacity:1;
  color:rgb(55 65 81 / var(--tw-text-opacity, 1))
}

.text-gray-900{
  --tw-text-opacity:1;
  color:rgb(17 24 39 / var(--tw-text-opacity, 1))
}

.text-green-500{
  --tw-text-opacity:1;
  color:rgb(34 197 94 / var(--tw-text-opacity, 1))
}

.text-green-600{
  --tw-text-opacity:1;
  color:rgb(22 163 74 / var(--tw-text-opacity, 1))
}

.text-orange-600{
  --tw-text-opacity:1;
  color:rgb(234 88 12 / var(--tw-text-opacity, 1))
}

.text-purple-600{
  --tw-text-opacity:1;
  color:rgb(147 51 234 / var(--tw-text-opacity, 1))
}

.text-red-500{
  --tw-text-opacity:1;
  color:rgb(239 68 68 / var(--tw-text-opacity, 1))
}

.text-red-600{
  --tw-text-opacity:1;
  color:rgb(220 38 38 / var(--tw-text-opacity, 1))
}

.text-white{
  --tw-text-opacity:1;
  color:rgb(255 255 255 / var(--tw-text-opacity, 1))
}

.text-yellow-400{
  --tw-text-opacity:1;
  color:rgb(250 204 21 / var(--tw-text-opacity, 1))
}

.text-yellow-500{
  --tw-text-opacity:1;
  color:rgb(234 179 8 / var(--tw-text-opacity, 1))
}

.text-gray-400{
  --tw-text-opacity:1;
  color:rgb(156 163 175 / var(--tw-text-opacity, 1))
}

.text-green-100{
  --tw-text-opacity:1;
  color:rgb(220 252 231 / var(--tw-text-opacity, 1))
}

.opacity-60{
  opacity:0.6
}

.shadow-2xl{
  --tw-shadow:0 25px 50px -12px rgb(0 0 0 / 0.25);
  --tw-shadow-colored:0 25px 50px -12px var(--tw-shadow-color);
  box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.shadow-inner{
  --tw-shadow:inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored:inset 0 2px 4px 0 var(--tw-shadow-color);
  box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.shadow-lg{
  --tw-shadow:0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.shadow-xl{
  --tw-shadow:0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --tw-shadow-colored:0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
  box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.shadow-md{
  --tw-shadow:0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.shadow-blue-500\/30{
  --tw-shadow-color:rgb(59 130 246 / 0.3);
  --tw-shadow:var(--tw-shadow-colored)
}

.shadow-blue-600\/20{
  --tw-shadow-color:rgb(37 99 235 / 0.2);
  --tw-shadow:var(--tw-shadow-colored)
}

.shadow-blue-600\/30{
  --tw-shadow-color:rgb(37 99 235 / 0.3);
  --tw-shadow:var(--tw-shadow-colored)
}

.shadow-blue-600\/40{
  --tw-shadow-color:rgb(37 99 235 / 0.4);
  --tw-shadow:var(--tw-shadow-colored)
}

.shadow-blue-900\/20{
  --tw-shadow-color:rgb(30 58 138 / 0.2);
  --tw-shadow:var(--tw-shadow-colored)
}

.shadow-green-500\/30{
  --tw-shadow-color:rgb(34 197 94 / 0.3);
  --tw-shadow:var(--tw-shadow-colored)
}

.shadow-green-500\/40{
  --tw-shadow-color:rgb(34 197 94 / 0.4);
  --tw-shadow:var(--tw-shadow-colored)
}

.shadow-green-600\/40{
  --tw-shadow-color:rgb(22 163 74 / 0.4);
  --tw-shadow:var(--tw-shadow-colored)
}

.shadow-orange-500\/30{
  --tw-shadow-color:rgb(249 115 22 / 0.3);
  --tw-shadow:var(--tw-shadow-colored)
}

.shadow-purple-500\/30{
  --tw-shadow-color:rgb(168 85 247 / 0.3);
  --tw-shadow:var(--tw-shadow-colored)
}

.shadow-purple-600\/40{
  --tw-shadow-color:rgb(147 51 234 / 0.4);
  --tw-shadow:var(--tw-shadow-colored)
}

.shadow-red-500\/30{
  --tw-shadow-color:rgb(239 68 68 / 0.3);
  --tw-shadow:var(--tw-shadow-colored)
}

.backdrop-blur-md{
  --tw-backdrop-blur:blur(12px);
  -webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
  backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)
}

.backdrop-blur-sm{
  --tw-backdrop-blur:blur(4px);
  -webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
  backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)
}

.transition-all{
  transition-property:all;
  transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration:150ms
}

.transition-colors{
  transition-property:color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;
  transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
  transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration:150ms
}

.transition-transform{
  transition-property:transform;
  transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration:150ms
}

.transition-shadow{
  transition-property:box-shadow;
  transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration:150ms
}

.duration-1000{
  transition-duration:1000ms
}

.duration-300{
  transition-duration:300ms
}

.duration-500{
  transition-duration:500ms
}

.duration-700{
  transition-duration:700ms
}

.hover\:w-\[170\%\]:hover{
  width:170%
}

.hover\:w-\[35\%\]:hover{
  width:35%
}

.hover\:w-\[75\%\]:hover{
  width:75%
}

.hover\:-translate-y-0\.5:hover{
  --tw-translate-y:-0.125rem;
  transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) translateZ(0);
  will-change: transform;
}

.hover\:-translate-y-1:hover{
  --tw-translate-y:-0.25rem;
  transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) translateZ(0);
  will-change: transform;
}

.hover\:-translate-y-3:hover{
  --tw-translate-y:-0.75rem;
  transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) translateZ(0);
  will-change: transform;
}

.hover\:-translate-y-4:hover{
  --tw-translate-y:-1rem;
  transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) translateZ(0);
  will-change: transform;
}

.hover\:translate-y-3:hover{
  --tw-translate-y:0.75rem;
  transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) translateZ(0);
  will-change: transform;
}

.hover\:translate-x-1:hover{
  --tw-translate-x:0.25rem;
  transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) translateZ(0);
  will-change: transform;
}

.hover\:scale-105:hover{
  --tw-scale-x:1.05;
  --tw-scale-y:1.05;
  transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) translateZ(0);
  will-change: transform;
}

.hover\:scale-110:hover{
  --tw-scale-x:1.1;
  --tw-scale-y:1.1;
  transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) translateZ(0);
  will-change: transform;
}

.hover\:scale-125:hover{
  --tw-scale-x:1.25;
  --tw-scale-y:1.25;
  transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) translateZ(0);
  will-change: transform;
}

@keyframes social-bounce {
  0%, 100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-8px) scale(1.1);
  }
}

.hover\:animate-social-bounce:hover {
  animation: social-bounce 0.6s ease-in-out;
}

.hover\:bg-blue-50:hover{
  --tw-bg-opacity:1;
  background-color:rgb(239 246 255 / var(--tw-bg-opacity, 1))
}

.hover\:bg-gray-200:hover{
  --tw-bg-opacity:1;
  background-color:rgb(229 231 235 / var(--tw-bg-opacity, 1))
}

.hover\:bg-gray-50:hover{
  --tw-bg-opacity:1;
  background-color:rgb(249 250 251 / var(--tw-bg-opacity, 1))
}

.hover\:bg-black:hover{
  --tw-bg-opacity:1;
  background-color:rgb(0 0 0 / var(--tw-bg-opacity, 1))
}

.hover\:bg-blue-600:hover{
  --tw-bg-opacity:1;
  background-color:rgb(37 99 235 / var(--tw-bg-opacity, 1))
}

.hover\:bg-blue-700:hover{
  --tw-bg-opacity:1;
  background-color:rgb(29 78 216 / var(--tw-bg-opacity, 1))
}

.hover\:bg-gradient-to-br:hover{
  background-image:linear-gradient(to bottom right, var(--tw-gradient-stops))
}

.hover\:from-blue-700:hover{
  --tw-gradient-from:#1d4ed8 var(--tw-gradient-from-position);
  --tw-gradient-to:rgb(29 78 216 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)
}

.hover\:from-purple-600:hover{
  --tw-gradient-from:#9333ea var(--tw-gradient-from-position);
  --tw-gradient-to:rgb(147 51 234 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)
}

.hover\:via-blue-800:hover{
  --tw-gradient-to:rgb(30 64 175 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops:var(--tw-gradient-from), #1e40af var(--tw-gradient-via-position), var(--tw-gradient-to)
}

.hover\:to-blue-800:hover{
  --tw-gradient-to:#1e40af var(--tw-gradient-to-position)
}

.hover\:to-blue-900:hover{
  --tw-gradient-to:#1e3a8a var(--tw-gradient-to-position)
}

.hover\:to-pink-600:hover{
  --tw-gradient-to:#db2777 var(--tw-gradient-to-position)
}

.hover\:text-blue-600:hover{
  --tw-text-opacity:1;
  color:rgb(37 99 235 / var(--tw-text-opacity, 1))
}

.hover\:text-black:hover{
  --tw-text-opacity:1;
  color:rgb(0 0 0 / var(--tw-text-opacity, 1))
}

.hover\:text-blue-700:hover{
  --tw-text-opacity:1;
  color:rgb(29 78 216 / var(--tw-text-opacity, 1))
}

.hover\:text-white:hover{
  --tw-text-opacity:1;
  color:rgb(255 255 255 / var(--tw-text-opacity, 1))
}

.hover\:shadow-2xl:hover{
  --tw-shadow:0 25px 50px -12px rgb(0 0 0 / 0.25);
  --tw-shadow-colored:0 25px 50px -12px var(--tw-shadow-color);
  box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.hover\:shadow-blue-600\/40:hover{
  --tw-shadow-color:rgb(37 99 235 / 0.4);
  --tw-shadow:var(--tw-shadow-colored)
}

.hover\:shadow-blue-600\/50:hover{
  --tw-shadow-color:rgb(37 99 235 / 0.5);
  --tw-shadow:var(--tw-shadow-colored)
}

.focus\:border-transparent:focus{
  border-color:transparent
}

.focus\:ring-2:focus{
  --tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)
}

.focus\:ring-blue-600:focus{
  --tw-ring-opacity:1;
  --tw-ring-color:rgb(37 99 235 / var(--tw-ring-opacity, 1))
}

.group:hover .group-hover\:scale-110{
  --tw-scale-x:1.1;
  --tw-scale-y:1.1;
  transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.group:hover .group-hover\:scale-125{
  --tw-scale-x:1.25;
  --tw-scale-y:1.25;
  transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.group:hover .group-hover\:scale-150{
  --tw-scale-x:1.5;
  --tw-scale-y:1.5;
  transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.group:hover .group-hover\:gap-4{
  gap:1rem
}

.dark\:block:is(.dark *){
  display:block
}

.dark\:hidden:is(.dark *){
  display:none
}

/* Ensure only one icon is visible at a time in theme toggle */
#theme-toggle i,
#theme-toggle-mobile i {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#theme-toggle,
#theme-toggle-mobile {
  position: relative;
}

.dark\:border-blue-800:is(.dark *){
  --tw-border-opacity:1;
  border-color:rgb(30 64 175 / var(--tw-border-opacity, 1))
}

.dark\:border-gray-700:is(.dark *){
  --tw-border-opacity:1;
  border-color:rgb(55 65 81 / var(--tw-border-opacity, 1))
}

.dark\:border-gray-800:is(.dark *){
  --tw-border-opacity:1;
  border-color:rgb(31 41 55 / var(--tw-border-opacity, 1))
}

.dark\:border-green-800:is(.dark *){
  --tw-border-opacity:1;
  border-color:rgb(22 101 52 / var(--tw-border-opacity, 1))
}

.dark\:border-purple-800:is(.dark *){
  --tw-border-opacity:1;
  border-color:rgb(107 33 168 / var(--tw-border-opacity, 1))
}

.dark\:bg-\[\#1A1A1A\]:is(.dark *){
  --tw-bg-opacity:1;
  background-color:rgb(26 26 26 / var(--tw-bg-opacity, 1))
}

.dark\:bg-\[\#262626\]:is(.dark *){
  --tw-bg-opacity:1;
  background-color:rgb(38 38 38 / var(--tw-bg-opacity, 1))
}

.dark\:bg-blue-900\/30:is(.dark *){
  background-color:rgb(30 58 138 / 0.3)
}

.dark\:bg-gray-700:is(.dark *){
  --tw-bg-opacity:1;
  background-color:rgb(55 65 81 / var(--tw-bg-opacity, 1))
}

.dark\:bg-gray-800:is(.dark *){
  --tw-bg-opacity:1;
  background-color:rgb(31 41 55 / var(--tw-bg-opacity, 1))
}

.dark\:bg-gray-900:is(.dark *){
  --tw-bg-opacity:1;
  background-color:rgb(17 24 39 / var(--tw-bg-opacity, 1))
}

.dark\:bg-gray-900\/95:is(.dark *){
  background-color:rgb(17 24 39 / 0.95)
}

.dark\:bg-\[\#0F0F0F\]:is(.dark *){
  --tw-bg-opacity:1;
  background-color:rgb(15 15 15 / var(--tw-bg-opacity, 1))
}

.dark\:bg-blue-900\/20:is(.dark *){
  background-color:rgb(30 58 138 / 0.2)
}

.dark\:from-blue-800:is(.dark *){
  --tw-gradient-from:#1e40af var(--tw-gradient-from-position);
  --tw-gradient-to:rgb(30 64 175 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)
}

.dark\:from-blue-900\/10:is(.dark *){
  --tw-gradient-from:rgb(30 58 138 / 0.1) var(--tw-gradient-from-position);
  --tw-gradient-to:rgb(30 58 138 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)
}

.dark\:from-blue-900\/20:is(.dark *){
  --tw-gradient-from:rgb(30 58 138 / 0.2) var(--tw-gradient-from-position);
  --tw-gradient-to:rgb(30 58 138 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)
}

.dark\:from-blue-900\/30:is(.dark *){
  --tw-gradient-from:rgb(30 58 138 / 0.3) var(--tw-gradient-from-position);
  --tw-gradient-to:rgb(30 58 138 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)
}

.dark\:from-green-900\/20:is(.dark *){
  --tw-gradient-from:rgb(20 83 45 / 0.2) var(--tw-gradient-from-position);
  --tw-gradient-to:rgb(20 83 45 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)
}

.dark\:from-purple-900\/20:is(.dark *){
  --tw-gradient-from:rgb(88 28 135 / 0.2) var(--tw-gradient-from-position);
  --tw-gradient-to:rgb(88 28 135 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)
}

.dark\:via-blue-700:is(.dark *){
  --tw-gradient-to:rgb(29 78 216 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops:var(--tw-gradient-from), #1d4ed8 var(--tw-gradient-via-position), var(--tw-gradient-to)
}

.dark\:via-transparent:is(.dark *){
  --tw-gradient-to:rgb(0 0 0 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops:var(--tw-gradient-from), transparent var(--tw-gradient-via-position), var(--tw-gradient-to)
}

.dark\:to-blue-800:is(.dark *){
  --tw-gradient-to:#1e40af var(--tw-gradient-to-position)
}

.dark\:to-blue-800\/20:is(.dark *){
  --tw-gradient-to:rgb(30 64 175 / 0.2) var(--tw-gradient-to-position)
}

.dark\:to-green-800\/20:is(.dark *){
  --tw-gradient-to:rgb(22 101 52 / 0.2) var(--tw-gradient-to-position)
}

.dark\:to-purple-800\/20:is(.dark *){
  --tw-gradient-to:rgb(107 33 168 / 0.2) var(--tw-gradient-to-position)
}

.dark\:to-purple-900\/10:is(.dark *){
  --tw-gradient-to:rgb(88 28 135 / 0.1) var(--tw-gradient-to-position)
}

.dark\:to-purple-900\/30:is(.dark *){
  --tw-gradient-to:rgb(88 28 135 / 0.3) var(--tw-gradient-to-position)
}

.dark\:to-purple-900\/20:is(.dark *){
  --tw-gradient-to:rgb(88 28 135 / 0.2) var(--tw-gradient-to-position)
}

.dark\:text-blue-400:is(.dark *){
  --tw-text-opacity:1;
  color:rgb(96 165 250 / var(--tw-text-opacity, 1))
}

.dark\:text-gray-100:is(.dark *){
  --tw-text-opacity:1;
  color:rgb(243 244 246 / var(--tw-text-opacity, 1))
}

.dark\:text-gray-300:is(.dark *){
  --tw-text-opacity:1;
  color:rgb(209 213 219 / var(--tw-text-opacity, 1))
}

.dark\:text-gray-400:is(.dark *){
  --tw-text-opacity:1;
  color:rgb(156 163 175 / var(--tw-text-opacity, 1))
}

.dark\:text-green-400:is(.dark *){
  --tw-text-opacity:1;
  color:rgb(74 222 128 / var(--tw-text-opacity, 1))
}

.dark\:text-orange-400:is(.dark *){
  --tw-text-opacity:1;
  color:rgb(251 146 60 / var(--tw-text-opacity, 1))
}

.dark\:text-purple-400:is(.dark *){
  --tw-text-opacity:1;
  color:rgb(192 132 252 / var(--tw-text-opacity, 1))
}

.dark\:text-red-400:is(.dark *){
  --tw-text-opacity:1;
  color:rgb(248 113 113 / var(--tw-text-opacity, 1))
}

.dark\:text-white:is(.dark *){
  --tw-text-opacity:1;
  color:rgb(255 255 255 / var(--tw-text-opacity, 1))
}

.dark\:shadow-black\/50:is(.dark *){
  --tw-shadow-color:rgb(0 0 0 / 0.5);
  --tw-shadow:var(--tw-shadow-colored)
}

.dark\:hover\:bg-gray-700:hover:is(.dark *){
  --tw-bg-opacity:1;
  background-color:rgb(55 65 81 / var(--tw-bg-opacity, 1))
}

.dark\:hover\:text-blue-400:hover:is(.dark *){
  --tw-text-opacity:1;
  color:rgb(96 165 250 / var(--tw-text-opacity, 1))
}

.dark\:hover\:text-white:hover:is(.dark *){
  --tw-text-opacity:1;
  color:rgb(255 255 255 / var(--tw-text-opacity, 1))
}

/* ==========================================================================
   Social Media Icons - Modern Design with Brand Colors
   Uniform Iconpack - Optimized for Light/Dark Mode & Responsive
   ========================================================================== */

.social-icon {
  position: relative;
  overflow: visible;
  cursor: pointer;
  transform: translateZ(0);
  backface-visibility: hidden;
  will-change: transform, background-color, box-shadow;
  transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Base styles for all social icons - Enhanced visibility */
.social-icon {
  background-color: rgb(243 244 246); /* gray-100 */
  color: rgb(55 65 81); /* gray-700 */
}

.dark .social-icon {
  background-color: rgb(31 41 55); /* gray-800 */
  color: rgb(209 213 219); /* gray-300 */
}

.social-icon svg {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              fill 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 2;
  position: relative;
  width: 1.25rem; /* w-5 */
  height: 1.25rem; /* w-5 */
  fill: currentColor;
}

.social-icon:active {
  transform: scale(0.95) translateZ(0);
  transition: transform 0.1s ease;
}

/* Facebook - Official Blue #1877F2 */
.social-facebook:hover,
.dark .social-facebook:hover {
  background-color: #1877F2 !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 16px rgba(24, 119, 242, 0.5),
              0 0 0 2px rgba(24, 119, 242, 0.2);
}

.social-facebook:hover svg,
.dark .social-facebook:hover svg {
  fill: #FFFFFF !important;
  transform: scale(1.15) rotate(5deg);
}

.dark .social-facebook:hover {
  box-shadow: 0 4px 16px rgba(24, 119, 242, 0.6),
              0 0 0 2px rgba(24, 119, 242, 0.3);
}

/* Instagram - Official Gradient #E4405F to #FCAF45 */
.social-instagram:hover,
.dark .social-instagram:hover {
  background: linear-gradient(135deg, #E4405F 0%, #FCAF45 50%, #F77737 100%) !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 16px rgba(228, 64, 95, 0.5),
              0 0 0 2px rgba(228, 64, 95, 0.2);
}

.social-instagram:hover svg,
.dark .social-instagram:hover svg {
  fill: #FFFFFF !important;
  transform: scale(1.15) rotate(-5deg);
}

.dark .social-instagram:hover {
  box-shadow: 0 4px 16px rgba(228, 64, 95, 0.6),
              0 0 0 2px rgba(228, 64, 95, 0.3);
}

/* TikTok - Official Black #000000 with Red accent #FE2C55 */
.social-tiktok:hover,
.dark .social-tiktok:hover {
  background-color: #000000 !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6),
              0 0 0 2px rgba(254, 44, 85, 0.3);
  position: relative;
}

.social-tiktok:hover::before,
.dark .social-tiktok:hover::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, #FE2C55 0%, #25F4EE 100%);
  opacity: 0.15;
  z-index: 1;
  border-radius: 9999px;
}

.social-tiktok:hover svg,
.dark .social-tiktok:hover svg {
  fill: #FFFFFF !important;
  transform: scale(1.15);
  z-index: 2;
}

.dark .social-tiktok:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.7),
              0 0 0 2px rgba(254, 44, 85, 0.4);
}

/* LinkedIn - Official Blue #0077B5 */
.social-linkedin:hover,
.dark .social-linkedin:hover {
  background-color: #0077B5 !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 16px rgba(0, 119, 181, 0.5),
              0 0 0 2px rgba(0, 119, 181, 0.2);
}

.social-linkedin:hover svg,
.dark .social-linkedin:hover svg {
  fill: #FFFFFF !important;
  transform: scale(1.15);
}

.dark .social-linkedin:hover {
  box-shadow: 0 4px 16px rgba(0, 119, 181, 0.6),
              0 0 0 2px rgba(0, 119, 181, 0.3);
}

/* Animation on hover - subtle bounce */
@keyframes social-icon-bounce {
  0%, 100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-4px) scale(1.05);
  }
}

.social-icon:hover {
  animation: social-icon-bounce 0.6s ease-in-out;
  z-index: 10;
}

/* Remove will-change after hover to optimize performance */
.social-icon:not(:hover) {
  will-change: auto;
}

/* Responsive Design - Mobile First */
/* Mobile (default) - Smaller icons */
@media (max-width: 639px) {
  .social-icon {
    width: 2.5rem; /* w-10 */
    height: 2.5rem; /* h-10 */
  }
  
  .social-icon svg {
    width: 1.25rem; /* w-5 */
    height: 1.25rem; /* h-5 */
  }
}

/* Tablet (640px and up) */
@media (min-width: 640px) {
  .social-icon {
    width: 3rem; /* w-12 */
    height: 3rem; /* h-12 */
  }
  
  .social-icon svg {
    width: 1.5rem; /* w-6 */
    height: 1.5rem; /* h-6 */
  }
  
  .social-icon:hover svg {
    transform: scale(1.2);
  }
}

/* Desktop (1024px and up) - Enhanced hover effects */
@media (min-width: 1024px) {
  .social-icon:hover {
    transform: translateY(-2px);
  }
  
  .social-icon:hover svg {
    transform: scale(1.25);
  }
}

/* Touch devices - Larger tap targets */
@media (hover: none) and (pointer: coarse) {
  .social-icon {
    min-width: 44px;
    min-height: 44px;
  }
  
  .social-icon:active {
    transform: scale(0.9);
  }
}

@media (min-width: 640px){
  .sm\:flex-row{
  flex-direction:row
}

.sm\:px-6{
  padding-left:1.5rem;
  padding-right:1.5rem
}


}

@media (min-width: 768px){
  .md\:col-span-1{
  grid-column:span 1 / span 1
}

.md\:flex{
  display:flex
}

.md\:hidden{
  display:none
}

.md\:grid-cols-2{
  grid-template-columns:repeat(2, minmax(0, 1fr))
}

.md\:grid-cols-3{
  grid-template-columns:repeat(3, minmax(0, 1fr))
}

.md\:grid-cols-4{
  grid-template-columns:repeat(4, minmax(0, 1fr))
}

.md\:flex-row{
  flex-direction:row
}

.md\:-bottom-8{
  bottom:-2rem
}

.md\:-left-8{
  left:-2rem
}

.md\:translate-x-0{
  --tw-translate-x:0px;
  transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}


}

/* Tablet optimizations (768px - 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
  /* Improve spacing on tablets */
  .container {
    padding: 0 1.5rem;
  }
  
  /* Better card layouts for tablets */
  .service-card {
    min-height: auto;
  }
  
  /* Optimize hero section for tablets */
  section.relative.pt-32 {
    padding-top: 6rem;
    padding-bottom: 4rem;
  }
  
  /* Better button sizing on tablets */
  .btn, a[class*="px-8"] {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

/* Large tablets and small desktops (1024px - 1279px) */
@media (min-width: 1024px) and (max-width: 1279px) {
  .max-w-7xl {
    max-width: 90%;
  }
}

/* Very small screens (up to 375px) - iPhone SE, small Android */
@media (max-width: 375px) {
  html {
    font-size: 14px;
  }
  
  h1 {
    font-size: 1.5rem !important;
    line-height: 1.2;
  }
  
  h2 {
    font-size: 1.25rem !important;
  }
  
  h3 {
    font-size: 1.125rem !important;
  }
  
  .container {
    padding: 0 0.75rem;
  }
  
  /* Smaller buttons on very small screens */
  .btn, a[class*="px-"] {
    padding-left: 1rem;
    padding-right: 1rem;
    font-size: 0.875rem;
  }
  
  /* Compact navigation */
  nav .flex {
    gap: 0.5rem;
  }
}

/* Landscape orientation optimizations for mobile */
@media (max-width: 767px) and (orientation: landscape) {
  /* Reduce padding in landscape */
  section {
    padding-top: 4rem;
    padding-bottom: 3rem;
  }
  
  /* Compact hero in landscape */
  .hero-section {
    min-height: auto;
  }
}

@media (min-width: 1024px){
  .lg\:block{
  display:block
}

.lg\:grid-cols-2{
  grid-template-columns:repeat(2, minmax(0, 1fr))
}

.lg\:grid-cols-3{
  grid-template-columns:repeat(3, minmax(0, 1fr))
}

.lg\:grid-cols-4{
  grid-template-columns:repeat(4, minmax(0, 1fr))
}

.lg\:gap-16{
  gap:4rem
}

.lg\:px-8{
  padding-left:2rem;
  padding-right:2rem
}

.lg\:pb-32{
  padding-bottom:8rem
}

.lg\:pt-48{
  padding-top:12rem
}

.lg\:text-5xl{
  font-size:3rem;
  line-height:1
}

.lg\:text-7xl{
  font-size:4.5rem;
  line-height:1
}
}