@extends('vuexy-website-layout-porto::layouts.cleaning-services.master')

@section('header')
    <header id="header" class="header-effect-shrink" data-plugin-options="{'stickyEnabled': true, 'stickyEffect': 'shrink', 'stickyEnableOnBoxed': true, 'stickyEnableOnMobile': false, 'stickyChangeLogo': true, 'stickyStartAt': 30, 'stickyHeaderContainerHeight': 85}">
        <div class="header-body header-body-bottom-border border-top-0">
            <div class="header-top header-top-bottom-containered-border pt-2">
                <div class="container">
                    <div class="header-row">
                        <div class="header-column justify-content-start">
                            <div class="header-row">
                                <ul class="header-social-icons social-icons social-icons-clean social-icons-medium position-relative right-7 d-none d-md-block ms-0">
                                    <li class="social-icons-instagram"><a href="http://www.instagram.com/" target="_blank" title="Instagram"><i class="fab fa-instagram"></i></a></li>
                                    <li class="social-icons-x"><a href="http://www.x.com/" target="_blank" title="X"><i class="fab fa-x-twitter"></i></a></li>
                                    <li class="social-icons-facebook"><a href="http://www.facebook.com/" target="_blank" title="Facebook"><i class="fab fa-facebook-f"></i></a></li>
                                </ul>
                                <ul class="nav nav-pills position-relative bottom-1 ms-md-3">
                                    <li class="nav-item">
                                        <span class="d-flex align-items-center ws-nowrap text-color-secondary font-weight-medium text-3"><i class="icon-clock icons text-3 top-3 left-1 me-2 text-color-secondary font-weight-bold"></i> Mon - Sat 9:00am - 6:00pm</span>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div class="header-column justify-content-end">
                            <div class="header-row">
                                <a href="demo-cleaning-services-contact.html" class="custom-header-top-btn-style-1 btn btn-secondary font-weight-bold px-4 px-sm-5 py-3">BOOK NOW</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="header-container container">
                <div class="header-row">
                    <div class="header-column">
                        <div class="header-row">
                            <div class="header-logo">
                                <a href="demo-cleaning-services.html">
                                    <img src="img/demos/cleaning-services/logo.png" class="img-fluid" width="123" height="32" alt="" />
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="header-column justify-content-end">
                        <div class="header-row">
                            <div class="header-nav header-nav-links">
                                <div class="header-nav-main header-nav-main-text-capitalize header-nav-main-effect-2 header-nav-main-sub-effect-1">
                                    <nav class="collapse">
                                        <ul class="nav nav-pills" id="mainNav">
                                            <li><a href="demo-cleaning-services.html" class="nav-link active">Home</a></li>
                                            <li><a href="demo-cleaning-services-about.html" class="nav-link">About</a></li>
                                            <li><a href="demo-cleaning-services-services.html" class="nav-link">Services</a></li>
                                            <li><a href="demo-cleaning-services-portfolio.html" class="nav-link">Portfolio</a></li>
                                            <li><a href="demo-cleaning-services-prices.html" class="nav-link">Prices</a></li>
                                            <li><a href="demo-cleaning-services-blog.html" class="nav-link">Blog</a></li>
                                            <li><a href="demo-cleaning-services-contact.html" class="nav-link">Contact</a></li>
                                        </ul>
                                    </nav>
                                </div>
                            </div>
                            <div class="feature-box feature-box-style-2 align-items-center ms-lg-4">
                                <div class="feature-box-icon d-none d-sm-inline-flex">
                                    <img class="icon-animated" width="48" src="img/demos/cleaning-services/icons/phone.svg" alt="" data-icon data-plugin-options="{'onlySVG': true, 'extraClass': 'svg-fill-color-tertiary position-relative bottom-3'}" />
                                </div>
                                <div class="feature-box-info ps-2">
                                    <p class="font-weight-semibold line-height-1 text-2 pb-0 mb-1">CALL US NOW</p>
                                    <a href="tel:+1234567890" class="text-color-tertiary text-color-hover-primary text-decoration-none font-weight-bold line-height-1 custom-font-size-1 pb-0">800-123-4567</a>
                                </div>
                            </div>
                            <button class="btn header-btn-collapse-nav" data-bs-toggle="collapse" data-bs-target=".header-nav-main nav">
                                <i class="fas fa-bars"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </header>
@endsection

