<?php 

// if(isset($_POST['email']) && trim($_POST['email']) != ''){
//     $data = [
//     'email'     => $_POST['email'],
//     'status'    => 'subscribed',
//     ];

//     syncMailchimp($data);

//     function syncMailchimp($data) {
//         $apiKey = 'your api key';
//         $listId = 'your list id';

//         $memberId = md5(strtolower($data['email']));
//         $dataCenter = substr($apiKey,strpos($apiKey,'-')+1);
//         $url = 'https://' . $dataCenter . '.api.mailchimp.com/3.0/lists/' . $listId . '/members/' . $memberId;

//         $json = json_encode([
//             'email_address' => $data['email'],
//             'status'        => $data['status'], // "subscribed","unsubscribed","cleaned","pending"
//         ]);

//         $ch = curl_init($url);

//         curl_setopt($ch, CURLOPT_USERPWD, 'user:' . $apiKey);
//         curl_setopt($ch, CURLOPT_HTTPHEADER, ['Content-Type: application/json']);
//         curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
//         curl_setopt($ch, CURLOPT_TIMEOUT, 10);
//         curl_setopt($ch, CURLOPT_CUSTOMREQUEST, 'PUT');
//         curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
//         curl_setopt($ch, CURLOPT_POSTFIELDS, $json);                                                                                                                 

//         $result = curl_exec($ch);
//         $httpCode = curl_getinfo($ch, CURLINFO_HTTP_CODE);
//         curl_close($ch);

//         //return $httpCode;
//     }
// }

?>



<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Casa Moderno</title>

    <link rel="shortcut icon" href="img/casa_favicon.png">

    <!-- Bootstrap Core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="https://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css" rel="stylesheet">

    <!-- Custom CSS -->
    <link href="css/full-slider.css" rel="stylesheet">
<!--     <link href="css/slider.css" rel="stylesheet">
 -->    <link href="css/custom.css?v=1.2" rel="stylesheet">
        <link href="css/animate.css" rel="stylesheet">

</head>

<body>
    <div class="top-nav-bar" style="">
        <img src="img/home_logo_2.png" class="img-responsive" style="position: absolute; max-height: 50px; margin-top: 5px; margin-left: 5px;">
        <a id="menu-toggle"  class="btn btn-dark btn-lg toggle " style="display: inline-block;">
         <span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776;</span>
        </a>
    </div>

    <div id="myNav" class="overlay">
      
        <p>&nbsp;</p>
        <div class="search-bar" style="z-index:6;">
            <input type="text" placeholder="Search" class="searchbar"> 
            <a href="#" style="display: inline-block;"><i class="fa fa-search"></i></a>
            <a href="javascript:void(0)" style="display: inline-block;" onclick="closeNav()">&times;</a>
        </div>
      
      
        <div class="overlay-content">
                    
            <div class="col-sm-6 " style="height: 100%; z-index: 5;">
                <div style="background-color:#167e63; height: 100%; ">
                    <div class="" style="display: table; width: 100%; height: 100%;">
                        <div class="text-center setside" style="display: table-cell; vertical-align: middle; max-width: 100vw;">
                            <div class="text-right">
                               <!--  <ul class="an birderfirst wordone nav nav-stacked" style="z-index: 9999; position:relative;">
                                    <li>
                                        <div class=" btn-group buttono">
                                            <a class="btn dropdown-toggle" data-toggle="dropdown" href="#" style="color:white"><b>
                                                SOFA COLLECTION</b>
                                            <i class="icon icon-caret-right"></i>
                                          </a>
                                          <ul class="dropdown-menu" style="background-color:white;">
                                            <li><a href="product_sofa.html" style="color:black"><b>Nordic</b></a></li>
                                            <li><a href="product_sofa.html" style="color:black"><b>Comtemporary</b></a></li>
                                            <li><a href="product_sofa.html" style="color:black"><b>Motion</b></a></li>
                                            <li><a href="product_sofa.html" style="color:black"><b>Dippity Leather</b></a></li>
                                          </ul>
                                    </div>
                                  </li>
                                </ul>
                               
                                <a class="an wordtwo birderfirst" href="product_dining.html" style="color:white"><b>BEDDING</b></a>
                                <a class="an wordthree birderfirst" href="product_dining.html" style="color:white"><b>DINING</b></a> -->

                                <!-- <ul class="an birderfirst wordone nav nav-stacked" style="z-index: 9999; position:relative;">
                                    <li>
                                        <div class=" btn-group buttono">
                                            <a class="btn dropdown-toggle" data-toggle="dropdown" href="#" style="color:#000"><b>
                                                SOFA COLLECTION</b>
                                            <i class="icon icon-caret-right"></i>
                                          </a>
                                          <ul class="dropdown-menu" style="background-color:white;">
                                            <li><a href="#" style="color:black"><b>Nordic Series </b></a></li>
                                            <li><a href="#" style="color:black"><b>Contemporary Series</b></a></li>
                                            <li><a href="#" style="color:black"><b>Luxury Leather Series</b></a></li>
                                          </ul>
                                    </div>
                                  </li>
                                </ul>
                                <a class="an wordtwo birderfirst" href="#" style="color:#000"><b>BEDDING</b></a>
                                <a class="an wordthree birderfirst" href="#" style="color:#000"><b>DINING</b></a> -->
                                    


                                <!-- <a class="an wordfour birderfirst" href="event.html" style="color:white"><b>EVENT</b></a> -->
                                <a class="an wordfive birderfirst" href="about_us" style="color:white"><b>ABOUT US</b></a>
                                <a class="an wordsix birderfirst" href="contact" style="color:white"><b>CONTACT US</b></a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-6" style="height: 100%">
                <div class="" style="display: table; width: 100%; height: 100%;">
                    <div style="display: table-cell; vertical-align: middle">
                        <img src="img/home_menu_logo.png" class="an first-img img-responsive" style="display: inline; padding: 10px; z-index: 1;">
                        <a href="https://www.facebook.com/casamoderno.my/" class="an first-img" style="display: inline-block;  z-index: 1;"><img src="img/home_socialmedia_button_facebook.png"></a> 
                        <a href="https://www.instagram.com/casamoderno_my/" class="an first-img" style="display: inline-block;  z-index: 1;"><img src="img/home_socialmedia_button_instagram.png"></a>
                    </div>
                </div>
            </div>
         </div>
    </div>
    


    

    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel" style="margin-top: 62.6px;">
          <!-- Indicators -->
          <ol class="carousel-indicators">
			<?php $__currentLoopData = $banner_images; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $key=>$value): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
				<?php if($loop->index == 0): ?> 
					<li data-target="#carousel-example-generic" data-slide-to="<?php echo e($loop->index); ?>" class="active"></li>
				<?php else: ?>
					<li data-target="#carousel-example-generic" data-slide-to="<?php echo e($loop->index); ?>"></li>
				<?php endif; ?>
			<?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
          </ol>

      <!-- Wrapper for slides -->
        <div class="carousel-inner" role="listbox">
			<?php $__currentLoopData = $banner_images; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $key=>$value): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
				<?php if($loop->index == 0): ?> 
					<div class="item active">
						<!-- <img src="img/home/home_logo.png" class="img-responsive" style="position: absolute;" display="inline-block;" width="30%"> -->
						<img src="<?php echo e(env('ADMIN_DOMAIN')); ?><?php echo e($value->url); ?>" style="center center no-repeat; background-size: cover; width:100%;">
					</div>
				<?php else: ?>
					<div class="item">
						<!-- <img src="img/home/home_logo.png" class="img-responsive" style="position: absolute;" display="inline-block;" width="30%"> -->
						<img src="<?php echo e(env('ADMIN_DOMAIN')); ?><?php echo e($value->url); ?>" style="center center no-repeat; background-size: cover; width:100%;">
					</div>
				<?php endif; ?>
			<?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
        </div>

      <!-- Controls -->
        <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>




