.main-gradient {
  background: linear-gradient(90deg, #0a3b88 0%, #4d8def 100%);
}

.gradient {
  background: #fff;
  color: #000 !important;
}
</style > <style > .rotating-text {
  font-size: 2.5rem;
  font-family: "Courier New", Courier, monospace;
  font-weight: bold;
  border-right: 2px solid #000;
  white-space: nowrap;
  overflow: hidden;
  min-height: 3rem;
}

@media (max-width: 768px) {
  .rotating-text {
    font-size: 2rem;
    text-align: center;
    display: block;
    margin: 0 auto;
  }
}

@keyframes blink {
  0%,
  50%,
  100% {
    border-color: black;
  }

  25%,
  75% {
    border-color: transparent;
  }
}

/* AUTOCALLS.AI STYLE SCROLL EFFECTS */

/* Base scroll reveal animations */
.scroll-reveal {
  opacity: 0;
  transform: translateY(60px);
  transition: all 0.8s cubic-bezier(0.25, 0.25, 0.25, 1);
  will-change: transform, opacity;
}

.scroll-reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered animations for children */
.stagger-children > * {
  opacity: 0;
  transform: translateY(40px);
  transition: all 0.6s cubic-bezier(0.25, 0.25, 0.25, 1);
  transition-delay: 0s;
}

.stagger-children.revealed > *:nth-child(1) {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.1s;
}

.stagger-children.revealed > *:nth-child(2) {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.2s;
}

.stagger-children.revealed > *:nth-child(3) {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.3s;
}

.stagger-children.revealed > *:nth-child(4) {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.4s;
}

.stagger-children.revealed > *:nth-child(5) {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.5s;
}

.stagger-children.revealed > *:nth-child(6) {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.6s;
}

/* Slide in from left */
.slide-in-left {
  opacity: 0;
  transform: translateX(-60px);
  transition: all 0.8s cubic-bezier(0.25, 0.25, 0.25, 1);
}

.slide-in-left.revealed {
  opacity: 1;
  transform: translateX(0);
}

/* Slide in from right */
.slide-in-right {
  opacity: 0;
  transform: translateX(60px);
  transition: all 0.8s cubic-bezier(0.25, 0.25, 0.25, 1);
}

.slide-in-right.revealed {
  opacity: 1;
  transform: translateX(0);
}

/* Scale up animation */
.scale-up {
  opacity: 0;
  transform: scale(0.8);
  transition: all 0.8s cubic-bezier(0.25, 0.25, 0.25, 1);
}

.scale-up.revealed {
  opacity: 1;
  transform: scale(1);
}

/* Floating animation for icons and images */
.float-element {
  animation: gentle-float 6s ease-in-out infinite;
}

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

/* Progressive text reveal */
.text-reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.6s cubic-bezier(0.25, 0.25, 0.25, 1);
}

.text-reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Button hover effects like AutoCalls.ai */
.btn-autocalls {
  position: relative;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.25, 0.25, 0.25, 1);
  transform: translateZ(0);
}

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

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

.btn-autocalls:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 10px 30px rgba(10, 59, 136, 0.3);
}

/* Card animations */
.card-reveal {
  opacity: 0;
  transform: translateY(50px) rotateX(10deg);
  transition: all 0.8s cubic-bezier(0.25, 0.25, 0.25, 1);
  transform-style: preserve-3d;
}

.card-reveal.revealed {
  opacity: 1;
  transform: translateY(0) rotateX(0deg);
}

/* Image parallax effect */
.img-parallax {
  transform: translateY(0px);
  transition: transform 0.1s ease-out;
}

/* Section background animations */
.bg-reveal {
  position: relative;
  overflow: hidden;
}

.bg-reveal::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(77, 141, 239, 0.1), transparent);
  transition: left 1.2s cubic-bezier(0.25, 0.25, 0.25, 1);
  z-index: 1;
}

.bg-reveal.revealed::before {
  left: 100%;
}

/* Counter animation */
.counter {
  font-weight: bold;
  transition: all 0.3s ease;
}

