.hero {
  background: linear-gradient(135deg, #0F2028 0%, #1a3a35 100%);
  color: #FFFFFF;

  min-height: 100vh;
}

.herocall {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.herocall:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.35);
}

/* Parent row */
.image-row {
  position: relative;
  margin-bottom: 2rem;
}
/* Image column */
.image-row .image {
  width: 100%;
  border-radius: 20px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  display: block;
}
/* Stats column - desktop overlay */
.image-row .stats {
  background: white;
  border-radius: 16px;
  padding: 24px 32px;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
}
/* Desktop only - overlay positioning */
@media (min-width: 769px) {
  .image-row .stats {
    position: absolute;
    bottom: -30px;
    right: 0px;
    width: 60%;
    max-width: 500px;
    z-index: 10;
  }
}
/* Tablet */
@media (max-width: 1024px) and (min-width: 769px) {
  .image-row .stats {
    bottom: -20px;
    right: -20px;
  }
}
/* Mobile - no overlay, normal flow */
@media (max-width: 768px) {
  .image-row {
    margin-bottom: 1rem;
  }

  .image-row .stats {
    margin-top: 1.5rem;
    padding: 20px 24px;
  }

  .image-row .image {
    border-radius: 16px;
    margin-bottom: 0;
  }
}

.aboutcta {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.aboutcta:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(194, 250, 107, 0.3);
}

.benetext {
  /* This ensures the element will not exceed 600 pixels in width */
  max-width: 600px; 
  
  /* Optional: Center the block element within its container (useful for readability) */
  margin-left: auto;
  margin-right: auto;
}

/* --- 1. Base State for Card Container (.benecard) --- */
.benecard {
    position: relative; 
    overflow: hidden; 
    transition: all 0.3s;
    border: 1px solid transparent; 
    outline: none; 
}

/* --- 2. Top Bar Pseudo-Element (::before) --- */
.benecard::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    
    /* ADDED: Explicitly set width to ensure full span */
    width: 100%;
    
    /* ADDED: Ensure the bar is visible on the z-axis */
    z-index: 2; 
    
    height: 4px; 
    background: linear-gradient(90deg, #C2FA6B, #38A67E);
    
    /* Transition and positioning remains the same */
    transform: scaleX(0); 
    transition: transform 0.3s;
    transform-origin: center; 
}

/* --- 3. Hover State (.benecard:hover) --- */
.benecard:hover {
    transform: translateY(-5px); 
    box-shadow: 0 20px 40px rgba(0,0,0,0.08); 
    border-color: #F7F9FC; 
}

/* --- 4. Hover State for the Top Bar (.benecard:hover::before) --- */
.benecard:hover::before {
    transform: scaleX(1); 
}

