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

    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 */
:root {
  /**
  @font family declaration
  */
  --tp-ff-body: 'Montserrat', sans-serif;
  --tp-ff-heading: 'Libre Baskerville', serif;
  --tp-ff-p: 'Montserrat', sans-serif;
  --tp-ff-fontawesome: "Font Awesome 6 Pro";
  /**
  @color declaration
  */
  --tp-common-white: #fcf8ec;
  --tp-common-white-2: #fff;
  --tp-common-black: #620035;
  --tp-common-emerald: #f0e8d1;
  --tp-grey-1: #68665E;
  --tp-theme-primary: #FF4121;
  --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 {
  font-family: var(--tp-ff-body);
  color: var(--tp-grey-1);
  font-weight: 500;
  font-size: 16px;
  line-height: 162%;
  margin-bottom: 15px;
}

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-1584 {
    max-width: 1584px;
  }
}
/*---------------------------------
    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-secondary);
  border: 2px solid var(--tp-theme-secondary);
  line-height: 1;
  padding: 14px 42px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  border-radius: 100px;
}
.tp-btn:hover {
  background: var(--tp-theme-secondary);
  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-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: #0000;
  -webkit-text-stroke: 1px #FF4121;
  background: radial-gradient(1.13em at 50% 1.6em, #FF4121 99%, #0000 101%) calc(50% - 1.6em) 0/3.2em 100% text, radial-gradient(1.13em at 50% -0.8em, #0000 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: 500;
  font-size: 16px;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--tp-theme-primary);
}
.tp-section-title {
  font-size: 60px;
  line-height: 110%;
  letter-spacing: -0.02em;
}
@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;
  }
}
.tp-section-title span {
  color: var(--tp-theme-primary);
}
.tp-section-dec-white {
  color: rgba(252, 248, 236, 0.7);
}

/*----------------------------------------*/
/*  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;
  }
}

/* HEADER CSS */
/*----------------------------------------*/
/*  7.12 hero css
/*----------------------------------------*/
.tp-hero-title {
  font-size: 110px;
  line-height: 100%;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  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: 195px;
}
@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: 0 54px 90px 0 rgba(0, 0, 0, 0.85);
  border: 5px solid #000;
  border-bottom: 0;
  border-radius: 20px 20px 0 0;
}
@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);
}
@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-size: 60px;
  letter-spacing: -0.06em;
  color: var(--tp-theme-primary);
  line-height: 1;
}
.tp-feature-pages-subtitle {
  font-weight: 500;
  font-size: 18px;
  color: var(--tp-common-black);
}
.tp-feature-content {
  padding: 30px 30px 26px 35px;
}
.tp-feature-thumb {
  padding: 20px;
}
.tp-feature-demo img {
  height: 100%;
}
@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;
  }
}

