/* =====================================================
  Sericsoft Stylesheet
  Structure & Guidelines
  - Consistent section headers for quick navigation
  - Brand variables centralized in :root
  - Components grouped (buttons, cards, dropdowns)
  - Animations at bottom with utility classes
  - Minimal overrides; prefer Tailwind utilities in HTML
===================================================== */

/* ========================================
  1) Billing / Pricing Toggles (Components)
  ======================================== */
/* Billing period toggle styles */
.billing-toggle {
  background: #f8fafc;
  color: #1f2937;
  border: 1px solid #e5e7eb;
  transition: background 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
  position: relative;
  z-index: 1;
}
.billing-toggle:hover {
  background: #e0f2fe;
  border-color: #e5e7eb; /* keep border stable on hover */
}
.billing-toggle:active {
  background: #e0f2fe !important;
  color: #0f172a !important;
  border-color: #e5e7eb !important; /* keep border stable on press */
}
.billing-toggle .save-badge {
  color: #0f766e;
  font-size: 0.75rem;
  font-weight: 700;
}
.billing-toggle-active .save-badge {
  color: #e0f2fe;
}
.billing-toggle-active {
  background: #00A8CE !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 8px 24px rgba(255, 166, 41, 0.2);
  z-index: 2;
}
.billing-toggle-active:hover,
.billing-toggle-active:active {
  border: none !important; /* keep borderless when active */
}
.billing-toggle-active:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 168, 206, 0.2) !important;
  background: #00A8CE !important;
}
/* Currency toggle default (inactive) */
.currency-toggle {
  background: #f9fafb;
  color: #374151;
  border: 1px solid #e5e7eb;
  transition: background 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.currency-toggle:hover {
  background: #e0f2fe;
  color: #111827;
  border-color: #e5e7eb; /* keep border stable on hover */
}
.currency-toggle:focus-visible {
  outline: none;
}
/* Active state (only one at a time) */
.currency-toggle-active {
  background: linear-gradient(135deg, #FFA629, #ffb347) !important;
  color: #fff !important;
  border: none !important;
}

/* Pricing toggle (blue stays unaffected) */
.pricing-toggle-active {
  background: #00A8CE !important;
  color: #fff !important;
  border-color: #00A8CE !important;
}

/* ========================================
  2) Blog Search (Forms)
  ======================================== */
/* Blog search bar custom styles */
.blog-search-input {
  border: 1.5px solid #ddd;
  border-radius: 0.5rem 0 0 0.5rem;
  transition: border-color 0.2s;
}
.blog-search-input:focus,
.blog-search-input:hover {
  border-color: #00A8CE;
}

.blog-search-btn {
  background: #00A8CE;
  color: #fff;
  border-radius: 0 0.5rem 0.5rem 0;
  transition: background 0.2s;
}
.blog-search-btn:hover {
  background: #00A8CE;
  color: #fff;
}
/* ========================================
  3) Theme Variables & Brand Utilities
  ======================================== */
:root {
      --brand-teal: #00A8CE;
      --brand-orange: #FFA629;
      --brand-magenta: #7A2048;
      --brand-dark: #0E2033;
      --muted-gray: #6B7280;
    }

    /* Brand utility helpers */
    .brand-bg { background-color: var(--brand-teal); }

    /* Login button custom style */
    /* Login button custom style (header) */
    .login-btn {
      color: #00A8CE !important;
      border-color: #00A8CE !important;
      transition: color 0.2s, border-color 0.2s, background 0.2s;
    }
    .login-btn:hover, .login-btn:focus {
      color: #00A8CE !important;
      border-color: #00A8CE !important;
      background: #fff !important;
    }
    .brand-text { color: var(--brand-teal); }
    .learn-more {
      color: #00A8CE;
      transition: color 0.2s;
    }
    .learn-more:hover {
      color: #00A8CE;
    }
    .audience-typing { color: #FFA629; }
    /* Homepage hero tags */
    .tag {
      background: none;
      color: #00A8CE;
      border: 1.5px solid #00A8CE;
      transition: color 0.2s, border-color 0.2s;
    }
    .tag:hover {
      color: #00A8CE;
      border-color: #00A8CE;
      background: none;
    }
    .accent-bg { background-color: var(--brand-orange); }
    .accent-2-text { color: var(--brand-magenta); }
    .dark-text { color: var(--brand-dark); }
    .muted { color: var(--muted-gray); }

/* ========================================
  4) Misc Utilities
  ======================================== */
@keyframes flicker {
      0%,100%{ opacity:1 }
      50%{ opacity:0.2 }
    }
  


  /* ========================================
    5) Cards (Service)
    ======================================== */
    .service-card {
    background: #fff;
    border-radius: 1rem;
    padding: 1.5rem;
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);
    transition: all 0.3s ease;
  }
  .service-card:hover {
    box-shadow: 0 8px 20px rgba(0,0,0,0.12);
    transform: translateY(-3px);
  }
  .service-card h4 {
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
    color: #1f2937;
  }
  .service-card p {
    color: #4b5563;
    margin-bottom: 1rem;
  }
  .service-card a {
    color: #00A8CE;
    font-weight: 500;
    transition: color 0.2s ease;
  }
  .service-card a:hover {
    color: #00A8CE;
  }
 
  .category-btn.active-category {
    background-color: #f3f4f6;
    border-left: 3px solid #00A8CE;
  }
  
  .service-card {
    transition: all 0.2s ease;
  }
  
  .service-card:hover {
    transform: translateY(-4px);
  }
  
  .category-section {
    animation: fadeIn 0.5s ease-out;
  }
  
  @keyframes fadeIn {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  .line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

/* ========================================
   6) Dropdowns (Membership selector)
   ======================================== */
 /* Dropdown container */
  .options {
    display: none;
    position: absolute;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 0.5rem;
    margin-top: 0.5rem;
    width: 100%;
    max-height: 220px;
    overflow-y: auto;
    z-index: 50;
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);
  }

  /* Show when active */
  .options.active {
    display: block;
  }

  /* Search box */
  .search-box {
    width: 100%;
    border: none;
    border-bottom: 1px solid #ddd;
    padding: 8px 10px;
    outline: none;
    font-size: 14px;
  }

  /* Options list */
  .options ol {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  /* Each option */
  .options .option {
    transition: background 0.2s;
  }
  .options .option:hover {
    background: #f9fafb; /* Tailwind's gray-50 */
  }

  /* Selected box */
  .selected-option {
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid #ddd;
    padding: 10px 12px;
    border-radius: 0.5rem;
    cursor: pointer;
    position: relative;
  } 

  /* ========================================
    7) Footer Utilities
    ======================================== */
     .hover-lift {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }
  
  .hover-lift:hover {
    transform: translateY(-2px);
  }
  
  .expertise-toggle {
    transition: all 0.3s ease;
  }
  
  .expertise-toggle:hover {
    color: #00A8CE;
  }
  
  .expertise-content {
    transition: all 0.3s ease;
  }
/* ========================================
  8) Base HTML
  ======================================== */
html {
    scroll-behavior: smooth;
    font-family: 'Montserrat', 'Poppins', Arial, sans-serif;
  }
  .chat-team-btn:hover {
  background: #00A8CE !important;
  color: #fff !important;
}
.flex.items-center.justify-between.border:hover .question-btn-link,
.flex.items-center.justify-between.border:hover .question-btn-link + .ml-2 {
  color: #00A8CE !important;
}
/* ========================================
   9) Animation Utilities
   ======================================== */
 /* Animation Styles */

  .fade-in, .slide-up {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
  }
  .fade-in.visible, .slide-up.visible {
    opacity: 1;
    transform: translateY(0);
  }
  .delay-200 { transition-delay: 0.2s; }
  .delay-400 { transition-delay: 0.4s; }
  .delay-600 { transition-delay: 0.6s; }

    /* ========================================
      10) Buttons (Membership & Newsletter)
      ======================================== */
    /* Brand button style for all membership buttons */
  .membership-btn, .newsletter-btn {
    background: #00A8CE !important;
    color: #fff !important;
    border: none;
    transition: background 0.2s, color 0.2s;
  }
  .membership-btn:hover, .newsletter-btn:hover {
    background: #00A8CE !important;
    color: #fff !important;
  }

  /* Newsletter subscribe button hover */
  .subscribe-now-btn {
    color: #00A8CE;
    background: #fff;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
  }
  .subscribe-now-btn:hover {
    background: #FFA629;
    color: #fff;
    transform: translateY(-1px);
  }

    /* ========================================
      11) Responsive Tweaks
      ======================================== */
    /* Mobile navigation spacing and hover effects */
  @media (max-width: 768px) {
    .login-btn {
      margin-right: 1rem;
    }
    
    #menuBtn {
      margin-left: 0.5rem;
    }
  }

/* ========================================
  12) Index.html Specific Styles
  Animations and custom styles for homepage
  ======================================== */

/* Fade-in animation for hero elements */
@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Fade-in-up animation with delay support */
@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Apply fade-in animation */
.animate-fade-in {
  animation: fade-in 1s ease-out;
}

/* Apply fade-in-up animation */
.animate-fade-in-up {
  animation: fade-in-up 0.8s ease-out forwards;
  opacity: 0;
}

/* Animation delay classes */
.delay-300 {
  animation-delay: 300ms;
}

.delay-500 {
  animation-delay: 500ms;
}

.delay-700 {
  animation-delay: 700ms;
}

.delay-1000 {
  animation-delay: 1000ms;
}

/* Typing cursor blink animation (hero) */
.typing-cursor {
  animation: blink 1s infinite;
  margin-left: 2px;
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* Text clamp utility for blog cards */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Smooth transitions for all card types (hover lift) */
.feature-card, .product-card, .achievement-card, .blog-card {
  transition: all 0.3s ease;
}

/* Featured/Popular membership card */
.membership-tier.featured {
  border-color: #00A8CE !important;
  box-shadow: 0 0 0 2px rgba(0, 168, 206, 0.1);
}

.membership-tier.featured:hover {
  box-shadow: 0 12px 32px rgba(0, 168, 206, 0.2);
}

/* ========================================
  13) Index Helpers (Hover/Group utilities)
  - Keep HTML lean; utilities defined here
  ======================================== */
/* Show block elements on parent .group hover */
.group:hover .group-hover\:block {
  display: block;
}

/* Subtle lift effect for hoverable elements */
.hover-lift {
  transition: transform 0.2s ease;
}
.hover-lift:hover {
  transform: translateY(-2px);
}