/*
 Theme Name:   GeneratePress Child
 Theme URI:    https://generatepress.com
 Description:  Default GeneratePress child theme
 Author:       Tom Usborne
 Author URI:   https://tomusborne.com
 Template:     generatepress
 Version:      0.1
*/

/* ==========================================================================
   #GENERAL LAYOUT ADJUSTMENTS
   ========================================================================== */
/* div {
  border: 1px solid rgb(255, 231, 231) !important;
  position: relative;
} */

html, body {
  scroll-behavior: auto;
}

body {
  font-family: ui-sans-serif, system-ui, sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.bg-gradient-to-br-from-primary-20-to-transparent {
    background-image: linear-gradient(to bottom right, rgba(74, 160, 74, 0.2), transparent);
}

.white-to-transparent-gradient {
  background-image: linear-gradient(
    to right,
    rgba(255, 255, 255, 0.05) 0%,
    rgba(255, 255, 255, 0) 100%
  );
}

/* Default: Desktop and Tablet (≥ 426px) */
.grid-tab-responsive {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 1rem; /* optional, controls spacing between items */
}

/* Mobile (≤ 425px) */
@media (max-width: 425px) {
  .grid-tab-responsive {
    grid-template-columns: 1fr !important;
  }
}


/* Backdrop Blur Filters */
.backdrop-blur-sm {
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
}

.backdrop-blur-md {
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

.backdrop-blur-lg {
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

.backdrop-blur-xl {
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
}

/* Group hover translate effect */
.group-hover-lift {
  transition: transform 0.2s ease-in-out;
}

.group:hover .group-hover-lift {
  transform: translateY(-0.25rem); /* -4px */
}

.shadow-sm {
  box-shadow: 
    0 1px 3px 0 rgba(0, 0, 0, 0.1),
    0 1px 2px -1px rgba(0, 0, 0, 0.1);
}

.shadow-md {
  box-shadow: 
    0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.shadow-lg {
    box-shadow: 
	  0 10px 15px -3px rgba(0, 0, 0, 0.1),
      0 4px 6px -4px rgba(0, 0, 0, 0.1);
}

.shadow-xl {
  box-shadow: 
    0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 8px 10px -6px rgba(0, 0, 0, 0.1);
}

.shadow-2xl {
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.shadow-lg-green {
  box-shadow: 
	  0 25px 50px -12px rgb(74 160 74 / 0.2),
	  0 4px 6px -4px rgb(74 160 74 / 0.2);
}

.transition-shadow {
    transition-property: box-shadow;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

.bold-gap {
	margin-right: 4px;
}

.transition-colors {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-all {
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

/* Disables auto scrolling in desktop */
@media (min-width: 769px) {
  html {
    overflow-anchor: none; 
  }
}

.one-container .site-content {
    padding: 0;
}

.container {
  max-width: 100% !important;
  width: 100% !important;
}

/* ==========================================================================
   #BACKGROUND STYLES
   ========================================================================== */
.gray-bg--gradient {
  background: linear-gradient(
    to bottom,
    rgba(248, 250, 252, 0.4), /* from-light-bg/40 */
    rgba(248, 250, 252, 1),   /* via-light-bg */
    rgba(248, 250, 252, 1)    /* to-light-bg */
  );
}

/* Custom background effect with image and gradient overlay */
.custom-bg-effect {
  position: relative;
  overflow: hidden;
}

.custom-bg-effect::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url('https://images.unsplash.com/photo-1600880292203-757bb62b4baf?w=1920&h=1080&fit=crop&crop=center');
  background-size: cover;
  background-position: top;
  background-repeat: no-repeat;
  transform: scale(1.8);
  transform-origin: top;
  opacity: 0.2;
  z-index: 0;
}

.custom-bg-effect::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.8), rgba(248, 250, 252, 0.9));
  z-index: 1;
}

.custom-bg-effect > * {
  position: relative;
  z-index: 2;
}

@media (max-width: 768px) {
  .zoomed-bg::before {
    background-size: cover;
    transform: scale(1.1);
  }
}

/* ==========================================================================
   #LIST STYLES
   ========================================================================== */
.custom-orange-list {
  padding-left: 0;
  margin-left: 0;
}

.custom-orange-list li {
  list-style: none;
  position: relative;
  padding-left: 1.2em;
  margin-bottom: 0.5em;
}

.custom-orange-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 4px;
  height: 4px;
  background-color: orange;
  border-radius: 50%;
}

/* ==========================================================================
   #LOGO & TYPOGRAPHY
   ========================================================================== */
.logo {
  margin-top: 7px;
  margin-right: 25px;
}

.logo img {
  max-height: 30px;
  height: auto;
  width: auto;
  padding: 0;
  margin: 0;
}

.heading-gradient {
  background: linear-gradient(to right, #5cb85c, #059669);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

blockquote {
    border-left: 4px solid #4aa04a;
}

/* ==========================================================================
   #BUTTON STYLES
   ========================================================================== */
/* Button Animation */
.button-pressed {
  transition: transform 0.2s ease;
}

.button-pressed:hover {
  transform: scale(1.05);
}

a.button-pressed:active,
button.button-pressed:active {
  transform: scale(0.96);
}

.get-started-btn {
  background-color: #5cb85c;
  color: #fff;
  padding: 8px 16px;
  margin-left: 25px;
  text-decoration: none;
  font-weight: 500;
  font-size: 14px;
  border-radius: 14px;
  transition: background-color 0.3s ease;
}

.get-started-btn:hover {
  background-color: #4cae4c;
  color: #fff;
}

/* ==========================================================================
   #HEADER STYLES
   ========================================================================== */
.okayrelax-header {
  background-color: #1a2a38;
  padding: 10px;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 999;
  transition: background 0.3s ease, box-shadow 0.3s ease;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.okayrelax-header.scrolled {
  background-color: rgba(26, 42, 56, 0.6);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.okayrelax-header-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Navigation */
.navbar-menu {
  list-style: none;
  display: flex;
  gap: 30px;
  margin: 0;
  padding: 0;
  text-transform: uppercase;
}

.navbar-menu li a {
  color: white;
  text-decoration: none;
  font-size: 16px;
  transition: color 0.3s ease;
	display: flex;
}

.navbar-menu li a:hover {
  color: #5cb85c;
}

/* Mobile Header Behavior Fix */
@media (max-width: 768px) {
  html, body {
    overflow-x: hidden;
  }
}

/* CSS Chevron Arrow */
.css-chevron {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  margin-left: 6px;
  transition: transform 0.3s ease;
}

/* Container for dropdown */
.navbar-menu li.has-dropdown {
  position: relative;
}

.navbar-menu li.has-dropdown > a {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Rotate arrow on hover */
.navbar-menu li.has-dropdown:hover .css-chevron {
  transform: rotate(-135deg);
}

/* Dropdown menu hidden by default */
.navbar-menu .dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #ffffff;
  list-style: none;
  margin: 0;
  padding: 0;
  min-width: 240px;
  border-radius: 14px; /* rounded corners like screenshot */
  box-shadow: 0 8px 20px rgba(0,0,0,0.12);
  overflow: hidden;
  z-index: 999;
}

/* Show dropdown on hover */
.navbar-menu li.has-dropdown:hover .dropdown {
  display: block;
}

/* Dropdown items */
.navbar-menu .dropdown li {
  display: flex;
  align-items: center;
  color: #5d7a98;
  padding: 0 5px 0 5px;
}

.navbar-menu .dropdown li:first-child {
  padding-top: 10px;
}

.navbar-menu .dropdown li:last-child {
  padding-bottom: 10px;
}

.navbar-menu .dropdown li a {
  flex: 1;
  color: #5d7a98;
  padding: 10px 20px;
  text-decoration: none;
  font-size: .8rem;
}

/* Hover highlight for normal items */
.navbar-menu .dropdown li a:hover {
  color: #5cb85c;
  background-color: #f9f9fb;
  border-radius: 12px;
}

/* Active/highlighted link (like "Entrepreneurs") */
.navbar-menu .dropdown li a.active {
  color: #28a745; /* green text */
  background-color: #f9f9fb;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.navbar-menu .dropdown li a.active::after {
  content: "";
  width: 12px;
  height: 12px;
  background-color: #e3d4f2;
  border-radius: 50%;
}

/* Divider above "View All" */
.navbar-menu .dropdown li.divider {
  border-top: 1px solid #e5e5e5;
  margin-top: 4px;
  padding-top: 5px;
}

/* "View All" link style */
.navbar-menu .dropdown li.view-all a {
  color: #28a745;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.navbar-menu .dropdown li.view-all a:hover {
  background-color: #eef8ee;
}

.navbar-menu .dropdown li.view-all a::after {
  content: "→";
  font-size: 14px;
}



/* ==========================================================================
   #MOBILE MENU STYLES
   ========================================================================== */
.mobile-menu-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
}

.mobile-menu-toggle span {
  display: block;
  width: 25px;
  height: 3px;
  background: white;
  border-radius: 3px;
}

.mobile-menu {
  position: fixed;
  top: 0;
  right: -100%;
  width: 80%;
  height: 100%;
  background-color: #1a2a38;
  color: white;
  padding: 20px;
  display: flex;
  flex-direction: column;
  transition: right 0.3s ease;
  z-index: 1000;
}

.mobile-menu.open {
  right: 0;
}

.mobile-menu-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.mobile-menu-close {
  background: none;
  border: none;
  color: white;
  font-size: 28px;
  cursor: pointer;
}

.mobile-menu ul {
  list-style: none;
  padding: 20px 0;
  flex-grow: 1;
}

.mobile-menu ul li {
  margin: 15px 0;
}

.mobile-menu ul li a {
  color: white;
  text-decoration: none;
  font-weight: 600;
}

.mobile-menu ul li a:hover {
  color: #5cb85c;
}

/* Mobile login section */
.mobile-login-options p {
  font-size: 12px;
  color: #ccc;
  text-transform: uppercase;
  margin-bottom: 5px;
}

.mobile-login-options a {
  display: block;
  color: white;
  margin-bottom: 5px;
  text-decoration: none;
}

.mobile-login-options a:hover {
  color: #5cb85c;
}

.mobile-get-started {
  margin-top: auto;
  text-align: center;
}

.mobile-menu .dropdown {
  display: none;
  padding-left: 15px;
}

.mobile-menu .has-dropdown.open > a .css-chevron {
  transform: rotate(-135deg); /* arrow up when open */
}

.mobile-menu .view-all a {
  color: #5cb85c;
}

/* Responsive rules for tablet menu */
@media (max-width: 1122px) {
  .desktop-nav, .desktop-cta {
    display: none;
  }
  .mobile-menu-toggle {
    display: flex;
  }
  .mobile-menu {
    width: 50%;
  }
}

/* Responsive rules for mobile menu */
@media (max-width: 767px) {
  .desktop-nav, .desktop-cta {
    display: none;
  }
  .mobile-menu-toggle {
    display: flex;
  }
  .mobile-menu {
    width: 80%;
  }
}

/* ==========================================================================
   #FOOTER STYLES
   ========================================================================== */
.footer-top {
  background-color: #2d4d66;
  padding: 3rem 1rem 1.5rem;
  padding-bottom: 0;
  color: #fff;
}

.footer-top-container {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2rem;
}

.footer-column {
  flex: 1 1 200px;
}

.footer-column h4 {
  font-size: 1.1rem;
  margin-bottom: 1rem;
  font-weight: bold;
}

.footer-column ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-column li {
  margin-bottom: 0.5rem;
}

.footer-column a {
  color: #fff;
  text-decoration: none;
  font-size: 0.95rem;
}

.footer-column a:hover {
  text-decoration: underline;
}

.footer {
  width: 100%;
  background-color: #2d4d66;
  color: #fff;
  padding: 2rem 1rem;
}

.footer-container {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  border-top: 1px solid #ffffff33;
  padding-top: 2rem;
}

.footer-left {
  max-width: 400px;
}

.footer-left .logo {
  font-size: 1.5rem;
  font-weight: bold;
  margin-bottom: 0.5rem;
}

.footer-left .logo .gray {
  color: #ccc;
}

.footer-left .logo .green {
  color: #8ec641;
}

.footer-left .copyright {
  font-size: 0.95rem;
  margin-bottom: 1rem;
  line-height: 1.5;
}

.footer-left .social-icons a {
  display: inline-block;
  margin-right: 0.5rem;
  color: #fff;
  font-size: 1.1rem;
  border: 2px solid #fff;
  border-radius: 50%;
  width: 35px;
  height: 35px;
  text-align: center;
  line-height: 32px;
  transition: all 0.3s ease;
}

.footer-left .social-icons a:hover {
  background-color: #8ec641;
  color: #1d3440;
  border-color: #8ec641;
}

.footer-right {
  display: flex;
  padding-top: 1rem;
  gap: 10px;
}

.footer-right a {
  color: #fff;
  text-decoration: none;
  font-size: 0.95rem;
}

.footer-right a:hover {
  text-decoration: underline;
}

/* ==========================================================================
   #ANIMATIONS
   ========================================================================== */
/* Motion Animations - Base States */
.motion-slide-left {
  opacity: 0;
  transform: translateX(-50px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.motion-slide-right {
  opacity: 0;
  transform: translateX(50px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.motion-slide-up {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.9s ease-out, transform 0.6s ease-out;
}

/* When visible */
.motion-visible {
  opacity: 1;
  transform: translateX(0) translateY(0);
}

/* Animation Utility Classes */
.motion-delay-0 {
  transition-delay: 0.1s;
}

.motion-delay-1 {
  transition-delay: 0.2s;
}

.motion-delay-2 {
  transition-delay: 0.4s;
}

.motion-delay-3 {
  transition-delay: 0.6s;
}

.motion-animation-delay-2 {
  animation-delay: 0.4s !important;
}

.delay-1 { --delay: 0.2s; }
.delay-2 { --delay: 0.4s; }
.delay-3 { --delay: 0.6s; }

/* Motion Animations - Fade Grow */
.motion-fade-grow {
  --motion-delay: 0s;
  opacity: 0;
  transform: scale(0.9);
  animation: fadeGrow 0.6s ease-out var(--motion-delay) forwards;
}

@keyframes fadeGrow {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
/* Animate Pulse */
@keyframes pulse {
    50% {
        opacity: .7;
    }
}
.animate-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.arrow-bounce {
  animation: arrow-slide 2s ease-in-out infinite;
}

@keyframes arrow-slide {
  0%, 100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(5px); /* move right by 5px */
  }
}

/* Card Animations */
.card-animate {
  opacity: 0;
  transform: translateY(15px);
  will-change: transform, opacity;
}

@keyframes fadeInPauseMoveUp {
  0%   { opacity: 0; transform: translateY(15px); }
  40%  { opacity: 1; transform: translateY(15px); }
  100% { opacity: 1; transform: translateY(0); }
}

.card-animate.animate {
  animation: fadeInPauseMoveUp 1.2s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
  animation-delay: var(--delay, 0s);
}

/* Mobile-specific optimization */
@media (max-width: 768px) {
  .card-animate {
    transform: translateY(10px);
  }
  
  .card-animate.animate {
    animation-duration: 1s;
    animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }
  
  @keyframes fadeInPauseMoveUp {
    0% {
      opacity: 0;
      transform: translateY(10px);
    }
    40% {
      opacity: 1;
      transform: translateY(10px);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }
}

/* Container with zoom effect */
.image-zoom-container {
  overflow: hidden;
  display: block;
}

/* Image inside container */
.image-zoom-container img {
  transition: transform 0.5s ease;
  transform: scale(1);
  width: 100%;
  height: auto;
  display: block;
}

/* Zoom effect on container hover */
.image-zoom-container:hover img {
  transform: scale(1.05);
}

/* ==========================================================================
   #SCROLLBAR STYLES
   ========================================================================== */
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background-color: rgba(92, 184, 92, 0.3);
  border-radius: 9999px;
  transition: background-color 0.3s ease;
}

::-webkit-scrollbar-thumb:hover {
  background-color: rgba(92, 184, 92, 0.5);
}

/* Card heading color change on hover */
.card-h3:hover h3 {
  color: #4AA04A;
}

.card:hover .icon-bg {
  background-color: rgb(74 160 74 / 0.15);
}

/* ==========================================================================
   #Plans Page
   ========================================================================== */
/* Background Elements */

/* Green Corner Gradient in Bottom Right */
.green-corner-bg {
  background: radial-gradient(
    circle at bottom right,
    #F4F8F5,
    #ffffff 40%
  );
  border-bottom-right-radius: 50px;
}

.green-corner-bg-right {
  background:
    radial-gradient(
      circle at bottom right,
      #F4F8F5 0%,
      transparent 70%
    ),
    radial-gradient(
      circle at top right,
      #F4F8F5 0%,
      transparent 70%
    ),
    #ffffff; /* base background color */
  border-bottom-right-radius: 50px;
  border-top-right-radius: 50px;
}

.text-green {
	color: #5d7a98;
}

/* Base style for toggle buttons */
.pricing-toggle-group .pricing-toggle {
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
}

/* Active toggle button */
.pricing-toggle-group .pricing-toggle.active {
  background-color: #43a047 !important;
  color: white !important;
}

/* Inner text fix for GenerateBlocks */
.pricing-toggle-group .pricing-toggle.active * {
  color: white !important;
}

/* Inactive buttons */
.pricing-toggle-group .pricing-toggle:not(.active) {
  background-color: transparent;
  color: #2c3e50 !important;
}

.pricing-toggle-group .pricing-toggle:not(.active) * {
  color: #2c3e50 !important;
}

/* Inactive hover state */
.pricing-toggle-group .pricing-toggle:not(.active):hover,
.pricing-toggle-group .pricing-toggle:not(.active):hover *:not(.plan-save) {
  color: #4AA04A !important;
}

/* Save badge (now outside .pricing-toggle) */
.pricing-toggle-group {
  position: relative; /* Needed to position .plan-save absolutely inside it */
}

.badge-top-right {
  position: absolute;
  top: -10px;
  right: -10px;
  background-color: #43a047;
  color: white !important;
  font-size: 12px;
  padding: 2px 10px;
  border-radius: 20px;
  z-index: 2;
  pointer-events: none; /* Prevent hover issues */
}

.badge-top-left {
  position: absolute;
  top: -18px;
  left: 20px;
  background-color: #43a047;
  color: white !important;
  font-size: 12px;
  padding: 2px 10px;
  border-radius: 20px;
  z-index: 2;
  pointer-events: none; /* Prevent hover issues */
}



/* Base style for second toggle group */
.feature-toggle-group .feature-toggle {
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  border-radius: 0.75rem; /* rounded-xl */
  padding: 0.75rem 1.5rem; /* py-3 px-6 */
  font-weight: 500;
}

/* Active toggle button */
.feature-toggle-group .feature-toggle.active {
  background-color: #22c55e !important; /* green-500 */
  color: #ffffff !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
              0 2px 4px -1px rgba(0, 0, 0, 0.06); /* shadow-md */
}

/* Inner text fix for GenerateBlocks */
.feature-toggle-group .feature-toggle.active * {
  color: #ffffff !important;
}

/* Inactive buttons */
.feature-toggle-group .feature-toggle:not(.active) {
  background-color: transparent;
  color: #475569 !important; /* slate-600 */
}

/* Inactive button text fix */
.feature-toggle-group .feature-toggle:not(.active) * {
  color: #475569 !important;
}

/* Inactive hover state */
.feature-toggle-group .feature-toggle:not(.active):hover,
.feature-toggle-group .feature-toggle:not(.active):hover * {
  color: #16a34a !important; /* green-600 */
}




.pay-card-style {
  border-color: #f3f4f6; /* Light Gray */
  box-shadow: 
    0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 10px 10px -5px rgba(0, 0, 0, 0.04);
  transition: all 300ms ease;
}

.pay-card-style:hover {
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  transform: translateY(-4px);
  border-color: rgb(74 160 74 / 0.3);
}

.pay-card-popular {
  /* Ring effect (outer stroke) */
  box-shadow:
    0 0 0 4px rgba(74, 160, 74, 0.2);
}

.pay-card-popular:hover {
  box-shadow:
    0 0 0 4px rgba(74, 160, 74, 0.2),
    0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
  transform: translateY(-4px);
  border-color: #4aa04a;
}

.badge-top-center {
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none; /* Prevent hover issues */
}

.price-period {
  font-size: 14px;
  color: #5d7a98;       /* Light gray color */
  font-weight: normal;
  margin-left: 0.25rem
}

.custom-check-list ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.custom-check-list li {
  position: relative;
  padding-left: 28px; /* space for the circle */
  padding: 0 0 0.8rem 28px;
  line-height: 1.25rem;
}

.custom-check-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.15em;
  width: 18px;
  height: 18px;
  background-color: #dcfce7; /* light green background circle */
  border-radius: 50%; /* makes it round */
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: url("data:image/svg+xml,%3Csvg fill='%234AA04A' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' d='M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z' clip-rule='evenodd'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 10px 10px; /* checkmark size */
}


/* Card Animations - Four Cards */
.card-animate-four {
  opacity: 0;
  transform: translateY(15px);
  will-change: transform, opacity;
}

@keyframes fadeInPauseMoveUpFour {
  0% {
    opacity: 0;
    transform: translateY(15px);
  }
  40% {
    opacity: 1;
    transform: translateY(15px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.card-animate-four.animate {
  animation: fadeInPauseMoveUpFour 1.2s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

.card-animate-four.animate:nth-child(1) {
  animation-delay: 0.15s;
}

.card-animate-four.animate:nth-child(2) {
  animation-delay: 0.3s;
}

.card-animate-four.animate:nth-child(3) {
  animation-delay: 0.45s;
}

.card-animate-four.animate:nth-child(4) {
  animation-delay: 0.6s;
}

/* Mobile-specific optimization */
@media (max-width: 768px) {
  .card-animate-four {
    transform: translateY(10px);
  }
  
  .card-animate-four.animate {
    animation-duration: 1s;
    animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }
  
  @keyframes fadeInPauseMoveUpFour {
    0% {
      opacity: 0;
      transform: translateY(10px);
    }
    40% {
      opacity: 1;
      transform: translateY(10px);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }
}


.custom-check-text {
  position: relative;
  padding-left: 32px; /* space for the circle + icon */
  line-height: 1.25rem;
}

.custom-check-text::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0em;
  width: 22px;
  height: 22px;
  background-color: #dcfce7; /* light green background circle */
/*   border: 0.5px solid #4AA04A; */
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: url("data:image/svg+xml,%3Csvg fill='%234AA04A' viewBox='0 0 18 18' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' d='M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z' clip-rule='evenodd'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 10px 10px;
}

.heading-gradient-pay {
  background: linear-gradient(to right, #4aa04a, #4db350, #4db350, #2563eb, #2563eb);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}


.icon {
  width: 2rem;
  height: 2rem;
}

.icon path {
  stroke: #fff;
}

.icon-container {
  width: 4rem;
  height: 4rem;
  border-radius: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
}

.icon-gradient-green {
  background-image: linear-gradient(to bottom right, #10B981, rgb(16 185 129 / 0.6));
}

.icon-gradient-blue {
  background-image: linear-gradient(to bottom right, #2563EB, rgb(37 99 235 / 0.6));
}

.icon-gradient-orange {
  background-image: linear-gradient(to bottom right, #F97316, rgb(249 115 22 / 0.6));
}

.icon-gradient-teal {
  background-image: linear-gradient(to bottom right, #14B8A6, rgb(20 184 166 / 0.6));
}

.icon-gradient-red {
  background-image: linear-gradient(to bottom right, #DC2626, rgb(220 38 38 / 0.6));
}

.icon-gradient-yellow {
  background-image: linear-gradient(to bottom right, #F59E0B, rgb(245 158 11 / 0.6));
}

.icon-gradient-slate {
  background-image: linear-gradient(to bottom right, #475569, rgb(71 85 105 / 0.6));
}

.icon-gradient-purple {
  background-image: linear-gradient(to bottom right, #8B5CF6, rgb(139 92 246 / 0.6));
}

.icon-gradient-cyan {
  background-image: linear-gradient(to bottom right, #06B6D4, rgb(6 182 212 / 0.6));
}

.icon-gradient-rose {
  background-image: linear-gradient(to bottom right, #E11D48, rgb(225 29 72 / 0.6));
}


.fancy-bg {
  position: relative;
  z-index: 1;
}

.fancy-bg::before {
  content: "";
  position: absolute;
  inset: 0; /* fill container */
  z-index: -1; /* behind content */
  border-bottom-right-radius: 50px;
  border-top-right-radius: 50px;
  border-radius: inherit; /* if container already has rounded corners */
/* 	border-style: double; */
  background:
    radial-gradient(
      circle at bottom right,
      #F4F8F5 0%,
      transparent 30%
    ),
    radial-gradient(
      circle at top right,
      #F4F8F5 0%,
      transparent 30%
    ),
  #ffffff; 
  transform: rotate(0.5deg);
  transform-origin: center;
}

/* Card Image animation */
.card-image {
  transition: transform 0.3s ease;
}

.card h3 {
  transition: color 0.3s ease;
}

.card:hover .card-image {
  transform: scale(1.05);
}

.card:hover h3 {
  color: #16a34a;
}





/* ===== Base Input Styles (shared by both search bars) ===== */
.wp-block-search.email-search-bar .wp-block-search__input,
.wp-block-search.blog-search-bar .wp-block-search__input,
.email-search-bar input[type="search"],
.email-search-bar input[type="email"],
.blog-search-bar input[type="search"],
.blog-search-bar input[type="email"],
.email-bar input[type="search"] {
  flex: 1 1 0%;
  width: 100%;
  padding: 0.75rem 1rem;            /* px-4 py-3 */
  border: 1px solid #e2e8f0;        /* slate-200 */
  border-radius: 0.75rem;           /* rounded-xl */
  color: #0f172a;                   /* slate-900 */
  background: #fff;
  min-height: 44px;                 /* better tap target */
  -webkit-appearance: none;         /* iOS */
}

/* ===== Placeholder Styles ===== */
.wp-block-search.email-search-bar .wp-block-search__input::placeholder,
.wp-block-search.blog-search-bar .wp-block-search__input::placeholder,
.email-search-bar input::placeholder,
.blog-search-bar input::placeholder {
  color: #94a3b8;                   /* slate-400 */
}

/* ===== Focus State ===== */
.wp-block-search.email-search-bar .wp-block-search__input:focus,
.wp-block-search.blog-search-bar .wp-block-search__input:focus,
.email-search-bar input:focus,
.blog-search-bar input:focus {
  outline: none;
  border-color: #22c55e;            /* green-500 */
  box-shadow: 0 0 0 2px #22c55e;    /* focus:ring-2 */
}

/* ===== Inside Wrapper (flex gap for icon/button layout) ===== */
.wp-block-search.email-search-bar .wp-block-search__inside-wrapper,
.wp-block-search.blog-search-bar .wp-block-search__inside-wrapper {
  display: flex;
  gap: 8px;
}

/* ===== Buttons (shared style if visible) ===== */
.wp-block-search.email-search-bar .wp-block-search__button,
.wp-block-search.blog-search-bar .wp-block-search__button {
  border-radius: 0.75rem;
  padding: 0.75rem 1rem;
}

/* ===== Special: Adjust Blog Search Bar for Leading Icon ===== */
.blog-search-bar input[type="search"],
.wp-block-search.blog-search-bar .wp-block-search__input {
  padding-left: 2.5rem; /* extra space for leading icon */
}

.email-bar input[type="search"] {
	padding: 1rem;
}

.flex-bar {
	display: flex;
	align-self: stretch;
}

/* Avatar Stack */
.avatar-stack {
  display: flex;
  margin-left: -0.5rem; /* -space-x-2 equivalent */
}

.avatar-item {
  width: 2rem;          /* w-8 */
  height: 2rem;         /* h-8 */
  background: linear-gradient(to bottom right, #4AA04A, #3A8A3A); /* from-primary to-primary-dark */
  color: #fff;          /* text-white */
  border-radius: 9999px; /* rounded-full */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;   /* text-xs */
  font-weight: 700;     /* font-bold */
  border: 2px solid #fff; /* border-2 border-white */
  margin-left: -0.5rem; /* -space-x-2 stacking */
  position: relative;
}

/* Remove negative margin from first item */
.avatar-item:first-child {
  margin-left: 0;
}


/* CARDS */
/* Expansion area hidden by default */
.card-expand .expand-content,
.drown-expand-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease, opacity 0.4s ease;
  opacity: 0;
  border-top: 1px solid #eee;
  background: #fff;
}

/* Show expansion when card is open */
.card-expand.open .expand-content{
  max-height: 1000px; /* adjust as needed */
  opacity: 1 !important;
}

/* Done using JS - accordion.js */
/* .drown-card.active .drown-expand-content {} */

/* Drown Card */
/* Remove bottom border when active */
.drown-card.no-border {
  border-bottom: none !important;
}

/* Optional: transition for smooth border change */
.drown-card {
/*   border-bottom: 1px solid red; */
  transition: border-bottom 0.9s;
}

/* Rotate icon when expanded */
.expand-icon.rotated {
  transform: rotate(180deg);
  transition: transform 0.3s;
}

.drown-card.active {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.drown-card.active .drown-expand-content {
	color: red;
}

/* Trigger button styles */
.expand-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem;
  background: #f9fafb; /* gray-50 */
  border-radius: 0.5rem;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.expand-btn:hover {
  background: rgb(74 160 74 / 0.05);
}

.expand-label {
  font-size: 0.875rem; /* text-sm */
  font-weight: 500;
  color: #2d4d66; /* blue-header */
}

.expand-right {
  display: flex;
  align-items: center;
  color: #4aa04a; /* primary */
}

.expand-right .expand-action {
  font-size: 0.75rem; /* text-xs */
  margin-right: 0.5rem;
}

.expand-icon {
  width: 1rem;
  height: 1rem;
  transition: transform 0.3s ease;
}

/* When expanded */
.card-expand.open .expand-icon {
  transform: rotate(180deg);
}

.expand-btn.active-btn .expand-icon {
  transform: rotate(180deg);
}



/* WP Forms */
.wpforms-field {
	padding-top: 10px !important;
}

.wpforms-field input[type="email"],
.wpforms-field input[type="text"],
.wpforms-field select,
.wpforms-field textarea,
#wpforms-submit-4097,
#wpforms-4097-field_2-container {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
	border-radius: 1rem !important;
}

.form-button {
	width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
	border-radius: 1rem !important;
}

.wpforms-field-label {
    font-weight: 500 !important;
}

div.wpforms-container-full .wpforms-confirmation-container-full {
	border-radius: 1rem;
}

/* Popup Maker */
/* popmake-3782 */
#popmake-3782 {
	padding: 0;
}

/* Popup container */
#popmake-3643 .pum-container {
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  padding: 25px;
  background: #fff;
  max-width: 400px;
}

/* Inputs */
#popmake-3643 input[type="text"],
#popmake-3643 input[type="email"] {
  border: 1px solid #ddd;
  border-radius: 1rem;
  padding: 10px 12px;
  width: 100%;
  font-size: 14px;
  margin-bottom: 15px;
  box-sizing: border-box;
  background-color: #fff;
}

#popmake-3643 .pum-form__field label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: #555;
  margin-bottom: 6px;
}


/* Button */
#popmake-3643 > div > div > form > div.pum-form__field--submit > button {
  background-color: #22c55e;
  color: #fff;
  border-radius: 1rem;
  padding: 12px;
  font-weight: bold;
  font-size: 15px;
  width: 100%;
  border: none;
  cursor: pointer;
  transition: background 0.2s ease-in-out;
}

#popmake-3643 > div > div > form > div.pum-form__field--submit > button:hover {
  background-color: #16a34a;
}

/* Footer text */
#popmake-3643 .pum-sub-form .pum-sub-form-consent {
  font-size: 12px;
  color: #888;
  text-align: center;
  margin-top: 10px;
}

#popmake-3643 .pum-form {
		margin: 0 auto 12px;
}

/* Message: small internal padding and reduced bottom space */
#popmake-3643 .pum-form__messages {
  border: none;
  padding: 6px 0 0;          /* tiny internal padding */
  margin: 8px 0 0 0;      /* 12px above, 8px below when visible */
  text-align: center;
  font-size: 15px;
  line-height: 1.3;
}

/* Ensure submit field/button don't add extra gap */
#popmake-3643 .pum-form__field--submit,
#popmake-3643 .pum-form__field--submit button,
#popmake-3643 .pum-form__field--submit input[type="submit"] {
  margin-bottom: 0;
  padding-bottom: 0;
}

/* Reduce popup container bottom padding if it exists */
#popmake-3643 .pum-container {
  padding-bottom: 8px;
}

/* Colors */
#popmake-3643 .pum-form__messages.success { color: #22c55e; }
#popmake-3643 .pum-form__messages.error   { color: #dc2626; }

/* If another rule is still winning, force only the bottom margin */
#popmake-3643 .pum-form__messages {
/*   margin-bottom: 8px !important; */
}

/* wpforms id="3778" */
#popmake-3782 {
  padding: 0 2.5rem 2.5rem 2.5rem;
}





.featured {
/*   position: relative; */
  display: none;
/*   padding: 20px;
  background: #f5f5f5;
  border: 1px solid #ddd;
  border-radius: 8px; */
}

/* only active one is shown */
.featured.active {
  display: block;
}

/* button styling */
/* .featured-btn {
  border: none;
  background: #333;
  color: #fff;
  font-size: 18px;
  padding: 6px 10px;
  border-radius: 4px;
  cursor: pointer;
} */




.node.active {
  background: #15803d;
}

.time-line {
  -webkit-mask-image: linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0%,     /* fully transparent at the very top */
    rgba(0,0,0,1) 10%,    /* fully visible after 10% */
    rgba(0,0,0,1) 90%,    /* stays visible until near bottom */
    rgba(0,0,0,0) 100%    /* fades out at bottom */
  );
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-image: linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,1) 10%,
    rgba(0,0,0,1) 90%,
    rgba(0,0,0,0) 100%
  );
  mask-repeat: no-repeat;
  mask-size: 100% 100%;
}




#wpforms-4097 {
	margin: 0 auto !important;
	margin-bottom: 15px !important;
}

#wpforms-form-4097 {
	margin: 0 auto !important;
    display: flex !important;
	justify-content: center;
	gap: 20px;
	flex-wrap: wrap;
}

#wpforms-submit-4097 {
    margin: auto auto 15px 15px;
}

@media (max-width: 768px) {
  #wpforms-form-4097 {
    flex-direction: column !important;
    align-items: stretch !important; /* full width fields */
    gap: 0;
  }

  #wpforms-form-4097 input,
  #wpforms-form-4097 select,
  #wpforms-form-4097 textarea {
    width: 100% !important; /* make fields full width */
  }

  #wpforms-submit-4097 {
    margin: 0 auto 15px 20px !important;
    width: 100% !important; /* button spans full width */
  }
	
  #wpforms-4097-field_1-container,
  #wpforms-4097-field_2-container {
    padding-bottom: 10px;
	}
	
/* 	#wpforms-form-4097 {
		border: 1px solid black;
	} */
}

.inline-form {
	display: none;
}