/* Enhanced Professional Styling - Beautiful Backgrounds & Effects */

/* Remove any potential border-radius from viewport elements */
html, body {
  border-radius: 0 !important;
  overflow-x: hidden;
}

/* Animated Background with Gradient */
body {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 25%, #667eea 50%, #f093fb 75%, #f5576c 100%);
  background-size: 400% 400%;
  animation: gradientShift 15s ease infinite;
  min-height: 100vh;
  position: relative;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Animated Background */
@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Background Overlay for Content Readability */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(1px);
  z-index: -1;
}

/* Floating Background Elements */
body::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: 
    radial-gradient(circle at 20% 80%, rgba(120, 119, 198, 0.3) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.15) 0%, transparent 50%),
    radial-gradient(circle at 40% 40%, rgba(99, 102, 241, 0.2) 0%, transparent 50%);
  z-index: -1;
  animation: float 20s ease-in-out infinite;
}

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

/* Glass Morphism Effect for Cards */
.glass-morphism, .bg-white {
  background: rgba(255, 255, 255, 0.25) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.1),
    0 4px 16px rgba(0, 0, 0, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
  border-radius: 20px !important;
}

/* Header Glass Effect */
header {
  background: rgba(255, 255, 255, 0.15) !important;
  backdrop-filter: blur(25px) !important;
  -webkit-backdrop-filter: blur(25px) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1) !important;
  border-radius: 0 !important; /* Remove oval shaping for better flow */
}

/* Remove border-radius from header elements */
header * {
  border-radius: 0 !important;
}

/* Restore minimal border-radius only for specific buttons that need it */
header button:not(.no-radius) {
  border-radius: 6px !important;
}

/* Aggressive removal of any border-radius that might cause oval shapes */
*, *::before, *::after {
  box-sizing: border-box;
}

/* Specifically target elements that might inherit border-radius */
.container, .mx-auto, .flex, .sticky, .top-0, .z-40, .z-50 {
  border-radius: 0 !important;
}

/* Enhanced Button Styling with Glow Effects */
button, .btn {
  position: relative;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 12px;
}

button:hover, .btn:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 
    0 15px 35px rgba(0, 0, 0, 0.15),
    0 8px 20px rgba(99, 102, 241, 0.3);
}

/* Button Glow Animation */
.bg-indigo-600:hover {
  box-shadow: 
    0 0 20px rgba(99, 102, 241, 0.5),
    0 0 40px rgba(99, 102, 241, 0.3),
    0 15px 35px rgba(0, 0, 0, 0.15);
}

/* Neon Glow Effect */
.neon-glow {
  box-shadow: 
    0 0 15px rgba(99, 102, 241, 0.4),
    0 0 30px rgba(99, 102, 241, 0.3),
    0 0 45px rgba(99, 102, 241, 0.2),
    0 4px 20px rgba(0, 0, 0, 0.1);
  animation: pulse-glow 2s ease-in-out infinite alternate;
}

@keyframes pulse-glow {
  from {
    box-shadow: 
      0 0 15px rgba(99, 102, 241, 0.4),
      0 0 30px rgba(99, 102, 241, 0.3),
      0 0 45px rgba(99, 102, 241, 0.2);
  }
  to {
    box-shadow: 
      0 0 20px rgba(99, 102, 241, 0.6),
      0 0 40px rgba(99, 102, 241, 0.4),
      0 0 60px rgba(99, 102, 241, 0.3);
  }
}

/* Floating Animation for Cards */
.floating-card {
  animation: floatCard 6s ease-in-out infinite;
}

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

