/* Hero Section Styling */
/* body {
    background-color: #ffffff !important;
} */
#roi-hero-section {
    background-color: #050038;
    background-image: url('../../../joinworth/images/texture.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    color: #696688; /* Color text */
    width: 100vw; /* Full width of the viewport */
    /* height: 368px; */
    position: relative; /* Relative to position content properly */
    margin: 0; /* Remove margins */
    padding: 0; /* Remove padding */
    box-sizing: border-box; /* Include padding and border in dimensions */
}

.roi-hero-container {
    display: flex; /* Flexbox layout */
    flex-direction: column; /* Image on the right by default */
    align-items: center; /* Center vertically */
    max-width: 1235px; /* Limit width */
    /* height: 512px; */
    margin: 0 auto; /* Center horizontally */
    padding: 20px;
}
/* Eyebrow Text Styling */

.roi-eyebrow-text {
        display: flex;
        flex-direction: column;
        text-align: center;
        font-family: Primal, sans-serif;
        font-weight: 600;
        font-size: 16px;
        color: #6b66c4;
        line-height: normal;
        text-transform: uppercase;
        padding: 8px;
}

.roi-hero-text {
    color: #f1f1f1;
    font-weight: 600;
    display: flex; /* Use flexbox for vertical stacking */
    flex-direction: column; /* Stack items vertically */
    justify-content: center; /* Center content vertically */
    align-items: center; /* Align text to the left */
    width: 650px;
    height: 360px; /* Fixed height */
    text-align: center; /* Ensure text aligns to the left */
}


.roi-hero-text p {
    font-family: Inter;
    line-height: 28px;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    font-size: 18px;
    font-weight: 450;
    margin: 0;
    text-align: center;
    width: 110%;
    padding: 20px;
}
.roi-section h2 {
    font-family: Inter;
    font-size: 44px !important;
    font-weight: 800;
    line-height: 53.25px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    margin-bottom: 10px !important;
    margin-left: 30px;
}

.roi-section p.roi-short-desc{
    font-family: Inter;
    font-size: 16px;
    font-weight: 500;
    line-height: 28px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    margin-left: 30px;

}

  /* Modal Content */
  .page-template-roi-calculator-page .modal-content {
    margin-top: 70px;
  }

  .paragraph-text {
    flex: 1 !important;
}
  .paragraph-text p {
    margin-bottom: 1em;
    text-align: left !important;
}

.paragraph-text .bullet-section li {
    text-align: left !important;
}

/* Mobile-Friendly Layout */
@media (max-width: 868px) {
    .roi-hero-container {
        flex-direction: column; /* Stack text and image vertically */
        align-items: center; /* Center content horizontally */
        gap: 20px; /* Adjust spacing */
        height: 100%;
    }

    .eyebrow-text {
        margin: 0;
        font-size: 15px;
    }

    .roi-hero-text h1 {
        font-size: 37px;
        text-align: center;
    }

    .roi-hero-text {
        max-width: 90%; /* Full width for text */
        text-align: left; /* Center-align text */
    }


}

.paragraph-container {
    display: flex;
    align-items: flex-start; /* Align items at the top */
    gap: 20px; /* Space between text and image */
    max-width: 1200px; /* Limit the container width */
    margin: 42px auto 14px; /* Center it and add space above/below */
    padding: 20px;
}

/* Ensure the image aligns properly */
.paragraph-image {
    flex: 1; /* Take one part of the space */
    text-align: right; /* Align the image to the right */
}

.paragraph-image img {
    max-width: 100%; /* Ensure image is responsive */
    height: auto; /* Maintain aspect ratio */
}

/* Style the text section */
.paragraph-text {
    flex: 1 !important;
    color: #696688; /* Match the theme's color */
    font-size: 18px; /* Standard font size */
    line-height: 1.6; /* Improve readability */
    word-break: break-word;
}

/* Ensure bullet points look consistent */
.paragraph-text .bullet-section {
    padding-left: 20px; /* Indent bullets */
    margin-top: 20px;
    list-style: disc; /* Ensure default bullets */
}

