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

    Template Name: Bfolio - Personal Portfolio HTML Template
    Author: Hixstudio
    Support: basictheme400@gmail.com
    Description: Bfolio - Personal Portfolio HTML Template
    Version: 1.0

-----------------------------------------------------------------------------------

/************ TABLE OF CONTENTS ***************

	-----------------
    01. THEME CSS
	-----------------
		1.1 Theme Default
		1.2 Common Classes
		1.3 Default Spacing

	-----------------
    02. COMPONENTS css
	-----------------
		2.1 Back to top
		2.2 Theme Settings
		2.3 Buttons
		2.4 Animations
		2.5 Preloader
		2.6 Background 
		2.7 Carousel
		2.8 Nice Select
		2.9 Pagination
		2.10 Offcanvas
		2.11 Breadcrumb
		2.12 Accordion
		2.13 Tab
		2.14 Modal
		2.15 Section Title
		2.16 Search
		2.17 Hotspot
		2.18 Ragne Slider
	-----------------
    03. HEADER CSS
	-----------------
		3.1 Header Style 1
		3.2 Header Style 2
		3.3 Header Style 3
		3.4 Header Style 4


    ---------------------------------
	04. MENU CSS
	---------------------------------
		4.1 Main menu css
		4.2 Meanmenu css
		4.3 Mobilemenu css

	---------------------------------
	05. BLOG CSS
	---------------------------------
		5.1 Postbox css
		5.2 Recent Post css
		5.3 Sidebar css
		5.4 Blog css

	---------------------------------
	06. FOOTER CSS
	---------------------------------
		6.1 Footer Style 1
		6.2 Footer Style 2
		6.4 Footer Style 4


	---------------------------------
	07. PAGES CSS
	---------------------------------
		7.1 About css
		7.2 Award css
		7.3 Brand css
		7.4 contact css
		7.5 Course css
		7.6 funfact css
		7.7 Hero css
		7.8 Marquee css
		7.9 About css
		7.10 price css
		7.11 progress-bar css
		7.12 Services css
		7.13 Skill css
		7.14 Testimonial css
		7.15 theme-light css



**********************************************/
/*----------------------------------------*/
/*  1.1 Theme Default
/*----------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet');
.back-to-top-wrapper, a,
button,
p,
input,
select,
textarea,
li,
.transition-3 {
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -ms-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}

/* transform */
@font-face {
  font-family: "TT Hoves Pro Trial";
  src: url("../fonts/TT Hoves Pro Trial Light.woff") format("woff");
  font-weight: 300;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: "TT Hoves Pro Trial";
  src: url("../fonts/TT Hoves Pro Trial Regular.woff") format("woff");
  font-weight: 400;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: "TT Hoves Pro Trial";
  src: url("../fonts/TT Hoves Pro Trial Medium.woff") format("woff");
  font-weight: 500;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: "TT Hoves Pro Trial";
  src: url("../fonts/TT Hoves Pro Trial DemiBold.woff") format("woff");
  font-weight: 600;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: "TT Hoves Pro Trial";
  src: url("../fonts/TT Hoves Pro Trial Bold.woff") format("woff");
  font-weight: 700;
  font-display: swap;
  font-style: normal;
}
:root {
  /**
  @font family declaration
  */
  --tp-ff-body: 'TT Hoves Pro Trial', sans-serif;
  --tp-ff-heading: 'TT Hoves Pro Trial', sans-serif;
  --tp-ff-p: 'TT Hoves Pro Trial', sans-serif;
  /**
  @color declaration
  */
  --tp-common-white: #fff;
  --tp-common-white-2: #fff;
  --tp-common-black: #142d25;
  --tp-grey-1: #68665E;
  --tp-theme-primary: #b3ed97;
  --tp-theme-secondary: #ffca24;
  --tp-border-1: rgba(98, 0, 53, 0.06);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/*---------------------------------
	typography css start 
---------------------------------*/
body {
  font-family: var(--tp-ff-body);
  font-size: 16px;
  font-weight: normal;
  color: var(--tp-grey-1);
  line-height: 26px;
  background: var(--tp-common-white);
}

a {
  text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--tp-ff-heading);
  color: var(--tp-common-black);
  margin-top: 0px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

h1 {
  font-size: 90px;
}

h2 {
  font-size: 54px;
}

h3 {
  font-size: 40px;
}

h4 {
  font-size: 30px;
}

h5 {
  font-size: 20px;
}

h6 {
  font-size: 16px;
}

ul {
  margin: 0px;
  padding: 0px;
}

p {
  color: var(--tp-common-black);
  margin-bottom: 15px;
  font-weight: 400;
  font-size: 18px;
  line-height: 133%;
}

img {
  max-width: 100%;
}

a:not([href]):not([class]),
a:not([href]):not([class]):hover {
  color: inherit;
  text-decoration: none;
}

a:focus,
.button:focus {
  text-decoration: none;
  outline: none;
}

a:focus,
a:hover {
  color: inherit;
  text-decoration: none;
}

a,
button {
  color: inherit;
  outline: none;
  border: none;
  background: transparent;
}

button:hover {
  cursor: pointer;
}

button:focus {
  outline: 0;
}

.uppercase {
  text-transform: uppercase;
}

.capitalize {
  text-transform: capitalize;
}

input[type=text],
input[type=email],
input[type=tel],
input[type=number],
input[type=password],
input[type=url],
textarea {
  outline: none;
  background-color: #fff;
  height: 56px;
  width: 100%;
  line-height: 56px;
  font-size: 14px;
  color: var(--tp-common-black);
  padding-left: 26px;
  padding-right: 26px;
  border: 1px solid #E0E2E3;
}
input[type=text]::-webkit-input-placeholder,
input[type=email]::-webkit-input-placeholder,
input[type=tel]::-webkit-input-placeholder,
input[type=number]::-webkit-input-placeholder,
input[type=password]::-webkit-input-placeholder,
input[type=url]::-webkit-input-placeholder,
textarea::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: #95999D;
}
input[type=text]::-moz-placeholder,
input[type=email]::-moz-placeholder,
input[type=tel]::-moz-placeholder,
input[type=number]::-moz-placeholder,
input[type=password]::-moz-placeholder,
input[type=url]::-moz-placeholder,
textarea::-moz-placeholder { /* Firefox 19+ */
  color: #95999D;
}
input[type=text]:-moz-placeholder,
input[type=email]:-moz-placeholder,
input[type=tel]:-moz-placeholder,
input[type=number]:-moz-placeholder,
input[type=password]:-moz-placeholder,
input[type=url]:-moz-placeholder,
textarea:-moz-placeholder { /* Firefox 4-18 */
  color: #95999D;
}
input[type=text]:-ms-input-placeholder,
input[type=email]:-ms-input-placeholder,
input[type=tel]:-ms-input-placeholder,
input[type=number]:-ms-input-placeholder,
input[type=password]:-ms-input-placeholder,
input[type=url]:-ms-input-placeholder,
textarea:-ms-input-placeholder { /* IE 10+  Edge*/
  color: #95999D;
}
input[type=text]::placeholder,
input[type=email]::placeholder,
input[type=tel]::placeholder,
input[type=number]::placeholder,
input[type=password]::placeholder,
input[type=url]::placeholder,
textarea::placeholder { /* MODERN BROWSER */
  color: #95999D;
}
[dir=rtl] input[type=text],
[dir=rtl] input[type=email],
[dir=rtl] input[type=tel],
[dir=rtl] input[type=number],
[dir=rtl] input[type=password],
[dir=rtl] input[type=url],
[dir=rtl] textarea {
  text-align: right;
}
input[type=text]:focus,
input[type=email]:focus,
input[type=tel]:focus,
input[type=number]:focus,
input[type=password]:focus,
input[type=url]:focus,
textarea:focus {
  border-color: var(--tp-common-black);
}
input[type=text]:focus::placeholder,
input[type=email]:focus::placeholder,
input[type=tel]:focus::placeholder,
input[type=number]:focus::placeholder,
input[type=password]:focus::placeholder,
input[type=url]:focus::placeholder,
textarea:focus::placeholder {
  opacity: 0;
}

