/* Reset and base styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Custom CSS Variables for Colors */
:root {
  --cream: hsl(45, 100%, 98%);
  --dark: hsl(220, 25%, 15%);
  --dark-blue: hsl(220, 60%, 25%);
  --light-blue: hsl(200, 80%, 65%);
  --grey: hsl(220, 15%, 55%);
  --gold: hsl(45, 85%, 55%);
  --success: hsl(145, 65%, 45%);
  --danger: hsl(0, 75%, 55%);
  
  /* New gradient colors for cards */
  --blue-gradient: linear-gradient(135deg, hsl(217, 91%, 60%) 0%, hsl(217, 91%, 50%) 100%);
  --gold-gradient: linear-gradient(135deg, hsl(45, 85%, 55%) 0%, hsl(45, 85%, 45%) 100%);
  --green-gradient: linear-gradient(135deg, hsl(145, 65%, 45%) 0%, hsl(145, 65%, 35%) 100%);
}

/* Typography */
.font-arabic {
  font-family: 'Noto Sans Arabic', 'Arial', sans-serif;
}

.font-roboto {
  font-family: 'Roboto', 'Arial', sans-serif;
}

/* Direction and layout */
.rtl {
  direction: rtl;
  text-align: right;
}

.ltr {
  direction: ltr;
  text-align: left;
}

/* Base body styles */
body {
  font-family: 'Noto Sans Arabic', 'Arial', sans-serif;
  line-height: 1.6;
  color: var(--dark);
  background-color: var(--cream);
}

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

/* Color utilities */
.bg-cream { background-color: var(--cream); }
.bg-dark { background-color: var(--dark); }
.bg-dark-blue { background-color: var(--dark-blue); }
.bg-light-blue { background-color: var(--light-blue); }
.bg-grey { background-color: var(--grey); }
.bg-gold { background-color: var(--gold); }
.bg-success { background-color: var(--success); }
.bg-white { background-color: white; }
.bg-red-400 { background-color: hsl(0, 75%, 65%); }

/* New color utilities */
.bg-blue-600 { background-color: hsl(217, 91%, 60%); }
.bg-blue-700 { background-color: hsl(217, 91%, 50%); }
.bg-green-600 { background-color: hsl(145, 65%, 35%); }
.bg-yellow-500 { background-color: hsl(45, 85%, 50%); }

.text-cream { color: var(--cream); }
.text-dark { color: var(--dark); }
.text-dark-blue { color: var(--dark-blue); }
.text-light-blue { color: var(--light-blue); }
.text-grey { color: var(--grey); }
.text-gold { color: var(--gold); }
.text-success { color: var(--success); }
.text-white { color: white; }
.text-red-400 { color: hsl(0, 75%, 65%); }
.text-pink-500 { color: hsl(330, 81%, 60%); }
.text-blue-600 { color: hsl(217, 91%, 60%); }

/* Hover colors */
.hover\:bg-blue-600:hover { background-color: hsl(220, 60%, 35%); }
.hover\:bg-blue-700:hover { background-color: hsl(217, 91%, 40%); }
.hover\:bg-yellow-500:hover { background-color: hsl(45, 85%, 50%); }
.hover\:bg-green-500:hover { background-color: hsl(145, 65%, 40%); }
.hover\:bg-green-600:hover { background-color: hsl(145, 65%, 35%); }
.hover\:bg-yellow-600:hover { background-color: hsl(45, 85%, 45%); }
.hover\:text-green-400:hover { color: hsl(145, 65%, 60%); }
.hover\:text-blue-400:hover { color: hsl(200, 80%, 70%); }
.hover\:text-pink-400:hover { color: hsl(330, 81%, 65%); }
.hover\:from-purple-500:hover { --tw-gradient-from: hsl(270, 91%, 65%); }
.hover\:to-pink-500:hover { --tw-gradient-to: hsl(330, 81%, 60%); }

/* Layout utilities */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-row { flex-direction: row; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem; }
.gap-6 { gap: 1.5rem; }
.gap-8 { gap: 2rem; }

/* Grid */
.grid { display: grid; }
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }

/* Spacing */
.p-2 { padding: 0.5rem; }
.p-4 { padding: 1rem; }
.p-6 { padding: 1.5rem; }
.px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.py-4 { padding-top: 1rem; padding-bottom: 1rem; }
.py-12 { padding-top: 3rem; padding-bottom: 3rem; }
.py-16 { padding-top: 4rem; padding-bottom: 4rem; }
.pt-6 { padding-top: 1.5rem; }

.m-0 { margin: 0; }
.mx-auto { margin-left: auto; margin-right: auto; }
.mx-4 { margin-left: 1rem; margin-right: 1rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 0.75rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-8 { margin-bottom: 2rem; }
.mb-10 { margin-bottom: 2.5rem; }
.mb-12 { margin-bottom: 3rem; }
.mt-4 { margin-top: 1rem; }

/* Sizing */
.w-full { width: 100%; }
.w-5 { width: 1.25rem; }
.w-6 { width: 1.5rem; }
.w-8 { width: 2rem; }
.w-12 { width: 3rem; }
.w-14 { width: 3.5rem; }
.w-16 { width: 4rem; }
.h-5 { height: 1.25rem; }
.h-6 { height: 1.5rem; }
.h-8 { height: 2rem; }
.h-12 { height: 3rem; }
.h-14 { height: 3.5rem; }
.h-16 { height: 4rem; }
.h-full { height: 100%; }
.min-h-screen { min-height: 100vh; }
.max-w-2xl { max-width: 42rem; }
.max-w-3xl { max-width: 48rem; }
.max-w-4xl { max-width: 56rem; }
.max-w-6xl { max-width: 72rem; }

/* Border and border radius */
.border { border-width: 1px; border-style: solid; }
.border-gray-100 { border-color: hsl(220, 13%, 91%); }
.border-gray-200 { border-color: hsl(220, 13%, 85%); }
.border-gray-300 { border-color: hsl(220, 13%, 75%); }
.border-blue-100 { border-color: hsl(217, 91%, 90%); }
.border-green-100 { border-color: hsl(145, 65%, 90%); }
.border-white\/20 { border-color: hsla(0, 0%, 100%, 0.2); }
.border-gold\/30 { border-color: hsla(45, 85%, 55%, 0.3); }
.border-grey { border-color: var(--grey); }
.border-t { border-top-width: 1px; border-top-style: solid; }

.rounded-lg { border-radius: 0.5rem; }
.rounded-xl { border-radius: 0.75rem; }
.rounded-2xl { border-radius: 1rem; }
.rounded-full { border-radius: 9999px; }

/* Enhanced Shadows */
.shadow-sm { 
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}
.shadow-lg { 
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}
.shadow-xl {
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
.shadow.btn-glow {
  box-shadow: 0 10px 20px rgba(0,0,0,0.08);
  position: relative;
  overflow: hidden;
}

.btn-glow::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;
}

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

.btn-glow:hover {
  box-shadow: 0 18px 30px rgba(0,0,0,0.15);
  transform: translateY(-2px);
}

/* Text utilities */
.text-xs { font-size: 0.75rem; line-height: 1rem; }
.text-sm { font-size: 0.875rem; line-height: 1.25rem; }
.text-base { font-size: 1rem; line-height: 1.5rem; }
.text-lg { font-size: 1.125rem; line-height: 1.75rem; }
.text-xl { font-size: 1.25rem; line-height: 1.75rem; }
.text-2xl { font-size: 1.5rem; line-height: 2rem; }
.text-3xl { font-size: 1.875rem; line-height: 2.25rem; }

.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }

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

.leading-tight { line-height: 1.25; }
.leading-relaxed { line-height: 1.625; }

/* Positioning */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
.bottom-6 { bottom: 1.5rem; }
.left-6 { left: 1.5rem; }
.right-6 { right: 1.5rem; }
.right-4 { right: 1rem; }
.-top-4 { top: -1rem; }
.left-1\/2 { left: 50%; }

/* Z-index */
.z-10 { z-index: 10; }
.z-20 { z-index: 20; }
.z-50 { z-index: 50; }

/* Transform */
.transform { transform: translateX(var(--tw-translate-x)) translateY(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%; }
.-translate-y-1 { transform: translateY(-0.25rem); }
.hover\:-translate-y-1:hover { transform: translateY(-0.25rem); }
.hover\:scale-110:hover { transform: scale(1.1); }

/* Backdrop effects */
.backdrop-blur-sm { backdrop-filter: blur(4px); }

/* Opacity */
.opacity-90 { opacity: 0.9; }

/* Overflow */
.overflow-hidden { overflow: hidden; }
.resize-none { resize: none; }

/* Flex utilities */
.flex-shrink-0 { flex-shrink: 0; }

/* Enhanced Transitions */
.transition-all { 
  transition-property: all; 
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); 
  transition-duration: 300ms; 
}
.transition-colors { 
  transition-property: color, background-color, border-color; 
  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; 
}