@media (max-width: 768px) {
    .roi-eyebrow-text {
        font-size: 12px !important;
        padding: 18px;
    }

    .paragraph-container {
        flex-direction: column; /* Stack items vertically */
        gap: 15px; /* Adjust gap */
        margin: 0;
        margin-top: 0;
        margin-bottom: 0;
    }
    .roi-hero-text p {
        font-size: 13px !important;
        margin-top: 0 !important;
        padding: 20px !important;
    }

    .paragraph-text .bullet-section {
        padding-left: 20px;
        margin: 18px 0;
    }

    .paragraph-image {
        text-align: center;
        padding: 5px !important;
    }

    img {
        vertical-align: middle;
        padding: 10px;
    }
    .roi-key-benefits h2 {
        font-size: 32px !important;
    }
    .roi-key-benefits {
        padding: 40px 20px !important;
    }
    .roi-benefit {
        padding: 18px !important;
    }
    .roi-benefit p {
        margin-bottom: 10px !important;
    }
    .roi-benefits-wrapper {
        margin-bottom: 0 !important;
    }
    .roi-slider-container label {
        font-size: 16px !important;
        padding: 10px;
        margin-left: 0 !important;
    }
    .roi-slider-container label {
        font-size: 16px;
        padding: 10px;
        margin-left: 0;
    }
    .roi-section {
        padding: 0 !important;
        gap: 0;
    }
    .roi-container {
        padding: 1px;
    }
    .page-template-roi-calculator-page .faq-section {
        margin-top: 0;
    }

}



/* Key roi-benefits Section */
.roi-key-benefits {
    text-align: center;
    padding: 60px;
  }

  .roi-key-benefits h2 {
    font-size: 2rem;
    color: #141437;
    margin-bottom: 90px;
    letter-spacing: normal;
  }

  .roi-benefits-wrapper {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 60px;
    transform: scale(0.9);
  }

  .roi-benefit {
    position: relative;
    background: #ffffff;
    border-radius: 15px;
    box-shadow: 0 8px 8px rgba(0, 0, 0, 0.1);
    padding: 88px 25px 20px;
    text-align: left;
    max-width: 300px;
    flex: 1;
    min-width: 170px;
  }

  .roi-icon-wrapper {
    position: absolute;
    top: -25px; /* Adjust to center the image vertically on the card's top line */
    left: 20px; /* Adjust for horizontal alignment */
    background: transparent; /* Match card background */
    padding: 5px;
  }

  .roi-icon-wrapper img {
    width: 50px;
    height: auto;
    /* box-shadow: 0 -1px 10px rgba(0, 0, 0, 0.5); */
  }

  .roi-benefit h3 {
    font-size: 1.2rem;
    color: #141437;
    margin-bottom: 10px;
    letter-spacing: 0.01px;
  }

  .roi-benefit p {
    font-size: 1rem;
    color: #6c757d;
    line-height: 1.5;
  }

/* Responsive Design for Mobile Screens */
@media (max-width: 768px) {
    .paragraph-text {
        font-size: 16px; /* Slightly smaller font size for mobile */
        line-height: 24px; /* Adjusted line height */
        padding: 15px; /* Increased padding for spacing */
        width: 90%;
    }

    .roi-key-benefits {
        text-align: center;
        padding: 40px 60px;
    }

    .roi-key-benefits h2 {
        font-size: 2rem; /* Slightly smaller heading size for mobile */
        margin-bottom: 10px;
    }

    .roi-benefits-wrapper {
        flex-direction: column; /* Stack cards vertically */
        gap: 55px; /* Reduced gap for better alignment */
        align-items: center; /* Center cards */
        padding: 10%;
        margin-top: 50px;
    }

    .roi-benefit {
        max-width: 90%; /* Full width for mobile */
        text-align: center; /* Center-align text for better appearance */
        padding: 20px; /* Adjusted padding for mobile */
        width: 100%;
    }

    .roi-icon-wrapper img {
        width: 40px; /* Slightly smaller icon for mobile */
    }

    .roi-benefit h3 {
        font-size: 1.5rem; /* Slightly smaller font size */
        padding: 24px 0 10px;
    }

    .roi-benefit p {
        font-size: 0.9rem; /* Slightly smaller paragraph font size */
    }
    .faq-grid {
        grid-template-columns: 1fr !important;
    }


}