@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 a {
  font-weight: 500;
  font-size: 20px;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--tp-common-black);
}
.tp-demo-item {
  padding: 10px 10px 15px 10px;
  transition: all 0.4s ease;
}
.tp-demo-item:hover {
  background: var(--tp-common-black);
}
.tp-demo-item:hover .tp-demo-thumb {
  border-color: var(--tp-common-black);
}
.tp-demo-item:hover .tp-demo-thumb img {
  transform: scale(1.06);
}
.tp-demo-item:hover .tp-demo-title a {
  color: var(--tp-common-white);
}
.tp-demo-item:hover .tp-demo-title a:hover {
  color: var(--tp-theme-primary);
}
.tp-demo-thumb {
  border: 2px solid #fff;
  box-shadow: 1px 2px 4px 0 rgba(1, 15, 28, 0.1);
  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-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: 80px;
  width: 140px;
  height: 140px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

.tp-shop-item {
  padding: 70px 104px 80px 104px;
}
@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-shop-item {
    padding: 70px 50px 80px 50px;
  }
}
.tp-shop-item .tp-section-title {
  font-size: 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), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 767px) {
  .tp-shop-item .tp-section-title {
    font-size: 35px;
  }
}
.tp-shop-item p {
  font-size: 20px;
  line-height: 140%;
}
.tp-shop-thumb .thumb {
  box-shadow: 1px 2px 4px 0 rgba(1, 15, 28, 0.1);
  border: 2px solid #fff;
}
.tp-shop-shape {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: -40px;
  box-shadow: 20px 20px 20px 0 rgba(33, 2, 19, 0.2);
  width: 21%;
}
.tp-shop-shape-2 {
  position: absolute;
  bottom: 20%;
  right: -40px;
  box-shadow: 14px 14px 14px 0 rgba(49, 36, 0, 0.14);
  width: 30%;
}
.tp-shop-shape-3 {
  position: absolute;
  top: 30%;
  right: -50px;
  width: 11%;
}
.tp-shop-shape-4 {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: -40px;
  width: 24%;
  box-shadow: 20px 20px 20px 0 rgba(33, 2, 19, 0.2);
}
.tp-shop-shape-5 {
  position: absolute;
  bottom: 10%;
  right: -40px;
  width: 42%;
  box-shadow: 14px 14px 14px 0 rgba(49, 36, 0, 0.14);
}
.tp-shop-shape-6 {
  position: absolute;
  top: 30%;
  right: -20px;
}

.tp-feature-3-icon span {
  border-radius: 50px;
  width: 54px;
  height: 54px;
  background: rgba(252, 248, 236, 0.1);
  display: inline-block;
  text-align: center;
  line-height: 54px;
}
.tp-feature-3-title {
  font-family: var(--tp-ff-p);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.02em;
  color: var(--tp-common-white);
}
.tp-feature-3-text {
  font-weight: 600;
  font-size: 16px;
  line-height: 150%;
  color: rgba(252, 248, 236, 0.7);
}
@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-3-text br {
    display: none;
  }
}

.tp-faq-item {
  margin-bottom: -1px;
  border-radius: 0;
  border-top: 1px solid rgba(98, 0, 53, 0.1);
  border-bottom: 1px solid rgba(98, 0, 53, 0.1);
  padding-top: 10px;
  padding-bottom: 13px;
}
.tp-faq-item.active .tp-faq-button {
  background: transparent;
  color: var(--tp-theme-primary);
}
.tp-faq-item.active .tp-faq-button::before, .tp-faq-item.active .tp-faq-button:after {
  background: var(--tp-theme-primary);
  color: var(--tp-common-white);
}
.tp-faq-body {
  font-size: 16px;
  line-height: 26px;
  padding: 0;
  padding-bottom: 13px;
  padding-left: 95px;
  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: 20px 0;
  position: relative;
  line-height: 1.3;
  font-weight: 600;
  font-family: var(--tp-ff-p);
  font-size: 22px;
  letter-spacing: -0.02em;
  color: var(--tp-common-mulberry);
  display: flex;
  padding-right: 50px;
}
@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: 14px;
  width: 40px;
  height: 40px;
  border: 1px solid var(--tp-theme-primary);
  text-align: center;
  border-radius: 30px;
  line-height: 39px;
  font-size: 16px;
  font-weight: 400;
  color: var(--tp-theme-primary);
  transition: all 0.5s ease;
}
.tp-faq-button.collapsed:after {
  content: "\f067";
}

.tp-documentation-item {
  padding: 34px;
  border: 1px solid #620035;
  transition: all 0.3s ease-in-out;
  box-shadow: 4px 4px 0 0 #620035;
}
.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;
  color: var(--tp-common-white);
  background: var(--tp-common-black);
}
.tp-documentation-content a:hover {
  background: var(--tp-theme-primary);
  color: var(--tp-common-white);
}

.tp-demo-footer-bg {
  padding-top: 110px;
}
.tp-demo-footer-heading h4 {
  font-size: 80px;
  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);
}

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

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