textarea {
  line-height: 1.4;
  padding-top: 17px;
  padding-bottom: 17px;
}

input[type=color] {
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  background: none;
  border: 0;
  cursor: pointer;
  height: 100%;
  width: 100%;
  padding: 0;
  border-radius: 50%;
}

*::-moz-selection {
  background: var(--tp-common-black);
  color: var(--tp-common-white);
  text-shadow: none;
}

::-moz-selection {
  background: var(--tp-common-black);
  color: var(--tp-common-white);
  text-shadow: none;
}

::selection {
  background: var(--tp-common-black);
  color: var(--tp-common-white);
  text-shadow: none;
}

*::-moz-placeholder {
  color: var(--tp-common-black);
  font-size: 14px;
  opacity: 1;
}

*::placeholder {
  color: var(--tp-common-black);
  font-size: 14px;
  opacity: 1;
}

.z-index {
  z-index: 1;
}

.z-index-2 {
  z-index: 2;
}

.z-index-3 {
  z-index: 3;
}

.z-index-4 {
  z-index: 4;
}

.z-index-5 {
  z-index: 5;
}

.z-index-6 {
  z-index: 6;
}

.z-index-7 {
  z-index: 7;
}

.z-index-8 {
  z-index: 8;
}

.z-index-9 {
  z-index: 9;
}