/* Media Queries for Smaller Mobile Screens */
@media (max-width: 480px) {
    .roi-hero-text h1 {
        font-size: 22px !important;
        text-align: center;
    }

    .roi-hero-text p {
        font-size: 0.8rem; /* Further reduce subtitle size */
        text-align: center;
    }

    .paragraph-text {
        font-size: 14px; /* Smaller font for very small devices */
        line-height: 22px;
        width: 90%;
    }

    .roi-key-benefits h2 {
        font-size: 1.5rem; /* Smaller heading size */
        margin-bottom: 10px;
    }

    .roi-benefit {
        padding: 15px; /* Reduce padding */
    }

    .roi-benefit h3 {
        font-size: 1.5rem; /* Smaller title font size */
    }

    .roi-benefit p {
        font-size: 0.85rem; /* Smaller paragraph font size */
    }

}
@media (max-width: 1100px) {
    .paragraph-text {
        width: 90%;
    }
}

.roi-container {
    display: flex;
    justify-content: space-between; /* Align left and right sections */
    align-items: flex-start; /* Align content to the top */
    gap: 44px; /* Space between sliders and results */
    width: 100%; /* Full width */
    max-width: 1253px; /* Match hero width */
    margin: 0px auto; /* Center horizontally and add space from the top */
    padding: 20px; /* Remove extra padding */
    box-sizing: border-box; /* Include padding in width calculations */
    position: relative; /* Make container relative to position the section accurately */
    z-index: 1; /* Ensure the calculator stays above the rotated section */
}

.roi-section {
    flex: 2; /* Allow sections to grow equally */
    display: flex;
    flex-direction: column; /* Stack text and sliders vertically */
    min-width: 300px; /* Prevent sections from shrinking too much */
    max-width: 600px; /* Limit maximum section width */
    background-color: #ffffff; /* White background */
    border-radius: 16px; /* Rounded corners */
    box-sizing: border-box; /* Include padding in width calculations */
    gap: 20px;
}

/* Slider Container */
.roi-slider-container {
    display: flex;
    flex-direction: column; /* Stack label and slider vertically */
    gap: 56px; /* Space between label and slider-wrapper */
    margin-bottom: 70px; /* Space between each slider container */
    width: 100%; /* Full width */
}

/* Label Styling */
.roi-slider-container label {
    font-size: 18px; /* Font size for title */
    font-weight: bold; /* Make the title bold */
    color: #696688; /* Subtle text color */
    margin-bottom: 5px; /* Space between title and slider-wrapper */
    margin-left: 30px;


}

/* Slider and Output Wrapper */
.slider-wrapper {
    display: flex; /* Align slider and output side by side */
    align-items: center; /* Center align slider and output */
    gap: 50px; /* Space between slider and output */
    margin-left: 30px;
}

/* Slider Styling */
.custom-slider {
    width: 90%;
    height: 8px; /* Adjust slider height */
    appearance: none; /* Remove default browser styles */
    background: linear-gradient(to right, #050038, #F1F3FD); /* Gradient track */
    border-radius: 4px; /* Rounded edges */
    outline: none; /* Remove focus outline */
    transition: background 0.3s ease; /* Smooth transition */
}

/* Slider Thumb */
.custom-slider::-webkit-slider-thumb,
.custom-slider::-moz-range-thumb,
.custom-slider::-ms-thumb {
    appearance: none;
    width: 16px; /* Thumb width */
    height: 16px; /* Thumb height */
    border-radius: 50%; /* Round thumb */
    background: #FFFFFF; /* White thumb */
    border: 1px solid #050038; /* Dark border */
    cursor: pointer; /* Pointer cursor */
}

/* Output Styling */
.output {
    width: 80px; /* Fixed width for uniformity */
    height: 30px; /* Fixed height */
    text-align: center; /* Center text */
    font-size: 14px; /* Text size */
    font-weight: bold; /* Highlight the value */
    color: #696688; /* Subtle text color */
    background-color: #F1F3FD; /* Light background */
    border: 1px solid #ccc; /* Subtle border */
    border-radius: 6px; /* Rounded edges */
    display: flex; /* Flexbox for centering */
    align-items: center; /* Center vertically */
    justify-content: center; /* Center horizontally */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow */
}



#rate-config-slider {
    width: 100%; /* Full width for responsiveness */
}


