Access_New/pages/element-contact-form.html
2024-09-05 11:33:27 +05:45

1053 lines
60 KiB
HTML
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!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" />
</head>
<body data-mobile-nav-style="classic">
<header>
<nav class="navbar navbar-expand-lg header-light header-reverse header-demo" data-header-hover="light">
<div class="container-fluid">
<div class="col-auto col-lg-2 me-lg-0 me-auto">
<a class="navbar-brand" href="index.html">
<img src="images/logo-black.png" data-at2x="images/logo-black@2x.png" alt class="default-logo">
<img src="images/logo-black.png" data-at2x="images/logo-black@2x.png" alt class="alt-logo">
<img src="images/logo-black.png" data-at2x="images/logo-black@2x.png" alt class="mobile-logo">
</a>
</div>
<div class="col-auto col-lg-8 menu-order position-static">
<button class="navbar-toggler float-start" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-label="Toggle navigation">
<span class="navbar-toggler-line"></span>
<span class="navbar-toggler-line"></span>
<span class="navbar-toggler-line"></span>
<span class="navbar-toggler-line"></span>
</button>
<div class="collapse navbar-collapse justify-content-center" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item dropdown submenu">
<a href="javascript:void(0);" class="nav-link">Pre-Built Sites</a>
<i class="fa-solid fa-angle-down dropdown-toggle" id="navbarDropdownMenuLink1" role="button" data-bs-toggle="dropdown" aria-expanded="false"></i>
<div class="dropdown-menu submenu-content background-position-center cover-background" aria-labelledby="navbarDropdownMenuLink1" style="background-image: url('images/pre-built-sites-bg.jpg')">
<div class="d-lg-flex mega-menu m-auto">
<ul class="col">
<li><a href="demo-corporate.html" target="_blank">Corporate<span class="label bg-solitude-blue text-cornflower-blue border-radius-26px">Trendy</span></a></li>
<li><a href="demo-marketing.html" target="_blank">Marketing</a></li>
<li><a href="demo-accounting.html" target="_blank">Accounting<span class="label bg-light-red text-red border-radius-26px">Classic</span></a></li>
<li><a href="demo-beauty-salon.html" target="_blank">Beauty Salon</a></li>
<li><a href="demo-architecture.html" target="_blank">Architecture</a></li>
<li><a href="demo-ebook.html" target="_blank">eBook</a></li>
<li><a href="demo-seo-agency.html" target="_blank">SEO Agency</a></li>
<li><a href="demo-hosting.html" target="_blank">Hosting</a></li>
<li><a href="demo-consulting.html" target="_blank">Consulting</a></li>
<li><a href="demo-green-energy.html" target="_blank">Green Energy</a></li>
<li><a href="demo-business.html" target="_blank">Business</a></li>
<li><a href="demo-interactive-portfolio.html" target="_blank">Interactive Portfolio</a></li>
<li><a href="demo-spa-salon.html" target="_blank">Spa Salon<span class="label bg-light-majorelle-blue text-majorelle-blue border-radius-26px">Clean</span></a></li>
</ul>
<ul class="col">
<li><a href="demo-branding-agency.html" target="_blank">Branding Agency<span class="label bg-white-ice text-jade border-radius-26px">New</span></a></li>
<li><a href="demo-elearning.html" target="_blank">eLearning</a></li>
<li><a href="demo-it-business.html" target="_blank">IT Business<span class="label bg-light-majorelle-blue text-majorelle-blue border-radius-26px">Modern</span></a></li>
<li><a href="demo-barber.html" target="_blank">Barber</a></li>
<li><a href="demo-hotel-and-resort.html" target="_blank">Hotel & Resort</a></li>
<li><a href="demo-real-estate.html" target="_blank">Real Estate</a></li>
<li><a href="demo-jewellery-store.html" target="_blank">Jewellery Store</a></li>
<li><a href="demo-travel-agency.html" target="_blank">Travel Agency</a></li>
<li><a href="demo-gym-and-fitness.html" target="_blank">Gym & Fitness</a></li>
<li><a href="demo-logistics.html" target="_blank">Logistics</a></li>
<li><a href="demo-design-agency.html" target="_blank">Design Agency<span class="label bg-light-red text-red border-radius-26px">Creative</span></a></li>
<li><a href="demo-photography.html" target="_blank">Photography</a></li>
<li><a href="demo-pizza-parlor.html" target="_blank">Pizza Parlor</a></li>
</ul>
<ul class="col">
<li><a href="demo-restaurant.html" target="_blank">Restaurant<span class="label bg-light-red text-red border-radius-26px">Hot</span></a></li>
<li><a href="demo-scattered-portfolio.html" target="_blank">Scattered Portfolio</a></li>
<li><a href="demo-data-analysis.html" target="_blank">Data Analysis</a></li>
<li><a href="demo-medical.html" target="_blank">Medical</a></li>
<li><a href="demo-horizontal-portfolio.html" target="_blank">Horizontal Portfolio</a></li>
<li><a href="demo-product-showcase.html" target="_blank">Product Showcase<span class="label bg-solitude-blue text-cornflower-blue border-radius-26px">Trendy</span></a></li>
<li><a href="demo-finance.html" target="_blank">Finance</a></li>
<li><a href="demo-elder-care.html" target="_blank">Elder Care</a></li>
<li><a href="demo-fashion-store.html" target="_blank">Fashion Store</a></li>
<li><a href="demo-music-onepage.html" target="_blank">Music</a></li>
<li><a href="demo-vertical-portfolio.html" target="_blank">Vertical Portfolio</a></li>
<li><a href="demo-freelancer.html" target="_blank">Freelancer<span class="label bg-light-majorelle-blue text-majorelle-blue border-radius-26px">Clean</span></a></li>
<li><a href="demo-charity.html" target="_blank">Charity</a></li>
</ul>
<ul class="col">
<li><a href="demo-digital-agency.html" target="_blank">Digital Agency</a></li>
<li><a href="demo-web-agency.html" target="_blank">Web Agency<span class="label bg-white-ice text-jade border-radius-26px">Creative</span></a></li>
<li><a href="demo-yoga-and-meditation.html" target="_blank">Yoga & Meditation</a></li>
<li><a href="demo-startup.html" target="_blank">Startup</a></li>
<li><a href="demo-application.html" target="_blank">Application<span class="label bg-light-majorelle-blue text-majorelle-blue border-radius-26px">New</span></a></li>
<li><a href="demo-lawyer.html" target="_blank">Lawyer</a></li>
<li><a href="demo-cryptocurrency.html" target="_blank">Cryptocurrency</a></li>
<li><a href="demo-conference.html" target="_blank">Conference</a></li>
<li><a href="demo-minimal-portfolio.html" target="_blank">Minimal Portfolio<span class="label bg-light-red text-red border-radius-26px">Hot</span></a></li>
<li><a href="demo-decor-store.html" target="_blank">Decor Store</a></li>
<li><a href="demo-magazine.html" target="_blank">Magazine</a></li>
<li><a href="demo-blogger.html" target="_blank">Blogger</a></li>
<li><a href="demo-wedding-invitation.html" target="_blank">Wedding Invitation</a></li>
</ul>
</div>
</div>
</li>
<li class="nav-item dropdown submenu">
<a href="javascript:void(0);" class="nav-link">Pages</a>
<i class="fa-solid fa-angle-down dropdown-toggle" id="navbarDropdownMenuLink2" role="button" data-bs-toggle="dropdown" aria-expanded="false"></i>
<div class="dropdown-menu submenu-content" aria-labelledby="navbarDropdownMenuLink2">
<div class="d-lg-flex mega-menu m-auto">
<ul class="col">
<li class="sub-title">About Pages</li>
<li><a href="demo-branding-agency-about.html" target="_blank">About - Branding<span class="label bg-light-red text-red border-radius-26px">Hot</span></a></li>
<li><a href="demo-restaurant-about.html" target="_blank">About - Restaurant</a></li>
<li><a href="demo-minimal-portfolio-about.html" target="_blank">About - Minimal</a></li>
<li><a href="demo-accounting-company.html" target="_blank">About - Accounting</a></li>
<li><a href="demo-architecture-about.html" target="_blank">About - Architecture</a></li>
<li><a href="demo-digital-agency-about.html" target="_blank">About - Digital</a></li>
<li><a href="demo-photography-about.html" target="_blank">About - Photography</a></li>
<li><a href="demo-design-agency-about.html" target="_blank">About - Agency</a></li>
<li><a href="demo-marketing-about.html" target="_blank">About - Marketing<span class="label bg-white-ice text-jade border-radius-26px">New</span></a></li>
<li><a href="demo-scattered-portfolio-about.html" target="_blank">About - Scattered</a></li>
<li><a href="demo-medical-about.html" target="_blank">About - Medical</a></li>
<li><a href="demo-web-agency-about.html" target="_blank">About - Web<span class="label bg-light-red text-red border-radius-26px">Hot</span></a></li>
<li><a href="demo-startup-who-we-are.html" target="_blank">About - Startup</a></li>
<li><a href="demo-hotel-and-resort-about-us.html" target="_blank">About - Hotel</a></li>
<li><a href="demo-elearning-about.html" target="_blank">About - eLearning<span class="label bg-solitude-blue text-cornflower-blue border-radius-26px">New</span></a></li>
</ul>
<ul class="col">
<li class="sub-title">Services Pages</li>
<li><a href="demo-accounting-services.html" target="_blank">Services - Accounting</a></li>
<li><a href="demo-marketing-services.html" target="_blank">Services - Marketing</a></li>
<li><a href="demo-branding-agency-services.html" target="_blank">Services - Branding<span class="label bg-solitude-blue text-cornflower-blue border-radius-26px">New</span></a></li>
<li><a href="demo-minimal-portfolio-expertise.html" target="_blank">Services - Minimal</a></li>
<li><a href="demo-web-agency-expertise.html" target="_blank">Services - Web</a></li>
<li><a href="demo-architecture-services.html" target="_blank">Services - Architecture</a></li>
<li><a href="demo-digital-agency-expertise.html" target="_blank">Services - Digital</a></li>
<li><a href="demo-startup-services.html" target="_blank">Services - Startup</a></li>
<li><a href="demo-scattered-portfolio-expertise.html" target="_blank">Services - Scattered</a></li>
<li><a href="demo-lawyer-practice-areas.html" target="_blank">Services - Lawyer</a></li>
<li><a href="demo-corporate-services.html" target="_blank">Services - Corporate<span class="label bg-white-ice text-jade border-radius-26px">New</span></a></li>
<li><a href="demo-data-analysis-what-we-do.html" target="_blank">Services - Data Analysis</a></li>
<li><a href="demo-marketing-services-details.html" target="_blank">Single Marketing</a></li>
<li><a href="demo-accounting-services-details.html" target="_blank">Single Accounting</a></li>
<li><a href="demo-branding-agency-services-detail.html" target="_blank">Single - Branding<span class="label bg-light-red text-red border-radius-26px">Hot</span></a></li>
</ul>
<ul class="col">
<li class="sub-title">Contact Pages</li>
<li><a href="demo-scattered-portfolio-contact.html" target="_blank">Contact - Scattered</a></li>
<li><a href="demo-branding-agency-contact.html" target="_blank">Contact - Branding<span class="label bg-solitude-blue text-cornflower-blue border-radius-26px">New</span></a></li>
<li><a href="demo-photography-contact.html" target="_blank">Contact - Photography</a></li>
<li><a href="demo-hotel-and-resort-contact.html" target="_blank">Contact - Hotel</a></li>
<li><a href="demo-spa-salon-contact.html" target="_blank">Contact - Spa</a></li>
<li><a href="demo-it-business-contact.html" target="_blank">Contact - IT Business<span class="label bg-light-red text-red border-radius-26px">Hot</span></a></li>
<li><a href="demo-architecture-contact.html" target="_blank">Contact - Architecture</a></li>
<li><a href="demo-design-agency-contact.html" target="_blank">Contact - Agency</a></li>
<li><a href="demo-marketing-contact.html" target="_blank">Contact - Marketing</a></li>
<li><a href="demo-horizontal-portfolio-contact.html" target="_blank">Contact - Portfolio</a></li>
<li><a href="demo-accounting-contact.html" target="_blank">Contact - Accounting</a></li>
<li><a href="demo-elearning-contact.html" target="_blank">Contact - eLearning</a></li>
<li><a href="demo-corporate-contact.html" target="_blank">Contact - Corporate</a></li>
<li><a href="demo-real-estate-contact.html" target="_blank">Contact - Real Estate</a></li>
<li><a href="demo-web-agency-contact.html" target="_blank">Contact - Web</a></li>
</ul>
<ul class="col">
<li class="sub-title">Other Pages</li>
<li><a href="demo-corporate-pricing.html" target="_blank">Pricing - Corporate</a></li>
<li><a href="demo-hosting-pricing.html" target="_blank">Pricing - Hosting</a></li>
<li><a href="demo-data-analysis-pricing.html" target="_blank">Pricing - Data Analysis</a></li>
<li><a href="demo-marketing-pricing.html" target="_blank">Pricing - Marketing<span class="label bg-white-ice text-jade border-radius-26px">New</span></a></li>
<li><a href="demo-consulting-process.html" target="_blank">Process - Consulting</a></li>
<li><a href="demo-accounting-process.html" target="_blank">Process - Accounting</a></li>
<li><a href="demo-startup-clients.html" target="_blank">Clients - Startup</a></li>
<li><a href="demo-business-clients.html" target="_blank">Clients - Business</a></li>
<li><a href="demo-corporate-customer-stories.html" target="_blank">Testimonials - Corporate</a></li>
<li><a href="demo-data-analysis-testimonials.html" target="_blank">Reviews - Data Analysis</a></li>
<li><a href="demo-finance-team.html" target="_blank">Team - Finance</a></li>
<li><a href="demo-marketing-team.html" target="_blank">Team - Marketing</a></li>
<li><a href="demo-web-agency-people.html" target="_blank">Team - Web<span class="label bg-light-red text-red border-radius-26px">Hot</span></a></li>
<li><a href="demo-restaurant-chefs.html" target="_blank">Chefs - Restaurant</a></li>
<li><a href="demo-pizza-parlor-chefs.html" target="_blank">Chefs - Pizza Parlor</a></li>
</ul>
<ul class="col">
<li class="sub-title">Other Pages</li>
<li><a href="demo-real-estate-agents.html" target="_blank">Agents - Real Estate</a></li>
<li><a href="demo-elearning-instructors.html" target="_blank">Instructors - eLearning</a></li>
<li><a href="demo-hotel-and-resort-amenities.html" target="_blank">Amenities - Hotel</a></li>
<li><a href="demo-medical-timetable.html" target="_blank">Timetable - Medical</a></li>
<li><a href="demo-photography-award.html" target="_blank">Award - Photography</a></li>
<li><a href="demo-decor-store-faq.html" target="_blank">FAQ - Decor Store</a></li>
<li><a href="demo-charity-causes.html" target="_blank">Causes - Charity</a></li>
<li><a href="demo-restaurant-menu.html" target="_blank">Menu - Restaurant</a></li>
<li><a href="demo-hotel-and-resort-bistro.html" target="_blank">Menu - Hotel<span class="label bg-solitude-blue text-cornflower-blue border-radius-26px">New</span></a></li>
<li><a href="demo-pizza-parlor-menu.html" target="_blank">Menu - Pizza</a></li>
<li><a href="demo-application-features.html" target="_blank">Features - Application</a></li>
<li><a href="404.html">Error 404</a></li>
<li><a href="search-result.html">Search Results</a></li>
<li><a href="maintenance.html">Maintenance</a></li>
<li><a href="coming-soon.html">Coming Soon</a></li>
</ul>
</div>
</div>
</li>
<li class="nav-item dropdown simple-dropdown">
<a href="javascript:void(0);" class="nav-link">Portfolio</a>
<i class="fa-solid fa-angle-down dropdown-toggle" id="navbarDropdownMenuLink3" role="button" data-bs-toggle="dropdown" aria-expanded="false"></i>
<ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink3">
<li class="dropdown">
<a href="javascript:void(0);">Portfolio Classic<i class="fa-solid fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li><a href="portfolio-classic-two-column.html">Classic 2 Column</a></li>
<li><a href="portfolio-classic-three-column.html">Classic 3 Column</a></li>
<li><a href="portfolio-classic-four-column.html">Classic 4 Column</a></li>
<li><a href="portfolio-classic-masonry.html">Classic Masonry</a></li>
<li><a href="portfolio-classic-metro.html">Classic Metro</a></li>
</ul>
</li>
<li class="dropdown">
<a href="javascript:void(0);">Portfolio Boxed<i class="fa-solid fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li><a href="portfolio-boxed-two-column.html">Boxed 2 Column</a></li>
<li><a href="portfolio-boxed-three-column.html">Boxed 3 Column</a></li>
<li><a href="portfolio-boxed-four-column.html">Boxed 4 Column</a></li>
<li><a href="portfolio-boxed-masonry.html">Boxed Masonry</a></li>
<li><a href="portfolio-boxed-metro.html">Boxed Metro</a></li>
</ul>
</li>
<li class="dropdown">
<a href="javascript:void(0);">Portfolio Transform<i class="fa-solid fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li><a href="portfolio-transform-two-column.html">Transform 2 Column</a></li>
<li><a href="portfolio-transform-three-column.html">Transform 3 Column</a></li>
<li><a href="portfolio-transform-four-column.html">Transform 4 Column</a></li>
<li><a href="portfolio-transform-masonry.html">Transform Masonry</a></li>
<li><a href="portfolio-transform-metro.html">Transform Metro</a></li>
</ul>
</li>
<li class="dropdown">
<a href="javascript:void(0);">Portfolio Creative<i class="fa-solid fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li><a href="portfolio-creative-two-column.html">Creative 2 Column</a></li>
<li><a href="portfolio-creative-three-column.html">Creative 3 Column</a></li>
<li><a href="portfolio-creative-four-column.html">Creative 4 Column</a></li>
<li><a href="portfolio-creative-masonry.html">Creative Masonry</a></li>
<li><a href="portfolio-creative-metro.html">Creative Metro</a></li>
</ul>
</li>
<li class="dropdown">
<a href="javascript:void(0);">Portfolio Attractive<i class="fa-solid fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li><a href="portfolio-attractive-two-column.html">Attractive 2 Column</a></li>
<li><a href="portfolio-attractive-three-column.html">Attractive 3 Column</a></li>
<li><a href="portfolio-attractive-four-column.html">Attractive 4 Column</a></li>
<li><a href="portfolio-attractive-masonry.html">Attractive Masonry</a></li>
<li><a href="portfolio-attractive-metro.html">Attractive Metro</a></li>
</ul>
</li>
<li class="dropdown">
<a href="javascript:void(0);">Portfolio Clean<i class="fa-solid fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li><a href="portfolio-clean-two-column.html">Clean 2 Column</a></li>
<li><a href="portfolio-clean-three-column.html">Clean 3 Column</a></li>
<li><a href="portfolio-clean-four-column.html">Clean 4 Column</a></li>
<li><a href="portfolio-clean-masonry.html">Clean Masonry</a></li>
<li><a href="portfolio-clean-metro.html">Clean Metro</a></li>
</ul>
</li>
<li class="dropdown">
<a href="javascript:void(0);">Portfolio Simple<i class="fa-solid fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li><a href="portfolio-simple-two-column.html">Simple 2 Column</a></li>
<li><a href="portfolio-simple-three-column.html">Simple 3 Column</a></li>
<li><a href="portfolio-simple-four-column.html">Simple 4 Column</a></li>
<li><a href="portfolio-simple-masonry.html">Simple Masonry</a></li>
<li><a href="portfolio-simple-metro.html">Simple Metro</a></li>
</ul>
</li>
<li class="dropdown">
<a href="javascript:void(0);">Portfolio Modern<i class="fa-solid fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li><a href="portfolio-modern-two-column.html">Modern 2 Column</a></li>
<li><a href="portfolio-modern-three-column.html">Modern 3 Column</a></li>
<li><a href="portfolio-modern-four-column.html">Modern 4 Column</a></li>
<li><a href="portfolio-modern-masonry.html">Modern Masonry</a></li>
<li><a href="portfolio-modern-metro.html">Modern Metro</a></li>
</ul>
</li>
<li class="dropdown">
<a href="javascript:void(0);">Portfolio Other<i class="fa-solid fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li><a href="portfolio-slider.html">Portfolio Slider</a></li>
<li><a href="portfolio-parallax.html">Portfolio Parallax</a></li>
<li><a href="portfolio-justified-gallery.html">Justified Gallery</a></li>
</ul>
</li>
<li class="dropdown">
<a href="javascript:void(0);">Single Project<i class="fa-solid fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li><a href="demo-digital-agency-single-project-minimal.html" target="_blank">Single - Minimal</a></li>
<li><a href="demo-branding-agency-single-project-slider.html" target="_blank">Single - Slider</a></li>
<li><a href="demo-architecture-single-project-gallery.html" target="_blank">Single - Gallery</a></li>
<li><a href="demo-interactive-portfolio-single-project-modern.html" target="_blank">Single - Modern</a></li>
<li><a href="demo-design-agency-single-project-simple.html" target="_blank">Single - Simple</a></li>
<li><a href="demo-web-agency-single-project-creative.html" target="_blank">Single - Creative</a></li>
</ul>
</li>
</ul>
</li>
<li class="nav-item dropdown submenu">
<a href="javascript:void(0);" class="nav-link">Elements</a>
<i class="fa-solid fa-angle-down dropdown-toggle" id="navbarDropdownMenuLink4" role="button" data-bs-toggle="dropdown" aria-expanded="false"></i>
<div class="dropdown-menu submenu-content" aria-labelledby="navbarDropdownMenuLink4">
<div class="d-lg-flex mega-menu m-auto">
<ul class="col">
<li><a href="element-accordion.html">Accordion</a></li>
<li><a href="element-buttons.html">Button</a></li>
<li><a href="element-team.html">Team</a></li>
<li><a href="element-testimonials.html">Testimonials<span class="label bg-white-ice text-jade border-radius-26px">New</span></a></li>
<li><a href="element-clients.html">Clients</a></li>
<li><a href="element-review.html">Review</a></li>
<li><a href="element-subscribe.html">Subscribe</a></li>
<li><a href="element-call-to-action.html">Call to Action</a></li>
<li><a href="element-tab.html">Tab<span class="label bg-light-red text-red border-radius-26px">Hot</span></a></li>
<li><a href="element-google-map.html">Google Map<span class="label bg-solitude-blue text-cornflower-blue border-radius-26px">New</span></a></li>
<li><a href="element-contact-form.html">Contact Form</a></li>
<li><a href="element-columns.html">Columns</a></li>
<li><a href="element-alert-boxes.html">Alert Boxes</a></li>
<li><a href="element-image-gallery.html">Image Gallery</a></li>
</ul>
<ul class="col">
<li><a href="element-progress-bar.html">Progress Bar</a></li>
<li><a href="element-process-step.html">Process Step<span class="label bg-white-ice text-jade border-radius-26px">New</span></a></li>
<li><a href="element-icon-with-text.html">Icon with Text<span class="label bg-light-red text-red border-radius-26px">Hot</span></a></li>
<li><a href="element-shape-dividers.html">Shape Dividers</a></li>
<li><a href="element-counters.html">Counters</a></li>
<li><a href="element-countdown.html">Countdown</a></li>
<li><a href="element-fancy-text-box.html">Fancy Text Box</a></li>
<li><a href="element-heading.html">Heading</a></li>
<li><a href="element-dropcaps.html">Dropcaps</a></li>
<li><a href="element-blockquote.html">Blockquote</a></li>
<li><a href="element-highlights.html">Highlights</a></li>
<li><a href="element-lists.html">Lists</a></li>
<li><a href="element-social-icons.html">Social Icons</a></li>
<li><a href="element-pricing-table.html">Pricing Table</a></li>
</ul>
<ul class="col">
<li><a href="element-interactive-banners.html">Interactive Banners</a></li>
<li><a href="element-services-box.html">Services Box</a></li>
<li><a href="element-rotate-box.html">Rotate Box<span class="label bg-solitude-blue text-cornflower-blue border-radius-26px">New</span></a></li>
<li><a href="element-instagram.html">Instagram</a></li>
<li><a href="element-parallax-scrolling.html">Parallax Scrolling</a></li>
<li><a href="element-sliding-box.html">Sliding Box<span class="label bg-white-ice text-jade border-radius-26px">New</span></a></li>
<li><a href="element-content-carousel.html">Content Carousel</a></li>
<li><a href="element-media.html">Media</a></li>
<li><a href="element-event.html">Event</a></li>
<li><a href="element-dividers.html">Dividers</a></li>
<li><a href="element-horizontal-list-item.html">Horizontal List Item</a></li>
<li><a href="element-banners.html">Banners</a></li>
<li><a href="element-carousel.html">Carousel</a></li>
<li><a href="element-tilt-effect.html">Tilt Effect<span class="label bg-light-red text-red border-radius-26px">Hot</span></a></li>
</ul>
<ul class="col premium-element cover-background" style="background-image: url('images/premium-elements-bg.jpg')">
<li class="sub-title">Premium Elements</li>
<li><a href="element-adaptive-backgrounds.html">Adaptive Backgrounds</a></li>
<li><a href="element-sticky-column.html">Sticky Column</a></li>
<li><a href="element-3d-parallax-hover.html">3D Parallax Hover</a></li>
<li><a href="demo-restaurant.html" target="_blank">Custom Cursor</a></li>
<li><a href="element-animated-particles.html">Animated Particles</a></li>
<li><a href="element-marquee.html">Marquee</a></li>
<li><a href="element-fancy-heading.html">Fancy Heading</a></li>
<li><a href="element-fancy-images.html">Fancy Images</a></li>
<li><a href="element-scrolling-effects.html">Scrolling Effects</a></li>
</ul>
</div>
</div>
</li>
<li class="nav-item dropdown simple-dropdown">
<a href="javascript:void(0);" class="nav-link">Features</a>
<i class="fa-solid fa-angle-down dropdown-toggle" id="navbarDropdownMenuLink5" role="button" data-bs-toggle="dropdown" aria-expanded="false"></i>
<ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink5">
<li class="dropdown">
<a href="javascript:void(0);">Header<i class="fa-solid fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li><a href="demo-business.html" target="_blank">Transparent Header</a></li>
<li><a href="demo-corporate.html" target="_blank">White Header</a></li>
<li><a href="header-dark.html" target="_blank">Dark Header</a></li>
<li><a href="demo-digital-agency.html" target="_blank">Left Navigation</a></li>
<li><a href="demo-branding-agency.html" target="_blank">Right Navigation</a></li>
<li><a href="demo-restaurant.html" target="_blank">Center Navigation</a></li>
<li><a href="demo-data-analysis.html" target="_blank">Header with Top Bar</a></li>
<li><a href="demo-startup.html" target="_blank">Header with Push</a></li>
<li><a href="demo-pizza-parlor.html" target="_blank">Center Logo</a></li>
<li><a href="header-top-logo.html" target="_blank">Top Logo</a></li>
<li><a href="demo-ebook.html" target="_blank">One Page Navigation</a></li>
<li><a href="header-mini.html" target="_blank">Mini Header</a></li>
<li><a href="demo-seo-agency.html" target="_blank">Header with Button</a></li>
<li><a href="demo-marketing.html" target="_blank">Header with Social</a></li>
<li class="dropdown">
<a href="javascript:void(0);">Left Menu<i class="fa-solid fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li><a href="header-left-menu-simple.html" target="_blank">Left Menu Simple</a></li>
<li><a href="demo-minimal-portfolio.html" target="_blank">Left Menu Modern</a></li>
</ul>
</li>
<li class="dropdown">
<a href="javascript:void(0);">Hamburger Menu<i class="fa-solid fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li><a href="demo-photography.html" target="_blank">Hamburger Simple</a></li>
<li><a href="demo-architecture.html" target="_blank">Hamburger Creative</a></li>
<li><a href="demo-freelancer.html" target="_blank">Hamburger Clean</a></li>
<li><a href="demo-gym-and-fitness.html" target="_blank">Hamburger Modern</a></li>
</ul>
</li>
<li class="dropdown">
<a href="javascript:void(0);">Header Type<i class="fa-solid fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li><a href="header-always-fixed.html" target="_blank">Always Fixed</a></li>
<li><a href="demo-application.html" target="_blank">Disable Fixed</a></li>
<li><a href="demo-seo-agency.html" target="_blank">Reverse Auto</a></li>
<li><a href="demo-elder-care.html" target="_blank">Reverse Back Scroll</a></li>
<li><a href="demo-accounting.html" target="_blank">Responsive Sticky</a></li>
</ul>
</li>
<li class="dropdown">
<a href="javascript:void(0);">Mobile Menu<i class="fa-solid fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li><a href="demo-startup.html" target="_blank">Classic</a></li>
<li><a href="demo-yoga-and-meditation.html" target="_blank">Modern</a></li>
<li><a href="demo-scattered-portfolio.html" target="_blank">Full Screen</a></li>
</ul>
</li>
</ul>
</li>
<li class="dropdown">
<a href="javascript:void(0);">Lightbox & Modal<i class="fa-solid fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li><a href="modal-simple.html">Simple Modal</a></li>
<li><a href="modal-subscription.html">Subscription</a></li>
<li><a href="modal-contact-form.html">Contact Form</a></li>
<li><a href="modal-youtube-video.html">Youtube Video</a></li>
<li><a href="modal-vimeo-video.html">Vimeo Video</a></li>
<li><a href="modal-google-map.html">Google Map</a></li>
</ul>
</li>
<li class="dropdown">
<a href="javascript:void(0);">Icon Packs<i class="fa-solid fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li><a href="icon-packs-icons-mind-line.html">Icons Mind Line</a></li>
<li><a href="icon-packs-feather.html">Feather</a></li>
<li><a href="icon-packs-font-awesome.html">Font Awesome</a></li>
<li><a href="icon-packs-themify.html">Themify</a></li>
<li><a href="icon-packs-bootstrap.html">Bootstrap</a></li>
</ul>
</li>
<li class="dropdown">
<a href="javascript:void(0);">Sliders<i class="fa-solid fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li><a href="demo-architecture.html" target="_blank">Revolution</a></li>
<li><a href="demo-startup.html" target="_blank">Swiper</a></li>
</ul>
</li>
<li class="dropdown">
<a href="animations.html">Animations</a>
</li>
<li class="dropdown">
<a href="demo-minimal-portfolio.html" target="_blank">Page Preloader</a>
</li>
<li class="dropdown">
<a href="demo-jewellery-store.html" target="_blank">Cookie Notify</a>
</li>
<li class="dropdown">
<a href="demo-startup.html" target="_blank">Back to Top</a>
</li>
<li class="dropdown">
<a href="demo-design-agency.html" target="_blank">Sticky Footer</a>
</li>
</ul>
</li>
<li class="nav-item dropdown simple-dropdown">
<a href="javascript:void(0);" class="nav-link">Blog</a>
<i class="fa-solid fa-angle-down dropdown-toggle" id="navbarDropdownMenuLink6" role="button" data-bs-toggle="dropdown" aria-expanded="false"></i>
<ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink6">
<li class="dropdown"><a href="blog-grid.html">Blog Grid</a></li>
<li class="dropdown"><a href="blog-classic.html">Blog Classic</a></li>
<li class="dropdown"><a href="blog-metro.html">Blog Metro</a></li>
<li class="dropdown"><a href="blog-masonry.html">Blog Masonry</a></li>
<li class="dropdown"><a href="blog-simple.html">Blog Simple</a></li>
<li class="dropdown"><a href="blog-date.html">Blog Date</a></li>
<li class="dropdown"><a href="blog-only-text.html">Blog Only Text</a></li>
<li class="dropdown"><a href="blog-side-image.html">Blog Side Image</a></li>
<li class="dropdown"><a href="blog-modern.html">Blog Modern</a></li>
<li class="dropdown"><a href="blog-standard.html">Blog Standard</a></li>
<li class="dropdown">
<a href="javascript:void(0);">Single Post<i class="fa-solid fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li><a href="demo-business-blog-single-modern.html" target="_blank">Single - Modern</a></li>
<li><a href="demo-elearning-blog-single-simple.html" target="_blank">Single - Simple</a></li>
<li><a href="demo-web-agency-blog-single-creative.html" target="_blank">Single - Creative</a></li>
<li><a href="demo-blogger-blog-single-classic.html" target="_blank">Single - Classic</a></li>
<li><a href="demo-architecture-blog-single-clean.html" target="_blank">Single - Clean</a></li>
</ul>
</li>
<li class="dropdown">
<a href="javascript:void(0);">Post Type<i class="fa-solid fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li><a href="blog-post-type-standard.html">Post - Standard</a></li>
<li><a href="blog-post-type-gallery.html">Post - Gallery</a></li>
<li><a href="blog-post-type-slider.html">Post - Slider</a></li>
<li><a href="blog-post-type-audio.html">Post - Audio</a></li>
<li><a href="blog-post-type-video.html">Post - Video</a></li>
<li><a href="blog-post-type-blockquote.html">Post - Blockquote</a></li>
</ul>
</li>
</ul>
</li>
<li class="nav-item dropdown submenu">
<a href="javascript:void(0);" class="nav-link">Shop</a>
<i class="fa-solid fa-angle-down dropdown-toggle" id="navbarDropdownMenuLink7" role="button" data-bs-toggle="dropdown" aria-expanded="false"></i>
<div class="dropdown-menu submenu-content" aria-labelledby="navbarDropdownMenuLink7">
<div class="d-lg-flex mega-menu m-auto">
<ul class="col">
<li class="sub-title">Shop Layout</li>
<li><a href="demo-fashion-store-shop.html" target="_blank">Left Sidebar</a></li>
<li><a href="demo-fashion-store-right-sidebar.html" target="_blank">Right Sidebar</a></li>
<li><a href="demo-fashion-store-no-sidebar.html" target="_blank">No Sidebar</a></li>
<li><a href="demo-decor-store-collections.html" target="_blank">Collections - Style 01</a></li>
<li><a href="demo-jewellery-store-categories.html" target="_blank">Collections - Style 02</a></li>
<li><a href="demo-fashion-store-collection.html" target="_blank">Collections - Style 03</a></li>
<li><a href="demo-fashion-store-single-product.html" target="_blank">Single Product - Thumb Left</a></li>
<li><a href="demo-decor-store-single-product.html" target="_blank">Single Product - Thumb Bottom</a></li>
</ul>
<ul class="col">
<li class="sub-title">Utility Pages</li>
<li><a href="demo-decor-store-cart.html" target="_blank">Shopping Cart</a></li>
<li><a href="demo-decor-store-checkout.html" target="_blank">Checkout</a></li>
<li><a href="demo-decor-store-account.html" target="_blank">Login / Register</a></li>
<li><a href="demo-decor-store-faq.html" target="_blank">Help Center</a></li>
<li><a href="demo-fashion-store-wishlist.html" target="_blank">Wishlist</a></li>
</ul>
<ul class="col">
<li class="sub-title"><a href="index.html" target="_blank" class="p-0"><img src="images/banner-02.jpg" alt /></a></li>
</ul>
<ul class="col">
<li class="sub-title"><a href="index.html" target="_blank" class="p-0"><img src="images/banner-01.jpg" alt /></a></li>
</ul>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="col-auto col-lg-2 text-end xs-pe-0">
<div class="header-icon">
<div class="header-button">
<a href="https://1.envato.market/R53mL2" target="_blank" class="btn btn-dark-gray btn-small btn-switch-text btn-rounded text-transform-none btn-box-shadow purchase-envato">
<span>
<span class="btn-double-text" data-text="Purchase Crafto">Purchase Crafto</span>
</span>
</a>
</div>
</div>
</div>
</div>
</nav>
</header>
<section class="ipad-top-space-margin md-pt-0">
<div class="container">
<div class="row align-items-center justify-content-center">
<div class="col-12 col-xl-6 col-lg-8 text-center position-relative page-title-double-large">
<div class="d-flex flex-column justify-content-center extra-very-small-screen">
<h1 class="text-dark-gray alt-font ls-minus-1px fw-700 mb-20px">Contact form</h1>
<h2 class="text-dark-gray d-inline-block fw-400 ls-0px mb-0">Contact form is essential website component allowing users to send messages, inquiries, or feedback conveniently.</h2>
</div>
<div class="mt-auto justify-content-center breadcrumb breadcrumb-style-01 fs-14 text-dark-gray">
<ul>
<li><a href="index.html" class="text-dark-gray text-dark-gray-hover">Home</a></li>
<li><a href="element-contact-form.html#" class="text-dark-gray text-dark-gray-hover">Elements</a></li>
<li>Contact form</li>
</ul>
</div>
</div>
</div>
</div>
</section>
<section class="big-section bg-gradient-very-light-gray">
<div class="container">
<div class="row g-0 justify-content-center">
<div class="col-lg-3 col-md-6" data-anime="{ &quot;translateX&quot;: [-15, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 600, &quot;delay&quot;: 100, &quot;staggervalue&quot;: 300, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<div class="h-100 sm-h-500px xs-h-400px cover-background" style="background-image: url('images/demo-business-contact-01.jpg')"></div>
</div>
<div class="col-lg-4 col-md-6" data-anime="{ &quot;translateX&quot;: [15, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 600, &quot;delay&quot;: 100, &quot;staggervalue&quot;: 300, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<div class="bg-majorelle-blue p-18 lg-p-15 h-100">
<span class="text-white text-decoration-line-bottom mb-10px d-inline-block">Keep in touch?</span>
<p class="text-white opacity-5">401 Broadway, 24th Floor, Orchard View, London</p>
<span class="text-white text-decoration-line-bottom mb-10px d-inline-block">Toll free customer care?</span>
<p><a href="tel:1800222000" class="text-white opacity-5">1-800-222-000</a><br><a href="tel:1800222002" class="text-white opacity-5">1-800-222-002</a></p>
<span class="text-white text-decoration-line-bottom mb-10px d-inline-block">Need live support?</span>
<a href="cdn-cgi/l/email-protection.html#0d64636b624d7462787f6962606c6463236e6260" class="text-white opacity-5 d-block"><span class="__cf_email__" data-cfemail="a2cbccc4cde2dbcdd7d0c6cdcfc3cbcc8cc1cdcf">[email&#160;protected]</span></a>
<a href="cdn-cgi/l/email-protection.html#eb838e879bab92849e998f84868a8285c5888486" class="text-white opacity-5 d-block"><span class="__cf_email__" data-cfemail="355d505945754c5a4047515a58545c5b1b565a58">[email&#160;protected]</span></a>
</div>
</div>
<div class="col-lg-4 offset-lg-1">
<div class="pt-5 md-pt-45px contact-form-style-01" data-anime="{ &quot;translateX&quot;: [0, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 600, &quot;delay&quot;: 300, &quot;staggervalue&quot;: 300, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<h4 class="d-inline-block fw-600 text-dark-gray ls-minus-1px mb-30px">How we can help?</h4>
<form action="email-templates/contact-form.php" method="post">
<div class="position-relative form-group mb-20px">
<span class="form-icon"><i class="bi bi-emoji-smile"></i></span>
<input type="text" name="name" class="form-control required" placeholder="Your name*">
</div>
<div class="position-relative form-group mb-20px">
<span class="form-icon"><i class="bi bi-envelope"></i></span>
<input type="email" name="email" class="form-control required" placeholder="Your email address*">
</div>
<div class="position-relative form-group form-textarea">
<span class="form-icon"><i class="bi bi-chat-square-dots"></i></span>
<textarea placeholder="Your message" name="comment" class="form-control" rows="3"></textarea>
<div class="g-recaptcha mt-20px" data-sitekey="6Lc_zD0pAAAAAO_fsba0xGWEYx46Iu9fqDegbEzY"></div>
<input type="hidden" name="redirect" value>
<button class="btn btn-small btn-round-edge btn-dark-gray btn-box-shadow mt-20px m-auto submit" type="submit">Send message</button>
<div class="form-results mt-20px d-none"></div>
</div>
</form>
</div>
</div>
</div>
</div>
</section>
<section class="position-relative bg-very-light-gray">
<div class="container" data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;opacity&quot;: [0,1], &quot;duration&quot;: 600, &quot;delay&quot;: 0, &quot;staggervalue&quot;: 300, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<div class="row mb-3">
<div class="col text-center">
<h2 class="fw-700 alt-font text-dark-gray ls-minus-2px">Book an appointment</h2>
</div>
</div>
<div class="row align-items-center justify-content-center position-relative z-index-1">
<div class="col-xl-10 col-lg-12">
<form action="email-templates/contact-form.php" method="post" class="row contact-form-style-02">
<div class="col-md-6 mb-30px">
<input class="input-name border-radius-4px border-color-white box-shadow-double-large form-control required" type="text" name="name" placeholder="Patient's full name*" />
</div>
<div class="col-md-6 mb-30px">
<input class="border-radius-4px border-color-white box-shadow-double-large form-control required" type="email" name="email" placeholder="Patient's email*" />
</div>
<div class="col-md-6 mb-30px">
<div class="date-time row gutter-small">
<div class="date-icon col-lg-6 md-mb-25px">
<input class="form-control border-radius-4px border-color-white box-shadow-double-large" type="date" name="date" value="2023-01-01" min="2023-01-01" max="2099-12-31" aria-label="date" />
</div>
<div class="time-icon col-lg-6">
<input class="form-control border-radius-4px border-color-white box-shadow-double-large" type="time" name="time" value="09:12" min="09:00" max="12:00" aria-label="time" />
</div>
</div>
</div>
<div class="col-md-6 mb-30px ">
<div class="select">
<select class="form-control border-radius-4px border-color-white box-shadow-double-large" name="select" aria-label="select-doctor">
<option value>Select doctor</option>
<option value="Pediatrician - Dr. Bryan jonhson">Pediatrician - Dr. Bryan jonhson</option>
<option value="Cardiology - Dr. Jemmy watson">Cardiology - Dr. Jemmy watson</option>
<option value="Neurology - Dr. Jeremy dupont">Neurology - Dr. Jeremy dupont</option>
<option value="Orthopedics - Dr. Evan thomson">Orthopedics - Dr. Evan thomson</option>
<option value="Optometrists - Dr. Shoko mugikura">Optometrists - Dr. Shoko mugikura</option>
</select>
</div>
</div>
<div class="col-md-12 mb-3">
<textarea class="border-radius-4px border-color-white box-shadow-double-large form-control" cols="40" rows="4" name="comment" placeholder="Your message"></textarea>
</div>
<div class="col-xl-6 col-md-7">
<p class="mb-0 fs-14 lh-26 text-center text-md-start w-90 md-w-100">We are committed to protecting your privacy. We will never collect information about you without your explicit consent.</p>
</div>
<div class="col-xl-6 col-md-5 text-center text-md-end sm-mt-20px">
<input type="hidden" name="redirect" value>
<button class="btn btn-gradient-fast-blue-purple btn-switch-text btn-large left-icon btn-round-edge submit text-transform-none" type="submit">
<span>
<span><i class="bi bi-calendar-check"></i></span>
<span class="btn-double-text" data-text="Book appointment">Book appointment</span>
</span>
</button>
</div>
<div class="col-12">
<div class="form-results mt-20px d-none"></div>
</div>
</form>
</div>
</div>
</div>
</section>
<section class="position-relative">
<div class="container">
<div class="row row-cols-md-1 justify-content-center" data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;translateX&quot;: [30, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 300, &quot;delay&quot;: 0, &quot;staggervalue&quot;: 100, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<div class="col-xxl-4 col-xl-5 col-lg-5 md-mb-30px d-flex flex-column">
<h3 class="fw-700 ls-minus-1px text-dark-gray w-85 xl-w-90 md-w-100 mb-15px">We'd love to hear from you.</h3>
<p class="w-85 xl-w-90 xs-w-100">Lorem ipsum dolor sit amet, consectetur adipiscing finibus a purus at fermentum. Praesent vitae quam sed dui.</p>
<div class="icon-with-text-style-01 feature-box feature-box-left-icon-middle last-paragraph-no-margin mt-auto">
<div class="feature-box-icon me-15px">
<img src="images/demo-magazine-contact-03.jpg" alt>
</div>
<div class="feature-box-content">
<span class="text-dark-gray fs-19 fw-600 d-block">Call us directly</span>
<span>+1 234 567 8910</span>
</div>
</div>
</div>
<div class="col-lg-7 offset-xxl-1">
<form action="email-templates/contact-form.php" method="post" class="contact-form-style-03">
<div class="row justify-content-center">
<div class="col-md-6 xs-mb-30px">
<label for="exampleInputEmail1" class="form-label fw-700 text-dark-gray text-uppercase fs-13 ls-05px mb-0">Enter your name*</label>
<div class="position-relative form-group mb-25px xs-mb-0">
<span class="form-icon"><i class="bi bi-emoji-smile text-dark-gray"></i></span>
<input class="ps-0 border-radius-0px border-color-dark-gray bg-transparent form-control required" id="exampleInputEmail1" type="text" name="name" placeholder="What's your good name?" />
</div>
</div>
<div class="col-md-6 xs-mb-30px">
<label for="exampleInputEmail1" class="form-label fw-700 text-dark-gray text-uppercase fs-13 ls-05px mb-0">Phone number</label>
<div class="position-relative form-group mb-25px xs-mb-0">
<span class="form-icon"><i class="bi bi-telephone text-dark-gray"></i></span>
<input class="ps-0 border-radius-0px border-color-dark-gray bg-transparent form-control" id="exampleInputEmail2" type="tel" name="phone" placeholder="Enter your phone number" />
</div>
</div>
<div class="col-md-6 xs-mb-30px">
<label for="exampleInputEmail1" class="form-label fw-700 text-dark-gray text-uppercase fs-13 ls-05px mb-0">Email address*</label>
<div class="position-relative form-group mb-25px xs-mb-0">
<span class="form-icon"><i class="bi bi-envelope text-dark-gray"></i></span>
<input class="ps-0 border-radius-0px border-color-dark-gray bg-transparent form-control required" id="exampleInputEmail3" type="email" name="email" placeholder="Enter your email address" />
</div>
</div>
<div class="col-md-6 xs-mb-30px">
<label for="exampleInputEmail1" class="form-label fw-700 text-dark-gray text-uppercase fs-13 ls-05px mb-0">Subject</label>
<div class="position-relative form-group mb-25px xs-mb-0">
<span class="form-icon"><i class="bi bi-journals text-dark-gray"></i></span>
<input class="ps-0 border-radius-0px border-color-dark-gray bg-transparent form-control" id="exampleInputEmail4" type="text" name="subject" placeholder="How can we help you?" />
</div>
</div>
<div class="col-12 mb-4 xs-mb-30px">
<label for="exampleInputEmail1" class="form-label fw-700 text-dark-gray text-uppercase fs-13 ls-05px mb-0">Your message</label>
<div class="position-relative form-group form-textarea mb-0">
<textarea class="ps-0 border-radius-0px border-color-dark-gray bg-transparent form-control" name="comment" placeholder="Describe about your project" rows="4"></textarea>
<span class="form-icon"><i class="bi bi-chat-square-dots text-dark-gray"></i></span>
</div>
</div>
<div class="col-xl-6 col-md-7 col-sm-10">
<p class="mb-0 fs-14 lh-24 text-center text-md-start">We will never collect information about you without your explicit consent.</p>
</div>
<div class="col-xl-6 col-md-5 text-center text-md-end sm-mt-25px">
<input id="exampleInputEmail5" type="hidden" name="redirect" value>
<button class="btn btn-small btn-dark-gray btn-box-shadow btn-round-edge text-transform-none primary-font submit" type="submit">Send message</button>
</div>
<div class="col-12">
<div class="form-results mt-20px d-none"></div>
</div>
</div>
</form>
</div>
</div>
</div>
</section>
<section class="bg-gradient-very-light-gray">
<div class="container">
<div class="row row-cols-1 row-cols-lg-2 row-cols-md-1 g-0 justify-content-center box-shadow-extra-large border-radius-10px overflow-hidden">
<div class="col contact-form-style-04">
<div class="h-100 md-h-450px sm-h-350px w-100 cover-background position-relative" style="background-image: url('images/demo-corporate-slider-img-01.jpg')">
<div class="opacity-light bg-medium-slate-blue"></div>
<a href="https://www.youtube.com/watch?v=cfXHhfNy7tU" class="text-center bg-white rounded-circle video-icon-box video-icon-large popup-youtube absolute-middle-center">
<span>
<span class="video-icon bg-white">
<i class="bi bi-play-fill icon-medium text-dark-gray"></i>
<span class="video-icon-sonar">
<span class="video-icon-sonar-bfr bg-white opacity-7"></span>
</span>
</span>
</span>
</a>
</div>
</div>
<div class="col contact-form-style-04">
<div class="p-13 md-p-10 bg-white">
<h3 class="d-inline-block fw-600 text-dark-gray mb-8 ls-minus-1px">How we can help?</h3>
<form action="email-templates/contact-form.php" method="post">
<label class="text-dark-gray mb-10px fw-500">Username<span class="text-red">*</span></label>
<input class="mb-20px bg-very-light-gray form-control required" type="text" name="name" placeholder="Enter your username" />
<label class="text-dark-gray mb-10px fw-500">Email address<span class="text-red">*</span></label>
<input class="mb-20px bg-very-light-gray form-control required" type="email" name="email" placeholder="Enter your email" />
<label class="text-dark-gray mb-10px fw-500">Password<span class="text-red">*</span></label>
<input class="mb-20px bg-very-light-gray form-control required" type="password" name="password" placeholder="Enter your password" />
<div class="position-relative terms-condition-box text-start d-inline-block mb-20px">
<label>
<input type="checkbox" name="terms_condition" id="terms_condition" value="1" class="terms-condition check-box align-middle required">
<span class="box fs-14">I agree to the terms of service.</span>
</label>
</div>
<input type="hidden" name="redirect" value>
<button class="btn btn-large btn-round-edge btn-dark-gray btn-box-shadow submit w-100 mb-20px" type="submit">Register now</button>
<span class="fs-13 lh-22 w-90 lg-w-100 md-w-90 sm-w-100 d-block mb-30px">Your personal data will be used to support your experience throughout this website, to manage access to your account, and for other purposes described in our <a href="element-contact-form.html#" class="text-dark-gray text-decoration-line-bottom fw-500">privacy policy.</a></span>
<div class="form-results mt-20px d-none"></div>
</form>
</div>
</div>
</div>
</div>
</section>
<section class="big-section bg-spring-wood">
<div class="container">
<div class="row">
<div class="col-xl-4 col-lg-5 md-mb-50px">
<h3 class="alt-font fw-700 ls-minus-1px text-dark-gray mb-20px">Request an appointment.</h3>
<p class="mb-30px">Your information will be forwarded to a scheduling specialist who will contact you.</p>
<div class="icon-with-text-style-01 feature-box feature-box-left-icon-middle bg-white p-25px border-radius-6px last-paragraph-no-margin w-95 md-w-100 text-start box-shadow-double-large">
<div class="feature-box-icon me-15px">
<img src="images/demo-magazine-contact-03.jpg" class="h-60px" alt>
</div>
<div class="feature-box-content">
<p class="lh-26 mb-0">Phone appointment</p>
<a href="tel:12345678910" class="fs-20 ls-minus-1px fw-600 ls-minus-05px text-dark-gray">+1 234 567 8910</a>
</div>
</div>
</div>
<div class="col-xl-8 col-lg-7">
<div class="contact-form-style-05">
<form action="email-templates/contact-form.php" method="post">
<div class="row justify-content-center">
<div class="col-md-6 sm-mb-20px">
<input class="mb-20px border-color-transparent-dark-very-light form-control bg-transparent required" type="text" name="name" placeholder="Your name*" />
<input class="mb-20px border-color-transparent-dark-very-light form-control bg-transparent required" type="email" name="email" placeholder="Your email address*" />
<div class="date-time row gutter-very-small">
<div class="date-icon col-xl-6 lg-mb-25px">
<input class="form-control border-color-transparent-dark-very-light bg-transparent" type="date" name="date" value="2023-01-01" min="2023-01-01" max="2099-12-31" />
</div>
<div class="time-icon col-xl-6">
<input class="form-control border-color-transparent-dark-very-light bg-transparent" type="time" name="time" value="09:12" min="09:00" max="12:00" />
</div>
</div>
</div>
<div class="col-md-6">
<div class="mb-20px select">
<select class="form-control border-color-transparent-dark-very-light bg-transparent" name="select">
<option value>Select barber service</option>
<option value="Haircut">Haircut</option>
<option value="Hair styling">Hair styling</option>
<option value="Shaving">Shaving</option>
<option value="Beard sculpting">Beard sculpting</option>
<option value="Kids haircut">Kids haircut</option>
</select>
</div>
<textarea class="form-control border-color-transparent-dark-very-light bg-transparent h-140px" cols="20" rows="4" name="comment" placeholder="Your message"></textarea>
</div>
<div class="col-md-6 mt-30px sm-mt-20px">
<p class="fs-14 lh-22 opacity-7 text-center text-md-start mb-0">We are committed to protecting your privacy. We will never collect information about you.</p>
</div>
<div class="col-md-6 text-center text-md-end mt-30px sm-mt-20px">
<input class="bg-transparent" type="hidden" name="redirect" value>
<button class="btn btn-large btn-round-edge btn-box-shadow btn-switch-text btn-dark-gray left-icon submit w-100" type="submit">
<span>
<span><i class="feather icon-feather-calendar"></i></span>
<span class="btn-double-text" data-text="Book appointment">Book appointment</span>
</span>
</button>
</div>
<div class="col-12">
<div class="form-results d-none text-center mt-15px ps-15px pe-15px"></div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</section>
<section class="cover-background big-section" style="background-image: url('images/demo-interactive-portfolio-slider-05.jpg')">
<div class="opacity-extra-medium bg-dark-gray"></div>
<div class="container position-relative">
<div class="row justify-content-center">
<div class="col-xl-4 col-lg-5 md-mb-40px">
<h3 class="text-white fw-500 ls-minus-1px">Project in mind? Get in touch!</h3>
<p class="text-white opacity-7">We're here to help and answer any question you might have. Any need help you please contact us or meet to office with coffee.</p>
<div class="row row-cols-1 justify-content-center mt-30px">
<div class="col icon-with-text-style-08">
<div class="feature-box feature-box-left-icon-middle overflow-hidden">
<div class="feature-box-icon feature-box-icon-rounded bg-orange w-80px h-80px rounded-circle me-20px">
<i class="bi bi-envelope text-white icon-very-medium"></i>
</div>
<div class="feature-box-content last-paragraph-no-margin">
<span class="text-white opacity-7 d-block">Join our growing team?</span>
<span class="d-block fs-22 text-white"><a href="cdn-cgi/l/email-protection.html#b4d7d5c6d1d1c6c7f4d0dbd9d5ddda9ad7dbd9" class="text-white text-decoration-line-bottom"><span class="__cf_email__" data-cfemail="dab9bba8bfbfa8a99abeb5b7bbb3b4f4b9b5b7">[email&#160;protected]</span></a></span>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-7 offset-xl-1">
<form action="email-templates/contact-form.php" method="post" class="row row-cols-1 row-cols-md-2 justify-content-center">
<div class="col mb-30px">
<input class="border-color-transparent-white-very-light bg-transparent placeholder-light form-control required" type="text" name="name" placeholder="Your name*" />
</div>
<div class="col mb-30px">
<input class="border-color-transparent-white-very-light bg-transparent placeholder-light form-control" type="tel" name="phone" placeholder="Your phone" />
</div>
<div class="col mb-30px">
<input class="border-color-transparent-white-very-light bg-transparent placeholder-light form-control required" type="email" name="email" placeholder="Your email address*" />
</div>
<div class="col sm-mb-30px">
<input class="border-color-transparent-white-very-light bg-transparent placeholder-light form-control" type="text" name="subject" placeholder="Your subject" />
</div>
<div class="col-md-12">
<textarea class="border-color-transparent-white-very-light bg-transparent placeholder-light form-control" cols="40" rows="4" name="comment" placeholder="Your message"></textarea>
<input type="hidden" name="redirect" value>
<button class="btn btn-medium btn-white mt-30px btn-round-edge submit fw-700">Send message</button>
<div class="form-results mt-20px d-none"></div>
</div>
</form>
</div>
</div>
</div>
</section>
<section class="big-section">
<div class="container">
<div class="row row-cols-md-1 justify-content-center">
<div class="col-12 col-xl-10 col-lg-10 col-md-10">
<form action="email-templates/contact-form.php" method="post" class="contact-form-style-07" data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;translateY&quot;: [30, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 800, &quot;delay&quot;: 200, &quot;staggervalue&quot;: 300, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<div class="position-relative form-group mb-30px d-flex flex-md-row flex-column">
<label for="exampleInputEmail1" class="form-label fs-60 md-fs-40 sm-fs-30 ls-minus-1px text-dark-gray fw-500 mb-0 me-30px">My name is</label>
<div class="position-relative col">
<span class="form-icon"><i class="bi bi-person icon-small"></i></span>
<input class="ps-0 border-radius-0px border-color-dark-gray bg-transparent form-control required" id="exampleInputEmail1" type="text" name="name" placeholder="Enter your name here*" />
</div>
</div>
<div class="position-relative form-group mb-30px d-flex flex-md-row flex-column">
<label for="exampleInputEmail1" class="form-label fs-60 md-fs-40 sm-fs-30 ls-minus-1px text-dark-gray fw-500 mb-0 me-30px">Here is my email</label>
<div class="position-relative col">
<span class="form-icon"><i class="bi bi-envelope icon-small"></i></span>
<input class="ps-0 border-radius-0px border-color-dark-gray bg-transparent form-control required" id="exampleInputEmail2" type="email" name="email" placeholder="Enter your email here*" />
</div>
</div>
<div class="position-relative form-group form-textarea d-flex flex-md-row flex-column">
<label for="exampleInputEmail1" class="form-label fs-60 md-fs-40 sm-fs-30 ls-minus-1px text-dark-gray fw-500 mb-0 me-30px">I need a</label>
<div class="position-relative col">
<textarea class="ps-0 border-radius-0px border-color-dark-gray bg-transparent form-control" name="comment" placeholder="Enter your project details here" rows="3"></textarea>
<span class="form-icon"><i class="bi bi-chat-square-dots icon-small"></i></span>
</div>
</div>
<div class="row mt-40px align-items-center">
<div class="col-md-6 col-sm-6 lg-mb-30px md-mb-0">
<p class="mb-0 fs-14 lh-24 text-center text-sm-start">We are committed to protecting your privacy. We will never collect information about you without your explicit consent.</p>
</div>
<div class="col-md-6 col-sm-6 text-center text-sm-end xs-mt-25px">
<input id="exampleInputEmail3" type="hidden" name="redirect" value>
<button class="btn btn-dark-gray btn-medium btn-rounded text-transform-none btn-box-shadow submit" type="submit">Send message</button>
</div>
<div class="col-12 mt-20px mb-0"><div class="form-results d-none"></div></div>
</div>
</form>
</div>
</div>
</div>
</section>
<footer class="footer-demo bg-dark-slate-blue pb-4 sm-pb-50px" style="background-image: url('images/demo-footer-pattern.svg')">
<div class="container">
<div class="row mb-6 md-mb-30px">
<div class="col-xl-5 col-lg-6 md-mb-30px text-center text-lg-start">
<h3 class="text-white fw-600 alt-font mb-40px ls-minus-1px md-mb-30px md-w-60 sm-w-70 xs-w-100 md-mx-auto">Craft a standout website with crafto.</h3>
<div class="row">
<div class="col-lg-5 col-sm-6 xs-mb-20px">
<span class="alt-font fs-14 fw-600 text-uppercase d-block text-white ls-1px lh-18">Presale questions</span>
<a href="cdn-cgi/l/email-protection.html#d7beb9b1b897a3bfb2bab2adb6b6f9b4b8ba"><span class="__cf_email__" data-cfemail="d4bdbab2bb94a0bcb1b9b1aeb5b5fab7bbb9">[email&#160;protected]</span></a>
</div>
<div class="col-lg-5 col-sm-6">
<span class="alt-font fs-14 fw-600 text-uppercase d-block text-white ls-1px lh-18">Getting started</span>
<a href="https://1.envato.market/R53mL2" target="_blank">Purchase on Envato</a>
</div>
</div>
</div>
<div class="col-lg-2 col-6 offset-xl-1 text-center text-lg-start">
<span class="alt-font fs-14 fw-600 text-uppercase text-white ls-1px d-block mb-5px">Useful links</span>
<ul>
<li><a href="documentation/index.html" target="_blank">Documentation</a></li>
<li><a href="https://www.themezaa.com/support/" target="_blank">Support center</a></li>
<li><a href="https://www.youtube.com/channel/UCxIgqIkSGVVqEsm-HE-tadQ/" target="_blank">Video tutorials</a></li>
<li><a href="https://themeforest.net/user/themezaa/portfolio" target="_blank">Envato portfolio</a></li>
<li><a href="https://www.themezaa.com/theme-customization/" target="_blank">Customization</a></li>
</ul>
</div>
<div class="col-lg-2 col-6 text-center text-lg-start">
<span class="alt-font fs-14 fw-600 text-uppercase text-white ls-1px d-block mb-5px">Follow Us</span>
<ul>
<li><a href="https://www.facebook.com/themezaastudio/" target="_blank">Facebook</a></li>
<li><a href="https://www.twitter.com/themezaa" target="_blank">Twitter</a></li>
<li><a href="https://www.dribbble.com/linksture" target="_blank">Dribbble</a></li>
<li><a href="https://www.youtube.com/channel/UCxIgqIkSGVVqEsm-HE-tadQ/" target="_blank">Youtube</a></li>
<li><a href="https://www.linkedin.com/company/themezaa/" target="_blank">Linkedin</a></li>
</ul>
</div>
<div class="col-lg-2 order-first order-lg-4 text-center text-lg-start md-mb-20px">
<a href="index.html" class="footer-logo"><img src="images/logo-white-demo.png" data-at2x="images/logo-white-demo@2x.png" alt></a>
</div>
</div>
<div class="row">
<div class="col-lg-7 last-paragraph-no-margin text-center text-lg-start">
<p class="fs-13 lh-22 w-90 md-w-100">ThemeZaa - The best WordPress, Shopify and Magento themes and plugins provider. We design and develop quality themes and plugins to create your awesome website.</p>
</div>
<div class="col-lg-5 text-center text-lg-end md-mt-15px last-paragraph-no-margin">
<p class="fs-13 lh-22">&copy; 2024 Crafto is Powered by <a href="https://www.themezaa.com/" target="_blank" class="text-decoration-line-bottom text-white">ThemeZaa</a></p>
</div>
</div>
</div>
</footer>
<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>
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
</body>
</html>