/* Text Glow Effects */
h1, h2, h3 {
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.text-glow {
  text-shadow:
    0 0 10px rgba(255, 255, 255, 0.8),
    0 0 20px rgba(255, 255, 255, 0.6),
    0 0 30px rgba(255, 255, 255, 0.4);
}

/* Simplified text-glow for mobile */
@media (max-width: 768px) {
  .text-glow {
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
  }
}

/* Enhanced Gradient Text with Light Outline */
.gradient-text {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: inline-block;
  word-wrap: break-word;
  white-space: normal;
  /* Light outline for readability */
  -webkit-text-stroke: 0.5px rgba(0, 0, 0, 0.3);
  text-stroke: 0.5px rgba(0, 0, 0, 0.3);
  /* Light text shadow fallback */
  text-shadow:
    -0.5px -0.5px 0 rgba(0, 0, 0, 0.2),
    0.5px -0.5px 0 rgba(0, 0, 0, 0.2),
    -0.5px 0.5px 0 rgba(0, 0, 0, 0.2),
    0.5px 0.5px 0 rgba(0, 0, 0, 0.2);
}

/* Combined gradient text with enhanced glow effect */
.gradient-text.text-glow {
  /* Light outline */
  -webkit-text-stroke: 0.5px rgba(0, 0, 0, 0.3);
  text-stroke: 0.5px rgba(0, 0, 0, 0.3);
  /* Combined shadows: light outline + enhanced glow */
  text-shadow:
    /* Light outline */
    -0.5px -0.5px 0 rgba(0, 0, 0, 0.2),
    0.5px -0.5px 0 rgba(0, 0, 0, 0.2),
    -0.5px 0.5px 0 rgba(0, 0, 0, 0.2),
    0.5px 0.5px 0 rgba(0, 0, 0, 0.2),
    /* Enhanced white glow with multiple layers */
    0 0 15px rgba(255, 255, 255, 0.8),
    0 0 30px rgba(255, 255, 255, 0.6),
    0 0 45px rgba(255, 255, 255, 0.4),
    0 0 60px rgba(255, 255, 255, 0.2);
}

/* Mobile and tablet optimizations */
@media (max-width: 768px) {
  .gradient-text {
    -webkit-text-stroke: 0.3px rgba(0, 0, 0, 0.3);
    text-stroke: 0.3px rgba(0, 0, 0, 0.3);
    text-shadow:
      -0.3px -0.3px 0 rgba(0, 0, 0, 0.2),
      0.3px -0.3px 0 rgba(0, 0, 0, 0.2),
      -0.3px 0.3px 0 rgba(0, 0, 0, 0.2),
      0.3px 0.3px 0 rgba(0, 0, 0, 0.2);
    line-height: 1.2;
  }

  .gradient-text.text-glow {
    -webkit-text-stroke: 0.3px rgba(0, 0, 0, 0.3);
    text-stroke: 0.3px rgba(0, 0, 0, 0.3);
    text-shadow:
      /* Light outline */
      -0.3px -0.3px 0 rgba(0, 0, 0, 0.2),
      0.3px -0.3px 0 rgba(0, 0, 0, 0.2),
      -0.3px 0.3px 0 rgba(0, 0, 0, 0.2),
      0.3px 0.3px 0 rgba(0, 0, 0, 0.2),
      /* Enhanced mobile glow */
      0 0 10px rgba(255, 255, 255, 0.7),
      0 0 20px rgba(255, 255, 255, 0.5),
      0 0 30px rgba(255, 255, 255, 0.3);
  }
}

/* Small mobile devices */
@media (max-width: 480px) {
  .gradient-text {
    -webkit-text-stroke: 0.2px rgba(0, 0, 0, 0.3);
    text-stroke: 0.2px rgba(0, 0, 0, 0.3);
    text-shadow:
      -0.2px -0.2px 0 rgba(0, 0, 0, 0.2),
      0.2px -0.2px 0 rgba(0, 0, 0, 0.2),
      -0.2px 0.2px 0 rgba(0, 0, 0, 0.2),
      0.2px 0.2px 0 rgba(0, 0, 0, 0.2);
    word-break: keep-all !important;
    white-space: nowrap !important;
    overflow-wrap: normal !important;
    font-size: 2.5rem !important;
  }

  .gradient-text.text-glow {
    -webkit-text-stroke: 1px #000000;
    text-stroke: 1px #000000;
    text-shadow:
      /* Black outline */
      -1px -1px 0 #000,
      1px -1px 0 #000,
      -1px 1px 0 #000,
      1px 1px 0 #000,
      -1px 0 0 #000,
      1px 0 0 #000,
      0 -1px 0 #000,
      0 1px 0 #000,
      /* White glow */
      0 0 6px rgba(255, 255, 255, 0.5);
  }
}

/* Professional Card Hover Effects */
.service-card, .portfolio-card {
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.service-card::before, .portfolio-card::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;
}

.service-card:hover::before, .portfolio-card:hover::before {
  left: 100%;
}

.service-card:hover, .portfolio-card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 
    0 20px 40px rgba(0, 0, 0, 0.15),
    0 10px 25px rgba(99, 102, 241, 0.2);
}

