/* ============================================
   TALLYSTACK RESPONSIVE STYLES - FINAL FIX V2
   Perfect mobile view without breaking desktop
   Desktop (992px+) completely untouched
   ============================================ */

/* ============================================
   TABLET & MOBILE ONLY (< 992px)
   ============================================ */

@media only screen and (max-width: 991px) {

    /* Prevent horizontal scroll - ULTRA AGGRESSIVE FIX */
    html {
        overflow-x: hidden !important;
        max-width: 100vw !important;
        width: 100vw !important;
        position: relative !important;
    }

    body {
        overflow-x: hidden !important;
        width: 100vw !important;
        max-width: 100vw !important;
        position: relative !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Force all elements to respect viewport width */
    * {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    *:not(html):not(body) {
        max-width: 100% !important;
    }

    /* Nuclear option - catch everything except interactive elements */
    body * {
        max-width: 100% !important;
    }

    /* Exception: Allow header and menu elements to function properly */
    .header,
    .qodef-page-header,
    .qodef-menu-area,
    .header-inner,
    .mobile-menu-toggle,
    #mobileMenuToggle,
    .mobile-menu,
    #mobileMenu,
    .mobile-menu *,
    #mobileMenu * {
        max-width: none !important;
    }

    /* Exception: Allow phone input to display properly - CRITICAL */
    .phone-input-group,
    .phone-input-group *,
    .phone-input-group select,
    .phone-input-group input,
    .phone-input-group input[type="tel"],
    input[type="tel"],
    input[name="phone"] {
        max-width: none !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .phone-input-group {
        width: 100% !important;
        display: flex !important;
        align-items: stretch !important;
    }

    .phone-input-group select {
        width: 85px !important;
        flex-shrink: 0 !important;
        display: block !important;
    }

    .phone-input-group input[type="tel"],
    .phone-input-group input[name="phone"] {
        flex: 1 !important;
        min-width: 0 !important;
        width: auto !important;
        display: block !important;
        visibility: visible !important;
    }

    /* Prevent horizontal scroll on main containers only */
    body,
    body > *:not(.mobile-menu):not(#mobileMenu),
    section,
    .container,
    [class*="wrapper"]:not(.mobile-menu),
    [class*="container"]:not(.mobile-menu),
    main,
    #main,
    .main {
        overflow-x: hidden !important;
    }

    /* Allow mobile menu to scroll vertically */
    .mobile-menu,
    #mobileMenu {
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* Ensure mobile menu toggle is clickable */
    .mobile-menu-toggle,
    #mobileMenuToggle {
        z-index: 10001 !important;
        pointer-events: auto !important;
        touch-action: manipulation !important;
        cursor: pointer !important;
        position: relative !important;
        display: flex !important;
    }

    /* Mobile menu must be above everything */
    .mobile-menu.active,
    #mobileMenu.active {
        z-index: 9999 !important;
        pointer-events: auto !important;
    }

    /* Header must allow clicks */
    .header,
    .qodef-page-header,
    .qodef-menu-area,
    .header-inner {
        pointer-events: auto !important;
        touch-action: auto !important;
    }

    /* Container fixes */
    .container {
        padding-left: 20px !important;
        padding-right: 20px !important;
        max-width: 100% !important;
        width: 100% !important;
        overflow-x: hidden !important;
    }

    /* Row fixes - prevent overflow */
    .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
        max-width: 100% !important;
    }

    .row > * {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    /* All sections must fit viewport */
    section {
        max-width: 100vw !important;
        overflow-x: hidden !important;
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* All divs must fit viewport */
    div {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Prevent any element from causing horizontal scroll */
    section > *,
    div > * {
        max-width: 100% !important;
    }

    /* Override any inline styles with margins that extend beyond viewport */
    [style*="margin-left"],
    [style*="margin-right"] {
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* All images responsive */
    img {
        max-width: 100% !important;
        height: auto !important;
    }

    /* Fix grid layouts that might overflow */
    [style*="display: grid"],
    [style*="display:grid"] {
        grid-template-columns: 1fr !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Fix flex layouts that might overflow */
    [style*="display: flex"],
    [style*="display:flex"] {
        flex-wrap: wrap !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Fix any elements with fixed widths */
    [style*="width:"],
    [style*="min-width:"],
    [style*="max-width: 1200px"],
    [style*="max-width:1200px"] {
        max-width: 100% !important;
        width: 100% !important;
    }

    /* Fix elements with large fixed pixel widths */
    [style*="width: 1200"],
    [style*="width:1200"],
    [style*="width: 1000"],
    [style*="width:1000"] {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Tables must scroll if needed */
    table {
        width: 100% !important;
        max-width: 100% !important;
        table-layout: auto !important;
    }

    /* Fix comparison section and table specifically */
    .comparison-section {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    .comparison-table-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

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

    /* Fix any absolute positioned elements */
    [style*="position: absolute"],
    [style*="position:absolute"] {
        max-width: 90vw !important;
    }

    /* Hero Section - Special handling */
    .hero-slider {
        padding: 40px 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    .hero-slider .container {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    .hero-slider .row {
        flex-direction: column-reverse !important;
    }

    .hero-slider .col-10,
    .hero-slider .col-sm-8,
    .hero-slider .col-lg-6 {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto 30px auto !important;
        text-align: center !important;
    }

    .hero-slider img {
        max-width: 90% !important;
        margin: 0 auto !important;
        display: block !important;
    }

    .hero-slider h1 {
        font-size: 32px !important;
        text-align: center !important;
        margin-bottom: 25px !important;
    }

    .hero-features-list {
        text-align: left !important;
        padding-left: 0 !important;
        list-style: none !important;
        margin-bottom: 30px !important;
    }

    .hero-features-list li {
        font-size: 15px !important;
        margin-bottom: 12px !important;
        padding-left: 30px !important;
        position: relative !important;
    }

    .hero-features-list li i {
        position: absolute !important;
        left: 0 !important;
    }

    .hero-slider .d-grid {
        text-align: center !important;
    }

    .hero-slider .btn {
        width: 100% !important;
        margin-bottom: 15px !important;
    }

    /* Typography - readable sizes */
    h1 {
        font-size: 32px !important;
        line-height: 1.3 !important;
        text-align: center !important;
        margin-bottom: 25px !important;
    }

    h2 {
        font-size: 28px !important;
        line-height: 1.3 !important;
        text-align: center !important;
        margin-bottom: 25px !important;
    }

    h3 {
        font-size: 24px !important;
        line-height: 1.3 !important;
        text-align: center !important;
        margin-bottom: 20px !important;
    }

    h4 {
        font-size: 22px !important;
        text-align: center !important;
        margin-bottom: 18px !important;
    }

    h5 {
        font-size: 20px !important;
        text-align: center !important;
        margin-bottom: 18px !important;
    }

    h6 {
        font-size: 18px !important;
        text-align: center !important;
        margin-bottom: 15px !important;
    }

    p {
        font-size: 16px !important;
        line-height: 1.7 !important;
    }

    /* Section padding */
    section {
        padding: 40px 0 !important;
    }

    /* Pricing Section - Proper stacking */
    .pricing-section {
        padding: 40px 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    .pricing-grid {
        display: block !important;
        grid-template-columns: 1fr !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .pricing-card {
        margin-bottom: 30px !important;
        max-width: 400px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        width: calc(100% - 40px) !important;
    }

    /* Testimonials Section - FIX COMPRESSED REVIEWS */
    .testimonials-section {
        padding: 40px 0 !important;
        overflow: hidden !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .reviews-carousel-container {
        overflow: visible !important;
        padding: 20px 0 !important;
        max-width: 100% !important;
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .ti-reviews-container-wrapper {
        display: block !important;
        flex-wrap: wrap !important;
        width: 100% !important;
        max-width: 100% !important;
        transform: none !important;
        transition: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .ti-review-item {
        min-width: 100% !important;
        max-width: 100% !important;
        width: 100% !important;
        margin-bottom: 20px !important;
        padding: 20px 15px !important;
        box-sizing: border-box !important;
        flex-shrink: 1 !important;
        flex-basis: 100% !important;
    }

    /* Review profile images - fix width on mobile */
    .ti-profile-img {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        max-width: 40px !important;
        flex-shrink: 0 !important;
        border-radius: 50% !important;
    }

    .ti-review-header {
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
    }

    .ti-profile-details {
        flex: 1 !important;
        min-width: 0 !important;
    }

    .ti-name {
        font-size: 15px !important;
    }

    .ti-date {
        font-size: 13px !important;
    }

    .ti-stars {
        font-size: 16px !important;
    }

    .ti-review-text {
        font-size: 14px !important;
        line-height: 1.6 !important;
    }

    /* Override inline calc() styles that cause overflow */
    [style*="calc("] {
        min-width: 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    /* Disable any transforms on mobile that might cause scroll */
    [style*="transform"] {
        transform: none !important;
    }

    .ti-review-header {
        display: flex !important;
        gap: 15px !important;
        margin-bottom: 15px !important;
    }

    .ti-review-text {
        font-size: 15px !important;
        line-height: 1.7 !important;
        color: #202020 !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }

    /* Hide carousel navigation on mobile */
    .carousel-nav {
        display: none !important;
    }

    /* Force all columns to full width */
    .col-lg-12, .col-lg-11, .col-lg-10, .col-lg-9,
    .col-lg-8, .col-lg-7, .col-lg-6, .col-lg-5,
    .col-lg-4, .col-lg-3, .col-lg-2, .col-lg-1,
    .col-md-12, .col-md-11, .col-md-10, .col-md-9,
    .col-md-8, .col-md-7, .col-md-6, .col-md-5,
    .col-md-4, .col-md-3, .col-md-2, .col-md-1,
    .col-10, .col-sm-8 {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        margin-bottom: 25px !important;
    }

    /* Center content in columns */
    [class*="col-"] {
        text-align: center !important;
    }

    /* Lists should be centered but text left-aligned */
    [class*="col-"] ul {
        display: inline-block !important;
        text-align: left !important;
        margin: 0 auto !important;
        padding-left: 20px !important;
    }

    /* Products page */
    .products-hero-title {
        font-size: 32px !important;
        margin-bottom: 35px !important;
        text-align: center !important;
    }

    .product-hero-card {
        text-align: center !important;
        margin-bottom: 35px !important;
        padding: 20px !important;
    }

    .product-hero-card img {
        max-width: 280px !important;
        margin: 0 auto 20px auto !important;
        display: block !important;
    }

    .product-hero-btn {
        font-size: 16px !important;
        padding: 14px 35px !important;
        display: inline-block !important;
        margin: 10px auto !important;
    }

    /* Pricing cards */
    .pricing-plans-section {
        padding: 40px 0 !important;
    }

    .pricing-plans-section h2 {
        font-size: 28px !important;
        margin-bottom: 20px !important;
        text-align: center !important;
    }

    .pricing-plans-section p {
        font-size: 16px !important;
        margin-bottom: 30px !important;
        text-align: center !important;
    }

    .pricing-card h3 {
        font-size: 22px !important;
        margin-bottom: 15px !important;
    }

    .pricing-card ul {
        text-align: center !important;
        list-style-position: inside !important;
        padding-left: 0 !important;
    }

    .pricing-card ul li {
        font-size: 15px !important;
        padding: 7px 0 !important;
    }

    /* Flip cards */
    .flip-card,
    .flip-box {
        height: auto !important;
        min-height: 280px !important;
        margin-bottom: 30px !important;
        text-align: center !important;
    }

    .flip-card-inner,
    .flip-box-inner {
        transform: none !important;
        position: static !important;
    }

    .flip-card-front,
    .flip-box-front {
        position: static !important;
        backface-visibility: visible !important;
        text-align: center !important;
        padding: 25px 15px !important;
    }

    .flip-card-back,
    .flip-box-back {
        display: none !important;
    }

    .flip-box-icon {
        width: 90px !important;
        height: 90px !important;
        margin: 0 auto 20px auto !important;
        display: block !important;
    }

    .flip-box-title,
    .flip-card-front h6 {
        font-size: 18px !important;
        margin-bottom: 12px !important;
        text-align: center !important;
    }

    .flip-box-front p,
    .flip-card-front p {
        font-size: 14px !important;
        line-height: 1.6 !important;
        text-align: center !important;
    }

    /* Service pages */
    .tally-multiuser-section,
    .tally-dedicated-section,
    .user-based-section,
    .tally-cloud-vm-section {
        padding: 40px 0 !important;
    }

    .tally-multiuser-section h1,
    .tally-dedicated-section h1,
    .user-based-section h1,
    .tally-cloud-vm-section h1 {
        font-size: 28px !important;
        text-align: center !important;
        margin-bottom: 25px !important;
    }

    .tally-multiuser-section p,
    .tally-dedicated-section p,
    .user-based-section p,
    .tally-cloud-vm-section p {
        font-size: 16px !important;
        line-height: 1.7 !important;
    }

    .tally-multiuser-section img,
    .tally-dedicated-section img,
    .user-based-section img,
    .tally-cloud-vm-section img {
        margin: 0 auto 30px auto !important;
        display: block !important;
        max-width: 100% !important;
    }

    /* Contact options section */
    .contact-options-section {
        padding: 40px 0 !important;
    }

    .contact-options-section h5 {
        font-size: 28px !important;
        margin-bottom: 25px !important;
        text-align: center !important;
    }

    .contact-options-section p {
        font-size: 16px !important;
        margin-bottom: 30px !important;
        text-align: center !important;
    }

    .contact-options-section img {
        max-width: 260px !important;
        height: auto !important;
        display: block !important;
        margin: 0 auto 25px auto !important;
    }

    /* More information section */
    .more-information-section {
        padding: 40px 0 !important;
    }

    .more-information-section h3 {
        font-size: 28px !important;
        margin-bottom: 30px !important;
        text-align: center !important;
    }

    .more-information-section img {
        margin: 0 auto 25px auto !important;
        display: block !important;
        max-width: 240px !important;
    }

    /* FAQ section */
    .faq-section {
        padding: 40px 0 !important;
    }

    .faq-section h2,
    .faq-section h5 {
        font-size: 28px !important;
        margin-bottom: 30px !important;
        text-align: center !important;
    }

    .faq-section img {
        margin: 0 auto 25px auto !important;
        display: block !important;
        max-width: 200px !important;
        float: none !important;
    }

    .faq-item-new {
        margin-bottom: 18px !important;
    }

    .faq-question-new {
        padding: 16px !important;
    }

    .faq-title-new {
        font-size: 16px !important;
        line-height: 1.5 !important;
        padding-right: 40px !important;
    }

    .faq-answer-new {
        display: none !important;
        padding: 0 !important;
        max-height: 0 !important;
        overflow: hidden !important;
        opacity: 0 !important;
        visibility: hidden !important;
    }

    .faq-item-new.active .faq-answer-new {
        display: block !important;
        padding: 18px !important;
        max-height: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        transition: opacity 0.3s ease, padding 0.3s ease !important;
    }

    .faq-answer-new p {
        font-size: 15px !important;
        line-height: 1.7 !important;
        margin: 0 !important;
    }

    .faq-answer-new img {
        float: none !important;
        display: block !important;
        margin: 0 auto 20px auto !important;
        max-width: 120px !important;
        width: 100px !important;
        height: 100px !important;
    }

    /* FAQ Accordion - Fix mobile display */
    .faq-accordion-section h2 {
        font-size: 28px !important;
        margin-bottom: 30px !important;
    }

    .accordion-item {
        margin-bottom: 10px !important;
        border: 1px solid #ddd !important;
        border-radius: 5px !important;
        overflow: hidden !important;
    }

    .accordion-button {
        font-size: 15px !important;
        padding: 12px 15px !important;
        background-color: #fff !important;
        color: #10376B !important;
    }

    .accordion-button:not(.collapsed) {
        background-color: #f8f9fa !important;
        color: #10376B !important;
    }

    .accordion-button::after {
        margin-left: auto !important;
    }

    .accordion-collapse {
        background-color: #fff !important;
    }

    .accordion-collapse.show {
        background-color: #f8f9fa !important;
    }

    .accordion-body {
        font-size: 14px !important;
        padding: 15px !important;
        line-height: 1.6 !important;
    }

    .accordion-body p {
        font-size: 14px !important;
        margin-bottom: 10px !important;
    }

    /* Blog section */
    .blog-section {
        padding: 40px 0 !important;
    }

    .blog-section h5 {
        font-size: 28px !important;
        margin-bottom: 30px !important;
        text-align: center !important;
    }

    .blog-item {
        margin-bottom: 35px !important;
        text-align: center !important;
    }

    .blog-item h5 {
        font-size: 20px !important;
        margin-bottom: 15px !important;
    }

    .blog-item p {
        font-size: 15px !important;
    }

    .blog-image {
        margin-bottom: 20px !important;
    }

    .blog-image img {
        border-radius: 10px !important;
    }

    /* Blog CTA section - center button on mobile */
    .blog-cta-section .container > div[style*="display: flex"] {
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        text-align: center !important;
    }

    .blog-cta-section .container > div > div {
        text-align: center !important;
        width: 100% !important;
        min-width: auto !important;
        flex: none !important;
    }

    .blog-cta-section .container > div > div:first-child {
        margin-bottom: 20px !important;
    }

    .blog-cta-section h2 {
        font-size: 20px !important;
        text-align: center !important;
        margin-bottom: 0 !important;
        line-height: 1.4 !important;
    }

    .blog-cta-section .container > div > div:last-child {
        text-align: center !important;
        display: flex !important;
        justify-content: center !important;
        width: 100% !important;
    }

    .blog-cta-btn {
        margin: 0 auto !important;
        display: inline-flex !important;
        text-align: center !important;
    }

    a.blog-cta-btn {
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* Video section */
    .video-section {
        padding: 40px 0 !important;
    }

    .video-section h2,
    .video-section h5 {
        font-size: 28px !important;
        text-align: center !important;
        margin-bottom: 25px !important;
    }

    .video-section iframe {
        max-width: 100% !important;
        width: 100% !important;
        aspect-ratio: 16 / 9 !important;
    }

    /* Contact/Connect form */
    .connect-section,
    #connect,
    .contact-section {
        padding: 40px 0 !important;
    }

    /* Contact section - mobile grid fix */
    .contact-content {
        display: block !important;
        grid-template-columns: 1fr !important;
    }

    .contact-form-wrapper {
        margin-bottom: 40px !important;
    }

    .contact-section h3 {
        font-size: 28px !important;
        margin-bottom: 15px !important;
        text-align: center !important;
    }

    .contact-section h4 {
        font-size: 16px !important;
        margin-bottom: 25px !important;
        text-align: center !important;
    }

    .connect-section h2,
    #connect h2,
    .contact-section h2 {
        font-size: 28px !important;
        margin-bottom: 30px !important;
        text-align: center !important;
    }

    .connect-section form,
    #connect form,
    .contact-section form {
        padding: 0 !important;
        max-width: 100% !important;
        margin: 0 auto !important;
    }

    /* Regular inputs - not phone input */
    .connect-section input:not(.phone-input-group input),
    .connect-section textarea,
    .connect-section select:not(.phone-input-group select),
    #connect input:not(.phone-input-group input),
    #connect textarea,
    #connect select:not(.phone-input-group select),
    .contact-section input:not(.phone-input-group input):not([type="radio"]),
    .contact-section textarea,
    .contact-section select:not(.phone-input-group select) {
        font-size: 15px !important;
        padding: 14px !important;
        margin-bottom: 0 !important;
        width: 100% !important;
    }

    /* Tally license radio buttons section - mobile responsive */
    .contact-section .form-group > div[style*="display: flex"] {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px !important;
        padding: 15px !important;
        background: rgba(255, 255, 255, 0.05) !important;
        border-radius: 8px !important;
    }

    .contact-section .form-group > div[style*="display: flex"] span:first-child {
        font-size: 15px !important;
        white-space: normal !important;
        margin-bottom: 5px !important;
        display: block !important;
        width: 100% !important;
    }

    .contact-section .form-group > div[style*="display: flex"] label {
        font-size: 15px !important;
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        cursor: pointer !important;
    }

    .contact-section .form-group > div[style*="display: flex"] input[type="radio"] {
        width: 18px !important;
        height: 18px !important;
        margin: 0 !important;
        flex-shrink: 0 !important;
        cursor: pointer !important;
    }

    .contact-section .form-group > div[style*="display: flex"] label span {
        line-height: 18px !important;
    }

    /* Fix Tally license Yes/No radio buttons - keep inline on mobile */
    .connect-section form > div:has(input[name="tally_license"]),
    .contact-section form > div:has(input[name="tally_license"]) {
        display: flex !important;
        flex-direction: column !important;
    }

    .connect-section form > div:has(input[name="tally_license"]) > div,
    .contact-section form > div:has(input[name="tally_license"]) > div {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 15px !important;
        flex-wrap: nowrap !important;
    }

    .connect-section input[name="tally_license"],
    .contact-section input[name="tally_license"] {
        width: auto !important;
        margin-right: 5px !important;
    }

    .connect-section label[for^="lic"],
    .contact-section label[for^="lic"] {
        display: inline-flex !important;
        align-items: center !important;
        white-space: nowrap !important;
        margin-right: 15px !important;
    }

    .connect-section button,
    #connect button,
    .contact-section button {
        font-size: 16px !important;
        padding: 14px 30px !important;
        width: 100% !important;
    }

    /* Contact info text on right side */
    .contact-content > div:last-child {
        padding-top: 0 !important;
    }

    .contact-content > div:last-child p {
        font-size: 22px !important;
        line-height: 1.6 !important;
        text-align: center !important;
    }

    /* Buttons */
    .btn,
    button,
    [class*="btn-"] {
        font-size: 16px !important;
        padding: 13px 30px !important;
    }

    /* Tables */
    table {
        display: block !important;
        overflow-x: auto !important;
        width: 100% !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* Footer */
    .footer-section {
        padding: 35px 0 !important;
        text-align: center !important;
    }

    .footer-section h5 {
        font-size: 20px !important;
        margin-top: 25px !important;
        margin-bottom: 18px !important;
    }

    .footer-section p,
    .footer-section li,
    .footer-section a {
        font-size: 14px !important;
    }

    .footer-section ul {
        padding-left: 0 !important;
        list-style-position: inside !important;
    }

    /* Footer - New Styles */
    .footer {
        text-align: center !important;
        padding: 40px 0 !important;
    }

    .footer-content {
        display: block !important;
    }

    .footer-column {
        text-align: center !important;
        margin-bottom: 40px !important;
        width: 100% !important;
    }

    .footer-title {
        font-size: 20px !important;
        text-align: center !important;
        margin-bottom: 20px !important;
    }

    .footer-column p {
        text-align: center !important;
        font-size: 15px !important;
        line-height: 1.7 !important;
    }

    .footer-links {
        list-style: none !important;
        padding: 0 !important;
        text-align: center !important;
    }

    .footer-links li {
        text-align: center !important;
        margin-bottom: 12px !important;
    }

    .footer-links a {
        font-size: 15px !important;
    }

    .social-icons {
        text-align: center !important;
        display: flex !important;
        justify-content: center !important;
        gap: 10px !important;
    }

    .footer-bottom {
        text-align: center !important;
        padding: 25px 0 !important;
    }

    .footer-bottom p {
        font-size: 14px !important;
        text-align: center !important;
        line-height: 1.6 !important;
    }

    /* WhatsApp float */
    .whatsapp-float {
        width: 60px !important;
        height: 60px !important;
        bottom: 20px !important;
        right: 20px !important;
    }

    /* Modal */
    #whatsappModal .modal-content {
        width: 95% !important;
        max-width: 500px !important;
        margin: 30px auto !important;
    }

    /* External Popup Forms - Force Responsive */
    .popup-form-container,
    .popup-wrapper,
    .popup-content,
    #popup-form-16,
    [id*="popup"],
    [class*="popup"] {
        width: 95% !important;
        max-width: 95vw !important;
        margin: 10px auto !important;
        padding: 15px !important;
        box-sizing: border-box !important;
    }

    .popup-form-container iframe,
    .popup-wrapper iframe,
    [id*="popup"] iframe {
        max-width: 100% !important;
        width: 100% !important;
    }

    /* Force all popup close buttons to be visible */
    [class*="popup"] .close,
    [class*="popup"] [class*="close"],
    [id*="popup"] .close,
    [id*="popup"] [class*="close"] {
        position: absolute !important;
        right: 10px !important;
        top: 10px !important;
        z-index: 99999 !important;
        font-size: 28px !important;
        cursor: pointer !important;
    }

    /* Benefits section */
    .benefits-section {
        padding: 40px 0 !important;
    }

    .benefits-section h2,
    .benefits-section h5 {
        font-size: 28px !important;
        margin-bottom: 30px !important;
        text-align: center !important;
    }

    .benefits-section [style*="display: flex"],
    .benefits-section [style*="display:flex"] {
        display: block !important;
        text-align: center !important;
        margin-bottom: 25px !important;
    }

    .benefits-section img {
        margin: 0 auto 18px auto !important;
        display: block !important;
        max-width: 70px !important;
    }

    .benefits-section h6 {
        font-size: 18px !important;
        margin-bottom: 10px !important;
    }

    .benefits-section p {
        font-size: 15px !important;
        text-align: center !important;
    }

    /* Tally info section */
    .tally-info-section {
        padding: 40px 0 !important;
    }

    .tally-info-section h2 {
        font-size: 28px !important;
        margin-bottom: 30px !important;
        text-align: center !important;
    }

    .tally-info-section img {
        margin: 0 auto 35px auto !important;
        display: block !important;
        max-width: 100% !important;
    }

    .tally-info-section ul {
        padding-left: 20px !important;
        margin-bottom: 25px !important;
        text-align: left !important;
    }

    .tally-info-section li {
        font-size: 16px !important;
        margin-bottom: 18px !important;
        line-height: 1.7 !important;
    }

    /* Tally Services Section */
    .tally-services-section {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    .tally-services-section .service-item {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Contact CTA section */
    .contact-cta-section {
        padding: 40px 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

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

    .contact-cta-section h5 {
        font-size: 28px !important;
        margin-bottom: 30px !important;
        text-align: center !important;
    }

    .contact-cta-section img {
        max-width: 240px !important;
        height: auto !important;
        margin: 0 auto 25px auto !important;
        display: block !important;
    }

    /* Key features section */
    .key-features-section {
        padding: 40px 0 !important;
    }

    .key-features-section h2 {
        font-size: 28px !important;
        margin-bottom: 30px !important;
        text-align: center !important;
    }

    .key-features-section img {
        margin: 0 auto 20px auto !important;
        display: block !important;
        max-width: 90px !important;
    }

    .key-features-section h6 {
        font-size: 18px !important;
        margin-bottom: 12px !important;
    }

    .key-features-section p {
        font-size: 15px !important;
        text-align: center !important;
    }

    /* Use Tally section */
    .use-tally-section {
        padding: 40px 0 !important;
    }

    .use-tally-section h5 {
        font-size: 24px !important;
        text-align: center !important;
        margin-bottom: 25px !important;
    }

    .use-tally-section img {
        margin: 0 auto 30px auto !important;
        display: block !important;
        max-width: 100% !important;
    }

    .use-tally-section p {
        font-size: 16px !important;
    }

    /* Why choose section */
    .why-choose-section {
        padding: 40px 0 !important;
    }

    .why-choose-section h2 {
        font-size: 28px !important;
        margin-bottom: 30px !important;
        text-align: center !important;
    }

    .why-choose-section img {
        margin: 0 auto 20px auto !important;
        display: block !important;
        max-width: 110px !important;
    }

    .why-choose-section h6 {
        font-size: 18px !important;
        margin-bottom: 12px !important;
    }

    .why-choose-section p {
        font-size: 15px !important;
        text-align: center !important;
    }

    /* Features Section - Fix icon width on mobile */
    .feature-item {
        display: block !important;
        text-align: center !important;
        margin-bottom: 35px !important;
    }

    .feature-icon {
        min-width: 60px !important;
        width: 60px !important;
        height: 60px !important;
        margin: 0 auto 15px auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background-color: #0080b7 !important;
        border-radius: 50% !important;
    }

    .feature-icon i {
        font-size: 24px !important;
        color: #ffffff !important;
        line-height: 1 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .feature-content {
        text-align: center !important;
    }

    .feature-content h5 {
        font-size: 18px !important;
        margin-bottom: 12px !important;
    }

    .feature-content p {
        font-size: 15px !important;
        line-height: 1.7 !important;
    }

}

/* ============================================
   SMALL MOBILE (< 576px)
   ============================================ */

@media only screen and (max-width: 575px) {

    .container {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    h1 {
        font-size: 28px !important;
    }

    h2 {
        font-size: 24px !important;
    }

    h3 {
        font-size: 22px !important;
    }

    h4 {
        font-size: 20px !important;
    }

    h5 {
        font-size: 18px !important;
    }

    h6 {
        font-size: 16px !important;
    }

    p {
        font-size: 15px !important;
    }

    section {
        padding: 35px 0 !important;
    }

    /* Footer - Small Mobile */
    .footer {
        padding: 30px 0 !important;
    }

    .footer-title {
        font-size: 18px !important;
        margin-bottom: 15px !important;
    }

    .footer-column {
        margin-bottom: 35px !important;
    }

    .footer-column p {
        font-size: 14px !important;
    }

    .footer-links a {
        font-size: 14px !important;
    }

    .footer-bottom p {
        font-size: 12px !important;
        padding: 0 10px !important;
    }

    .hero-slider h1 {
        font-size: 26px !important;
    }

    .hero-features-list li {
        font-size: 14px !important;
    }

    .product-hero-card img {
        max-width: 240px !important;
    }

    /* Contact form - small mobile */
    .contact-section h3 {
        font-size: 24px !important;
    }

    .contact-section h4 {
        font-size: 14px !important;
    }

    .contact-section input:not(.phone-input-group input):not([type="radio"]),
    .contact-section textarea,
    .contact-section select:not(.phone-input-group select) {
        font-size: 14px !important;
        padding: 12px !important;
    }

    .contact-section button {
        font-size: 15px !important;
        padding: 12px 25px !important;
    }

    .contact-content > div:last-child p {
        font-size: 18px !important;
        line-height: 1.5 !important;
    }

    .contact-options-section img,
    .contact-cta-section img {
        max-width: 220px !important;
    }

    .more-information-section img {
        max-width: 200px !important;
    }

    .faq-section img {
        max-width: 160px !important;
    }

    .faq-answer-new img {
        max-width: 100px !important;
    }

    .flip-box-icon {
        width: 75px !important;
        height: 75px !important;
    }

    .benefits-section img {
        max-width: 60px !important;
    }

    .key-features-section img {
        max-width: 75px !important;
    }

    .why-choose-section img {
        max-width: 90px !important;
    }

    /* Products Page - Info Box Fix */
    .qodef-info-box {
        height: auto !important;
        min-height: 320px !important;
        margin-bottom: 30px !important;
    }

    .qodef-info-box-inner {
        position: relative !important;
        transform: none !important;
        height: auto !important;
    }

    .qodef-info-box:hover .qodef-info-box-inner {
        transform: none !important;
    }

    .qodef-info-box-font-side, .qodef-info-box-back-side {
        position: relative !important;
        transform: none !important;
        backface-visibility: visible !important;
        -webkit-backface-visibility: visible !important;
        height: auto !important;
        min-height: 300px !important;
    }

    .qodef-info-box-back-side {
        display: none !important;
    }

    .qodef-info-box-front-side-inner,
    .qodef-info-box-back-side-inner {
        padding: 25px 15px !important;
    }

    .qodef-info-box-title h6 {
        font-size: 16px !important;
        margin-bottom: 10px !important;
    }

    .qodef-info-box-text p {
        font-size: 13px !important;
    }

    .qodef-info-box-icon-holder img {
        max-width: 80px !important;
        width: 80px !important;
        height: 80px !important;
        margin-bottom: 15px !important;
    }

}

/* Extra small phones - Popup specific fixes */
@media only screen and (max-width: 400px) {
    /* Force all popups to fit on small screens */
    .popup-form-container,
    .popup-wrapper,
    .popup-content,
    #popup-form-16,
    [id*="popup"],
    [class*="popup"],
    .whatsapp-modal-content,
    .otp-modal-content {
        width: 96% !important;
        max-width: 96vw !important;
        margin: 5px auto !important;
        padding: 10px !important;
        left: 2% !important;
        right: 2% !important;
        transform: none !important;
    }

    /* Reduce heading sizes in popups */
    [id*="popup"] h1,
    [id*="popup"] h2,
    [id*="popup"] h3,
    [class*="popup"] h1,
    [class*="popup"] h2,
    [class*="popup"] h3,
    .whatsapp-modal h3,
    .otp-modal h3 {
        font-size: 16px !important;
    }

    /* Make form inputs smaller */
    [id*="popup"] input,
    [id*="popup"] select,
    [id*="popup"] textarea,
    [class*="popup"] input,
    [class*="popup"] select,
    [class*="popup"] textarea {
        font-size: 14px !important;
        padding: 8px !important;
    }

    /* Make buttons fit */
    [id*="popup"] button,
    [class*="popup"] button {
        font-size: 14px !important;
        padding: 10px !important;
    }
}

/* Desktop 992px+ - completely untouched */