.slider-labels {
  display: flex;
  justify-content: space-between; /* Space out the labels */
  margin-top: 8px; /* Add spacing below the slider */
  font-size: 14px; /* Adjust font size for readability */
  color: #333; /* Optional: Change label color */
}

.slider-labels span {
  /* Make labels take equal space */
  text-align: center; /* Center-align the text */
}

@media (max-width: 868px) {
/* Label Styling */
.roi-slider-container label {
    margin-left: 10px;
}

/* Slider and Output Wrapper */
.page-template-roi-calculator-page .slider-wrapper {
    margin-left: 12px;
    margin-top: 12px;
}

}



.page-template-roi-calculator-page .results {
    flex: 1; /* Allow the results section to scale */
    padding: 24px; /* Inner padding for results */
    border: 1px solid #ccc; /* Add a border for clarity */
    border-radius: 16px; /* Rounded corners */
    background-color: #ffffff; /* White background */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    height: auto; /* Allow height to adjust dynamically */
    overflow-y: auto; /* Add scrolling if content overflows */
    box-sizing: border-box; /* Include padding in width calculations */
    transform: scale(0.95);
    transform-origin: top center;
}


.page-template-roi-calculator-page label {
    color: #696688;
    margin-bottom: 5px;
    font-family: Inter;
    font-size: 18px;
    font-weight: 700;
    line-height: 14px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;

}

.roi-slider-container label {
    font-size: 18px; /* Font size for title */
    font-weight: bold; /* Make the title bold */
    color: #696688; /* Subtle text color */
    margin-bottom: 5px; /* Space between title and slider-wrapper */
    margin-left: 30px;


}
.page-template-roi-calculator-page .roi-slider-container h5{
    color: #696688;
    margin-left: 30px;
    font-family: Inter;
    font-size: 22px;
    font-weight: 700;
    line-height: 26.63px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
}

.page-template-roi-calculator-page label[for="rate-config-slider"] {
    font-size: 14px;
    font-weight: 700;
    color: #BC42B9;
    margin-left: 0;
}


.result-card-title-section {
    text-align: center;
}

.result-card-title-section h5 {
    font-size: x-large;
    color: #696688;
    margin: 0; /* Remove unnecessary spacing */
}

.result-card-title-section p {
    margin-top: 0%;
    color: #BC42B9;
    font-weight: bold;
    font-size: medium;
}

.result-card-roi-section {
    text-align: center;
    padding: 10px;
}

.result-card-roi-section h3 {
    font-size: 42px;
    color: #050038;
    margin: 0; /* Remove unnecessary spacing */
    margin-bottom: 5px;
}

.result-card-roi-section p {
    margin-top: 0;
    color: #18AD50;
    font-weight: 700;
    font-size: 16px;
    line-height: 16px;
}

#application-result-container {
    display: flex;
    flex-direction: column; /* Stack items vertically */
    gap: 20px; /* Space between each box */
    width: 100%; /* Full width */
    max-width: 600px; /* Optional: limit max width */
    margin: 0 auto; /* Center within parent container */
    margin-top: 5%;
}

.application-box {
    padding: 10px;
    text-align: left; /* Center align the text */
    color: #BC42B9;
    font-weight: 700;
    font-size: 16px;
}

.output-box {
    margin-top: 10px; /* Add spacing above the output box */
    padding: 0; /* Remove unnecessary padding */
    display: flex;
    justify-content: center; /* Center content horizontally */
    align-items: center; /* Center content vertically */
    width: 100%; /* Stretch to container's width */
    max-width: 90px; /* Set the desired smaller box size */
    height: 30px; /* Fixed height */
    background-color: #F1F3FD; /* Light background color */
    border-radius: 6px; /* Slightly rounded corners */
    border: 1px solid #ccc;
    box-sizing: border-box; /* Include padding in height/width calculations */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow for elevation */
    font-size: 14px; /* Adjust font size for readability */
    font-weight: bold; /* Make the number stand out */
    color: #696688; /* Set the text color */
    text-align: center; /* Center text if it spans multiple lines */
}


