/*-----------------------------------------------------------------------------------

[Table of contents]

1. Font
2. Css Variable for colors
3. Common CSS
4. Heading CSS
5. Button CSS
6. Preloader CSS
7. Animation CSS 
8. Header - Main Navigation Section
9. Hero Slider 
10. Typing Text Section
11. Video Popup Model 
12. Scrolling Text Section
13. How it work Section
14. Advanced Features Section
15. Logo Slider Section
16. Key Features Section
17. CTA Section
18. Footer Section
19. Faq Section
20. Download Section


-----------------------------------------------------------------------------------*/

/* --------Font--------------- */
/* @import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700;800&display=swap'); */

// <uniquifier>: Use a unique and descriptive class name
// <weight>: Use a value from 200 to 800

.manrope-<uniquifier > {
  font-family: "Manrope", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}

/* -----------Css-variable------ */

:root {
  --primery: #f69f00;
  --green: #026223;
  --dark-green: #003813;
  --light-yellow: #eeeadf;
  --whitish: #f7f5ef;
  --light-green: #d9e3d6;
  --white: #ffffff;

  --dark-black: #181a22;
  --dark-greay: #9599ab;
  --greay: #afafaf;
  --text-greay: #848484;
  --black: #000000;
  --red-color: #ff0000;
}

/* ------Common-Css------------- */

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-size: 16px;
  line-height: 1.7;
  font-family: "Manrope", sans-serif;
  color: var(--black);
  background-color: var(--light-yellow);
}

.page_wrapper {
  width: 100%;
  overflow-x: hidden;
}

a {
  text-decoration: none;
  color: var(--black);
  transition: 0.4s all;
}

a:hover {
  text-decoration: none;
  color: var(--primery);
}

ul,
li {
  padding: 0;
  list-style-type: none;
  margin: 0;
}

button:focus,
.btn.focus,
.btn:focus {
  outline: none;
  box-shadow: none;
}

@media screen and (min-width: 1200px) {
  .container {
    max-width: 1170px;
  }
}

/* section heading */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 700;
  letter-spacing: normal;
}

h1 {
  font-size: 65px;
  color: var(--green);
}

h2 {
  font-size: 50px;
  color: var(--green);
}

h3 {
  font-size: 35px;
  color: var(--green);
}

h4 {
  font-size: 30px;
  color: var(--black);
}

h5 {
  font-size: 25px;
  color: var(--black);
}

h6 {
  font-size: 20px;
  color: var(--black);
}

h2 span {
  color: var(--primery);
}

.section_title h2 span img {
  margin-left: 10px;
}

.section_title.white_text h2,
.section_title.white_text p {
  color: var(--white);
}

.section_title {
  text-align: center;
}

.section_title p {
  padding: 0 300px;
}

.white_text p,
.white_text .section_title h2,
.white_text span,
.white_text h3 {
  color: var(--white);
}

.title_badge {
  color: var(--white);
  display: inline-block;
  padding: 2px 18px;
  border-radius: 100px;
  background-color: var(--primery);
  margin-bottom: 10px;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 2px;
  font-size: 12px;
}

.row_am {
  padding: 50px 0;
}

/* purple button */
.btn {
  font-weight: 700;
}

.puprple_btn {
  background-color: var(--primery);
  color: var(--white);
  border-radius: 100px;
  padding: 12px 30px;
  position: relative;
  overflow: hidden;
  z-index: 1;
  font-weight: 600;
  font-size: 16px;
}

.puprple_btn::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 0%;
  height: 100%;
  background-color: var(--white);
  border-radius: 6px;
  transition: 0.6s all;
  z-index: -1;
}

.puprple_btn:hover::before {
  width: 100%;
}

.puprple_btn:hover {
  color: var(--dark-green);
}

/* light button */
.white_btn .puprple_btn {
  background-color: var(--white);
  border: solid 1px var(--primery);
  color: var(--primery);
  border-radius: 100px;
  padding: 12px 30px;
  position: relative;
  overflow: hidden;
  z-index: 1;
  font-weight: 600;
  font-size: 16px;
}

.white_btn .puprple_btn::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 0%;
  height: 100%;
  background-color: var(--primery);
  border-radius: 6px;
  transition: 0.6s all;
  z-index: -1;
  color: var(--white);
}

.white_btn .puprple_btn:hover::before {
  width: 100%;
}

.white_btn .puprple_btn:hover {
  color: var(--white);
  border: solid 1px var(--white);
}

.btn_block {
  position: relative;
  display: inline-block;
}

.btn_bottom {
  z-index: 1;
  border: 1px solid var(--primery);
  border-radius: 100px;
  position: absolute;
  top: -8px;
  left: 8px;
  right: -12px;
  transform: translate(-0.52em, 0.52em);
  width: 100%;
  height: 100%;
}

/* slider controls */
.owl-carousel .owl-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin-top: 20px;
}

.owl-carousel .owl-dots button {
  display: block;
  width: 15px;
  height: 15px;
  background-color: transparent;
  border: 1px solid var(--primery);
  border-radius: 15px;
  margin: 0 5px;
}

