<!doctype html>
<html class="no-js" lang="en">
<head>
<title>Crafto - The Multipurpose HTML5 Template</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="author" content="ThemeZaa">
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<meta name="description" content="Elevate your online presence with Crafto - a modern, versatile, multipurpose Bootstrap 5 responsive HTML5, SCSS template using highly creative 52+ ready demos.">
<link rel="shortcut icon" href="images/favicon.png">
<link rel="apple-touch-icon" href="images/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">
<link rel="preconnect" href="https://fonts.googleapis.com" crossorigin>
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="css/vendors.min.css" />
<link rel="stylesheet" href="css/icon.min.css" />
<link rel="stylesheet" href="css/style.min.css" />
<link rel="stylesheet" href="css/responsive.min.css" />
<link rel="stylesheet" href="demos/architecture/architecture.css" />
</head>
<body class="custom-cursor overflow-x-hidden" data-mobile-nav-style="classic">
<div class="cursor-page-inner">
<div class="circle-cursor circle-cursor-inner"></div>
<div class="circle-cursor circle-cursor-outer"></div>
</div>
<header>
<nav class="navbar navbar-expand-lg header-transparent bg-transparent disable-fixed">
<div class="container-fluid">
<div class="col-auto col-lg-2 me-lg-0 me-auto d-none d-lg-flex">
<div class="header-icon">
<div class="header-social-icon icon social-text-style-01">
<a class="facebook" href="https://www.facebook.com/" target="_blank">Fb.</a>
<a class="twitter" href="https://www.twitter.com" target="_blank">Tw.</a>
<a class="behance" href="https://www.instagram.com/" target="_blank">In.</a>
</div>
</div>
</div>
<div class="col-auto">
<a class="navbar-brand" href="demo-architecture.html">
<img src="images/demo-architecture-logo-white.png" data-at2x="images/demo-architecture-logo-white@2x.png" alt class="default-logo">
<img src="images/demo-architecture-logo-white.png" data-at2x="images/demo-architecture-logo-white@2x.png" alt class="alt-logo">
<img src="images/demo-architecture-logo-black.png" data-at2x="images/demo-architecture-logo-black@2x.png" alt class="mobile-logo">
</a>
</div>
<div class="col-auto col-lg-2 text-end">
<div class="header-icon header-push-button hamburger-push-button icon">
<div class="push-button">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
</div>
</div>
</nav>
<div class="push-menu hamburger-nav hamburger-menu-simple header-dark bg-dark-gray background-position-center-top" style="background-image: url('images/vertical-line-bg-small.svg');">
<span class="close-menu text-dark-gray text-dark-gray-hover bg-white"><i class="fa-solid fa-xmark"></i></span>
<div class="container h-100">
<div class="row align-items-center justify-content-center h-100">
<div class="col-lg-8 col-md-6 order-2 order-md-1 d-none d-md-inline-block">
<a class="hamburger-logo d-inline-block" href="demo-architecture.html">
<img src="images/demo-architecture-footer-logo.png" data-at2x="images/demo-architecture-footer-logo@2x.png" class="w-auto" alt>
</a>
<div class="row mt-22 md-mt-30px sm-mt-25px align-items-start">
<div class="col-lg-4 last-paragraph-no-margin md-mb-30px sm-mb-20px menu-address">
<span class="text-base-color fs-14 fw-600 ls-2px text-uppercase mb-5px d-block">Let's meet</span>
<p class="w-90 md-w-80">27 Eden walk eden centre, Orchard, Paris, France</p>
</div>
<div class="col-lg-4 last-paragraph-no-margin md-mb-30px sm-mb-20px menu-address">
<span class="text-base-color fs-14 fw-600 ls-2px text-uppercase mb-5px d-block">Let's talk</span>
<a href="tel:1800222002" class="text-white-hover">1-800-222-002</a><br>
<a href="cdn-cgi/l/email-protection.html#b8d1d6ded7f8c1d7cdcadcd7d5d9d1d696dbd7d5" class="text-decoration-line-bottom text-white"><span class="__cf_email__" data-cfemail="4821262e270831273d3a2c2725292126662b2725">[email protected]</span></a>
</div>
<div class="col-lg-4 last-paragraph-no-margin elements-social">
<span class="text-base-color fs-14 fw-600 ls-2px text-uppercase mb-5px d-block">Connect with us</span>
<div class="social-icon-style-02 mt-15px">
<ul class="medium-icon light">
<li><a class="facebook" href="https://www.facebook.com/" target="_blank"><i class="fa-brands fa-facebook-f"></i></a></li>
<li><a class="dribbble" href="http://www.dribbble.com" target="_blank"><i class="fa-brands fa-dribbble"></i></a></li>
<li><a class="twitter" href="https://www.twitter.com" target="_blank"><i class="fa-brands fa-twitter"></i></a></li>
<li><a class="instagram" href="https://www.instagram.com" target="_blank"><i class="fa-brands fa-instagram"></i></a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-5 offset-md-1 order-1 order-md-2 text-center text-md-start">
<div class="hamburger-menu menu-list-wrapper" data-scroll-options="{ "theme": "light" }">
<ul class="menu-item-list alt-font ls-minus-05px p-0">
<li class="menu-item"><a href="demo-architecture.html" class="nav-link">Home</a></li>
<li class="menu-item"><a href="demo-architecture-about.html" class="nav-link">About</a></li>
<li class="menu-item"><a href="demo-architecture-services.html" class="nav-link">Services</a></li>
<li class="menu-item"><a href="demo-architecture-projects.html" class="nav-link">Projects</a></li>
<li class="menu-item"><a href="demo-architecture-blog.html" class="nav-link">Articles</a></li>
<li class="menu-item"><a href="demo-architecture-contact.html" class="nav-link">Contact</a></li>
</ul>
</div>
</div>
<div class="col-12 menu-text border-top border-color-transparent-white-light d-none d-md-inline-block text-center pt-3 pb-3 order-3">
<h6 class="fw-400 d-inline-block align-middle mb-0">Let's build something <span class="text-white">great together</span></h6>
<div class="separator-line-1px d-inline-block align-middle ms-20px me-20px mt-5px w-70px bg-base-color"></div>
<a href="cdn-cgi/l/email-protection.html#2f474a4343406f4c5d4e495b40014c4042" class="text-base-color fs-26 fw-500 d-inline-block align-middle"><span class="__cf_email__" data-cfemail="d1b9b4bdbdbe91b2a3b0b7a5beffb2bebc">[email protected]</span></a>
</div>
</div>
</div>
</div>
</header>
<section class="ipad-top-space-margin page-title-big-typography bg-dark-gray cover-background background-position-center-bottom p-0" style="background-image: url('images/demo-architecture-services-title-bg.jpg')">
<div class="container">
<div class="row align-items-end justify-content-center one-half-screen md-small-screen sm-extra-small-screen pb-9">
<div class="col-lg-6 col-md-8 position-relative page-title-extra-small text-center" data-anime="{ "el": "childs", "translateY": [30, 0], "opacity": [0,1], "duration": 600, "delay": 0, "staggervalue": 300, "easing": "easeOutQuad" }">
<h1 class="mb-20px alt-font text-white fw-500 ls-minus-4px"><span class="text-base-color">our</span> services</h1>
<h2 class="text-white mb-0 text-uppercase ls-3px fw-600">Great architecture services</h2>
</div>
</div>
</div>
</section>
<section class="bg-dark-gray background-position-center-top overlap-height" style="background-image: url('images/demo-architecture-dotted-pattern.svg')">
<div class="container overlap-gap-section">
<div class="row mb-7 sm-mb-0">
<div class="col-lg-4 md-mb-50px xs-mb-30px" data-anime="{ "opacity": [0,1], "duration": 600, "delay": 0, "staggervalue": 200, "easing": "easeOutQuad" }">
<span class="text-base-color fs-12 fw-600 ls-3px text-uppercase mb-5px d-block">Architecture process</span>
<h4 class="text-white mb-20px fw-600">The project process.</h4>
<p>Our buildings combine minimalism and elegance of lines and shapes. We want them to be an integral part of the surrounding landscape.</p>
<a href="demo-architecture-services.html#services" class="btn btn-link btn-hover-animation-switch btn-medium text-white primary-font sm-vertical-align-top section-link ls-1px">
<span>
<span class="btn-text">Explore services</span>
<span class="btn-icon"><i class="fa-solid fa-arrow-right fs-14"></i></span>
<span class="btn-icon"><i class="fa-solid fa-arrow-right fs-14"></i></span>
</span>
</a>
</div>
<div class="col-lg-7 offset-lg-1">
<div class="row row-cols-auto row-cols-sm-2" data-anime="{ "el": "childs", "rotateZ": [5, 0], "translateY": [30, 0], "opacity": [0,1], "duration": 600, "delay": 0, "staggervalue": 200, "easing": "easeOutQuad" }">
<div class="col mb-30px">
<div class="feature-box text-start ps-30px pe-30px">
<div class="feature-box-icon position-absolute left-0px top-0px">
<h1 class="fs-110 text-outline text-outline-color-white opacity-1 fw-800">01</h1>
</div>
<div class="feature-box-content last-paragraph-no-margin pt-30 md-pt-24 sm-pt-30 xs-pt-55px">
<span class="text-white d-inline-block fs-19 fw-500 mb-5px position-relative">Design planing</span>
<p>Our buildings combine design elegance of lines and shapes.</p>
</div>
</div>
</div>
<div class="col mb-30px">
<div class="feature-box text-start ps-30px pe-30px">
<div class="feature-box-icon position-absolute left-0px top-0px">
<h1 class="fs-110 text-outline text-outline-color-white opacity-1 fw-800">02</h1>
</div>
<div class="feature-box-content last-paragraph-no-margin pt-30 md-pt-24 sm-pt-30 xs-pt-55px">
<span class="text-white d-inline-block fs-19 fw-500 mb-5px position-relative">Design concept</span>
<p>Our buildings combine design elegance of lines and shapes.</p>
</div>
</div>
</div>
<div class="col xs-mb-30px">
<div class="feature-box text-start ps-30px pe-30px">
<div class="feature-box-icon position-absolute left-0px top-0px">
<h1 class="fs-110 text-outline text-outline-color-white opacity-1 fw-800">03</h1>
</div>
<div class="feature-box-content last-paragraph-no-margin pt-30 md-pt-24 sm-pt-30 xs-pt-55px">
<span class="text-white d-inline-block fs-19 fw-500 mb-5px position-relative">Design development</span>
<p>Our buildings combine design elegance of lines and shapes.</p>
</div>
</div>
</div>
<div class="col">
<div class="feature-box text-start ps-30px pe-30px">
<div class="feature-box-icon position-absolute left-0px top-0px">
<h1 class="fs-110 text-outline text-outline-color-white opacity-1 fw-800">04</h1>
</div>
<div class="feature-box-content last-paragraph-no-margin pt-30 md-pt-24 sm-pt-30 xs-pt-55px">
<span class="text-white d-inline-block fs-19 fw-500 mb-5px position-relative">Finished project</span>
<p>Our buildings combine design elegance of lines and shapes.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="bg-nero-grey background-position-center-top pb-0" style="background-image: url('images/demo-architecture-dotted-pattern.svg')">
<div class="container">
<div class="row overlap-section">
<div class="col-12">
<div class="position-absolute top-0px left-0px w-100 h-100">
<a href="https://www.youtube.com/watch?v=cfXHhfNy7tU" class="absolute-middle-center text-center bg-base-color rounded-circle video-icon-box video-icon-extra-large popup-youtube">
<span>
<span class="video-icon text-dark-gray fw-800 text-uppercase ls-1px">Play</span>
</span>
</a>
</div>
<div data-atropos data-0-top="filter: grayscale(1);" data-15-bottom="filter: grayscale(0);">
<div class="atropos-scale">
<div class="atropos-rotate">
<div class="atropos-inner overflow-visible">
<div class="border-radius-6px h-650px md-h-450px sm-h-350px d-flex align-items-end justify-content-center overflow-hidden cover-background" style="background-image: url('images/demo-architecture-services-01.jpg')" data-atropos-offset="-5">
<div class="opacity-very-light bg-dark-gray"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row align-items-end pt-9 mb-6" id="services">
<div class="col-md-6 sm-mb-20px" data-anime="{ "el": "childs", "translateX": [50, 0], "opacity": [0,1], "duration": 1200, "delay": 0, "staggervalue": 150, "easing": "easeOutQuad" }">
<span class="text-base-color fs-12 fw-600 ls-3px text-uppercase mb-5px d-block">Architecture services</span>
<h4 class="text-white fw-600 mb-0">Create functional and stylish modern buildings for you.</h4>
</div>
<div class="col-md-5 offset-md-1 last-paragraph-no-margin" data-anime="{ "translateX": [-50, 0], "opacity": [0,1], "duration": 1200, "delay": 0, "staggervalue": 150, "easing": "easeOutQuad" }">
<p class="w-80 xl-w-85 lg-w-100">Our buildings combine minimalism and elegance of lines and shapes. We want them to be an integral part of the surrounding landscape.</p>
</div>
</div>
<div class="row align-items-center">
<div class="col-md-12 position-relative" data-anime="{ "el": "childs", "translateX": [150, 0], "opacity": [0,1], "duration": 1200, "delay": 0, "staggervalue": 150, "easing": "easeOutQuad" }">
<div class="outside-box-right-30 sm-outside-box-right-0" data-anime="{ "el": "childs", "translateX": [0, 0], "opacity": [0,1], "duration": 1200, "delay": 0, "staggervalue": 150, "easing": "easeOutQuad" }">
<div class="swiper slider-three-slide magic-cursor base-color" data-slider-options="{ "slidesPerView": 1, "spaceBetween": 35, "loop": true, "autoplay": { "delay": 4000, "disableOnInteraction": false }, "pagination": { "el": ".slider-four-slide-pagination-1", "clickable": true, "dynamicBullets": false }, "keyboard": { "enabled": true, "onlyInViewport": true }, "breakpoints": { "1200": { "slidesPerView": 4 }, "992": { "slidesPerView": 3 }, "768": { "slidesPerView": 3 }, "320": { "slidesPerView": 1 } }, "effect": "slide" }">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="interactive-banner-style-06">
<div class="interactive-banners-image">
<img src="images/demo-architecture-home-04.jpg" alt />
<div class="overlay-bg bg-gradient-dark-transparent opacity-light"></div>
<a href="demo-architecture-services.html#" class="banners-icon text-white icon-hover-base-color position-absolute top-60px left-60px md-top-30px md-left-30px">
<i class="line-icon-Structure icon-large"></i>
</a>
</div>
<div class="interactive-banners-content p-60px md-p-30px">
<div class="h-100 w-100 last-paragraph-no-margin">
<a href="demo-architecture-services.html#" class="fs-22 d-block text-white mb-10px fw-500">Architecture</a>
<p class="interactive-banners-content-text w-95 lg-w-100">Lorem ipsum consectetur elit do eiusmod tempor incididunt.</p>
</div>
</div>
<div class="box-overlay bg-gradient-dark-transparent"></div>
</div>
</div>
<div class="swiper-slide">
<div class="interactive-banner-style-06">
<div class="interactive-banners-image">
<img src="images/demo-architecture-home-05.jpg" alt />
<div class="overlay-bg bg-gradient-dark-transparent opacity-light"></div>
<a href="demo-architecture-services.html#" class="banners-icon text-white icon-hover-base-color position-absolute top-60px left-60px md-top-30px md-left-30px">
<i class="line-icon-Cursor-Select icon-large"></i>
</a>
</div>
<div class="interactive-banners-content p-60px md-p-30px">
<div class="h-100 w-100 last-paragraph-no-margin">
<a href="demo-architecture-services.html#" class="fs-22 d-block text-white mb-10px fw-500">Residential space</a>
<p class="interactive-banners-content-text w-95 lg-w-100">Lorem ipsum consectetur elit do eiusmod tempor incididunt.</p>
</div>
</div>
<div class="box-overlay bg-gradient-dark-transparent"></div>
</div>
</div>
<div class="swiper-slide">
<div class="interactive-banner-style-06">
<div class="interactive-banners-image">
<img src="images/demo-architecture-home-06.jpg" alt />
<div class="overlay-bg bg-gradient-dark-transparent opacity-light"></div>
<a href="demo-architecture-services.html#" class="banners-icon icon-hover-base-color text-white position-absolute top-60px left-60px md-top-30px md-left-30px">
<i class="line-icon-Full-View icon-large"></i>
</a>
</div>
<div class="interactive-banners-content p-60px md-p-30px">
<div class="h-100 w-100 last-paragraph-no-margin">
<a href="demo-architecture-services.html#" class="fs-22 d-block text-white mb-10px fw-500">Interior design</a>
<p class="interactive-banners-content-text w-95 lg-w-100">Lorem ipsum consectetur elit do eiusmod tempor incididunt.</p>
</div>
</div>
<div class="box-overlay bg-gradient-dark-transparent"></div>
</div>
</div>
<div class="swiper-slide">
<div class="interactive-banner-style-06">
<div class="interactive-banners-image">
<img src="images/demo-architecture-home-07.jpg" alt />
<div class="overlay-bg bg-gradient-dark-transparent opacity-light"></div>
<a href="demo-architecture-services.html#" class="banners-icon icon-hover-base-color text-white position-absolute top-60px left-60px md-top-30px md-left-30px">
<i class="line-icon-Duplicate-Layer icon-large"></i>
</a>
</div>
<div class="interactive-banners-content p-60px md-p-30px">
<div class="h-100 w-100 last-paragraph-no-margin">
<a href="demo-architecture-services.html#" class="fs-22 d-block text-white mb-10px fw-500">Exterior planning</a>
<p class="interactive-banners-content-text w-95 lg-w-100">Lorem ipsum consectetur elit do eiusmod tempor incididunt.</p>
</div>
</div>
<div class="box-overlay bg-gradient-dark-transparent"></div>
</div>
</div>
<div class="swiper-slide">
<div class="interactive-banner-style-06">
<div class="interactive-banners-image">
<img src="images/demo-architecture-home-04.jpg" alt />
<div class="overlay-bg bg-gradient-dark-transparent opacity-light"></div>
<a href="demo-architecture-services.html#" class="banners-icon text-white icon-hover-base-color position-absolute top-60px left-60px md-top-30px md-left-30px">
<i class="line-icon-Structure icon-large"></i>
</a>
</div>
<div class="interactive-banners-content p-60px md-p-30px">
<div class="h-100 w-100 last-paragraph-no-margin">
<a href="demo-architecture-services.html#" class="fs-22 d-block text-white mb-10px fw-500">Architecture</a>
<p class="interactive-banners-content-text w-95 lg-w-100">Lorem ipsum consectetur elit do eiusmod tempor incididunt.</p>
</div>
</div>
<div class="box-overlay bg-gradient-dark-transparent"></div>
</div>
</div>
<div class="swiper-slide">
<div class="interactive-banner-style-06">
<div class="interactive-banners-image">
<img src="images/demo-architecture-home-05.jpg" alt />
<div class="overlay-bg bg-gradient-dark-transparent opacity-light"></div>
<a href="demo-architecture-services.html#" class="banners-icon text-white icon-hover-base-color position-absolute top-60px left-60px md-top-30px md-left-30px">
<i class="line-icon-Cursor-Select icon-large"></i>
</a>
</div>
<div class="interactive-banners-content p-60px md-p-30px">
<div class="h-100 w-100 last-paragraph-no-margin">
<a href="demo-architecture-services.html#" class="fs-22 d-block text-white mb-10px fw-500">Residential space</a>
<p class="interactive-banners-content-text w-95 lg-w-100">Lorem ipsum consectetur elit do eiusmod tempor incididunt.</p>
</div>
</div>
<div class="box-overlay bg-gradient-dark-transparent"></div>
</div>
</div>
<div class="swiper-slide">
<div class="interactive-banner-style-06">
<div class="interactive-banners-image">
<img src="images/demo-architecture-home-06.jpg" alt />
<div class="overlay-bg bg-gradient-dark-transparent opacity-light"></div>
<a href="demo-architecture-services.html#" class="banners-icon icon-hover-base-color text-white position-absolute top-60px left-60px md-top-30px md-left-30px">
<i class="line-icon-Full-View icon-large"></i>
</a>
</div>
<div class="interactive-banners-content p-60px md-p-30px">
<div class="h-100 w-100 last-paragraph-no-margin">
<a href="demo-architecture-services.html#" class="fs-22 d-block text-white mb-10px fw-500">Interior design</a>
<p class="interactive-banners-content-text w-95 lg-w-100">Lorem ipsum consectetur elit do eiusmod tempor incididunt.</p>
</div>
</div>
<div class="box-overlay bg-gradient-dark-transparent"></div>
</div>
</div>
<div class="swiper-slide">
<div class="interactive-banner-style-06">
<div class="interactive-banners-image">
<img src="images/demo-architecture-home-07.jpg" alt />
<div class="overlay-bg bg-gradient-dark-transparent opacity-light"></div>
<a href="demo-architecture-services.html#" class="banners-icon icon-hover-base-color text-white position-absolute top-60px left-60px md-top-30px md-left-30px">
<i class="line-icon-Duplicate-Layer icon-large"></i>
</a>
</div>
<div class="interactive-banners-content p-60px md-p-30px">
<div class="h-100 w-100 last-paragraph-no-margin">
<a href="demo-architecture-services.html#" class="fs-22 d-block text-white mb-10px fw-500">Exterior planning</a>
<p class="interactive-banners-content-text w-95 lg-w-100">Lorem ipsum consectetur elit do eiusmod tempor incididunt.</p>
</div>
</div>
<div class="box-overlay bg-gradient-dark-transparent"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="bg-nero-grey background-position-center-top" style="background-image: url('images/demo-architecture-dotted-pattern.svg')">
<div class="container">
<div class="row row-cols-1 row-cols-md-3 row-cols-sm-2 align-items-center justify-content-center" data-anime="{ "el": "childs", "translateX": [0, 0], "opacity": [0,1], "duration": 800, "delay": 200, "staggervalue": 300, "easing": "easeOutQuad" }">
<div class="col border-end xs-border-end-0 border-color-transparent-white-light sm-mb-40px">
<div class="d-flex flex-column flex-lg-row justify-content-center align-items-center g-0 text-center text-lg-start">
<div class="flex-shrink-0 me-15px md-me-0">
<h2 class="mb-0 text-white fw-600">99<sup class="fs-30">%</sup></h2>
</div>
<div>
<span class="fs-18 lh-26 d-block fw-500">Track and analyze <br/>business reports.</span>
</div>
</div>
</div>
<div class="col border-end sm-border-end-0 border-color-transparent-white-light sm-mb-40px">
<div class="d-flex flex-column flex-lg-row justify-content-center align-items-center g-0 text-center text-lg-start">
<div class="flex-shrink-0 me-15px md-me-0">
<h2 class="mb-0 text-white fw-600">4.98</h2>
</div>
<div>
<div class="fs-18 lh-32 ls-2px text-base-color">
<i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i>
</div>
<span class="d-block fs-18 lh-26 fw-500">Best rated agency</span>
</div>
</div>
</div>
<div class="col">
<div class="d-flex flex-column flex-lg-row justify-content-center align-items-center g-0 text-center text-lg-start">
<div class="flex-shrink-0 me-15px md-me-0">
<h2 class="mb-0 text-white fw-600">98<sup class="fs-30">%</sup></h2>
</div>
<div>
<span class="fs-18 lh-26 d-block fw-500">Genuine repeated <br/>happy customers.</span>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="bg-dark-gray background-position-center-top position-relative" style="background-image: url('images/demo-architecture-dotted-pattern.svg')">
<div class="container">
<div class="row mb-10 md-mb-18 xs-mb-25 align-items-start">
<div class="col-xl-7 col-lg-8 md-mb-50px">
<h6 class="text-white mb-40px xs-mb-25px" data-anime="{ "translateY": [30, 0], "opacity": [0,1], "duration": 600, "delay": 0, "staggervalue": 150, "easing": "easeOutQuad" }">Our small size enables us to service our clients closely and gives us the flexibility to adapt to changing scenarios in the design world.</h6>
<div class="row row-cols-1 row-cols-sm-3">
<div class="col">
<ul class="p-0 m-0 list-style-02" data-anime="{ "el": "childs", "translateY": [30, 0], "opacity": [0,1], "duration": 800, "delay": 0, "staggervalue": 150, "easing": "easeOutQuad" }">
<li class="pb-5px"><i class="fa-solid fa-plus fs-12 me-10px"></i>Structural design</li>
<li class="pb-5px"><i class="fa-solid fa-plus fs-12 me-10px"></i>Landscape design</li>
<li class="pb-5px"><i class="fa-solid fa-plus fs-12 me-10px"></i>Architectural</li>
<li class="pb-5px"><i class="fa-solid fa-plus fs-12 me-10px"></i>Space planning</li>
</ul>
</div>
<div class="col">
<ul class="p-0 m-0 list-style-02" data-anime="{ "el": "childs", "translateY": [30, 0], "opacity": [0,1], "duration": 800, "delay": 0, "staggervalue": 150, "easing": "easeOutQuad" }">
<li class="pb-5px"><i class="fa-solid fa-plus fs-12 me-10px"></i>Building design</li>
<li class="pb-5px"><i class="fa-solid fa-plus fs-12 me-10px"></i>Facility optimization</li>
<li class="pb-5px"><i class="fa-solid fa-plus fs-12 me-10px"></i>Innovative design</li>
<li class="pb-5px"><i class="fa-solid fa-plus fs-12 me-10px"></i>Residential</li>
</ul>
</div>
<div class="col">
<ul class="p-0 m-0 list-style-02" data-anime="{ "el": "childs", "translateY": [30, 0], "opacity": [0,1], "duration": 800, "delay": 0, "staggervalue": 150, "easing": "easeOutQuad" }">
<li class="pb-5px"><i class="fa-solid fa-plus fs-12 me-10px"></i>Interior design</li>
<li class="pb-5px"><i class="fa-solid fa-plus fs-12 me-10px"></i>Space utilization</li>
<li class="pb-5px"><i class="fa-solid fa-plus fs-12 me-10px"></i>Contractor bidding</li>
<li class="pb-5px"><i class="fa-solid fa-plus fs-12 me-10px"></i>Technological design</li>
</ul>
</div>
</div>
</div>
<div class="col-lg-4 offset-xl-1 position-relative">
<div class="w-80 lg-w-85 mt-minus-20px float-end" data-animation-delay="200" data-shadow-animation="true">
<img class="md-w-100" src="images/demo-architecture-about-08.jpg" alt />
</div>
<div class="w-50 position-absolute left-15px bottom-10px lg-bottom-minus-50px" data-shadow-animation="true" data-animation-delay="300" data-parallax-layout-ratio="1.2">
<img src="images/demo-architecture-about-01.jpg" alt class="box-shadow-quadruple-large" />
</div>
</div>
</div>
</div>
<div class="position-absolute bottom-minus-50px lg-bottom-minus-40px md-bottom-minus-25px sm-bottom-minus-20px xs-bottom-minus-10px left-0px right-0px text-center w-100 fs-200 lg-fs-160 md-fs-140 sm-fs-120 xs-fs-90 fw-600 text-nero-grey ls-minus-4px">architecture</div>
</section>
<footer class="bg-nero-grey pb-0 pt-4 md-pt-6 sm-pt-9 xs-pt-11 background-position-center-top" style="background-image: url('images/demo-architecture-dotted-pattern.svg')">
<div class="container">
<div class="row align-items-center mb-3 md-mb-5 xs-mb-8">
<div class="col-sm-10 text-center text-sm-start order-2 order-sm-1">
<h6 class="fw-400 d-inline-block align-middle mb-0">Let's build something <span class="text-white">great together</span></h6>
<div class="separator-line-1px d-none d-sm-inline-block align-middle ms-20px me-20px lg-ms-10px lg-me-10px mt-5px w-70px lg-w-50px bg-base-color"></div>
<a href="cdn-cgi/l/email-protection.html#9ef6fbf2f2f1defdecfff8eaf1b0fdf1f3" class="text-base-color fs-26 fw-500 d-inline-block align-middle"><span class="__cf_email__" data-cfemail="adc5c8c1c1c2edcedfcccbd9c283cec2c0">[email protected]</span></a>
</div>
<div class="col-sm-2 text-center text-sm-end order-1 order-sm-2 xs-mb-15px">
<a href="demo-architecture.html" class="footer-logo d-inline-block"><img src="images/demo-architecture-footer-logo.png" data-at2x="images/demo-architecture-footer-logo@2x.png" alt></a>
</div>
</div>
<div class="row align-items-end mb-6 xs-mb-9">
<div class="col-lg-3 col-sm-6 last-paragraph-no-margin text-center text-sm-start md-mb-30px">
<span class="text-white d-block fs-12 fw-600 ls-2px text-uppercase">Crafto - London</span>
<p class="w-80 lg-w-95 md-w-70 sm-w-85 xs-mx-auto text-medium-gray fs-15 lh-28">401 Broadway, 24th floor, Orchard view, London, UK</p>
</div>
<div class="col-lg-3 col-sm-6 last-paragraph-no-margin text-center text-sm-start md-mb-30px">
<span class="text-white d-block fs-12 fw-600 ls-2px text-uppercase">Crafto - France</span>
<p class="w-80 lg-w-95 md-w-70 sm-w-85 xs-mx-auto text-medium-gray fs-15 lh-28">27 Eden walk eden centre, Orchard view, Paris, France</p>
</div>
<div class="col-lg-3 col-sm-6 last-paragraph-no-margin text-center text-sm-start xs-mb-30px">
<span class="text-white d-block fs-12 fw-600 ls-2px text-uppercase">Crafto - Switzerland</span>
<p class="w-80 lg-w-95 md-w-70 sm-w-85 xs-mx-auto text-medium-gray fs-15 lh-28">701 Sondanella, 24th floor, Gunsberg, Switzerland</p>
</div>
<div class="col-lg-3 col-sm-6 last-paragraph-no-margin ms-auto text-center text-sm-start text-lg-end fs-19">
<a href="tel:1235678901" class="text-white">+ 123 567 8901</a><br>
<a href="cdn-cgi/l/email-protection.html#4a23242c250a2e25272b232464292527" class="text-white fw-500 text-decoration-line-bottom"><span class="__cf_email__" data-cfemail="ddb4b3bbb29db9b2b0bcb4b3f3beb2b0">[email protected]</span></a>
</div>
</div>
</div>
<div class="footer-bottom p-20px border-top border-color-transparent-white-light">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-7 text-center text-lg-start md-mb-10px">
<ul class="footer-navbar fs-15 lh-normal">
<li class="nav-item active"><a href="demo-architecture.html" class="nav-link">Home</a></li>
<li class="nav-item"><a href="demo-architecture-about.html" class="nav-link">About</a></li>
<li class="nav-item"><a href="demo-architecture-services.html" class="nav-link">Services</a></li>
<li class="nav-item"><a href="demo-architecture-projects.html" class="nav-link">Projects</a></li>
<li class="nav-item"><a href="demo-architecture-contact.html" class="nav-link">Contact</a></li>
</ul>
</div>
<div class="col-lg-5 text-center text-lg-end">
<span class="fs-15">© 2024 Crafto is Proudly Powered by <a href="https://www.themezaa.com/" target="_blank" class="text-decoration-line-bottom text-white">ThemeZaa</a></span>
</div>
</div>
</div>
</div>
</footer>
<div class="scroll-progress d-none d-xxl-block">
<a href="demo-architecture-services.html#" class="scroll-top" aria-label="scroll">
<span class="scroll-text">Scroll</span><span class="scroll-line"><span class="scroll-point"></span></span>
</a>
</div>
<script data-cfasync="false" src="cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script><script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/vendors.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>