.page-template-roi-calculator-page hr {
    margin: 20px 0;
}

/* Base Slider Styling */
.page-template-roi-calculator-page input[type="range"] {
    width: 360px;               /* Slider width */
    height: 8px;                /* Slider height */
    appearance: none;           /* Remove default styles */
    border-radius: 4px;         /* Rounded edges */
    background: linear-gradient(to right, #050038 0%, #F1F3FD 100%); /* Default gradient */
    outline: none;              /* Remove focus outline */
    transition: background 0.3s ease; /* Smooth transition */
}

/* Custom Thumb Styling (Webkit Browsers) */
.page-template-roi-calculator-page input[type="range"]::-webkit-slider-thumb {
    appearance: none;
    width: 20px;                /* Thumb width */
    height: 20px;               /* Thumb height */
    border-radius: 10px;        /* Circular thumb */
    background: #FFFFFF;        /* White thumb */
    border: 1px solid #050038;  /* Midnight border */
    cursor: pointer;            /* Pointer cursor on hover */
}

/* Custom Thumb Styling (Firefox) */
.page-template-roi-calculator-page input[type="range"]::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 10px;
    background: #FFFFFF;
    border: 1px solid #050038;
    cursor: pointer;
}

/* Custom Thumb Styling (IE/Edge) */
.page-template-roi-calculator-page input[type="range"]::-ms-thumb {
    width: 20px;
    height: 20px;
    border-radius: 10px;
    background: #FFFFFF;
    border: 1px solid #050038;
    cursor: pointer;
}

/* Styling the container for Monthly Results */
#details-results-container {
    margin: 20px 0;
    padding: 15px;
    background-color: #FFFFFF; /* Light background for better readability */
}

.monthly-results-title {
    display: block; /* Ensures it spans full width */
    font-size: 1.5rem; /* Larger font size for emphasis */
    font-weight: bold; /* Bold for prominence */
    color: #BC42B9; /* Midnight blue for a professional look */
    margin-bottom: 20px; /* Space below the title */
    text-align: center; /* Center-align the title */
    font-size: 14px;
}

#calculated-results {
    font-size: 1rem; /* Standard font size for results */
    line-height: 1.5; /* Improve readability with line spacing */
    color: #696688; /* Subtle color for content text */
    margin-top: 10px; /* Space between title and results */
}

#monthly-results-section {
    background-color: #fff; /* White background */
    padding: 20px;
    border-radius: 8px; /* Rounded corners */
    max-width: 600px; /* Width limit */
    margin: 0;
    font-family: 'Inter', sans-serif;
    font-weight: 700;

}

.page-template-roi-calculator-page .section-title {
    font-size: 20px !important; /* Title size */
    font-weight: bold;
    color: #BC42B9; /* Purple color */
    text-align: center; /* Center title */
    margin: 0;
    letter-spacing: normal;
}

.results-wrapper {
    display: flex;
    flex-direction: column; /* Stack results vertically */
    gap: 10px; /* Space between rows */
}

.result-row {
    display: flex;
    justify-content: space-between; /* Space out label and value */
    align-items: center; /* Align items vertically */
    padding: 10px 0;
}

.result-label {
    font-size: 16px;
    color: #050038; /* Dark text for label */
    padding: 3px;
}

.result-value {
    font-size: 16px;
    font-weight: bold;
}

.result-value.revenue {
    color: #18AD50; /* Green color for revenue */
}
/* CTA Container */
.page-template-roi-calculator-page .cta-container {
    margin-top: 20px; /* Space above the buttons */
    text-align: center; /* Center-align the buttons */
}

/* CTA Button Styling */
.page-template-roi-calculator-page .cta-btn {
    display: inline-block; /* Inline block for button spacing */
    padding: 12px 24px; /* Button size */
    font-size: 16px; /* Font size */
    font-weight: 600; /* Bold text */
    text-decoration: none; /* Remove underline */
    border-radius: 8px; /* Rounded corners */
    cursor: pointer; /* Pointer cursor on hover */
    transition: all 0.3s ease; /* Smooth hover effect */
    margin-top: 35px;

}

