<section
    class="section section-height-4 section-with-shape-divider bg-color-grey-scale-1 border-0 pb-5 m-0 position-relative">
    <div class="shape-divider shape-divider-top" style="height: 212px;">
        <div class="shape-divider-horizontal-animation shape-divider-horizontal-animation-to-left"
            style="height: 123px;">
            <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
                y="0px" viewBox="0 0 1920 123" preserveAspectRatio="xMinYMin">
                <polygon fill="#999" points="0,90 221,60 563,88 931,35 1408,93 1920,41 1920,-1 0,-1 " />
                <polygon fill="#FFFFFF" points="0,75 219,44 563,72 930,19 1408,77 1920,25 1920,-1 0,-1 " />
            </svg>
        </div>
    </div>
    <div class="container mt-4" id="servicios">
        <div class="row justify-content-center">
            <div class="col-lg-11 col-xl-10 text-center">
                <h2 class="custom-highlight-text-1 d-inline-block line-height-5 text-4 positive-ls-3 font-weight-medium text-color-primary mb-2 appear-animation"
                    data-appear-animation="fadeInUpShorter" data-appear-animation-delay="250">El compromiso</h2>
                <h3 class="text-9 line-height-3 text-transform-none font-weight-semibold mb-3 pb-1 appear-animation"
                    data-appear-animation="fadeInUpShorter" data-appear-animation-delay="500">Nuestros servicios</h3>
                <p class="text-3-5 pb-3 mb-4 appear-animation" data-appear-animation="fadeInUpShorter"
                    data-appear-animation-delay="750">En RAZE, nos apasiona el poder de la tecnología y el diseño bien
                    hecho. Ofrecemos una amplia gama de servicios para hacer crecer tu negocio o proyecto personal.
                    Desde la creación de páginas web y sistemas, hasta diseño de logos y campañas de marketing, estamos
                    aquí para ayudarte en cada paso del camino.</p>
            </div>
        </div>
        <div class="row row-gutter-sm justify-content-center mb-5 appear-animation"
            data-appear-animation="fadeInUpShorter" data-appear-animation-delay="1000">
            <div class="col-sm-9 col-md-6 col-lg-4 mb-4">
                <a href="#footer" data-hash data-hash-offset="0" data-hash-offset-lg="100"
                    class="custom-link-hover-effects text-decoration-none" data-cursor-effect-hover="plus">
                    <div class="card box-shadow-4">
                        <div
                            class="card-img-top position-relative overlay overlay-show overlay-color-secondary overlay-op-7">
                            <div class="position-absolute bottom-0 left-0 w-100 py-3 px-4 z-index-3">
                                <h4 class="font-weight-semibold text-color-light text-6 mb-1">Desarrollo de Sistemas y
                                    Páginas Web</h4>
                                <div class="custom-crooked-line">
                                    <img width="154" height="26"
                                        src="{{ asset('img/frontend/icons/infinite-crooked-line.svg')}}" alt=""
                                        data-icon
                                        data-plugin-options="{'onlySVG': true, 'extraClass': 'svg-fill-color-primary'}"
                                        style="width: 154px;" />
                                </div>
                            </div>
                            <img src="{{ asset('img/frontend/services/services-1.jpg')}}" class="img-fluid"
                                alt="Card Image" />
                        </div>
                        <div class="card-body d-flex align-items-center custom-view-more px-4">
                            <p class="card-text w-100 mb-0">Sistemas a medida y páginas web impresionantes que
                                se adaptan a tus necesidades. Ya sea que necesites una tienda online, un blog o
                                una plataforma para tu empresa.
                            </p>
                            <img width="50" height="50" class="w-auto"
                                src="{{ asset('img/frontend/icons/arrow-right.svg')}}" alt="" data-icon
                                data-plugin-options="{'onlySVG': true, 'extraClass': 'svg-fill-color-primary'}"
                                style="width: 50px;" />
                        </div>
                    </div>
                </a>
            </div>
            <div class="col-sm-9 col-md-6 col-lg-4 mb-4">
                <a href="#footer" data-hash data-hash-offset="0" data-hash-offset-lg="100"
                    class="custom-link-hover-effects text-decoration-none" data-cursor-effect-hover="plus">
                    <div class="card box-shadow-4">
                        <div
                            class="card-img-top position-relative overlay overlay-show overlay-color-secondary overlay-op-7">
                            <div class="position-absolute bottom-0 left-0 w-100 py-3 px-4 z-index-3">
                                <h4 class="font-weight-semibold text-color-light text-6 mb-1">Diseño de Logos e Imagen
                                    Corporativa</h4>
                                <div class="custom-crooked-line">
                                    <img width="154" height="26"
                                        src="{{ asset('img/frontend/icons/infinite-crooked-line.svg')}}" alt=""
                                        data-icon
                                        data-plugin-options="{'onlySVG': true, 'extraClass': 'svg-fill-color-primary'}"
                                        style="width: 154px;" />
                                </div>
                            </div>
                            <img src="{{ asset('img/frontend/services/services-2.jpg')}}" class="img-fluid"
                                alt="Card Image" />
                        </div>
                        <div class="card-body d-flex align-items-center custom-view-more px-4">
                            <p class="card-text w-100 mb-0">Tu marca merece destacar. Diseñamos logos únicos y creamos
                                una imagen corporativa que refleja la esencia de tu negocio y lo que quieres transmitir.
                            </p>
                            <img width="50" height="50" class="w-auto"
                                src="{{ asset('img/frontend/icons/arrow-right.svg')}}" alt="" data-icon
                                data-plugin-options="{'onlySVG': true, 'extraClass': 'svg-fill-color-primary'}"
                                style="width: 50px;" />
                        </div>
                    </div>
                </a>
            </div>
            <div class="col-sm-9 col-md-6 col-lg-4 mb-4">
                <a href="#footer" data-hash data-hash-offset="0" data-hash-offset-lg="100"
                    class="custom-link-hover-effects text-decoration-none" data-cursor-effect-hover="plus">
                    <div class="card box-shadow-4">
                        <div
                            class="card-img-top position-relative overlay overlay-show overlay-color-secondary overlay-op-7">
                            <div class="position-absolute bottom-0 left-0 w-100 py-3 px-4 z-index-3">
                                <h4 class="font-weight-semibold text-color-light text-6 mb-1">Edición y Grabación de
                                    Videos</h4>
                                <div class="custom-crooked-line">
                                    <img width="154" height="26"
                                        src="{{ asset('img/frontend/icons/infinite-crooked-line.svg')}}" alt=""
                                        data-icon
                                        data-plugin-options="{'onlySVG': true, 'extraClass': 'svg-fill-color-primary'}"
                                        style="width: 154px;" />
                                </div>
                            </div>
                            <img src="{{ asset('img/frontend/services/services-3.jpg')}}" class="img-fluid"
                                alt="Card Image" />
                        </div>
                        <div class="card-body d-flex align-items-center custom-view-more px-4">
                            <p class="card-text w-100 mb-0">Capturamos tus momentos más importantes y los transformamos
                                en videos increíbles. Desde eventos hasta contenido para redes sociales.
                            </p>
                            <img width="50" height="50" class="w-auto"
                                src="{{ asset('img/frontend/icons/arrow-right.svg')}}" alt="" data-icon
                                data-plugin-options="{'onlySVG': true, 'extraClass': 'svg-fill-color-primary'}"
                                style="width: 50px;" />
                        </div>
                    </div>
                </a>
            </div>
            <div class="col-sm-9 col-md-6 col-lg-4 mb-4">
                <a href="#footer" data-hash data-hash-offset="0" data-hash-offset-lg="100"
                    class="custom-link-hover-effects text-decoration-none" data-cursor-effect-hover="plus">
                    <div class="card box-shadow-4">
                        <div
                            class="card-img-top position-relative overlay overlay-show overlay-color-secondary overlay-op-7">
                            <div class="position-absolute bottom-0 left-0 w-100 py-3 px-4 z-index-3">
                                <h4 class="font-weight-semibold text-color-light text-6 mb-1">Fotografía y Edición</h4>
                                <div class="custom-crooked-line">
                                    <img width="154" height="26"
                                        src="{{ asset('img/frontend/icons/infinite-crooked-line.svg')}}" alt=""
                                        data-icon
                                        data-plugin-options="{'onlySVG': true, 'extraClass': 'svg-fill-color-primary'}"
                                        style="width: 154px;" />
                                </div>
                            </div>
                            <img src="{{ asset('img/frontend/services/services-4.jpg')}}" class="img-fluid"
                                alt="Card Image" />
                        </div>
                        <div class="card-body d-flex align-items-center custom-view-more px-4">
                            <p class="card-text w-100 mb-0">Capturamos la esencia de tus
                                productos, con detalle, claridad y estilo. Además, sesiones de
                                fotografía para destacar tu negocio, ambiente y equipo, dando una imagen
                                profesional y auténtica.
                            </p>
                            <img width="50" height="50" class="w-auto"
                                src="{{ asset('img/frontend/icons/arrow-right.svg')}}" alt="" data-icon
                                data-plugin-options="{'onlySVG': true, 'extraClass': 'svg-fill-color-primary'}"
                                style="width: 50px;" />
                        </div>
                    </div>
                </a>
            </div>
            <div class="col-sm-9 col-md-6 col-lg-4 mb-4">
                <a href="#footer" data-hash data-hash-offset="0" data-hash-offset-lg="100"
                    class="custom-link-hover-effects text-decoration-none" data-cursor-effect-hover="plus">
                    <div class="card box-shadow-4">
                        <div
                            class="card-img-top position-relative overlay overlay-show overlay-color-secondary overlay-op-7">
                            <div class="position-absolute bottom-0 left-0 w-100 py-3 px-4 z-index-3">
                                <h4 class="font-weight-semibold text-color-light text-6 mb-1">Servicio Técnico</h4>
                                <div class="custom-crooked-line">
                                    <img width="154" height="26"
                                        src="{{ asset('img/frontend/icons/infinite-crooked-line.svg')}}" alt=""
                                        data-icon
                                        data-plugin-options="{'onlySVG': true, 'extraClass': 'svg-fill-color-primary'}"
                                        style="width: 154px;" />
                                </div>
                            </div>
                            <img src="{{ asset('img/frontend/services/services-5.jpg')}}" class="img-fluid"
                                alt="Card Image" />
                        </div>
                        <div class="card-body d-flex align-items-center custom-view-more px-4">
                            <p class="card-text w-100 mb-0">¿Tienes problemas con computadoras o laptops? No te
                                preocupes,
                                estamos aquí para repararlas y mantenerlas en perfecto estado, tanto para empresas como
                                para particulares.
                            </p>
                            <img width="50" height="50" class="w-auto"
                                src="{{ asset('img/frontend/icons/arrow-right.svg')}}" alt="" data-icon
                                data-plugin-options="{'onlySVG': true, 'extraClass': 'svg-fill-color-primary'}"
                                style="width: 50px;" />
                        </div>
                    </div>
                </a>
            </div>
            <div class="col-sm-9 col-md-6 col-lg-4 mb-4">
                <a href="#footer" data-hash data-hash-offset="0" data-hash-offset-lg="100"
                    class="custom-link-hover-effects text-decoration-none" data-cursor-effect-hover="plus">
                    <div class="card box-shadow-4">
                        <div
                            class="card-img-top position-relative overlay overlay-show overlay-color-secondary overlay-op-7">
                            <div class="position-absolute bottom-0 left-0 w-100 py-3 px-4 z-index-3">
                                <h4 class="font-weight-semibold text-color-light text-6 mb-1">Marketing</h4>
                                <div class="custom-crooked-line">
                                    <img width="154" height="26"
                                        src="{{ asset('img/frontend/icons/infinite-crooked-line.svg')}}" alt=""
                                        data-icon
                                        data-plugin-options="{'onlySVG': true, 'extraClass': 'svg-fill-color-primary'}"
                                        style="width: 154px;" />
                                </div>
                            </div>
                            <img src="{{ asset('img/frontend/services/services-6.jpg')}}" class="img-fluid"
                                alt="Card Image" />
                        </div>
                        <div class="card-body d-flex align-items-center custom-view-more px-4">
                            <p class="card-text w-100 mb-0">Diseñamos y ejecutamos campañas de marketing efectivas para
                                que tu negocio crezca y llegue a más personas, trabajemos en darle mas exposición a tu
                                negocio y
                                convierte potenciales clientes.
                            </p>
                            <img width="50" height="50" class="w-auto"
                                src="{{ asset('img/frontend/icons/arrow-right.svg')}}" alt="" data-icon
                                data-plugin-options="{'onlySVG': true, 'extraClass': 'svg-fill-color-primary'}"
                                style="width: 50px;" />
                        </div>
                    </div>
                </a>
            </div>
        </div>
        <!-- <div class="row">
            <div class="col text-center">
                <a href="demo-business-consulting-3-services.html"
                    class="btn btn-primary custom-btn-style-1 font-weight-semibold btn-px-4 btn-py-2 text-3-5"
                    data-cursor-effect-hover="plus" data-cursor-effect-hover-color="light">
                    <span>All Services</span>
                </a>
            </div>
        </div> -->
    </div>
</section>