.benecon {
    /* Box Dimensions and Shape */
    width: 60px; /* Icon Box: Width/Height: 60px */
    height: 60px; /* Icon Box: Width/Height: 60px */
    border-radius: 16px; /* Icon Box: Border-radius: 16px */

    /* Background Styling */
    /* Icon Box: Background: Linear gradient 135deg, #C2FA6B 0%, rgba(194, 250, 107, 0.5) 100% */
    background: linear-gradient(135deg, #C2FA6B 0%, rgba(194, 250, 107, 0.5) 100%); 

    /* Text Styling and Alignment */
    font-size: 24px; /* Icon Box: Font size: 24px */
    line-height: 60px; /* Icon Box: Line-height: 60px */
    text-align: center; /* Center aligned (Implied horizontal centering of line-height text) */
    
    /* Display properties for centering and size control */
    display: flex; /* Use flex to ensure perfect centering (preferred for modern CSS) */
    align-items: center; /* Center vertically */
    justify-content: center; /* Center horizontally */

    /* Spacing */
    margin-bottom: 24px; /* Icon Box: Margin bottom: 24px */
}

/* Styling the main circle container (Step Number) */
.step-box {
    position: relative;
    width: 100px;
    height: 100px;
    line-height: 94px; /* Adjust line-height to center the number vertically */
    font-size: 32px;
    font-weight: 800; /* Be Vietnam Pro, 800 */
    color: #004D3F;
    background: #FFFFFF;
    border: 3px solid #C2FA6B;
    border-radius: 50%;
    text-align: center;
    margin: 0 auto 24px;
    z-index: 1; /* Keep the number above the glow */
}

/* Creating the Inner Glow Effect (Pseudo-element) */
.step-box::before {
    content: '';
    position: absolute;
    inset: 5px; /* Position: Absolute, inset 5px */
    background: #C2FA6B;
    border-radius: 50%;
    opacity: 0.2; /* Opacity: 0.2 */
    z-index: -1; /* Place behind the number */
}

/* --- Existing process-grid styling --- */
.process-grid {
    position: relative;
}

.process-grid::after {
    content: '';
    position: absolute;
    top: 50px;
    left: 10%;
    right: 10%;
    height: 2px;
    background: linear-gradient(90deg, #C2FA6B, #38A67E); 
    z-index: 0;
}

/* --- Hide the connecting line on tablet and mobile --- */
@media only screen and (max-width: 768px) {
    .process-grid::after {
        display: none !important;
    }
}

.booksec {
  background: linear-gradient(135deg, #38A67E 0%, #004D3F 100%);
  color: #FFFFFF;
}

.testimonial {
    /* Set the maximum visual height for the text block */
    /* This value is calculated based on standard line-height (e.g., 20px per line) */
    max-height: 150px; 
    
    /* Crucial: Enable vertical scrolling when the content exceeds the max-height */
    overflow-y: scroll;
    
    /* Optional: Hide horizontal scrollbars if lines are long but clipping is acceptable */
    overflow-x: hidden; 
    
    /* Optional: Add padding/margin to prevent text from touching the edge of the scroll box */
    padding: 10px;
}

/* --- 1. Base Icon Container Styling --- */
.faqs .zpaccordionicon {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #F7F9FC !important;
    color: #38A67E !important;
    font-size: 19px !important;
    transition: all 0.3s ease !important;
    line-height: 0 !important;
}

/* --- 2. Hide Unwanted SVG Icons (Show only icon-4) --- */
.faqs .zpaccordionicon .zpaccord-svg-icon-1,
.faqs .zpaccordionicon .zpaccord-svg-icon-2,
.faqs .zpaccordionicon .zpaccord-svg-icon-3 {
    display: none !important;
}

/* --- 3. Show Plus Icon in Closed State --- */
.faqs .zpaccord-icon-inactive .zpaccord-svg-icon-4 {
    display: block !important;
    transition: transform 0.3s ease !important;
}

/* --- 4. Hide Minus Icon Completely --- */
.faqs .zpaccord-icon-active {
    display: none !important;
}

/* --- 5. Active State: Change Background & Rotate Plus to X --- */
.faqs .zpaccordion-active .zpaccordionicon {
    background: #C2FA6B !important;
    color: #004D3F !important;
}

/* --- 6. Rotate ONLY the Plus SVG Icon by 45deg --- */
.faqs .zpaccordion-active .zpaccord-icon-inactive .zpaccord-svg-icon-4 {
    transform: rotate(45deg) !important;
}

/* --- Target only tablet and mobile devices --- */

/* Tablet: 481px to 768px */
@media only screen and (max-width: 768px) {
    .about .zpicon-heading {
        text-align: center !important;
        width: 100% !important;
    }
}

/* Mobile: up to 480px */
@media only screen and (max-width: 480px) {
    .about .zpicon-heading {
        text-align: center !important;
        width: 100% !important;
    }
}

/* Add this to your footer section's custom CSS */
.footer-legal-buttons a {
    transition: all 0.3s ease !important;
}

.footer-legal-buttons a:hover {
    transform: translateY(-2px) !important;
}