{% extends "base.html" %}
{% set _cms_title = get_page_content(page_id, 'title', g.lang_code) %}
{% set _cms_desc = get_page_content(page_id, 'description', g.lang_code) %}
{% set _cms_heading = get_page_content(page_id, 'page_heading', g.lang_code) %}
{% set _cms_page_desc = get_page_content(page_id, 'page_description', g.lang_code) %}
{% set _cms_head_html = get_page_content(page_id, 'head_html', g.lang_code) %}
{% set _cms_og_image = get_page_content(page_id, 'og_image', g.lang_code) %}
{% block title %}{% if _cms_title %}{{ _cms_title }}{% else %}{% trans %}FAQs About our Converter Tools | OnlineConvert{% endtrans %}{% endif %}{% endblock %}
{% block description %}{% if _cms_desc %}{{ _cms_desc }}{% else %}{% trans %}Frequently asked questions about OnlineConvert tools.{% endtrans %}{% endif %}{% endblock %}
{% block og_image_tag %}{% if _cms_og_image %}<meta property="og:image" content="{{ _cms_og_image }}">{% endif %}{% endblock %}
{% block extra_head %}{% if _cms_head_html %}{{ _cms_head_html|safe }}{% endif %}{% endblock %}

{% block content %}
{% set _ht_faq = site.get('hero_bg_type', 'gradient') if site is defined else 'gradient' %}
{% set _hero_img = site.get('hero_bg_image', '') if site is defined else '' %}
{% set _hero_lcl = (site.get('hero_img_left_color_light', '#1e3a5f') if site is defined) or '#1e3a5f' %}
{% set _hero_lcd = (site.get('hero_img_left_color_dark', '#0f172a') if site is defined) or '#0f172a' %}
<section class="hero-gradient relative overflow-hidden">
        {% if _ht_faq == 'image' %}
    <style>
    .hero-gradient { background: {{ _hero_lcl }} !important; background-image: none !important; }
    .dark .hero-gradient { background: {{ _hero_lcd }} !important; background-image: none !important; }
    </style>
    {% endif %}
    {% if _ht_faq == 'gradient' %}
    <div class="absolute inset-0 bg-[url('data:image/svg+xml,%3Csvg%20width%3D%2260%22%20height%3D%2260%22%20viewBox%3D%220%200%2060%2060%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cg%20fill%3D%22%23ffffff%22%20fill-opacity%3D%220.05%22%3E%3Cpath%20d%3D%22M36%2034v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6%2034v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6%204V0H4v4H0v2h4v4h2V6h4V4H6z%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E')] opacity-50"></div>
    {% elif _ht_faq == 'image' and _hero_img %}
    <div class="hero-bg-img"><img src="{{ _hero_img }}" alt="" class="w-full h-full object-contain"></div>
    {% endif %}
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16 md:py-24 relative z-10">
        <div class="max-w-3xl animate-slide-up">
            <h1 class="text-3xl md:text-4xl lg:text-5xl font-extrabold text-white leading-tight mb-4">{{ _cms_heading if _cms_heading else _('Frequently Asked Questions') }}</h1>
            {% if _cms_page_desc %}<p class="text-lg text-white/90 max-w-2xl leading-relaxed">{{ _cms_page_desc }}</p>{% endif %}
        </div>
    </div>
</section>