/* Focus states */
.focus\:border-gold:focus { border-color: var(--gold); }
.focus\:border-success:focus { border-color: var(--success); }
.focus\:outline-none:focus { outline: 2px solid transparent; outline-offset: 2px; }

/* Enhanced Hover states */
.hover\:shadow-md:hover { 
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}
.hover\:shadow-xl:hover {
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
.hover\:bg-white\/10:hover { background-color: hsla(0, 0%, 100%, 0.1); }

/* Custom utility classes */
.space-y-4 > * + * { margin-top: 1rem; }
.space-y-6 > * + * { margin-top: 1.5rem; }

/* Object fit */
.object-cover { object-fit: cover; }

/* Display utilities */
.block { display: block; }
.inline-block { display: inline-block; }
.hidden { display: none; }

/* Background utilities */
.bg-white\/10 { background-color: hsla(0, 0%, 100%, 0.1); }
.bg-white\/20 { background-color: hsla(0, 0%, 100%, 0.2); }

/* Language switcher styles */
.lang-btn {
  background-color: hsla(220, 15%, 55%, 0.15);
  color: var(--dark);
}

.lang-btn:hover {
  background-color: var(--dark-blue);
  color: white;
}

.lang-btn.active {
  background-color: var(--dark-blue);
  color: white;
}

/* Popular badge corner positioning */
.popular-badge-icon-wrap.chip {
  display: inline-block;
  padding: 0.5rem 1.2rem;
  border-radius: 9999px;
  background: rgba(255,255,255,0.25);
  color: white;
  font-weight: 600;
  font-size: 0.85rem;
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.3);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  transition: all .3s ease;
}

.chip:hover {
  background: rgba(255,255,255,0.35);
  transform: translateY(-1px);
}

.popular-badge-icon-wrap {
  width: 4rem;
  height: 4rem;
  border-radius: 9999px;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 15px 25px -5px rgba(0,0,0,0.15), 0 8px 10px -6px rgba(0,0,0,0.1);
  border: 4px solid rgba(255,255,255,0.9);
  position: relative;
  transition: all .3s ease;
}

.icon-wrap::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 9999px;
  background: linear-gradient(45deg, rgba(255,255,255,0.3), rgba(255,255,255,0.1));
  z-index: -1;
}

.popular-badge-corner {
  font-size: 0.875rem;
  font-weight: 700;
  padding: 0.5rem 1rem;
  border-radius: 9999px;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  white-space: nowrap;
  background: var(--gold-gradient);
  color: white;
}

/* RTL/LTR Badge positioning */
.rtl .popular-badge-corner {
  right: 1rem;
  left: auto;
}

.ltr .popular-badge-corner {
  left: 1rem;
  right: auto;
}

/* Hero subtitle one line */
.hero-subtitle-oneline {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Enhanced Card Animations */
@keyframes bounce {
  0%, 20%, 53%, 80%, 100% {
    transform: translate3d(0,0,0);
  }
  40%, 43% {
    transform: translate3d(0,-15px,0);
  }
  70% {
    transform: translate3d(0,-7px,0);
  }
  90% {
    transform: translate3d(0,-2px,0);
  }
}

.bounce-animation {
  animation: bounce 2s infinite;
}

/* Fade in animation */
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Enhanced Card hover effect */
.card-hover:hover {
  transform: translateY(-4px);
}

/* Professional 3D Visa Card Styling */
.visa-card {
  background: linear-gradient(145deg, #ffffff, #f8fafc);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 20px;
  box-shadow: 
    0 10px 30px rgba(0, 0, 0, 0.1),
    0 1px 8px rgba(0, 0, 0, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(10px);
}

.visa-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, 
    rgba(255,255,255,0.1), 
    rgba(255,255,255,0.8), 
    rgba(255,255,255,0.1)
  );
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: 2;
}

.visa-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, 
    rgba(255,255,255,0.1) 0%, 
    rgba(255,255,255,0.05) 50%, 
    rgba(255,255,255,0) 100%
  );
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.visa-card:hover {
  transform: translateY(-12px) rotateX(2deg) rotateY(1deg);
  box-shadow: 
    0 25px 50px rgba(0, 0, 0, 0.15),
    0 15px 30px rgba(0, 0, 0, 0.1),
    0 5px 15px rgba(0, 0, 0, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  border-color: rgba(0, 0, 0, 0.12);
}

.visa-card:hover::before {
  opacity: 1;
}

.visa-card:hover::after {
  opacity: 1;
}

/* Card header professional styling */
.visa-card .card-header {
  background: linear-gradient(135deg, var(--card-primary) 0%, var(--card-secondary) 100%);
  position: relative;
  overflow: hidden;
  transition: all 0.4s ease;
}

.visa-card .card-header::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.4s ease;
  transform: scale(0.5);
}

.visa-card:hover .card-header::before {
  opacity: 1;
  transform: scale(1);
}