.owl-carousel .owl-dots button.active {
  background-color: var(--primery);
}

.container.container-sm {
  max-width: 780px;
}

/* -------------Preloader-Css-Start-------------- */

/* Preloader */
#preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.9);
  z-index: 999999;
}

#loader {
  display: block;
  position: relative;
  left: 50%;
  top: 50%;
  width: 150px;
  height: 150px;
  margin: -75px 0 0 -75px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: var(--primery);
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

#loader:before {
  content: "";
  position: absolute;
  top: 5px;
  left: 5px;
  right: 5px;
  bottom: 5px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: var(--dark-black);
  -webkit-animation: spin 3s linear infinite;
  animation: spin 3s linear infinite;
}

#loader:after {
  content: "";
  position: absolute;
  top: 15px;
  left: 15px;
  right: 15px;
  bottom: 15px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: var(--dark-greay);
  -webkit-animation: spin 1.5s linear infinite;
  animation: spin 1.5s linear infinite;
}

.spin_text {
  transform-origin: 50% 50% 0;
  transform: rotate(0deg);
  -webkit-animation: spin 15s linear infinite;
  -moz-animation: spin 15s linear infinite;
  animation: spin 15s linear infinite;
}

@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

/* ------Round Animation------- */
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/* --------Object-Moving-Animation-Css-Start----- */
.moving_animation {
  animation: moving_object 6s infinite linear;
}

.moving_position_animatin {
  position: relative;
  animation: moving_position_animatin 6s infinite linear;
  z-index: -1;
}

@keyframes moving_object {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-30px);
  }

  100% {
    transform: translateY(0);
  }
}

@keyframes moving_position_animatin {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-30px);
  }

  100% {
    transform: translateY(0);
  }
}

/* -----------Header-Css-Start------------------- */
/* header wraper */
header {
  position: absolute;
  width: 100%;
  z-index: 99999;
  transition: 0.4s all;
  background-color:rgb(255 255 255 / 87%);
}

header.fix_style {
  position: fixed;
  top: 0;
  backdrop-filter: blur(5px);
  /*background-color: var(--green);*/
  background-color: rgb(255 255 255 / 87%);
  padding: 0;
  transition: none;
  opacity: 0;
  pointer-events: none;
}

header.fixed {
  pointer-events: all;
  opacity: 1;
  transition: 0.4s all;
}

header.fixed .navbar {
  padding: 0;
}

/* navigation bar */
.navbar {
  padding: 0;
}

.navbar-expand-lg .navbar-nav {
  align-items: center;
}

.navbar-expand-lg .navbar-nav .nav-link {
  padding: 30px 12px;
  font-weight: 600;
  transition: 0.4s all;
  color: var(--black);
}

.navbar-expand-lg .navbar-nav .nav-link:hover {
  color: var(--primery);
}

.navbar-expand-lg .navbar-nav .nav-item .btn_block {
  margin-left: 30px;
}

.navbar-expand-lg .navbar-nav .nav-link.dark_btn {
  color: var(--white);
  background-color: var(--primery);
  font-size: 16px;
  padding: 9px 40px;
  border-radius: 100px;
  position: relative;
  transition: 0.4s all;
  z-index: 2;
  overflow: hidden;
}

.navbar-expand-lg .navbar-nav .nav-link.dark_btn::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 0%;
  height: 100%;
  background-color: var(--white);
  border-radius: 100px;
  transition: 0.6s all;
  z-index: -1;
}

.navbar-expand-lg .navbar-nav .nav-link.dark_btn:hover::before {
  width: 100%;
}

.navbar-expand-lg .navbar-nav .nav-link.dark_btn:hover {
  color: var(--dark-green);
}

.navbar-brand img {
  width: 135px;
}

.navbar-brand h3 {
  color: var(--primery);
  font-weight: 800;
  font-size: 34px;
  margin: 0;
}

/* navigation bar dropdown */
.navbar-expand-lg .navbar-nav .has_dropdown {
  display: flex;
  align-items: center;
  position: relative;
  border-radius: 10px 10px 0 0;
  transition: 0.4s all;
}

.navbar-expand-lg .navbar-nav .has_dropdown .drp_btn {
  position: relative;
  right: 8px;
  top: 2px;
  color: var(--white);
}

.navbar-expand-lg .navbar-nav .has_dropdown .sub_menu {
  position: absolute;
  top: 100%;
  background-color: var(--white);
  border-radius: 10px;
  min-width: 210px;
  max-width: 230px;
  margin-top: -10px;
  transition: 0.4s all;
  opacity: 0;
  pointer-events: none;
  border-bottom: 3px solid var(--primery);
}

.navbar-expand-lg .navbar-nav .has_dropdown .sub_menu ul {
  margin-left: 0;
  padding: 15px 20px;
}

.navbar-expand-lg .navbar-nav .has_dropdown .sub_menu ul li a {
  font-size: 15px;
  position: relative;
  transition: 0.4s all;
  line-height: 35px;
  font-weight: 600;
}

.navbar-expand-lg .navbar-nav .has_dropdown .sub_menu ul li a:hover {
  color: var(--primery);
}