<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
    <div class="flex flex-col md:flex-row gap-8">
        <aside class="w-full md:w-64 flex-shrink-0">
            <nav class="sticky top-24 space-y-1">
                <a href="{{ full_url('/privacy') }}" class="block px-4 py-2.5 rounded-lg text-sm font-medium text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-gray-900 dark:hover:text-white transition-all">{% trans %}Privacy Policy{% endtrans %}</a>
                <a href="{{ full_url('/terms') }}" class="block px-4 py-2.5 rounded-lg text-sm font-medium text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-gray-900 dark:hover:text-white transition-all">{% trans %}Terms of Use{% endtrans %}</a>
                <a href="{{ full_url('/disclaimer') }}" class="block px-4 py-2.5 rounded-lg text-sm font-medium text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-gray-900 dark:hover:text-white transition-all">{% trans %}Disclaimer{% endtrans %}</a>
                <a href="{{ full_url('/imprint') }}" class="block px-4 py-2.5 rounded-lg text-sm font-medium text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-gray-900 dark:hover:text-white transition-all">{% trans %}Imprint{% endtrans %}</a>
                <a href="{{ full_url('/contact') }}" class="block px-4 py-2.5 rounded-lg text-sm font-medium text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-gray-900 dark:hover:text-white transition-all">{% trans %}Contact{% endtrans %}</a>
            </nav>
        </aside>

        <div class="flex-1 min-w-0">
            <h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-6">{% trans %}FAQ's{% endtrans %}</h2>

            <div class="space-y-3" id="accordionPanelsStayOpenExample">

                <div class="rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 overflow-hidden transition-theme">
                    <button onclick="this.parentElement.querySelector('.faq-body').classList.toggle('hidden'); this.querySelector('.fa-chevron-down').classList.toggle('rotate-180')" class="w-full flex items-center justify-between px-6 py-4 text-left">
                        <h3 class="font-semibold text-gray-900 dark:text-white text-sm">{% trans %}Is There a Limit to the Numbers of Files I Can Convert?{% endtrans %}</h3>
                        <i class="fa fa-chevron-down text-xs text-gray-400 transition-transform flex-shrink-0 ml-4"></i>
                    </button>
                    <div class="faq-body hidden px-6 pb-4 text-sm text-gray-600 dark:text-gray-400 leading-relaxed border-t border-gray-100 dark:border-gray-800 pt-4">
                        <p>{% trans %}Our online conversion service is 100% free and therefore; there is no limits to the numbers of files you can convert online. So, feel free to use our website as much as you want too.{% endtrans %}</p>
                    </div>
                </div>

                <div class="rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 overflow-hidden transition-theme">
                    <button onclick="this.parentElement.querySelector('.faq-body').classList.toggle('hidden'); this.querySelector('.fa-chevron-down').classList.toggle('rotate-180')" class="w-full flex items-center justify-between px-6 py-4 text-left">
                        <h3 class="font-semibold text-gray-900 dark:text-white text-sm">{% trans %}Is Your Conversion Services Really Free?{% endtrans %}</h3>
                        <i class="fa fa-chevron-down text-xs text-gray-400 transition-transform flex-shrink-0 ml-4"></i>
                    </button>
                    <div class="faq-body hidden px-6 pb-4 text-sm text-gray-600 dark:text-gray-400 leading-relaxed border-t border-gray-100 dark:border-gray-800 pt-4">
                        <p>{% trans %}Yes, our service is completely free.{% endtrans %}</p>
                    </div>
                </div>

                <div class="rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 overflow-hidden transition-theme">
                    <button onclick="this.parentElement.querySelector('.faq-body').classList.toggle('hidden'); this.querySelector('.fa-chevron-down').classList.toggle('rotate-180')" class="w-full flex items-center justify-between px-6 py-4 text-left">
                        <h3 class="font-semibold text-gray-900 dark:text-white text-sm">{% trans %}What Happens to my Filed I uploaded? Are they even safe?{% endtrans %}</h3>
                        <i class="fa fa-chevron-down text-xs text-gray-400 transition-transform flex-shrink-0 ml-4"></i>
                    </button>
                    <div class="faq-body hidden px-6 pb-4 text-sm text-gray-600 dark:text-gray-400 leading-relaxed border-t border-gray-100 dark:border-gray-800 pt-4">
                        <p>{% trans %}Your files are 100% safe on our servers.{% endtrans %}</p>
                        <p class="mt-2">{% trans %}Once you process the file to conversion the file instantly deletes from the server and it forwards to the next storage server.{% endtrans %}</p>
                        <p class="mt-2">{% trans %}The storage server keeps the file for 24 hours and it then automatically deletes the files from the server after 24 hourse.{% endtrans %}</p>
                        <p class="mt-2">{% trans %}So, there is no need to worry, we have setup all important security for our users.{% endtrans %}</p>
                    </div>
                </div>

                <div class="rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 overflow-hidden transition-theme">
                    <button onclick="this.parentElement.querySelector('.faq-body').classList.toggle('hidden'); this.querySelector('.fa-chevron-down').classList.toggle('rotate-180')" class="w-full flex items-center justify-between px-6 py-4 text-left">
                        <h3 class="font-semibold text-gray-900 dark:text-white text-sm">{% trans %}What If my File Fails to Convert? What's Wrong?{% endtrans %}</h3>
                        <i class="fa fa-chevron-down text-xs text-gray-400 transition-transform flex-shrink-0 ml-4"></i>
                    </button>
                    <div class="faq-body hidden px-6 pb-4 text-sm text-gray-600 dark:text-gray-400 leading-relaxed border-t border-gray-100 dark:border-gray-800 pt-4">
                        <p>{% trans %}Well, once you upload your file to our site for conversion, you please wait until the file is completely uploaded. Once the file is uploaded you can click on convert and your file will start downloading.{% endtrans %}</p>
                        <p class="mt-2">{% trans %}But, if it failed to download, you please contact us directly on our support email at: {% endtrans %}<a href="mailto:info@onlineconvert.cc" class="text-primary dark:text-primary-light hover:underline">info@onlineconvert.cc</a></p>
                    </div>
                </div>

                <div class="rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 overflow-hidden transition-theme">
                    <button onclick="this.parentElement.querySelector('.faq-body').classList.toggle('hidden'); this.querySelector('.fa-chevron-down').classList.toggle('rotate-180')" class="w-full flex items-center justify-between px-6 py-4 text-left">
                        <h3 class="font-semibold text-gray-900 dark:text-white text-sm">{% trans %}Do you obtain the legal right of my file when I use your services?{% endtrans %}</h3>
                        <i class="fa fa-chevron-down text-xs text-gray-400 transition-transform flex-shrink-0 ml-4"></i>
                    </button>
                    <div class="faq-body hidden px-6 pb-4 text-sm text-gray-600 dark:text-gray-400 leading-relaxed border-t border-gray-100 dark:border-gray-800 pt-4">
                        <p>{% trans %}In short, No. We do not intent to have the legal rights on your files. Therefore, once a user uploaded any file for conversion. It automatically gets deleted after very shortest amount of time.{% endtrans %}</p>
                    </div>
                </div>

                <div class="rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 overflow-hidden transition-theme">
                    <button onclick="this.parentElement.querySelector('.faq-body').classList.toggle('hidden'); this.querySelector('.fa-chevron-down').classList.toggle('rotate-180')" class="w-full flex items-center justify-between px-6 py-4 text-left">
                        <h3 class="font-semibold text-gray-900 dark:text-white text-sm">{% trans %}How long does it take to convert a video?{% endtrans %}</h3>
                        <i class="fa fa-chevron-down text-xs text-gray-400 transition-transform flex-shrink-0 ml-4"></i>
                    </button>
                    <div class="faq-body hidden px-6 pb-4 text-sm text-gray-600 dark:text-gray-400 leading-relaxed border-t border-gray-100 dark:border-gray-800 pt-4">
                        <p>{% trans %}While we are offering one of the fastest cloud compute conversion rates. The actual time it takes is based on the length / size of your video.{% endtrans %}</p>
                        <p class="mt-2">{% trans %}Also, the speed and stability of your internet connection also matters.{% endtrans %}</p>
                    </div>
                </div>

                <div class="rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 overflow-hidden transition-theme">
                    <button onclick="this.parentElement.querySelector('.faq-body').classList.toggle('hidden'); this.querySelector('.fa-chevron-down').classList.toggle('rotate-180')" class="w-full flex items-center justify-between px-6 py-4 text-left">
                        <h3 class="font-semibold text-gray-900 dark:text-white text-sm">{% trans %}What video formats do you support?{% endtrans %}</h3>
                        <i class="fa fa-chevron-down text-xs text-gray-400 transition-transform flex-shrink-0 ml-4"></i>
                    </button>
                    <div class="faq-body hidden px-6 pb-4 text-sm text-gray-600 dark:text-gray-400 leading-relaxed border-t border-gray-100 dark:border-gray-800 pt-4">
                        <p>{% trans %}We support each and every video format on our platform. You can find out here: {% endtrans %}<a href="https://onlineconvert.cc/converter/video" class="text-primary dark:text-primary-light hover:underline">{% trans %}All Video Converters{% endtrans %}</a></p>
                    </div>
                </div>

                <div class="rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 overflow-hidden transition-theme">
                    <button onclick="this.parentElement.querySelector('.faq-body').classList.toggle('hidden'); this.querySelector('.fa-chevron-down').classList.toggle('rotate-180')" class="w-full flex items-center justify-between px-6 py-4 text-left">
                        <h3 class="font-semibold text-gray-900 dark:text-white text-sm">{% trans %}Can I convert videos using my tablet or smartphone?{% endtrans %}</h3>
                        <i class="fa fa-chevron-down text-xs text-gray-400 transition-transform flex-shrink-0 ml-4"></i>
                    </button>
                    <div class="faq-body hidden px-6 pb-4 text-sm text-gray-600 dark:text-gray-400 leading-relaxed border-t border-gray-100 dark:border-gray-800 pt-4">
                        <p>{% trans %}Of course, you can convert your video, audio, docs, ebook, software, archive and more files on your tablet and smartphone.{% endtrans %}</p>
                        <p class="mt-2">{% trans %}In case, you do not find what you were looking for, please connect with us at {% endtrans %}<a href="mailto:admin@onlineconvert.cc" class="text-primary dark:text-primary-light hover:underline">admin@onlineconvert.cc</a></p>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block faq_java %}
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
{% endblock %}