.visa-card:hover .card-header {
  transform: scale(1.02);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

/* Professional button styling within cards */
.visa-card .btn-glow {
  background: linear-gradient(135deg, var(--btn-primary) 0%, var(--btn-secondary) 100%);
  border: none;
  box-shadow: 
    0 8px 20px rgba(0, 0, 0, 0.15),
    0 4px 8px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.visa-card .btn-glow::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.5s ease;
}

.visa-card:hover .btn-glow {
  transform: translateY(-3px);
  box-shadow: 
    0 15px 35px rgba(0, 0, 0, 0.2),
    0 8px 15px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.visa-card:hover .btn-glow::before {
  left: 100%;
}

/* Card-specific color schemes */
.visa-card.card-blue {
  --card-primary: #3b82f6;
  --card-secondary: #1d4ed8;
  --btn-primary: #3b82f6;
  --btn-secondary: #1d4ed8;
}

.visa-card.card-gold {
  --card-primary: #f59e0b;
  --card-secondary: #d97706;
  --btn-primary: #f59e0b;
  --btn-secondary: #d97706;
}

.visa-card.card-green {
  --card-primary: #10b981;
  --card-secondary: #059669;
  --btn-primary: #10b981;
  --btn-secondary: #059669;
}

/* Enhanced card content styling */
.visa-card .p-6 {
  background: linear-gradient(145deg, #ffffff, #fafbfc);
  position: relative;
}

.visa-card:hover .p-6 {
  background: linear-gradient(145deg, #ffffff, #f8fafc);
}

/* Professional icon styling */
.visa-card .w-12.h-12 {
  background: linear-gradient(135deg, #ffffff, #f8fafc);
  box-shadow: 
    0 8px 20px rgba(0, 0, 0, 0.1),
    0 4px 8px rgba(0, 0, 0, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}

.visa-card:hover .w-12.h-12 {
  transform: scale(1.1) rotate(5deg);
  box-shadow: 
    0 12px 25px rgba(0, 0, 0, 0.15),
    0 6px 12px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

/* Advanced Pricing Card UI */
.pricing-card {
  position: relative;
  background: white;
  border-radius: 1.5rem;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,0.04);
  box-shadow: 0 10px 30px rgba(0,0,0,0.08), 0 1px 8px rgba(0,0,0,0.06);
  transition: all .4s cubic-bezier(0.4, 0, 0.2, 1);
  backdrop-filter: blur(10px);
}

.pricing-card:hover {
  transform: translateY(-12px) scale(1.02);
  box-shadow: 0 25px 50px rgba(0,0,0,0.15), 0 10px 20px rgba(0,0,0,0.1);
  border-color: rgba(0,0,0,0.08);
}

.pricing-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.8), transparent);
  opacity: 0;
  transition: opacity .4s ease;
}

.pricing-card:hover::before {
  opacity: 1;
}

/* Hero background gradient */
.hero {
  background: 
    linear-gradient(135deg, 
      rgba(30, 64, 175, 0.85) 0%, 
      rgba(59, 130, 246, 0.75) 50%,
      rgba(245, 158, 11, 0.8) 100%
    ),
    url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYwMCIgaGVpZ2h0PSI4MDAiIHZpZXdCb3g9IjAgMCAxNjAwIDgwMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGRlZnM+CjxsaW5lYXJHcmFkaWVudCBpZD0ic2t5SGVybyIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgo8c3RvcCBvZmZzZXQ9IjAlIiBzdHlsZT0ic3RvcC1jb2xvcjojZmJiZjI0O3N0b3Atb3BhY2l0eTowLjkiIC8+CjxzdG9wIG9mZnNldD0iMzAlIiBzdHlsZT0ic3RvcC1jb2xvcjojZjU5ZTBiO3N0b3Atb3BhY2l0eTowLjciIC8+CjxzdG9wIG9mZnNldD0iNzAlIiBzdHlsZT0ic3RvcC1jb2xvcjojZDk3NzA2O3N0b3Atb3BhY2l0eTowLjUiIC8+CjxzdG9wIG9mZnNldD0iMTAwJSIgc3R5bGU9InN0b3AtY29sb3I6IzM5MzNhNztzdG9wLW9wYWNpdHk6MC4zIiAvPgo8L2xpbmVhckdyYWRpZW50Pgo8bGluZWFyR3JhZGllbnQgaWQ9ImJ1aWxkaW5nc0hlcm8iIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMCUiIHkyPSIxMDAlIj4KPHN0b3Agb2Zmc2V0PSIwJSIgc3R5bGU9InN0b3AtY29sb3I6IzFlNDBhZjtzdG9wLW9wYWNpdHk6MSIgLz4KPHN0b3Agb2Zmc2V0PSI1MCUiIHN0eWxlPSJzdG9wLWNvbG9yOiMxZTNhOGE7c3RvcC1vcGFjaXR5OjAuOSIgLz4KPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdHlsZT0ic3RvcC1jb2xvcjojMWUyOTNiO3N0b3Atb3BhY2l0eTowLjgiIC8+CjwvbGluZWFyR3JhZGllbnQ+CjwvZGVmcz4KPCEtLSBTa3kgLS0+CjxyZWN0IHdpZHRoPSIxNjAwIiBoZWlnaHQ9IjUwMCIgZmlsbD0idXJsKCNza3lIZXJvKSIvPgo8IS0tIFN1biAtLT4KPGNpcmNsZSBjeD0iMTMwMCIgY3k9IjE1MCIgcj0iODAiIGZpbGw9IiNmYmJmMjQiIG9wYWNpdHk9IjAuOSIvPgo8IS0tIER1YmFpIFNreWxpbmUgLS0+CjxnIGZpbGw9InVybCgjYnVpbGRpbmdzSGVybykiPgo8IS0tIEJ1cmogS2hhbGlmYSAoY2VudGVyKSAtLT4KPHBhdGggZD0iTTgwMCA4MDAgTDgwMCAyMDAgTDgwNSAxOTggTDgxMCAxOTUgTDgxNSAxOTggTDgyMCAyMDAgTDgyMCA4MDBaIi8+CjxyZWN0IHg9IjgwNSIgeT0iMjIwIiB3aWR0aD0iMTAiIGhlaWdodD0iNiIgZmlsbD0iI2Y4ZmFmYyIgb3BhY2l0eT0iMC44Ii8+CjxyZWN0IHg9IjgwNSIgeT0iMjUwIiB3aWR0aD0iMTAiIGhlaWdodD0iNiIgZmlsbD0iI2Y4ZmFmYyIgb3BhY2l0eT0iMC44Ii8+CjxyZWN0IHg9IjgwNSIgeT0iMjgwIiB3aWR0aD0iMTAiIGhlaWdodD0iNiIgZmlsbD0iI2Y4ZmFmYyIgb3BhY2l0eT0iMC44Ii8+CjwhLS0gTGVmdCBidWlsZGluZ3MgLS0+CjxyZWN0IHg9IjMwMCIgeT0iNTUwIiB3aWR0aD0iNjAiIGhlaWdodD0iMjUwIi8+CjxyZWN0IHg9IjQwMCIgeT0iNTAwIiB3aWR0aD0iNTAiIGhlaWdodD0iMzAwIi8+CjxyZWN0IHg9IjQ4MCIgeT0iNDgwIiB3aWR0aD0iNDUiIGhlaWdodD0iMzIwIi8+CjxyZWN0IHg9IjU1MCIgeT0iNDQwIiB3aWR0aD0iNDAiIGhlaWdodD0iMzYwIi8+CjxyZWN0IHg9IjYyMCIgeT0iNDAwIiB3aWR0aD0iMzUiIGhlaWdodD0iNDAwIi8+CjxyZWN0IHg9IjY4MCIgeT0iMzgwIiB3aWR0aD0iMzAiIGhlaWdodD0iNDIwIi8+CjxyZWN0IHg9IjczMCIgeT0iMzYwIiB3aWR0aD0iMjUiIGhlaWdodD0iNDQwIi8+CjwhLS0gUmlnaHQgYnVpbGRpbmdzIC0tPgo8cmVjdCB4PSI4NjAiIHk9IjM4MCIgd2lkdGg9IjMwIiBoZWlnaHQ9IjQyMCIvPgo8cmVjdCB4PSI5MjAiIHk9IjQwMCIgd2lkdGg9IjM1IiBoZWlnaHQ9IjQwMCIvPgo8cmVjdCB4PSI5ODAiIHk9IjQ0MCIgd2lkdGg9IjQwIiBoZWlnaHQ9IjM2MCIvPgo8cmVjdCB4PSIxMDQwIiB5PSI0ODAiIHdpZHRoPSI0NSIgaGVpZ2h0PSIzMjAiLz4KPHJlY3QgeD0iMTEwMCIgeT0iNTAwIiB3aWR0aD0iNTAiIGhlaWdodD0iMzAwIi8+CjxyZWN0IHg9IjEyMDAiIHk9IjU1MCIgd2lkdGg9IjYwIiBoZWlnaHQ9IjI1MCIvPgo8IS0tIEJ1cmogQWwgQXJhYiAtLT4KPHBhdGggZD0iTTE0MDAgODAwIEwxNDAwIDUyMCBMMTQyMCA1MDAgTDE0NTAgNTIwIEwxNDUwIDgwMFoiLz4KPCEtLSBCdWlsZGluZyBsaWdodHMgLS0+CjxyZWN0IHg9IjMxMCIgeT0iNTcwIiB3aWR0aD0iMTAiIGhlaWdodD0iNSIgZmlsbD0iI2Y4ZmFmYyIgb3BhY2l0eT0iMC43Ii8+CjxyZWN0IHg9IjMzMCIgeT0iNTcwIiB3aWR0aD0iMTAiIGhlaWdodD0iNSIgZmlsbD0iI2Y4ZmFmYyIgb3BhY2l0eT0iMC43Ii8+CjxyZWN0IHg9IjQxMCIgeT0iNTIwIiB3aWR0aD0iMTAiIGhlaWdodD0iNSIgZmlsbD0iI2Y4ZmFmYyIgb3BhY2l0eT0iMC43Ii8+CjxyZWN0IHg9IjQzMCIgeT0iNTIwIiB3aWR0aD0iMTAiIGhlaWdodD0iNSIgZmlsbD0iI2Y4ZmFmYyIgb3BhY2l0eT0iMC43Ii8+CjwvZz4KPCEtLSBHcm91bmQgcmVmbGVjdGlvbiAtLT4KPGVsbGlwc2UgY3g9IjgwMCIgY3k9IjgyMCIgcng9IjYwMCIgcnk9IjIwIiBmaWxsPSJ1cmwoI2J1aWxkaW5nc0hlcm8pIiBvcGFjaXR5PSIwLjQiLz4KPC9zdmc+');
  background-size: cover;
  background-position: center bottom;
  background-repeat: no-repeat;
}

/* Beautiful Hero Action Buttons */
.hero-btn-primary {
  background: linear-gradient(135deg, #10b981 0%, #059669 50%, #047857 100%);
  border: none;
  border-radius: 50px;
  box-shadow: 
    0 8px 25px rgba(16, 185, 129, 0.3),
    0 4px 10px rgba(16, 185, 129, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  position: relative;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  font-size: 0.9em;
}

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

.hero-btn-primary::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, 
    rgba(255, 255, 255, 0.1) 0%, 
    rgba(255, 255, 255, 0.05) 50%, 
    rgba(255, 255, 255, 0) 100%
  );
  opacity: 0;
  transition: opacity 0.3s ease;
}

.hero-btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 
    0 15px 35px rgba(16, 185, 129, 0.4),
    0 8px 15px rgba(16, 185, 129, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

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

.hero-btn-primary:hover::after {
  opacity: 1;
}

.hero-btn-secondary {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 50%, #b45309 100%);
  border: none;
  border-radius: 50px;
  box-shadow: 
    0 8px 25px rgba(245, 158, 11, 0.3),
    0 4px 10px rgba(245, 158, 11, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  position: relative;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  font-size: 0.9em;
}

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

.hero-btn-secondary::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, 
    rgba(255, 255, 255, 0.1) 0%, 
    rgba(255, 255, 255, 0.05) 50%, 
    rgba(255, 255, 255, 0) 100%
  );
  opacity: 0;
  transition: opacity 0.3s ease;
}

.hero-btn-secondary:hover {
  transform: translateY(-3px);
  box-shadow: 
    0 15px 35px rgba(245, 158, 11, 0.4),
    0 8px 15px rgba(245, 158, 11, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

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

.hero-btn-secondary:hover::after {
  opacity: 1;
}

/* Professional Contact Section Styling */
.contact-section {
  background: 
    linear-gradient(135deg, 
      rgba(255, 255, 255, 0.95) 0%, 
      rgba(248, 250, 252, 0.9) 100%
    ),
    url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQwMCIgaGVpZ2h0PSI2MDAiIHZpZXdCb3g9IjAgMCAxNDAwIDYwMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGRlZnM+CjxsaW5lYXJHcmFkaWVudCBpZD0ic2t5Q29udGFjdCIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgo8c3RvcCBvZmZzZXQ9IjAlIiBzdHlsZT0ic3RvcC1jb2xvcjojZmJiZjI0O3N0b3Atb3BhY2l0eTowLjMiIC8+CjxzdG9wIG9mZnNldD0iNTAlIiBzdHlsZT0ic3RvcC1jb2xvcjojZjU5ZTBiO3N0b3Atb3BhY2l0eTowLjIiIC8+CjxzdG9wIG9mZnNldD0iMTAwJSIgc3R5bGU9InN0b3AtY29sb3I6I2Q5NzcwNjtzdG9wLW9wYWNpdHk6MC4xIiAvPgo8L2xpbmVhckdyYWRpZW50Pgo8bGluZWFyR3JhZGllbnQgaWQ9ImJ1aWxkaW5nc0NvbnRhY3QiIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMCUiIHkyPSIxMDAlIj4KPHN0b3Agb2Zmc2V0PSIwJSIgc3R5bGU9InN0b3AtY29sb3I6IzFlNDBhZjtzdG9wLW9wYWNpdHk6MC4yIiAvPgo8c3RvcCBvZmZzZXQ9IjUwJSIgc3R5bGU9InN0b3AtY29sb3I6IzFlM2E4YTtzdG9wLW9wYWNpdHk6MC4xNSIgLz4KPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdHlsZT0ic3RvcC1jb2xvcjojMWUyOTNiO3N0b3Atb3BhY2l0eTowLjEiIC8+CjwvbGluZWFyR3JhZGllbnQ+CjwvZGVmcz4KPCEtLSBTa3kgLS0+CjxyZWN0IHdpZHRoPSIxNDAwIiBoZWlnaHQ9IjMwMCIgZmlsbD0idXJsKCNza3lDb250YWN0KSIvPgo8IS0tIFN1biAtLT4KPGNpcmNsZSBjeD0iMTIwMCIgY3k9IjEwMCIgcj0iNjAiIGZpbGw9IiNmYmJmMjQiIG9wYWNpdHk9IjAuNCIvPgo8IS0tIER1YmFpIFNreWxpbmUgLS0+CjxnIGZpbGw9InVybCgjYnVpbGRpbmdzQ29udGFjdCkiPgo8IS0tIEJ1aWxkaW5ncyBzaWxob3VldHRlIC0tPgo8cmVjdCB4PSIyMDAiIHk9IjQ1MCIgd2lkdGg9IjQwIiBoZWlnaHQ9IjE1MCIvPgo8cmVjdCB4PSIyNjAiIHk9IjQyMCIgd2lkdGg9IjM1IiBoZWlnaHQ9IjE4MCIvPgo8cmVjdCB4PSIzMjAiIHk9IjQwMCIgd2lkdGg9IjMwIiBoZWlnaHQ9IjIwMCIvPgo8cmVjdCB4PSIzNzAiIHk9IjM4MCIgd2lkdGg9IjI1IiBoZWlnaHQ9IjIyMCIvPgo8IS0tIEJ1cmogS2hhbGlmYSAtLT4KPHBhdGggZD0iTTcwMCA2MDAgTDcwMCAzMDAgTDcwNSAyOTggTDcxMCAyOTUgTDcxNSAyOTggTDcyMCAzMDAgTDcyMCA2MDBaIi8+CjxyZWN0IHg9IjcwNSIgeT0iMzIwIiB3aWR0aD0iMTAiIGhlaWdodD0iNCIgZmlsbD0iI2Y4ZmFmYyIgb3BhY2l0eT0iMC4zIi8+CjxyZWN0IHg9IjcwNSIgeT0iMzQwIiB3aWR0aD0iMTAiIGhlaWdodD0iNCIgZmlsbD0iI2Y4ZmFmYyIgb3BhY2l0eT0iMC4zIi8+CjwhLS0gUmlnaHQgYnVpbGRpbmdzIC0tPgo8cmVjdCB4PSI4MDAiIHk9IjM4MCIgd2lkdGg9IjI1IiBoZWlnaHQ9IjIyMCIvPgo8cmVjdCB4PSI4NTAiIHk9IjQwMCIgd2lkdGg9IjMwIiBoZWlnaHQ9IjIwMCIvPgo8cmVjdCB4PSI5MDAiIHk9IjQyMCIgd2lkdGg9IjM1IiBoZWlnaHQ9IjE4MCIvPgo8cmVjdCB4PSI5NjAiIHk9IjQ1MCIgd2lkdGg9IjQwIiBoZWlnaHQ9IjE1MCIvPgo8IS0tIEJ1cmogQWwgQXJhYiAtLT4KPHBhdGggZD0iTTExMDAgNjAwIEwxMTAwIDQyMCBMMTEyMCA0MDAgTDExNDAgNDIwIEwxMTQwIDYwMFoiLz4KPC9nPgo8IS0tIEdyb3VuZCByZWZsZWN0aW9uIC0tPgo8ZWxsaXBzZSBjeD0iNzAwIiBjeT0iNjIwIiByeD0iNTAwIiByeT0iMTUiIGZpbGw9InVybCgjYnVpbGRpbmdzQ29udGFjdCkiIG9wYWNpdHk9IjAuMiIvPgo8L3N2Zz4K');
  background-size: cover;
  background-position: center bottom;
  background-repeat: no-repeat;
  position: relative;
  overflow: hidden;
}

.contact-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #10b981, #f59e0b, #3b82f6);
}

.contact-title {
  background: linear-gradient(135deg, 
    #1e293b 0%, 
    #334155 25%, 
    #475569 50%, 
    #64748b 75%, 
    #94a3b8 100%
  );
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 800;
  letter-spacing: -0.02em;
  position: relative;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.contact-title::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 3px;
  background: linear-gradient(90deg, #10b981, #f59e0b);
  border-radius: 2px;
}

.contact-subtitle {
  background: linear-gradient(135deg, 
    #64748b 0%, 
    #475569 50%, 
    #334155 100%
  );
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.6;
  position: relative;
}

/* Enhanced Professional Contact Form Styling */
.contact-form {
  background: linear-gradient(145deg, #ffffff, #f8fafc);
  border-radius: 24px;
  box-shadow: 
    0 25px 50px rgba(0, 0, 0, 0.1),
    0 15px 30px rgba(0, 0, 0, 0.08),
    0 8px 16px rgba(0, 0, 0, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(0, 0, 0, 0.08);
  position: relative;
  overflow: hidden;
  padding: 3rem 2.5rem;
  max-width: 800px;
  margin: 0 auto;
}

.contact-form::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #10b981, #f59e0b, #3b82f6);
}

.contact-input {
  background: linear-gradient(145deg, #ffffff, #f8fafc);
  border: 2px solid #e2e8f0;
  border-radius: 16px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 
    0 4px 8px rgba(0, 0, 0, 0.06),
    0 2px 4px rgba(0, 0, 0, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  padding: 1.25rem 1.5rem;
  font-size: 1.1rem;
  min-height: 3.5rem;
}

.contact-input:focus {
  border-color: #10b981;
  box-shadow: 
    0 0 0 3px rgba(16, 185, 129, 0.1),
    0 4px 8px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  transform: translateY(-1px);
}

.contact-input:hover {
  border-color: #cbd5e1;
  box-shadow: 
    0 4px 8px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.contact-select {
  background: linear-gradient(145deg, #ffffff, #f8fafc);
  border: 2px solid #e2e8f0;
  border-radius: 16px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 
    0 4px 8px rgba(0, 0, 0, 0.06),
    0 2px 4px rgba(0, 0, 0, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  cursor: pointer;
  padding: 1.25rem 1.5rem;
  font-size: 1.1rem;
  min-height: 3.5rem;
  height: 3.5rem;
  color: #334155 !important;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23334155' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 1rem;
  padding-right: 3rem;
  line-height: 1.2;
  display: flex;
  align-items: center;
}

.contact-select option {
  color: #334155 !important;
  background-color: #ffffff !important;
  padding: 0.5rem;
  font-size: 1rem;
}

.contact-select option:first-child {
  color: #64748b !important;
  font-style: italic;
}

.contact-select:invalid {
  color: #64748b !important;
}

.contact-select:focus {
  border-color: #10b981;
  box-shadow: 
    0 0 0 3px rgba(16, 185, 129, 0.1),
    0 4px 8px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  transform: translateY(-1px);
}

.contact-select:hover {
  border-color: #cbd5e1;
  box-shadow: 
    0 4px 8px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.contact-textarea {
  background: linear-gradient(145deg, #ffffff, #f8fafc);
  border: 2px solid #e2e8f0;
  border-radius: 24px;
  padding: 1.5rem 2rem;
  font-size: 1rem;
  line-height: 1.5;
  color: #1e293b;
  transition: all 0.3s ease;
  resize: vertical;
  min-height: 120px;
  box-shadow: 
    0 8px 20px rgba(0, 0, 0, 0.08),
    0 4px 8px rgba(0, 0, 0, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  font-weight: 500;
  text-align: right;
}

.contact-textarea:focus {
  border-color: #10b981;
  box-shadow: 
    0 0 0 5px rgba(16, 185, 129, 0.15),
    0 12px 24px rgba(0, 0, 0, 0.15),
    0 6px 12px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
  transform: translateY(-3px);
}

.contact-textarea:hover {
  border-color: #cbd5e1;
  box-shadow: 
    0 12px 24px rgba(0, 0, 0, 0.12),
    0 6px 12px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
  transform: translateY(-2px);
}

.contact-submit-btn {
  background: linear-gradient(135deg, #10b981 0%, #059669 50%, #047857 100%);
  border: none;
  border-radius: 16px;
  box-shadow: 
    0 10px 30px rgba(16, 185, 129, 0.3),
    0 6px 15px rgba(16, 185, 129, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  position: relative;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 1.5rem 2rem;
  font-size: 1.2rem;
  min-height: 4rem;
}

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

.contact-submit-btn:hover {
  transform: translateY(-3px);
  box-shadow: 
    0 15px 40px rgba(16, 185, 129, 0.4),
    0 8px 20px rgba(16, 185, 129, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

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

/* Error message styles */
.error-message {
  display: block;
  margin-top: 0.25rem;
  color: var(--danger);
}

/* Contact form input consistency */
#service-select {
  height: 3.5rem !important;
  min-height: 3.5rem !important;
  color: #334155 !important;
  background-color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  line-height: 1.2 !important;
  padding: 1rem 3rem 1rem 1.5rem !important;
  font-size: 1rem !important;
  font-weight: 500 !important;
  text-align: right !important;
}

#service-select option {
  color: #334155 !important;
  background-color: #ffffff !important;
  padding: 0.75rem !important;
  font-size: 1rem !important;
  line-height: 1.4 !important;
}

#service-select option[value=""] {
  color: #64748b !important;
  font-style: italic !important;
}

#name-input,
#email-input,
#phone-input,
#message-input {
  height: 3.5rem !important;
  min-height: 3.5rem !important;
}

/* Enhanced Gradient Backgrounds */
.bg-gradient-to-r {
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
}

.from-blue-600 { --tw-gradient-from: hsl(217, 91%, 60%); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(59, 130, 246, 0)); }
.to-blue-700 { --tw-gradient-to: hsl(217, 91%, 50%); }
.from-gold { --tw-gradient-from: hsl(45, 85%, 55%); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(245, 158, 11, 0)); }
.to-yellow-500 { --tw-gradient-to: hsl(45, 85%, 50%); }
.from-success { --tw-gradient-from: hsl(145, 65%, 45%); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(34, 197, 94, 0)); }
.to-green-600 { --tw-gradient-to: hsl(145, 65%, 35%); }
.hover\:bg-gradient-to-r:hover { background-image: linear-gradient(to right, var(--tw-gradient-stops)); }

/* ===== ADVANCED HEADER STYLING ===== */

/* Clean simple header background */
.advanced-header {
  position: relative;
  min-height: 80px;
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

/* Remove animated background */
.header-bg-animation {
  display: none;
}

/* Remove glass overlay */
.header-glass-overlay {
  display: none;
}

/* Brand Section */
.brand-section {
  position: relative;
  z-index: 20;
}

.brand-icon-wrapper {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
}

.brand-icon {
  width: 50px;
  height: 50px;
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 50%, #1e40af 100%);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  box-shadow: 
    0 8px 25px rgba(59, 130, 246, 0.3),
    0 4px 12px rgba(59, 130, 246, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

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

.brand-icon:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 
    0 12px 35px rgba(59, 130, 246, 0.4),
    0 6px 16px rgba(59, 130, 246, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.brand-icon:hover::before {
  left: 100%;
}

.brand-gradient {
  background: linear-gradient(135deg, 
    #1e293b 0%, 
    #334155 25%, 
    #475569 50%, 
    #64748b 75%, 
    #94a3b8 100%
  );
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  position: relative;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.brand-title {
  position: relative;
  letter-spacing: -0.02em;
  font-weight: 800;
}

.brand-subtitle {
  color: #64748b;
  font-weight: 500;
  letter-spacing: 0.01em;
  opacity: 0.9;
  transition: all 0.3s ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  font-size: 0.9rem;
}

@media (min-width: 1024px) {
  .brand-subtitle {
    font-size: 1rem;
  }
}

@media (min-width: 1280px) {
  .brand-subtitle {
    font-size: 1.1rem;
  }
}

.brand-section:hover .brand-subtitle {
  opacity: 1;
  color: #475569;
}

/* Premium Discount Badge */
.premium-discount-badge {
  position: relative;
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 50%, #b91c1c 100%);
  border-radius: 50px;
  padding: 12px 24px;
  box-shadow: 
    0 8px 25px rgba(239, 68, 68, 0.3),
    0 4px 12px rgba(239, 68, 68, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
}

.badge-glow {
  position: absolute;
  inset: -2px;
  background: linear-gradient(135deg, #ef4444, #dc2626, #b91c1c);
  border-radius: 50px;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: -1;
  filter: blur(8px);
}

.premium-discount-badge:hover .badge-glow {
  opacity: 0.6;
}

.badge-content {
  display: flex;
  align-items: center;
  gap: 8px;
  color: white;
  font-weight: 600;
  font-size: 0.9rem;
  position: relative;
  z-index: 10;
}

.badge-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex-shrink: 0;
}

.badge-icon {
  animation: sparkle 2s ease-in-out infinite;
}

@keyframes sparkle {
  0%, 100% { transform: scale(1) rotate(0deg); }
  50% { transform: scale(1.1) rotate(180deg); }
}

.premium-discount-badge:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 
    0 12px 35px rgba(239, 68, 68, 0.4),
    0 6px 16px rgba(239, 68, 68, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* Advanced Language Switcher */
.language-switcher {
  position: relative;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(20px);
  border-radius: 20px;
  padding: 6px;
  box-shadow: 
    0 8px 25px rgba(0, 0, 0, 0.1),
    0 4px 12px rgba(0, 0, 0, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.language-switcher-bg {
  position: absolute;
  inset: 4px;
  background: linear-gradient(135deg, rgba(255,255,255,0.6), rgba(248,250,252,0.8));
  border-radius: 16px;
  transition: all 0.3s ease;
}

.language-buttons {
  display: flex;
  gap: 4px;
  position: relative;
  z-index: 10;
}

.advanced-lang-btn {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border: none;
  background: transparent;
  border-radius: 14px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  overflow: hidden;
  font-weight: 500;
  font-size: 0.85rem;
  color: #64748b;
}

.advanced-lang-btn.active {
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  color: white;
  box-shadow: 
    0 4px 12px rgba(59, 130, 246, 0.3),
    0 2px 6px rgba(59, 130, 246, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.advanced-lang-btn:not(.active):hover {
  background: rgba(59, 130, 246, 0.1);
  color: #3b82f6;
  transform: translateY(-1px);
}

.lang-flag {
  font-size: 1.1rem;
  transition: transform 0.3s ease;
}

.advanced-lang-btn:hover .lang-flag {
  transform: scale(1.1);
}

.lang-text {
  font-weight: 600;
  white-space: nowrap;
}

.lang-ripple {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle, rgba(59, 130, 246, 0.3) 0%, transparent 70%);
  opacity: 0;
  transform: scale(0);
  transition: all 0.3s ease;
}

.advanced-lang-btn:active .lang-ripple {
  opacity: 1;
  transform: scale(1);
}

/* Floating Particles */
.header-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.particle {
  position: absolute;
  width: 4px;
  height: 4px;
  background: linear-gradient(45deg, #3b82f6, #10b981);
  border-radius: 50%;
  opacity: 0.6;
}

.particle-1 {
  top: 20%;
  left: 10%;
  animation: float1 6s ease-in-out infinite;
}

.particle-2 {
  top: 60%;
  left: 80%;
  animation: float2 8s ease-in-out infinite;
}

.particle-3 {
  top: 30%;
  left: 60%;
  animation: float3 7s ease-in-out infinite;
}

.particle-4 {
  top: 70%;
  left: 20%;
  animation: float4 9s ease-in-out infinite;
}

.particle-5 {
  top: 40%;
  left: 90%;
  animation: float5 5s ease-in-out infinite;
}

@keyframes float1 {
  0%, 100% { transform: translateY(0px) translateX(0px); }
  33% { transform: translateY(-20px) translateX(10px); }
  66% { transform: translateY(10px) translateX(-5px); }
}

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

@keyframes float3 {
  0%, 100% { transform: translateY(0px) translateX(0px); }
  25% { transform: translateY(15px) translateX(5px); }
  75% { transform: translateY(-10px) translateX(-8px); }
}

@keyframes float4 {
  0%, 100% { transform: translateY(0px) translateX(0px); }
  40% { transform: translateY(-25px) translateX(15px); }
  80% { transform: translateY(5px) translateX(-10px); }
}

@keyframes float5 {
  0%, 100% { transform: translateY(0px) translateX(0px); }
  60% { transform: translateY(-18px) translateX(-12px); }
}

/* Responsive design */
@media (max-width: 640px) {
  /* Advanced Header Mobile Optimizations */
  .advanced-header {
    min-height: 80px !important;
    padding: 0 !important;
  }

  .advanced-header .container {
    padding: 1rem !important;
  }

  /* Brand Section Mobile */
  .brand-section {
    text-align: center !important;
  }

  .brand-icon-wrapper {
    display: block !important;
    margin-bottom: 0.75rem !important;
  }

  .brand-icon {
    width: 40px !important;
    height: 40px !important;
    margin: 0 auto !important;
  }

  .brand-title {
    font-size: 1.5rem !important;
    margin-bottom: 0.5rem !important;
  }

  .brand-subtitle {
    font-size: 0.8rem !important;
    line-height: 1.3 !important;
  }

  /* Premium Discount Badge Mobile */
  .premium-discount-badge {
    padding: 8px 16px !important;
    font-size: 0.75rem !important;
    min-width: 180px !important;
    max-width: 220px !important;
  }

  .badge-content {
    gap: 6px !important;
  }

  .badge-text {
    font-size: 0.7rem !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .badge-icon {
    width: 12px !important;
    height: 12px !important;
    flex-shrink: 0 !important;
  }

  /* Language Switcher Mobile */
  .language-switcher {
    padding: 4px !important;
    border-radius: 16px !important;
  }

  .advanced-lang-btn {
    padding: 8px 12px !important;
    font-size: 0.75rem !important;
    gap: 6px !important;
  }

  .lang-flag {
    font-size: 1rem !important;
  }

  .lang-text {
    font-size: 0.7rem !important;
    max-width: 50px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* Actions Section Mobile */
  .actions-section {
    gap: 1rem !important;
  }

  /* Particles Mobile - Reduce for performance */
  .header-particles {
    display: none !important;
  }

  /* Header mobile optimizations */
  header {
    padding: 0.75rem 0 !important;
    position: relative !important;
    z-index: 1000 !important;
  }

  header .container {
    padding: 0 1rem !important;
  }

  /* Brand and title mobile sizing */
  header h1 {
    font-size: 1.5rem !important;
    line-height: 1.2 !important;
    margin-bottom: 0.5rem !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
  }

  header #header-subtitle {
    font-size: 0.8rem !important;
    line-height: 1.3 !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: initial !important;
  }

  /* Discount badge mobile optimization */
  header .bg-red-400 {
    font-size: 0.75rem !important;
    padding: 0.5rem 0.75rem !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 250px !important;
    min-width: 180px !important;
  }

  /* French language specific mobile optimization for discount badge */
  .ltr header .bg-red-400 {
    font-size: 0.7rem !important;
    padding: 0.4rem 0.6rem !important;
    max-width: 280px !important;
    min-width: 200px !important;
  }

  /* Language switcher mobile optimization */
  header .flex.gap-2 {
    gap: 0.25rem !important;
  }

  /* Unified language button styling */
  .lang-btn {
    padding: 0.4rem 0.5rem !important;
    font-size: 0.75rem !important;
    gap: 0.25rem !important;
    min-width: auto !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .lang-btn span:first-child {
    font-size: 1rem !important;
  }

  .lang-btn span:last-child {
    font-size: 0.7rem !important;
    max-width: 60px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  /* Header layout mobile optimization */
  header .flex.flex-col {
    gap: 0.75rem !important;
  }

  header .flex.flex-col.sm\:flex-row {
    gap: 0.5rem !important;
  }

  /* Header/Hero sizing on phones */
  .hero { 
    padding-top: 120px !important; 
    min-height: 100vh !important;
  }
  
  .hero-title { 
    font-size: 1.75rem !important; 
    line-height: 1.2 !important; 
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    hyphens: auto;
    margin-bottom: 1rem !important;
  }
  
  .hero-subtitle { 
    font-size: 0.95rem !important; 
    line-height: 1.5 !important; 
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: initial !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    margin-bottom: 1.5rem !important;
  }

  /* Contact section typography */
  .contact-title { 
    font-size: 1.5rem !important; 
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    hyphens: auto;
  }
  
  .contact-subtitle { 
    font-size: 0.95rem !important; 
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    hyphens: auto;
  }

  /* Contact form compact padding and full width */
  .contact-form { 
    padding: 1.25rem 1rem !important; 
    max-width: 100% !important; 
  }
  
  .contact-input, .contact-select { 
    font-size: 1rem !important; 
    padding: 1rem !important; 
    min-height: 3.25rem !important; 
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    max-width: 100% !important;
  }
  
  .contact-textarea { 
    font-size: 1rem !important; 
    padding: 1.25rem !important; 
    min-height: 9rem !important; 
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    max-width: 100% !important;
  }
  
  .contact-submit-btn { 
    font-size: 1rem !important; 
    padding: 1rem 1.25rem !important; 
    min-height: 3.25rem !important; 
  }

  /* Primary hero buttons compact */
  .hero-btn-primary, .hero-btn-secondary { 
    font-size: 0.85rem !important; 
    padding: 0.75rem 1rem !important; 
    white-space: normal !important;
    line-height: 1.2 !important;
    min-height: auto !important;
    height: auto !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
  }

  /* Feature cards text sizing for all languages */
  .hero-feature-title {
    font-size: 0.85rem !important;
    line-height: 1.3 !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
  }

  .hero-feature-desc {
    font-size: 0.75rem !important;
    line-height: 1.2 !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
  }

  /* French and English specific mobile fixes */
  .ltr .hero-title,
  .ltr .hero-subtitle {
    font-size: 1.5rem !important;
    line-height: 1.3 !important;
  }

  .ltr .hero-subtitle {
    font-size: 0.9rem !important;
    line-height: 1.4 !important;
  }

  .ltr .hero-btn-primary,
  .ltr .hero-btn-secondary {
    font-size: 0.8rem !important;
    padding: 0.7rem 0.8rem !important;
  }

  .ltr .hero-feature-title {
    font-size: 0.85rem !important;
    line-height: 1.3 !important;
  }

  .ltr .hero-feature-desc {
    font-size: 0.75rem !important;
    line-height: 1.2 !important;
  }

  .ltr .contact-title {
    font-size: 1.4rem !important;
    line-height: 1.3 !important;
  }

  .ltr .contact-subtitle {
    font-size: 0.9rem !important;
    line-height: 1.4 !important;
  }

  /* Universal mobile fixes for service select (all languages) */
  .contact-form select[name="serviceType"],
  .contact-form #service-select,
  .contact-form .contact-select {
    font-size: 0.9rem !important;
    padding: 0.8rem 0.7rem !important;
    min-height: 3rem !important;
    height: 3rem !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    border-radius: 16px !important;
    border: 2px solid #e2e8f0 !important;
    background: linear-gradient(145deg, #ffffff, #f8fafc) !important;
    box-shadow: 
      0 4px 8px rgba(0, 0, 0, 0.06),
      0 2px 4px rgba(0, 0, 0, 0.04),
      inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
  }

  /* Service select options for all languages on mobile */
  .contact-form select[name="serviceType"] option,
  .contact-form #service-select option,
  .contact-form .contact-select option {
    font-size: 0.85rem !important;
    padding: 0.5rem 0.4rem !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    background: white !important;
    color: #1e293b !important;
  }

  /* Focus and hover states for mobile */
  .contact-form select[name="serviceType"]:focus,
  .contact-form #service-select:focus,
  .contact-form .contact-select:focus {
    border-color: #10b981 !important;
    box-shadow: 
      0 0 0 3px rgba(16, 185, 129, 0.1),
      0 4px 8px rgba(0, 0, 0, 0.1),
      inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
    transform: translateY(-1px) !important;
  }

  /* Mobile touch optimization */
  .contact-form select[name="serviceType"]:active,
  .contact-form #service-select:active,
  .contact-form .contact-select:active {
    transform: translateY(0) !important;
    box-shadow: 
      0 2px 4px rgba(0, 0, 0, 0.1),
      inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
  }

  /* Extension duration mobile optimizations */
  .extension-duration-container {
    padding: 1rem 1.5rem !important;
    margin: 0 1rem !important;
  }

  #extension-duration-label {
    font-size: 0.9rem !important;
    margin-bottom: 0.5rem !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
  }

  #extension-days {
    font-size: 0.9rem !important;
    padding: 0.6rem 0.8rem !important;
    min-height: 2.8rem !important;
    width: 100% !important;
    max-width: 100% !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
  }

  /* Additional mobile safeguards */
  .container {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  /* Ensure all text elements are mobile-optimized */
  * {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Mobile-specific overflow protection */
  body, html {
    overflow-x: hidden !important;
    width: 100% !important;
  }
}

/* Additional mobile breakpoint for very small devices */
@media (max-width: 480px) {
  .hero {
    padding-top: 100px !important;
  }
  
  .hero-title {
    font-size: 1.5rem !important;
  }
  
  .hero-subtitle {
    font-size: 0.85rem !important;
  }
  
  .contact-form {
    padding: 1rem 0.75rem !important;
  }
  
  .contact-input, .contact-select, .contact-textarea {
    padding: 0.8rem !important;
    font-size: 0.9rem !important;
  }
}

@media (min-width: 640px) {
  .sm\:flex-row { flex-direction: row; }
  .container { padding: 0 1.5rem; }
}

@media (min-width: 768px) {
  .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .md\:text-5xl { font-size: 3rem; line-height: 1; }
  
  /* On medium screens and up, allow text to wrap */
  .hero-subtitle-oneline {
    white-space: normal;
    overflow: visible;
    text-overflow: initial;
  }
}

@media (min-width: 1024px) {
  .lg\:flex-row { flex-direction: row; }
  .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lg\:items-center { align-items: center; }
  .lg\:justify-between { justify-content: space-between; }
  .lg\:text-right { text-align: right; }
  .lg\:text-left { text-align: left; }
  .lg\:gap-3 { gap: 0.75rem; }
  .lg\:gap-6 { gap: 1.5rem; }
  .lg\:py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
  .lg\:py-20 { padding-top: 5rem; padding-bottom: 5rem; }
  .lg\:px-4 { padding-left: 1rem; padding-right: 1rem; }
  .lg\:px-8 { padding-left: 2rem; padding-right: 2rem; }
  .lg\:py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
  .lg\:py-4 { padding-top: 1rem; padding-bottom: 1rem; }
  .lg\:mb-6 { margin-bottom: 1.5rem; }
  .lg\:mb-10 { margin-bottom: 2.5rem; }
  .lg\:mb-16 { margin-bottom: 4rem; }
  .lg\:text-base { font-size: 1rem; line-height: 1.5rem; }
  .lg\:text-lg { font-size: 1.125rem; line-height: 1.75rem; }
  .lg\:text-xl { font-size: 1.25rem; line-height: 1.75rem; }
  .lg\:text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
  .lg\:text-4xl { font-size: 2.25rem; line-height: 2.5rem; }
  .lg\:text-6xl { font-size: 3.75rem; line-height: 1; }
  .lg\:w-8 { width: 2rem; }
  .lg\:w-16 { width: 4rem; }
  .lg\:h-8 { height: 2rem; }
  .lg\:h-16 { height: 4rem; }
  .container { max-width: 1024px; }
}

@media (min-width: 1280px) {
  .container { max-width: 1280px; }
}

/* RTL specific adjustments */
.rtl .text-left { text-align: right; }
.rtl .text-right { text-align: left; }
.rtl .lg\:text-left { text-align: right; }
.rtl .lg\:text-right { text-align: left; }

/* LTR specific adjustments */
.ltr .text-left { text-align: left; }
.ltr .text-right { text-align: right; }
.ltr .lg\:text-left { text-align: left; }
.ltr .lg\:text-right { text-align: right; }

/* Hero text fix for mobile when switching to LTR languages */
.ltr #hero-title,
.ltr #hero-subtitle {
  text-align: center !important;
}

/* Ensure hero content stays centered on all devices for LTR languages */
.ltr .hero .text-center {
  text-align: center !important;
}

/* Floating WhatsApp positioning for RTL/LTR */
.rtl #floating-whatsapp {
  left: 1.5rem;
  right: auto;
}

.ltr #floating-whatsapp {
  right: 1.5rem;
  left: auto;
}

/* Simple Extension Duration Label Styling */
#extension-duration-label {
  color: var(--dark-blue);
  font-weight: 600;
  font-size: 1rem;
  margin-bottom: 0.75rem;
  display: block;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Simple select styling for extension duration */
#extension-days {
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 0.75rem 1rem;
  font-size: 1rem;
  background: white;
  transition: border-color 0.2s ease;
  cursor: pointer;
  width: 100%;
  max-width: 100%;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

#extension-days:hover {
  border-color: var(--success);
}

#extension-days:focus {
  border-color: var(--success);
  outline: none;
  box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.1);
}

/* Simple extension duration container */
.extension-duration-container {
  background: white;
  border-radius: 8px;
  padding: 1.5rem 2rem;
  border: 1px solid #f3f4f6;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* Normalize form controls */
input,
select,
textarea {
  width: 100%;
  padding: 0.75rem 1rem; /* same as inputs */
  border: 1px solid #ddd;
  border-radius: 0.75rem; /* same rounded corners */
  font-size: 1rem;
  line-height: 1.5;
  background-color: #fff;
  appearance: none; /* removes default browser arrow style */
  -webkit-appearance: none;
  -moz-appearance: none;
}

/* Custom arrow for select */
select {
  background-image: url("data:image/svg+xml;utf8,<svg fill='%23666' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 1rem;
  padding-right: 2.5rem; /* make space for the arrow */
}

/* Fix select text visibility on mobile */
select option {
  color: #333 !important;
  background-color: white !important;
  padding: 0.5rem 1rem !important;
  font-size: 1rem !important;
  line-height: 1.5 !important;
}

/* Ensure select text is always visible */
select:not([size]) {
  background-color: white !important;
  color: #333 !important;
  text-indent: 0 !important;
}

/* Mobile-specific select fixes */
@media (max-width: 767px) {
  select {
    color: #333 !important;
    background-color: white !important;
    font-size: 1rem !important;
    line-height: 1.5 !important;
    text-align: left !important;
    text-align-last: left !important;
    direction: ltr !important;
  }
  
  select option {
    color: #333 !important;
    background-color: white !important;
    font-size: 1rem !important;
    padding: 0.75rem 1rem !important;
  }
  
  /* Force select text visibility on mobile */
  select[name="serviceType"],
  #service-select,
  .contact-select {
    color: #333 !important;
    background-color: white !important;
    text-indent: 0 !important;
    text-align: left !important;
  }
  
  /* Ensure placeholder text is visible */
  select option[value=""] {
    color: #666 !important;
    font-style: italic !important;
  }
  
  /* Fix for iOS Safari */
  select {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    border-radius: 0.75rem !important;
  }
  
  /* Custom mobile arrow that doesn't interfere with text */
  select {
    background-image: url("data:image/svg+xml;utf8,<svg fill='%23666' height='20' viewBox='0 0 24 24' width='20' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: right 0.75rem center !important;
    background-size: 20px !important;
    padding-right: 2.25rem !important;
  }
}

/* Comprehensive Mobile Responsiveness */
/* Extra Small Devices (phones, 320px and up) */
@media (min-width: 320px) and (max-width: 479px) {
  .container {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }
  
  header h1 {
    font-size: 1.25rem !important;
  }
  
  header #header-subtitle {
    font-size: 0.7rem !important;
  }
  
  .hero {
    padding-top: 80px !important;
  }
  
  .hero-title {
    font-size: 1.25rem !important;
    padding: 0 0.5rem !important;
  }
  
  .hero-subtitle {
    font-size: 0.8rem !important;
    padding: 0 0.5rem !important;
  }
  
  .hero-btn-primary, .hero-btn-secondary {
    font-size: 0.75rem !important;
    padding: 0.6rem 0.8rem !important;
    margin: 0 0.5rem !important;
  }
  
  .contact-form {
    padding: 1rem 0.75rem !important;
  }
  
  .contact-input, .contact-select, .contact-textarea {
    padding: 0.7rem !important;
    font-size: 0.9rem !important;
  }
  
  .lang-btn {
    padding: 0.3rem 0.4rem !important;
    font-size: 0.7rem !important;
  }
  
  .lang-btn span:last-child {
    max-width: 50px !important;
  }
}

/* Small Devices (phones, 480px and up) */
@media (min-width: 480px) and (max-width: 639px) {
  .container {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  
  header h1 {
    font-size: 1.4rem !important;
  }
  
  header #header-subtitle {
    font-size: 0.75rem !important;
  }
  
  .hero {
    padding-top: 100px !important;
  }
  
  .hero-title {
    font-size: 1.5rem !important;
  }
  
  .hero-subtitle {
    font-size: 0.85rem !important;
  }
  
  .hero-btn-primary, .hero-btn-secondary {
    font-size: 0.8rem !important;
    padding: 0.7rem 0.9rem !important;
  }
  
  .contact-form {
    padding: 1.25rem 1rem !important;
  }
  
  .contact-input, .contact-select, .contact-textarea {
    padding: 0.8rem !important;
    font-size: 0.95rem !important;
  }
}

/* Medium Devices (tablets, 640px and up) */
@media (min-width: 640px) and (max-width: 767px) {
  .container {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }
  
  .hero {
    padding-top: 110px !important;
  }
  
  .hero-title {
    font-size: 1.75rem !important;
  }
  
  .hero-subtitle {
    font-size: 0.9rem !important;
  }
  
  .hero-btn-primary, .hero-btn-secondary {
    font-size: 0.85rem !important;
    padding: 0.75rem 1rem !important;
  }
  
  .contact-form {
    padding: 1.5rem 1.25rem !important;
  }
  
  .contact-input, .contact-select, .contact-textarea {
    padding: 0.9rem !important;
    font-size: 1rem !important;
  }
}

/* Landscape Orientation for Mobile */
@media (max-height: 500px) and (orientation: landscape) {
  .hero {
    padding-top: 60px !important;
    min-height: 100vh !important;
  }
  
  .hero-title {
    font-size: 1.5rem !important;
    margin-bottom: 0.5rem !important;
  }
  
  .hero-subtitle {
    font-size: 0.8rem !important;
    margin-bottom: 1rem !important;
  }
  
  .hero-btn-primary, .hero-btn-secondary {
    font-size: 0.75rem !important;
    padding: 0.5rem 0.8rem !important;
    margin: 0 0.25rem !important;
  }
  
  header {
    padding: 0.5rem 0 !important;
  }
  
  header h1 {
    font-size: 1.2rem !important;
    margin-bottom: 0.25rem !important;
  }
  
  header #header-subtitle {
    font-size: 0.7rem !important;
  }
}

/* High DPI Displays (Retina, etc.) */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .hero-title,
  .hero-subtitle,
  .contact-title,
  .contact-subtitle {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}

/* Touch Device Optimizations */
@media (hover: none) and (pointer: coarse) {
  .lang-btn,
  .hero-btn-primary,
  .hero-btn-secondary,
  .contact-submit-btn {
    min-height: 44px !important; /* Apple's recommended touch target size */
  }
  
  .contact-input,
  .contact-select,
  .contact-textarea {
    min-height: 44px !important;
  }
  
  /* Increase touch target spacing */
  .lang-btn + .lang-btn {
    margin-left: 0.5rem !important;
  }
  
  .hero-btn-primary + .hero-btn-secondary {
    margin-top: 0.75rem !important;
  }
}

/* Dark Mode Support for Mobile */
@media (prefers-color-scheme: dark) {
  .contact-form {
    background: linear-gradient(145deg, #1a1a1a, #2a2a2a) !important;
    border-color: #333 !important;
  }
  
  .contact-input,
  .contact-select,
  .contact-textarea {
    background-color: #2a2a2a !important;
    border-color: #444 !important;
    color: #fff !important;
  }
  
  .contact-input::placeholder,
  .contact-select::placeholder,
  .contact-textarea::placeholder {
    color: #aaa !important;
  }
}

/* Print Styles for Mobile */
@media print {
  .hero {
    padding-top: 0 !important;
    background: white !important;
    color: black !important;
  }
  
  .contact-form {
    box-shadow: none !important;
    border: 1px solid #ccc !important;
  }
  
  .lang-btn,
  .hero-btn-primary,
  .hero-btn-secondary {
    display: none !important;
  }
}

/* Universal Text Overflow Prevention for All Mobile Devices */
@media (max-width: 767px) {
  /* Prevent all text from being cut off */
  * {
    text-overflow: initial !important;
    overflow: visible !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    hyphens: auto !important;
  }
  
  /* Header text fixes */
  header h1,
  header #header-subtitle,
  .discount-badge,
  .lang-btn span {
    text-overflow: initial !important;
    overflow: visible !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    hyphens: auto !important;
  }
  
  /* Hero text fixes */
  .hero-title,
  .hero-subtitle,
  .hero-btn-primary,
  .hero-btn-secondary {
    text-overflow: initial !important;
    overflow: visible !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    hyphens: auto !important;
  }
  
  /* Feature cards text fixes */
  .hero-feature-title,
  .hero-feature-desc {
    text-overflow: initial !important;
    overflow: visible !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    hyphens: auto !important;
  }
  
  /* Contact section text fixes */
  .contact-title,
  .contact-subtitle {
    text-overflow: initial !important;
    overflow: visible !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    hyphens: auto !important;
  }
  
  /* Form elements text fixes */
  .contact-input,
  .contact-select,
  .contact-textarea,
  .contact-submit-btn {
    text-overflow: initial !important;
    overflow: visible !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    hyphens: auto !important;
  }
  
  /* Service select specific fixes */
  select[name="serviceType"],
  #service-select,
  .contact-select {
    text-overflow: initial !important;
    overflow: visible !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    hyphens: auto !important;
  }
  
  /* Select options text fixes */
  select option {
    text-overflow: initial !important;
    overflow: visible !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    hyphens: auto !important;
  }
  
  /* Extension duration text fixes */
  #extension-duration-label,
  #extension-days {
    text-overflow: initial !important;
    overflow: visible !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    hyphens: auto !important;
  }
  
  /* Button text fixes */
  .btn-glow,
  .lang-btn,
  .hero-btn-primary,
  .hero-btn-secondary,
  .contact-submit-btn {
    text-overflow: initial !important;
    overflow: visible !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    hyphens: auto !important;
  }
  
  /* Container and layout fixes */
  .container,
  .hero,
  .contact-section,
  .contact-form {
    overflow: visible !important;
  }
  
  /* Ensure all text containers can expand */
  .text-center,
  .text-left,
  .text-right {
    overflow: visible !important;
    text-overflow: initial !important;
  }
}

/* Extra Small Devices - Additional Text Protection */
@media (max-width: 479px) {
  /* Force text visibility on very small screens */
  * {
    text-overflow: initial !important;
    overflow: visible !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    hyphens: auto !important;
    max-width: none !important;
  }
  
  /* Ensure buttons don't cut off text */
  .hero-btn-primary,
  .hero-btn-secondary {
    height: auto !important;
    min-height: auto !important;
    padding: 0.6rem 0.8rem !important;
    line-height: 1.2 !important;
  }
  
  /* Language buttons full text visibility */
  .lang-btn {
    height: auto !important;
    min-height: auto !important;
    padding: 0.3rem 0.4rem !important;
    line-height: 1.2 !important;
  }
  
  /* Form elements full text visibility */
  .contact-input,
  .contact-select,
  .contact-textarea {
    height: auto !important;
    min-height: auto !important;
    line-height: 1.5 !important;
  }
}

/* Landscape Mode Text Protection */
@media (max-height: 500px) and (orientation: landscape) {
  /* Ensure text is fully visible in landscape */
  .hero-title,
  .hero-subtitle,
  .hero-btn-primary,
  .hero-btn-secondary {
    text-overflow: initial !important;
    overflow: visible !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    hyphens: auto !important;
  }
}

/* Mobile Contact Form Input Text Visibility Fixes */
@media (max-width: 767px) {
  /* Ensure input text is always visible on mobile */
  .contact-input,
  .contact-select,
  .contact-textarea {
    color: #333 !important;
    background-color: white !important;
    border-color: #e2e8f0 !important;
    font-size: 1rem !important;
    line-height: 1.5 !important;
    padding: 1rem !important;
    min-height: 3.25rem !important;
    text-align: left !important;
    direction: ltr !important;
  }
  
  /* Input focus states for mobile */
  .contact-input:focus,
  .contact-select:focus,
  .contact-textarea:focus {
    color: #333 !important;
    background-color: white !important;
    border-color: #10b981 !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1) !important;
  }
  
  /* Input placeholder text visibility */
  .contact-input::placeholder,
  .contact-select::placeholder,
  .contact-textarea::placeholder {
    color: #666 !important;
    opacity: 1 !important;
    font-size: 1rem !important;
  }
  
  /* Input text while typing */
  .contact-input:not(:placeholder-shown),
  .contact-select:not(:placeholder-shown),
  .contact-textarea:not(:placeholder-shown) {
    color: #333 !important;
    background-color: white !important;
  }
  
  /* Select dropdown text visibility */
  select.contact-select option {
    color: #333 !important;
    background-color: white !important;
    font-size: 1rem !important;
    padding: 0.5rem 1rem !important;
  }
  
  /* Service select specific mobile fixes */
  select[name="serviceType"],
  #service-select {
    color: #333 !important;
    background-color: white !important;
    background-image: url("data:image/svg+xml;utf8,<svg fill='%23666' height='20' viewBox='0 0 24 24' width='20' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: right 0.75rem center !important;
    background-size: 20px !important;
    padding-right: 2.25rem !important;
  }
  
  /* Form container background */
  .contact-form {
    background: linear-gradient(145deg, #ffffff, #f8fafc) !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
  }
  
  /* Ensure form elements have proper contrast */
  .contact-title,
  .contact-subtitle {
    color: #1e293b !important;
  }
  
  /* Submit button text visibility */
  .contact-submit-btn {
    color: white !important;
    background: linear-gradient(135deg, #10b981 0%, #059669 50%, #047857 100%) !important;
    border: none !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
  }
}

/* Extra Small Devices - Input Text Protection */
@media (max-width: 479px) {
  .contact-input,
  .contact-select,
  .contact-textarea {
    color: #333 !important;
    background-color: white !important;
    font-size: 0.9rem !important;
    padding: 0.8rem !important;
    min-height: 3rem !important;
  }
  
  .contact-input::placeholder,
  .contact-select::placeholder,
  .contact-textarea::placeholder {
    color: #666 !important;
    font-size: 0.9rem !important;
  }
  
  /* Force text visibility on very small screens */
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  select,
  textarea {
    color: #333 !important;
    background-color: white !important;
    -webkit-text-fill-color: #333 !important;
    -webkit-text-security: none !important;
  }
}