.navbar-expand-lg .navbar-nav .has_dropdown:hover > a,
.navbar-expand-lg .navbar-nav .has_dropdown:hover > .drp_btn {
  color: var(--primery);
}

.navbar-expand-lg .navbar-nav .has_dropdown:hover .sub_menu {
  opacity: 1;
  pointer-events: all;
  margin-top: 1px;
}

/* navigation toggle menu */
.toggle-wrap {
  padding: 10px;
  position: relative;
  cursor: pointer;

  /*disable selection*/
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.toggle-bar,
.toggle-bar::before,
.toggle-bar::after,
.toggle-wrap.active .toggle-bar,
.toggle-wrap.active .toggle-bar::before,
.toggle-wrap.active .toggle-bar::after {
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

.toggle-bar {
  width: 25px;
  margin: 10px 0;
  position: relative;
  border-top: 4px solid var(--white);
  display: block;
}

.toggle-bar::before,
.toggle-bar::after {
  content: "";
  display: block;
  background: var(--white);
  height: 4px;
  width: 30px;
  position: absolute;
  top: -12px;
  right: 0px;
  -ms-transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
  -ms-transform-origin: 13%;
  -webkit-transform-origin: 13%;
  transform-origin: 13%;
}

.white_header .toggle-bar,
.white_header .toggle-bar::before,
.white_header .toggle-bar::after {
  border-top: 4px solid var(--white);
}

.toggle-bar::after {
  top: 4px;
}

.toggle-wrap.active .toggle-bar {
  border-top: 6px solid transparent;
}

.toggle-wrap.active .toggle-bar::before {
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.toggle-wrap.active .toggle-bar::after {
  -ms-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

/* ---------Hero-Slider-Css-Start------------------ */
/* hero slider wraper */
.banner_section {
  /*margin-top: 70px;*/
  padding-top: 180px;
  padding-bottom: 180px;
  position: relative;
  background-image: url(../images/hero_bg.webp);
  background-attachment: fixed;
  background-size: cover;
  overflow: hidden;
}

.banner_section .container {
  position: relative;
}

.banner_section .row {
  align-items: center;
}

/* hero slider text */
.banner_section .banner_text {
  padding-right: 10px;
}

/* hero slider heading h1 */
.banner_section .banner_text h1 {
  font-size: 70px;
  color: var(--white);
  letter-spacing: -1.5px;
  font-weight: 700;
  margin-bottom: 20px;
}

.banner_section .banner_text h1 span {
  color: var(--primery);
}

.banner_section .banner_text .type-wrap span {
  font-weight: 700;
  color: var(--white);
}

.banner_section .banner_text p {
  font-size: 18px;
  padding-right: 80px;
}

/* hero slider button */
.banner_section .app_btn {
  display: flex;
  align-items: center;
}

/* hero slider list */
.banner_section .app_btn li a {
  display: block;
  padding: 15px 35px;
  background-color: var(--black);
  border: none;
  position: relative;
  border-radius: 12px;
  transition: 0.4s all;
}

.banner_section .app_btn li a:hover {
  background-color: var(--primery);
  transition: 0.4s all;
}

.banner_section .app_btn li:last-child {
  margin-left: 25px;
}

.banner_section .app_btn li a img {
  transition: 0.4s all;
  height: 36px;
}

/* hero slider users */
.banner_section .used_app {
  margin: 35px 0;
}

.banner_section .used_app ul {
  display: flex;
  align-items: center;
  margin: 0 10px 20px 0;
}

.banner_section .used_app h6 {
  color: var(--white);
}

.banner_section .used_app ul li:not(:first-child) {
  margin-left: -20px;
}

.banner_section .used_app ul li:not(:first-child) img {
  border: 3px solid var(--green);
  border-radius: 100px;
}

.banner_section .used_app p {
  font-size: 15px;
  line-height: 19px;
  margin-bottom: 0;
}

/* hero slider images */
.banner_section .banner_slider {
  display: flex;
  position: relative;
  z-index: 1;
}

.banner_section .banner_slider .left_icon {
  position: absolute;
  left: 0px;
  bottom: 150px;
  z-index: 9999;
}

.banner_section .banner_slider .right_icon {
  position: absolute;
  right: 130px;
  top: -10px;
}

/* hero slider mobile frame */
.banner_section .banner_slider .slider_frame {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: 999;
  width: 300px;
}

.banner_section .banner_slider #frmae_slider {
  width: 280px;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 40px;
}

.banner_section .banner_slider #frmae_slider::before {
  content: "";
  position: absolute;
  left: -5px;
  top: 5px;
  background-color: #fff;
  width: 100%;
  height: 90.5%;
  border-radius: 23px;
}

/* hero overlay bg */

.hero_overlay {
  position: absolute;
  width: 100%;
  bottom: -6px;
  text-align: center bottom;
}

/* hero side element bg */

.hero_side_element {
  position: absolute;
}

.hero_side_element.left_side {
  left: -50px;
  bottom: -20px;
}

.hero_side_element.right_side {
  right: 0;
  bottom: 0;
}

.hero_overlay img {
  width: 100%;
}

/* hero slider control dots */
.banner_section .owl-dots {
  margin-top: 40px;
}

.owl-carousel .owl-item img {
  max-width: 100%;
  width: auto;
}

/* hero static image */

.banner_section .banner_slider .hero_img {
  text-align: center;
  width: 100%;
}

/* -----Typing Text------- */
.typed-cursor {
  opacity: 1;
  -webkit-animation: blink 0.7s infinite;
  -moz-animation: blink 0.7s infinite;
  animation: blink 0.7s infinite;
}

@keyframes blink {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

/* how it works video model   */
.modal {
  z-index: 999999;
}

.modal-backdrop.show {
  z-index: 99999;
  opacity: 0.7;
}

.youtube-video .modal-dialog {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 100%;
  padding: 0 15px;
  height: 100%;
  max-width: 1240px !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

#video-container {
  position: relative;
  padding-bottom: 50%;
  padding-top: 30px;
  height: 0;
  overflow: hidden;
}

iframe#youtubevideo {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

.youtube-video .modal-footer {
  border: none;
  text-align: center;
  display: block;
  padding: 0;
}

.youtube-video .modal-content {
  background: none !important;
  border: none;
}

#close-video {
  color: #fff;
  font-size: 30px;
}

/* ---------- text List Flow Css Start ------------- */

.text_list_section .slider_block {
  background-color: var(--green);
  padding: 20px 0;
  transform: rotate(-1.5deg);
  /* pointer-events: none; */
  width: 100%;
  overflow-x: hidden;
}

.text_list_section .down_fix {
  transform: rotate(-5deg);
  position: relative;
  bottom: -30px;
  z-index: 9;
}

.text_list_section.rotet_down {
  transform: rotate(0.5deg);
}

.text_list_section .owl-stage,
.text_list_section .owl-stage-outer,
.textFlow_list .owl-stage,
.textFlow_list .owl-stage-outer {
  height: 55px;
}

.text_block {
  display: flex;
  align-items: center;
}

.text_block span {
  color: var(--white);
  font-size: 50px;
  font-family: var(--font-bebas);
  font-weight: 700;
  line-height: 1;
}

.text_block .mark_star {
  margin: 0 60px;
  font-family: "Playball", cursive;
}

/* -------------How It Work HOME Section Css Start------------- */
.how_work_block {
  position: relative;
}

.how_work_block .how_work_block_list {
  position: relative;
  padding-top: 40px;
}

.how_work_block .how_work_block_list .hwb_box {
  position: relative;
  background-color: var(--whitish);
  border: solid 2px var(--white);
  padding: 40px 40px 0 40px;
  border-radius: 20px;
  text-align: center;
  height: auto;
  margin-bottom: 40px;
}

.how_work_block .how_work_block_list .hwb_box .text {
  padding: 40px 0;
}

.how_work_block .how_work_block_list .hwb_box .text p {
  padding: 10px 0 0 0;
}

.how_work_block .how_work_block_list .hwb_box .icon {
  text-align: center;
}

.how_work_block .how_work_block_list .hwb_box .hwb_num {
  text-align: center;
  font-size: 22px;
  color: var(--green);
  font-weight: 700;
  border-bottom: solid 2px var(--primery);
  margin: 0 auto;
  margin-bottom: -2px;
  width: 30px;
}

.ctr_app_btn_block {
  align-items: center;
  justify-content: center;
  margin-top: 30px;
  text-align: center;
}

.ctr_app_btn_block .app_btn {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 15px;
}

.ctr_app_btn_block .app_btn li a {
  display: block;
  padding: 15px 35px;
  background-color: var(--black);
  border: none;
  position: relative;
  border-radius: 12px;
  transition: 0.4s all;
}

.ctr_app_btn_block .app_btn li a:hover {
  background-color: var(--green);
  transition: 0.4s all;
}

.ctr_app_btn_block .app_btn li:last-child {
  margin-left: 25px;
}

.ctr_app_btn_block .app_btn li a img {
  transition: 0.4s all;
  height: 36px;
}

.section_element {
  position: absolute;
}

.section_element.left_sd {
  top: 200px;
  left: -20px;
}

.section_element.right_sd {
  top: 500px;
  right: 0px;
  animation: mymove 15s infinite;
}

/* --------- Advanced key features Section Css Start---------- */
.advance_feature_section {
  padding-left: 15px !important;
  padding-right: 15px !important;
  margin-top: 40px;
}

.advance_feature_section .af_innner {
  background: var(--whitish);
  max-width: 1370px;
  margin: 0 auto;
  border-radius: 20px;
  padding: 100px 0;
  position: relative;
  overflow: hidden;
  border: solid 2px var(--white);
}

.advance_feature_section .row {
  align-items: flex-start;
}

.advance_feature_section .af_innner .listing_inner {
  display: flex;
  flex-wrap: wrap;
  gap: 4%;
  padding-top: 40px;
}

.advance_feature_section .af_innner .listing_inner .af_block {
  background-color: var(--white);
  padding: 0px;
  border-radius: 20px;
  width: 48%;
  margin-bottom: 40px;
}

.advance_feature_section .af_innner .listing_inner .af_block img {
  border-radius: 20px 20px 0 0;
  max-width: 100%;
}

.advance_feature_section .af_innner .listing_inner .af_block .text {
  padding: 40px;
}

.advance_feature_section .af_innner .listing_inner .af_block h4 {
  margin: 0 0 20px 0;
  padding: 0 150px 0 0;
}

.advance_feature_section .af_innner .listing_inner .af_block p {
  margin-bottom: 0;
}

.advance_feature_section .ctr_app_btn_block {
  flex: auto;
}

/* ------------Our Client Listing Section Css Start---------- */
.our_client {
  position: relative;
}

.our_client .client_list {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 30px;
  margin-top: 50px;
}

.our_client .client_list .client_logo {
  background-color: var(--white);
  padding: 20px;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 86px;
}

.our_client .client_list .client_logo img {
  width: 150px;
  height: auto;
}

/* ---------Key Feature Section Css Start---------- */
.key_feature_section {
  padding-left: 15px !important;
  padding-right: 15px !important;
  background: var(--green);
  position: relative;
  padding: 150px 0;
}

.key_innner {
  /*max-width: 1370px;*/
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}

.key_innner .section_title {
  margin-bottom: 35px;
  position: relative;
}

.key_innner .section_title h2 {
  color: var(--white);
}

.feature_box {
  text-align: center;
  background-color: var(--white);
  border-radius: 20px;
}

.feature_box .txt_blk {
  text-align: left;
  padding: 30px;
}

.feature_box h6 {
  color: var(--black);
}

.feature_box p .story_bold {
  font-weight: 700;
  font-size: 18px;
}

.feature_box .img {
  margin-top: 0;
}

.feature_box .img img {
  border-radius: 20px 20px 0 0;
  width: 100%;
}

.key_innner .owl-nav button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  border-radius: 100px;
  border: 1px solid var(--dark-greay) !important;
  transition: 0.4s all;
}

.key_innner .owl-nav button span {
  color: var(--black);
  font-size: 22px;
  line-height: 1.2;
}

.key_innner .owl-nav button.owl-prev {
  left: -50px;
  background-color: var(--white);
}

.key_innner .owl-nav button.owl-next {
  right: -50px;
  background-color: var(--white);
}

.key_innner .owl-nav button:hover {
  background-color: var(--dark-green);
  border-color: var(--white);
}

.key_innner .owl-nav button:hover span {
  color: var(--primery);
}

.kf_side_element {
  position: absolute;
}

.kf_side_element.left_side {
  top: 300px;
  left: 100px;
}

.kf_side_element.right_side {
  top: 600px;
  right: 50px;
}

.key_feature_section::before {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: -4px;
  background-image: url(../images/overlay_bg1.png);
  background-size: contain;
  background-repeat: no-repeat;
  width: 100%;
  height: 90px;
  background-position: top center;
  z-index: 1;
}

.key_feature_section::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -4px;
  background-image: url(../images/overlay_bg2.png);
  background-size: contain;
  background-repeat: no-repeat;
  width: 100%;
  height: 90px;
  background-position: bottom center;
  z-index: 1;
}