/* Footer Glass Effect */
footer {
  background: rgba(17, 24, 39, 0.8) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Mobile Menu Enhancements */
#mobileMenu {
  background: rgba(255, 255, 255, 0.2) !important;
  backdrop-filter: blur(25px) !important;
  -webkit-backdrop-filter: blur(25px) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.2) !important;
}

/* Simple Professional Welcome Banner */
#welcomeBanner {
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  border-bottom: 1px solid #e5e7eb;
}

#welcomeBanner p {
  font-size: 16px;
  letter-spacing: 0.5px;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
}

/* Responsive Welcome Banner */
@media (max-width: 768px) {
  #welcomeBanner p {
    font-size: 14px;
    padding: 0 1rem;
  }
}

/* Portfolio Grid Enhancements */
.portfolio-grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

/* Service Pricing Cards */
.pricing-highlight {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 800;
  font-size: 1.5rem;
}

/* Scroll Reveal Animation */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.6s ease;
}

.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

/* Loading Spinner */
.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid rgba(99, 102, 241, 0.2);
  border-top: 4px solid #6366f1;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Media Queries for Responsive Design */
@media (max-width: 768px) {
  .glass-morphism, .bg-white {
    background: rgba(255, 255, 255, 0.3) !important;
    backdrop-filter: blur(15px) !important;
  }

  body {
    background-size: 200% 200%;
  }

  /* Fix mobile text display */
  .text-4xl, .text-5xl, .text-6xl {
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
  }

  /* Ensure proper spacing on mobile */
  .container {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  /* Fix mobile toast positioning */
  #toastContainer {
    top: 1rem;
    right: 1rem;
    left: 1rem;
  }

  #toastContainer .transform {
    max-width: none;
  }
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
  .glass-morphism, .bg-white {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
  }
}

/* High Performance Animations */
* {
  will-change: auto;
}

/* Review Form Styling */
.star {
  transition: all 0.2s ease;
  filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.3));
}

.star:hover {
  transform: scale(1.1);
  filter: drop-shadow(0 0 5px rgba(255, 196, 0, 0.6));
}

.new-review {
  border: 2px solid rgba(34, 197, 94, 0.3);
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.05) 0%, rgba(34, 197, 94, 0.02) 100%);
  animation: slideInFromTop 0.5s ease-out;
}

@keyframes slideInFromTop {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Enhanced form styling */
#reviewForm input:focus,
#reviewForm textarea:focus {
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
  border-color: #6366f1;
}

#reviewForm textarea {
  resize: vertical;
  min-height: 100px;
}

/* Rating text styling */
#ratingText {
  font-weight: 500;
  transition: color 0.2s ease;
}

/* Scrollable Reviews Styling */
.reviews-container {
  position: relative !important;
  max-width: 100% !important;
  overflow: hidden !important;
}

.reviews-scroll {
  display: flex !important;
  gap: 1.5rem !important;
  overflow-x: auto !important;
  scroll-behavior: smooth !important;
  padding: 1rem 0 !important;
  scrollbar-width: none !important; /* Firefox */
  -ms-overflow-style: none !important; /* IE and Edge */
}

.reviews-scroll::-webkit-scrollbar {
  display: none !important; /* Chrome, Safari, Opera */
}

.review-card {
  min-width: 300px !important;
  max-width: 350px !important;
  height: auto !important;
  flex-shrink: 0 !important;
  background: white !important;
  border-radius: 0.75rem !important;
  padding: 1.5rem !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;
  border: 1px solid rgba(229, 231, 235, 1) !important;
}