/* Icon bounce effect */
.icon-bounce {
  transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.icon-bounce.revealed {
  animation: bounce-in 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes bounce-in {
  0% {
    transform: scale(0) rotate(-180deg);
    opacity: 0;
  }
  50% {
    transform: scale(1.2) rotate(-90deg);
    opacity: 0.8;
  }
  100% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
}

/* Progress bar animation */
.progress-bar {
  width: 0%;
  transition: width 1.5s cubic-bezier(0.25, 0.25, 0.25, 1);
}

.progress-bar.revealed {
  width: 100%;
}

/* Smooth scroll behavior */
html {
  scroll-behavior: smooth;
}

/* Enhanced fade effects for specific elements */
.hero-content {
  opacity: 0;
  transform: translateY(80px) scale(0.95);
  transition: all 1s cubic-bezier(0.25, 0.25, 0.25, 1);
}

.hero-content.revealed {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Mobile optimizations */
@media (max-width: 768px) {
  .scroll-reveal,
  .slide-in-left,
  .slide-in-right {
    transform: translateY(30px);
  }

  .card-reveal {
    transform: translateY(30px);
  }

  .stagger-children > * {
    transform: translateY(20px);
  }
}

/* Reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  .scroll-reveal,
  .slide-in-left,
  .slide-in-right,
  .scale-up,
  .card-reveal,
  .text-reveal,
  .stagger-children > *,
  .hero-content {
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }

  .float-element {
    animation: none !important;
  }
}
/* Dropdown Menu Styles */
.dropdown {
  position: relative;
}

.dropdown > a {
  padding-bottom: 10px !important;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: white;
  min-width: 180px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1000;
  border-radius: 8px;
  top: 100%;
  left: 0;
  padding: 8px 0;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  transition: background-color 0.2s ease;
}

.dropdown-content a:hover:not(.cursor-not-allowed) {
  background-color: #f3f4f6;
}

.dropdown:hover .dropdown-content {
  display: block;
}

/* Navigation link hover effects */
#nav-content ul li a {
  border-radius: 9999px;
  transition: all 0.3s ease-in-out;
}

#nav-content ul li a:hover {
  background-color: rgba(255, 255, 255, 0.9);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transform: scale(1.05);
}

#nav-content ul li a.active {
  background-color: rgba(255, 255, 255, 0.9);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transform: scale(1.05);
}

/* Remove hover effects from dropdown items */
.dropdown-content a:hover {
  background-color: #f3f4f6;
  box-shadow: none !important;
  transform: none !important;
  border-radius: 8px !important;
}

/* When scrolled, change hover background */
#header.bg-white #nav-content ul li a:hover {
  background-color: #f3f4f6;
}

/* Active page styling - same as hover */
.nav-link.active {
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 9999px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transform: scale(1.05);
}

#header.bg-white .nav-link.active {
  background-color: #f3f4f6;
}

@media (max-width: 1024px) {
  .dropdown-content {
    position: static;
    box-shadow: none;
    background-color: transparent;
    margin-top: 0;
  }

  .dropdown:hover .dropdown-content,
  .dropdown .dropdown-content {
    display: none;
  }

  .dropdown.mobile-open .dropdown-content {
    display: block;
  }
}

{{/*  inbound page specific styles */}}