.ctr_cta {
  margin: 0 auto;
  margin-top: 50px;
  text-align: center;
}

/* ------  CTA section ------------- */

.cta_section.new {
  padding-top: 50px;
}

.cta_section.new .cta_box {
  background: url(../images/yellow_texture.webp) repeat;
  position: relative;
  z-index: 99;
  border-radius: 20px;
  padding: 60px 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: -130px;
}

.cta_section.new .cta_box .section_title {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  padding-left: 80px;
}

.cta_section.new .cta_box .section_title p {
  padding: 0;
}

.cta_section.new .cta_box .section_title .customer_icon {
  position: absolute;
  left: 0;
  top: 10%;
}

.cta_section.new .cta_box .btn_block {
  display: flex;
  justify-content: end;
  align-content: center;
  height: 100%;
  flex-wrap: wrap;
}

.cta_section.new .cta_box .btn {
  float: left;
  padding: 15px 30px;
  background-color: var(--white);
  border-radius: 100px;
}

.cta_section.new .cta_box .call_btn {
  background-color: var(--green);
  margin-right: 15px;
  font-weight: 700;
  border-radius: 100px;
}

.cta_section.new .cta_box .email_btn:hover {
  background-color: var(--green);
  transition: all ease-in-out 0.5s;
  color: var(--white);
}

