/* Accounting & Bookkeeping page styles */

/* Complementary blue surfaces for this page's existing sections. */
.main-wrapper .section_home-headache {
    background-color: #e8edff;
}

.main-wrapper .layout409_card {
    background-color: #edf1ff;
    box-shadow: 0 4px 8px rgba(24, 32, 77, 0.05),
                0 16px 32px -12px rgba(24, 32, 77, 0.18);
}

.main-wrapper .section_home-pre-footer {
    background-color: #dce5ff;
}

.main-wrapper .eyebrow.cc-green {
    color: #3546ed;
}

.section_home-headache .list1_item {
    border-color: #cdd6f2;
}

.section_home-headache .right-difference .list1_item_icon {
    filter: grayscale(1) sepia(1) saturate(3) hue-rotate(185deg);
}

/* Header artwork: preserve the full image at every screen size. */
.section_service-hero .services-hero.accounting-hero-visual {
    width: 100%;
    max-width: 460px;
    height: auto;
    min-width: 0;
    justify-self: center;
}

.accounting-hero-visual .header1_image {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1237 / 1272;
    object-fit: contain;
    border-radius: 24px;
    filter: grayscale(1) sepia(1) saturate(3) hue-rotate(185deg);
    mix-blend-mode: multiply;
}

@media screen and (min-width: 992px) {
    .section_service-hero .accounting-hero-visual {
        transform: translateX(-32px);
    }
}

* {
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            -o-font-smoothing: antialiased;
        }

        body:has(.contact-modal1_component[style*='opacity: 1']) {
            overflow: hidden;
        }

        :not(.card)>h3 {
            font-size: 2rem !important;
        }

        @media screen and (max-width: 767px) {
            :not(.card)>h3 {
                font-size: 1.75rem !important;
            }
        }

/* 1. Responsive Font Sizing */

        @media (max-width: 239px) {
            html {
                font-size: 16px;
            }
        }

        @media (min-width: 240px) and (max-width: 767px) {
            html {
                font-size: calc(10.67px + 5.33 * ((100vw - 240px) / 239));
            }
        }

        @media (min-width: 768px) and (max-width: 991px) {
            html {
                font-size: calc(12.39px + 3.61 * ((100vw - 768px) / 223));
            }
        }

        @media (min-width: 992px) and (max-width: 1439px) {
            html {
                font-size: calc(11.02px + 4.98 * ((100vw - 992px) / 448));
            }
        }

        @media (min-width: 1440px) {
            html {
                font-size: 16px;
            }
        }

        /* 2. Container Styles */

        .container-large {
            max-width: 90rem;
        }

        /* 3. Text Optimization and Rendering */

        body {
            /* Applies font smoothing and optimizes legibility of text for the whole body of the document */
            -webkit-font-smoothing: antialiased;
            /* For Webkit browsers like Chrome and Safari */
            -moz-osx-font-smoothing: grayscale;
            /* For Firefox */
            font-smoothing: antialiased;
            /* Standard CSS property (though not all browsers support it) */
            text-rendering: optimizeLegibility;
            /* Prioritize legibility over rendering speed and geometric precision */
        }

        /* Apply text wrapping to balance the lines 'visually' maintaining even line lengths in headings and blockquotes */

        blockquote {
            text-wrap: balance;
        }

        /* 4. Layout and Sizing Utilities */

        /* Create a class of .div-square which maintains a 1:1 dimension of a div */

        .div-square::after {
            content: '';
            display: block;
            padding-bottom: 100%;
        }

        /* 5. Text Truncation Styles */

        .text-style-3lines,
        .text-style-2lines {
            display: -webkit-box;
            overflow: hidden;
            -webkit-box-orient: vertical;
        }

        /* Apply "..." after 3 lines of text */

        .text-style-3lines {
            -webkit-line-clamp: 3;
        }

        /* Apply "..." after 2 lines of text */

        .text-style-2lines {
            -webkit-line-clamp: 2;
        }

        /* Apply "..." at 100% width */

        .truncate-width {
            width: 100%;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        /* 6. Scrollbar Removal */

        .no-scrollbar {
            -ms-overflow-style: none;
            overflow: -moz-scrollbars-none;
        }

        .no-scrollbar::-webkit-scrollbar {
            display: none;
        }

        /* 7. Focus States */

        /* Focus state style for keyboard navigation for the focusable elements */

        *[tabindex]:focus-visible,
        input[type='file']:focus-visible {
            outline: 0.125rem solid #4d65ff;
            outline-offset: 0.125rem;
        }

        /* 8. Rich Text Element Adjustments */

        /* Get rid of top margin on first element in any rich text element */

        .w-richtext> :not(div):first-child,
        .w-richtext>div:first-child> :first-child {
            margin-top: 0 !important;
        }

        /* Get rid of bottom margin on last element in any rich text element */

        .w-richtext> :last-child,
        .w-richtext ol li:last-child,
        .w-richtext ul li:last-child {
            margin-bottom: 0 !important;
        }

        *:not(.w-richtext) p a {
            text-decoration: underline;
        }

        .w-richtext iframe,
        .w-richtext img {
            max-width: 100%;
            display: block;
        }

        /* 9. Color Inheritance */

        /* Set color style to inherit */

        .inherit-color * {
            color: inherit;
        }

        /* 10. Dotted Underline Effect */

        .dotted-underline {
            text-decoration: none;
            position: relative;
        }

        /* Apply the effect only for screens with a minimum width of 1024px */

        @media screen and (min-width: 1024px) {
            .dotted-underline::after {
                content: '';
                position: absolute;
                left: 0;
                bottom: -6px;
                /* Moved slightly closer to the text */
                width: 100%;
                height: 4px;
                /* Reduced height */
                background-image: radial-gradient(circle, currentColor 35%, transparent 35%);
                background-size: 6px 4px;
                /* Reduced size */
                background-position: 0 center;
                background-repeat: space;
                opacity: 0;
                transition: opacity 0.3s ease;
            }
            .dotted-underline:hover::after {
                opacity: 1;
            }
        }

        /* 11. Navbar Dropdown Styling */

        /* Style for the dropdown list centering and hover interaction on desktop */

        @media screen and (min-width: 992px) {
            /* Hover effect to show the dropdown */
            .navbar14_menu:hover .navbar14_dropdown-list {
                opacity: 1;
                /* Fade in the dropdown */
                transform: translateX(-50%) translateY(0);
                /* Slide up the dropdown */
            }
        }

        /* 12. Current Glossary Heading */

        .content28_link.w--current {
            color: #19813c;
            background-color: transparent;
        }

/*Add code for smooth scrolling*/

        .swiper-wrapper {
            -webkit-transition-timing-function: linear !important;
            -o-transition-timing-function: linear !important;
            transition-timing-function: linear !important;
        }

/* Keep the service layout within the shared page wrapper on narrow screens. */
.main-wrapper {
    width: 100%;
    min-width: 0;
}