.packages {
      display: flex;
      gap: 30px;
      justify-content: center;
      align-items: stretch;
  }

  .package {
      background: #ffffff;
      border: 2px solid #e8e8e8;
      border-radius: 12px;
      padding: 38px 30px;
      flex: 1;
      max-width: 360px;
      display: flex;
      flex-direction: column;
      position: relative;
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.06);
      transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  }

  .package:hover {
      transform: translateY(-5px);
      box-shadow: 0 18px 40px rgba(0, 0, 0, 0.10);
  }

  /* PROFESSIONAL PLAN HIGHLIGHTED IN BLUE WITH 50% OPACITY */
  .package.professional {
      border: 3px solid rgba(52, 152, 219, 0.5) !important;
      /* 50% opacity border */
      background: linear-gradient(135deg, rgba(248, 251, 255, 0.5) 0%, rgba(240, 249, 255, 0.5) 100%);
      /* 50% opacity background */
      box-shadow: 0 15px 35px rgba(52, 152, 219, 0.125), 0 5px 15px rgba(52, 152, 219, 0.05) !important;
      /* 50% opacity shadows */
      position: relative;
      z-index: 2;
      transform: scale(1.02);
  }

  .package.professional:hover {
      transform: translateY(-8px) scale(1.02);
      box-shadow: 0 20px 45px rgba(52, 152, 219, 0.175), 0 8px 20px rgba(52, 152, 219, 0.075) !important;
      /* 50% opacity hover shadows */
  }

  /* Add blue glow effect with 50% opacity */
  .package.professional::before {
      content: '';
      position: absolute;
      top: -3px;
      left: -3px;
      right: -3px;
      bottom: -3px;
      background: linear-gradient(45deg, rgba(52, 152, 219, 0.5), rgba(41, 128, 185, 0.5), rgba(52, 152, 219, 0.5));
      /* 50% opacity gradient */
      border-radius: 15px;
      z-index: -1;
      opacity: 0.075;
      /* Reduced from 0.15 to 0.075 (50% of original) */
      animation: pulse 3s infinite alternate;
  }

  @keyframes pulse {
      0% {
          opacity: 0.075;
      }

      /* 50% of original 0.15 */
      100% {
          opacity: 0.125;
      }

      /* 50% of original 0.25 */
  }

  .package-header {
      text-align: center;
      margin-bottom: 16px;
  }

  .package-icon {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      margin: 0 auto 18px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      color: #fff;
      font-weight: 700;
  }

  .essential .package-icon {
      background: #27ae60;
  }

  .professional .package-icon {
      background: rgba(52, 152, 219, 0.5) !important;
      /* 50% opacity icon background */
      box-shadow: 0 8px 20px rgba(52, 152, 219, 0.2);
      /* 50% opacity shadow */
  }

  .premium .package-icon {
      background: #660066;
  }

  .package h2 {
      font-size: 1.85rem;
      font-weight: 700;
      color: #2c3e50;
      margin-bottom: 6px;
  }

  .professional h2 {
      color: #2c3e50;
      position: relative;
  }

  .package-tagline {
      color: #7f8c8d;
      margin-bottom: 14px;
      font-weight: 500;
  }

  .professional .package-tagline {
      color: rgba(52, 152, 219, 0.7);
      /* 70% opacity for better readability */
      font-weight: 600;
  }

  .pricing-container {
      text-align: center;
      margin-bottom: 12px;
  }

  .monthly-price {
      font-size: 2rem;
      font-weight: 800;
      color: #2c3e50;
  }

  .professional .monthly-price {
      color: rgba(52, 152, 219, 0.8);
      /* 80% opacity for better readability */
      text-shadow: 0 2px 4px rgba(52, 152, 219, 0.1);
      /* 50% opacity shadow */
  }

  .yearly-option {
      margin-top: 8px;
      display: inline-flex;
      align-items: center;
      background: linear-gradient(135deg, #27ae60, #2ecc71);
      color: #fff;
      padding: 7px 12px;
      border-radius: 999px;
      font-size: 0.8rem;
      font-weight: 700;

/* Fade-in Animation Styles */
.fade-in-section {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

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

/* Staggered fade-in for children */
.fade-in-section .grid > * {
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

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

/* Add delay for staggered effect */
.fade-in-section.visible .grid > *:nth-child(1) { transition-delay: 0.1s; }
.fade-in-section.visible .grid > *:nth-child(2) { transition-delay: 0.2s; }
.fade-in-section.visible .grid > *:nth-child(3) { transition-delay: 0.3s; }
.fade-in-section.visible .grid > *:nth-child(4) { transition-delay: 0.4s; }
.fade-in-section.visible .grid > *:nth-child(5) { transition-delay: 0.5s; }
.fade-in-section.visible .grid > *:nth-child(6) { transition-delay: 0.6s; }

/* Modern card hover effects */
.hover-lift {
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.hover-lift:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

/* Gradient text effect */
.gradient-text {
  background: linear-gradient(90deg, #0a3b88 0%, #4d8def 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Button animations */
.btn-modern {
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

.btn-modern::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-modern:hover::before {
  left: 100%;
}

/* Icon animations */
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
}

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

/* Responsive improvements */
@media (max-width: 768px) {
  .fade-in-section {
    transform: translateY(20px);
  }

  .fade-in-section .grid > * {
    transform: translateY(15px);
  }
}

/* Loading states */
.loading-shimmer {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 2s infinite;
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}      box-shadow: 0 8px 16px rgba(39, 174, 96, 0.22);
      white-space: nowrap;
  }

  .professional .yearly-option {
      background: linear-gradient(135deg, rgba(52, 152, 219, 0.5), rgba(41, 128, 185, 0.5)) !important;
      /* 50% opacity gradient */
      box-shadow: 0 8px 16px rgba(52, 152, 219, 0.15) !important;
      /* 50% opacity shadow */
  }

  .package-description {
      text-align: center;
      font-size: 0.95rem;
      margin: 12px 0 18px;
      color: #5a6c7d;
      line-height: 1.6;
  }

  .professional .package-description {
      color: rgba(52, 152, 219, 0.7);
      /* 70% opacity for better readability */
      font-weight: 500;
  }

  /* Features: remove boldness */
  .features-list {
      list-style: none;
      flex-grow: 1;
      margin-top: 6px;
  }

  .features-list li {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      margin-bottom: 12px;
      font-size: 0.95rem;
      color: #2f3b47;
      font-weight: 400;
  }

  .feature-icon {
      width: 22px;
      height: 22px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      font-weight: 800;
      color: #fff;
      flex-shrink: 0;
      margin-top: 2px;
      background: #27ae60;
  }

  .professional .feature-icon {
      background: rgba(52, 152, 219, 0.5) !important;
      /* 50% opacity icon */
      box-shadow: 0 4px 8px rgba(52, 152, 219, 0.15);
      /* 50% opacity shadow */
  }

  /* Feature blocks (title + subitems) - no bold, tight spacing */
  .feature-block {
      display: flex;
      flex-direction: column;
      gap: 2px;
  }

  .feature-title {
      font-weight: 400;
      /* removed bold */
      color: #2c3e50;
      line-height: 1.2;
  }

  .feature-sublist {
      list-style: none;
      margin: 0;
      /* no extra spacing */
      padding: 0;
      /* no extra spacing */
      display: flex;
      flex-direction: column;
      gap: 0;
      /* no spaces between subcategories */
  }

  .feature-subitem {
      color: #5a6c7d;
      font-size: 0.9rem;
      line-height: 1.25;
      display: flex;
      align-items: flex-start;
      gap: 8px;
      margin: 0;
      /* no extra spacing */
      padding: 0;
      /* no extra spacing */
  }

  .sub-bullet {
      width: 18px;
      flex-shrink: 0;
      display: inline-flex;
      justify-content: center;
      color: #9aa6b2;
      font-weight: 900;
      line-height: 1.25;
  }

  /* Most Popular badge – top right of Professional plan - CHANGED TO RED */
  .corner-badge {
      position: absolute;
      top: 14px;
      right: 14px;
      background: #e74c3c;
      /* RED background */
      color: #fff;
      font-size: 0.7rem;
      font-weight: 700;
      padding: 6px 12px;
      border-radius: 999px;
      letter-spacing: 0.6px;
      text-transform: uppercase;
      box-shadow: 0 6px 14px rgba(231, 76, 60, 0.35);
      /* RED shadow */
  }

  .professional .corner-badge {
      background: linear-gradient(135deg, #e74c3c, #c0392b) !important;
      /* RED gradient */
      box-shadow: 0 6px 18px rgba(231, 76, 60, 0.45) !important;
      /* RED shadow */
      animation: badgePulse 2s infinite alternate;
  }

  @keyframes badgePulse {
      0% {
          transform: scale(1);
      }

      100% {
          transform: scale(1.05);
      }
  }

  /* CTA row pinned and consistent */
  .cta-row {
      margin-top: 26px;
      display: flex;
      justify-content: center;
  }

  .package-cta {
      width: 100%;
      padding: 15px 14px;
      border: none;
      color: #fff;
      font-size: 1rem;
      font-weight: 800;
      border-radius: 10px;
      cursor: pointer;
      transition: filter 0.2s ease, transform 0.12s ease, box-shadow 0.2s ease;
  }

  .package-cta:hover {
      filter: brightness(0.95);
  }

  .package-cta:active {
      transform: translateY(1px);
  }

  .essential .package-cta {
      background: #27ae60;
  }

  .professional .package-cta {
      background: rgba(52, 152, 219, 0.5) !important;
      /* 50% opacity blue */
      box-shadow: 0 8px 20px rgba(52, 152, 219, 0.2);
      /* 50% opacity shadow */
  }

  .professional .package-cta:hover {
      box-shadow: 0 10px 25px rgba(52, 152, 219, 0.25);
      /* 50% opacity shadow */
  }

  .premium .package-cta {
      background: #660066;
  }

  /* Flexibility Option Style */
  .flexibility-option {
      text-align: center;
      margin-top: 60px;
      padding: 20px;
      background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
      border-radius: 12px;
      border-left: 4px solid #e04710;
      max-width: 800px;
      margin-left: auto;
      margin-right: auto;
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  }

  .flexibility-option p {
      font-size: 1.05rem;
      color: #2c3e50;
      font-weight: 600;
      line-height: 1.5;
      margin: 0;
  }

  .flexibility-option span {
      color: #27ae60;
      font-weight: 700;
  }

  @media (max-width: 968px) {
      .packages {
          flex-direction: column;
          align-items: center;
      }

      .package {
          max-width: 520px;
          width: 100%;
      }

      .package.professional {
          transform: none;
      }

      .package.professional:hover {
          transform: translateY(-5px);
      }

      .flexibility-option {
          margin-top: 40px;
          padding: 18px;
      }
  }

  @media (max-width: 768px) {

      .header h1 {
          font-size: 2rem;
      }

      .package {
          padding: 30px 24px;
      }

      .header-logo {
          max-height: 60px;
          margin-bottom: 15px;
      }

      .flexibility-option {
          margin-top: 30px;
          padding: 16px;
      }

      .flexibility-option p {
          font-size: 0.95rem;
      }
      .fill-current{
        fill: #fff;
        stroke: #fff;
      }
  }