.cta_section.new .cta_box .right {
  width: 54%;
}

.cta_section.new .cta_box .element .element1,
.t_element2 {
  position: absolute;
}

.cta_section.new .cta_box .element .element1 {
  right: 35%;
  top: 10%;
  animation: mymove 15s infinite;
}

.cta_section.new .cta_box .element .element2 {
  left: 20%;
  bottom: 6%;
  animation: mymove 8s infinite;
}

/* ------Footer-Css-Start-------------- */
/* footer wraper */
footer {
  position: relative;
}

footer .top_footer {
  background-color: var(--dark-green);
  padding: 210px 0 00px 0;
  position: relative;
  overflow: hidden;
}

.top_footer::before {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: -2px;
  background-image: url(../images/footer_overlay.png);
  background-size: contain;
  background-repeat: no-repeat;
  width: 100%;
  height: 90px;
  background-position: top center;
  z-index: 1;
}

/* footer logo */
footer .top_footer .logo {
  margin-bottom: 40px;
}

footer .top_footer .logo img {
  width: 135px;
}

footer .top_footer .abt_side .app_btn {
  display: flex;
}

footer .top_footer .abt_side .app_btn li {
  margin: 0 20px 0 0;
}

footer .top_footer .abt_side li {
  padding: 0 0 10px 0;
}