/* Primary Button */
.cta-btn.primary-btn {
    background-color: #FF6FBC; /* Green background */
    color: white; /* White text */
    border: none; /* No border */
    width: 100%;
    font-size: 18px;
}

.cta-btn.primary-btn:hover {
    background-color: #ff44a8;/* Darker green on hover */
}

/* Make results responsive */
@media (min-width: 1200px) {
    .roi-container {
        gap: 40px; /* Increase spacing between sections */
    }
    .results {
        max-width: 600px; /* Expand results section on widescreens */
    }
}

@media (max-width: 868px) {
    .roi-container {
        flex-direction: column; /* Stack sections vertically */
        align-items: center; /* Center align stacked sections */
        gap: 0;
    }
    .roi-section {
        width: 100%; /* Full width for smaller screens */
        padding: 15px;
    }
    .page-template-roi-calculator-page .results {
        max-width: 100%; /* Allow results section to stretch */
    }

}
/* .last-chance-cta.under-calculator-section-footer {
    background-image: url('../../../joinworth/images/bg-last-chance-cta.svg');
} */

.last-chance-cta.under-calculator-section-footer h2 {
    color: #fff;
    letter-spacing: normal;
}


/* FAQ Section Styling */
.page-template-roi-calculator-page .faq-section {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    color: #141437;
    font-family: Arial, sans-serif;
    border-radius: 10px;
    margin-bottom: 40px;
    margin-top: 35px;
  }

  .faq-section h2 {
  width: 500px;
  text-align: center;
  font-size: 32px;
  margin: 0 auto 30px; /* Center horizontally with auto */
  color: #141437;
  letter-spacing: normal;
  }

  /* FAQ Grid */
  .faq-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Two equal-width columns */
    gap: 20px; /* Spacing between columns */
  }

  .roi-faq-column {
    display: flex;
    flex-direction: column;
    gap: 15px; /* Spacing between FAQ items within a column */
  }

  /* FAQ Item */
  .roi-faq-item {
    border-bottom: 1px solid #DFDFDF;
    padding-bottom: 10px;
  }

  .faq-question {
    width: 100%;
    background: transparent;
    color: #141437;
    text-align: left;
    padding: 15px;
    border: none;
    outline: none;
    cursor: pointer;
    font-size: 18px;
    display: flex;
    align-items: center;
    font-weight: bold;
  }

  .faq-question:hover {
    color: #ff4081;
    cursor: pointer;
  }

  .toggle-icon {
    font-size: 2rem;
    margin-right: 18px;
    transition: transform 0.3s ease;
    color: #FF6FBC;
    display: inline-block;
    transform-origin: center;
  }

  /* FAQ Answer */
  .faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    color: #696688;
    padding: 0 15px;
  }

  .faq-answer p {
    margin: 15px 0px 15px 30px;
    text-align: left;
}

  .roi-faq-item.active .faq-answer {
    max-height: 200px; /* Adjust height based on content */
  }

  .roi-faq-item.active .toggle-icon {
    content: "-";
    transform: rotate(0);
    color: #ff4081;
  }



/* Mobile Styles */
@media (max-width: 600px) {

    .faq-section {
        max-width: 90%;
    }


    .faq-section h2 {
      text-align: center;
      font-size: 20px;
      color: #141437;
      padding: 20px;
      width: auto;

    }


    .faq-question {
      font-size: 14px; /* Reduce question text size */
      padding: 12px; /* Reduce padding */
    }


    .faq-answer p {
      font-size: 13px; /* Reduce answer text size */
      padding: 12px; /* Adjust padding */
    }


    .faq-icon {
      font-size: 18px; /* Adjust icon size */
    }
  }

  /* form css */
