<!DOCTYPE html>
<html>
<head>
<!-- Basic -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Demo Architecture 2 | Porto - Responsive HTML5 Template</title>
<meta name="keywords" content="HTML5 Template" />
<meta name="description" content="Porto - Responsive HTML5 Template">
<meta name="author" content="okler.net">
<!-- Favicon -->
<link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon" />
<link rel="apple-touch-icon" href="img/apple-touch-icon.png">
<!-- Mobile Metas -->
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, shrink-to-fit=no">
<!-- Web Fonts -->
<link id="googleFonts" href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700,800%7COverpass:200,400,600,700,800,900%7CPT+Serif&display=swap" rel="stylesheet" type="text/css">
<!-- Vendor CSS -->
<link rel="stylesheet" href="vendor/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="vendor/fontawesome-free/css/all.min.css">
<link rel="stylesheet" href="vendor/animate/animate.compat.css">
<link rel="stylesheet" href="vendor/simple-line-icons/css/simple-line-icons.min.css">
<link rel="stylesheet" href="vendor/owl.carousel/assets/owl.carousel.min.css">
<link rel="stylesheet" href="vendor/owl.carousel/assets/owl.theme.default.min.css">
<link rel="stylesheet" href="vendor/magnific-popup/magnific-popup.min.css">
<!-- Theme CSS -->
<link rel="stylesheet" href="css/theme.css">
<link rel="stylesheet" href="css/theme-elements.css">
<link rel="stylesheet" href="css/theme-blog.css">
<link rel="stylesheet" href="css/theme-shop.css">
<!-- Demo CSS -->
<link rel="stylesheet" href="css/demos/demo-architecture-2.css">
<!-- Skin CSS -->
<link id="skinCSS" rel="stylesheet" href="css/skins/skin-architecture-2.css">
<!-- Theme Custom CSS -->
<link rel="stylesheet" href="css/custom.css">
<!-- Head Libs -->
<script src="vendor/modernizr/modernizr.min.js"></script>
</head>
<body class="loading-overlay-showing" data-loading-overlay data-plugin-page-transition>
<div class="loading-overlay">
<div class="bounce-loader">
<div class="bounce1"></div>
<div class="bounce2"></div>
<div class="bounce3"></div>
</div>
</div>
<div class="body">
<header id="header" class="header-transparent header-effect-shrink" data-plugin-options="{'stickyEnabled': true, 'stickyEffect': 'shrink', 'stickyEnableOnBoxed': true, 'stickyEnableOnMobile': false, 'stickyHeaderContainerHeight': 80, 'stickyStartAt': 50, 'stickyChangeLogo': false}">
<div class="header-body border-top-0 bg-primary">
<div class="header-container container-fluid">
<div class="header-row">
<div class="header-column align-items-start justify-content-center">
<div class="header-logo z-index-2 col-lg-2 px-0">
<a href="demo-architecture-2.html">
<img alt="Porto" width="123" height="32" src="img/demos/architecture-2/logo.png">
</a>
</div>
</div>
<div class="header-column flex-row justify-content-end justify-content-lg-center">
<div class="header-nav header-nav-line header-nav-bottom-line header-nav-bottom-line-effect-1 header-nav-dropdowns-dark header-nav-light-text justify-content-end">
<div class="header-nav-main header-nav-main-arrows header-nav-main-mobile-dark header-nav-main-dropdown-no-borders header-nav-main-effect-3 header-nav-main-sub-effect-1">
<nav class="collapse">
<ul class="nav nav-pills" id="mainNav">
<li><a href="demo-architecture-2.html" class="nav-link">Home</a></li>
<li><a href="demo-architecture-2-about-us.html" class="nav-link">About</a></li>
<li><a href="demo-architecture-2-projects.html" class="nav-link">Projects</a></li>
<li class="dropdown">
<a href="demo-architecture-2-services.html" class="nav-link dropdown-toggle active">Services</a>
<ul class="dropdown-menu">
<li><a href="demo-architecture-2-services.html" class="dropdown-item">View All</a></li>
<li><a href="demo-architecture-2-services-detail.html" class="dropdown-item">Design & Planning</a></li>
<li><a href="demo-architecture-2-services-detail.html" class="dropdown-item">Interior Design</a></li>
<li><a href="demo-architecture-2-services-detail.html" class="dropdown-item">Exterior Design</a></li>
<li><a href="demo-architecture-2-services-detail.html" class="dropdown-item">Construction Drawings</a></li>
</ul>
</li>
<li><a href="demo-architecture-2-blog.html" class="nav-link">Blog</a></li>
<li><a href="demo-architecture-2-contact.html" class="nav-link">Contact</a></li>
</ul>
</nav>
</div>
</div>
<div class="header-nav-features ps-0 ms-3">
<div class="header-nav-features-search-reveal-container">
<div class="header-nav-feature header-nav-features-search header-nav-features-search-reveal d-inline-flex">
<a href="#" class="header-nav-features-search-show-icon d-inline-flex text-decoration-none"><i class="icons icon-magnifier header-nav-top-icon text-color-light text-4 font-weight-bold position-relative top-1"></i></a>
</div>
</div>
</div>
<button class="btn header-btn-collapse-nav bg-transparent border-0 text-4 position-relative top-2 p-0 ms-4" data-bs-toggle="collapse" data-bs-target=".header-nav-main nav">
<i class="fas fa-bars"></i>
</button>
</div>
<div class="header-column align-items-end justify-content-center d-none d-lg-flex">
<ul class="header-social-icons social-icons social-icons-clean social-icons-icon-light social-icons-medium custom-social-icons-divider">
<li class="social-icons-facebook">
<a href="http://www.facebook.com/" target="_blank" title="Facebook"><i class="fab fa-facebook-f"></i></a>
</li>
<li class="social-icons-twitter">
<a href="http://www.twitter.com/" target="_blank" title="Twitter"><i class="fab fa-twitter"></i></a>
</li>
<li class="social-icons-linkedin">
<a href="http://www.linkedin.com/" target="_blank" title="Linkedin"><i class="fab fa-linkedin-in"></i></a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="header-nav-features header-nav-features-no-border p-static">
<div class="header-nav-feature header-nav-features-search header-nav-features-search-reveal header-nav-features-search-reveal-big-search header-nav-features-search-reveal-big-search-full">
<div class="container">
<div class="row h-100 d-flex">
<div class="col h-100 d-flex">
<form role="search" class="d-flex h-100 w-100" action="page-search-results.html" method="get">
<div class="big-search-header input-group">
<input class="form-control text-1" id="headerSearch" name="q" type="search" value="" placeholder="Type and hit enter...">
<a href="#" class="header-nav-features-search-hide-icon"><i class="fas fa-times header-nav-top-icon"></i></a>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</header>
<div role="main" class="main">
<section class="custom-page-header-1 page-header page-header-modern page-header-lg bg-primary border-0 z-index-1 my-0">
<div class="custom-page-header-1-wrapper overflow-hidden">
<div class="custom-bg-grey-1 py-5 appear-animation" data-appear-animation="maskUp" data-appear-animation-delay="800">
<div class="container py-3 my-3">
<div class="row">
<div class="col-md-12 align-self-center p-static text-center">
<div class="overflow-hidden mb-2">
<h1 class="font-weight-black text-12 mb-0 appear-animation" data-appear-animation="maskUp" data-appear-animation-delay="1200">Design & Planning</h1>
</div>
</div>
<div class="col-md-12 align-self-center">
<div class="overflow-hidden">
<ul class="custom-breadcrumb-style-1 breadcrumb breadcrumb-light custom-font-secondary d-block text-center custom-ls-1 text-5 appear-animation" data-appear-animation="maskUp" data-appear-animation-delay="1450">
<li class="text-transform-none"><a href="demo-architecture-2.html" class="text-decoration-none">Home</a></li>
<li class="text-transform-none active">Services</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<div class="custom-page-wrapper pt-5 pb-1">
<div class="spacer py-4 my-5"></div>
<div class="container container-xl-custom">
<div class="row">
<div class="col-lg-8 col-xl-9 order-1 order-lg-2">
<div class="float-end ps-4 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="1900">
<img width="137" src="img/demos/architecture-2/icons/house-plant.svg" alt="" data-icon data-plugin-options="{'onlySVG': true, 'extraClass': 'svg-fill-color-primary'}" />
</div>
<p class="custom-font-tertiary text-5 line-height-4 mb-4 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="1500">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed imperdiet libero id nisi euismod, sed porta est consectetur.</p>
<p class="text-3-5 pb-3 mb-4 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="1700">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.</p>
<img src="img/demos/architecture-2/generic/generic-14.jpg" class="img-fluid mb-4 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="2100" alt="" />
<img src="img/demos/architecture-2/generic/generic-15.jpg" class="img-fluid appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="250" alt="" />
</div>
<div class="col-lg-4 col-xl-3 order-2 order-lg-1 position-relative appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="2300">
<aside class="sidebar" data-plugin-sticky data-plugin-options="{'minWidth': 991, 'containerSelector': '.container', 'padding': {'top': 120}}">
<div class="pb-3 mb-4">
<div class="card rounded-0">
<div class="card-body px-4 py-5">
<ul class="list list-unstyled mb-0">
<li class="mb-4">
<strong class="custom-font-secondary text-color-dark text-5">
<a href="demo-architecture-2-services-detail.html" class="custom-link-effect-1 text-color-primary text-decoration-none active">Design & Planning</a>
</strong>
</li>
<li class="mb-4">
<strong class="custom-font-secondary text-color-dark text-5">
<a href="demo-architecture-2-services-detail.html" class="custom-link-effect-1 text-color-primary text-decoration-none">Interior Design</a>
</strong>
</li>
<li class="mb-4">
<strong class="custom-font-secondary text-color-dark text-5">
<a href="demo-architecture-2-services-detail.html" class="custom-link-effect-1 text-color-primary text-decoration-none">Exterior Design</a>
</strong>
</li>
<li class="mb-0">
<strong class="custom-font-secondary text-color-dark text-5">
<a href="demo-architecture-2-services-detail.html" class="custom-link-effect-1 text-color-primary text-decoration-none">Construction Drawings</a>
</strong>
</li>
</ul>
</div>
</div>
</div>
<div class="card bg-primary border-0 rounded-0">
<div class="card-body text-center p-5 my-3">
<h2 class="text-color-light font-weight-extra-bold text-10 line-height-4 pb-3 mb-4">Let's Talk About Your New Porject, We Can do It!</h2>
<a href="demo-architecture-2-contact.html" class="btn btn-light custom-btn-style-1 font-weight-bold text-color-dark text-3 px-5 py-3">CONTACT US</a>
</div>
</div>
</aside>
</div>
</div>
</div>
</div>
</div>
<footer id="footer" class="bg-primary border-0">
<div class="container container-xl-custom pt-5 pb-3">
<div class="row py-5">
<div class="col-md-4 col-lg-2 mb-4 mb-lg-0">
<h4 class="font-weight-extra-bold text-5 ls-0">Address</h4>
<ul class="list list-unstyled">
<li class="mb-1">
12345 Porto Blvd.
</li>
<li class="mb-1">
Suite 1500
</li>
<li>
Los Angeles, California 90000
</li>
</ul>
</div>
<div class="col-md-4 col-lg-2 mb-4 mb-lg-0">
<h4 class="font-weight-extra-bold text-5 ls-0">Contacts</h4>
<ul class="list-unstyled">
<li>
<span class="d-block line-height-2 mb-1">OFFICE</span>
<a href="tel:+1234567890" class="text-color-light text-6 text-lg-4 text-xl-6 font-weight-bold">800-123-4568</a>
</li>
</ul>
</div>
<div class="col-md-4 col-lg-2 mb-4 mb-lg-0">
<h4 class="font-weight-extra-bold text-5 ls-0">Useful Links</h4>
<ul class="list-unstyled">
<li class="mb-1">
<a href="demo-architecture-2-services.html">Our Services</a>
</li>
<li class="mb-1">
<a href="#">Payment Methods</a>
</li>
<li class="mb-1">
<a href="#">Services Guide</a>
</li>
<li>
<a href="#">FAQs</a>
</li>
</ul>
</div>
<div class="col-md-4 col-lg-2 mb-4 mb-md-0">
<h4 class="font-weight-extra-bold text-5 ls-0">Services</h4>
<ul class="list-unstyled">
<li class="mb-1">
<a href="demo-architecture-2-services-detail.html">Design & Planning</a>
</li>
<li class="mb-1">
<a href="demo-architecture-2-services-detail.html">Interior Design</a>
</li>
<li class="mb-1">
<a href="demo-architecture-2-services-detail.html">Exerior Design</a>
</li>
<li>
<a href="demo-architecture-2-services-detail.html">Construction Drawings</a>
</li>
</ul>
</div>
<div class="col-md-4 col-lg-2 mb-4 mb-md-0">
<h4 class="font-weight-extra-bold text-5 ls-0">About</h4>
<ul class="list-unstyled">
<li class="mb-1">
<a href="demo-architecture-2-about-us.html">About Us</a>
</li>
<li>
<a href="demo-architecture-2-contact.html">Send a Message</a>
</li>
</ul>
</div>
<div class="col-md-4 col-lg-2">
<h4 class="font-weight-extra-bold text-5 ls-0">Follow Us</h4>
<ul class="social-icons social-icons-clean social-icons-icon-light">
<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-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-primary">
<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-5 my-3">
<div class="col text-center">
<a href="demo-architecture-2.html" class="d-inline-block mb-3">
<img alt="Porto" width="115" height="30" src="img/demos/architecture-2/logo.png">
</a>
<p class="text-3 mb-0">Porto Architecture 2. © 2021. All Rights Reserved</p>
</div>
</div>
</div>
</div>
</footer>
</div>
<!-- Vendor -->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/jquery.appear/jquery.appear.min.js"></script>
<script src="vendor/jquery.easing/jquery.easing.min.js"></script>
<script src="vendor/jquery.cookie/jquery.cookie.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="vendor/jquery.validation/jquery.validate.min.js"></script>
<script src="vendor/jquery.easy-pie-chart/jquery.easypiechart.min.js"></script>
<script src="vendor/jquery.gmap/jquery.gmap.min.js"></script>
<script src="vendor/lazysizes/lazysizes.min.js"></script>
<script src="vendor/isotope/jquery.isotope.min.js"></script>
<script src="vendor/owl.carousel/owl.carousel.min.js"></script>
<script src="vendor/magnific-popup/jquery.magnific-popup.min.js"></script>
<script src="vendor/vide/jquery.vide.min.js"></script>
<script src="vendor/vivus/vivus.min.js"></script>
<!-- Theme Base, Components and Settings -->
<script src="js/theme.js"></script>
<!-- Demo -->
<script src="js/demos/demo-architecture-2.js"></script>
<!-- Theme Custom -->
<script src="js/custom.js"></script>
<!-- Theme Initialization Files -->
<script src="js/theme.init.js"></script>
</body>
</html>