footer .top_footer .abt_side p {
  padding: 0 80px 20px 0;
}

/* footer social media icon */
footer .top_footer .social_media {
  display: flex;
  justify-content: center;
}

/* footer link list */
footer .top_footer .social_media li a {
  display: block;
  width: 37px;
  height: 37px;
  text-align: center;
  line-height: 34px;
  font-size: 15px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50px;
  margin-right: 10px;
  transition: 0.4s all;
}

footer .top_footer .social_media li a:hover {
  background-color: var(--white);
  color: var(--purple);
}

footer .top_footer .try_out {
  margin-left: -20px;
}

footer .app_btn li a {
  display: block;
  padding: 14px 24px;
  background-color: var(--white);
  position: relative;
  border-radius: 12px;
  transition: 0.4s all;
  text-align: center;
}

footer .app_btn li a img {
  height: 36px;
}

footer .app_btn li a:hover {
  background: var(--primery);
}

footer .app_btn li a:hover img {
  -webkit-filter: invert(100%); /* Safari/Chrome */
  filter: invert(100%);
  transition: 0.4s all;
}

footer .app_btn li:last-child {
  margin-top: 20px;
}

footer .news_letter form .form-group {
  max-width: 430px;
  position: relative;
}

footer .news_letter form .form-group .form-control {
  width: 100%;
  background-color: var(--green);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 10px;
  min-height: 60px;
  color: var(--white);
  font-weight: 500;
}

footer .news_letter form .form-group .form-control::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

footer .news_letter form .form-group button {
  position: absolute;
  right: 5px;
  top: 5px;
  background-color: var(--primery);
  color: var(--white);
  width: 50px;
  height: 50px;
  border-radius: 10px;
  font-size: 20px;
  transition: 0.4s all;
}

footer .news_letter form .form-group button:hover {
  background-color: var(--white);
  color: var(--primery);
}

footer .news_letter form .note {
  font-size: 14px;
}

/* footer heading and text colors variable */
footer h2,
footer h3,
footer p,
footer a {
  color: var(--white);
}

footer a:hover {
  color: var(--white);
}

/* footer heading h3 */
footer h6 {
  position: relative;
  margin-bottom: 55px;
  padding-left: 10px;
  line-height: 0.8;
  color: var(--white);
}

footer h6::before {
  content: "";
  width: 3px;
  height: 18px;
  background-color: var(--white);
  position: absolute;
  margin-left: -10px;
}

footer .links ul li a {
  display: block;
  margin-bottom: 16px;
  font-size: 16px;
}

footer .links ul li a:hover {
  text-decoration: underline;
}

/* footer last */
footer .bottom_footer {
  background-color: rgba(0, 0, 0, 0.3);
  margin-top: 80px;
  padding: 30px 0 20px 0;
}

footer .bottom_footer p {
  margin-bottom: 0;
  font-size: 14px;
}

footer .bottom_footer .developer_text {
  text-align: right;
}

footer .bottom_footer .developer_text a {
  text-decoration: underline;
}

/* footer elements animation */

.top_footer .element .element1,
.element2 {
  position: absolute;
}

.top_footer .element .element1 {
  left: 120px;
  top: 200px;
  animation: mymove 15s infinite;
}

.top_footer .element .element2 {
  right: 70px;
  bottom: 200px;
  animation: mymove 10s infinite;
}

@keyframes mymove {
  50% {
    transform: rotate(180deg);
  }
}

/* footer go top button */
.go_top {
  position: fixed;
  right: 30px;
  bottom: 110px;
  cursor: pointer;
  transition: 0.4s all;
  display: none;
  z-index: 1;
}

.go_top span {
  width: 50px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--primery);
  color: var(--white);
  border-radius: 150px;
  font-size: 25px;
}

.go_top:hover {
  bottom: 120px;
}

/* ===============FAQ Section Css Start============ */

.faq_section .section_title {
  margin-bottom: 50px;
}

.faq_section .nav-tabs {
  justify-content: center;
  margin-bottom: 30px;
  border: none;
}

.faq_section .nav-tabs .nav-item.show .nav-link,
.faq_section .nav-tabs .nav-link.active,
.faq_section .nav-tabs .nav-link:hover,
.faq_section .nav-tabs .nav-link {
  border: none;
  margin: 0;
}

.faq_section .nav-tabs .nav-item {
  position: relative;
}

.faq_section .nav-tabs .nav-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: var(--white);
  z-index: -1;
}