<!-- 

    <div class="carousel fade-carousel slide" data-ride="carousel" data-interval="4000" id="bs-carousel">

        <ol class="carousel-indicators">
            <li data-target="#bs-carousel" data-slide-to="0" class="active"></li>
            <li data-target="#bs-carousel" data-slide-to="1"></li>
            <li data-target="#bs-carousel" data-slide-to="2"></li>
        </ol>
      
        <div class="carousel-inner">
            <div class="item slides active" style="height: 100%;">
                <div class="slide-1">
                    <div class="col-sm-12 flexdisplay2  hilo">
                        <div class="col-md-4 col-md-offset-2 col-sm-12 col-xs-12 text-center">
                            <div class="tablecreate" >
                                <div class="tablecellcreate" style="vertical-align: middle; ">
                                    <img src="img/home_productslider_sofa3.png" class="img-responsive" style="display:inline-block;">

                                    <div class="font2" style="padding-top: 10px">
                                        <div class="col-sm-2 col-xs-2 col-xs-offset-3 visible-xs" >
                                            <li><b>Style</b></li>
                                            <br>
                                            <li>Leather</li>
                                        </div>
                                        <div class=" col-sm-2 col-xs-2 hidden-xs" >
                                            <li><b>Style</b></li>
                                            <br>
                                            <li>Leather</li>
                                        </div>
                                        <div class=" col-sm-2 col-xs-2">
                                            <li><b>Year</b></li>
                                            <br>
                                            <li>2016</li>
                                        </div>
                                        <div class=" col-sm-2 col-xs-2">
                                            <li><b>Series</b></li>
                                            <br>
                                            <li>4+1</li>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </div>
                        <div class="col-md-5 col-md-offset-1 col-sm-12 col-xs-12 text-center" style="padding-bottom: 30px;">
                            <div class="tablecreate" style="  text-align: center;">
                                <div class="tablecellcreate" style=" vertical-align: middle; ">
                                    <img src="img/home_productslider_sofalogo.png" class="img-responsive" style="display: inline-block;">
                                    <h4>SCANDINAVIAN <br> SREIS </h4>
                                    <p> Lorem Ipsum Dolor Sit Amet,<br> Eu Purus Elementum Dignissim, Netus Sit.</p>
                                    <button class="btn btn-hero btn-lg" role="button">View Full Collection</button>
                                </div>
                            </div>
                        </div>    
                    </div>
                </div>
            </div>
            
            <div class="item slides" style="height: 100%;">
                <div class="slide-1">
                    <div class="col-sm-12 flexdisplay2  hilo">
                        <div class="col-md-4 col-md-offset-2 col-sm-12 col-xs-12 text-center">
                            <div class="tablecreate" >
                                <div class="tablecellcreate" style="vertical-align: middle; ">
                                    <img src="img/home_productslider_sofa3.png" class="img-responsive" style="display:inline-block;">

                                    <div class="font2" style="padding-top: 10px">
                                        <div class="col-sm-2 col-xs-2 col-xs-offset-3 visible-xs" >
                                            <li><b>Style</b></li>
                                            <br>
                                            <li>Leather</li>
                                        </div>
                                        <div class=" col-sm-2 col-xs-2 hidden-xs" >
                                            <li><b>Style</b></li>
                                            <br>
                                            <li>Leather</li>
                                        </div>
                                        <div class=" col-sm-2 col-xs-2">
                                            <li><b>Year</b></li>
                                            <br>
                                            <li>2016</li>
                                        </div>
                                        <div class=" col-sm-2 col-xs-2">
                                            <li><b>Series</b></li>
                                            <br>
                                            <li>4+1</li>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </div>
                        <div class="col-md-5 col-md-offset-1 col-sm-12 col-xs-12 text-center" style="padding-bottom: 30px;">
                            <div class="tablecreate" style="  text-align: center;">
                                <div class="tablecellcreate" style=" vertical-align: middle; ">
                                    <img src="img/home_productslider_sofalogo.png" class="img-responsive" style="display: inline-block;">
                                    <h4>SCANDINAVIAN <br> SREIS </h4>
                                    <p> Lorem Ipsum Dolor Sit Amet,<br> Eu Purus Elementum Dignissim, Netus Sit.</p>
                                    <button class="btn btn-hero btn-lg" role="button">View Full Collection</button>
                                </div>
                            </div>
                        </div>    
                    </div>
                </div>
            </div>
            <div class="item slides" style="height: 100%;">
                <div class="slide-1">
                    <div class="col-sm-12 flexdisplay2  hilo">
                        <div class="col-md-4 col-md-offset-2 col-sm-12 col-xs-12 text-center">
                            <div class="tablecreate" >
                                <div class="tablecellcreate" style="vertical-align: middle; ">
                                    <img src="img/home_productslider_sofa3.png" class="img-responsive" style="display:inline-block;">

                                    <div class="font2" style="padding-top: 10px">
                                        <div class="col-sm-2 col-xs-2 col-xs-offset-3 visible-xs" >
                                            <li><b>Style</b></li>
                                            <br>
                                            <li>Leather</li>
                                        </div>
                                        <div class=" col-sm-2 col-xs-2 hidden-xs" >
                                            <li><b>Style</b></li>
                                            <br>
                                            <li>Leather</li>
                                        </div>
                                        <div class=" col-sm-2 col-xs-2">
                                            <li><b>Year</b></li>
                                            <br>
                                            <li>2016</li>
                                        </div>
                                        <div class=" col-sm-2 col-xs-2">
                                            <li><b>Series</b></li>
                                            <br>
                                            <li>4+1</li>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </div>
                        <div class="col-md-5 col-md-offset-1 col-sm-12 col-xs-12 text-center" style="padding-bottom: 30px;">
                            <div class="tablecreate" style="  text-align: center;">
                                <div class="tablecellcreate" style=" vertical-align: middle; ">
                                    <img src="img/home_productslider_sofalogo.png" class="img-responsive" style="display: inline-block;">
                                    <h4>SCANDINAVIAN <br> SREIS </h4>
                                    <p> Lorem Ipsum Dolor Sit Amet,<br> Eu Purus Elementum Dignissim, Netus Sit.</p>
                                    <button class="btn btn-hero btn-lg" role="button">View Full Collection</button>
                                </div>
                            </div>
                        </div>    
                    </div>
                </div>
            </div>
        </div>
    </div>

    <img src="img/home_productslider.png" class="img-responsive" style="width:100%; padding-top: 60px;">
   -->
    <div class="margin60 ">
        <div class="bgp1">
            
            <div class="" style="display: flex">
                
                <div class="col-sm-6 hidden-sm hidden-xs " style="padding-left:100px;">
                    <div style="display: table; height: 100%; width: 100%">
                        <div class="text-left" style="display: table-cell; vertical-align: middle">
                            <h2 class=""> Contemporary Design<br> Dining Set</h2>
                            <div class="sdividera"></div>
                            <p style="">Solid wood with natural walnut veneer top and durable metal leg. Match with designer dining chair upholstered with high quality fabric</p>
                            <ul class="footer-social" style="min-height: 50px;">
                                <li><img src="img/color1.png" class="img-responsive br20"></li>
                                <li><img src="img/color2.png" class="img-responsive br20"></li>
                                <li><img src="img/color3.png" class="img-responsive br20"></li>
                            </ul>
                            <br>
                            <button class="btn btn-hero btn-lg" role="button" style="">COMING SOON</button>
                        </div>  
                    </div>
                </div>
                <div class="col-sm-6 col-sm-12" style="padding-right: 0">
                    <img src="img/slider-01.png" class="img-responsive">
                </div>
            </div>
            
            <div class="col-md-12 visible-sm visible-xs">
                <div style="display: table; height: 100%; width: 100%">
                    <div style="display: table-cell; vertical-align: middle">

                        <h2> Contemporary Design<br> Dining Set</h2>
                        <div class="sdividera"></div>
                        <p style="">Solid wood with natural walnut veneer top and durable metal leg. Match with designer dining chair upholstered with high quality fabric</p>
                        <ul class="footer-social" style="min-height: 50px;">
                            <li><img src="img/color1.png" class="img-responsive br20"></li>
                            <li><img src="img/color2.png" class="img-responsive br20"></li>
                            <li><img src="img/color3.png" class="img-responsive br20"></li>
                        </ul>
                        <br>
                        <button class="btn btn-hero btn-lg" role="button" style="">COMING SOON</button>
                    </div>  
                </div>
            </div>
        </div>
    </div>

    <!-- <div class="margin60 ">
        <div class="bgp1">
            <div class="" style="display: flex">
                <div class="row col-md-6 col-sm-12">
                    <img src="img/home/lshape1.png" class="img-responsive ">
                </div>   
                <div class="col-sm-6 hidden-sm hidden-xs" style="padding-left:100px;">
                    <div style="display: table; height: 100%; width: 100%">
                        <div style="display: table-cell; vertical-align: middle">
                            <h2 class="special_margin">Contemporary Design <br> L Shape Sofa</h2>
                            <div class=" sdividera "></div>
                            <p style="">Structured with solid Meranti wood frame and high-quality resiliency seat cushion. Designed with fully washable sofa set and upholstery with high quality fabric.</p>
                            <ul class="footer-social" style="min-height: 50px;">
                                <li><img src="img/color1.png" class="img-responsive br20"></li>
                                <li><img src="img/color2.png" class="img-responsive br20"></li>
                                <li><img src="img/color3.png" class="img-responsive br20"></li>
                            </ul>
                            <button class="btn btn-hero btn-lg" role="button" style="">COMING SOON</button>
                        </div>
                    </div>
                </div>
                
            </div>
       
            <div class="col-md-12 visible-sm visible-xs">
                <div style="display: table; height: 100%; width: 100%">
                    <div style="display: table-cell; vertical-align: middle">
                        <h2 class="">Contemporary Design <br> L Shape Sofa</h2>
                        <div class=" sdividera "></div>
                        <p style="">Structured with solid Meranti wood frame and high-quality resiliency seat cushion. Designed with fully washable sofa set and upholstery with high quality fabric.</p>

                        
                        <ul class="footer-social" style="min-height: 50px;">
                            <li><img src="img/color1.png" class="img-responsive br20"></li>
                            <li><img src="img/color2.png" class="img-responsive br20"></li>
                            <li><img src="img/color3.png" class="img-responsive br20"></li>
                        </ul>
                        <br>
                        <button class="btn btn-hero btn-lg" role="button" style="">COMING SOON</button>
                    </div>
                </div>
            </div>
        </div>
    </div> -->

    <div class="margin60 ">
        <div class="bgp1">
            <div class="" style="display: flex">
                <div class="row col-md-6 col-sm-12">
                    <img src="img/home/lshape2.png" class="img-responsive ">
                </div>   
                <div class="col-sm-6 hidden-sm hidden-xs" style="padding-left:100px;">
                    <div style="display: table; height: 100%; width: 100%">
                        <div style="display: table-cell; vertical-align: middle">
                            <h2 class="special_margin">Contemporary Design <br> L Shape Sofa</h2>
                            <div class=" sdividera "></div>
                            <p style="">Structured with solid Meranti wood frame and high-quality resiliency seat cushion. Designed with fully washable sofa set and upholstery with high quality fabric.</p>
                            <ul class="footer-social" style="min-height: 50px;">
                                <li><img src="img/color1.png" class="img-responsive br20"></li>
                                <li><img src="img/color2.png" class="img-responsive br20"></li>
                                <li><img src="img/color3.png" class="img-responsive br20"></li>
                            </ul>
                            <button class="btn btn-hero btn-lg" role="button" style="">COMING SOON</button>
                        </div>
                    </div>
                </div>
                
            </div>
       
            <div class="col-md-12 visible-sm visible-xs">
                <div style="display: table; height: 100%; width: 100%">
                    <div style="display: table-cell; vertical-align: middle">
                        <h2 class="">Contemporary Design <br> L Shape Sofa</h2>
                        <div class=" sdividera "></div>
                        <p style="">Structured with solid Meranti wood frame and high-quality resiliency seat cushion. Designed with fully washable sofa set and upholstery with high quality fabric.</p>

                        
                        <ul class="footer-social" style="min-height: 50px;">
                            <li><img src="img/color1.png" class="img-responsive br20"></li>
                            <li><img src="img/color2.png" class="img-responsive br20"></li>
                            <li><img src="img/color3.png" class="img-responsive br20"></li>
                        </ul>
                        <br>
                        <button class="btn btn-hero btn-lg" role="button" style="">COMING SOON</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="margin60 ">
        <div class="bgp1">
            
            <div class="" style="display: flex">
                
                <div class="col-sm-6 hidden-sm hidden-xs " style="padding-left:100px;">
                    <div style="display: table; height: 100%; width: 100%">
                        <div class="text-left" style="display: table-cell; vertical-align: middle">
                            <h2 class="">Contemporary Design <br> L Shape Sofa</h2>
                            <div class="sdividera"></div>
                            <p style="">Structured with solid Meranti wood frame and high-quality resiliency seat cushion. Designed with semi washable sofa set and upholstery with high quality fabric.</p>
                            <ul class="footer-social" style="min-height: 50px;">
                                <li><img src="img/color1.png" class="img-responsive br20"></li>
                                <li><img src="img/color2.png" class="img-responsive br20"></li>
                                <li><img src="img/color3.png" class="img-responsive br20"></li>
                            </ul>
                            <br>
                            <button class="btn btn-hero btn-lg" role="button" style="">COMING SOON</button>
                        </div>  
                    </div>
                </div>
                <div class="col-sm-6 col-sm-12" style="padding-right: 0">
                    <img src="img/home/lshape1_2.png" class="img-responsive">
                </div>
            </div>
            
            <div class="col-md-12 visible-sm visible-xs">
                <div style="display: table; height: 100%; width: 100%">
                    <div style="display: table-cell; vertical-align: middle">

                        <h2 class="">Contemporary Design <br> L Shape Sofa</h2>
                        <div class="sdividera"></div>
                        <p style="">Structured with solid Meranti wood frame and high-quality resiliency seat cushion. Designed with semi washable sofa set and upholstery with high quality fabric.</p>
                        <ul class="footer-social" style="min-height: 50px;">
                            <li><img src="img/color1.png" class="img-responsive br20"></li>
                            <li><img src="img/color2.png" class="img-responsive br20"></li>
                            <li><img src="img/color3.png" class="img-responsive br20"></li>
                        </ul>
                        <br>
                        <button class="btn btn-hero btn-lg" role="button" style="">COMING SOON</button>
                    </div>  
                </div>
            </div>
        </div>
    </div>

    <!-- <div class="margin60 ">
        <div class="bgp1">
            <div class="row" style="display: flex">
                
                <div class="col-sm-6 hidden-sm hidden-xs" style="padding-left:100px;">
                    <div style="display: table; height: 100%; width: 100%">
                        <div class="text-left" style="display: table-cell; vertical-align: middle">
                            <h2 class="special_margin">Contemporary Design <br> 2+3 Sofa</h2>
                            <div class="sdividera"></div>
                            <p>Structured with solid Meranti wood frame and high-quality resiliency seat cushion. Designed with fully washable sofa set and upholstery with high quality fabric.</p>
                            <ul class="footer-social" style="min-height: 50px; ">
                                <li><img src="img/color1.png" class="img-responsive br20"></li>
                                <li><img src="img/color2.png" class="img-responsive br20"></li>
                                <li><img src="img/color3.png" class="img-responsive br20"></li>
                            </ul>
                            <br>
                            <button class="btn btn-hero btn-lg" role="button" style="">COMING SOON</button>
                        </div>  
                    </div>
                </div>
                <div class="col-md-6 col-sm-12">
                    <img src="img/slider-03.png" class="img-responsive ">
                </div>
            </div>
        
            <div class="col-md-12 visible-sm visible-xs">
                <div style="display: table; height: 100%; width: 100%">
                    <div style="display: table-cell; vertical-align: middle">
                        <h2 class="">Contemporary Design <br>2+3 Sofa</h2>
                        <div class="sdividera"></div>
                        <p>Structured with solid Meranti wood frame and high-quality resiliency seat cushion. Designed with fully washable sofa set and upholstery with high quality fabric.</p>
                        <ul class="footer-social">
                            <li><img src="img/color1.png" class="img-responsive br20"></li>
                            <li><img src="img/color2.png" class="img-responsive br20"></li>
                            <li><img src="img/color3.png" class="img-responsive br20"></li>
                        </ul>
                        <br>
                        <button class="btn btn-hero btn-lg" role="button" style="">COMING SOON</button>
                    </div>  
                </div>
            </div>
        </div>
    </div> -->

    <div class="margin60 hide">
        <div class="container">
            <div class="bgp1">
                <div class="row" style="display: flex">
                    <div class="col-md-8 col-sm-12">
                        <img src="img/home_productslider_sofa1.png" class="img-responsive mt70">
                    </div>
                    <div class="col-sm-4 hidden-sm hidden-xs">
                        <div style="display: table; height: 100%; width: 100%">
                            <div class="text-right" style="display: table-cell; vertical-align: middle">
                                <h2 class=""> Contemporary Design<br> Dining Set</h2>
                                <div class="sdividera"></div>
                                <p style="">Solid wood with natural walnut veneer top and durable metal leg. Match with designer dining chair upholstered with high quality fabric</p>
                                <ul class="footer-social" style="min-height: 50px; padding-left: 210px;">
                                    <li><img src="img/color1.png" class="img-responsive br20"></li>
                                    <li><img src="img/color2.png" class="img-responsive br20"></li>
                                    <li><img src="img/color3.png" class="img-responsive br20"></li>
                                </ul>
                                <br>
                                <button class="btn btn-hero btn-lg" role="button" style="">Coming Soon</button>
                            </div>  
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-12 visible-sm visible-xs">
                <div style="display: table; height: 100%; width: 100%">
                    <div style="display: table-cell; vertical-align: middle">

                        <h2 > Contemporary Design<br> Dining Set</h2>
                        <div class="sdividera"></div>
                        <p style="">Solid wood with natural walnut veneer top and durable metal leg. Match with designer dining chair upholstered with high quality fabric</p>
                        <ul class="footer-social" style="min-height: 50px;">
                            <li><img src="img/color1.png" class="img-responsive br20"></li>
                            <li><img src="img/color2.png" class="img-responsive br20"></li>
                            <li><img src="img/color3.png" class="img-responsive br20"></li>
                        </ul>
                        <br>
                        <button class="btn btn-hero btn-lg" role="button" style="">Coming Soon</button>
                    </div>  
                </div>
            </div>
        </div>
    </div>

    <div class="margin60 hide" id="second">
        <div class="container">
           <div class="bgp2">
                <div class="row" style="display: flex">
                    <div class="col-sm-4 hidden-sm hidden-xs">
                        <div style="display: table; height: 100%; width: 100%">
                            <div style="display: table-cell; vertical-align: middle">
                                <h2 class="special_margin">Contemporary Design <br> L Shape Sofa</h2>
                                <div class=" sdividera "></div>
                                <p style="">Structured with solid Meranti wood frame and high-quality resiliency seat cushion. Designed with fully washable sofa set and upholstery with high quality fabric.</p>
                                <ul class="footer-social" style="min-height: 50px;">
                                    <li><img src="img/color1.png" class="img-responsive br20"></li>
                                    <li><img src="img/color2.png" class="img-responsive br20"></li>
                                    <li><img src="img/color3.png" class="img-responsive br20"></li>
                                </ul>
                                <button class="btn btn-hero btn-lg" role="button" style="">Coming Soon</button>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-8 col-sm-12">
                        <img src="img/home_productslider_sofa2.png" class="img-responsive mt70">
                    </div>   
               </div>
           </div>
           <div class="col-md-12 visible-sm visible-xs">
                <div style="display: table; height: 100%; width: 100%">
                    <div style="display: table-cell; vertical-align: middle">
                        <h2 class="">Contemporary Design <br> L Shape Sofa</h2>
                        <div class=" sdividera "></div>
                        <p style="">Structured with solid Meranti wood frame and high-quality resiliency seat cushion. Designed with fully washable sofa set and upholstery with high quality fabric.</p>

                        
                        <ul class="footer-social" style="min-height: 50px;">
                            <li><img src="img/color1.png" class="img-responsive br20"></li>
                            <li><img src="img/color2.png" class="img-responsive br20"></li>
                            <li><img src="img/color3.png" class="img-responsive br20"></li>
                        </ul>
                        <br>
                        <button class="btn btn-hero btn-lg" role="button" style="">Coming Soon</button>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <div class="margin60 hide">
        <div class="container">
            <div class="bgp3">
                <div class="row" style="display: flex">
                    <div class="col-md-8 col-sm-12">
                        <img src="img/home_productslider_3.png" class="img-responsive mt70">
                    </div>
                    <div class="col-sm-4 hidden-sm hidden-xs">
                        <div style="display: table; height: 100%; width: 100%">
                            <div class="text-right" style="display: table-cell; vertical-align: middle">
                                <h2  class="special_margin">Contemporary Design <br> 2+3 Sofa</h2>
                                <div class="sdividera"></div>
                                <p>Structured with solid Meranti wood frame and high-quality resiliency seat cushion. Designed with fully washable sofa set and upholstery with high quality fabric.</p>
                                <ul class="footer-social" style="min-height: 50px; padding-left: 210px;">
                                    <li><img src="img/color1.png" class="img-responsive br20"></li>
                                    <li><img src="img/color2.png" class="img-responsive br20"></li>
                                    <li><img src="img/color3.png" class="img-responsive br20"></li>
                                </ul>
                                <br>
                                <button class="btn btn-hero btn-lg" role="button" style="">Coming Soon</button>
                            </div>  
                        </div>
                   </div>

                </div>
            </div>
            <div class="col-md-12 visible-sm visible-xs">
                <div style="display: table; height: 100%; width: 100%">
                    <div style="display: table-cell; vertical-align: middle">
                        <h2 class="">Contemporary Design <br>2+3 Sofa</h2>
                        <div class="sdividera"></div>
                        <p>Structured with solid Meranti wood frame and high-quality resiliency seat cushion. Designed with fully washable sofa set and upholstery with high quality fabric.</p>
                        <ul class="footer-social">
                            <li><img src="img/color1.png" class="img-responsive br20"></li>
                            <li><img src="img/color2.png" class="img-responsive br20"></li>
                            <li><img src="img/color3.png" class="img-responsive br20"></li>
                        </ul>
                        <br>
                        <button class="btn btn-hero btn-lg" role="button" style="">Coming Soon</button>
                    </div>  
                </div>
           </div>
        </div>
    </div>


        <!-- <div class="left margin60">
            <div class="row">
                <div class="col-sm-8">
                    <span class="ssa"><img src="img/home_productslider_sofa1.png" class="img-responsive"></span>
                </div>
                <div class="col-sm-4">
                    <span class="h1"> Fusce Mollis <br> Counge Sem  </span>

                </div>
            </div>
        </div>
        <div class="right margin60">
            <div class="row">
                <div class="col-sm-4">
                    <span class="h1"> Fusce Mollis <br> Counge Sem  </span>

                </div>
                <div class="col-sm-8">
                    <span class="ssa"><img src="img/home_productslider_sofa2.png" class="img-responsive"></span>
                </div>
            </div>
        </div>
        <div class="left margin60">
            <div class="row">
                <div class="col-sm-8">
                    <span class="ssa"><img src="img/home_productslider_3.png" class="img-responsive"></span>
                </div>
                <div class="col-sm-4">
                    <span class="h1"> Fusce Mollis <br> Counge Sem  </span>

                </div>
            </div>
        </div> -->

        
    <div id="video">
        <div class="ov">
            <span class="tiat">OUR SHOWROOM</span>
        </div>
        <div class="container" id="tourpackages-carousel">  
          <div class="row">
            
            <div class="col-sm-6 col-xs-12 mtb20">
                <div class="panel panel-default" style="border: none;">
                    <div class="col-sm-6 col-xs-12 text-center">
                        <div class="panel-heading">
                            <h5><i class="fa fa-map-marker" aria-hidden="true"></i> :Puchong<h5>
                        </div>
                        <div class="panel-body">
                            <p>2, Jln Suria Puchong 1<br>Puchong Gateway Phase 1 <br> 47100 Puchong, Selangor</p>
                            <h5><i class="fa fa-phone" aria-hidden="true"></i> :603-8957 7600<h5>
                        </div>
                    </div>
                    <div class="col-sm-6 col-xs-12">
                        <img src="img/puchong_showroom.png" class="img-responsive">
                    </div>
                </div>
                <div class="thumbnail text-center hide">
                <!-- <iframe width="100%" height="300" src="https://www.youtube.com/embed/kacPTqT_Tbs" frameborder="0" allowfullscreen></iframe> -->
                <div class="caption ll">
                    <h2 class="tiat">Showroom Video</h2>
                    <!-- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere, soluta, eligendi doloribus sunt minus amet sit debitis repellat. Consectetur, culpa itaque odio similique suscipit</p> -->
                </div>
                </div>
            </div>

            <div class="col-sm-6 col-xs-12 mtb20">
                <div class="panel panel-default" style="border: none;">
                    <div class="col-sm-6 col-xs-12 text-center">
                        <div class="panel-heading">
                            <h5><i class="fa fa-map-marker" aria-hidden="true"></i> :Sg.Buloh<h5>
                        </div>
                        <div class="panel-body">
                            <p>AL 121A, 13th Miles<br>Jln Sg Buloh<br> 47000 Sg Buloh</p>
                            <h5><i class="fa fa-phone" aria-hidden="true"></i> :603-61565580<h5>
                        </div>
                    </div>
                    <div class="col-sm-6 col-xs-12">
                        <img src="img/sungai_buloh_showroom.png" class="img-responsive">
                    </div>
                </div>
                <div class="thumbnail text-center hide">
                <!-- <iframe width="100%" height="300" src="https://www.youtube.com/embed/tHJ-AVbzcSQ" frameborder="0" allowfullscreen></iframe> -->
                <div class="caption ll">
                    <h2 class="tiat">Event video</h2>
                    <!-- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere, soluta, eligendi doloribus sunt minus amet sit debitis repellat. Consectetur, culpa itaque odio similique suscipit</p> -->
                </div>
                </div>
            </div>
          </div><!-- End row -->
          
        </div><!-- End container -->
    </div>

    <div class="">
        <div class="col-sm-6 col-xs-12">
            
        </div>
        <div class="col-sm-6 col-xs-12">
            
        </div>
    </div>

    <footer>
        <div class="container">
            <div class="row p40">
          
                <div class="col-md-3 col-sm-6 col-xs-12 footer-col mb20">
                    <h6 class="heading7">MENU</h6>
                    <ul class="footer-ul">
                        <li><a href="#"> Chairs</a></li>
                        <li><a href="#"> Sofas & Armchais</a></li>
                        <li><a href="#"> Tables</a></li>
                        <li><a href="#"> Shelves & Storage</a></li>
                        <li><a href="#"> Decor</a></li>
                        <li><a href="#"> All Collections</a></li>
                    </ul>
                </div>

                <div class="col-md-3 col-sm-6 footer-col mb20">
                    <h6 class="heading7">INFORMATION</h6>
                    <ul class="footer-ul">
                        <li><a href="#"> About Us</a></li>
                        <li><a href="#"> Interior Design</a></li>
                        <li><a href="#"> Contact Us</a></li>
                        <li><a href="#"> Delivery & Returns</a></li>
                        <li><a href="#"> Warranty</a></li>
                        <li><a href="#"> Payment Method</a></li>
                        <li><a href="#"> Careers</a></li>
                    </ul>
                </div>


                <div class="col-md-3 col-sm-6 col-xs-12 footer-col">
                    <div class="heading7"> </div>
                    <p>We have started as the sales organization which specialized on manufacturing of living and bedroom furniture. Over the past 10 years, we have grown to expand and penetrate into the international market and have remained committed to our mission statement. Innovative marketing concepts, quality products, creative and diversifying buisness plans have always been driven by the complete customer satisfaction in mind. </p>
                    <ul class="footer-social">
                        <li><a href="https://www.facebook.com/casamoderno.my/"><img src="img/home_socialmedia_button_facebook.png" class="img-responsive"></a></li>
                        <li><a href="https://www.instagram.com/casamoderno_my/"><img src="img/home_socialmedia_button_instagram.png" class="img-responsive"></a></li>
                    </ul>
                </div>

                <div class="col-md-3 col-sm-6 col-xs-12 footer-col mb20">
                    <div class="heading7"> NEWS & UPDATES</div>

                    <p>Sign up to get the latest on sales, new release and more...</p>
                    

                    <form action="https://casamoderno.us17.list-manage.com/subscribe/post?u=afcd033fe699317d40fe9d285&amp;id=90ee1c4196" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
                        <div id="mc_embed_signup_scroll">
                            <div class="mc-field-group">
                                <div class="form-group">
                                    <div class="input-group">
                                        <input type="email" name="EMAIL" id="mce-EMAIL" class="required form-control xx" value="" placeholder="Subscribe" aria-controls="s-lg-srch-content">
                                        <span class="input-group-btn">
                                            <button class="btn btn-default xx" type="submit" name="subscribe" id="mc-embedded-subscribe"><i class="fa fa-send" aria-hidden="true"></i></button>
                                        </span>

                                        <!-- <input type="text" id="s-lg-srch-input-q" name="q" class="form-control xx" value="" placeholder="Subscribe" aria-controls="s-lg-srch-content">
                                        <span class="input-group-btn">
                                            <button class="btn btn-default xx" type="submit"><i class="fa fa-send" aria-hidden="true"></i> Sign Up</button>
                                        </span> -->
                                    </div>
                                </div>

                                <!-- <input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL">
                                <input type="submit" value="Sign Up" name="subscribe" id="mc-embedded-subscribe" class="button"> -->
                            </div>
                            <div id="mce-responses" class="clear">
                                <div class="response" id="mce-error-response" style="display:none"></div>
                                <div class="response" id="mce-success-response" style="display:none"></div>
                            </div>    <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
                            <div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_afcd033fe699317d40fe9d285_90ee1c4196" tabindex="-1" value=""></div>
                            <div class="clear"></div>
                        </div>
                    </form>

            
                </div>
            </div>
        </div>
    </footer>

    <div id="myModal" class="modal fade" role="dialog">
      <div class="modal-dialog  modal-sm">

        <!-- Modal content-->
        <div class="modal-content" style="background: url(img/1new.png) center center / cover no-repeat; border-radius: 0;">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title text-center"><img src="img/home_menu_logo.png" style="width: 60%; height : auto;"></h4>
          </div>
          <div class="modal-body text-center">
            
            <img src="img/pop/popoutpage_sofa.png" style="width: 50%; padding-top: 50px">
            <br>
            <h4 style="font-size:26px; border-top: solid 2px black; border-bottom: solid 2px black; display: inline-block;:"><b>Join Our Family</b></h4>
            <p style="font-size: 18px">10% off your first order,<br> plus priority access to promotions</p>

            <form action="https://casamoderno.us17.list-manage.com/subscribe/post?u=afcd033fe699317d40fe9d285&amp;id=90ee1c4196" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
                <div id="mc_embed_signup_scroll">
                    <div class="mc-field-group">
                        <input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL">
                        <input type="submit" value="Sign Up" name="subscribe" id="mc-embedded-subscribe" class="button">
                    </div>
                    <div id="mce-responses" class="clear">
                        <div class="response" id="mce-error-response" style="display:none"></div>
                        <div class="response" id="mce-success-response" style="display:none"></div>
                    </div>    <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
                    <div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_afcd033fe699317d40fe9d285_90ee1c4196" tabindex="-1" value=""></div>
                    <div class="clear"></div>
                </div>
            </form>
            <!-- <form method="POST">
                <input type="email" name="email" style="width: 50%"> 
                <button style="" type="submit">Sign Up</button>
            </form> -->
            <br>
            <br>
          </div>
        </div>

      </div>
    </div>


    <!-- jQuery -->
    <script src="js/jquery.js"></script>

    <!-- Bootstrap Core JavaScript -->
    <script src="js/bootstrap.min.js"></script>

    <!-- Script to Activate the Carousel -->
    <script type="text/javascript">

        $(document).ready(function(){
            // $('#myModal').modal('show');
        });

        $(window).on("load", function() {
            $('#myModal').modal('show');
        });


        $('.carousel').carousel({
            interval: 5000 //changes the speed
        })
       

        
        function openNav() {
            document.getElementById("myNav").style.width = "100%";

            $('.overlay-content .an').addClass('animated fadeInLeft');
          



        }

        function closeNav() {
            document.getElementById("myNav").style.width = "0%";

            
            $('.overlay-content .an').removeClass('animated fadeInLeft');
            
        }    
    </script>

</body>

</html>