@section('content')
    <section class="section section-with-shape-divider section-parallax bg-tertiary border-0 m-0" data-plugin-parallax data-plugin-options="{'speed': 1.5, 'parallaxHeight': '110%', 'fadeIn': true}" data-image-src="img/demos/cleaning-services/backgrounds/background-1.jpg">
        <div class="shape-divider shape-divider-bottom" style="height: 576px;">
            <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 576" preserveAspectRatio="xMinYMin">
                <path class="custom-svg-fill-color-tertiary" d="M-12,66c13.35,40.03,28.35,72.62,41,97c12.78,24.63,30.56,58.44,62,97c19.57,24,36.66,40.31,49,52
                    c41.02,38.87,77.1,62.82,85,68c53.78,35.23,100.92,51.3,148,67c87.6,29.21,158.49,37.98,201,43c63.9,7.55,112.08,7.78,160,8
                    c16.52,0.08,84.41,0.17,181-8c98.88-8.36,172.43-20.7,233-31c42.88-7.29,141.31-24.85,267-56c127.06-31.5,220.66-61.69,296-86
                    c89.27-28.8,159.58-54.68,174-60c16.6-6.13,30.39-11.34,40-15c0,113.33,0,226.67,0,340c-644.33,0-1288.67,0-1933,0
                    C-9.33,410-10.67,238-12,66z"/>
                <path fill="#FFF" d="M-5,3c1.21,5.32,2.98,13.29,5,23c4.38,21.08,6.71,34.95,8,42c7.08,38.6,19.7,71.54,26,88
                    c8.52,22.26,16.34,38.54,19,44c5.4,11.07,16.38,32.61,33,58c28.88,44.11,57.48,73.41,64,80c6.89,6.97,38.98,38.97,91,72
                    c57.09,36.25,106.11,53.37,143,66c66.98,22.93,119.93,31.44,162,38c81,12.63,143.81,13.53,189,14c62.45,0.65,109.33-2.68,156-6
                    c35.74-2.54,89.63-7.16,155-16c68.17-9.22,117.88-18.83,170-29c110.32-21.52,194.58-42.54,224-50c131.43-33.34,227.73-64.9,286-84
                    c93.88-30.77,155.18-54.57,184-66c6.29-2.49,11.48-4.58,15-6c0,102.67,0,205.33,0,308c-643.33,0-1286.67,0-1930,0C-5,387-5,195-5,3z
                    "/>
            </svg>
        </div>
        <div class="container position-relative z-index-1 pb-5 my-5">
            <div class="appear-animation" data-appear-animation="fadeIn" data-appear-animation-delay="1000">
                <div class="custom-svg-stars clean-animation-1">
                    <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 277 276">
                        <g>
                            <path fill="none" stroke="#FFF" stroke-width="9" stroke-miterlimit="10" d="M51.5,165.5c-0.63,0.07,0.16,5.68-1,13c-0.52,3.27-1.5,9.11-5,15c-4.06,6.82-9.54,10.42-12,12
                                c-12.69,8.13-27.06,7.5-27,8c0.03,0.27,4.14-0.53,9,0c8.58,0.93,14.62,5.47,18,8c8.89,6.67,12.94,14.76,14,17
                                c5.46,11.56,4.6,23.03,5,23c0.34-0.03-1.45-7.91,1-17c0.41-1.53,2.71-9.63,10-17c6.11-6.18,12.65-8.73,16-10
                                c8.91-3.37,16.02-3.09,16-4c-0.03-1.04-9.22,0.41-19-4c-2.2-0.99-10.87-5.04-16-14c-3.08-5.38-4.54-11.95-7-23
                                C52.78,169.26,52.02,165.44,51.5,165.5z"/>
                        </g>
                        <g>
                            <path fill="none" stroke="#FFF" stroke-width="9" stroke-miterlimit="10" d="M188.8,77.92c-1.01,0.11,0.26,9.06-1.6,20.74c-0.83,5.22-2.39,14.53-7.98,23.93
                                c-6.47,10.89-15.22,16.63-19.15,19.15C139.83,154.71,116.9,153.7,117,154.5c0.05,0.43,6.61-0.84,14.36,0
                                c13.68,1.49,23.33,8.72,28.72,12.76c14.18,10.64,20.65,23.55,22.34,27.12c8.7,18.45,7.34,36.75,7.98,36.7
                                c0.54-0.04-2.32-12.62,1.6-27.12c0.66-2.44,4.32-15.36,15.96-27.12c9.75-9.86,20.18-13.93,25.53-15.96
                                c14.22-5.38,25.56-4.92,25.53-6.38c-0.04-1.66-14.71,0.65-30.31-6.38c-3.51-1.58-17.35-8.04-25.53-22.34
                                c-4.91-8.59-7.24-19.06-11.17-36.7C190.84,83.92,189.63,77.83,188.8,77.92z"/>
                        </g>
                        <g>
                            <path fill="none" stroke="#FFF" stroke-width="9" stroke-miterlimit="10" d="M90.5,10.5c-0.63,0.07,0.16,5.68-1,13c-0.52,3.27-1.5,9.11-5,15c-4.06,6.82-9.54,10.42-12,12
                                c-12.69,8.13-27.06,7.5-27,8c0.03,0.27,4.14-0.53,9,0c8.58,0.93,14.62,5.47,18,8c8.89,6.67,12.94,14.76,14,17
                                c5.46,11.56,4.6,23.03,5,23c0.34-0.03-1.45-7.91,1-17c0.41-1.53,2.71-9.63,10-17c6.11-6.18,12.65-8.73,16-10
                                c8.91-3.37,16.02-3.09,16-4c-0.03-1.04-9.22,0.41-19-4c-2.2-0.99-10.87-5.04-16-14c-3.08-5.38-4.54-11.95-7-23
                                C91.78,14.26,91.02,10.44,90.5,10.5z"/>
                        </g>
                    </svg>
                </div>
            </div>
            <div class="row justify-content-center justify-content-lg-start pb-5 mb-5">
                <div class="col-md-10 col-lg-6 text-center text-lg-end pe-lg-4 pb-5 mb-5">
                    <h1 class="text-color-light font-weight-medium line-height-4 text-10 mb-2 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="300">High Quality <span class="font-weight-extra-bold custom-highlight-1 ws-nowrap p-1 customHighlightAnim customHighlightAnimDelay">Cleaning Services</span> for all type of facilities</h1>
                    <div class="appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="500">
                        <p class="custom-font-secondary font-weight-light custom-font-size-1 text-color-light opacity-6 mb-4">Our Staff is trained to clean everything you need</p>
                    </div>
                    <a href="#whoweare" data-hash data-hash-offset="0" data-hash-offset-lg="150" class="btn btn-secondary btn-modern font-weight-bold text-3 px-5 py-3 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="700">LEARN MORE</a>
                    <div class="spacer pt-5 my-5"></div>
                </div>
            </div>
        </div>
    </section>

    <div class="container position-relative z-index-1" style="margin-top: -388px;">
        <div class="row align-items-end pb-4 mb-4 mb-lg-5">
            <div class="col-lg-6 pe-lg-4 mb-5 mb-lg-0">
                <div class="card border-0 custom-border-radius-1 box-shadow-1 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="900">
                    <div class="card-body p-5">
                        <h2 class="text-color-secondary font-weight-bold text-7 line-height-1 mb-1">Request a Callback</h2>
                        <p class="custom-font-secondary text-4 pb-1 mb-4">Enter your details in the form and we will call you back.</p>
                        <form class="contact-form custom-form-style-1" action="php/contact-form.php" method="POST">
                            <div class="contact-form-success alert alert-success d-none mt-4">
                                <strong>Success!</strong> Your request has been sent to us.
                            </div>

                            <div class="contact-form-error alert alert-danger d-none mt-4">
                                <strong>Error!</strong> There was an error sending your request.
                                <span class="mail-error-message text-1 d-block"></span>
                            </div>

                            <div class="row">
                                <div class="form-group col pb-1 mb-3">
                                    <input type="text" value="" data-msg-required="Please enter your name." maxlength="100" class="form-control" name="name" placeholder="Your Name" required>
                                </div>
                            </div>
                            <div class="row">
                                <div class="form-group col pb-1 mb-3">
                                    <input type="text" value="" data-msg-required="Please enter your phone number." maxlength="100" class="form-control" name="phone" placeholder="Your Phone Number" required>
                                </div>
                            </div>
                            <div class="row">
                                <div class="form-group col pb-1 mb-3">
                                    <div class="custom-select-1">
                                        <select data-msg-required="Please select a service." class="form-control" name="service" required>
                                            <option value="" selected>Select Service</option>
                                            <option value="Build Services">Building Services</option>
                                            <option value="Post Construction">Post Construction</option>
                                            <option value="Office Cleaning">Office Cleaning</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="form-group col">
                                    <button type="submit" class="btn btn-primary btn-modern font-weight-bold text-3 px-5 py-3" data-loading-text="Loading...">CALL ME BACK</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            <div class="col-lg-6 pb-lg-5">
                <ul class="list list-unstyled mb-0">
                    <li class="mb-4 mb-lg-2">
                        <span class="d-flex align-items-center justify-content-end justify-content-lg-end flex-column flex-lg-row font-weight-medium text-4 text-lg-3 text-xl-4">
                            SCHEDULE AN APPOINTMENT:
                            <strong class="text-7 mt-2 mt-lg-0 ms-lg-3">
                                <a href="tel:+1234567890" class="text-color-secondary text-color-hover-primary text-decoration-none">800-123-4567</a>
                            </strong>
                        </span>
                    </li>
                    <li class="mb-0">
                        <span class="d-flex align-items-center justify-content-end justify-content-lg-end flex-column flex-lg-row font-weight-medium text-4 text-lg-3 text-xl-4">
                            SEND AN EMAIL:
                            <strong class="text-3 ms-lg-3">
                                <a href="mailto:mail@domain.com" class="text-color-tertiary text-color-hover-primary text-decoration-underline">cleanservice@domain.com</a>
                            </strong>
                        </span>
                    </li>
                </ul>
            </div>
        </div>
        <div class="row">
            <div class="col-6 col-xl-3 mb-5 mb-xl-0 appear-animation" data-appear-animation="fadeInLeftShorter" data-appear-animation-delay="200">
                <div class="d-flex align-items-center justify-content-center flex-column flex-xl-row text-center">
                    <svg fill="none" height="30" stroke="#212121" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" width="30" xmlns="http://www.w3.org/2000/svg">
                        <path d="M22 11.07V12a10 10 0 1 1-5.93-9.14"/>
                        <polyline points="23 3 12 14 9 11"/>
                    </svg>
                    <h3 class="text-transform-none text-color-dark font-weight-bold mb-0 text-4 ps-1 ms-xl-2 mt-3 mt-xl-0">30/7 Cleaning Services</h3>
                </div>
            </div>
            <div class="col-6 col-xl-3 divider-left-border mb-5 mb-xl-0 appear-animation" data-appear-animation="fadeInLeftShorter">
                <div class="d-flex align-items-center justify-content-center flex-column flex-xl-row text-center">
                    <svg fill="none" height="30" stroke="#212121" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" width="30" xmlns="http://www.w3.org/2000/svg">
                        <path d="M22 11.07V12a10 10 0 1 1-5.93-9.14"/>
                        <polyline points="23 3 12 14 9 11"/>
                    </svg>
                    <h3 class="text-transform-none text-color-dark font-weight-bold mb-0 text-4 px-2 px-sm-0 ps-1 ms-xl-2 mt-3 mt-xl-0">20+ Years Experience</h3>
                </div>
            </div>
            <div class="col-6 col-xl-3 divider-left-border appear-animation" data-appear-animation="fadeInRightShorter">
                <div class="d-flex align-items-center justify-content-center flex-column flex-xl-row text-center">
                    <svg fill="none" height="30" stroke="#212121" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" width="30" xmlns="http://www.w3.org/2000/svg">
                        <path d="M22 11.07V12a10 10 0 1 1-5.93-9.14"/>
                        <polyline points="23 3 12 14 9 11"/>
                    </svg>
                    <h3 class="text-transform-none text-color-dark font-weight-bold mb-0 text-4 px-3 px-sm-0 ps-1 ms-xl-2 mt-3 mt-xl-0">Insured & Bonded</h3>
                </div>
            </div>
            <div class="col-6 col-xl-3 divider-left-border appear-animation" data-appear-animation="fadeInRightShorter" data-appear-animation-delay="200">
                <div class="d-flex align-items-center justify-content-center flex-column flex-xl-row text-center">
                    <svg fill="none" height="30" stroke="#212121" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" width="30" xmlns="http://www.w3.org/2000/svg">
                        <path d="M22 11.07V12a10 10 0 1 1-5.93-9.14"/>
                        <polyline points="23 3 12 14 9 11"/>
                    </svg>
                    <h3 class="text-transform-none text-color-dark font-weight-bold mb-0 text-4 ps-1 ms-xl-2 mt-3 mt-xl-0">Trained Professionals</h3>
                </div>
            </div>
        </div>
    </div>

    <section id="whoweare" class="section section-with-shape-divider bg-transparent border-0 m-0">
        <div class="shape-divider shape-divider-bottom" style="height: 102px;">
            <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 102" preserveAspectRatio="xMinYMin">
                <path fill="#F4F4F4" d="M1895,78c-56.71-6.03-113.75-12.1-167-17c-75.42-6.94-133.81-10.66-171-13c-62.1-3.91-108.85-5.97-155-8
                    c-35.96-1.58-78.06-3.42-133-5c-59.81-1.72-103.18-2.23-172-3c-92.17-1.03-154.41-1.01-169-1c-69.05,0.05-115.16,0.67-137,1
                    c-43.08,0.65-76.21,1.48-97,2c-28.02,0.7-71.13,1.8-128,4c-16.64,0.64-57.72,2.28-111,5c-26.12,1.33-67.11,3.45-121,7
                    c-21.14,1.39-54.21,3.59-96,7c-19.93,1.63-39.22,3.32-47,4c-16.12,1.41-33.55,2.94-55,5c-26.48,2.54-19.07,2.04-77,8
                    c-19.39,1.99-36.94,3.77-60.59,7.46V103H1923V81C1916.55,80.3,1906.82,79.26,1895,78z"/>
            </svg>
        </div>
        <div class="container mt-2 mb-5 pb-5">
            <div class="row align-items-center mb-4">
                <div class="col-lg-5 mb-5 mb-lg-0">
                    <div class="d-flex align-items-center mb-2">
                        <span class="custom-line appear-animation" data-appear-animation="customLineAnimation" appear-animation-duration="1s"></span>
                        <div class="overflow-hidden ms-3">
                            <h2 class="text-color-primary font-weight-semibold line-height-3 text-4 mb-0 appear-animation" data-appear-animation="maskRight" data-appear-animation-delay="1000">WHO WE ARE</h2>
                        </div>
                    </div>
                    <h3 class="text-color-secondary font-weight-bold text-transform-none line-height-2 text-10 mb-4 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="1200">
                        Home and Commercial<br>
                        <span class="text-1 d-block">Cleaning Done Right Away</span>
                    </h3>
                    <p class="custom-font-secondary text-4 mb-4 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="1400">Get reliable & affordable cleaning services for your facility with a 100% satisfaction guaranteed!</p>
                    <p class="pb-1 mb-3 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="1600">Cras a elit sit amet leo accumsan volutpat. Suspendisse hendrerit vehicula leo, vel efficitur felis ultrices non. Integer aliquet ullamcorper dolor, quis sollicitudin.</p>
                    <a href="demo-cleaning-services-about.html" class="btn btn-primary btn-modern font-weight-bold text-3 px-5 py-3 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="1800">VIEW MORE</a>
                </div>
                <div class="col-sm-10 col-lg-6 offset-sm-1 ps-sm-5 ps-lg-0">
                    <div class="position-relative">
                        <div data-plugin-float-element data-plugin-options="{'startPos': 'top', 'speed': 0.2, 'transition': true, 'transitionDuration': 1000, 'isInsideSVG': true}">
                            <img src="img/demos/cleaning-services/generic/generic-2.jpg" class="img-fluid rounded-circle custom-box-shadow-1 appear-animation" data-appear-animation="fadeInLeftShorter" data-appear-animation-delay="1800" alt="" />
                        </div>
                        <div class="position-absolute top-50pct left-50pct transform3dxy-n50" style="left: 25%;">
                            <div data-plugin-float-element data-plugin-options="{'startPos': 'top', 'speed': 0.3, 'transition': true, 'transitionDuration': 1000, 'isInsideSVG': true}">
                                <img src="img/demos/cleaning-services/generic/generic-1.jpg" class="img-fluid rounded-circle custom-box-shadow-1 appear-animation" data-appear-animation="fadeInLeftShorter" data-appear-animation-delay="1400" alt="" />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="section border-0 py-4 m-0">
        <div class="container">
            <div class="row align-items-end pb-3 mb-5 mb-lg-4">
                <div class="col-lg-7 col-xl-8 mb-4 mb-lg-0">
                    <div class="d-flex align-items-center mb-2">
                        <span class="custom-line appear-animation" data-appear-animation="customLineAnimation" appear-animation-duration="1s"></span>
                        <div class="overflow-hidden ms-3">
                            <h2 class="text-color-primary font-weight-semibold line-height-3 text-4 mb-0 appear-animation" data-appear-animation="maskRight" data-appear-animation-delay="1000">WHAT WE DO</h2>
                        </div>
                    </div>
                    <h3 class="text-color-secondary font-weight-bold text-transform-none text-8 mb-3 pb-1 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="1200">Our Services</h3>
                    <p class="mb-0 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="1400">Cras a elit sit amet leo accumsan volutpat. Suspendisse hendrerit vehicula leo, vel efficitur felis ultrices non. Integer aliquet ullamcorper dolor, quis sollicitudin. Integer aliquet ullamcorper dolor, quis sollicitudin.</p>
                </div>
                <div class="col-lg-5 col-xl-4">
                    <div class="d-flex justify-content-lg-end">
                        <a href="demo-cleaning-services-services.html" class="btn btn-primary btn-modern font-weight-bold text-3 btn-px-4 py-3 appear-animation" data-appear-animation="fadeInLeftShorter" data-appear-animation-delay="1800">VIEW ALL SERVICES</a>
                        <a href="demo-cleaning-services-contact.html" class="btn btn-secondary btn-modern font-weight-bold text-3 btn-px-4 py-3 ms-4 appear-animation" data-appear-animation="fadeInLeftShorter" data-appear-animation-delay="1600">BOOK NOW</a>
                    </div>
                </div>
            </div>
            <div class="row appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="2000">
                <div class="col">
                    <div class="owl-carousel nav-outside nav-arrows-1 custom-carousel-box-shadow-1 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="750" data-plugin-options="{'responsive': {'0': {'items': 1}, '479': {'items': 1}, '768': {'items': 2}, '979': {'items': 3}, '1199': {'items': 3}}, 'autoplay': false, 'autoplayTimeout': 5000, 'autoplayHoverPause': true, 'dots': false, 'nav': true, 'loop': false, 'margin': 20, 'stagePadding': '75'}">
                        <div>
                            <a href="demo-cleaning-services-services-detail.html" class="text-decoration-none">
                                <div class="card custom-card-style-1">
                                    <div class="card-body text-center py-5">
                                        <div class="custom-card-style-1-image-wrapper bg-primary rounded-circle d-inline-block mb-3">
                                            <img src="img/demos/cleaning-services/services/services-small-1.jpg" class="img-fluid rounded-circle" alt="" />
                                        </div>
                                        <h4 class="custom-card-style-1-title text-color-secondary font-weight-bold mb-2">Building Services</h4>
                                        <p class="custom-card-style-1-description">Cras a elit sit amet leo accumsan volutpat. Suspendisse hendrerit vehicula leo, vel efficitur felis ultrices non. </p>
                                        <span class="custom-card-style-1-link font-weight-bold">VIEW MORE</span>
                                    </div>
                                </div>
                            </a>
                        </div>
                        <div>
                            <a href="demo-cleaning-services-services-detail.html" class="text-decoration-none">
                                <div class="card custom-card-style-1">
                                    <div class="card-body text-center py-5">
                                        <div class="custom-card-style-1-image-wrapper bg-primary rounded-circle d-inline-block mb-3">
                                            <img src="img/demos/cleaning-services/services/services-small-2.jpg" class="img-fluid rounded-circle" alt="" />
                                        </div>
                                        <h4 class="custom-card-style-1-title text-color-secondary font-weight-bold mb-2">Post Construction</h4>
                                        <p class="custom-card-style-1-description">Cras a elit sit amet leo accumsan volutpat. Suspendisse hendrerit vehicula leo, vel efficitur felis ultrices non. </p>
                                        <span class="custom-card-style-1-link font-weight-bold">VIEW MORE</span>
                                    </div>
                                </div>
                            </a>
                        </div>
                        <div>
                            <a href="demo-cleaning-services-services-detail.html" class="text-decoration-none">
                                <div class="card custom-card-style-1">
                                    <div class="card-body text-center py-5">
                                        <div class="custom-card-style-1-image-wrapper bg-primary rounded-circle d-inline-block mb-3">
                                            <img src="img/demos/cleaning-services/services/services-small-3.jpg" class="img-fluid rounded-circle" alt="" />
                                        </div>
                                        <h4 class="custom-card-style-1-title text-color-secondary font-weight-bold mb-2">Office Cleaning</h4>
                                        <p class="custom-card-style-1-description">Cras a elit sit amet leo accumsan volutpat. Suspendisse hendrerit vehicula leo, vel efficitur felis ultrices non. </p>
                                        <span class="custom-card-style-1-link font-weight-bold">VIEW MORE</span>
                                    </div>
                                </div>
                            </a>
                        </div>
                        <div>
                            <a href="demo-cleaning-services-services-detail.html" class="text-decoration-none">
                                <div class="card custom-card-style-1">
                                    <div class="card-body text-center py-5">
                                        <div class="custom-card-style-1-image-wrapper bg-primary rounded-circle d-inline-block mb-3">
                                            <img src="img/demos/cleaning-services/services/services-small-1.jpg" class="img-fluid rounded-circle" alt="" />
                                        </div>
                                        <h4 class="custom-card-style-1-title text-color-secondary font-weight-bold mb-2">Building Services</h4>
                                        <p class="custom-card-style-1-description">Cras a elit sit amet leo accumsan volutpat. Suspendisse hendrerit vehicula leo, vel efficitur felis ultrices non. </p>
                                        <span class="custom-card-style-1-link font-weight-bold">VIEW MORE</span>
                                    </div>
                                </div>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="section section-with-shape-divider section-height-3 overlay overlay-show overlay-color-tertiary border-0 m-0" style="background-image: url(img/demos/cleaning-services/backgrounds/background-2.jpg); background-size: cover; background-position: center;">
        <div class="shape-divider" style="height: 116px;">
            <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 116" preserveAspectRatio="xMinYMin">
                <path class="custom-svg-fill-color-tertiary-darken" d="M0,24c2.86,0.42,7.41,1.1,13,2c6.13,0.98,10.67,1.77,12,2c11.67,2.01,42.24,7.05,68,11
                    c7.79,1.2,22.72,3.48,41,6c20.75,2.86,38.83,5.06,74,9c41.19,4.61,62.09,6.95,93,10c57.4,5.66,101.17,9.03,114,10
                    c9.13,0.69,40.29,3.02,109,7c48.33,2.8,87.04,5.04,132,7c76.86,3.35,135.02,4.27,184,5c104.27,1.56,187.39,0.71,234,0
                    c21.92-0.34,91.62-1.5,183-5c50.62-1.94,106.43-4.12,181-9c57.01-3.73,108.05-7.94,152-12c94.91-8.78,162.37-17.44,182-20
                    c41.76-5.45,72.06-10.09,96-14c21.23-3.47,39.04-6.63,52-9c0-11.67,0-23.33,0-35C1279-11,638-11-3-11C-2,0.67-1,12.33,0,24z"/>
                <path fill="#F4F4F4" d="M-7,23c1.59,0.23,4.03,0.58,7,1c82.06,11.6,145.17,16.35,182,19c244.62,17.62,377,23,377,23
                    c157.86,6.42,277.64,7.71,308,8c75.8,0.73,232.89,1.31,438-6c0,0,137.72-4.66,358-19c42.98-2.8,104.01-7.03,183-16
                    c33.26-3.78,60.85-7.38,80-10c0-9.01,0-18.01,0-27.02c-644,0-1288,0-1932,0C-6.33,4.99-6.67,13.99-7,23z"/>
            </svg>
        </div>
        <div class="shape-divider shape-divider-bottom" style="height: 102px;">
            <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 102" preserveAspectRatio="xMinYMin">
                <path fill="#F4F4F4" d="M1895,78c-56.71-6.03-113.75-12.1-167-17c-75.42-6.94-133.81-10.66-171-13c-62.1-3.91-108.85-5.97-155-8
                    c-35.96-1.58-78.06-3.42-133-5c-59.81-1.72-103.18-2.23-172-3c-92.17-1.03-154.41-1.01-169-1c-69.05,0.05-115.16,0.67-137,1
                    c-43.08,0.65-76.21,1.48-97,2c-28.02,0.7-71.13,1.8-128,4c-16.64,0.64-57.72,2.28-111,5c-26.12,1.33-67.11,3.45-121,7
                    c-21.14,1.39-54.21,3.59-96,7c-19.93,1.63-39.22,3.32-47,4c-16.12,1.41-33.55,2.94-55,5c-26.48,2.54-19.07,2.04-77,8
                    c-19.39,1.99-36.94,3.77-60.59,7.46V103H1923V81C1916.55,80.3,1906.82,79.26,1895,78z"/>
            </svg>
        </div>
        <div class="container py-5 my-5">
            <div class="row align-items-center justify-content-center pt-3">
                <div class="col-md-9 col-lg-7 col-xl-9 text-center text-xl-start mb-4 mb-xl-0">
                    <h2 class="text-color-light font-weight-medium line-height-4 text-9 negative-ls-1 mb-2">For <span class="font-weight-extra-bold custom-highlight-1 p-1 appear-animation" data-appear-animation="customHighlightAnim" data-appear-animation-delay="300">Residential and Commercial</span> Cleaning</h2>
                    <p class="custom-font-secondary custom-font-size-1 font-weight-light text-color-light opacity-8 mb-0">Our Staff is trained to clean everything you need!</p>
                </div>
                <div class="col-xl-3 text-center text-xl-end">
                    <div class="position-relative">
                        <a href="demo-cleaning-services-contact.html" class="btn btn-secondary btn-modern font-weight-bold text-3 btn-px-4 py-3 appear-animation" data-appear-animation="fadeInRightShorter" data-appear-animation-delay="550">BOOK NOW IN 60 SECONDS</a>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="section border-0 m-0">
        <div class="container">
            <div class="row">
                <div class="col-lg-8">
                    <div class="d-flex align-items-center mb-2">
                        <span class="custom-line appear-animation" data-appear-animation="customLineAnimation" appear-animation-duration="1s"></span>
                        <div class="overflow-hidden ms-3">
                            <h2 class="text-color-primary font-weight-semibold line-height-3 text-4 mb-0 appear-animation" data-appear-animation="maskRight" data-appear-animation-delay="1000">WHY CHOOSE US</h2>
                        </div>
                    </div>
                    <h3 class="text-color-secondary font-weight-bold text-transform-none text-8 mb-3 pb-1 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="1200">Our Benefits</h3>
                    <p class="mb-4 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="1400">Cras a elit sit amet leo accumsan volutpat. Suspendisse hendrerit vehicula leo, vel efficitur felis ultrices non. Integer aliquet ullamcorper dolor, quis sollicitudin. Integer aliquet ullamcorper dolor, quis sollicitudin.</p>
                </div>
            </div>
            <div class="row align-items-center justify-content-center mb-4">
                <div class="col-lg-7 pe-lg-5 mb-5 mb-lg-0">
                    <div class="accordion custom-accordion-style-1 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="1600" id="accordion1">
                        <div class="card card-default">
                            <div class="card-header" id="collapse1HeadingOne">
                                <h4 class="card-title m-0">
                                    <a class="accordion-toggle text-color-dark font-weight-bold collapsed" data-bs-toggle="collapse" data-bs-target="#collapse1One" aria-expanded="false" aria-controls="collapse1One">
                                        1 - Why Choose Porto Cleaning Services?
                                    </a>
                                </h4>
                            </div>
                            <div id="collapse1One" class="collapse" aria-labelledby="collapse1HeadingOne" data-bs-parent="#accordion1">
                                <div class="card-body">
                                    <p class="mb-0">Donec tellus massa, tristique sit amet condim vel, facilisis quis sapien. Praesent id enim sit amet odio vulputate eleifend in in tortor. Donec tellus massa, tristique sit amet condim vel, facilisis quis sapien. Praesent id enim sit amet odio vulputate eleifend in in tortor. Donec tellus massa, tristique sit amet condim vel, facilisis quis sapien.</p>
                                </div>
                            </div>
                        </div>
                        <div class="card card-default">
                            <div class="card-header" id="collapse1HeadingTwo">
                                <h4 class="card-title m-0">
                                    <a class="accordion-toggle text-color-dark font-weight-bold collapsed" data-bs-toggle="collapse" data-bs-target="#collapse1Two" aria-expanded="false" aria-controls="collapse1Two">
                                        2 - Cras a elit sit amet leo accumsan?
                                    </a>
                                </h4>
                            </div>
                            <div id="collapse1Two" class="collapse" aria-labelledby="collapse1HeadingTwo" data-bs-parent="#accordion1">
                                <div class="card-body">
                                    <p class="mb-0">Donec tellus massa, tristique sit amet condim vel, facilisis quis sapien. Praesent id enim sit amet odio vulputate eleifend in in tortor. Donec tellus massa, tristique sit amet condim vel, facilisis quis sapien. Praesent id enim sit amet odio vulputate eleifend in in tortor. Donec tellus massa, tristique sit amet condim vel, facilisis quis sapien.</p>
                                </div>
                            </div>
                        </div>
                        <div class="card card-default">
                            <div class="card-header" id="collapse1HeadingThree">
                                <h4 class="card-title m-0">
                                    <a class="accordion-toggle text-color-dark font-weight-bold collapsed" data-bs-toggle="collapse" data-bs-target="#collapse1Three" aria-expanded="false" aria-controls="collapse1Three">
                                        3 - Hel officitur felis ultricis nan?
                                    </a>
                                </h4>
                            </div>
                            <div id="collapse1Three" class="collapse" aria-labelledby="collapse1HeadingThree" data-bs-parent="#accordion1">
                                <div class="card-body">
                                    <p class="mb-0">Donec tellus massa, tristique sit amet condim vel, facilisis quis sapien. Praesent id enim sit amet odio vulputate eleifend in in tortor. Donec tellus massa, tristique sit amet condim vel, facilisis quis sapien. Praesent id enim sit amet odio vulputate eleifend in in tortor. Donec tellus massa, tristique sit amet condim vel, facilisis quis sapien.</p>
                                </div>
                            </div>
                        </div>
                        <div class="card card-default">
                            <div class="card-header" id="collapse1HeadingFour">
                                <h4 class="card-title m-0">
                                    <a class="accordion-toggle text-color-dark font-weight-bold collapsed" data-bs-toggle="collapse" data-bs-target="#collapse1Four" aria-expanded="false" aria-controls="collapse1Four">
                                        4 - Wuspaisse hendreirit vehicula leo?
                                    </a>
                                </h4>
                            </div>
                            <div id="collapse1Four" class="collapse" aria-labelledby="collapse1HeadingFour" data-bs-parent="#accordion1">
                                <div class="card-body">
                                    <p class="mb-0">Donec tellus massa, tristique sit amet condim vel, facilisis quis sapien. Praesent id enim sit amet odio vulputate eleifend in in tortor. Donec tellus massa, tristique sit amet condim vel, facilisis quis sapien. Praesent id enim sit amet odio vulputate eleifend in in tortor. Donec tellus massa, tristique sit amet condim vel, facilisis quis sapien.</p>
                                </div>
                            </div>
                        </div>
                        <div class="card card-default">
                            <div class="card-header" id="collapse1HeadingFive">
                                <h4 class="card-title m-0">
                                    <a class="accordion-toggle text-color-dark font-weight-bold collapsed" data-bs-toggle="collapse" data-bs-target="#collapse1Five" aria-expanded="false" aria-controls="collapse1Five">
                                        5 - Lintegers aliquet ullamcorper dollor, quis sollic tudin?
                                    </a>
                                </h4>
                            </div>
                            <div id="collapse1Five" class="collapse" aria-labelledby="collapse1HeadingFive" data-bs-parent="#accordion1">
                                <div class="card-body">
                                    <p class="mb-0">Donec tellus massa, tristique sit amet condim vel, facilisis quis sapien. Praesent id enim sit amet odio vulputate eleifend in in tortor. Donec tellus massa, tristique sit amet condim vel, facilisis quis sapien. Praesent id enim sit amet odio vulputate eleifend in in tortor. Donec tellus massa, tristique sit amet condim vel, facilisis quis sapien.</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-9 col-lg-5 ps-sm-5">
                    <div class="position-relative">
                        <div data-plugin-float-element data-plugin-options="{'startPos': 'top', 'speed': 0.2, 'transition': true, 'transitionDuration': 1000, 'isInsideSVG': true}">
                            <img src="img/demos/cleaning-services/generic/generic-4.jpg" class="img-fluid rounded-circle custom-box-shadow-1 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="1200" alt="" />
                        </div>
                        <div class="position-absolute top-50pct left-50pct transform3dxy-n50" style="left: 25%;">
                            <div data-plugin-float-element data-plugin-options="{'startPos': 'top', 'speed': 0.3, 'transition': true, 'transitionDuration': 1000, 'isInsideSVG': true}">
                                <img src="img/demos/cleaning-services/generic/generic-3.jpg" class="img-fluid rounded-circle custom-box-shadow-1 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="1400" alt="" />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="section section-with-shape-divider border-0 bg-transparent m-0">
        <div class="shape-divider shape-divider-reverse-x" style="height: 102px;">
            <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 102" preserveAspectRatio="xMinYMin">
                <path fill="#F4F4F4" d="M1895,78c-56.71-6.03-113.75-12.1-167-17c-75.42-6.94-133.81-10.66-171-13c-62.1-3.91-108.85-5.97-155-8
                    c-35.96-1.58-78.06-3.42-133-5c-59.81-1.72-103.18-2.23-172-3c-92.17-1.03-154.41-1.01-169-1c-69.05,0.05-115.16,0.67-137,1
                    c-43.08,0.65-76.21,1.48-97,2c-28.02,0.7-71.13,1.8-128,4c-16.64,0.64-57.72,2.28-111,5c-26.12,1.33-67.11,3.45-121,7
                    c-21.14,1.39-54.21,3.59-96,7c-19.93,1.63-39.22,3.32-47,4c-16.12,1.41-33.55,2.94-55,5c-26.48,2.54-19.07,2.04-77,8
                    c-19.39,1.99-36.94,3.77-60.59,7.46V103H1923V81C1916.55,80.3,1906.82,79.26,1895,78z"/>
            </svg>
        </div>
        <div class="shape-divider shape-divider-bottom" style="height: 102px;">
            <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 102" preserveAspectRatio="xMinYMin">
                <path fill="#F4F4F4" d="M1895,78c-56.71-6.03-113.75-12.1-167-17c-75.42-6.94-133.81-10.66-171-13c-62.1-3.91-108.85-5.97-155-8
                    c-35.96-1.58-78.06-3.42-133-5c-59.81-1.72-103.18-2.23-172-3c-92.17-1.03-154.41-1.01-169-1c-69.05,0.05-115.16,0.67-137,1
                    c-43.08,0.65-76.21,1.48-97,2c-28.02,0.7-71.13,1.8-128,4c-16.64,0.64-57.72,2.28-111,5c-26.12,1.33-67.11,3.45-121,7
                    c-21.14,1.39-54.21,3.59-96,7c-19.93,1.63-39.22,3.32-47,4c-16.12,1.41-33.55,2.94-55,5c-26.48,2.54-19.07,2.04-77,8
                    c-19.39,1.99-36.94,3.77-60.59,7.46V103H1923V81C1916.55,80.3,1906.82,79.26,1895,78z"/>
            </svg>
        </div>
        <div class="container py-5 my-5">
            <div class="row justify-content-center pb-2 mt-2 mb-4">
                <div class="col-lg-9 text-center">
                    <h2 class="text-color-secondary font-weight-bold text-8 mb-3 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="200">Our Process</h2>
                    <p class="custom-font-secondary text-4 mb-4 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="400">Get reliable & affordable cleaning services for your facility with a 100% satisfaction guaranteed!</p>
                    <p class="mb-0 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="600">Cras a elit sit amet leo accumsan volutpat. Suspendisse hendrerit vehicula leo, vel efficitur felis ultrices non. Integer aliquet ullamcorper dolor, quis sollicitudin.</p>
                </div>
            </div>
            <div class="featured-boxes featured-boxes-style-4 custom-featured-boxes-style-1">
                <div class="row justify-content-center">
                    <div class="col-md-8 col-lg-4">
                        <div class="featured-box featured-box-primary featured-box-effect-5 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="300">
                            <div class="box-content text-center">
                                <div class="custom-featured-icon-wrapper bg-secondary mb-4">
                                    <img src="img/demos/cleaning-services/icons/icon-1.png" class="img-fluid icon-featured" alt="" />
                                </div>
                                <h3 class="text-transform-none font-weight-bold custom-font-size-1 mb-3">Book Online</h3>
                                <p class="px-3 mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc viverra erat orci, ac auctor.</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-8 col-lg-4">
                        <div class="featured-box featured-box-primary featured-box-effect-5 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="500">
                            <div class="box-content text-center">
                                <div class="custom-featured-icon-wrapper bg-secondary mb-4">
                                    <img src="img/demos/cleaning-services/icons/icon-2.png" class="img-fluid icon-featured" alt="" />
                                </div>
                                <h3 class="text-transform-none font-weight-bold custom-font-size-1 mb-3">We Clean</h3>
                                <p class="px-3 mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc viverra erat orci, ac auctor.</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-8 col-lg-4">
                        <div class="featured-box featured-box-primary featured-box-effect-5 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="700">
                            <div class="box-content text-center">
                                <div class="custom-featured-icon-wrapper bg-secondary mb-4">
                                    <img src="img/demos/cleaning-services/icons/icon-3.png" class="img-fluid icon-featured" alt="" />
                                </div>
                                <h3 class="text-transform-none font-weight-bold custom-font-size-1 mb-3">You Relax</h3>
                                <p class="px-3 mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc viverra erat orci, ac auctor.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="section border-0 pt-4 pb-3 m-0">
        <div class="container">
            <div class="row align-items-end pb-3 mb-5 mb-lg-4">
                <div class="col-lg-7 col-xl-8 mb-4 mb-lg-0">
                    <div class="d-flex align-items-center mb-2">
                        <span class="custom-line appear-animation" data-appear-animation="customLineAnimation" appear-animation-duration="1s"></span>
                        <div class="overflow-hidden ms-3">
                            <h2 class="text-color-primary font-weight-semibold line-height-3 text-4 mb-0 appear-animation" data-appear-animation="maskRight" data-appear-animation-delay="1000">RECENT WORK</h2>
                        </div>
                    </div>
                    <h3 class="text-color-secondary font-weight-bold text-transform-none text-8 mb-3 pb-1 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="1200">Our Portfolio</h3>
                    <p class="mb-0 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="1400">Cras a elit sit amet leo accumsan volutpat. Suspendisse hendrerit vehicula leo, vel efficitur felis ultrices non. Integer aliquet ullamcorper dolor, quis sollicitudin. Integer aliquet ullamcorper dolor, quis sollicitudin.</p>
                </div>
                <div class="col-lg-5 col-xl-4">
                    <div class="d-flex justify-content-lg-end">
                        <a href="demo-cleaning-services-portfolio.html" class="btn btn-primary btn-modern font-weight-bold text-3 btn-px-4 py-3 appear-animation" data-appear-animation="fadeInLeftShorter" data-appear-animation-delay="1800">VIEW ALL PORTFOLIO</a>
                        <a href="demo-cleaning-services-contact.html" class="btn btn-secondary btn-modern font-weight-bold text-3 btn-px-4 py-3 ms-4 appear-animation" data-appear-animation="fadeInLeftShorter" data-appear-animation-delay="1600">BOOK NOW</a>
                    </div>
                </div>
            </div>
            <div class="row appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="2000">
                <div class="col">
                    <div class="owl-carousel nav-outside nav-arrows-1 custom-carousel-box-shadow-1 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="750" data-plugin-options="{'responsive': {'0': {'items': 1}, '479': {'items': 1}, '768': {'items': 2}, '979': {'items': 2}, '1199': {'items': 2}}, 'autoplay': false, 'autoplayTimeout': 5000, 'autoplayHoverPause': true, 'dots': false, 'nav': true, 'loop': false, 'margin': 20, 'stagePadding': '75'}">
                        <div>
                            <a href="demo-cleaning-services-portfolio-detail.html" class="text-decoration-none">
                                <div class="thumb-info thumb-info-no-borders thumb-info-no-borders-rounded thumb-info-centered-icons thumb-info-hide-wrapper-bg">
                                    <div class="thumb-info-wrapper overlay overlay-color-secondary">
                                        <img src="img/demos/cleaning-services/portfolio/portfolio-1.jpg" class="img-fluid" alt="">
                                        <div class="thumb-info-action text-center flex-column">
                                            <h4 class="text-color-light font-weight-bold text-6 mb-1">Porto Building</h4>
                                            <span class="d-block text-color-light font-weight-light">Post Construction</span>
                                        </div>
                                    </div>
                                </div>
                            </a>
                        </div>
                        <div>
                            <a href="demo-cleaning-services-portfolio-detail.html" class="text-decoration-none">
                                <div class="thumb-info thumb-info-no-borders thumb-info-no-borders-rounded thumb-info-centered-icons thumb-info-hide-wrapper-bg">
                                    <div class="thumb-info-wrapper overlay overlay-color-secondary">
                                        <img src="img/demos/cleaning-services/portfolio/portfolio-2.jpg" class="img-fluid" alt="">
                                        <div class="thumb-info-action text-center flex-column">
                                            <h4 class="text-color-light font-weight-bold text-6 mb-1">Porto Office</h4>
                                            <span class="d-block text-color-light font-weight-light">Cleaning Office</span>
                                        </div>
                                    </div>
                                </div>
                            </a>
                        </div>
                        <div>
                            <a href="demo-cleaning-services-portfolio-detail.html" class="text-decoration-none">
                                <div class="thumb-info thumb-info-no-borders thumb-info-no-borders-rounded thumb-info-centered-icons thumb-info-hide-wrapper-bg">
                                    <div class="thumb-info-wrapper overlay overlay-color-secondary">
                                        <img src="img/demos/cleaning-services/portfolio/portfolio-3.jpg" class="img-fluid" alt="">
                                        <div class="thumb-info-action text-center flex-column">
                                            <h4 class="text-color-light font-weight-bold text-6 mb-1">Porto Enterprise</h4>
                                            <span class="d-block text-color-light font-weight-light">Building Services</span>
                                        </div>
                                    </div>
                                </div>
                            </a>
                        </div>
                        <div>
                            <a href="demo-cleaning-services-portfolio-detail.html" class="text-decoration-none">
                                <div class="thumb-info thumb-info-no-borders thumb-info-no-borders-rounded thumb-info-centered-icons thumb-info-hide-wrapper-bg">
                                    <div class="thumb-info-wrapper overlay overlay-color-secondary">
                                        <img src="img/demos/cleaning-services/portfolio/portfolio-4.jpg" class="img-fluid" alt="">
                                        <div class="thumb-info-action text-center flex-column">
                                            <h4 class="text-color-light font-weight-bold text-6 mb-1">Porto Home</h4>
                                            <span class="d-block text-color-light font-weight-light">Cleaning Services</span>
                                        </div>
                                    </div>
                                </div>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="section section-with-shape-divider bg-transparent border-0 pb-4 m-0">
        <div class="shape-divider shape-divider-reverse-x" style="height: 102px;">
            <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 102" preserveAspectRatio="xMinYMin">
                <path fill="#F4F4F4" d="M1895,78c-56.71-6.03-113.75-12.1-167-17c-75.42-6.94-133.81-10.66-171-13c-62.1-3.91-108.85-5.97-155-8
                    c-35.96-1.58-78.06-3.42-133-5c-59.81-1.72-103.18-2.23-172-3c-92.17-1.03-154.41-1.01-169-1c-69.05,0.05-115.16,0.67-137,1
                    c-43.08,0.65-76.21,1.48-97,2c-28.02,0.7-71.13,1.8-128,4c-16.64,0.64-57.72,2.28-111,5c-26.12,1.33-67.11,3.45-121,7
                    c-21.14,1.39-54.21,3.59-96,7c-19.93,1.63-39.22,3.32-47,4c-16.12,1.41-33.55,2.94-55,5c-26.48,2.54-19.07,2.04-77,8
                    c-19.39,1.99-36.94,3.77-60.59,7.46V103H1923V81C1916.55,80.3,1906.82,79.26,1895,78z"/>
            </svg>
        </div>
        <div class="container pt-5 mt-5">
            <div class="row justify-content-center pb-2 mb-3">
                <div class="col-md-9 col-lg-12 text-center">
                    <h2 class="text-color-secondary font-weight-bold line-height-6 mb-3 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="200">Our Team</h2>
                    <p class="custom-font-secondary text-4 mb-3 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="400">Cras a elit sit amet leo accumsan volutpat. Suspendisse hendrerit vehicula leo, vel efficitur felis ultri.</p>
                </div>
            </div>
            <div class="row appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="600">
                <div class="col">
                    <div class="owl-carousel nav-outside nav-arrows-1 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="750" data-plugin-options="{'responsive': {'0': {'items': 1}, '479': {'items': 1}, '768': {'items': 2}, '979': {'items': 3}, '1199': {'items': 3}}, 'autoplay': false, 'autoplayTimeout': 5000, 'autoplayHoverPause': true, 'dots': false, 'nav': true, 'loop': false, 'margin': 20, 'stagePadding': '75'}">
                        <div>
                            <div class="card custom-card-style-1 custom-card-style-1-variation">
                                <div class="card-body text-center bg-color-grey py-5">
                                    <div class="custom-card-style-1-image-wrapper bg-primary rounded-circle d-inline-block mb-3">
                                        <a href="#">
                                            <img src="img/demos/cleaning-services/team/team-1.jpg" class="img-fluid rounded-circle" alt="" />
                                        </a>
                                    </div>
                                    <h4 class="text-color-secondary font-weight-bold line-height-1 text-5 mb-0"><a href="#" class="text-color-secondary text-color-hover-primary text-decoration-none">John Doe</a></h4>
                                    <p class="text-2 pb-1 mb-2">General Cleaner</p>
                                    <ul class="social-icons custom-social-icons social-icons-big">
                                        <li class="social-icons-instagram"><a href="http://www.instagram.com/" target="_blank" title="Instagram"><i class="fab fa-instagram"></i></a></li>
                                        <li class="social-icons-x mx-2"><a href="http://www.x.com/" target="_blank" title="X"><i class="fab fa-x-twitter"></i></a></li>
                                        <li class="social-icons-facebook"><a href="http://www.facebook.com/" target="_blank" title="Facebook"><i class="fab fa-facebook-f"></i></a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div>
                            <div class="card custom-card-style-1 custom-card-style-1-variation">
                                <div class="card-body text-center bg-color-grey py-5">
                                    <div class="custom-card-style-1-image-wrapper bg-primary rounded-circle d-inline-block mb-3">
                                        <a href="#">
                                            <img src="img/demos/cleaning-services/team/team-2.jpg" class="img-fluid rounded-circle" alt="" />
                                        </a>
                                    </div>
                                    <h4 class="text-color-secondary font-weight-bold line-height-1 text-5 mb-0"><a href="#" class="text-color-secondary text-color-hover-primary text-decoration-none">Judie Doe</a></h4>
                                    <p class="text-2 pb-1 mb-2">General Cleaner</p>
                                    <ul class="social-icons custom-social-icons social-icons-big">
                                        <li class="social-icons-instagram"><a href="http://www.instagram.com/" target="_blank" title="Instagram"><i class="fab fa-instagram"></i></a></li>
                                        <li class="social-icons-x mx-2"><a href="http://www.x.com/" target="_blank" title="X"><i class="fab fa-x-twitter"></i></a></li>
                                        <li class="social-icons-facebook"><a href="http://www.facebook.com/" target="_blank" title="Facebook"><i class="fab fa-facebook-f"></i></a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div>
                            <div class="card custom-card-style-1 custom-card-style-1-variation">
                                <div class="card-body text-center bg-color-grey py-5">
                                    <div class="custom-card-style-1-image-wrapper bg-primary rounded-circle d-inline-block mb-3">
                                        <a href="#">
                                            <img src="img/demos/cleaning-services/team/team-3.jpg" class="img-fluid rounded-circle" alt="" />
                                        </a>
                                    </div>
                                    <h4 class="text-color-secondary font-weight-bold line-height-1 text-5 mb-0"><a href="#" class="text-color-secondary text-color-hover-primary text-decoration-none">Monica Doe</a></h4>
                                    <p class="text-2 pb-1 mb-2">General Cleaner</p>
                                    <ul class="social-icons custom-social-icons social-icons-big">
                                        <li class="social-icons-instagram"><a href="http://www.instagram.com/" target="_blank" title="Instagram"><i class="fab fa-instagram"></i></a></li>
                                        <li class="social-icons-x mx-2"><a href="http://www.x.com/" target="_blank" title="X"><i class="fab fa-x-twitter"></i></a></li>
                                        <li class="social-icons-facebook"><a href="http://www.facebook.com/" target="_blank" title="Facebook"><i class="fab fa-facebook-f"></i></a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div>
                            <div class="card custom-card-style-1 custom-card-style-1-variation">
                                <div class="card-body text-center bg-color-grey py-5">
                                    <div class="custom-card-style-1-image-wrapper bg-primary rounded-circle d-inline-block mb-3">
                                        <a href="#">
                                            <img src="img/demos/cleaning-services/team/team-1.jpg" class="img-fluid rounded-circle" alt="" />
                                        </a>
                                    </div>
                                    <h4 class="text-color-secondary font-weight-bold line-height-1 text-5 mb-0"><a href="#" class="text-color-secondary text-color-hover-primary text-decoration-none">John Doe</a></h4>
                                    <p class="text-2 pb-1 mb-2">General Cleaner</p>
                                    <ul class="social-icons custom-social-icons social-icons-big">
                                        <li class="social-icons-instagram"><a href="http://www.instagram.com/" target="_blank" title="Instagram"><i class="fab fa-instagram"></i></a></li>
                                        <li class="social-icons-x mx-2"><a href="http://www.x.com/" target="_blank" title="X"><i class="fab fa-x-twitter"></i></a></li>
                                        <li class="social-icons-facebook"><a href="http://www.facebook.com/" target="_blank" title="Facebook"><i class="fab fa-facebook-f"></i></a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="section section-with-shape-divider bg-tertiary border-0 m-0">
        <div class="shape-divider" style="height: 116px;">
            <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 116" preserveAspectRatio="xMinYMin">
                <path class="custom-svg-fill-color-tertiary-darken" d="M0,24c2.86,0.42,7.41,1.1,13,2c6.13,0.98,10.67,1.77,12,2c11.67,2.01,42.24,7.05,68,11
                    c7.79,1.2,22.72,3.48,41,6c20.75,2.86,38.83,5.06,74,9c41.19,4.61,62.09,6.95,93,10c57.4,5.66,101.17,9.03,114,10
                    c9.13,0.69,40.29,3.02,109,7c48.33,2.8,87.04,5.04,132,7c76.86,3.35,135.02,4.27,184,5c104.27,1.56,187.39,0.71,234,0
                    c21.92-0.34,91.62-1.5,183-5c50.62-1.94,106.43-4.12,181-9c57.01-3.73,108.05-7.94,152-12c94.91-8.78,162.37-17.44,182-20
                    c41.76-5.45,72.06-10.09,96-14c21.23-3.47,39.04-6.63,52-9c0-11.67,0-23.33,0-35C1279-11,638-11-3-11C-2,0.67-1,12.33,0,24z"/>
                <path fill="#FFF" d="M-7,23c1.59,0.23,4.03,0.58,7,1c82.06,11.6,145.17,16.35,182,19c244.62,17.62,377,23,377,23
                    c157.86,6.42,277.64,7.71,308,8c75.8,0.73,232.89,1.31,438-6c0,0,137.72-4.66,358-19c42.98-2.8,104.01-7.03,183-16
                    c33.26-3.78,60.85-7.38,80-10c0-9.01,0-18.01,0-27.02c-644,0-1288,0-1932,0C-6.33,4.99-6.67,13.99-7,23z"/>
            </svg>
        </div>
        <div class="shape-divider shape-divider-bottom" style="height: 102px;">
            <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 102" preserveAspectRatio="xMinYMin">
                <path fill="#F4F4F4" d="M1895,78c-56.71-6.03-113.75-12.1-167-17c-75.42-6.94-133.81-10.66-171-13c-62.1-3.91-108.85-5.97-155-8
                    c-35.96-1.58-78.06-3.42-133-5c-59.81-1.72-103.18-2.23-172-3c-92.17-1.03-154.41-1.01-169-1c-69.05,0.05-115.16,0.67-137,1
                    c-43.08,0.65-76.21,1.48-97,2c-28.02,0.7-71.13,1.8-128,4c-16.64,0.64-57.72,2.28-111,5c-26.12,1.33-67.11,3.45-121,7
                    c-21.14,1.39-54.21,3.59-96,7c-19.93,1.63-39.22,3.32-47,4c-16.12,1.41-33.55,2.94-55,5c-26.48,2.54-19.07,2.04-77,8
                    c-19.39,1.99-36.94,3.77-60.59,7.46V103H1923V81C1916.55,80.3,1906.82,79.26,1895,78z"/>
            </svg>
        </div>
        <div class="container pt-5 pb-3 mt-4">
            <div class="row mt-5 mb-5">
                <div class="col-lg-4 pe-lg-0 mb-4 mb-lg-0">
                    <h2 class="text-color-light font-weight-bold line-height-6 text-8 mb-3">Our Happy Clients</h2>
                    <p class="text-color-light opacity-7 mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed imperdiet libero id nisi euismod, sed porta est consectetur. Sed imperdiet libero id nisi euismod, sed porta est consectetur.</p>
                </div>
                <div class="col-lg-8 ps-lg-4">
                    <div class="owl-carousel dots-light dots-align-left" data-plugin-options="{'responsive': {'0': {'items': 1}, '479': {'items': 1}, '979': {'items': 2}, '1199': {'items': 2}}, 'margin': 20, 'loop': true, 'dots': true, 'dotsEach': 1, 'nav': false, 'autoplay': true, 'autoplayTimeout': 5000}">
                        <div>
                            <div class="testimonial testimonial-style-3 custom-testimonial-style-1">
                                <blockquote>
                                    <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eget risus porta, tincidunt turpis at. </p>
                                </blockquote>
                                <div class="testimonial-author">
                                    <div class="testimonial-author-thumbnail">
                                        <img src="img/clients/client-1.jpg" class="img-fluid rounded-circle" alt="">
                                    </div>
                                    <p><strong class="text-color-light font-weight-semibold text-4 mb-1">John Smith</strong><span class="text-color-light text-2">NEW YORK</span></p>
                                </div>
                            </div>
                        </div>
                        <div>
                            <div class="testimonial testimonial-style-3 custom-testimonial-style-1">
                                <blockquote>
                                    <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eget risus porta, tincidunt turpis at. </p>
                                </blockquote>
                                <div class="testimonial-author">
                                    <div class="testimonial-author-thumbnail">
                                        <img src="img/clients/client-2.jpg" class="img-fluid rounded-circle" alt="">
                                    </div>
                                    <p><strong class="text-color-light font-weight-semibold text-4 mb-1">Monica Doe</strong><span class="text-color-light text-2">NEW YORK</span></p>
                                </div>
                            </div>
                        </div>
                        <div>
                            <div class="testimonial testimonial-style-3 custom-testimonial-style-1">
                                <blockquote>
                                    <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eget risus porta, tincidunt turpis at. </p>
                                </blockquote>
                                <div class="testimonial-author">
                                    <div class="testimonial-author-thumbnail">
                                        <img src="img/clients/client-3.jpg" class="img-fluid rounded-circle" alt="">
                                    </div>
                                    <p><strong class="text-color-light font-weight-semibold text-4 mb-1">John Smith</strong><span class="text-color-light text-2">NEW YORK</span></p>
                                </div>
                            </div>
                        </div>
                        <div>
                            <div class="testimonial testimonial-style-3 custom-testimonial-style-1">
                                <blockquote>
                                    <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eget risus porta, tincidunt turpis at. </p>
                                </blockquote>
                                <div class="testimonial-author">
                                    <div class="testimonial-author-thumbnail">
                                        <img src="img/clients/client-4.jpg" class="img-fluid rounded-circle" alt="">
                                    </div>
                                    <p><strong class="text-color-light font-weight-semibold text-4 mb-1">John Doe</strong><span class="text-color-light text-2">NEW YORK</span></p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="section border-0 pt-4 m-0">
        <div class="container">
            <div class="row justify-content-center pb-2 mb-3">
                <div class="col-md-9 col-lg-12 text-center">
                    <h2 class="text-color-secondary font-weight-bold line-height-6 mb-3 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="200">Our Prices</h2>
                    <p class="custom-font-secondary text-4 mb-3 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="400">Cras a elit sit amet leo accumsan volutpat. Suspendisse hendrerit vehicula leo, vel efficitur felis ultri.</p>
                </div>
            </div>
            <div class="row appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="600">
                <div class="col">
                    <div class="owl-carousel nav-outside nav-arrows-1 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="750" data-plugin-options="{'responsive': {'0': {'items': 1}, '479': {'items': 1}, '768': {'items': 2}, '979': {'items': 3}, '1199': {'items': 4}}, 'autoplay': false, 'autoplayTimeout': 5000, 'autoplayHoverPause': true, 'dots': false, 'nav': true, 'loop': false, 'margin': 20, 'stagePadding': '75'}">
                        <div>
                            <div class="card custom-card-style-1">
                                <div class="card-body text-center py-5 px-4">
                                    <h3 class="text-color-primary font-weight-medium text-4 pb-1 mb-4">RESIDENTIAL MAINTENANCE</h3>
                                    <div class="price d-flex align-items-end justify-content-center font-weight-bold text-color-dark text-12 line-height-1 pb-1 mb-4">
                                        <span class="price-unit font-weight-normal custom-font-size-4 position-relative bottom-6">$</span>
                                        69
                                    </div>
                                    <ul class="list list-unstyled pb-1 mb-4">
                                        <li class="d-flex align-items-center justify-content-center">
                                            <svg fill="none" height="17" stroke="#848484" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
                                                <path d="M22 11.07V12a10 10 0 1 1-5.93-9.14"/>
                                                <polyline points="23 3 12 14 9 11"/>
                                            </svg>
                                            <span class="ms-1">Porter & Matron Service</span>
                                        </li>
                                        <li class="d-flex align-items-center justify-content-center">
                                            <svg fill="none" height="17" stroke="#848484" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
                                                <path d="M22 11.07V12a10 10 0 1 1-5.93-9.14"/>
                                                <polyline points="23 3 12 14 9 11"/>
                                            </svg>
                                            <span class="ms-1">Carpet Care Programs</span>
                                        </li>
                                        <li class="d-flex align-items-center justify-content-center">
                                            <svg fill="none" height="17" stroke="#848484" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
                                                <path d="M22 11.07V12a10 10 0 1 1-5.93-9.14"/>
                                                <polyline points="23 3 12 14 9 11"/>
                                            </svg>
                                            <span class="ms-1">Floor Care Maintenance</span>
                                        </li>
                                        <li class="d-flex align-items-center justify-content-center">
                                            <svg fill="none" height="17" stroke="#848484" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
                                                <path d="M22 11.07V12a10 10 0 1 1-5.93-9.14"/>
                                                <polyline points="23 3 12 14 9 11"/>
                                            </svg>
                                            <span class="ms-1">Sanitize & Decontamination</span>
                                        </li>
                                        <li class="d-flex align-items-center justify-content-center">
                                            <svg fill="none" height="17" stroke="#848484" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
                                                <path d="M22 11.07V12a10 10 0 1 1-5.93-9.14"/>
                                                <polyline points="23 3 12 14 9 11"/>
                                            </svg>
                                            <span class="ms-1">High Dusting</span>
                                        </li>
                                    </ul>
                                    <a href="demo-cleaning-services-contact.html" class="btn btn-secondary btn-modern font-weight-bold text-3 px-5 btn-py-3">BOOK NOW</a>
                                </div>
                            </div>
                        </div>
                        <div>
                            <div class="card custom-card-style-1">
                                <div class="card-body text-center py-5 px-4">
                                    <h3 class="text-color-primary font-weight-medium text-4 pb-1 mb-4">OFFICE CLEANING</h3>
                                    <div class="price d-flex align-items-end justify-content-center font-weight-bold text-color-dark text-12 line-height-1 pb-1 mb-4">
                                        <span class="price-unit font-weight-normal custom-font-size-4 position-relative bottom-6">$</span>
                                        79
                                    </div>
                                    <ul class="list list-unstyled pb-1 mb-4">
                                        <li class="d-flex align-items-center justify-content-center">
                                            <svg fill="none" height="17" stroke="#848484" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
                                                <path d="M22 11.07V12a10 10 0 1 1-5.93-9.14"/>
                                                <polyline points="23 3 12 14 9 11"/>
                                            </svg>
                                            <span class="ms-1">Porter & Matron Service</span>
                                        </li>
                                        <li class="d-flex align-items-center justify-content-center">
                                            <svg fill="none" height="17" stroke="#848484" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
                                                <path d="M22 11.07V12a10 10 0 1 1-5.93-9.14"/>
                                                <polyline points="23 3 12 14 9 11"/>
                                            </svg>
                                            <span class="ms-1">Carpet Care Programs</span>
                                        </li>
                                        <li class="d-flex align-items-center justify-content-center">
                                            <svg fill="none" height="17" stroke="#848484" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
                                                <path d="M22 11.07V12a10 10 0 1 1-5.93-9.14"/>
                                                <polyline points="23 3 12 14 9 11"/>
                                            </svg>
                                            <span class="ms-1">Floor Care Maintenance</span>
                                        </li>
                                        <li class="d-flex align-items-center justify-content-center">
                                            <svg fill="none" height="17" stroke="#848484" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
                                                <path d="M22 11.07V12a10 10 0 1 1-5.93-9.14"/>
                                                <polyline points="23 3 12 14 9 11"/>
                                            </svg>
                                            <span class="ms-1">Sanitize & Decontamination</span>
                                        </li>
                                        <li class="d-flex align-items-center justify-content-center">
                                            <svg fill="none" height="17" stroke="#848484" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
                                                <path d="M22 11.07V12a10 10 0 1 1-5.93-9.14"/>
                                                <polyline points="23 3 12 14 9 11"/>
                                            </svg>
                                            <span class="ms-1">High Dusting</span>
                                        </li>
                                    </ul>
                                    <a href="demo-cleaning-services-contact.html" class="btn btn-secondary btn-modern font-weight-bold text-3 px-5 btn-py-3">BOOK NOW</a>
                                </div>
                            </div>
                        </div>
                        <div>
                            <div class="card custom-card-style-1">
                                <div class="card-body text-center py-5 px-4">
                                    <h3 class="text-color-primary font-weight-medium text-4 pb-1 mb-4">FACILITY CLEANING</h3>
                                    <div class="price d-flex align-items-end justify-content-center font-weight-bold text-color-dark text-12 line-height-1 pb-1 mb-4">
                                        <span class="price-unit font-weight-normal custom-font-size-4 position-relative bottom-6">$</span>
                                        89
                                    </div>
                                    <ul class="list list-unstyled pb-1 mb-4">
                                        <li class="d-flex align-items-center justify-content-center">
                                            <svg fill="none" height="17" stroke="#848484" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
                                                <path d="M22 11.07V12a10 10 0 1 1-5.93-9.14"/>
                                                <polyline points="23 3 12 14 9 11"/>
                                            </svg>
                                            <span class="ms-1">Porter & Matron Service</span>
                                        </li>
                                        <li class="d-flex align-items-center justify-content-center">
                                            <svg fill="none" height="17" stroke="#848484" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
                                                <path d="M22 11.07V12a10 10 0 1 1-5.93-9.14"/>
                                                <polyline points="23 3 12 14 9 11"/>
                                            </svg>
                                            <span class="ms-1">Carpet Care Programs</span>
                                        </li>
                                        <li class="d-flex align-items-center justify-content-center">
                                            <svg fill="none" height="17" stroke="#848484" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
                                                <path d="M22 11.07V12a10 10 0 1 1-5.93-9.14"/>
                                                <polyline points="23 3 12 14 9 11"/>
                                            </svg>
                                            <span class="ms-1">Floor Care Maintenance</span>
                                        </li>
                                        <li class="d-flex align-items-center justify-content-center">
                                            <svg fill="none" height="17" stroke="#848484" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
                                                <path d="M22 11.07V12a10 10 0 1 1-5.93-9.14"/>
                                                <polyline points="23 3 12 14 9 11"/>
                                            </svg>
                                            <span class="ms-1">Sanitize & Decontamination</span>
                                        </li>
                                        <li class="d-flex align-items-center justify-content-center">
                                            <svg fill="none" height="17" stroke="#848484" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
                                                <path d="M22 11.07V12a10 10 0 1 1-5.93-9.14"/>
                                                <polyline points="23 3 12 14 9 11"/>
                                            </svg>
                                            <span class="ms-1">High Dusting</span>
                                        </li>
                                    </ul>
                                    <a href="demo-cleaning-services-contact.html" class="btn btn-secondary btn-modern font-weight-bold text-3 px-5 btn-py-3">BOOK NOW</a>
                                </div>
                            </div>
                        </div>
                        <div>
                            <div class="card custom-card-style-1">
                                <div class="card-body text-center py-5 px-4">
                                    <h3 class="text-color-primary font-weight-medium text-4 pb-1 mb-4">BUILDING MAINTENANCE</h3>
                                    <div class="price d-flex align-items-end justify-content-center font-weight-bold text-color-dark text-12 line-height-1 pb-1 mb-4">
                                        <span class="price-unit font-weight-normal custom-font-size-4 position-relative bottom-6">$</span>
                                        99
                                    </div>
                                    <ul class="list list-unstyled pb-1 mb-4">
                                        <li class="d-flex align-items-center justify-content-center">
                                            <svg fill="none" height="17" stroke="#848484" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
                                                <path d="M22 11.07V12a10 10 0 1 1-5.93-9.14"/>
                                                <polyline points="23 3 12 14 9 11"/>
                                            </svg>
                                            <span class="ms-1">Porter & Matron Service</span>
                                        </li>
                                        <li class="d-flex align-items-center justify-content-center">
                                            <svg fill="none" height="17" stroke="#848484" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
                                                <path d="M22 11.07V12a10 10 0 1 1-5.93-9.14"/>
                                                <polyline points="23 3 12 14 9 11"/>
                                            </svg>
                                            <span class="ms-1">Carpet Care Programs</span>
                                        </li>
                                        <li class="d-flex align-items-center justify-content-center">
                                            <svg fill="none" height="17" stroke="#848484" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
                                                <path d="M22 11.07V12a10 10 0 1 1-5.93-9.14"/>
                                                <polyline points="23 3 12 14 9 11"/>
                                            </svg>
                                            <span class="ms-1">Floor Care Maintenance</span>
                                        </li>
                                        <li class="d-flex align-items-center justify-content-center">
                                            <svg fill="none" height="17" stroke="#848484" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
                                                <path d="M22 11.07V12a10 10 0 1 1-5.93-9.14"/>
                                                <polyline points="23 3 12 14 9 11"/>
                                            </svg>
                                            <span class="ms-1">Sanitize & Decontamination</span>
                                        </li>
                                        <li class="d-flex align-items-center justify-content-center">
                                            <svg fill="none" height="17" stroke="#848484" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
                                                <path d="M22 11.07V12a10 10 0 1 1-5.93-9.14"/>
                                                <polyline points="23 3 12 14 9 11"/>
                                            </svg>
                                            <span class="ms-1">High Dusting</span>
                                        </li>
                                    </ul>
                                    <a href="demo-cleaning-services-contact.html" class="btn btn-secondary btn-modern font-weight-bold text-3 px-5 btn-py-3">BOOK NOW</a>
                                </div>
                            </div>
                        </div>
                        <div>
                            <div class="card custom-card-style-1">
                                <div class="card-body text-center py-5 px-4">
                                    <h3 class="text-color-primary font-weight-medium text-4 pb-1 mb-4">RESIDENTIAL MAINTENANCE</h3>
                                    <div class="price d-flex align-items-end justify-content-center font-weight-bold text-color-dark text-12 line-height-1 pb-1 mb-4">
                                        69
                                        <span class="price-unit font-weight-normal custom-font-size-4 position-relative bottom-6">$</span>
                                    </div>
                                    <ul class="list list-unstyled pb-1 mb-4">
                                        <li class="d-flex align-items-center justify-content-center">
                                            <svg fill="none" height="17" stroke="#848484" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
                                                <path d="M22 11.07V12a10 10 0 1 1-5.93-9.14"/>
                                                <polyline points="23 3 12 14 9 11"/>
                                            </svg>
                                            <span class="ms-1">Porter & Matron Service</span>
                                        </li>
                                        <li class="d-flex align-items-center justify-content-center">
                                            <svg fill="none" height="17" stroke="#848484" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
                                                <path d="M22 11.07V12a10 10 0 1 1-5.93-9.14"/>
                                                <polyline points="23 3 12 14 9 11"/>
                                            </svg>
                                            <span class="ms-1">Carpet Care Programs</span>
                                        </li>
                                        <li class="d-flex align-items-center justify-content-center">
                                            <svg fill="none" height="17" stroke="#848484" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
                                                <path d="M22 11.07V12a10 10 0 1 1-5.93-9.14"/>
                                                <polyline points="23 3 12 14 9 11"/>
                                            </svg>
                                            <span class="ms-1">Floor Care Maintenance</span>
                                        </li>
                                        <li class="d-flex align-items-center justify-content-center">
                                            <svg fill="none" height="17" stroke="#848484" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
                                                <path d="M22 11.07V12a10 10 0 1 1-5.93-9.14"/>
                                                <polyline points="23 3 12 14 9 11"/>
                                            </svg>
                                            <span class="ms-1">Sanitize & Decontamination</span>
                                        </li>
                                        <li class="d-flex align-items-center justify-content-center">
                                            <svg fill="none" height="17" stroke="#848484" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
                                                <path d="M22 11.07V12a10 10 0 1 1-5.93-9.14"/>
                                                <polyline points="23 3 12 14 9 11"/>
                                            </svg>
                                            <span class="ms-1">High Dusting</span>
                                        </li>
                                    </ul>
                                    <a href="demo-cleaning-services-contact.html" class="btn btn-secondary btn-modern font-weight-bold text-3 px-5 btn-py-3">BOOK NOW</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="section section-with-shape-divider overlay overlay-show border-0 m-0" style="background-image: url(img/demos/cleaning-services/backgrounds/background-3.jpg); background-size: cover; background-position: center;">
        <div class="shape-divider shape-divider-reverse-x" style="height: 102px;">
            <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 102" preserveAspectRatio="xMinYMin">
                <path fill="#F4F4F4" d="M1895,78c-56.71-6.03-113.75-12.1-167-17c-75.42-6.94-133.81-10.66-171-13c-62.1-3.91-108.85-5.97-155-8
                    c-35.96-1.58-78.06-3.42-133-5c-59.81-1.72-103.18-2.23-172-3c-92.17-1.03-154.41-1.01-169-1c-69.05,0.05-115.16,0.67-137,1
                    c-43.08,0.65-76.21,1.48-97,2c-28.02,0.7-71.13,1.8-128,4c-16.64,0.64-57.72,2.28-111,5c-26.12,1.33-67.11,3.45-121,7
                    c-21.14,1.39-54.21,3.59-96,7c-19.93,1.63-39.22,3.32-47,4c-16.12,1.41-33.55,2.94-55,5c-26.48,2.54-19.07,2.04-77,8
                    c-19.39,1.99-36.94,3.77-60.59,7.46V103H1923V81C1916.55,80.3,1906.82,79.26,1895,78z"/>
            </svg>
        </div>
        <div class="shape-divider shape-divider-bottom" style="height: 102px;">
            <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 102" preserveAspectRatio="xMinYMin">
                <path fill="#FFF" d="M1895,78c-56.71-6.03-113.75-12.1-167-17c-75.42-6.94-133.81-10.66-171-13c-62.1-3.91-108.85-5.97-155-8
                    c-35.96-1.58-78.06-3.42-133-5c-59.81-1.72-103.18-2.23-172-3c-92.17-1.03-154.41-1.01-169-1c-69.05,0.05-115.16,0.67-137,1
                    c-43.08,0.65-76.21,1.48-97,2c-28.02,0.7-71.13,1.8-128,4c-16.64,0.64-57.72,2.28-111,5c-26.12,1.33-67.11,3.45-121,7
                    c-21.14,1.39-54.21,3.59-96,7c-19.93,1.63-39.22,3.32-47,4c-16.12,1.41-33.55,2.94-55,5c-26.48,2.54-19.07,2.04-77,8
                    c-19.39,1.99-36.94,3.77-60.59,7.46V103H1923V81C1916.55,80.3,1906.82,79.26,1895,78z"/>
            </svg>
        </div>
        <div class="container py-5 mt-5 mb-3">
            <div class="row justify-content-center py-5 my-4">
                <div class="col-lg-9 col-xl-7 text-center px-lg-4">
                    <h2 class="text-color-light font-weight-medium text-11 line-height-5 mb-2 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="200">High Quality <span class="font-weight-bold custom-highlight-1 ws-nowrap custom-highlight-1-primary p-2 appear-animation" data-appear-animation="customHighlightAnim" data-appear-animation-delay="1s">Cleaning Services</span> for all type of facilities</h2>
                    <p class="custom-font-secondary custom-font-size-1 custom-text-color-1 pb-2 mb-4 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="400">Our Staff is trained to clean everything you need</p>
                    <a href="demo-cleaning-services-prices.html" class="btn btn-secondary btn-modern font-weight-bold text-3 px-5 btn-py-3 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="600">VIEW PRICES</a>
                </div>
            </div>
        </div>
    </section>

    <section class="section border-0 bg-transparent pt-4 pt-lg-5 m-0">
        <div class="container pb-5 mb-3">
            <div class="row align-items-end pb-3 mb-4">
                <div class="col-lg-9 col-xl-10 mb-4 mb-lg-0">
                    <div class="d-flex align-items-center pb-1 mb-2">
                        <span class="custom-line appear-animation" data-appear-animation="customLineAnimation" appear-animation-duration="1s"></span>
                        <div class="overflow-hidden ms-3">
                            <h2 class="text-color-primary font-weight-semibold line-height-3 text-4 mb-0 appear-animation" data-appear-animation="maskRight" data-appear-animation-delay="1000">OUR BLOG</h2>
                        </div>
                    </div>
                    <h3 class="text-color-secondary font-weight-bold text-transform-none text-8 mb-3 pb-1 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="1200">News & Articles</h3>
                    <p class="mb-0 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="1400">Cras a elit sit amet leo accumsan volutpat. Suspendisse hendrerit vehicula leo, vel efficitur felis ultrices non. Integer aliquet ullamcorper dolor, quis sollicitudin. Integer aliquet ullamcorper dolor, quis sollicitudin.</p>
                </div>
                <div class="col-lg-auto px-lg-0">
                    <div class="d-flex justify-content-lg-end">
                        <a href="demo-cleaning-services-blog.html" class="btn btn-secondary btn-modern font-weight-bold text-3 px-5 py-3 appear-animation" data-appear-animation="fadeInLeftShorter" data-appear-animation-delay="1600">VIEW BLOG</a>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-4 mb-4 mb-lg-0">
                    <article class="appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="1800">
                        <div class="card border-0 border-radius-0 box-shadow-1">
                            <div class="card-body p-3 z-index-1">
                                <a href="demo-cleaning-services-blog-post.html">
                                    <img class="card-img-top border-radius-0 mb-2" src="img/demos/cleaning-services/blog/blog-1.jpg" alt="Card Image">
                                </a>
                                <p class="text-uppercase text-color-default text-1 my-2">
                                    <time pubdate datetime="2025-01-10">10 Jan 2025</time>
                                    <span class="opacity-3 d-inline-block px-2">|</span>
                                    3 Comments
                                    <span class="opacity-3 d-inline-block px-2">|</span>
                                    John Doe
                                </p>
                                <div class="card-body p-0">
                                    <h4 class="card-title text-5 font-weight-bold pb-1 mb-2"><a class="text-color-dark text-color-hover-primary text-decoration-none" href="demo-cleaning-services-blog-post.html">Lorem ipsum dolor sit amet</a></h4>
                                    <p class="card-text mb-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc viverra lorem , consectetur adipiscing elit...</p>
                                    <a href="demo-cleaning-services-blog-post.html" class="btn btn-link font-weight-semibold text-decoration-none text-3 ps-0">READ MORE</a>
                                </div>
                            </div>
                        </div>
                    </article>
                </div>
                <div class="col-lg-4 mb-5 mb-lg-0">
                    <article class="appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="2000">
                        <div class="card border-0 border-radius-0 box-shadow-1">
                            <div class="card-body p-3 z-index-1">
                                <a href="demo-cleaning-services-blog-post.html">
                                    <img class="card-img-top border-radius-0 mb-2" src="img/demos/cleaning-services/blog/blog-2.jpg" alt="Card Image">
                                </a>
                                <p class="text-uppercase text-color-default text-1 my-2">
                                    <time pubdate datetime="2025-01-10">10 Jan 2025</time>
                                    <span class="opacity-3 d-inline-block px-2">|</span>
                                    3 Comments
                                    <span class="opacity-3 d-inline-block px-2">|</span>
                                    John Doe
                                </p>
                                <div class="card-body p-0">
                                    <h4 class="card-title text-5 font-weight-bold pb-1 mb-2"><a class="text-color-dark text-color-hover-primary text-decoration-none" href="demo-cleaning-services-blog-post.html">Lorem ipsum dolor sit amet</a></h4>
                                    <p class="card-text mb-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc viverra lorem , consectetur adipiscing elit...</p>
                                    <a href="demo-cleaning-services-blog-post.html" class="btn btn-link font-weight-semibold text-decoration-none text-3 ps-0">READ MORE</a>
                                </div>
                            </div>
                        </div>
                    </article>
                </div>
                <div class="col-lg-4">
                    <div class="row">
                        <div class="col-12">
                            <h3 class="text-color-secondary font-weight-bold text-transform-none text-6 mb-3 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="2200">More Articles</h3>
                            <article class="appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="2400">
                                <div class="card border-0 border-radius-0 bg-transparent">
                                    <div class="card-body bg-transparent p-0">
                                        <p class="text-uppercase text-color-default text-1 pt-1 mb-2">
                                            <time pubdate datetime="2025-01-10">10 Jan 2025</time>
                                            <span class="opacity-3 d-inline-block px-2">|</span>
                                            3 Comments
                                            <span class="opacity-3 d-inline-block px-2">|</span>
                                            John Doe
                                        </p>
                                        <div class="card-body p-0">
                                            <h4 class="card-title text-5 font-weight-bold pb-1 mb-2"><a class="text-color-dark text-color-hover-primary text-decoration-none" href="demo-cleaning-services-blog-post.html">Lorem ipsum dolor sit amet</a></h4>
                                            <p class="card-text mb-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc viverra lorem , consectetur adipiscing elit...</p>
                                            <a href="demo-cleaning-services-blog-post.html" class="btn btn-link font-weight-semibold text-decoration-none text-3 ps-0">READ MORE</a>
                                        </div>
                                    </div>
                                </div>
                            </article>
                            <hr>
                        </div>
                        <div class="col-12">
                            <article class="appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="2600">
                                <div class="card border-0 border-radius-0 bg-transparent">
                                    <div class="card-body bg-transparent p-0">
                                        <p class="text-uppercase text-color-default text-1 pt-1 mb-2">
                                            <time pubdate datetime="2025-01-10">10 Jan 2025</time>
                                            <span class="opacity-3 d-inline-block px-2">|</span>
                                            3 Comments
                                            <span class="opacity-3 d-inline-block px-2">|</span>
                                            John Doe
                                        </p>
                                        <div class="card-body p-0">
                                            <h4 class="card-title text-5 font-weight-bold pb-1 mb-2"><a class="text-color-dark text-color-hover-primary text-decoration-none" href="demo-cleaning-services-blog-post.html">Lorem ipsum dolor sit amet</a></h4>
                                            <p class="card-text mb-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc viverra lorem , consectetur adipiscing elit...</p>
                                            <a href="demo-cleaning-services-blog-post.html" class="btn btn-link font-weight-semibold text-decoration-none text-3 ps-0">READ MORE</a>
                                        </div>
                                    </div>
                                </div>
                            </article>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection

@section('footer')
    <footer id="footer" class="footer-reveal bg-color-secondary border-0 mt-0">
        <div class="container container-xl-custom pt-4 pb-3">
            <div class="row py-5">
                <div class="col-md-4 col-lg-3 mb-4 mb-lg-0">
                    <h4 class="font-weight-bold ls-0">Our Address</h4>
                    <ul class="list list-unstyled mb-0">
                        <li class="mb-1">
                            12345  Porto Blvd.
                        </li>
                        <li class="mb-1">
                            Suite 1500
                        </li>
                        <li class="mb-0">
                            Los Angeles, California 90000
                        </li>
                    </ul>
                </div>
                <div class="col-md-4 col-lg-3 mb-4 mb-lg-0">
                    <h4 class="font-weight-bold ls-0">Our Contacts</h4>
                    <div class="feature-box feature-box-style-2 align-items-center mb-3">
                        <div class="feature-box-icon">
                            <img class="icon-animated" width="45" src="img/demos/cleaning-services/icons/phone.svg" alt="" data-icon data-plugin-options="{'onlySVG': true, 'extraClass': 'svg-fill-color-light'}" />
                        </div>
                        <div class="feature-box-info ps-2">
                            <p class="text-uppercase font-weight-semibold line-height-1 text-2 pb-0 mb-0">CALL US NOW</p>
                            <a href="tel:+1234567890" class="text-uppercase text-color-light text-color-hover-secondary text-decoration-none text-5 font-weight-bold pb-0">800-123-4567</a>
                        </div>
                    </div>
                    <a href="demo-cleaning-services-contact.html" class="btn btn-primary font-weight-bold px-5 py-3 mb-2">BOOK NOW</a>
                </div>
                <div class="col-md-4 col-lg-2 mb-4 mb-md-0">
                    <h4 class="font-weight-bold ls-0">Our Services</h4>
                    <ul class="list-unstyled mb-0">
                        <li class="mb-1">
                            <a href="demo-cleaning-services-services-detail.html">Building Services</a>
                        </li>
                        <li class="mb-1">
                            <a href="demo-cleaning-services-services-detail.html">Post Construction</a>
                        </li>
                        <li class="mb-0">
                            <a href="demo-cleaning-services-services-detail.html">Office Cleaning</a>
                        </li>
                    </ul>
                    <a href="demo-cleaning-services-services.html" class="btn btn-link font-weight-bold text-decoration-none ps-0">VIEW MORE</a>
                </div>
                <div class="col-md-4 col-lg-2 mb-4 mb-md-0">
                    <h4 class="font-weight-bold ls-0">About</h4>
                    <ul class="list-unstyled mb-0">
                        <li class="mb-1">
                            <a href="demo-cleaning-services-about-us.html">About Us</a>
                        </li>
                        <li class="mb-0">
                            <a href="demo-cleaning-services-contact.html">Send a Message</a>
                        </li>
                    </ul>
                </div>
                <div class="col-md-4 col-lg-2">
                    <h4 class="font-weight-bold ls-0">Follow Us</h4>
                    <ul class="social-icons social-icons-clean social-icons-medium">
                        <li>
                            <a href="https://www.instagram.com/"><i class="fab fa-instagram"></i></a>
                        </li>
                        <li>
                            <a href="https://www.twitter.com/"><i class="fab fa-x-twitter"></i></a>
                        </li>
                        <li>
                            <a href="https://www.facebook.com/"><i class="fab fa-facebook-f"></i></a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="footer-copyright bg-color-secondary">
            <div class="container container-xl-custom pb-4">
                <div class="row">
                    <div class="col opacity-3">
                        <hr class="my-0 bg-color-light opacity-1">
                    </div>
                </div>
                <div class="row py-4 mt-2">
                    <div class="col-lg-6 text-center text-lg-start mb-3 mb-lg-0">
                        <a href="demo-cleaning-services.html">
                            <img alt="Porto" width="115" height="30" src="img/demos/cleaning-services/logo-light.png">
                        </a>
                    </div>
                    <div class="col-lg-6 text-center text-lg-end">
                        <p class="text-3 mb-0">Porto Cleaning Services. © 2025. All Rights Reserved</p>
                    </div>
                </div>
            </div>
        </div>
    </footer>
@endsection