.faq_section .nav-tabs .nav-item button {
  background-color: #fff;
  padding: 10px 36px;
  border-radius: 10px;
  font-weight: 500;
}

.faq_section .nav-tabs .nav-item:first-child:before {
  border-radius: 10px 0 0 10px;
}

.faq_section .nav-tabs .nav-item:last-child:before {
  border-radius: 0 10px 10px 0;
}

.faq_section .nav-tabs .nav-item.show .nav-link,
.faq_section .nav-tabs .nav-link.active {
  background-color: var(--green);
  color: #fff;
}

.faq_section .accordion {
  margin-bottom: -20px;
}

.faq_section .card {
  border: none;
  background-color: #fff;
  margin-bottom: 20px;
  border-radius: 10px;
}

.faq_section .card .card-header {
  background-color: #fff;
  border: none;
  border-radius: 10px;
  padding: 15px 20px;
}

.faq_section .card .card-header button {
  width: 100%;
  text-align: left;
  color: var(--green);
  text-decoration: none;
  padding: 0;
  font-weight: 700;
  position: relative;
  padding-right: 72px;
  font-size: 20px;
}

.faq_section .card .card-header button.collapsed {
  color: #000;
}

.faq_section .card .card-header button:focus {
  outline: none;
  box-shadow: none;
}

.faq_section .card .card-header button .icons i {
  position: absolute;
  right: 0;
  top: 4px;
  color: var(--dark-black);
}

.faq_section .card .card-header button.collapsed .icons .icofont-minus,
.faq_section .card .card-header button .icons .icofont-plus {
  display: none;
}

.faq_section .card .card-header button .icons .icofont-minus,
.faq_section .card .card-header button.collapsed .icons .icofont-plus {
  display: block;
}

.faq_section .card .card-body {
  padding-top: 0;
}

/* =======================Our App Download Section Css Start======================= */
.download_app {
  padding-left: 15px !important;
  padding-right: 15px !important;
}

.download_app .section_title h2 {
  padding-bottom: 15px;
}

.download_app .section_title p {
  padding: 0;
}

.download_app .task_block {
  max-width: 1370px;
  margin: 0 auto;
  padding: 50px 110px;
  position: sticky;
  z-index: 99;
  border-radius: 30px;
  overflow: hidden;

  background-image: url(../images/template_bg.webp);
  background-size: cover;
  background-repeat: no-repeat;
}

.download_app .frame_img {
  text-align: center;
}

.download_app .frame_img img {
  max-width: 100%;
}

.download_app .task_block .row {
  align-items: center;
}

.download_app .task_block .section_title {
  text-align: left;
}

.download_app .app_btn {
  display: flex;
  align-items: center;
  margin-top: 40px;
}

.download_app .app_btn li a {
  display: block;
  padding: 20px 30px;
  background-color: var(--white);
  border: none;
  position: relative;
  border-radius: 12px;
  transition: 0.4s all;
}

.download_app .app_btn li a:hover {
  background-color: var(--primery);
}

.download_app .app_btn li a:hover img {
  -webkit-filter: invert(100%); /* Safari/Chrome */
  filter: invert(100%);
}

.download_app .app_btn li:last-child {
  margin-left: 15px;
}

.download_app .app_btn li a img {
  transition: 0.4s all;
  height: 36px;
}

.download_element {
  position: absolute;
}

.download_element.elm1 {
  top: 30px;
  left: 600px;
  animation: mymove 15s infinite;
}

.download_element.elm2 {
  bottom: 30px;
  left: 100px;
  animation: mymove 10s infinite;
}







/* ------------Service App Section Css------------ */
.service_section {
    position: relative;
}

.service_section .service_blocks {
    align-items: center;
}

.service_section .service_blocks .img img {
    max-width: 100%;
    border-radius: 20px;
}

.service_section .service_text {
    padding-right: 150px;
}

.service_section .service_text.right_side {
    padding-left: 150px;
    padding-right: 0;
}

.service_section .service_text h2 {
    color: var(--green);
    margin: 25px 0;
}

.service_section .service_text h2 span {
    color: var(--primery);
}

.service_section .service_text .listing_block li {
    display: flex;
    gap: 15px;
}

.service_section .service_text .listing_block li .icon span {
    display: block;
    width: 20px;
    height: 20px;
    text-align: center;
    line-height: 20px;
    color: var(--white);
    background-color: var(--dark-black);
    border-radius: 100px;
    font-size: 8px;
    margin-top: 3px;
}

.service_section .service_text .listing_block li .text {
    width: calc(100% - 50px);
}

.service_section .service_text .feature_list li {
    display: flex ;
    align-items: start;
    gap: 5px;
}

.service_section .service_text .feature_list li .icon span {
    color: var(--primery);
    font-size: 18px;
}

.service_section .service_text .feature_list li p {
    margin: 0;
    padding-top: 2px;
}

.service_section .service_text .btn_block {
    margin-top: 40px;
}

.service_section .service_text .btn {
    text-transform: capitalize;
    font-weight: 700;
}



/* ==============About Service Section Css Start============== */
.about_service .video_player {
    position: relative;
}