.scroll-indicators {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 1rem;
}

.scroll-btn {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1.2rem;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.scroll-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(102, 126, 234, 0.4);
}

.scroll-btn:active {
  transform: translateY(0);
}

/* Toast Notifications */
#toastContainer {
  z-index: 1000;
}

@media (max-width: 768px) {
  .review-card {
    min-width: 250px;
    max-width: 280px;
  }

  .reviews-scroll {
    gap: 1rem;
  }

  #toastContainer {
    top: 1rem;
    right: 1rem;
    left: 1rem;
  }

  .toast {
    max-width: none;
  }
}

.animate-performance {
  will-change: transform, opacity;
  transform: translateZ(0);
}

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

::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.1);
}

::-webkit-scrollbar-thumb {
  background: rgba(99, 102, 241, 0.5);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(99, 102, 241, 0.7);
}

/* Floating Contact Button Animation */
@keyframes pulse-float {
  0%, 100% {
    transform: translateY(0px) scale(1);
    box-shadow: 0 4px 20px rgba(99, 102, 241, 0.4);
  }
  50% {
    transform: translateY(-5px) scale(1.05);
    box-shadow: 0 8px 30px rgba(99, 102, 241, 0.6);
  }
}

/* Business Cards Dropdown Styling */
.business-cards-dropdown {
  background: white !important;
  border: 2px solid #f97316 !important;
  box-shadow:
    0 10px 25px rgba(0, 0, 0, 0.2),
    0 5px 15px rgba(249, 115, 22, 0.3) !important;
  z-index: 1000 !important;
  animation: dropdownSlide 0.3s ease-out;
  position: absolute !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  max-height: 250px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  width: 280px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  top: 100% !important;
  margin-top: 8px !important;
}

