8889841c<?php include 'template/header.php'; ?>

<main id="content">
      <section class="overflow-hidden">
        <div class="slick-slider custom-slider-02 mx-0 slider-01"
         data-slick-options='{"slidesToShow": 1,"infinite":true,"autoplay":false,"dots":true,"arrows":false}'>
          <div class="box px-0">
            <div class="d-flex flex-column justify-content-center bg-img-cover-center vh-100 custom-height-sm"
                 style="background-image: url('images/bg-slider3.jpg');background-position: center top;">
              <div class="d-flex flex-column h-100 justify-content-center">
                <div class="container container-xxl">
                  <p class="text-primary font-weight-bold fs-24 mb-3 mb-md-6" data-animate="fadeInUp"></p>
                  <h1 class="mb-4 mb-md-8 fs-60 fs-xxl-120 heading-home-01 lh-113">
                    <span class="d-block" data-animate="fadeInUp" style="color:#000;">Modern </span>
                    <span class="d-block" data-animate="fadeInUp" style="color:#000;">Perfection</span>
                  </h1>
                </div>
              </div>
              <div class="mt-auto">
                <!---<div class="container container-xxl">
                  <p class="text-primary mb-8">Designed by <span
                                class="font-weight-600">Nicholas Karlovasitis & Sarah Gibson</span></p>
                </div>-->
              </div>
            </div>
          </div>
       <!--   <div class="box px-0">
            <div class="d-flex flex-column justify-content-center bg-img-cover-center vh-100 custom-height-sm"
                 style="background-image: url('images/bg-slider1.jpg');background-position: center top;">
              <div class="d-flex flex-column h-100 justify-content-center">
                <div class="container container-xxl">
                  <p class="text-primary font-weight-bold fs-24 mb-3 mb-md-6">New - In</p>
                  <h2 class="mb-4 mb-md-9 fs-60 fs-xxl-120 heading-home-01 lh-113">
                    <strong class="d-block" data-animate="fadeInUp">Sundae</strong>
                    <strong class="d-block" data-animate="fadeInUp">Lounges</strong>
                  </h2>
                  <a href="shop-page-02.html" class="btn btn-outline-primary text-uppercase letter-spacing-05">Shop Now</a>
                </div>
              </div>
              <div class="mt-auto">
                <div class="container container-xxl">
                  <p class="text-primary mb-8">Designed by <span
                                class="font-weight-600">Nicholas Karlovasitis & Sarah Gibson</span></p>
                </div>
              </div>
            </div>
          </div> -->
          <!-- <div class="box px-0">
            <div class="d-flex flex-column justify-content-center bg-img-cover-center vh-100 custom-height-sm"
                 style="background-image: url('images/bg-home-01.jpg');background-position: center top;">
              <div class="d-flex flex-column h-100 justify-content-center">
                <div class="container container-xxl">
                  <p class="text-primary font-weight-bold fs-24 mb-3 mb-md-6">New - In</p>
                  <h2 class="mb-4 mb-md-9 fs-60 fs-xxl-120 heading-home-01 lh-113">
                    <strong class="d-block" data-animate="fadeInUp">Sundae</strong>
                    <strong class="d-block" data-animate="fadeInUp">Lounges</strong>
                  </h2>
                  <a href="shop-page-02.html" class="btn btn-outline-primary text-uppercase letter-spacing-05">Shop Now</a>
                </div>
              </div>
              <div class="mt-auto">
                <div class="container container-xxl">
                  <p class="text-primary mb-8">Designed by <span
                                class="font-weight-600">Nicholas Karlovasitis & Sarah Gibson</span></p>
                </div>
              </div>
            </div>
          </div> -->
        </div>
      </section>
      <section class="py-lg-14 py-11">
        <div class="container container-xxl">
          <div class="d-grid g-1 g-sm-2 g-lg-4 grid-gap overflow-hidden">
            <div class="grid-item">
              <div class="card border-0 hover-change-content product" data-animate="fadeInUp">
                <div style="background-image: url('images/timb04.jpg')"
                         class="card-img ratio bg-img-cover-center ratio-1-1">
                </div>
                <div class="card-img-overlay d-flex py-4 py-sm-5 pl-6 pr-4">
                  <div class="d-flex flex-column">
                    <a href="#" class="font-weight-bold mb-1 d-block lh-12">CHAIR</a>
                    <a href="#" class="text-uppercase text-muted letter-spacing-05 fs-13 font-weight-500"></a>
                    
                  </div>
                  <div class="ml-auto d-flex flex-column">
                    
                  </div>
                </div>
              </div>
            </div>
            <div class="grid-item">
              <div class="card border-0 hover-change-content product" data-animate="fadeInUp">
                <div style="background-image: url('images/timb01.jpg')"
                         class="card-img ratio bg-img-cover-center ratio-1-1">
                </div>
                <div class="card-img-overlay d-flex py-4 py-sm-5 pl-6 pr-4">
                  <div class="d-flex flex-column">
                    <a href="#" class="font-weight-bold mb-1 d-block lh-12">SOFA</a>
                    <a href="#" class="text-uppercase text-muted letter-spacing-05 fs-13 font-weight-500"></a>
                 
                  </div>
                  <div class="ml-auto d-flex flex-column">
                   <!-- <div class="badge badge-green badge-circle ml-auto w-45px h-45px fs-12 d-flex align-items-center justify-content-center mb-2">
                      new
                    </div> -->
                
                  </div>
                </div>
              </div>
            </div>
            <div class="grid-item">
              <div class="card border-0 hover-change-content product" data-animate="fadeInUp">
                <div style="background-image: url('images/pic-up5.jpg')"
                         class="card-img ratio bg-img-cover-center ratio-1-1">
                </div>
                <div class="card-img-overlay d-flex py-4 py-sm-5 pl-6 pr-4">
                  <div class="d-flex flex-column">
                    <a href="#" class="font-weight-bold mb-1 d-block lh-12">GLASS CABINET</a>
                    <a href="#" class="text-uppercase text-muted letter-spacing-05 fs-13 font-weight-500"></a>
                   
                  </div>
                  <div class="ml-auto d-flex flex-column">
                   
                  </div>
                </div>
              </div>
            </div>
            <div class="grid-item">
              <div class="card border-0 hover-change-content product" data-animate="fadeInUp">
                <div style="background-image: url('images/pic-up6.jpg')"
                         class="card-img ratio bg-img-cover-center ratio-1-1">
                </div>
                <div class="card-img-overlay d-flex py-4 py-sm-5 pl-6 pr-4">
                  <div class="d-flex flex-column">
                    <a href="#" class="font-weight-bold mb-1 d-block lh-12">NIGHT LAMP</a>
                    <a href="#" class="text-uppercase text-muted letter-spacing-05 fs-13 font-weight-500"></a>
                    
                  </div>
                  <div class="ml-auto d-flex flex-column">
                    
                  </div>
                </div>
              </div>
            </div>
            <div class="grid-item gc-sm-2  gr-start-7 gr-start-sm-4 gr-start-lg-2">
              <div class="card border-0" data-animate="fadeInUp">
                <div style="background-image: url('images/uplo1.png')"
                         class="card-img ratio bg-img-cover-center ratio-1-1 ratio-sm-1-2">
                </div>
                <div class="card-img-overlay d-inline-flex flex-column p-xl-8">
                  <div class="mxw-320px">
                    <h3 class="card-title fs-48 fs-lg-40 fs-xxl-56 pt-xxl-1" style="color:#fff;"> <br>
                       </h3>
                  </div>
                  
                </div>
              </div>
            </div>
            <div class="grid-item">
              <div class="card border-0 hover-change-content product" data-animate="fadeInUp">
                <div style="background-image: url('images/pic-up3.jpg')"
                         class="card-img ratio bg-img-cover-center ratio-1-1">
                </div>
                <div class="card-img-overlay d-flex py-4 py-sm-5 pl-6 pr-4">
                  <div class="d-flex flex-column">
                    <a href="#" class="font-weight-bold mb-1 d-block lh-12">SOFAS</a>
                    <a href="#" class="text-uppercase text-muted letter-spacing-05 fs-13 font-weight-500"></a>
                   
                  </div>
                  <div class="ml-auto d-flex flex-column">
                   <!-- <div class="badge badge-pink badge-circle ml-auto w-45px h-45px fs-12 d-flex align-items-center justify-content-center mb-2">
                      sale
                    </div> -->
                    
                  </div>
                </div>
              </div>
            </div>
            <div class="grid-item">
              <div class="card border-0 hover-change-content product" data-animate="fadeInUp">
                <div style="background-image: url('images/pic-up2.jpg')"
                         class="card-img ratio bg-img-cover-center ratio-1-1">
                </div>
                <div class="card-img-overlay d-flex py-4 py-sm-5 pl-6 pr-4">
                  <div class="d-flex flex-column">
                    <a href="#" class="font-weight-bold mb-1 d-block lh-12">AFRICAN PRINT STOOLS</a>
                    <a href="#" class="text-uppercase text-muted letter-spacing-05 fs-13 font-weight-500"></a>
                    
                  </div>
                  <div class="ml-auto d-flex flex-column">
                   
                  </div>
                </div>
              </div>
            </div>
            <div class="grid-item">
              <div class="card border-0 hover-change-content product" data-animate="fadeInUp">
                <div style="background-image: url('images/timb03.jpg')"
                         class="card-img ratio bg-img-cover-center ratio-1-1">
                </div>
                <div class="card-img-overlay d-flex py-4 py-sm-5 pl-6 pr-4">
                  <div class="d-flex flex-column">
                    <a href="#" class="font-weight-bold mb-1 d-block lh-12">BED</a>
                    <a href="#" class="text-uppercase text-muted letter-spacing-05 fs-13 font-weight-500"></a>
                    
                  </div>
                  <div class="ml-auto d-flex flex-column">
                    
                  </div>
                </div>
              </div>
            </div>
            <div class="grid-item">
              <div class="card border-0 hover-change-content product" data-animate="fadeInUp">
                <div style="background-image: url('images/pic2.jpg')"
                         class="card-img ratio bg-img-cover-center ratio-1-1">
                </div>
                <div class="card-img-overlay d-flex py-4 py-sm-5 pl-6 pr-4">
                  <div class="d-flex flex-column">
                    <a href="#" class="font-weight-bold mb-1 d-block lh-12">BEDSIDE DRAWER</a>
                    <a href="#" class="text-uppercase text-muted letter-spacing-05 fs-13 font-weight-500"></a>
                   
                  </div>
                  <div class="ml-auto d-flex flex-column">
                  <!--  <div class="badge badge-yellow badge-circle ml-auto w-45px h-45px fs-12 d-flex align-items-center justify-content-center mb-2">
                      hot
                    </div>--->
                    
                  </div>
                </div>
              </div>
            </div>
            <div class="grid-item">
              <div class="card border-0 hover-change-content product" data-animate="fadeInUp">
                <div style="background-image: url('images/pic3.jpg')"
                         class="card-img ratio bg-img-cover-center ratio-1-1">
                </div>
                <div class="card-img-overlay d-flex py-4 py-sm-5 pl-6 pr-4">
                  <div class="d-flex flex-column">
                    <a href="#" class="font-weight-bold mb-1 d-block lh-12">WOODEN STOOL</a>
                    <a href="#" class="text-uppercase text-muted letter-spacing-05 fs-13 font-weight-500"></a>
                    
                  </div>
                  <div class="ml-auto d-flex flex-column">
                    
                  </div>
                </div>
              </div>
            </div>
            <div class="grid-item">
              <div class="card border-0 hover-change-content product" data-animate="fadeInUp">
                <div style="background-image: url('images/timb09.jpg')"
                         class="card-img ratio bg-img-cover-center ratio-1-1">
                </div>
                <div class="card-img-overlay d-flex py-4 py-sm-5 pl-6 pr-4">
                  <div class="d-flex flex-column">
                    <a href="#" class="font-weight-bold mb-1 d-block lh-12"> BED</a>
                    <a href="#" class="text-uppercase text-muted letter-spacing-05 fs-13 font-weight-500"></a>
                  
                  </div>
                  <div class="ml-auto d-flex flex-column">
                    
                  </div>
                </div>
              </div>
            </div>
            <div class="grid-item">
              <div class="card border-0 hover-change-content product" data-animate="fadeInUp">
                <div style="background-image: url('images/latest07.jpg')"
                         class="card-img ratio bg-img-cover-center ratio-1-1">
                </div>
                <div class="card-img-overlay d-flex py-4 py-sm-5 pl-6 pr-4">
                  <div class="d-flex flex-column">
                    <a href="#" class="font-weight-bold mb-1 d-block lh-12">TABLE</a>
                    <a href="#" class="text-uppercase text-muted letter-spacing-05 fs-13 font-weight-500"></a>
                    
                  </div>
                  <div class="ml-auto d-flex flex-column">
                    
                  </div>
                </div>
              </div>
            </div>
            <div class="grid-item">
              <div class="card border-0 hover-change-content product" data-animate="fadeInUp">
                <div style="background-image: url('images/latest010.jpg')"
                         class="card-img ratio bg-img-cover-center ratio-1-1">
                </div>
                <div class="card-img-overlay d-flex py-4 py-sm-5 pl-6 pr-4">
                  <div class="d-flex flex-column">
                    <a href="#" class="font-weight-bold mb-1 d-block lh-12">SOFA </a>
                    <a href="#" class="text-uppercase text-muted letter-spacing-05 fs-13 font-weight-500"></a>
                   
                  </div>
                
                </div>
              </div>
            </div>
            <div class="grid-item gc-sm-2  gc-start-lg-3 gc-end-lg-5 gr-start-14 gr-start-sm-8 gr-start-lg-4">
              <div class="card border-0" data-animate="fadeInUp">
                <div style="background-image: url('images/uplo2.png')"
                         class="card-img ratio bg-img-cover-center ratio-1-1 ratio-sm-1-2">
                </div>
                <div class="card-img-overlay d-inline-flex flex-column p-xl-8">
                  <div class="mxw-320px">
                  
                  </div>
                  <div class="position-absolute d-none d-lg-block category-price">
                  </div>
                </div>
              </div>
            </div>
            <div class="grid-item">
              <div class="card border-0 hover-change-content product" data-animate="fadeInUp">
                <div style="background-image: url('images/latest011.jpg')"
                         class="card-img ratio bg-img-cover-center ratio-1-1">
                </div>
                <div class="card-img-overlay d-flex py-4 py-sm-5 pl-6 pr-4">
                  <div class="d-flex flex-column">
                    <a href="#" class="font-weight-bold mb-1 d-block lh-12">CHAIR & TABLE</a>
                    <a href="#" class="text-uppercase text-muted letter-spacing-05 fs-13 font-weight-500"></a>
                    
                  </div>
                  <div class="ml-auto d-flex flex-column">
                    
                  </div>
                </div>
              </div>
            </div>
            <div class="grid-item">
              <div class="card border-0 hover-change-content product" data-animate="fadeInUp">
                <div style="background-image: url('images/timb02.jpg')"
                         class="card-img ratio bg-img-cover-center ratio-1-1">
                </div>
                <div class="card-img-overlay d-flex py-4 py-sm-5 pl-6 pr-4">
                  <div class="d-flex flex-column">
                    <a href="#" class="font-weight-bold mb-1 d-block lh-12">POUF</a>
                    <a href="#" class="text-uppercase text-muted letter-spacing-05 fs-13 font-weight-500"></a>
                    
                  </div>
                  <div class="ml-auto d-flex flex-column">
                    
                  </div>
                </div>
              </div>
            </div>
            <div class="grid-item">
              <div class="card border-0 hover-change-content product" data-animate="fadeInUp">
                <div style="background-image: url('images/pic9.jpg')"
                         class="card-img ratio bg-img-cover-center ratio-1-1">
                </div>
                <div class="card-img-overlay d-flex py-4 py-sm-5 pl-6 pr-4">
                  <div class="d-flex flex-column">
                    <a href="#" class="font-weight-bold mb-1 d-block lh-12">ARMCHAIR</a>
                    <a href="#" class="text-uppercase text-muted letter-spacing-05 fs-13 font-weight-500"></a>
                   
                  </div>
                  <div class="ml-auto d-flex flex-column">
                    
                  </div>
                </div>
              </div>
            </div>
            <div class="grid-item">
              <div class="card border-0 hover-change-content product" data-animate="fadeInUp">
                <div style="background-image: url('images/pic10.jpg')"
                         class="card-img ratio bg-img-cover-center ratio-1-1">
                </div>
                <div class="card-img-overlay d-flex py-4 py-sm-5 pl-6 pr-4">
                  <div class="d-flex flex-column">
                    <a href="#" class="font-weight-bold mb-1 d-block lh-12">STOOL WITH DRAWERS</a>
                    <a href="#" class="text-uppercase text-muted letter-spacing-05 fs-13 font-weight-500"></a>
                  
                  </div>
                  <div class="ml-auto d-flex flex-column">
                   
                  </div>
                </div>
              </div>
            </div>
            <div class="grid-item gc-sm-2  gr-start-21 gr-start-sm-12 gr-start-lg-6">
              <div class="card border-0" data-animate="fadeInUp">
                <div style="background-image: url('images/uplo4-new.png')"
                         class="card-img ratio bg-img-cover-center ratio-1-1 ratio-sm-1-2">
                </div>
                <div class="card-img-overlay d-inline-flex flex-column p-xl-8">
                  <div class="mxw-320px">
                   
                  </div>
                </div>
              </div>
            </div>
            <div class="grid-item">
              <div class="card border-0 hover-change-content product" data-animate="fadeInUp">
                <div style="background-image: url('images/pic14.jpg')"
                         class="card-img ratio bg-img-cover-center ratio-1-1">
                </div>
                <div class="card-img-overlay d-flex py-4 py-sm-5 pl-6 pr-4">
                  <div class="d-flex flex-column">
                    <a href="#" class="font-weight-bold mb-1 d-block lh-12">WARDROBE</a>
                    <a href="#" class="text-uppercase text-muted letter-spacing-05 fs-13 font-weight-500"></a>
                  </div>
                  <div class="ml-auto d-flex flex-column">
                
                  </div>
                </div>
              </div>
            </div>
            <div class="grid-item">
              <div class="card border-0 hover-change-content product" data-animate="fadeInUp">
                <div style="background-image: url('images/pic15.jpg')"
                         class="card-img ratio bg-img-cover-center ratio-1-1">
                </div>
                <div class="card-img-overlay d-flex py-4 py-sm-5 pl-6 pr-4">
                  <div class="d-flex flex-column">
                    <a href="#" class="font-weight-bold mb-1 d-block lh-12">TV UNIT</a>
                    <a href="#" class="text-uppercase text-muted letter-spacing-05 fs-13 font-weight-500"></a>
                   
                  </div>
                  <div class="ml-auto d-flex flex-column">
                    
                  </div>
                </div>
              </div>
            </div>
          </div>
          
        </div>
      </section>
    </main>

<?php include 'template/footer.php'; ?>