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

487 lines
29 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-destinations.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-destinations.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-destinations.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-destinations.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-destinations.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-destinations.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-destinations-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">Explore the world</h2>
<h1 class="mb-0 text-white alt-font ls-minus-2px text-uppercase fw-600 text-shadow-double-large">Destinations</h1>
</div>
</div>
</div>
</section>
<section class="position-relative">
<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 row-cols-1 row-cols-xl-4 row-cols-lg-3 row-cols-sm-2 justify-content-center mb-7 lg-mb-5 md-mb-10 sm-mb-0" data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;scale&quot;:[0.9,1], &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 interactive-banner-style-01 last-paragraph-no-margin mb-30px">
<figure class="m-0 position-relative hover-box border-radius-6px overflow-hidden">
<img src="images/demo-travel-agency-home-07.jpg" alt />
<div class="position-absolute top-0px left-0px w-100 h-100 bg-gradient-gray-light-dark-transparent opacity-1"></div>
<figcaption class="w-100 h-100 d-flex flex-column justify-content-end align-items-center p-30px">
<div class="position-relative z-index-1">
<a href="demo-travel-agency-tours.html" class="d-flex justify-content-center align-items-center mx-auto icon-box w-70px h-70px rounded-circle bg-white mb-50px box-shadow-quadruple-large"><i class="bi bi-arrow-right-short text-dark-gray icon-medium lh-0px"></i></a>
<a href="demo-travel-agency-tours.html" class="alt-font fs-22 fw-500 lette text-white d-inline-block text-uppercase">India</a>
</div>
<div class="box-overlay bg-dark-gray"></div>
</figcaption>
</figure>
</div>
<div class="col text-center interactive-banner-style-01 last-paragraph-no-margin mb-30px">
<figure class="m-0 position-relative hover-box border-radius-6px overflow-hidden">
<img src="images/demo-travel-agency-home-08.jpg" alt />
<div class="position-absolute top-0px left-0px w-100 h-100 bg-gradient-gray-light-dark-transparent opacity-1"></div>
<figcaption class="w-100 h-100 d-flex flex-column justify-content-end align-items-center p-30px">
<div class="position-relative z-index-1">
<a href="demo-travel-agency-tours.html" class="d-flex justify-content-center align-items-center mx-auto icon-box w-70px h-70px rounded-circle bg-white mb-50px box-shadow-quadruple-large"><i class="bi bi-arrow-right-short text-dark-gray icon-medium lh-0px"></i></a>
<a href="demo-travel-agency-tours.html" class="alt-font fs-22 fw-500 lette text-white d-inline-block text-uppercase">Poland</a>
</div>
<div class="box-overlay bg-dark-gray"></div>
</figcaption>
</figure>
</div>
<div class="col text-center interactive-banner-style-01 last-paragraph-no-margin mb-30px">
<figure class="m-0 position-relative hover-box border-radius-6px overflow-hidden">
<img src="images/demo-travel-agency-home-09.jpg" alt />
<div class="position-absolute top-0px left-0px w-100 h-100 bg-gradient-gray-light-dark-transparent opacity-1"></div>
<figcaption class="w-100 h-100 d-flex flex-column justify-content-end align-items-center p-30px">
<div class="position-relative z-index-1">
<a href="demo-travel-agency-tours.html" class="d-flex justify-content-center align-items-center mx-auto icon-box w-70px h-70px rounded-circle bg-white mb-50px box-shadow-quadruple-large"><i class="bi bi-arrow-right-short text-dark-gray icon-medium lh-0px"></i></a>
<a href="demo-travel-agency-tours.html" class="alt-font fs-22 fw-500 lette text-white d-inline-block text-uppercase">Mexico</a>
</div>
<div class="box-overlay bg-dark-gray"></div>
</figcaption>
</figure>
</div>
<div class="col text-center interactive-banner-style-01 last-paragraph-no-margin mb-30px">
<figure class="m-0 position-relative hover-box border-radius-6px overflow-hidden">
<img src="images/demo-travel-agency-home-10.jpg" alt />
<div class="position-absolute top-0px left-0px w-100 h-100 bg-gradient-gray-light-dark-transparent opacity-1"></div>
<figcaption class="w-100 h-100 d-flex flex-column justify-content-end align-items-center p-30px">
<div class="position-relative z-index-1">
<a href="demo-travel-agency-tours.html" class="d-flex justify-content-center align-items-center mx-auto icon-box w-70px h-70px rounded-circle bg-white mb-50px box-shadow-quadruple-large"><i class="bi bi-arrow-right-short text-dark-gray icon-medium lh-0px"></i></a>
<a href="demo-travel-agency-tours.html" class="alt-font fs-22 fw-500 lette text-white d-inline-block text-uppercase">Egypt</a>
</div>
<div class="box-overlay bg-dark-gray"></div>
</figcaption>
</figure>
</div>
<div class="col text-center interactive-banner-style-01 last-paragraph-no-margin mb-30px">
<figure class="m-0 position-relative hover-box border-radius-6px overflow-hidden">
<img src="images/demo-travel-agency-home-11.jpg" alt />
<div class="position-absolute top-0px left-0px w-100 h-100 bg-gradient-gray-light-dark-transparent opacity-1"></div>
<figcaption class="w-100 h-100 d-flex flex-column justify-content-end align-items-center p-30px">
<div class="position-relative z-index-1">
<a href="demo-travel-agency-tours.html" class="d-flex justify-content-center align-items-center mx-auto icon-box w-70px h-70px rounded-circle bg-white mb-50px box-shadow-quadruple-large"><i class="bi bi-arrow-right-short text-dark-gray icon-medium lh-0px"></i></a>
<a href="demo-travel-agency-tours.html" class="alt-font fs-22 fw-500 lette text-white d-inline-block text-uppercase">Africa</a>
</div>
<div class="box-overlay bg-dark-gray"></div>
</figcaption>
</figure>
</div>
<div class="col text-center interactive-banner-style-01 last-paragraph-no-margin mb-30px">
<figure class="m-0 position-relative hover-box border-radius-6px overflow-hidden">
<img src="images/demo-travel-agency-home-12.jpg" alt />
<div class="position-absolute top-0px left-0px w-100 h-100 bg-gradient-gray-light-dark-transparent opacity-1"></div>
<figcaption class="w-100 h-100 d-flex flex-column justify-content-end align-items-center p-30px">
<div class="position-relative z-index-1">
<a href="demo-travel-agency-tours.html" class="d-flex justify-content-center align-items-center mx-auto icon-box w-70px h-70px rounded-circle bg-white mb-50px box-shadow-quadruple-large"><i class="bi bi-arrow-right-short text-dark-gray icon-medium lh-0px"></i></a>
<a href="demo-travel-agency-tours.html" class="alt-font fs-22 fw-500 lette text-white d-inline-block text-uppercase">Kenya</a>
</div>
<div class="box-overlay bg-dark-gray"></div>
</figcaption>
</figure>
</div>
<div class="col text-center interactive-banner-style-01 last-paragraph-no-margin mb-30px">
<figure class="m-0 position-relative hover-box border-radius-6px overflow-hidden">
<img src="images/demo-travel-agency-home-13.jpg" alt />
<div class="position-absolute top-0px left-0px w-100 h-100 bg-gradient-gray-light-dark-transparent opacity-1"></div>
<figcaption class="w-100 h-100 d-flex flex-column justify-content-end align-items-center p-30px">
<div class="position-relative z-index-1">
<a href="demo-travel-agency-tours.html" class="d-flex justify-content-center align-items-center mx-auto icon-box w-70px h-70px rounded-circle bg-white mb-50px box-shadow-quadruple-large"><i class="bi bi-arrow-right-short text-dark-gray icon-medium lh-0px"></i></a>
<a href="demo-travel-agency-tours.html" class="alt-font fs-22 fw-500 lette text-white d-inline-block text-uppercase">Maldives</a>
</div>
<div class="box-overlay bg-dark-gray"></div>
</figcaption>
</figure>
</div>
<div class="col text-center interactive-banner-style-01 last-paragraph-no-margin mb-30px">
<figure class="m-0 position-relative hover-box border-radius-6px overflow-hidden">
<img src="images/demo-travel-agency-home-14.jpg" alt />
<div class="position-absolute top-0px left-0px w-100 h-100 bg-gradient-gray-light-dark-transparent opacity-1"></div>
<figcaption class="w-100 h-100 d-flex flex-column justify-content-end align-items-center p-30px">
<div class="position-relative z-index-1">
<a href="demo-travel-agency-tours.html" class="d-flex justify-content-center align-items-center mx-auto icon-box w-70px h-70px rounded-circle bg-white mb-50px box-shadow-quadruple-large"><i class="bi bi-arrow-right-short text-dark-gray icon-medium lh-0px"></i></a>
<a href="demo-travel-agency-tours.html" class="alt-font fs-22 fw-500 lette text-white d-inline-block text-uppercase">Dubai</a>
</div>
<div class="box-overlay bg-dark-gray"></div>
</figcaption>
</figure>
</div>
<div class="col text-center interactive-banner-style-01 last-paragraph-no-margin lg-mb-30px">
<figure class="m-0 position-relative hover-box border-radius-6px overflow-hidden">
<img src="images/demo-travel-agency-destinations-01.jpg" alt />
<div class="position-absolute top-0px left-0px w-100 h-100 bg-gradient-gray-light-dark-transparent opacity-1"></div>
<figcaption class="w-100 h-100 d-flex flex-column justify-content-end align-items-center p-30px">
<div class="position-relative z-index-1">
<a href="demo-travel-agency-tours.html" class="d-flex justify-content-center align-items-center mx-auto icon-box w-70px h-70px rounded-circle bg-white mb-50px box-shadow-quadruple-large"><i class="bi bi-arrow-right-short text-dark-gray icon-medium lh-0px"></i></a>
<a href="demo-travel-agency-tours.html" class="alt-font fs-22 fw-500 lette text-white d-inline-block text-uppercase">Greece</a>
</div>
<div class="box-overlay bg-dark-gray"></div>
</figcaption>
</figure>
</div>
<div class="col text-center interactive-banner-style-01 last-paragraph-no-margin md-mb-30px">
<figure class="m-0 position-relative hover-box border-radius-6px overflow-hidden">
<img src="images/demo-travel-agency-destinations-02.jpg" alt />
<div class="position-absolute top-0px left-0px w-100 h-100 bg-gradient-gray-light-dark-transparent opacity-1"></div>
<figcaption class="w-100 h-100 d-flex flex-column justify-content-end align-items-center p-30px">
<div class="position-relative z-index-1">
<a href="demo-travel-agency-tours.html" class="d-flex justify-content-center align-items-center mx-auto icon-box w-70px h-70px rounded-circle bg-white mb-50px box-shadow-quadruple-large"><i class="bi bi-arrow-right-short text-dark-gray icon-medium lh-0px"></i></a>
<a href="demo-travel-agency-tours.html" class="alt-font fs-22 fw-500 lette text-white d-inline-block text-uppercase">Japan</a>
</div>
<div class="box-overlay bg-dark-gray"></div>
</figcaption>
</figure>
</div>
<div class="col text-center interactive-banner-style-01 last-paragraph-no-margin xs-mb-30px">
<figure class="m-0 position-relative hover-box border-radius-6px overflow-hidden">
<img src="images/demo-travel-agency-destinations-03.jpg" alt />
<div class="position-absolute top-0px left-0px w-100 h-100 bg-gradient-gray-light-dark-transparent opacity-1"></div>
<figcaption class="w-100 h-100 d-flex flex-column justify-content-end align-items-center p-30px">
<div class="position-relative z-index-1">
<a href="demo-travel-agency-tours.html" class="d-flex justify-content-center align-items-center mx-auto icon-box w-70px h-70px rounded-circle bg-white mb-50px box-shadow-quadruple-large"><i class="bi bi-arrow-right-short text-dark-gray icon-medium lh-0px"></i></a>
<a href="demo-travel-agency-tours.html" class="alt-font fs-22 fw-500 lette text-white d-inline-block text-uppercase">Morocco</a>
</div>
<div class="box-overlay bg-dark-gray"></div>
</figcaption>
</figure>
</div>
<div class="col text-center interactive-banner-style-01 last-paragraph-no-margin">
<figure class="m-0 position-relative hover-box border-radius-6px overflow-hidden">
<img src="images/demo-travel-agency-destinations-04.jpg" alt />
<div class="position-absolute top-0px left-0px w-100 h-100 bg-gradient-gray-light-dark-transparent opacity-1"></div>
<figcaption class="w-100 h-100 d-flex flex-column justify-content-end align-items-center p-30px">
<div class="position-relative z-index-1">
<a href="demo-travel-agency-tours.html" class="d-flex justify-content-center align-items-center mx-auto icon-box w-70px h-70px rounded-circle bg-white mb-50px box-shadow-quadruple-large"><i class="bi bi-arrow-right-short text-dark-gray icon-medium lh-0px"></i></a>
<a href="demo-travel-agency-tours.html" class="alt-font fs-22 fw-500 lette text-white d-inline-block text-uppercase">Serbia</a>
</div>
<div class="box-overlay bg-dark-gray"></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-destinations.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-destinations.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 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>