html {
  -webkit-text-size-adjust: 100%; /* Safari */
  text-size-adjust: 100%; /* Standard, Chrome, Edge, Firefox */
}


/* Visually hide an element while keeping it accessible to screen readers */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
  }
  
  /* Fade-in Animation */
  .fade-in {
    opacity: 0;
    transition: opacity 1s ease-in-out;
  }
  
  .fade-in.active {
    opacity: 1;
  }
  
  /* Gradient text highlight */
  .highlight {
      background-clip: text;
      -webkit-background-clip: text; /* Vendor prefix for compatibility */
      color: transparent; /* Fallback for browsers that don't support -webkit-text-fill-color */
      background-image: linear-gradient(to right, #f472b6, #f22ff9); /* Tailwind: rose-400, sky-400 */
  }
  
  /* Pulsating text animation */
  .pulsating-text {
    animation: pulsate 1s infinite alternate; /* 1s duration, infinite loop, alternate direction */
  }
  
  @keyframes pulsate {
    0% {
        opacity: 1;
        transform: scale(1);
    }
    100% {
        opacity: 0.7; /* Adjusted opacity for subtlety */
        transform: scale(1.05); /* Adjusted scale for subtlety */
    }
  }
  
  /* Optional: Style adjustments for dark mode input if needed */
  /* Example: Ensure text color is readable in dark mode if default browser styles interfere */
  /*
  .dark input[type="email"] {
      color: #ffffff; 
  }
  */
  
  /* Ensure sufficient contrast for placeholder text in dark mode */
  .dark input::placeholder { /* General placeholder for dark mode */
      color: #94a3b8; /* Tailwind slate-400 */
  }

  #testimonial-carousel {
    transition: height 0.3s ease-in-out; /* Optional: if you want to animate the container height */
  }
  
  .carousel-slide {
    display: none;  /* Initially hide all slides */
    opacity: 0;      /* Start with 0 opacity for transition */
    transition: opacity 0.3s ease-in-out; /* Smooth fade transition */
  }
  
  .carousel-slide.active-slide {
    display: block; /* Show the active slide */
    opacity: 1;      /* Fade in the active slide */
  }
  
  .dot {
    height: 12px;
    width: 12px;
    border-radius: 50%;
    background-color: #cbd5e1; /* Tailwind slate-300 */
    cursor: pointer;
    transition: background-color 0.3s ease;
  }
  
  .dot.active {
    background-color: #f472b6; /* Tailwind rose-400 */
  }
  .dark .dot.active {
    background-color: #fda4af; /* Tailwind rose-300 for dark mode active dot */
  }
  
  /* Add to style.css for smoother button/link transitions */
  a, button {
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
  }
  /* Example hover for a generic button */
  .my-custom-button:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 8px rgba(0,0,0,0.15);
  }
  
  /* Example for card hover effect in style.css */
  .service-card { /* Add this class to your service divs */
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
  }
  .service-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* Tailwind's shadow-lg */
  }
  
  /* Example for icon container hover in style.css */
  .service-icon-container { /* Add this class to the div wrapping the SVG icon */
    transition: transform 0.3s ease;
  }
  .service-icon-container:hover {
    transform: scale(1.1);
  }

  /* Styling for feature cards (similar to service-card) */
  .feature-card {
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
  }
  .feature-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* Tailwind's shadow-lg */
  }

  .dark .feature-card {
    background-color: #1f2937; /* Tailwind slate-800 */
    color: #f8fafc; /* Tailwind slate-50 */
  }

  /* Removed Hero Section Animated Background styles */

  /* Styles for Plus Signs */
  .plus-sign {
    position: absolute;
    font-size: 1.5rem; /* Adjust size as needed */
    color: #f8c4f2; /* Tailwind slate-200 (light grey) */
    opacity: 0.5;   /* Adjust opacity as needed */
    user-select: none; /* Prevent text selection */
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10+ */
    transition: opacity 0.5s ease-in-out; /* Smooth fading */
  }

  .dark .plus-sign {
    color: #494f57; /* Tailwind slate-600 (darker grey for dark mode) */
    opacity: 0.3;
  }

  /* For chat bubble animation */
  .chat-bubble.visible {
    opacity: 1 !important;
    transform: translateY(0) !important;
  }


  .billing-item.visible, .profile-item.visible { /* These can be removed if not used elsewhere, kept for now if chat animation uses .visible */
    opacity: 1 !important;
    transform: translateY(0) !important;
  }

