Access_New/pages/demo-travel-agency-about.html
2024-09-05 11:33:27 +05:45

527 lines
31 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" />
<link rel="stylesheet" href="demos/travel-agency/travel-agency.css" />
</head>
<body data-mobile-nav-style="classic">
<header class="header-with-topbar">
<div class="header-top-bar top-bar-light bg-white md-border-bottom border-color-transparent-dark-very-light disable-fixed">
<div class="container-fluid">
<div class="row h-45px align-items-center m-0">
<div class="col-xl-6 col-lg-8 justify-content-center justify-content-lg-start">
<div class="fs-15 text-dark-gray">We have a selection of over 50 tour programs! <a href="demo-travel-agency-destinations.html" class="text-base-color fw-500 text-decoration-line-bottom">Popular Destinations</a></div>
</div>
<div class="col-xl-6 col-lg-4 text-end d-none d-lg-flex">
<a href="tel:02228899900" class="widget fs-15 text-dark-gray text-dark-gray-hover"><i class="feather icon-feather-phone-call text-base-color"></i> 0222 8899900</a>
<div class="widget fs-15 ms-30px text-dark-gray d-none d-xl-inline-block"><i class="feather icon-feather-map-pin text-base-color"></i> Broadway, 24th Floor, San Francisco</div>
</div>
</div>
</div>
</div>
<nav class="navbar navbar-expand-lg header-transparent bg-transparent border-bottom border-color-transparent-white-light disable-fixed">
<div class="container-fluid">
<div class="col-auto col-lg-2 me-auto">
<a class="navbar-brand" href="demo-travel-agency.html">
<img src="images/demo-travel-agency-logo-white.png" data-at2x="images/demo-travel-agency-logo-white@2x.png" alt class="default-logo">
<img src="images/demo-travel-agency-logo-white.png" data-at2x="images/demo-travel-agency-logo-white@2x.png" alt class="alt-logo">
<img src="images/demo-travel-agency-logo-black.png" data-at2x="images/demo-travel-agency-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 alt-font text-uppercase">
<li class="nav-item"><a href="demo-travel-agency.html" class="nav-link">Home</a></li>
<li class="nav-item"><a href="demo-travel-agency-about.html" class="nav-link">About</a></li>
<li class="nav-item dropdown dropdown-with-icon">
<a href="demo-travel-agency-destinations.html" class="nav-link">Destinations</a>
<i class="fa-solid fa-angle-down dropdown-toggle" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false"></i>
<ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<li>
<a href="demo-travel-agency-about.html#">
<img src="images/demo-travel-agency-home-07.jpg" alt>
<div class="submenu-icon-content">
India
<p>42 Destinations</p>
</div>
</a>
</li>
<li>
<a href="demo-travel-agency-about.html#">
<img src="images/demo-travel-agency-home-08.jpg" alt>
<div class="submenu-icon-content">
Poland
<p>36 Destinations</p>
</div>
</a>
</li>
<li>
<a href="demo-travel-agency-about.html#">
<img src="images/demo-travel-agency-home-09.jpg" alt>
<div class="submenu-icon-content">
Mexico
<p>22 Destinations</p>
</div>
</a>
</li>
<li>
<a href="demo-travel-agency-about.html#">
<img src="images/demo-travel-agency-home-13.jpg" alt>
<div class="submenu-icon-content">
Maldives
<p>28 Destinations</p>
</div>
</a>
</li>
<li>
<a href="demo-travel-agency-about.html#" class="btn btn-dark-gray btn-round-edge btn-box-shadow align-self-center text-center text-white">tour packages</a>
</li>
</ul>
</li>
<li class="nav-item"><a href="demo-travel-agency-tours.html" class="nav-link">Tours</a></li>
<li class="nav-item"><a href="demo-travel-agency-reviews.html" class="nav-link">Reviews</a></li>
<li class="nav-item"><a href="demo-travel-agency-blog.html" class="nav-link">Blog</a></li>
<li class="nav-item"><a href="demo-travel-agency-contact.html" class="nav-link">Contact</a></li>
</ul>
</div>
</div>
<div class="col-auto col-lg-2 text-end">
<div class="header-icon">
<div class="header-search-icon icon">
<a href="demo-travel-agency-about.html#" class="search-form-icon header-search-form"><i class="feather icon-feather-search"></i></a>
<div class="search-form-wrapper">
<button title="Close" type="button" class="search-close alt-font">×</button>
<form id="search-form" role="search" method="get" class="search-form text-left" action="search-result.html">
<div class="search-form-box">
<h2 class="text-dark-gray text-center mb-5 ls-minus-2px fw-600">What are you looking for?</h2>
<input class="search-input" id="search-form-input5e219ef164995" placeholder="Enter your keywords..." name="s" value type="text" autocomplete="off">
<button type="submit" class="search-button">
<i class="feather icon-feather-search" aria-hidden="true"></i>
</button>
</div>
</form>
</div>
</div>
<div class="header-push-button icon">
<div class="push-button">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
</div>
</div>
</div>
</nav>
<div class="push-menu push-menu-style-1 p-35px bg-white">
<span class="close-menu text-white bg-dark-gray"><i class="fa-solid fa-xmark"></i></span>
<div class="text-center push-menu-wrapper text-dark-gray" data-scroll-options="{ &quot;theme&quot;: &quot;dark&quot; }">
<div class="w-100">
<img src="images/demo-travel-agency-logo-black.png" data-at2x="images/demo-travel-agency-logo-black@2x.png" class="mb-20" alt />
<div class="d-inline-block align-middle bg-very-light-gray fw-600 text-dark-gray text-uppercase border-radius-22px ps-25px pe-25px fs-13 mb-15px">Explore the world</div>
<h3 class="fw-600 mb-0 alt-font ls-minus-1px lh-38">World's leading travel agency</h3>
</div>
<div class="row align-items-center justify-content-center mt-20 mb-20 row-cols-3 row-cols-md-3 gutter-very-small row-cols-sm-3 instagram-follow-api position-relative">
<div class="col instafeed-grid mb-10px">
<figure class="border-radius-0px"><a href="https://www.instagram.com" target="_blank"><img src="images/demo-travel-agency-instagram-01.jpg" class="insta-image" alt><span class="insta-icon"><i class="fa-brands fa-instagram"></i></span></a></figure>
</div>
<div class="col instafeed-grid mb-10px">
<figure class="border-radius-0px"><a href="https://www.instagram.com" target="_blank"><img src="images/demo-travel-agency-instagram-02.jpg" class="insta-image" alt><span class="insta-icon"><i class="fa-brands fa-instagram"></i></span></a></figure>
</div>
<div class="col instafeed-grid mb-10px">
<figure class="border-radius-0px"><a href="https://www.instagram.com" target="_blank"><img src="images/demo-travel-agency-instagram-03.jpg" class="insta-image" alt><span class="insta-icon"><i class="fa-brands fa-instagram"></i></span></a></figure>
</div>
<div class="col instafeed-grid">
<figure class="border-radius-0px"><a href="https://www.instagram.com" target="_blank"><img src="images/demo-travel-agency-instagram-04.jpg" class="insta-image" alt><span class="insta-icon"><i class="fa-brands fa-instagram"></i></span></a></figure>
</div>
<div class="col instafeed-grid">
<figure class="border-radius-0px"><a href="https://www.instagram.com" target="_blank"><img src="images/demo-travel-agency-instagram-05.jpg" class="insta-image" alt><span class="insta-icon"><i class="fa-brands fa-instagram"></i></span></a></figure>
</div>
<div class="col instafeed-grid">
<figure class="border-radius-0px"><a href="https://www.instagram.com" target="_blank"><img src="images/demo-travel-agency-instagram-06.jpg" class="insta-image" alt><span class="insta-icon"><i class="fa-brands fa-instagram"></i></span></a></figure>
</div>
</div>
<div class="col-12 text-center newsletter-style-02 position-relative mb-20">
<span class="fs-18 w-80 mx-auto text-extra-dark-gray lh-26 d-inline-block mb-25px">Get latest update for our trusted applications</span>
<form action="email-templates/subscribe-newsletter.php" method="post" class="position-relative w-100">
<input class="border-radius-5px bg-white w-100 form-control required" type="email" name="email" placeholder="Enter your email">
<input type="hidden" name="redirect" value>
<button class="btn submit" aria-label="submit"><i class="icon feather icon-feather-mail icon-small"></i></button>
<div class="form-results border-radius-4px pt-10px pb-10px ps-15px pe-15px fs-14 w-100 text-center position-absolute lh-24 d-none"></div>
</form>
</div>
<div class="col-12 text-center elements-social social-icon-style-01">
<ul class="small-icon dark mb-0">
<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>
<li><a class="linkedin" href="http://www.linkedin.com" target="_blank"><i class="fa-brands fa-linkedin-in"></i></a></li>
</ul>
</div>
</div>
</div>
</header>
<section class="page-title-button-style cover-background position-relative ipad-top-space-margin top-space-padding md-pt-20px" style="background-image: url('images/demo-travel-agency-about-title-bg.jpg')">
<div class="opacity-light bg-bay-of-many-blue"></div>
<div class="container">
<div class="row align-items-center justify-content-center extra-small-screen">
<div class="col-lg-6 col-md-8 position-relative text-center page-title-extra-large" data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;translateY&quot;: [30, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 600, &quot;delay&quot;: 0, &quot;staggervalue&quot;: 300, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<h2 class="text-uppercase mb-10px alt-font text-white fw-500 bg-dark-gray border-radius-4px">Our journey</h2>
<h1 class="mb-0 text-white alt-font ls-minus-2px text-uppercase fw-600 text-shadow-double-large">About us</h1>
</div>
</div>
</div>
</section>
<section class="background-position-center-bottom background-no-repeat background-size-contain position-relative" style="background-image:url('images/demo-travel-agency-home-bg-02.png');">
<div class="h-110px position-absolute w-100 h-100 left-0px right-0px top-minus-70px" style="background-image:url('images/demo-travel-agency-about-bg-02.png')"></div>
<div class="container">
<div class="row align-items-center mb-5 md-mb-50px overflow-hidden">
<div class="col-xl-6 col-lg-6 md-mb-30px position-relative">
<div class="atropos" data-atropos>
<div class="atropos-scale">
<div class="atropos-rotate">
<div class="atropos-inner">
<img data-atropos-offset="5" src="images/demo-travel-agency-about-01.jpg" alt>
</div>
</div>
</div>
</div>
<img class="position-absolute right-minus-20px md-right-70px bottom-100px xs-w-190px z-index-9" src="images/demo-travel-agency-home-02.png" alt data-bottom-top="transform: translateY(50px)" data-top-bottom="transform: translateY(-50px)">
</div>
<div class="col-xl-5 offset-xl-1 col-lg-6 text-center text-lg-start">
<h1 class="alt-font fw-600 text-dark-gray ls-minus-2px" data-anime="{ &quot;el&quot;: &quot;lines&quot;, &quot;translateY&quot;: [30, 0], &quot;opacity&quot;: [0,1], &quot;delay&quot;:0, &quot;staggervalue&quot;: 100, &quot;easing&quot;: &quot;easeOutQuad&quot; }">Discover the world's leading travel agency.</h1>
<p class="w-85 md-w-100" data-anime="{ &quot;el&quot;: &quot;lines&quot;, &quot;translateY&quot;: [30, 0], &quot;opacity&quot;: [0,1], &quot;delay&quot;:100, &quot;staggervalue&quot;: 100, &quot;easing&quot;: &quot;easeOutQuad&quot; }">Lorem ipsum is simply dummy text of the printing and typesetting industry. Lorem ipsum has been the industry's standard dummy text ever since. Lorem ipsum is simply dummy text.</p>
<div class="d-inline-block mt-10px" data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;translateY&quot;: [50, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 800, &quot;delay&quot;: 0, &quot;staggervalue&quot;: 150, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<a href="demo-travel-agency-destinations.html" class="btn btn-large btn-dark-gray btn-round-edge btn-hover-animation btn-box-shadow me-25px xs-me-15px">
<span>
<span class="btn-text">Destinations</span>
<span class="btn-icon"><i class="feather icon-feather-map-pin"></i></span>
</span>
</a>
<a href="cdn-cgi/l/email-protection.html#fc95929a93bc9893919d9592d29f9391" class="btn btn-link-gradient expand btn-extra-large text-dark-gray text-dark-gray-hover ls-0px"><span class="__cf_email__" data-cfemail="224b4c444d62464d4f434b4c0c414d4f">[email&#160;protected]</span><span class="bg-dark-gray"></span></a>
</div>
</div>
</div>
<div class="row row-cols-1 row-cols-lg-3 row-cols-md-2 justify-content-center align-items-center mb-5 sm-mb-40px" data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;translateY&quot;: [50, 0],&quot;perspective&quot;: [1200,1200], &quot;scale&quot;: [0.9,1], &quot;rotateY&quot;: [50, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 1200, &quot;delay&quot;: 0, &quot;staggervalue&quot;: 150, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<div class="col md-mb-30px">
<div class="border border-color-extra-medium-gray border-radius-6px text-center box-shadow-quadruple-large">
<div class="pt-10 pb-10">
<img src="images/demo-hotel-and-resort-client-01.svg" class="h-60px" alt />
</div>
<div class="border-top border-1 border-color-extra-medium-gray p-15px last-paragraph-no-margin">
<p class="text-dark-gray fw-500">2019 - Best of the best</p>
</div>
</div>
</div>
<div class="col md-mb-30px">
<div class="border border-color-extra-medium-gray border-radius-6px text-center box-shadow-quadruple-large">
<div class="pt-10 pb-10">
<img src="images/demo-hotel-and-resort-client-02.svg" class="h-60px" alt />
</div>
<div class="border-top border-1 border-color-extra-medium-gray p-15px last-paragraph-no-margin">
<p class="text-dark-gray fw-500">2020 - Travel of excellence</p>
</div>
</div>
</div>
<div class="col">
<div class="border border-color-extra-medium-gray border-radius-6px text-center box-shadow-quadruple-large">
<div class="pt-10 pb-10">
<img src="images/demo-hotel-and-resort-client-03.svg" class="h-60px" alt />
</div>
<div class="border-top border-1 border-color-extra-medium-gray p-15px last-paragraph-no-margin">
<p class="text-dark-gray fw-500">2021 - Responsible tourism</p>
</div>
</div>
</div>
</div>
<div class="row justify-content-center mb-6 md-mb-8 xs-mb-60px" data-anime="{ &quot;translateX&quot;: [50, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 1200, &quot;delay&quot;: 0, &quot;staggervalue&quot;: 150, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<div class="col-auto text-center last-paragraph-no-margin">
<div class="d-inline-block align-middle me-5px">
<img src="images/demo-travel-agency-about-icon-01.png" class="w-35px" alt>
</div>
<div class="d-inline-block text-dark-gray alt-font fs-30 align-middle ls-minus-1px">10 Years of experience and achieved some <span class="text-decoration-line-bottom fw-600 text-dark-gray">honorable awards.</span></div>
</div>
</div>
</div>
</section>
<section class="bg-very-light-gray background-position-center-bottom background-size-contain background-no-repeat pt-2" style="background-image:url('images/demo-travel-agency-home-bg-05.png');">
<div class="container">
<div class="row justify-content-center mb-3">
<div class="col-lg-7 text-center" data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;translateY&quot;: [30, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 600, &quot;delay&quot;: 0, &quot;staggervalue&quot;: 300, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<span class="fw-500 text-base-color text-uppercase d-inline-block">Brilliant reasons</span>
<h2 class="alt-font fw-600 text-dark-gray ls-minus-2px">Why choose us?</h2>
</div>
</div>
<div class="row row-cols-1 row-cols-lg-3 row-cols-md-2 justify-content-center mb-5 sm-mb-8" data-anime="{&quot;el&quot;: &quot;childs&quot;, &quot;translateY&quot;: [0, 0], &quot;perspective&quot;: [1000,1200], &quot;scale&quot;: [1.1, 1], &quot;rotateX&quot;: [50, 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="col interactive-banner-style-03 transition-inner-all md-mb-30px">
<div class="position-relative overflow-hidden border-radius-6px last-paragraph-no-margin">
<figure class="m-0">
<div class="bg-gradient-gray-light-dark-transparent position-absolute top-0px left-0px w-100 h-100 z-index-1"></div>
<img src="images/demo-travel-agency-about-02.jpg" alt />
<figcaption class="d-flex flex-column w-100 h-100 p-60px lg-p-35px z-index-1">
<span class="mb-auto fs-24 text-white text-white-hover w-90 lg-w-100">Preferred style of accommodation.</span>
<a href="demo-travel-agency-reviews.html" class="align-self-start fs-16 fw-500 ls-1px text-uppercase text-white"><i class="bi bi-bookmark-heart align-middle icon-extra-medium me-10px"></i>Superior service</a>
</figcaption>
</figure>
</div>
</div>
<div class="col interactive-banner-style-03 transition-inner-all md-mb-30px">
<div class="position-relative overflow-hidden border-radius-6px last-paragraph-no-margin">
<figure class="m-0">
<div class="bg-gradient-gray-light-dark-transparent position-absolute top-0px left-0px w-100 h-100 z-index-1"></div>
<img src="images/demo-travel-agency-about-04.jpg" alt />
<figcaption class="d-flex flex-column w-100 h-100 p-60px lg-p-35px z-index-1">
<span class="mb-auto fs-24 text-white text-white-hover w-90 lg-w-100">Our local guides and tour directors.</span>
<a href="demo-travel-agency-reviews.html" class="align-self-start fs-16 fw-500 ls-1px text-uppercase text-white"><i class="bi bi-award align-middle icon-extra-medium me-10px"></i>Greatest guides</a>
</figcaption>
</figure>
</div>
</div>
<div class="col interactive-banner-style-03 transition-inner-all">
<div class="position-relative overflow-hidden border-radius-6px last-paragraph-no-margin">
<figure class="m-0">
<div class="bg-gradient-gray-light-dark-transparent position-absolute top-0px left-0px w-100 h-100 z-index-1"></div>
<img src="images/demo-travel-agency-about-03.jpg" alt />
<figcaption class="d-flex flex-column w-100 h-100 p-60px lg-p-35px z-index-1">
<span class="mb-auto fs-24 text-white text-white-hover w-90 lg-w-100">The best consumer protection plan.</span>
<a href="demo-travel-agency-reviews.html" class="align-self-start fs-16 fw-500 ls-1px text-uppercase text-white"><i class="bi bi-shield-check align-middle icon-extra-medium me-10px"></i>Fully protected</a>
</figcaption>
</figure>
</div>
</div>
</div>
<div class="row mb-12 md-pb-13 md-mt-8 xs-pb-20" data-anime="{ &quot;translateY&quot;: [0, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 1200, &quot;delay&quot;: 50, &quot;staggervalue&quot;: 150, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<div class="col-12 text-center">
<h4 class="alt-font text-dark-gray mb-0 ls-minus-1px fancy-text-style-4">World's hottest destinations for <span class="fw-600" data-fancy-text="{ &quot;effect&quot;: &quot;wave&quot;, &quot;direction&quot;: &quot;up&quot;, &quot;speed&quot;: 10, &quot;string&quot;: [&quot;mountain lovers.&quot;, &quot;nature lovers.&quot;, &quot;independent tours.&quot;], &quot;duration&quot;: 2500 }"></span></h4>
</div>
</div>
</div>
</section>
<section class="pt-0">
<div class="container">
<div class="row justify-content-center mb-3">
<div class="col-lg-7 text-center" data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;translateY&quot;: [30, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 600, &quot;delay&quot;: 0, &quot;staggervalue&quot;: 300, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<span class="fw-500 text-base-color text-uppercase d-inline-block">Our tour guide</span>
<h2 class="alt-font fw-600 text-dark-gray ls-minus-2px">Travel expert</h2>
</div>
</div>
<div class="row row-cols-1 row-cols-xl-4 row-cols-lg-3 row-cols-sm-2" data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;perspective&quot;: [1000,1200], &quot;scale&quot;: [1.05, 1], &quot;rotateY&quot;: [-30, 0], &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="col text-center team-style-01 mb-3 md-mb-30px">
<figure class="mb-0 hover-box box-hover position-relative">
<img src="images/team-01.jpg" alt class="border-radius-6px" />
<figcaption class="w-100 p-35px bg-white">
<div class="position-relative z-index-1 overflow-hidden">
<span class="d-block fw-600 fs-18 text-dark-gray lh-24">Jeremy dupont</span>
<p class="m-0">Executive officer</p>
<div class="social-icon hover-text mt-20px">
<a href="https://www.facebook.com/" target="_blank" class="fw-600 text-dark-gray">Fb.</a>
<a href="https://www.instagram.com/" target="_blank" class="fw-600 text-dark-gray">In.</a>
<a href="https://www.twitter.com/" target="_blank" class="fw-600 text-dark-gray">Tw.</a>
<a href="https://dribbble.com/" target="_blank" class="fw-600 text-dark-gray">Dr.</a>
</div>
</div>
<div class="box-overlay bg-white box-shadow-quadruple-large border-radius-6px"></div>
</figcaption>
</figure>
</div>
<div class="col text-center team-style-01 mb-3 md-mb-30px">
<figure class="mb-0 hover-box box-hover position-relative">
<img src="images/team-02.jpg" alt class="border-radius-6px" />
<figcaption class="w-100 p-35px bg-white">
<div class="position-relative z-index-1 overflow-hidden">
<span class="d-block fw-600 fs-18 text-dark-gray lh-24">Jessica dover</span>
<p class="m-0">Vice president</p>
<div class="social-icon hover-text mt-20px">
<a href="https://www.facebook.com/" target="_blank" class="fw-600 text-dark-gray">Fb.</a>
<a href="https://www.instagram.com/" target="_blank" class="fw-600 text-dark-gray">In.</a>
<a href="https://www.twitter.com/" target="_blank" class="fw-600 text-dark-gray">Tw.</a>
<a href="https://dribbble.com/" target="_blank" class="fw-600 text-dark-gray">Dr.</a>
</div>
</div>
<div class="box-overlay bg-white box-shadow-quadruple-large border-radius-6px"></div>
</figcaption>
</figure>
</div>
<div class="col text-center team-style-01 mb-3 md-mb-30px">
<figure class="mb-0 hover-box box-hover position-relative">
<img src="images/team-03.jpg" alt class="border-radius-6px" />
<figcaption class="w-100 p-35px bg-white">
<div class="position-relative z-index-1 overflow-hidden">
<span class="d-block fw-600 fs-18 text-dark-gray lh-24">Matthew taylor</span>
<p class="m-0">Financial officer</p>
<div class="social-icon hover-text mt-20px">
<a href="https://www.facebook.com/" target="_blank" class="fw-600 text-dark-gray">Fb.</a>
<a href="https://www.instagram.com/" target="_blank" class="fw-600 text-dark-gray">In.</a>
<a href="https://www.twitter.com/" target="_blank" class="fw-600 text-dark-gray">Tw.</a>
<a href="https://dribbble.com/" target="_blank" class="fw-600 text-dark-gray">Dr.</a>
</div>
</div>
<div class="box-overlay bg-white box-shadow-quadruple-large border-radius-6px"></div>
</figcaption>
</figure>
</div>
<div class="col text-center team-style-01 mb-3 md-mb-30px xs-mb-0">
<figure class="mb-0 hover-box box-hover position-relative">
<img src="images/team-04.jpg" alt class="border-radius-6px" />
<figcaption class="w-100 p-35px bg-white">
<div class="position-relative z-index-1 overflow-hidden">
<span class="d-block fw-600 fs-18 text-dark-gray lh-24">Daniel james</span>
<p class="m-0">People officer</p>
<div class="social-icon hover-text mt-20px">
<a href="https://www.facebook.com/" target="_blank" class="fw-600 text-dark-gray">Fb.</a>
<a href="https://www.instagram.com/" target="_blank" class="fw-600 text-dark-gray">In.</a>
<a href="https://www.twitter.com/" target="_blank" class="fw-600 text-dark-gray">Tw.</a>
<a href="https://dribbble.com/" target="_blank" class="fw-600 text-dark-gray">Dr.</a>
</div>
</div>
<div class="box-overlay bg-white box-shadow-quadruple-large border-radius-6px"></div>
</figcaption>
</figure>
</div>
</div>
</div>
</section>
<footer class="bg-light-gray pb-40px">
<div class="container">
<div class="row mb-2 md-mb-4 overlap-section" data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;translateY&quot;: [-15, 0], &quot;scale&quot;: [0.5, 1], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 800, &quot;delay&quot;: 300, &quot;staggervalue&quot;: 300, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<div class="col-12 text-center">
<img class="rounded-circle" src="images/demo-travel-agency-home-16.png" alt />
</div>
</div>
<div class="row justify-content-center mb-6 md-mb-8 xs-mb-40px">
<div class="col-xl-6 col-lg-8 col-md-10 text-center last-paragraph-no-margin">
<h2 class="text-dark-gray alt-font fw-600 mb-40px mx-auto w-90 ls-minus-2px">Get the amazing travel offers into your inbox!</h2>
<div class="d-inline-block w-100 newsletter-style-03 position-relative mb-30px">
<form action="email-templates/subscribe-newsletter.php" method="post" class="position-relative w-100">
<input class="input-large bg-white border-color-transparent w-100 border-radius-100px box-shadow-extra-large form-control required" type="email" name="email" placeholder="Enter your email address" />
<input type="hidden" name="redirect" value>
<button class="btn btn-large text-dark-gray ls-0px left-icon submit fw-600" aria-label="submit"><i class="icon feather icon-feather-mail icon-small text-base-color"></i><span>Subscribe</span></button>
<div class="form-results border-radius-100px pt-10px pb-10px ps-15px pe-15px fs-16 mt-10px w-100 z-index-1 text-center position-absolute d-none"></div>
</form>
</div>
<p class="fs-16 lh-normal">We are committed to protecting your <a href="demo-travel-agency-about.html#" class="text-decoration-line-bottom text-dark-gray text-dark-gray-hover">privacy policy.</a></p>
</div>
</div>
<div class="row align-items-center justify-content-center mb-40px g-0 row-cols-3 row-cols-md-6 row-cols-sm-3 instagram-follow-api position-relative">
<div class="col instafeed-grid">
<figure class="border-radius-0px"><a href="https://www.instagram.com" target="_blank"><img src="images/demo-travel-agency-instagram-01.jpg" class="insta-image" alt><span class="insta-icon"><i class="fa-brands fa-instagram"></i></span></a></figure>
</div>
<div class="col instafeed-grid">
<figure class="border-radius-0px"><a href="https://www.instagram.com" target="_blank"><img src="images/demo-travel-agency-instagram-02.jpg" class="insta-image" alt><span class="insta-icon"><i class="fa-brands fa-instagram"></i></span></a></figure>
</div>
<div class="col instafeed-grid">
<figure class="border-radius-0px"><a href="https://www.instagram.com" target="_blank"><img src="images/demo-travel-agency-instagram-03.jpg" class="insta-image" alt><span class="insta-icon"><i class="fa-brands fa-instagram"></i></span></a></figure>
</div>
<div class="col instafeed-grid">
<figure class="border-radius-0px"><a href="https://www.instagram.com" target="_blank"><img src="images/demo-travel-agency-instagram-04.jpg" class="insta-image" alt><span class="insta-icon"><i class="fa-brands fa-instagram"></i></span></a></figure>
</div>
<div class="col instafeed-grid">
<figure class="border-radius-0px"><a href="https://www.instagram.com" target="_blank"><img src="images/demo-travel-agency-instagram-05.jpg" class="insta-image" alt><span class="insta-icon"><i class="fa-brands fa-instagram"></i></span></a></figure>
</div>
<div class="col instafeed-grid">
<figure class="border-radius-0px"><a href="https://www.instagram.com" target="_blank"><img src="images/demo-travel-agency-instagram-06.jpg" class="insta-image" alt><span class="insta-icon"><i class="fa-brands fa-instagram"></i></span></a></figure>
</div>
<div class="absolute-middle-center z-index-1 w-auto">
<a href="https://www.instagram.com" target="_blank" class="btn btn-medium btn-switch-text btn-white btn-round-edge fw-600 ls-0px left-icon btn-box-shadow instagram-button">
<span>
<span><i class="fa-brands fa-instagram text-base-color fs-20"></i></span>
<span class="btn-double-text" data-text="crafto instagram">crafto instagram</span>
</span>
</a>
</div>
</div>
<div class="row align-items-center">
<div class="col-xl-3 col-sm-6 text-center text-sm-start last-paragraph-no-margin fs-15 text-dark-gray order-3 order-md-1">
<p>&COPY; Copyright 2024 <a href="index.html" target="_blank" class="text-dark-gray text-dark-gray-hover text-decoration-line-bottom fw-600">Crafto</a></p>
</div>
<div class="col-xl-6 text-center lg-mt-10px sm-mt-0 sm-mb-15px order-1 order-xl-2 order-md-3">
<ul class="footer-navbar">
<li class="nav-item"><a href="demo-travel-agency-about.html" class="nav-link">About</a></li>
<li class="nav-item"><a href="demo-travel-agency-destinations.html" class="nav-link">Destinations</a></li>
<li class="nav-item"><a href="demo-travel-agency-tours.html" class="nav-link">Tours</a></li>
<li class="nav-item"><a href="demo-travel-agency-reviews.html" class="nav-link">Reviews</a></li>
<li class="nav-item"><a href="demo-travel-agency-blog.html" class="nav-link">Blog</a></li>
<li class="nav-item"><a href="demo-travel-agency-contact.html" class="nav-link">Contact</a></li>
</ul>
</div>
<div class="col-xl-3 col-sm-6 position-relative text-center text-sm-end elements-social social-text-style-08 order-2 order-xl-3 xs-mb-10px">
<ul class="small-icon dark">
<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>
</footer>
<div class="scroll-progress d-none d-xxl-block">
<a href="demo-travel-agency-about.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>