/* Modal Styling */
.page-template-roi-calculator-page .modal {
    display: none; /* Hidden by default */
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: rgba(0, 0, 0, 0.5); /* Black background with opacity */
    opacity: 0; /* Hide the modal visually */
    transition: opacity 0.3s ease, visibility 0.3s ease; /* Smooth fade-in effect */
    align-items: center;
    justify-content: center; /* Center modal content */
    pointer-events: none; /* Prevent event blocking */

  }

  .page-template-roi-calculator-page .modal.show {
    display: flex; /* Ensure it's flex for centering */
    pointer-events: auto; /* Enable interactions */
    opacity: 1; /* Fade in the modal */
  }

  /* Modal Content */
  .page-template-roi-calculator-page .modal-content {
    background-color: #fff;
    margin: 0 auto; /* Center horizontally */
    padding: 20px;
    border-radius: 18px;
    width: 30%;
    max-width: 90%; /* Prevent modal from exceeding screen width */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    transform: scale(0.9); /* Initial scaling for animation effect */
    transition: transform 0.3s ease, opacity 0.3s ease; /* Smooth zoom and fade effects */
    margin-top: 70px;
  }

  .page-template-roi-calculator-page .modal.show .page-template-roi-calculator-page .modal-content {
    transform: scale(1); /* Restore scale on show */
  }

  /* Close Button */
  .page-template-roi-calculator-page .close-button {
    position: absolute;
    top: 10px;
    right: 15px;
    color: #aaa;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
  }

  .page-template-roi-calculator-page .close-button:hover {
    color: #000;
  }

  /* Form Styling */
  .page-template-roi-calculator-page form#custom-form {
    display: flex;
    flex-direction: column;
    gap: 15px; /* Add spacing between fields */
    padding-top: 22px;
  }

  .page-template-roi-calculator-page form#custom-form label {
    font-weight: bold;
    margin-bottom: 5px;
    font-size: 18px;
  }

  .page-template-roi-calculator-page form#custom-form input {
    padding: 10px;
    font-size: 1em;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
  }

  .page-template-roi-calculator-page form#custom-form input:focus {
    outline: none;
    border-color: #FF6FBC; /* Highlight border on focus */
    box-shadow: 0 0 5px rgba(255, 111, 188, 0.5);
  }

  .page-template-roi-calculator-page form#custom-form button {
    background-color: #FF6FBC;
    color: #fff;
    padding: 10px;
    border: none;
    border-radius: 8px;
    font-size: 18px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    display: block;
    margin-top: 20px;
    margin-bottom: 20px;
    font-weight: 600;
  }

  .page-template-roi-calculator-page form#custom-form button:hover {
    background-color: rgba(255, 111, 188, 0.5) !important;
  }

  /* Responsive Design */
  @media (max-width: 868px) {
    .page-template-roi-calculator-page .modal-content {
      width: 90%; /* Expand modal width for smaller screens */
      padding: 15px;
      margin-top: 40px;
    }

    .page-template-roi-calculator-page .close-button {
      font-size: 24px; /* Slightly smaller close button */
      top: 5px;
      right: 10px;
    }
  }

  @media (min-width: 869px) and (max-width: 1200px) {
    .page-template-roi-calculator-page .modal-content {
      width: 50%; /* Adjust for tablet-sized screens */
      margin-top: 40px;
    }
  }
  /* form css */

  .roi-hero-text h1 {
    font-size: 54px;
    font-weight: 700;
    color: #ffffff;
    margin: 0;
    line-height: 1.2;
    width: 130%;
    letter-spacing: normal;
}

.paragraph-text .bullet-section {
    padding-left: 40px;
    margin: 18px 0;
}

.tooltip {
    position: relative;
    display: inline-block;
    cursor: pointer;
    font-size: 0.8em;
    color: #BC42B9;
    margin-left: 5px;
    font-weight: bold;
}

.tooltip-text {
    visibility: hidden;
    width: 200px;
    background-color: rgba(51, 51, 51, 0.7); /* 0.8 makes it slightly transparent */
    color: #fff;
    text-align: center;
    padding: 6px;
    border-radius: 4px;
    position: absolute;
    bottom: 120%;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.8em;
    line-height: 1.4;
    white-space: normal;
    
    /* Smooth fade-in effect */
    opacity: 0;
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}



.tooltip:hover .tooltip-text,
.tooltip:focus .tooltip-text,
.tooltip:active .tooltip-text {
    visibility: visible;
    opacity: 1;
}