html {
  -webkit-text-size-adjust: 100%; /* Safari */
  text-size-adjust: 100%; /* Standard, Chrome, Edge, Firefox */
}

/* Visually hide an element while keeping it accessible to screen readers */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
  }
  
  /* Fade-in Animation */
  .fade-in {
    opacity: 0;
    transition: opacity 1s ease-in-out;
  }
  
  .fade-in.active {
    opacity: 1;
  }
  
  /* Gradient text highlight */
  .highlight {
      background-clip: text;
      -webkit-background-clip: text; /* Vendor prefix for compatibility */
      color: transparent; /* Fallback for browsers that don't support -webkit-text-fill-color */
      background-image: linear-gradient(to right, #f472b6, #f22ff9); /* Tailwind: rose-400, sky-400 */
  }
  
  /* Pulsating text animation */
  .pulsating-text {
    animation: pulsate 1s infinite alternate; /* 1s duration, infinite loop, alternate direction */
  }
  
  @keyframes pulsate {
    0% {
        opacity: 1;
        transform: scale(1);
    }
    100% {
        opacity: 0.7; /* Adjusted opacity for subtlety */
        transform: scale(1.05); /* Adjusted scale for subtlety */
    }
  }
  
  /* Optional: Style adjustments for dark mode input if needed */
  /* Example: Ensure text color is readable in dark mode if default browser styles interfere */
  /*
  .dark input[type="email"] {
      color: #ffffff; 
  }
  */
  
  /* Ensure sufficient contrast for placeholder text in dark mode */
  .dark input::placeholder { /* General placeholder for dark mode */
      color: #94a3b8; /* Tailwind slate-400 */
  }

  #testimonial-carousel {
    transition: height 0.3s ease-in-out; /* Optional: if you want to animate the container height */
  }
  
  .carousel-slide {
    display: none;  /* Initially hide all slides */
    opacity: 0;      /* Start with 0 opacity for transition */
    transition: opacity 0.3s ease-in-out; /* Smooth fade transition */
  }
  
  .carousel-slide.active-slide {
    display: block; /* Show the active slide */
    opacity: 1;      /* Fade in the active slide */
  }
  
  .dot {
    height: 12px;
    width: 12px;
    border-radius: 50%;
    background-color: #cbd5e1; /* Tailwind slate-300 */
    cursor: pointer;
    transition: background-color 0.3s ease;
  }
  
  .dot.active {
    background-color: #f472b6; /* Tailwind rose-400 */
  }
  .dark .dot.active {
    background-color: #fda4af; /* Tailwind rose-300 for dark mode active dot */
  }
  
  /* Add to style.css for smoother button/link transitions */
  a, button {
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
  }
  /* Example hover for a generic button */
  .my-custom-button:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 8px rgba(0,0,0,0.15);
  }
  
  /* Example for card hover effect in style.css */
  .service-card { /* Add this class to your service divs */
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
  }
  .service-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* Tailwind's shadow-lg */
  }
  
  /* Example for icon container hover in style.css */
  .service-icon-container { /* Add this class to the div wrapping the SVG icon */
    transition: transform 0.3s ease;
  }
  .service-icon-container:hover {
    transform: scale(1.1);
  }

  /* Styling for feature cards (similar to service-card) */
  .feature-card {
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
  }
  .feature-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* Tailwind's shadow-lg */
  }

  /* Removed Hero Section Animated Background styles */

  /* Styles for Plus Signs */
  .plus-sign {
    position: absolute;
    font-size: 1.5rem; /* Adjust size as needed */
    color: #f8c4f2; /* Tailwind slate-200 (light grey) */
    opacity: 0.5;   /* Adjust opacity as needed */
    user-select: none; /* Prevent text selection */
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10+ */
    transition: opacity 0.5s ease-in-out; /* Smooth fading */
  }

  .dark .plus-sign {
    color: #475569; /* Tailwind slate-600 (darker grey for dark mode) */
    opacity: 0.3;
  }

  /* For chat bubble animation */
  .chat-bubble.visible {
    opacity: 1 !important;
    transform: translateY(0) !important;
  }


  .billing-item.visible, .profile-item.visible { /* These can be removed if not used elsewhere, kept for now if chat animation uses .visible */
    opacity: 1 !important;
    transform: translateY(0) !important;
  }



/* Scroll to Top Button Specific Styles (if Tailwind classes aren't enough or for overrides) */
#scrollToTopBtn {
  z-index: 100; /* Ensure it's above most other content */
  /* Tailwind classes handle most styling, but you can add more here if needed */
  /* For example, a specific transition if not covered by global button styles */
}