/**
 * Canvas Text Styles
 * Responsive styling for canvas-converted text elements
 */

/* Canvas General Styles */
.canvas-converted {
    display: inline-block;
    max-width: 100%;
    height: auto;
    vertical-align: baseline;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

/* Canvas in headings */
h1 .canvas-converted,
h2 .canvas-converted,
h3 .canvas-converted,
h4 .canvas-converted,
h5 .canvas-converted,
h6 .canvas-converted {
    display: block;
    margin: 0 auto;
}

/* Main headings size reduction - Desktop: small size, single line */
h1.convert-to-canvas,
h2.convert-to-canvas,
h3.convert-to-canvas {
    font-size: 1.1rem !important;
    line-height: 1.3 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
}

/* Specific heading sizes - Desktop */
h1.convert-to-canvas {
    font-size: 1.2rem !important;
}

h2.convert-to-canvas {
    font-size: 1.1rem !important;
}

h3.convert-to-canvas {
    font-size: 1rem !important;
}

/* Ensure headings stay on one line on desktop */
@media (min-width: 769px) {
    h1.convert-to-canvas,
    h2.convert-to-canvas,
    h3.convert-to-canvas {
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
}

/* Canvas in paragraphs */
p .canvas-converted {
    display: block;
    margin: 0;
}

/* Canvas in list items - now targeting span inside li */
li .canvas-converted {
    display: inline-block;
    vertical-align: middle;
    margin-left: 0 !important;
    padding-left: 0 !important;
    font-size: inherit;
    line-height: normal;
    image-rendering: auto;
    -webkit-font-smoothing: subpixel-antialiased;
    text-align: left !important;
    white-space: nowrap !important;
    overflow: visible !important;
}

/* List items with images - natural HTML layout */
ul {
    text-align: left !important;
    padding-left: 0;
    list-style-position: inside;
    margin-left: 0 !important;
    display: block;
}

li {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    line-height: normal;
    margin-bottom: 6px;
    text-align: left !important;
    white-space: nowrap !important;
    flex-wrap: nowrap !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
}

li img {
    flex-shrink: 0;
    max-width: 16px;
    max-height: 16px;
    margin-left: 0 !important;
}

/* Canvas in links */
a .canvas-converted {
    display: inline-block;
    vertical-align: middle;
}

/* Canvas in service boxes */
.service-boxarea .canvas-converted {
    display: block;
    margin: 0 auto;
}

/* Canvas in pricing boxes */
.pricing-box .canvas-converted {
    display: block;
    margin: 0;
    text-align: left !important;
}

.pricing-box ul {
    text-align: left !important;
}

.pricing-box li {
    text-align: left !important;
    justify-content: flex-start !important;
}

/* Canvas in hero section */
.hero1-section-area .canvas-converted {
    display: block;
    margin: 0;
}

/* Canvas in about section */
.about1-section-area .canvas-converted {
    display: block;
    margin: 0;
}

/* Prevent text selection on canvas */
.canvas-converted {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    pointer-events: auto;
}

/* Smooth rendering */
.canvas-converted {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .canvas-converted {
        max-width: 100%;
        width: auto !important;
        height: auto !important;
    }
    
    h1 .canvas-converted,
    h2 .canvas-converted,
    h3 .canvas-converted {
        font-size: inherit;
    }
    
    /* Mobile: small size, allow 2 lines */
    h1.convert-to-canvas,
    h2.convert-to-canvas,
    h3.convert-to-canvas {
        font-size: 0.9rem !important;
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        line-height: 1.4;
        max-height: 2.8em; /* Allow 2 lines */
    }
    
    h1.convert-to-canvas {
        font-size: 1rem !important;
    }
    
    h2.convert-to-canvas {
        font-size: 0.95rem !important;
    }
    
    h3.convert-to-canvas {
        font-size: 0.85rem !important;
    }
}

@media (max-width: 576px) {
    .canvas-converted {
        max-width: 100%;
    }
}

/* Loading state */
.canvas-loading {
    opacity: 0.5;
    transition: opacity 0.3s ease;
}

.canvas-loaded {
    opacity: 1;
    transition: opacity 0.3s ease;
}

/* Accessibility */
.canvas-converted[role="img"] {
    display: inline-block;
}

/* Print styles */
@media print {
    .canvas-converted::after {
        content: attr(data-original-text);
        display: block;
        font-family: inherit;
        font-size: inherit;
        color: inherit;
    }
    
    .canvas-converted canvas {
        display: none;
    }
}

/* High DPI displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .canvas-converted {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}

/* Carousel items */
.owl-carousel .canvas-converted,
.owl-item .canvas-converted {
    display: block;
    margin: 0 auto;
}

/* Blog items */
.blog-one__title .canvas-converted,
.blog-one__title.convert-to-canvas.canvas-converted {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.3 !important;
}

.blog-one__title .canvas-converted canvas,
.blog-one__title.convert-to-canvas.canvas-converted canvas {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 !important;
}

.blog-one__text .canvas-converted,
.blog-one__text.convert-to-canvas.canvas-converted {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.6 !important;
}

.blog-one__text .canvas-converted canvas,
.blog-one__text.convert-to-canvas.canvas-converted canvas {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 !important;
}

/* Testimonial items */
.testimonial-boxarea .canvas-converted {
    display: block;
    margin: 0;
}

/* FAQ items */
.faq-boxarea .canvas-converted {
    display: block;
    margin: 0;
}

/* Contact section */
.contact-boxarea .canvas-converted {
    display: block;
    margin: 0;
}

/* Footer */
.footer1-section-area .canvas-converted {
    display: block;
    margin: 0;
}

/* Ensure canvas doesn't break layout */
.canvas-converted {
    box-sizing: border-box;
}

/* Animation support */
@keyframes fadeInCanvas {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.canvas-converted {
    animation: fadeInCanvas 0.3s ease-in;
}

/* Testimonials section - desktop: original size, mobile: smaller */
/* Desktop: keep original size (no override) */
@media (min-width: 769px) {
    .testimonial1-section-area .slider-boxarea .content .convert-to-canvas,
    .testimonial1-section-area .slider-boxarea .content .canvas-converted,
    .slider-boxarea .content .convert-to-canvas,
    .slider-boxarea .content .canvas-converted {
        font-size: inherit !important;
        text-align: left !important;
        white-space: nowrap !important;
    }
    
    .testimonial1-section-area .slider-boxarea .content a.convert-to-canvas,
    .testimonial1-section-area .slider-boxarea .content a.canvas-converted,
    .slider-boxarea .content a.convert-to-canvas,
    .slider-boxarea .content a.canvas-converted {
        font-size: inherit !important;
        text-align: left !important;
        white-space: nowrap !important;
    }
    
    .testimonial1-section-area .slider-boxarea .content p.convert-to-canvas,
    .testimonial1-section-area .slider-boxarea .content p.canvas-converted,
    .slider-boxarea .content p.convert-to-canvas,
    .slider-boxarea .content p.canvas-converted {
        font-size: inherit !important;
        text-align: left !important;
        white-space: nowrap !important;
    }
}

/* FAQ questions only (not answers) - desktop: original size, mobile: smaller */
/* Desktop: keep original size */
@media (min-width: 769px) {
    .accordion-button .convert-to-canvas,
    .accordion-button .canvas-converted,
    .accordion-button span.convert-to-canvas,
    .accordion-button span.canvas-converted,
    .accordion-button .convert-to-canvas canvas,
    .accordion-button .canvas-converted canvas {
        font-size: inherit !important;
        line-height: inherit !important;
        text-align: left !important;
        white-space: nowrap !important;
        display: block !important;
        margin-left: 0 !important;
        padding-left: 0 !important;
    }
    
    /* Ensure accordion button itself is left-aligned */
    .accordion-button {
        text-align: left !important;
        justify-content: flex-start !important;
    }
}

/* Ensure FAQ answers are NOT affected */
.accordion-body .convert-to-canvas,
.accordion-body .canvas-converted {
    font-size: inherit !important;
}

/* Force left alignment for FAQ buttons */
.accordion-button {
    text-align: left !important;
    justify-content: flex-start !important;
}

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

/* Force left alignment for testimonials content */
.slider-boxarea .content,
.testimonial1-section-area .slider-boxarea .content {
    text-align: left !important;
}

/* Center numbers inside circular images in pricing boxes */
.pricing-inner-section-area .single-pricing-area .pricing-box {
    text-align: center !important;
}

.pricing-inner-section-area .single-pricing-area .pricing-box h2 {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto !important;
    text-align: center !important;
    vertical-align: middle !important;
}

.pricing-inner-section-area .single-pricing-area .pricing-box h2 .canvas-converted,
.pricing-inner-section-area .single-pricing-area .pricing-box h2 span.convert-to-canvas,
.pricing-inner-section-area .single-pricing-area .pricing-box h2 span.canvas-converted {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 2 !important;
    display: inline-block !important;
    margin: 0 !important;
    padding: 0 !important;
}

.pricing-inner-section-area .single-pricing-area .pricing-box h2 .elements19 {
    position: absolute !important;
    z-index: 1 !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
}

/* Why Choose Two Points - Fix layout for Canvas elements */
.why-choose-two__points {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.why-choose-two__points li {
    display: flex !important;
    align-items: flex-start !important;
    gap: 15px !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
    flex-wrap: nowrap !important;
}

.why-choose-two__points li .icon {
    flex-shrink: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.why-choose-two__points li .content {
    flex: 1 !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}

.why-choose-two__points li .content h3.canvas-converted,
.why-choose-two__points li .content h3.convert-to-canvas {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.3 !important;
}

.why-choose-two__points li .content p.canvas-converted,
.why-choose-two__points li .content p.convert-to-canvas {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.5 !important;
    white-space: normal !important;
}

.why-choose-two__points li .content canvas.canvas-converted {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Section Title - General Fix for Canvas elements */
.section-title {
    width: 100% !important;
}

.section-title.text-center {
    text-align: center !important;
}

.section-title.text-left {
    text-align: left !important;
}

.section-title__tagline-box {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    width: 100% !important;
    margin-bottom: 15px !important;
}

.section-title.text-left .section-title__tagline-box {
    justify-content: flex-start !important;
}

.section-title__tagline.canvas-converted,
.section-title__tagline.convert-to-canvas {
    display: inline-block !important;
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 auto !important;
    padding: 0 !important;
    vertical-align: middle !important;
}

.section-title.text-center .section-title__tagline.canvas-converted,
.section-title.text-center .section-title__tagline.convert-to-canvas {
    margin: 0 auto !important;
}

.section-title.text-left .section-title__tagline.canvas-converted,
.section-title.text-left .section-title__tagline.convert-to-canvas {
    margin: 0 !important;
}

.section-title__title.canvas-converted,
.section-title__title.convert-to-canvas {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 auto !important;
    padding: 0 !important;
    line-height: 1.4 !important;
}

.section-title.text-center .section-title__title.canvas-converted,
.section-title.text-center .section-title__title.convert-to-canvas {
    text-align: center !important;
    margin: 0 auto !important;
}

.section-title.text-left .section-title__title.canvas-converted,
.section-title.text-left .section-title__title.convert-to-canvas {
    text-align: left !important;
    margin: 0 !important;
}

.section-title__title.canvas-converted canvas,
.section-title__title.convert-to-canvas canvas {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 auto !important;
}

.section-title__text.canvas-converted,
.section-title__text.convert-to-canvas {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 15px auto 0 !important;
    padding: 0 !important;
    line-height: 1.6 !important;
}

.section-title.text-center .section-title__text.canvas-converted,
.section-title.text-center .section-title__text.convert-to-canvas {
    text-align: center !important;
    margin: 15px auto 0 !important;
}

.section-title.text-left .section-title__text.canvas-converted,
.section-title.text-left .section-title__text.convert-to-canvas {
    text-align: left !important;
    margin: 15px 0 0 !important;
}

.section-title__text.canvas-converted canvas,
.section-title__text.convert-to-canvas canvas {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 auto !important;
}

/* Portfolio One Top Section - Fix layout for Canvas elements */
.portfolio-one__top {
    width: 100% !important;
}

.portfolio-one__top .section-title {
    width: 100% !important;
    text-align: left !important;
}

.portfolio-one__top .section-title__tagline-box {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    width: 100% !important;
    margin-bottom: 15px !important;
}

.portfolio-one__top .section-title__tagline.canvas-converted,
.portfolio-one__top .section-title__tagline.convert-to-canvas {
    display: inline-block !important;
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    vertical-align: middle !important;
}

.portfolio-one__top .section-title__title.canvas-converted,
.portfolio-one__top .section-title__title.convert-to-canvas {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
    line-height: 1.4 !important;
}

.portfolio-one__top .section-title__title.canvas-converted canvas,
.portfolio-one__top .section-title__title.convert-to-canvas canvas {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 !important;
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .testimonial1-section-area .slider-boxarea .content .convert-to-canvas,
    .testimonial1-section-area .slider-boxarea .content .canvas-converted,
    .slider-boxarea .content .convert-to-canvas,
    .slider-boxarea .content .canvas-converted {
        font-size: 0.85rem !important;
    }
    
    .testimonial1-section-area .slider-boxarea .content a.convert-to-canvas,
    .testimonial1-section-area .slider-boxarea .content a.canvas-converted,
    .slider-boxarea .content a.convert-to-canvas,
    .slider-boxarea .content a.canvas-converted {
        font-size: 0.9rem !important;
    }
    
    .testimonial1-section-area .slider-boxarea .content p.convert-to-canvas,
    .testimonial1-section-area .slider-boxarea .content p.canvas-converted,
    .slider-boxarea .content p.convert-to-canvas,
    .slider-boxarea .content p.canvas-converted {
        font-size: 0.8rem !important;
    }
    
    .accordion-button .convert-to-canvas,
    .accordion-button .canvas-converted,
    .accordion-button span.convert-to-canvas,
    .accordion-button span.canvas-converted,
    .accordion-button .convert-to-canvas canvas,
    .accordion-button .canvas-converted canvas {
        font-size: 0.85rem !important;
    }
    
    .why-choose-two__points li {
        flex-direction: column !important;
        align-items: flex-start !important;
    }
    
    .why-choose-two__points li .content {
        width: 100% !important;
    }
    
    .portfolio-one__top .section-title__title.canvas-converted,
    .portfolio-one__top .section-title__title.convert-to-canvas {
        font-size: 0.9rem !important;
        line-height: 1.3 !important;
    }
}

/* Process Two Section - Fix layout for Canvas elements */
.process-two__single {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 15px !important;
    padding: 20px !important;
}

.process-two__title.canvas-converted,
.process-two__title.convert-to-canvas {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.3 !important;
    text-align: left !important;
}

.process-two__title.canvas-converted canvas,
.process-two__title.convert-to-canvas canvas {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 !important;
}

.process-two__text.canvas-converted,
.process-two__text.convert-to-canvas {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.6 !important;
    text-align: left !important;
}

.process-two__text.canvas-converted canvas,
.process-two__text.convert-to-canvas canvas {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 !important;
}

.process-two ul.row {
    display: flex !important;
    flex-wrap: wrap !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.process-two ul.row li {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    padding: 0 15px !important;
    margin-bottom: 30px !important;
}

@media (min-width: 992px) {
    .process-two ul.row li {
        flex: 0 0 33.333333% !important;
        max-width: 33.333333% !important;
    }
}