.z-index-m-1 {
  z-index: -1;
}

.gx-5 {
  --bs-gutter-x: 5px;
}

/*---------------------------------
    1.2 Common Classes
---------------------------------*/
.w-img img {
  width: 100%;
}

.m-img img {
  max-width: 100%;
}

.fix {
  overflow: hidden;
}

.clear {
  clear: both;
}

.overflow-y-visible {
  overflow-x: hidden;
  overflow-y: visible;
}

.p-relative {
  position: relative !important;
}

.p-absolute {
  position: absolute !important;
}

.p-inherit {
  position: inherit !important;
}

.bg-position {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.tp-transparent {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 3;
}

.slide-transtion {
  -webkit-transition-timing-function: linear;
  transition-timing-function: linear;
}

@media (min-width: 1400px) {
  .container-1800 {
    max-width: 1800px;
  }
}
@media (min-width: 1400px) {
  .container-1424 {
    max-width: 1424px;
  }
}
@media (min-width: 1400px) {
  .container-1304 {
    max-width: 1304px;
  }
}
/*---------------------------------
    1.2 Default Spacing
---------------------------------*/
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 767px) {
  .pt-170 {
    padding-top: 115px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 767px) {
  .pt-165 {
    padding-top: 110px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 767px) {
  .pt-160 {
    padding-top: 100px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 767px) {
  .pt-155 {
    padding-top: 100px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 767px) {
  .pt-150 {
    padding-top: 100px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 767px) {
  .pt-145 {
    padding-top: 100px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 767px) {
  .pt-140 {
    padding-top: 100px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 767px) {
  .pt-135 {
    padding-top: 95px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 767px) {
  .pt-130 {
    padding-top: 100px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 767px) {
  .pt-125 {
    padding-top: 105px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 767px) {
  .pt-120 {
    padding-top: 100px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 767px) {
  .pt-115 {
    padding-top: 95px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 767px) {
  .pt-110 {
    padding-top: 90px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 767px) {
  .pt-105 {
    padding-top: 75px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 767px) {
  .pt-100 {
    padding-top: 60px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 767px) {
  .pb-170 {
    padding-bottom: 100px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 767px) {
  .pt-180 {
    padding-top: 100px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 767px) {
  .pt-190 {
    padding-top: 110px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 767px) {
  .pb-165 {
    padding-bottom: 100px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 767px) {
  .pb-160 {
    padding-bottom: 100px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 767px) {
  .pb-155 {
    padding-bottom: 100px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 767px) {
  .pb-150 {
    padding-bottom: 100px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 767px) {
  .pb-145 {
    padding-bottom: 100px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 767px) {
  .pb-140 {
    padding-bottom: 100px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 767px) {
  .pb-135 {
    padding-bottom: 95px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 767px) {
  .pb-130 {
    padding-bottom: 100px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 767px) {
  .pb-125 {
    padding-bottom: 95px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 767px) {
  .pb-120 {
    padding-bottom: 90px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 767px) {
  .pb-115 {
    padding-bottom: 85px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 767px) {
  .pb-110 {
    padding-bottom: 80px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 767px) {
  .pb-105 {
    padding-bottom: 75px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 767px) {
  .pb-100 {
    padding-bottom: 70px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 767px) {
  .pb-95 {
    padding-bottom: 75px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 767px) {
  .pb-90 {
    padding-bottom: 70px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 767px) {
  .pb-80 {
    padding-bottom: 60px;
  }
}

/*----------------------------------------*/
/*  2.1 Back to top
/*----------------------------------------*/
.back-to-top-wrapper {
  position: fixed;
  right: 50px;
  bottom: 0;
  height: 44px;
  width: 44px;
  cursor: pointer;
  display: block;
  border-radius: 50%;
  z-index: 99;
  opacity: 0;
  visibility: hidden;
}
@media (max-width: 767px) {
  .back-to-top-wrapper {
    right: 20px;
    bottom: 20px;
  }
}
.back-to-top-wrapper.back-to-top-btn-show {
  visibility: visible;
  opacity: 1;
  bottom: 50px;
}

.back-to-top-btn {
  display: inline-block;
  width: 44px;
  height: 44px;
  line-height: 44px;
  text-align: center;
  background: var(--tp-common-white);
  box-shadow: 0px 8px 16px rgba(3, 4, 28, 0.3);
  color: var(--tp-common-black);
  border-radius: 50%;
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -ms-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}
.back-to-top-btn svg {
  -webkit-transform: translateY(-2px);
  -moz-transform: translateY(-2px);
  -ms-transform: translateY(-2px);
  -o-transform: translateY(-2px);
  transform: translateY(-2px);
}
.back-to-top-btn:hover {
  -webkit-transform: translateY(-4px);
  -moz-transform: translateY(-4px);
  -ms-transform: translateY(-4px);
  -o-transform: translateY(-4px);
  transform: translateY(-4px);
}

/*----------------------------------------*/
/*  2.3 Buttons
/*----------------------------------------*/
.tp-btn {
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--tp-theme-primary);
  border: 2px solid var(--tp-theme-primary);
  line-height: 1;
  padding: 14px 42px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  border-radius: 100px;
}
.tp-btn:hover {
  background: var(--tp-theme-primary);
  color: var(--tp-common-black);
}
.tp-btn-animetion .btn-icon {
  animation: toLeftFromRight 0.3s forwards;
  transition: transform ease 0.3s;
  margin-top: -3px;
}
.tp-btn-animetion:hover .btn-icon {
  animation: toRightFromLeft 0.3s forwards;
}
.tp-btn-sm {
  padding: 14px 20px;
}
.tp-btn-primary {
  background: var(--tp-theme-primary);
  color: var(--tp-common-black);
  padding: 15px 24px;
  text-transform: capitalize;
  font-size: 17px;
  font-weight: 500;
}
.tp-btn-black {
  background: var(--tp-common-black);
  color: var(--tp-common-white);
  border: none;
  border-radius: 0;
  padding: 19px 42px;
}
.tp-btn-black:hover {
  background: var(--tp-theme-primary);
  color: var(--tp-common-white);
}

/*----------------------------------------*/
/*  2.4 Animations
/*----------------------------------------*/
@keyframes toLeftFromRight {
  0% {
    opacity: 1;
    transform: translate(0);
  }
  50% {
    opacity: 0;
    transform: translate(-3px);
  }
  51% {
    opacity: 0;
    transform: translate(3px);
  }
  100% {
    opacity: 1;
    transform: translate(0);
  }
}
@keyframes toRightFromLeft {
  49% {
    transform: translate(3px);
  }
  50% {
    opacity: 0;
    transform: translate(-3px);
  }
  51% {
    opacity: 1;
  }
}
/*----------------------------------------*/
/*  2.5 Preloader
/*----------------------------------------*/
.preloader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--tp-common-white);
}

.loader {
  width: fit-content;
  font-size: 120px;
  line-height: 1.5;
  font-family: var(--tp-ff-heading);
  font-weight: 800;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0);
  -webkit-text-stroke: 1px #FF4121;
  background: radial-gradient(1.13em at 50% 1.6em, #FF4121 99%, rgba(0, 0, 0, 0) 101%) calc(50% - 1.6em) 0/3.2em 100% text, radial-gradient(1.13em at 50% -0.8em, rgba(0, 0, 0, 0) 99%, #FF4121 101%) 50% 0.8em/3.2em 100% repeat-x text;
  animation: l9 2s linear infinite;
}
@media (max-width: 767px) {
  .loader {
    font-size: 70px;
  }
}

.loader:before {
  content: "Kindaid";
}

@keyframes l9 {
  to {
    background-position: calc(50% + 1.6em) 0, calc(50% + 3.2em) 0.8em;
  }
}
/*----------------------------------------*/
/*  2.15 Section Title
/*----------------------------------------*/
.tp-section-subtitle {
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--tp-common-black);
  border: 1px solid rgba(20, 45, 37, 0.1);
  border-radius: 18px;
  padding: 8px 14px;
  line-height: 1;
}
.tp-section-subtitle-white {
  border: 1px solid rgba(179, 237, 151, 0.1);
  color: var(--tp-theme-primary);
}
.tp-section-title {
  font-size: 64px;
  font-weight: 600;
  line-height: 100%;
  letter-spacing: -0.03em;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) {
  .tp-section-title {
    font-size: 50px;
  }
}
@media (max-width: 767px) {
  .tp-section-title {
    font-size: 35px;
  }
  .tp-section-title br {
    display: none;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 767px) {
  .tp-section-dec br {
    display: none;
  }
}
.tp-section-dec-white {
  color: rgba(252, 248, 236, 0.7);
}

/* HEADER CSS */
/*----------------------------------------*/
/*  3.1 Header Style
/*----------------------------------------*/
.tp-header-menu nav ul li {
  display: inline-block;
  list-style: none;
}
.tp-header-menu nav ul li:not(:last-of-type) {
  margin-right: 40px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .tp-header-menu nav ul li:not(:last-of-type) {
    margin-right: 15px;
  }
}
.tp-header-menu nav .nav_link {
  font-size: 17px;
  line-height: 1;
  font-weight: 500;
  color: var(--tp-common-white);
  letter-spacing: 0;
  position: relative;
  padding: 43px 0;
  display: inline-block;
}
.tp-header-menu nav .nav_link:hover {
  color: var(--tp-theme-primary);
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 767px) {
  .tp-header-spacing {
    padding-top: 15px;
  }
}

/*----------------------------------------*/
/*  7.12 hero css
/*----------------------------------------*/
.tp-hero-title {
  font-size: 75px;
  line-height: 1.1;
  letter-spacing: -0.04em;
  font-weight: 600;
  color: var(--tp-common-white);
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tp-hero-title {
    font-size: 80px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tp-hero-title {
    font-size: 70px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .tp-hero-title {
    font-size: 48px;
  }
}
@media (max-width: 767px) {
  .tp-hero-title {
    font-size: 35px;
  }
}
.tp-hero-title span {
  color: var(--tp-theme-primary);
}
.tp-hero-text {
  font-weight: 400;
  font-size: 20px;
  color: var(--tp-common-white);
}
.tp-hero-spacing {
  padding-top: 205px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 767px) {
  .tp-hero-spacing {
    padding-top: 150px;
  }
}
.tp-hero-img {
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.tp-hero-img .main {
  position: relative;
  z-index: 1;
  box-shadow: 40px 40px 80px 0 rgba(0, 0, 0, 0.2), -40px 40px 80px 0 rgba(0, 0, 0, 0.2);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .tp-hero-img .main {
    width: 700px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tp-hero-img .main {
    width: 500px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 767px) {
  .tp-hero-img .main {
    width: 370px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 767px) {
  .tp-hero-img .main {
    width: 100%;
  }
}
.tp-hero-img img:nth-child(1) {
  margin-right: -36px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .tp-hero-img img:nth-child(1) {
    width: 330px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tp-hero-img img:nth-child(1) {
    width: 240px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tp-hero-img img:nth-child(1) {
    width: 185px;
    margin-right: -30px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 767px) {
  .tp-hero-img img:nth-child(1) {
    display: none;
  }
}
.tp-hero-img img:nth-child(3) {
  margin-left: -36px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .tp-hero-img img:nth-child(3) {
    width: 330px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tp-hero-img img:nth-child(3) {
    width: 240px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tp-hero-img img:nth-child(3) {
    width: 185px;
    margin-left: -30px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 767px) {
  .tp-hero-img img:nth-child(3) {
    display: none;
  }
}

/*----------------------------------------*/
/*  7.12 demo css
/*----------------------------------------*/
.tp-feature-item {
  border: 1px solid var(--tp-border-1);
}
.tp-feature-item.video {
  height: 334px;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 767px) {
  .tp-feature-item.video {
    width: 334px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 767px) {
  .tp-feature-pages {
    margin-bottom: 20px;
  }
}
.tp-feature-pages-count {
  font-weight: 500;
  font-size: 74px;
  letter-spacing: -0.03em;
}
.tp-feature-pages-subtitle {
  color: var(--tp-common-black);
  font-weight: 500;
  font-size: 20px;
}
.tp-feature-content {
  padding: 30px 30px 26px 35px;
}
.tp-feature-thumb {
  padding: 20px;
}
.tp-feature-demo img {
  height: 100%;
}
.tp-feature-demo-import {
  padding: 45px 40px 45px 40px;
}
.tp-feature-demo-import-content .import-btn {
  font-weight: 500;
  font-size: 16px;
  color: var(--tp-common-black);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 767px) {
  .tp-feature-demo-import-content p br {
    display: none;
  }
}
.tp-feature-demo-import-shape {
  position: absolute;
  top: -20px;
  left: -20px;
  z-index: -1;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 767px) {
  .tp-feature-content p br {
    display: none;
  }
}
.tp-feature-content.video-content {
  margin-top: -140px;
  background: var(--tp-common-white);
  position: relative;
  bottom: 8px;
}
.tp-feature-title {
  font-weight: 500;
  font-size: 24px;
  letter-spacing: -0.01em;
}
.tp-feature-title .import-title {
  font-size: 26px;
}
.tp-feature-video video {
  width: 100%;
}

@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 767px) {
  .tp-demo-title-wrap p br {
    display: none;
  }
}
.tp-demo-plugin span {
  font-weight: 500;
  font-size: 15px;
  color: var(--tp-common-black);
  position: relative;
  padding-left: 14px;
  display: inline-block;
  margin-bottom: 10px;
}
.tp-demo-plugin span:not(:last-child) {
  margin-right: 28px;
}
.tp-demo-plugin span::before {
  position: absolute;
  content: "";
  width: 6px;
  height: 6px;
  background: var(--tp-common-black);
  border-radius: 20px;
  left: 0;
  top: 10px;
}
.tp-demo-title {
  font-weight: 500;
  font-size: 20px;
  letter-spacing: -0.02em;
  color: var(--tp-common-black);
}
.tp-demo-item:hover .tp-demo-thumb img {
  transform: scale(1.06);
}
.tp-demo-thumb {
  transition: all 0.4s ease;
  border: 1px solid rgba(20, 45, 37, 0.08);
  padding: 10px 10px 15px 10px;
  transition: all 0.4s ease;
}
.tp-demo-thumb img {
  transition: all 0.8s ease;
}

.tp-inner-pages-thumb img {
  box-shadow: 1px 2px 4px 0 rgba(1, 15, 28, 0.1);
  border: 2px solid var(--tp-common-white);
}
.tp-inner-pages-bottom {
  padding: 14px 0;
}
.tp-inner-pages-bottom-text p {
  color: var(--tp-common-black);
  font-size: 14px;
  font-weight: 500;
}
.tp-inner-pages-bottom-text p span {
  padding: 3px 7px;
  line-height: 1;
  margin-right: 6px;
  border-radius: 50px;
  font-weight: 600;
  display: inline-block;
  background: var(--tp-common-white);
}
.tp-inner-badge {
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--tp-theme-primary);
  border: 1px solid rgba(179, 237, 151, 0.1);
  border-radius: 18px;
  padding: 7px 14px;
  line-height: 1;
  background: #142d25;
  position: absolute;
  top: 20px;
  right: 20px;
}
.tp-inner-content {
  border: 1px solid rgba(179, 237, 151, 0.2);
  width: 384px;
  background: rgba(179, 237, 151, 0.04);
  padding: 10px 30px 35px 30px;
  float: right;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 767px) {
  .tp-inner-content {
    float: left;
  }
}
@media (max-width: 767px) {
  .tp-inner-content {
    width: 100%;
  }
}
.tp-inner-count-title {
  font-weight: 500;
  font-size: 74px;
  letter-spacing: -0.03em;
  color: var(--tp-common-white);
}
.tp-inner-count-subtitle {
  font-weight: 500;
  font-size: 20px;
  letter-spacing: -0.01em;
  color: var(--tp-common-white);
}
.tp-inner-feature {
  gap: 30px;
}
@media (max-width: 767px) {
  .tp-inner-feature {
    flex-wrap: wrap;
    gap: 10px;
  }
}
.tp-inner-feature span {
  font-weight: 500;
  font-size: 16px;
  letter-spacing: -0.01em;
  color: var(--tp-theme-primary);
  display: flex;
  align-items: center;
  gap: 11px;
}

.tp-feature-2-title {
  font-weight: 500;
  font-size: 18px;
  color: var(--tp-common-black);
  display: block;
}
.tp-feature-2-icon {
  border: 1px solid rgba(98, 0, 53, 0.08);
  border-radius: 100px;
  width: 180px;
  height: 180px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
@media (max-width: 767px) {
  .tp-feature-2-icon {
    width: 140px;
    height: 140px;
  }
}
.tp-feature-2-section-title {
  font-weight: 400;
  font-size: 36px;
  line-height: 122%;
  letter-spacing: -0.01em;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 767px) {
  .tp-feature-2-section-title br {
    display: none;
  }
}

.tp-feature-3-item {
  background: #f7f7f5;
  padding: 48px 40px 50px 40px;
}
.tp-feature-3-title {
  font-weight: 500;
  font-size: 24px;
  letter-spacing: -0.02em;
  color: #142d25;
}
.tp-feature-3-title-wrap {
  position: sticky;
  top: 70px;
}
.tp-feature-3-text {
  font-weight: 400;
  font-size: 18px;
  color: rgba(20, 45, 37, 0.7);
}

.tp-faq-item {
  margin-bottom: -1px;
  border-radius: 0;
  border-top: 1px solid rgba(20, 45, 37, 0.08);
  border-bottom: 1px solid rgba(20, 45, 37, 0.08);
  padding-top: 10px;
  padding-bottom: 13px;
  padding: 0 30px;
}
.tp-faq-item.active {
  background: #f7f7f5;
  border-color: #f7f7f5;
}
.tp-faq-item.active .tp-faq-button::before, .tp-faq-item.active .tp-faq-button:after {
  background: var(--tp-theme-primary);
  border-color: var(--tp-theme-primary);
  color: var(--tp-common-black);
}
.tp-faq-body {
  font-size: 16px;
  line-height: 26px;
  padding: 0;
  padding-bottom: 25px;
  padding-right: 50px;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 767px) {
  .tp-faq-body {
    padding-right: 0;
    padding-left: 57px;
  }
}
@media (max-width: 767px) {
  .tp-faq-body {
    padding-left: 0;
  }
}
.tp-faq-body p {
  font-size: 18px;
  line-height: 156%;
  letter-spacing: -0.01em;
  color: var(--tp-common-mulberry);
}
.tp-faq-button {
  background: transparent;
  letter-spacing: -0.4px;
  width: 100%;
  text-align: left;
  padding: 28px 0;
  position: relative;
  line-height: 1.3;
  letter-spacing: -0.02em;
  display: flex;
  padding-right: 50px;
  font-weight: 500;
  font-size: 24px;
  color: var(--tp-common-black);
}
@media (max-width: 767px) {
  .tp-faq-button {
    font-size: 18px;
  }
}
.tp-faq-button span {
  font-weight: 500;
  margin-right: 70px;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 767px) {
  .tp-faq-button span {
    margin-right: 30px;
  }
}
.tp-faq-button::before, .tp-faq-button:after {
  content: "\f068";
  font-family: "Font Awesome 5 Pro";
  position: absolute;
  right: 0;
  top: 24px;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(20, 45, 37, 0.1);
  text-align: center;
  border-radius: 30px;
  line-height: 39px;
  font-size: 16px;
  font-weight: 400;
  color: var(--tp-common-black);
  transition: all 0.5s ease;
}
.tp-faq-button.collapsed:after {
  content: "\f067";
}

.tp-documentation-item {
  padding: 34px;
  border: 1px solid var(--tp-common-black);
  transition: all 0.3s ease-in-out;
  box-shadow: 4px 4px 0 0 var(--tp-common-black);
}
.tp-documentation-item:hover {
  box-shadow: none;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), (max-width: 767px) {
  .tp-documentation-item {
    padding: 20px 12px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .tp-documentation-item {
    margin-bottom: 30px;
  }
}
.tp-documentation-icon {
  margin-right: 24px;
  color: var(--tp-common-black);
}
.tp-documentation-content h4 {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 6px;
  line-height: 130%;
  font-family: var(--tp-ff-p);
}
.tp-documentation-content p {
  font-size: 15px;
  font-weight: 500;
  margin-bottom: 22px;
}
.tp-documentation-content a {
  font-size: 14px;
  font-weight: 600;
  padding: 9px 20px;
  background: var(--tp-theme-primary);
  color: var(--tp-common-black);
}
.tp-documentation-content a:hover {
  color: var(--tp-common-white);
  background: var(--tp-common-black);
}

.tp-demo-footer-bg {
  padding-top: 110px;
}
.tp-demo-footer-heading h4 {
  font-size: 75px;
  font-weight: 800;
  letter-spacing: -1.6px;
  color: var(--tp-common-white);
  line-height: 1;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .tp-demo-footer-heading h4 {
    font-size: 70px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .tp-demo-footer-heading h4 {
    font-size: 65px;
  }
}
@media (max-width: 767px) {
  .tp-demo-footer-heading h4 {
    font-size: 35px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .tp-demo-footer-heading h4 br {
    display: none;
  }
}
.tp-demo-footer-btn a {
  background: var(--tp-theme-secondary);
  color: var(--tp-common-black);
  border: none;
  text-transform: capitalize;
  padding: 18px 42px;
}
.tp-demo-footer-btn a:hover {
  background: var(--tp-theme-primary);
  color: var(--tp-common-white);
}
.tp-demo-footer-feature ul {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
.tp-demo-footer-feature ul li {
  font-weight: 500;
  font-size: 16px;
  color: var(--tp-common-white);
  list-style: none;
  margin-bottom: 8px;
}
.tp-demo-footer-feature ul li:not(:last-child) {
  margin-right: 25px;
}
.tp-demo-footer-feature ul li span {
  border-radius: 100%;
  stroke-width: 1px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  width: 30px;
  height: 30px;
  text-align: center;
  line-height: 25px;
  display: inline-block;
  margin-right: 6px;
}
.tp-demo-footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  position: relative;
  z-index: 2;
}
.tp-demo-footer-bottom p {
  font-weight: 500;
  font-size: 16px;
  color: rgba(255, 255, 255, 0.6);
  padding: 25px 0px;
}
.tp-demo-footer-bottom p a {
  color: var(--tp-common-white);
}

.tp-elementor-dec {
  font-weight: 500;
  font-size: 18px;
  line-height: 156%;
  color: rgba(255, 255, 255, 0.8);
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 767px) {
  .tp-elementor-dec br {
    display: none;
  }
}
.tp-elementor-bg {
  padding: 84px 62px 0 96px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 767px) {
  .tp-elementor-bg {
    padding: 44px 32px 0 36px;
  }
}
.tp-elementor-logo {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  z-index: -1;
}

.tp-review-item {
  padding: 28px 40px 40px 40px;
  border: 1px solid rgba(13, 13, 13, 0.15);
  background: rgba(249, 249, 249, 0.04);
}
@media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .tp-review-item {
    padding: 25px 25px 32px 26px;
  }
}
.tp-review-ratings {
  display: flex;
  margin-right: 2px;
  margin-bottom: 3px;
}
.tp-review-status {
  font-weight: 600;
  font-size: 18px;
  color: var(--tp-common-white);
}
.tp-review-dec {
  font-weight: 500;
  font-size: 18px;
  line-height: 156%;
  color: rgba(255, 255, 255, 0.6);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 767px) {
  .tp-review-dec br {
    display: none;
  }
}
.tp-review-customer {
  display: flex;
  align-items: center;
}
.tp-review-customer .icons {
  border-radius: 50px;
  display: inline-block;
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.tp-review-customer .emails {
  font-size: 15px;
  font-weight: 600;
  color: var(--tp-common-white);
}

.border-hover {
  position: relative;
}

.border-hover::before, .border-hover::after {
  content: "";
  width: 0;
  height: 2px;
  position: absolute;
  transition: all 0.5s linear;
  background: var(--tp-common-black);
}

.tp-demo-thumb::before, .tp-demo-thumb::after {
  content: "";
  width: 2px;
  height: 0;
  position: absolute;
  transition: all 0.5s linear;
  background: var(--tp-common-black);
}

.border-hover:hover::before, .border-hover:hover::after {
  width: 100%;
}

.border-hover:hover .tp-demo-thumb::before, .border-hover:hover .tp-demo-thumb::after {
  height: 100%;
}

/*----- button 4 -----*/
.border-hover::after {
  right: 0;
  bottom: 0;
  transition-duration: 0.5s;
}

.border-hover .tp-demo-thumb::after {
  right: 0;
  bottom: 0;
  transition-duration: 0.5s;
}

.border-hover::before {
  left: 0;
  top: 0;
  transition-duration: 0.5s;
}

.border-hover .tp-demo-thumb::before {
  left: 0;
  top: 0;
  transition-duration: 0.5s;
}

/*----------------------------------------*/
/*  7.12 Services css
/*----------------------------------------*/

/*# sourceMappingURL=main.css.map */