.business-cards-dropdown.hidden {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* Ensure parent service card allows overflow */
.service-card {
  overflow: visible !important;
}

/* Custom scrollbar for dropdown */
.business-cards-dropdown::-webkit-scrollbar {
  width: 6px;
}

.business-cards-dropdown::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

.business-cards-dropdown::-webkit-scrollbar-thumb {
  background: #f97316;
  border-radius: 3px;
}

.business-cards-dropdown::-webkit-scrollbar-thumb:hover {
  background: #ea580c;
}

@keyframes dropdownSlide {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.business-card-option {
  transition: all 0.2s ease;
  cursor: pointer;
  border-radius: 6px;
  color: #374151 !important;
}

.business-card-option:hover {
  background: #fef3c7 !important;
  transform: translateX(2px);
}

.business-card-option .font-medium {
  color: #111827 !important;
  font-weight: 600 !important;
}

.business-card-option .text-xs {
  color: #6b7280 !important;
}

.business-cards-dropdown-btn {
  position: relative;
  overflow: hidden;
}

.business-cards-dropdown-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.5s;
}

.business-cards-dropdown-btn:hover::before {
  left: 100%;
}

.business-cards-dropdown-arrow {
  transition: transform 0.3s ease;
  font-size: 12px;
}

/* Section headers styling */
.business-cards-dropdown h5 {
  color: #f97316 !important;
  font-weight: bold !important;
  font-size: 14px !important;
  margin-bottom: 8px !important;
}

/* Flyers Dropdown Styling */
.flyers-dropdown {
  background: white !important;
  border: 2px solid #10b981 !important;
  box-shadow:
    0 10px 25px rgba(0, 0, 0, 0.2),
    0 5px 15px rgba(16, 185, 129, 0.3) !important;
  z-index: 1000 !important;
  animation: dropdownSlide 0.3s ease-out;
  position: absolute !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  max-height: 250px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  width: 280px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  top: 100% !important;
  margin-top: 8px !important;
}

.flyers-dropdown.hidden {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

.flyer-option {
  transition: all 0.2s ease;
  cursor: pointer;
  border-radius: 6px;
  color: #374151 !important;
}

.flyer-option:hover {
  background: #d1fae5 !important;
  transform: translateX(2px);
}

.flyer-option .font-medium {
  color: #111827 !important;
  font-weight: 600 !important;
}

.flyer-option .text-xs {
  color: #6b7280 !important;
}

.flyers-dropdown-btn {
  position: relative;
  overflow: hidden;
}

.flyers-dropdown-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.5s;
}

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

.flyers-dropdown-arrow {
  transition: transform 0.3s ease;
  font-size: 12px;
}

/* Custom scrollbar for flyers dropdown */
.flyers-dropdown::-webkit-scrollbar {
  width: 6px;
}

.flyers-dropdown::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

.flyers-dropdown::-webkit-scrollbar-thumb {
  background: #10b981;
  border-radius: 3px;
}

.flyers-dropdown::-webkit-scrollbar-thumb:hover {
  background: #059669;
}

.flyers-dropdown h5 {
  color: #10b981 !important;
  font-weight: bold !important;
  font-size: 14px !important;
  margin-bottom: 8px !important;
}

/* Brochures Dropdown Styling */
.brochures-dropdown {
  background: white !important;
  border: 2px solid #8b5cf6 !important;
  box-shadow:
    0 10px 25px rgba(0, 0, 0, 0.2),
    0 5px 15px rgba(139, 92, 246, 0.3) !important;
  z-index: 1000 !important;
  animation: dropdownSlide 0.3s ease-out;
  position: absolute !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  max-height: 250px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  width: 280px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  top: 100% !important;
  margin-top: 8px !important;
}

.brochures-dropdown.hidden {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

.brochure-option {
  transition: all 0.2s ease;
  cursor: pointer;
  border-radius: 6px;
  color: #374151 !important;
}

.brochure-option:hover {
  background: #f3e8ff !important;
  transform: translateX(2px);
}

.brochure-option .font-medium {
  color: #111827 !important;
  font-weight: 600 !important;
}

.brochure-option .text-xs {
  color: #6b7280 !important;
}

.brochures-dropdown-btn {
  position: relative;
  overflow: hidden;
}

.brochures-dropdown-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.5s;
}

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

.brochures-dropdown-arrow {
  transition: transform 0.3s ease;
  font-size: 12px;
}

/* Custom scrollbar for brochures dropdown */
.brochures-dropdown::-webkit-scrollbar {
  width: 6px;
}

.brochures-dropdown::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

.brochures-dropdown::-webkit-scrollbar-thumb {
  background: #8b5cf6;
  border-radius: 3px;
}

.brochures-dropdown::-webkit-scrollbar-thumb:hover {
  background: #7c3aed;
}

.brochures-dropdown h5 {
  color: #8b5cf6 !important;
  font-weight: bold !important;
  font-size: 14px !important;
  margin-bottom: 8px !important;
}

/* Dropdown mobile responsiveness */
@media (max-width: 768px) {
  .business-cards-dropdown, .flyers-dropdown, .brochures-dropdown {
    max-height: 200px !important;
    width: 260px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    font-size: 12px;
  }

  .business-card-option, .flyer-option, .brochure-option {
    padding: 6px !important;
  }

  .business-card-option .font-medium, .flyer-option .font-medium, .brochure-option .font-medium {
    font-size: 11px !important;
  }

  .business-card-option .text-xs, .flyer-option .text-xs, .brochure-option .text-xs {
    font-size: 10px !important;
  }

  .business-cards-dropdown h5, .flyers-dropdown h5, .brochures-dropdown h5 {
    font-size: 12px !important;
  }
}

/* Floating Contact Form Responsive */
@media (max-width: 768px) {
  #floatingContactBtn {
    top: 15px !important;
    right: 15px !important;
  }

  #floatingContactBtn > div {
    width: 50px !important;
    height: 50px !important;
  }

  #floatingContactModal > div {
    width: 95% !important;
    margin: 1rem !important;
    max-width: 400px !important;
  }

  @media (min-width: 768px) {
    #floatingContactModal > div {
      width: 420px !important;
      margin: 0 !important;
    }
  }
}

/* Order Form Services Checkbox Spacing */
#orderForm label.flex.items-center .font-medium {
  margin-right: 0.75rem;
}

#orderForm label.flex.items-center span:not(.font-medium) {
  white-space: pre;
}