{% extends 'components/base.html' %}
{% load static %}
{% load filters %}
{% block title %}
    Inicio
{% endblock %}
{% block content %}
    <main class="main">
        <!-- Hero Section -->
        <section id="hero" class="hero section">
            <div class="container">
                <div class="row gy-4">
                    <div class="col-lg-6 order-2 order-lg-1 d-flex flex-column justify-content-center">
                        <h1 data-aos="fade-up">Líder en Servicios de Transporte, Reparaciones Automotrices, Construcción
                            y Soluciones Informáticas en Cuba.</h1>
                        <p data-aos="fade-up" data-aos-delay="100">EIGE: Empresa Integral de Servicios Generales,
                            comprometida con el desarrollo de la nación.</p>
                        <div class="d-flex flex-column flex-md-row" data-aos="fade-up" data-aos-delay="200">
                            <a href="{% url 'index' %}#contact" class="btn-get-started">Contáctenos <i
                                    class="bi bi-arrow-right"></i></a>
                        </div>
                    </div>
                    <div class="col-lg-6 order-1 order-lg-2 hero-img" data-aos="zoom-out">
                        <img src="{% static 'img/hero-img.png' %}" class="img-fluid animated" alt="">
                    </div>
                </div>
            </div>

        </section><!-- /Hero Section -->

        <!-- About Section -->
        <section id="about" class="about section">

            <div class="container" data-aos="fade-up">
                <div class="row gx-0">

                    <div class="col-lg-6 d-flex flex-column justify-content-center" data-aos="fade-up"
                         data-aos-delay="200">
                        <div class="content">
                            <h3>Quiénes Somos</h3>
                            <h2>
                                Somos una empresa dedicada a satisfacer las necesidades tecnológicas de nuestros
                                clientes.
                            </h2>
                            <p>
                                Nuestro equipo está conformado por profesionales altamente capacitados y comprometidos
                                con la excelencia en cada aspecto de nuestro trabajo. Buscamos ser pioneros en la
                                industria adaptándonos constantemente a los avances tecnológicos y ofreciendo soluciones
                                innovadoras que impulsen el crecimiento y la eficiencia de nuestros clientes.
                            </p>
                            <div class="text-center text-lg-start">
                                <a href="{% url 'about-us' %}"
                                   class="btn-read-more d-inline-flex align-items-center justify-content-center align-self-center">
                                    <span>Ver Más</span>
                                    <i class="bi bi-arrow-right"></i>
                                </a>
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-6 d-flex align-items-center" data-aos="zoom-out" data-aos-delay="200">
                        <img src="{% static 'img/about.jpg' %}" class="img-fluid" alt="">
                    </div>

                </div>
            </div>

        </section><!-- /About Section -->

        <!-- Features Section -->
        <section id="features" class="features section">

            <!-- Section Title -->
            <div class="container section-title" data-aos="fade-up">
                <h2>Características</h2>
                <p>Nuestras Características<br></p>
            </div><!-- End Section Title -->

            <div class="container">

                <div class="row gy-5">

                    <div class="col-xl-6" data-aos="zoom-out" data-aos-delay="100">
                        <img src="{% static 'img/features.png' %}" class="img-fluid" alt="">
                    </div>

                    <div class="col-xl-6 d-flex">
                        <div class="row align-self-center gy-4">

                            <div class="col-md-6" data-aos="fade-up" data-aos-delay="200">
                                <div class="feature-box d-flex align-items-center">
                                    <i class="bi bi-check"></i>
                                    <h3>Atención personalizada y rápida</h3>
                                </div>
                            </div><!-- End Feature Item -->

                            <div class="col-md-6" data-aos="fade-up" data-aos-delay="300">
                                <div class="feature-box d-flex align-items-center">
                                    <i class="bi bi-check"></i>
                                    <h3>Experiencia comprobada en cada servicio</h3>
                                </div>
                            </div><!-- End Feature Item -->

                            <div class="col-md-6" data-aos="fade-up" data-aos-delay="400">
                                <div class="feature-box d-flex align-items-center">
                                    <i class="bi bi-check"></i>
                                    <h3>Cobertura en toda Cuba</h3>
                                </div>
                            </div><!-- End Feature Item -->

                            <div class="col-md-6" data-aos="fade-up" data-aos-delay="500">
                                <div class="feature-box d-flex align-items-center">
                                    <i class="bi bi-check"></i>
                                    <h3>Garantía de calidad y satisfacción</h3>
                                </div>
                            </div><!-- End Feature Item -->

                            <div class="col-md-6" data-aos="fade-up" data-aos-delay="600">
                                <div class="feature-box d-flex align-items-center">
                                    <i class="bi bi-check"></i>
                                    <h3>Pago a plazos</h3>
                                </div>
                            </div><!-- End Feature Item -->
                        </div>
                    </div>

                </div>

            </div>

        </section><!-- /Features Section -->
        {% if services %}
            <!-- Services Section -->
            <section id="services" class="services section">

                <!-- Section Title -->
                <div class="container section-title" data-aos="fade-up">
                    <h2>Servicios</h2>
                    <p>Nuestros Servicios<br></p>
                </div><!-- End Section Title -->
                <div class="container">
                    <div class="row gy-4">
                        {% for service in services %}
                            <div class="col-lg-3 col-md-6 col-sm-12" data-aos="fade-up" data-aos-delay="100">
                                <div
                                        class="service-item {{ service.card_color }} position-relative d-flex flex-column justify-content-between align-items-center">
                                    {% if service.icon_class %}
                                        <i class="bi {{ service.icon_class }} icon"></i>{% endif %}
                                    <h3>{{ service.name }}</h3>
                                    {% if service.short_description %}<p>{{ service.short_description }}</p>{% endif %}
                                    <a href="{% if service.label %}{% url 'service-detail' service.label %}{% else %}#{% endif %}"
                                       class="read-more stretched-link"><span>Más Información</span>
                                        <i class="bi bi-arrow-right"></i></a>
                                </div>
                            </div><!-- End Service Item -->
                        {% endfor %}
                    </div>
                </div>
            </section><!-- /Services Section -->
        {% endif %}

        <!-- Stats Section -->
        <section id="stats" class="stats section">

            <div class="container" data-aos="fade-up" data-aos-delay="100">

                <div class="row gy-4">

                    <div class="col-lg-3 col-md-6">
                        <div class="stats-item d-flex align-items-center w-100 h-100">
                            <i class="bi bi-emoji-smile color-blue flex-shrink-0"></i>
                            <div>
                            <span data-purecounter-start="0" data-purecounter-end="232" data-purecounter-duration="1"
                                  class="purecounter"></span>
                                <p>Clientes satisfechos</p>
                            </div>
                        </div>
                    </div><!-- End Stats Item -->

                    <div class="col-lg-3 col-md-6">
                        <div class="stats-item d-flex align-items-center w-100 h-100">
                            <i class="bi bi-journal-richtext color-orange flex-shrink-0" style="color: #ee6c20;"></i>
                            <div>
                            <span data-purecounter-start="0" data-purecounter-end="521" data-purecounter-duration="1"
                                  class="purecounter"></span>
                                <p>Proyectos</p>
                            </div>
                        </div>
                    </div><!-- End Stats Item -->

                    <div class="col-lg-3 col-md-6">
                        <div class="stats-item d-flex align-items-center w-100 h-100">
                            <i class="bi bi-headset color-green flex-shrink-0" style="color: #15be56;"></i>
                            <div>
                            <span data-purecounter-start="0" data-purecounter-end="1463" data-purecounter-duration="1"
                                  class="purecounter"></span>
                                <p>Horas de soporte</p>
                            </div>
                        </div>
                    </div><!-- End Stats Item -->

                    <div class="col-lg-3 col-md-6">
                        <div class="stats-item d-flex align-items-center w-100 h-100">
                            <i class="bi bi-people color-pink flex-shrink-0" style="color: #bb0852;"></i>
                            <div>
                            <span data-purecounter-start="0" data-purecounter-end="15" data-purecounter-duration="1"
                                  class="purecounter"></span>
                                <p>Trabajadores</p>
                            </div>
                        </div>
                    </div><!-- End Stats Item -->

                </div>

            </div>

        </section><!-- /Stats Section -->

        <!-- Sección de Características Alternativas -->
        <section id="alt-features" class="alt-features section">
            <div class="container">
                <div class="row gy-5">
                    <div class="col-xl-7 d-flex order-2 order-xl-1" data-aos="fade-up" data-aos-delay="200">
                        <div class="row align-self-center gy-5">

                            <div class="col-md-6 icon-box">
                                <i class="bi bi-card-checklist"></i>
                                <div>
                                    <h4>Calidad Garantizada</h4>
                                    <p>Nos comprometemos a ofrecer productos y servicios de la más alta calidad,
                                        respaldados
                                        por nuestra
                                        garantía de satisfacción.</p>
                                </div>
                            </div><!-- Fin del Elemento de Característica -->

                            <div class="col-md-6 icon-box">
                                <i class="bi bi-dribbble"></i>
                                <div>
                                    <h4>Innovación Constante</h4>
                                    <p>Nos mantenemos a la vanguardia de la tecnología, desarrollando soluciones
                                        innovadoras
                                        que se
                                        adaptan a las necesidades cambiantes del mercado.</p>
                                </div>
                            </div><!-- Fin del Elemento de Característica -->

                            <div class="col-md-6 icon-box">
                                <i class="bi bi-filter-circle"></i>
                                <div>
                                    <h4>Atención Personalizada</h4>
                                    <p>Ofrecemos un servicio personalizado, adaptándolos a las necesidades específicas
                                        de cada cliente.</p>
                                </div>
                            </div><!-- Fin del Elemento de Característica -->

                            <div class="col-md-6 icon-box">
                                <i class="bi bi-lightning-charge"></i>
                                <div>
                                    <h4>Respuesta Rápida</h4>
                                    <p>Nos destacamos por nuestra capacidad de respuesta rápida y eficiente, asegurando
                                        que
                                        los problemas
                                        se resuelvan en el menor tiempo posible.</p>
                                </div>
                            </div><!-- Fin del Elemento de Característica -->

                            <div class="col-md-6 icon-box">
                                <i class="bi bi-patch-check"></i>
                                <div>
                                    <h4>Confianza y Seguridad</h4>
                                    <p>Brindamos un entorno seguro y confiable para nuestros clientes, protegiendo sus
                                        datos
                                        y
                                        garantizando la privacidad.</p>
                                </div>
                            </div><!-- Fin del Elemento de Característica -->

                        </div>

                    </div>

                    <div class="col-xl-5 d-flex align-items-center order-1 order-xl-2" data-aos="fade-up"
                         data-aos-delay="100">
                        <img src="{% static 'img/alt-features.png' %}" class="img-fluid" alt="">
                    </div>

                </div>

            </div>

        </section><!-- Fin de la Sección de Características Alternativas -->

        {#        <!-- Services Section -->#}
        {#        <section id="services" class="services section d-none">#}
        {##}
        {#            <!-- Section Title -->#}
        {#            <div class="container section-title" data-aos="fade-up">#}
        {#                <h2>Services</h2>#}
        {#                <p>Check Our Services<br></p>#}
        {#            </div><!-- End Section Title -->#}
        {##}
        {#            <div class="container">#}
        {##}
        {#                <div class="row gy-4">#}
        {##}
        {#                    <div class="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="100">#}
        {#                        <div class="service-item item-cyan position-relative">#}
        {#                            <i class="bi bi-activity icon"></i>#}
        {#                            <h3>Nesciunt Mete</h3>#}
        {#                            <p>Provident nihil minus qui consequatur non omnis maiores. Eos accusantium minus dolores#}
        {#                                iure#}
        {#                                perferendis#}
        {#                                tempore et consequatur.</p>#}
        {#                            <a href="#" class="read-more stretched-link"><span>Read More</span> <i#}
        {#                                    class="bi bi-arrow-right"></i></a>#}
        {#                        </div>#}
        {#                    </div><!-- End Service Item -->#}
        {##}
        {#                    <div class="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="200">#}
        {#                        <div class="service-item item-orange position-relative">#}
        {#                            <i class="bi bi-broadcast icon"></i>#}
        {#                            <h3>Eosle Commodi</h3>#}
        {#                            <p>Ut autem aut autem non a. Sint sint sit facilis nam iusto sint. Libero corrupti neque eum#}
        {#                                hic#}
        {#                                non ut#}
        {#                                nesciunt dolorem.</p>#}
        {#                            <a href="#" class="read-more stretched-link"><span>Read More</span> <i#}
        {#                                    class="bi bi-arrow-right"></i></a>#}
        {#                        </div>#}
        {#                    </div><!-- End Service Item -->#}
        {##}
        {#                    <div class="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="300">#}
        {#                        <div class="service-item item-teal position-relative">#}
        {#                            <i class="bi bi-easel icon"></i>#}
        {#                            <h3>Ledo Markt</h3>#}
        {#                            <p>Ut excepturi voluptatem nisi sed. Quidem fuga consequatur. Minus ea aut. Vel qui id#}
        {#                                voluptas#}
        {#                                adipisci#}
        {#                                eos earum corrupti.</p>#}
        {#                            <a href="#" class="read-more stretched-link"><span>Read More</span> <i#}
        {#                                    class="bi bi-arrow-right"></i></a>#}
        {#                        </div>#}
        {#                    </div><!-- End Service Item -->#}
        {##}
        {#                    <div class="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="400">#}
        {#                        <div class="service-item item-red position-relative">#}
        {#                            <i class="bi bi-bounding-box-circles icon"></i>#}
        {#                            <h3>Asperiores Commodi</h3>#}
        {#                            <p>Non et temporibus minus omnis sed dolor esse consequatur. Cupiditate sed error ea fuga#}
        {#                                sit#}
        {#                                provident#}
        {#                                adipisci neque.</p>#}
        {#                            <a href="#" class="read-more stretched-link"><span>Read More</span> <i#}
        {#                                    class="bi bi-arrow-right"></i></a>#}
        {#                        </div>#}
        {#                    </div><!-- End Service Item -->#}
        {##}
        {#                    <div class="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="500">#}
        {#                        <div class="service-item item-indigo position-relative">#}
        {#                            <i class="bi bi-calendar4-week icon"></i>#}
        {#                            <h3>Velit Doloremque.</h3>#}
        {#                            <p>Cumque et suscipit saepe. Est maiores autem enim facilis ut aut ipsam corporis aut. Sed#}
        {#                                animi#}
        {#                                at autem#}
        {#                                alias eius labore.</p>#}
        {#                            <a href="#" class="read-more stretched-link"><span>Read More</span> <i#}
        {#                                    class="bi bi-arrow-right"></i></a>#}
        {#                        </div>#}
        {#                    </div><!-- End Service Item -->#}
        {##}
        {#                    <div class="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="600">#}
        {#                        <div class="service-item item-pink position-relative">#}
        {#                            <i class="bi bi-chat-square-text icon"></i>#}
        {#                            <h3>Dolori Architecto</h3>#}
        {#                            <p>Hic molestias ea quibusdam eos. Fugiat enim doloremque aut neque non et debitis iure.#}
        {#                                Corrupti#}
        {#                                recusandae ducimus enim.</p>#}
        {#                            <a href="#" class="read-more stretched-link"><span>Read More</span> <i#}
        {#                                    class="bi bi-arrow-right"></i></a>#}
        {#                        </div>#}
        {#                    </div><!-- End Service Item -->#}
        {##}
        {#                </div>#}
        {##}
        {#            </div>#}
        {##}
        {#        </section>#}
        {#        <!-- /Services Section -->#}


        <!-- Sección de Preguntas Frecuentes -->
        <section id="faq" class="faq section">
            <!-- Título de la Sección -->
            <div class="container section-title" data-aos="fade-up">
                <h2>Preguntas Frecuentes</h2>
                <p>Preguntas Frecuentes</p>
            </div><!-- Fin del Título de la Sección -->
            <div class="container">
                <div class="row">
                    <div class="col-lg-6" data-aos="fade-up" data-aos-delay="100">
                        <div class="faq-container">
                            {% for faq in faqs %}
                                {% if not forloop.counter|divisibleby:2 %}
                                    <div class="faq-item {% if forloop.first %}faq-active{% endif %}">
                                        <h3>{{ faq.question }}</h3>
                                        <div class="faq-content">
                                            <p>{{ faq.answer }}</p>
                                        </div>
                                        <i class="faq-toggle bi bi-chevron-right"></i>
                                    </div><!-- Fin del Elemento de Pregunta -->
                                {% endif %}
                            {% endfor %}
                        </div>
                    </div><!-- Fin de la Columna de Preguntas Frecuentes -->
                    <div class="col-lg-6" data-aos="fade-up" data-aos-delay="200">
                        <div class="faq-container">
                            {% for faq in faqs %}
                                {% if forloop.counter|divisibleby:2 %}
                                    <div class="faq-item {% if forloop.first %}faq-active{% endif %}">
                                        <h3>{{ faq.question }}</h3>
                                        <div class="faq-content">
                                            <p>{{ faq.answer }}</p>
                                        </div>
                                        <i class="faq-toggle bi bi-chevron-right"></i>
                                    </div><!-- Fin del Elemento de Pregunta -->
                                {% endif %}
                            {% endfor %}
                        </div>
                    </div><!-- Fin de la Columna de Preguntas Frecuentes -->
                </div>
            </div>
        </section><!-- Fin de la Sección de Preguntas Frecuentes -->


        {% if testimonials %}
            <!-- Sección de Testimonios -->
            <section id="testimonials" class="testimonials section">

                <!-- Título de la Sección -->
                <div class="container section-title" data-aos="fade-up">
                    <h2>Testimonios</h2>
                    <p>Lo que dicen sobre nosotros<br></p>
                </div><!-- Fin del Título de la Sección -->

                <div class="container" data-aos="fade-up" data-aos-delay="100">

                    <div class="swiper init-swiper">
                        <script type="application/json" class="swiper-config">
                            {
                              "loop": true,
                              "speed": 600,
                              "autoplay": {
                                "delay": 5000
                              },
                              "slidesPerView": "auto",
                              "pagination": {
                                "el": ".swiper-pagination",
                                "type": "bullets",
                                "clickable": true
                              },
                              "breakpoints": {
                                "320": {
                                  "slidesPerView": 1,
                                  "spaceBetween": 40
                                },
                                "1200": {
                                  "slidesPerView": 3,
                                  "spaceBetween": 1
                                }
                              }
                            }
                        </script>
                        <div class="swiper-wrapper">
                            {% for t in testimonials %}
                                <div class="swiper-slide">
                                    <div class="testimonial-item">
                                        <div class="stars">
                                            {% for _ in ""|center:t.rating %}
                                                <i class="bi bi-star-fill"></i>
                                            {% endfor %}
                                            {% for _ in t.rating|negative|add:5|times %}
                                                <i class="bi bi-star"></i>
                                            {% endfor %}
                                        </div>
                                        <p>
                                            "{{ t.testimonial }}"
                                        </p>
                                        <div class="profile mt-auto">
                                            <img src="
                                                        {% if t.image %}
                                                            {{ t.image.url }}
                                                                {% else %}
                                                            {% static 'img/blank-profile-picture.webp' %}
                                                        {% endif %}
                                                     "
                                                 class="testimonial-img"
                                                 alt="">
                                            <h3>{{ t.name }}</h3>
                                            <h4>{{ t.occupation }}</h4>
                                        </div>
                                    </div>
                                </div><!-- Fin del elemento de testimonio -->
                            {% endfor %}
                        </div>
                        <div class="swiper-pagination"></div>
                    </div>

                </div>

            </section><!-- Fin de la Sección de Testimonios -->
        {% endif %}
        <!-- Clients Section -->
        <section id="clients" class="clients section d-none">

            <!-- Section Title -->
            <div class="container section-title" data-aos="fade-up">
                <h2>Clients</h2>
                <p>We work with best clients<br></p>
            </div><!-- End Section Title -->

            <div class="container" data-aos="fade-up" data-aos-delay="100">

                <div class="swiper init-swiper">
                    <script type="application/json" class="swiper-config">
                        {
                          "loop": true,
                          "speed": 600,
                          "autoplay": {
                            "delay": 5000
                          },
                          "slidesPerView": "auto",
                          "pagination": {
                            "el": ".swiper-pagination",
                            "type": "bullets",
                            "clickable": true
                          },
                          "breakpoints": {
                            "320": {
                              "slidesPerView": 2,
                              "spaceBetween": 40
                            },
                            "480": {
                              "slidesPerView": 3,
                              "spaceBetween": 60
                            },
                            "640": {
                              "slidesPerView": 4,
                              "spaceBetween": 80
                            },
                            "992": {
                              "slidesPerView": 6,
                              "spaceBetween": 120
                            }
                          }
                        }
                    </script>
                    <div class="swiper-wrapper align-items-center">
                        <div class="swiper-slide"><img src="{% static 'img/clients/client-1.png' %}" class="img-fluid"
                                                       alt=""></div>
                        <div class="swiper-slide"><img src="{% static 'img/clients/client-2.png' %}" class="img-fluid"
                                                       alt=""></div>
                        <div class="swiper-slide"><img src="{% static 'img/clients/client-3.png' %}" class="img-fluid"
                                                       alt=""></div>
                        <div class="swiper-slide"><img src="{% static 'img/clients/client-4.png' %}" class="img-fluid"
                                                       alt=""></div>
                        <div class="swiper-slide"><img src="{% static 'img/clients/client-5.png' %}" class="img-fluid"
                                                       alt=""></div>
                        <div class="swiper-slide"><img src="{% static 'img/clients/client-6.png' %}" class="img-fluid"
                                                       alt=""></div>
                        <div class="swiper-slide"><img src="{% static 'img/clients/client-7.png' %}" class="img-fluid"
                                                       alt=""></div>
                        <div class="swiper-slide"><img src="{% static 'img/clients/client-8.png' %}" class="img-fluid"
                                                       alt=""></div>
                    </div>
                    <div class="swiper-pagination"></div>
                </div>

            </div>

        </section><!-- /Clients Section -->

        <!-- Sección de Publicaciones Recientes -->
        <section id="recent-posts" class="recent-posts section">

            <!-- Título de la Sección -->
            <div class="container section-title" data-aos="fade-up">
                <h2>Publicaciones Recientes</h2>
                <p>Publicaciones recientes de nuestro Blog</p>
            </div>

            <div class="container">
                <div class="row gy-5">
                    {% for post in latest_posts %}
                        <div class="col-xl-4 col-md-6">
                            <div class="post-item position-relative h-100" data-aos="fade-up" data-aos-delay="{{ forloop.counter0|add:"100" }}">

                                <div class="post-img position-relative overflow-hidden">
                                    {% if post.image %}
                                        <img src="{{ post.image.url }}" class="img-fluid" alt="{{ post.title }}">
                                    {% else %}
                                        <img src="{% static 'img/blog/blog-1.jpg' %}" class="img-fluid" alt="{{ post.title }}">
                                    {% endif %}
                                    <span class="post-date">{{ post.published_at|date:"d \d\e F" }}</span>
                                </div>

                                <div class="post-content d-flex flex-column">
                                    <h3 class="post-title">{{ post.title }}</h3>

                                    <div class="meta d-flex align-items-center">
                                        <div class="d-flex align-items-center">
                                            <i class="bi bi-person"></i> <span class="ps-2">{{ post.author.username }}</span>
                                        </div>
                                        <span class="px-3 text-black-50">/</span>
                                        <div class="d-flex align-items-center">
                                            <i class="bi bi-folder2"></i> <span class="ps-2">{{ post.category.name }}</span>
                                        </div>
                                    </div>

                                    <hr>

                                    <a href="{% url 'blog:post_detail' post.slug %}" class="readmore stretched-link">
                                        <span>Leer Más</span><i class="bi bi-arrow-right"></i>
                                    </a>
                                </div>

                            </div>
                        </div>
                    {% empty %}
                        <p>No hay publicaciones recientes.</p>
                    {% endfor %}
                </div>
            </div>
        </section>


        <!-- Contact Section -->
        <section id="contact" class="contact section">

            <!-- Section Title -->
            <div class="container section-title" data-aos="fade-up">
                <h2>Contacto</h2>
                <p>Contáctanos</p>
            </div><!-- End Section Title -->

            <div class="container" data-aos="fade-up" data-aos-delay="100">

                <div class="row gy-4">

                    <div class="col-lg-6">

                        <div class="row gy-4">
                            {% if configs.address %}
                                <div class="col-md-6">
                                    <div class="info-item" data-aos="fade" data-aos-delay="200">
                                        <i class="bi bi-geo-alt"></i>
                                        <h3>Dirección</h3>
                                        {{ configs.address|linebreaksbr }}
                                    </div>
                                </div><!-- End Info Item -->
                            {% endif %}

                            {% if configs.phone %}
                                <div class="col-md-6">
                                    <div class="info-item h-100" data-aos="fade" data-aos-delay="300">
                                        <i class="bi bi-telephone"></i>
                                        <h3>LLámanos</h3>
                                        <p><a class="hover:underline" href="tel:{{ configs.phone }}"
                                              target="_blank">{{ configs.phone }}</a></p>
                                    </div>
                                </div><!-- End Info Item -->
                            {% endif %}
                            {% if configs.email %}
                                <div class="col-md-6">
                                    <div class="info-item h-100" data-aos="fade" data-aos-delay="400">
                                        <i class="bi bi-envelope"></i>
                                        <h3>Correo Electrónico</h3>
                                        <a href="mailto:{{ configs.email }}">{{ configs.email }}</a>
                                    </div>
                                </div><!-- End Info Item -->
                            {% endif %}
                            <div class="col-md-6">
                                <div class="info-item" data-aos="fade" data-aos-delay="500">
                                    <i class="bi bi-clock"></i>
                                    <h3>Horario de Trabajo</h3>
                                    <p>Lunes - Viernes</p>
                                    <p>9:00AM - 05:00PM</p>
                                </div>
                            </div><!-- End Info Item -->

                        </div>

                    </div>

                    <div class="col-lg-6">
                        <form method="post" class="php-email-form" data-aos="fade-up" data-aos-delay="200">
                            {% csrf_token %} <!-- Token de seguridad -->

                            <div class="mb-3">
                                <label for="{{ form.name.id_for_label }}" class="form-label">Nombre</label>
                                {{ form.name }}
                                {% if form.name.errors %}
                                    <div class="text-danger">{{ form.name.errors }}</div>
                                {% endif %}
                            </div>

                            <div class="mb-3">
                                <label for="{{ form.email.id_for_label }}" class="form-label">Correo
                                    electrónico</label>
                                {{ form.email }}
                                {% if form.email.errors %}
                                    <div class="text-danger">{{ form.email.errors }}</div>
                                {% endif %}
                            </div>

                            <div class="mb-3">
                                <label for="{{ form.subject.id_for_label }}" class="form-label">Asunto</label>
                                {{ form.subject }}
                                {% if form.subject.errors %}
                                    <div class="text-danger">{{ form.subject.errors }}</div>
                                {% endif %}
                            </div>

                            <div class="mb-3">
                                <label for="{{ form.message.id_for_label }}" class="form-label">Mensaje</label>
                                {{ form.message }}
                                {% if form.message.errors %}
                                    <div class="text-danger">{{ form.message.errors }}</div>
                                {% endif %}
                            </div>

                            <button type="submit">Enviar Mensaje</button>
                        </form>
                    </div><!-- End Contact Form -->

                </div>

            </div>

        </section><!-- /Contact Section -->

    </main>
{% endblock %}