.about_service .video_player .play_icon {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.about_service .video_player .play_icon img {
    width: 128px;
    aspect-ratio: 1/1;
    opacity: 0.9;
}



/* ===============Why Choose Us Section Css Start================== */
.why_choose {
    position: relative;
    padding-left: 15px !important;
    padding-right: 15px !important;
}

.why_choose .why_choose_inner {
    max-width: 1370px;
    margin: 0 auto;
    background-image: url(../images/template_bg.webp);
    background-size: cover;
    background-repeat: no-repeat;
    padding: 100px 0;
    border-radius: 20px;
    overflow: hidden;
    position: relative;
}


.why_choose .why_choose_inner .company_statistics ul {
    display: flex;
    justify-content: center;
    flex-direction: row-reverse;
    margin: 30px auto 0 auto;
}

.why_choose .why_choose_inner .company_statistics ul li {
    width: 25%;
    aspect-ratio: 1/1;
    border-radius: 20px;
    background-color: var(--whitish);
    border: solid 2px var(--white);
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    z-index: 4;
    padding: 30px;
}

.why_choose .why_choose_inner .company_statistics ul li:not(:last-child) {
    margin-left: 30px;
}

.why_choose .why_choose_inner .company_statistics ul li p span {
    font-size: 35px;
    font-weight: 700;
    color: var(--green);
}

.why_choose .why_choose_inner .company_statistics ul li p {
    font-size: 18px;
    color: var(--black);
    font-weight: 700;
    margin: 0;
    line-height: 1.3;
}

.why_choose .why_choose_inner .company_statistics .usp_img {
    margin: 0 0 20px 0;
}




/* ==============Contact Us page Css Start==================== */

.contact_page_section .contact_inner {
    position: relative;
}

.contact_page_section .contact_form {
    width: 100%;
    padding: 50px 60px;
    border-radius: 20px;
    background-color: var(--whitish);
    border: solid 2px var(--white);
}

.contact_page_section .contact_form h2 {
    margin-bottom: 0;
}

.contact_page_section .contact_form form {
    margin-top: 30px;
}

.contact_page_section .contact_form form .form-group {
    margin-bottom: 20px;
}

.contact_page_section .contact_form form .form-group .form-control {
    height: 60px;
    padding: 5px 20px;
    border: 2px solid var(--border);
    border-radius: 12px;
    background: var(--white);
}


.contact_page_section .contact_form form .form-group .form-control:focus {
    box-shadow: none;
    border-color: var(--green);
}

.contact_page_section .contact_form form .form-group textarea.form-control {
    height: 140px;
    padding-top: 15px;
}

.contact_page_section .contact_form form .term_check {
    display: flex;
    align-items: center;
}

.contact_page_section .contact_form form .term_check input {
    width: 17px;
    height: 17px;
    accent-color: var(--purple);
}

.contact_page_section .contact_form form .term_check label {
    font-size: 13px;
    margin-bottom: 0;
    margin-left: 7px;
}

.contact_page_section .contact_form form .form-group button {
    width: 240px;
    margin: 0 auto;
    display: block;
    margin-top: 10px;
    margin-bottom: 0;
}

.contact_page_section .contact_info .ticket_box {
    position: relative;
    border-radius: 20px;
    padding: 40px;
    margin-top: 60px;
    overflow: hidden;
    background-color: var(--whitish);
    border: solid 2px var(--white);
}

.contact_page_section .contact_info .ticket_box .pattern-rotate {
    position: absolute;
    top: -65%;
    right: -50%;
    /*transform: translateX(-50%);*/
}

.contact_page_section .contact_info .ticket_box .icon {
    margin-bottom: 20px;
    position: relative;
    z-index: 100;
}

.contact_page_section .contact_info .ticket_box .icon img{
    width: 70px;
}

.contact_page_section .contact_info {
    width: 90%;
}

.contact_page_section .contact_info .section_title {
    text-align: left;
    margin-bottom: 0px;
    padding-bottom: 0px;
}

.contact_page_section .section_title p {
    padding: 0px;
}

.contact_page_section .contact_info .btn {
    /*width: 180px;*/
    margin: 10px 0 0 0;
}

.contact_page_section .contact_info .contact_info_list li {
    display: flex;
    align-items: center;
    margin-bottom: 30px;
}

.contact_page_section .contact_info .contact_info_list li:last-child {
    margin-bottom: 0;
}

.contact_page_section .contact_info .contact_info_list li .img {
    width: 70px;
    margin-right: 20px;
}

.contact_page_section .contact_info .contact_info_list li .img img {
    max-width: 70px;
}


.contact_page_section .contact_info .contact_info_list li .text {
    width: calc(100% - 85px);
}

.contact_page_section .contact_info .contact_info_list li .text span {
    display: block;
    font-size: 20px;
    font-weight: 600;
    color: var(--dark-purple);
}

.contact_page_section .contact_info .contact_info_list li .text p , 
.contact_page_section .contact_info .contact_info_list li .text a {margin: 0;}

.contact_page_section .contact_info .contact_info_list li .text a:hover {
    color: var(--dark-purple);
}