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

    Template Name: Aleric - Digital Agency & Creative Portfolio HTML Template
    Author: AQLOVA
    Support: basictheme400@gmail.com
    Description: Aleric - Digital Agency & Creative Portfolio HTML Template
    Version: 1.0.2

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

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

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

	-----------------
    02. COMPONENTS css
	-----------------
		2.1 Animations
		2.2 Background
		2.3 scrollToTop
		2.4 Breadcrumb
		2.5 Buttons
		2.6 Magic Cursor css start
		2.7 Nice Select
		2.8 offcanvas
		2.9 Preloader
		2.10 Search css start
		2.11 Section Title

	-----------------
    03. HEADER CSS
	-----------------
		3.1 Header Style

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

	---------------------------------
	05. BLOG CSS
	---------------------------------
		5.1 blog css
		5.2 Postbox css
		5.3 Sidebar css

	---------------------------------
	06. FOOTER CSS
	---------------------------------
		6.1 Footer Style

	---------------------------------
	07. PAGES CSS
	---------------------------------
		7.1 about css start
		7.2 awards css start
		7.3 banner css start
		7.4 brand
		7.5 Cart css
		7.6 Checkout css
		7.7 contact css start
		7.8 counter css start
		7.9 cta css start
		7.10 dark css start
		7.11 Error Css
		7.12 faq css start
		7.13 feature css start
		7.14 Funfact Css
		7.15 gallery css start
		7.16 Hero css start
		7.17 intaractive
		7.18 light css start
		7.19 Login Css
		7.20 map
		7.21 portfolio css start
		7.22 pricing css start
		7.23 process css start
		7.24 product css start
		7.25 profile css start
		7.26 service
		7.27 skill css start
		7.28 skill css start
		7.29 team css start
		7.29 techonolgy css start
		7.30 testimonial css start
		7.31 text css start
		7.32 video css start

**********************************************/
/*----------------------------------------*/
/*  1.1 Theme Default
/*----------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Funnel+Display:wght@300..800&family=Kanit:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Space+Grotesk:wght@300..700&family=Teko:wght@300..700&family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Sora:wght@100..800&family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&family=Familjen+Grotesk:ital,wght@0,400..700;1,400..700&display=swap" rel="stylesheet');
a,
button,
p,
li {
  -webkit-transition: all 0.3s 0s ease-out;
  -moz-transition: all 0.3s 0s ease-out;
  -ms-transition: all 0.3s 0s ease-out;
  -o-transition: all 0.3s 0s ease-out;
  transition: all 0.3s 0s ease-out;
}

/* transform */

@font-face {
  font-family: "Morganite-Bold";
  src: url("../fonts/Morganite-ExtraBold.woff2") format("woff2"), url("../fonts/Morganite-ExtraBold.woff") format("woff"), url("../fonts/Morganite-ExtraBold.ttf") format("truetype");
  font-weight: 800;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: "Morganite-SemiBold";
  src: url("../fonts/Morganite-SemiBold.woff2") format("woff2"), url("../fonts/Morganite-SemiBold.woff") format("woff"), url("../fonts/Morganite-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-display: swap;
  font-style: normal;
}
:root {
  /**
  @font family declaration
  */
  --tp-ff-body: 'Kanit', sans-serif;
  --tp-ff-heading: 'Space Grotesk', sans-serif;
  --tp-ff-p: 'Kanit', sans-serif;
  --tp-ff-teko: 'Teko', sans-serif;
  --tp-ff-funnel: 'Funnel Display', sans-serif;
  --tp-ff-sora: 'Sora', sans-serif;
  --tp-ff-dm: 'DM Sans', sans-serif;
  --tp-ff-inter: 'Inter', sans-serif;
  --tp-ff-poppins: 'Poppins', sans-serif;
  --tp-ff-playfair: 'Playfair Display', serif;
  --tp-ff-jakarta: 'Plus Jakarta Sans', sans-serif;
  --tp-ff-familjen: 'Familjen Grotesk', sans-serif;
  --tp-ff-morganite-bold: 'Morganite-Bold', sans-serif;
  --tp-ff-morganite-semibold: 'Morganite-SemiBold', sans-serif;
  --tp-ff-fontawesome: "Font Awesome 6 Pro";
  /**
  @color declaration
  */
  --tp-common-white: #fff;
  --tp-common-white-2: #f0f0f0;
  --tp-common-black: #030303;
  --tp-common-black-1: #10302a;
  --tp-common-black-2: #0d0d0d;
  --tp-common-black-3: #000;
  --tp-common-black-4: #405955;
  --tp-common-black-5: #111112;
  --tp-common-black-6: #333333;
  --tp-common-black-7: #121314;
  --tp-common-yellow: #fff112;
  --tp-common-yellow-2: #FFD500;
  --tp-common-green: #00dd80;
  --tp-common-green-2: #b4e717;
  --tp-common-green-3: #d5ffdd;
  --tp-common-blue: #5956e9;
  --tp-common-nights: #7D5DFF;
  --tp-common-meteor: #E62415;
  --tp-common-angry: #f14f44;
  --tp-common-sugar : #FFFBF5;
  --tp-common-cream : #b7ab98;
  --tp-common-pink : #eb5939;
  --tp-grey-1: #525252;
  --tp-grey-2: #999;
  --tp-grey-3: #f8f8f8;
  --tp-grey-4: #aaa;
  --tp-grey-5: #f3f1f2;
  --tp-grey-6: #AFB7B6;
  --tp-grey-7: #5c5c5c;
  --tp-grey-8: #101010;
  --tp-theme-primary: #c4ee18;
  --tp-theme-secondary: #ff6d00;
  --tp-theme-1: #0752c5;
  --tp-border-1: #eee;
  --tp-border-2: rgba(51, 51, 51, 0.8);
  --tp-border-3: rgba(255, 255, 255, 0.1);
}

* {
  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-common-black);
  line-height: 26px;
}

a {
  text-decoration: none;
}

h1,
h2,
h3 {
  font-family: var(--tp-ff-heading);
  color: var(--tp-common-black);
  margin-top: 0px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  -webkit-transition: color 0.3s 0s ease-out;
  -moz-transition: color 0.3s 0s ease-out;
  -ms-transition: color 0.3s 0s ease-out;
  -o-transition: color 0.3s 0s ease-out;
  transition: color 0.3s 0s ease-out;
}

h1 {
  font-size: 70px;
}

h2 {
  font-size: 50px;
}

h3 {
  font-size: 36px;
}

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

p {
  font-family: var(--tp-ff-p);
  color: var(--tp-grey-1);
  font-weight: 400;
  font-size: 16px;
  line-height: 26px;
  margin-bottom: 15px;
}

img {
  max-width: 100%;
}

a: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;
}

*::-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-theme-primary);
  font-size: 14px;
  opacity: 1;
}

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

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

/*---------------------------------
    1.1 Common Classes
---------------------------------*/

.hover-text-white:hover {
  color: var(--tp-common-white);
}

.fix {
  overflow: hidden;
}

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

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

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

.p-relative {
  position: relative;
}

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

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

/* transfrom */

.lh-28 {
  line-height: 28px;
}

.lh-120-per {
  line-height: 1.2;
}

.lh-140-per {
  line-height: 1.4;
}

.ls-0 {
  letter-spacing: 0;
}

.ls-m-2 {
  letter-spacing: -0.02em;
}

.ls-m-4 {
  letter-spacing: -0.04em;
}

.opacity-8 {
  opacity: 0.8;
}

.hover-opacity-1:hover {
  opacity: 1;
}

.underline-white {
  background-image: linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor);
  background-size: 0 1px, 0 1px;
  background-position: 100% 100%, 0 100%;
  background-repeat: no-repeat;
  transition: background-size 0.3s linear;
  -webkit-transition: all 0.4s ease 0.3s 0s ease-out;
  -moz-transition: all 0.4s ease 0.3s 0s ease-out;
  -ms-transition: all 0.4s ease 0.3s 0s ease-out;
  -o-transition: all 0.4s ease 0.3s 0s ease-out;
  transition: all 0.4s ease 0.3s 0s ease-out;
}
.underline-white:hover {
  background-image: linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor);
  background-size: 0 1px, 100% 1px;
  background-position: 100% 100%, 0 100%;
  background-repeat: no-repeat;
  transition: background-size 0.3s linear;
  -webkit-transition: all 0.4s ease 0.3s 0s ease-out;
  -moz-transition: all 0.4s ease 0.3s 0s ease-out;
  -ms-transition: all 0.4s ease 0.3s 0s ease-out;
  -o-transition: all 0.4s ease 0.3s 0s ease-out;
  transition: all 0.4s ease 0.3s 0s ease-out;
}

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

.text-uppercase {
  text-transform: uppercase;
}

.p-inherit {
  position: inherit;
}

/*---------------------------------
    1.3 Default Spacing
---------------------------------*/

@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: 574.98px) {
  .pt-155 {
    padding-top: 100px;
  }
}

@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: 574.98px) {
  .pt-115 {
    padding-top: 75px;
  }
}

@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: 574.98px) {
  .pt-100 {
    padding-top: 60px;
  }
}

@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: 574.98px) {
  .pb-160 {
    padding-bottom: 100px;
  }
}

@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: 574.98px) {
  .pb-130 {
    padding-bottom: 90px;
  }
}

/*---------------------------------
  1.2 init style
---------------------------------*/
@media (min-width: 1400px) {
  .container-1524 {
    max-width: 1524px;
  }
}
@media (min-width: 1400px) {
  .container-1824 {
    max-width: 1824px;
  }
}
/* Font weight */

.fw-500 {
  font-weight: 500;
}

.fw-600 {
  font-weight: 600;
}

/* Font size */

.fs-16 {
  font-size: 16px;
}

.fs-18 {
  font-size: 18px;
}

.fs-24 {
  font-size: 24px;
}

.fs-28 {
  font-size: 28px;
}

.fs-35 {
  font-size: 35px;
}

.fs-42 {
  font-size: 42px;
}

/* Font size media query */
@media (max-width: 1399.98px) {
  .fs-xl-40 {
    font-size: 40px;
  }
}
/* Font size media query */
@media (max-width: 1199.98px) {
  .fs-lg-30 {
    font-size: 30px;
  }
}
@media (max-width: 991.98px) {
  .fs-md-22 {
    font-size: 22px;
  }
  .fs-md-30 {
    font-size: 30px;
  }
}
@media (max-width: 767.98px) {
  .fs-sm-30 {
    font-size: 30px;
  }
}
.tp-text-common-white {
  color: var(--tp-common-white);
}

.tp-bg-common-black {
  background-color: var(--tp-common-black);
}

.tp-bg-common-black-5 {
  background-color: var(--tp-common-black-5);
}

.tp-text-grey-2 {
  color: var(--tp-grey-2);
}

.tp-text-grey-5 {
  color: var(--tp-grey-5);
}

.tp-bg-grey-8 {
  background-color: var(--tp-grey-8);
}

.tp-ff-teko {
  font-family: var(--tp-ff-teko);
}

.tp-ff-dm {
  font-family: var(--tp-ff-dm);
}

.tp-ff-inter {
  font-family: var(--tp-ff-inter);
}

.tp-ff-morganite-bold {
  font-family: var(--tp-ff-morganite-bold);
}

/*----------------------------------------*/
/*  2.3 scrollToTop
/*----------------------------------------*/
.scrollToTop {
  display: none !important;
  height: 55px;
  width: 55px;
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: #cbc6c6;
  border-radius: 50%;
  overflow: hidden;
  cursor: pointer;
  z-index: 999;
  transition: 0.5s ease all;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {
  .scrollToTop {
    height: 40px;
    width: 40px;
  }
}

.scrollToTop.active-progress {
  display: block !important;
}

.scrollToTop:hover {
  transform: translateY(-15%);
}

.scrollToTop .arrowUp {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--tp-common-black);
  font-size: 24px;
}

.scrollToTop .arrowUp i {
  font-size: 19px;
}

.scrollToTop .water {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  transform: translateY(100%);
  background-color: var(--tp-theme-primary);
  transition: all 0.3s;
  border: 1px solid var(--tp-theme-primary);
}
.scrollToTop .water svg use {
  margin-bottom: -1px;
  position: relative;
  bottom: -1px;
  fill: var(--tp-theme-primary) !important;
}

.scrollToTop-2 .water {
  background-color: var(--tp-theme-secondary);
  border: 1px solid var(--tp-theme-secondary);
}
.scrollToTop-2 .water svg use {
  fill: var(--tp-theme-secondary) !important;
}

.scrollToTop-3 .water {
  background-color: var(--tp-common-angry);
  border: 1px solid var(--tp-common-angry);
}
.scrollToTop-3 .water svg use {
  fill: var(--tp-common-angry) !important;
}

.scrollToTop-4 .water {
  background-color: var(--tp-theme-1);
  border: 1px solid var(--tp-theme-1);
}
.scrollToTop-4 .water svg use {
  fill: var(--tp-theme-1) !important;
}

.scrollToTop .water_wave {
  width: 200%;
  position: absolute;
  bottom: 100%;
}

.scrollToTop .water_wave_back {
  right: 0;
  fill: var(--tp-theme-primary);
  animation: wave-back 1.4s infinite linear;
}

.scrollToTop .water_wave_front {
  left: 0;
  fill: rgba(122, 37, 158, 0.8784313725);
  margin-bottom: -1px;
  animation: wave-front 0.7s infinite linear;
}

@keyframes wave-front {
  100% {
    transform: translateX(-50%);
  }
}
@keyframes wave-back {
  100% {
    transform: translateX(50%);
  }
}
/*----------------------------------------*/
/*  2.5 Buttons
/*----------------------------------------*/
.tp-btn-2 {
  text-transform: uppercase;
  color: var(--tp-common-black);
  border-radius: 30px;
  padding: 16px 24px;
  line-height: 1;
  background: var(--tp-common-white);
  position: relative;
  z-index: 1;
  font-weight: 500;
  font-size: 15px;
}
.tp-btn-circle-dot {
  position: absolute;
  bottom: 0;
  left: 32px;
  width: 0px;
  height: 0px;
  -webkit-transition: all 0.6s ease-out;
  -moz-transition: all 0.6s ease-out;
  -ms-transition: all 0.6s ease-out;
  -o-transition: all 0.6s ease-out;
  transition: all 0.6s ease-out;
  line-height: 20px;
  border-radius: 50%;
  background-color: var(--tp-theme-primary);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  border: 1px solid transparent;
  z-index: -1;
}
.tp-btn-rounded {
  position: relative;
  z-index: 1;
  overflow: hidden;
}
.tp-btn-rounded:hover .tp-btn-circle-dot {
  width: 420px;
  height: 420px;
}
.tp-btn-vp-group .tp-btn-2 {
  background: #E9E9E9;
  font-weight: 700;
  font-size: 16px;
  font-family: var(--tp-ff-inter);
  color: var(--tp-common-black-5);
  border: 1px solid rgba(17, 17, 18, 0.1);
  padding: 15px 20px;
}
.tp-btn-vp-group:hover > *:nth-child(1) {
  background: var(--tp-common-black-5);
  color: var(--tp-common-white);
}

.tp-rounded-btn-wrap a {
  width: 160px;
  height: 160px;
  font-weight: 500;
  font-size: 18px;
  line-height: 1;
  color: var(--tp-common-black);
  font-family: var(--tp-ff-heading);
  border: 1px solid var(--tp-border-1);
  background: var(--tp-common-white);
  border-radius: 50%;
  display: inline-block;
  text-transform: uppercase;
  text-align: center;
  line-height: 20px;
  padding-top: 40px;
}

/*----------------------------------------*/
/*  2.1 Animations
/*----------------------------------------*/
@keyframes bar_anim {
  0%, 100% {
    -webkit-clip-path: inset(-2px 0);
    clip-path: inset(-2px 0);
  }
  42% {
    -webkit-clip-path: inset(-2px 0 -2px 100%);
    clip-path: inset(-2px 0 -2px 100%);
  }
  43% {
    -webkit-clip-path: inset(-2px 100% -2px 0);
    clip-path: inset(-2px 100% -2px 0);
  }
}

@keyframes headerSlideDown {
  0% {
    margin-top: -150px;
  }
  100% {
    margin-top: 0;
  }
}

.line-1 {
  stroke-dasharray: 1300;
  stroke-dashoffset: 2500;
  animation: dash 5s linear forwards infinite;
}

@keyframes dash {
  to {
    stroke-dashoffset: 0px;
    stroke-dasharray: 1000;
  }
}
@keyframes dash {
  0% {
    stroke-dashoffset: 1000;
  }
  100% {
    stroke-dashoffset: 0;
  }
}
/*----------------------------------------*/
/*  2.9 Preloader
/*----------------------------------------*/
body.loaded {
  overflow: hidden !important;
  height: 100% !important;
}

.loader-wrap {
  position: fixed;
  z-index: 10;
  height: 100vh;
  width: 100%;
  left: 0;
  top: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  overflow: hidden;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  background: transparent;
  z-index: 99999999999999;
}

.loader-wrap svg {
  position: absolute;
  top: 0;
  width: 100%;
  height: 110vh;
  fill: #121212;
}

.loader-wrap .loader-wrap-heading .load-text {
  font-size: 100px;
  font-weight: 500;
  letter-spacing: 0px;
  text-transform: uppercase;
  z-index: 20;
  font-family: var(--tp-ff-heading);
  color: var(--tp-common-white);
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .loader-wrap .loader-wrap-heading .load-text {
    font-size: 80px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {
  .loader-wrap .loader-wrap-heading .load-text {
    font-size: 80px;
  }
}

.load-text span {
  -webkit-animation: loading 1s infinite alternate;
  animation: loading 1s infinite alternate;
}

.load-text span:nth-child(1) {
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
}

.load-text span:nth-child(2) {
  -webkit-animation-delay: 0.1s;
  animation-delay: 0.1s;
}

.load-text span:nth-child(3) {
  -webkit-animation-delay: 0.2s;
  animation-delay: 0.2s;
}

@-webkit-keyframes loading {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes loading {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.containers {
  position: inherit;
}

/*----------------------------------------*/
/*  2.2 Background
/*----------------------------------------*/

.video-production-bg {
  background: #E9E9E9;
}

/*----------------------------------------*/
/*  2.7 Nice Select
/*----------------------------------------*/

/*----------------------------------------*/
/*  2.8 offcanvas
/*----------------------------------------*/
.body-overlay {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 995;
  width: 100%;
  height: 100%;
  background: rgba(24, 24, 24, 0.5);
  visibility: hidden;
  opacity: 0;
  transition: 0.45s ease-in-out;
}
.body-overlay:hover {
  cursor: url(../img/cross-icon/cross-out.png), pointer;
}

.tp-offcanvas {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  position: fixed;
  top: 0;
  right: -100%;
  width: 450px;
  bottom: 0;
  box-shadow: 0 16px -32px 0 rgba(0, 0, 0, 0.8);
  background-color: var(--tp-common-white);
  z-index: 997;
  padding: 50px;
  scrollbar-width: none;
  opacity: 0;
  visibility: hidden;
  transition: 0.45s ease-in-out;
  overflow-y: scroll;
}
@media (max-width: 574.98px) {
  .tp-offcanvas {
    width: 100%;
    padding: 40px 35px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .tp-offcanvas {
    width: 400px;
    padding: 40px;
  }
}
.tp-offcanvas-close-btn button {
  color: black;
}
.tp-offcanvas-close-btn button:hover {
  opacity: 1;
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
}
.tp-offcanvas-social {
  margin-top: 30px;
}
.tp-offcanvas-social ul {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  align-items: center;
}
.tp-offcanvas-social ul li {
  list-style: none;
}
.tp-offcanvas-social ul li:not(:last-child) {
  margin-right: 8px;
}
.tp-offcanvas-social ul li a {
  display: inline-block;
  text-align: center;
  width: 40px;
  height: 40px;
  line-height: 38px;
  border-radius: 40px;
  transition: all 0.3s;
  color: var(--tp-common-black);
  border: 1px solid rgba(2, 11, 24, 0.1);
}
.tp-offcanvas-social ul li a:hover {
  background-color: var(--tp-common-black);
  border-color: var(--tp-common-black);
  color: var(--tp-common-white);
}
.tp-offcanvas-social ul li a svg {
  -webkit-transform: translateY(-1px);
  -moz-transform: translateY(-1px);
  -ms-transform: translateY(-1px);
  -o-transform: translateY(-1px);
  transform: translateY(-1px);
}
.tp-offcanvas-title {
  font-size: 40px;
  line-height: 1;
  letter-spacing: -0.8px;
  font-weight: 700;
  margin-bottom: 15px;
  color: var(--tp-common-black);
}
.tp-offcanvas-title.sm {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 15px;
  text-transform: uppercase;
  color: var(--tp-common-black);
}
.tp-offcanvas-contact {
  margin-bottom: 55px;
}
.tp-offcanvas-contact ul li {
  list-style: none;
}
.tp-offcanvas-contact ul li a {
  display: inline-block;
  color: #414144;
  font-size: 16px;
  position: relative;
  font-family: var(--tp-ff-inter);
}
.tp-offcanvas-contact ul li a::after {
  position: absolute;
  bottom: 2px;
  right: 0;
  width: 0;
  height: 1px;
  content: "";
  transition: 0.4s;
  background-color: #1e1e1e;
}
.tp-offcanvas-contact ul li a:hover {
  color: var(--tp-common-black);
}
.tp-offcanvas-contact ul li a:hover::after {
  width: 100%;
  right: auto;
  left: 0;
}
.tp-offcanvas-gallery {
  margin-bottom: 65px;
}
.tp-offcanvas-gallery-img img {
  transition: 0.9s;
}
.tp-offcanvas-gallery-img:hover img {
  transform: scale(1.2) rotate(-2deg);
}
.tp-offcanvas-content {
  margin-bottom: 45px;
}
.tp-offcanvas-content p {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #414144;
  font-family: var(--tp-ff-inter);
}

.offcanvas-black-bg {
  background: #1C1D20;
}
.offcanvas-black-bg .tp-offcanvas-close-btn button {
  color: var(--tp-common-white);
}
.offcanvas-black-bg .tp-offcanvas-title.sm {
  color: var(--tp-common-white);
}
.offcanvas-black-bg .tp-offcanvas-contact ul li a {
  color: rgba(255, 255, 255, 0.8);
}
.offcanvas-black-bg .tp-offcanvas-contact ul li a:hover {
  color: var(--tp-common-white);
}
.offcanvas-black-bg .tp-offcanvas-contact ul li a::after {
  background-color: var(--tp-common-white);
}
.offcanvas-black-bg .tp-offcanvas-social ul li a {
  color: var(--tp-common-white);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.offcanvas-black-bg .tp-offcanvas-social ul li a:hover {
  color: var(--tp-common-black);
  border-color: var(--tp-common-white);
  background-color: var(--tp-common-white);
}
.offcanvas-black-bg .tp-offcanvas-title {
  color: var(--tp-common-white);
}
.offcanvas-black-bg .tp-offcanvas-content p {
  color: rgba(255, 255, 255, 0.8);
}

/*----------------------------------------*/
/*  2.4 Breadcrumb
/*----------------------------------------*/

/*----------------------------------------*/
/*  2.11 Section Title
/*----------------------------------------*/

/*----------------------------------------*/
/*  2.10 Search css start
/*----------------------------------------*/

/*----------------------------------------*/
/*  2.6 Magic Cursor css start
/*----------------------------------------*/
body.tp-magic-cursor #magic-cursor {
  display: block;
}

#magic-cursor {
  position: absolute;
  display: none;
  width: 10px;
  height: 10px;
  pointer-events: none;
  z-index: 99999;
  opacity: 0;
  top: 0;
  left: 0;
}

#ball {
  position: fixed;
  display: flex;
  align-items: center;
  pointer-events: none;
  border-radius: 50%;
  color: transparent;
  justify-content: center;
  mix-blend-mode: difference;
  background-color: var(--tp-common-black);
}

.cursor-white-bg #ball {
  background-color: var(--tp-common-white) !important;
}

/* Ball view 
============= */

/* Ball drag 
============= */

/* Ball close 
============== */

/* HEADER CSS */
/*----------------------------------------*/
/*  3.1 Header Style
/*----------------------------------------*/
.tp-header-search-btn {
  width: 48px;
  height: 48px;
  display: inline-block;
  color: var(--tp-common-black);
  border: 1px solid var(--tp-border-1);
  text-align: center;
  line-height: 48px;
  border-radius: 100%;
  line-height: 9px;
}
.tp-header-search-btn:hover {
  background: var(--tp-common-black);
  color: var(--tp-common-white);
  border-color: var(--tp-common-black);
}
@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-header-lg-spacing {
    padding: 15px 0px;
  }
}
@media (max-width: 574.98px) {
  .tp-header-lg-spacing {
    padding: 8px 0px;
  }
}
.tp-header-sidebar-btn span {
  height: 2px;
  width: 25px;
  display: block;
  margin: 6px auto;
  background: var(--tp-common-black);
}
.tp-header-sidebar-btn:hover span {
  animation: bar_anim 0.8s cubic-bezier(0.44, 1.1, 0.53, 0.99) 1 forwards;
}
.tp-header-sidebar-btn:hover span:nth-child(2) {
  animation-delay: 0.1s;
}
.tp-header-2-country {
  margin-left: 190px;
}
@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: 574.98px) {
  .tp-header-2-country {
    margin-left: 70px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {
  .tp-header-2-country {
    display: none;
  }
}
.tp-header-2-menu-btn {
  border-radius: 100%;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(104px);
  width: 48px;
  height: 48px;
  padding-right: 14px;
}
.tp-header-2-menu-btn span {
  background: var(--tp-theme-primary);
  width: 11px;
  margin: 4px 0 4px auto;
  border-radius: 10px;
  height: 2px;
}
.tp-header-2-menu-btn span:nth-child(2) {
  width: 20px;
}
.tp-header-2-spacing {
  padding: 18px 0px;
}
@media (max-width: 574.98px) {
  .tp-header-2-right .tp-btn-group {
    display: none;
  }
}
.tp-header-wd-wrap {
  border-bottom: 1px solid var(--tp-border-1);
}
@media (max-width: 574.98px) {
  .tp-header-sa-logo {
    margin-right: 0;
  }
}
.tp-header-sa-search-btn {
  border: 1px solid rgba(0, 0, 0, 0.1411764706);
}
.tp-header-pp-menu-btn {
  border: 1px solid #ebebeb;
  background: var(--tp-common-white);
}
.tp-header-pp-menu-btn span {
  background: var(--tp-common-black);
}
.tp-header-pp-email {
  border: 1px solid var(--tp-border-1);
  border-radius: 100px;
  display: inline-block;
  padding: 4px 18px;
  margin-left: 125px;
}
.tp-header-pp-email:hover {
  color: var(--tp-grey-1);
}
.tp-header-cst-wrap {
  border-bottom: 1px solid rgba(16, 48, 42, 0.1);
}
.tp-header-cst-menu-btn {
  background: var(--tp-grey-5);
}
.tp-header-cst-menu-btn span {
  background: var(--tp-common-black-1);
}
.tp-header-it-bg {
  border-radius: 60px;
  border: 1px solid rgba(0, 0, 0, 0.05);
  background: rgb(252, 255, 252);
  padding: 0px 40px 0px 40px;
  margin-top: 20px;
}
@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: 574.98px) {
  .tp-header-it-bg {
    margin-top: 0;
    padding: 10px 33px 10px 33px;
  }
}
@media (max-width: 574.98px) {
  .tp-header-it-bg {
    padding: 0;
    border: none;
  }
  .tp-header-it-bg .tp-menu-bar {
    padding-right: 0;
    width: auto;
  }
}
.tp-header-it-btn {
  padding: 12px 26px;
  box-shadow: inset 0 4px 16px 1px #0c211b;
}
.tp-header-it-btn:hover {
  background: #FFD700;
  box-shadow: inset 0 4px 16px 1px #FFD700;
}
.tp-header-it-menu-btn {
  background: none;
  padding: 0;
  width: auto;
  border: none;
}
.tp-header-it-menu-btn span {
  background: var(--tp-common-black-1);
  margin: 4px auto 4px 0;
  border-radius: 30px;
}
.tp-header-it-menu-btn span:first-child {
  width: 15px;
}
.tp-header-pb-contact ul {
  display: flex;
  align-items: center;
}
.tp-header-pb-contact ul li {
  font-family: var(--tp-ff-inter);
  letter-spacing: -0.04em;
  text-transform: capitalize;
  color: var(--tp-common-black-1);
  list-style: none;
  opacity: 0.8;
}
.tp-header-pb-contact ul li:first-child {
  margin-right: 40px;
  padding-right: 40px;
  position: relative;
}
.tp-header-pb-contact ul li:first-child::before {
  position: absolute;
  content: "";
  right: 0;
  top: 0;
  background: var(--tp-common-black-1);
  opacity: 0.1;
  width: 1px;
  height: 27px;
}
.tp-header-pb-social ul {
  display: flex;
  align-items: center;
  justify-content: end;
  gap: 12px;
}
.tp-header-pb-social ul li {
  list-style: none;
}
.tp-header-pb-social ul li a {
  font-size: 20px;
}
.tp-header-pb-social ul li a:hover {
  color: var(--tp-theme-secondary);
}
.tp-header-pb-social ul li a svg {
  transform: translateY(-2px);
}
.tp-header-pb-top {
  padding: 15px 0px;
}
.tp-header-pb-logobg {
  position: absolute;
  top: 0;
  left: 0;
  width: 285px;
  height: 100%;
  background: var(--tp-theme-secondary);
  clip-path: polygon(0 0, 87% 0, 100% 100%, 0% 100%);
  z-index: -1;
}
@media only screen and (min-width: 1600px) and (max-width: 1700px), 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), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {
  .tp-header-pb-logobg {
    clip-path: polygon(0 0, 82% 0, 100% 100%, 0% 100%);
    width: 220px;
  }
}
.tp-header-pb-bottom {
  border-top: 1px solid #E7E7E1;
  border-bottom: 1px solid #E7E7E1;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {
  .tp-header-pb-bottom {
    border-top: none;
  }
}
.tp-header-pb-helpline {
  position: relative;
}
.tp-header-pb-helpline::before {
  position: absolute;
  content: "";
  height: 76px;
  width: 1px;
  background: #E7E7E1;
  top: -18px;
  left: 0;
}
.tp-header-pb-helpline-icon {
  border-radius: 100%;
  background: var(--tp-theme-secondary);
  box-shadow: -2px -4px 6px -5px rgba(255, 109, 0, 0.5);
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.tp-header-pb-helpline-icon::before {
  position: absolute;
  content: "";
  width: 48px;
  height: 48px;
  background: var(--tp-theme-secondary);
  z-index: -1;
  opacity: 0.2;
  border-radius: 50%;
}
.tp-header-pb-cart-count {
  width: 22px;
  height: 22px;
  background: var(--tp-theme-secondary);
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  position: absolute;
  top: -7px;
  right: -12px;
}
.tp-header-pb-sidebar {
  width: 76px;
  height: 76px;
  background: var(--tp-theme-secondary);
  margin-right: -12px;
}
@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: 574.98px) {
  .tp-header-pb-sidebar {
    margin-left: 20px;
  }
}
.tp-header-pb-sidebar span {
  background: var(--tp-grey-5);
  border-radius: 10px;
  height: 2px;
  width: 30px;
  margin: 5px auto 5px 24px;
}
.tp-header-pb-sidebar span:first-child {
  width: 22px;
}
.tp-header-pb-sidebar span:nth-child(3) {
  width: 16px;
}
@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), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {
  .tp-header-pb-logo {
    padding-left: 0;
  }
}
.tp-header-ai-bg {
  margin-top: 21px;
  border-radius: 20px;
  box-shadow: 0 4px 59px 2px rgba(0, 0, 0, 0.05);
  background: var(--tp-common-white);
  padding: 0px 32px 0px 32px;
}
@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: 574.98px) {
  .tp-header-ai-bg {
    padding: 10px 20px 10px 20px;
  }
}
.tp-header-ai-menu-btn {
  background: var(--tp-grey-5);
}
.tp-header-ai-menu-btn span {
  background: var(--tp-common-black-6);
}
.tp-header-md-social ul {
  display: flex;
  align-items: center;
  gap: 16px;
}
.tp-header-md-social ul li {
  list-style: none;
}
.tp-header-md-social ul li a {
  font-size: 18px;
  color: var(--tp-common-white);
}
.tp-header-md-social ul li a:hover {
  color: var(--tp-theme-1);
}
.tp-header-md-social ul li a svg {
  transform: translateY(-3px);
}
.tp-header-md-contact ul {
  display: flex;
  justify-content: end;
  gap: 20px;
}
.tp-header-md-contact ul li {
  list-style: none;
  font-family: var(--tp-ff-dm);
  font-weight: 500;
  font-size: 14px;
  color: var(--tp-grey-5);
  display: flex;
  align-items: center;
}
.tp-header-md-contact ul li a {
  margin-left: 3px;
}
.tp-header-md-contact ul li a:hover {
  color: var(--tp-theme-1);
}
.tp-header-md-contact ul li svg {
  margin-right: 8px;
}
.tp-header-md-top {
  padding: 7px 0px;
}
.tp-header-md-search-btn {
  width: 40px;
  height: 40px;
  border: 2px solid rgba(17, 17, 18, 0.1);
  color: var(--tp-common-black-5);
}
@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: 574.98px) {
  .tp-header-md-main {
    padding: 15px 0px;
  }
}
.tp-header-vp-spacing {
  padding: 14px 0px;
}
.tp-header-slider-wrapper {
  padding: 18px 0;
}
.tp-header-slider-bar {
  transition: 0.3s;
  padding: 8px 17px;
  border-radius: 24px;
  display: inline-block;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--tp-common-white);
  text-transform: uppercase;
}
.tp-header-slider-bar:hover {
  color: var(--tp-common-black);
  background: var(--tp-common-white);
  border-color: var(--tp-common-white);
}
.tp-header-slider-bar span svg {
  margin-right: 7px;
}
.tp-header-slider-info a {
  font-size: 15px;
  font-weight: 600;
  color: var(--tp-common-white);
  font-family: var(--tp-ff-inter);
}
.tp-header-slider-right.right-white .tp-header-slider-info a {
  color: var(--tp-common-black);
}
.tp-header-slider-right.right-white .tp-header-slider-bar {
  border: 1px solid rgba(0, 0, 0, 0.1);
  color: var(--tp-common-black);
}
.tp-header-slider-right.right-white .tp-header-slider-bar:hover {
  background: var(--tp-common-black);
  color: var(--tp-common-white);
}

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

.header-fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 55;
}

/*----------------------------------------*/
/*  4.1 Main menu css
/*----------------------------------------*/
.tp-main-menu nav > ul > li {
  list-style: none;
  display: inline-block;
  margin: 0 25px;
  position: relative;
}
@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), (max-width: 574.98px) {
  .tp-main-menu nav > ul > li {
    margin: 0 18px;
  }
}
.tp-main-menu nav > ul > li > a {
  font-family: var(--tp-ff-heading);
  font-weight: 700;
  font-size: 15px;
  text-transform: uppercase;
  color: var(--tp-common-black);
  display: inline-block;
  padding: 28px 0;
}
.tp-main-menu nav > ul > li > a > span {
  color: var(--tp-grey-2);
  display: inline-block;
  margin-left: 2px;
  transition: all 0.4s ease;
}
.tp-main-menu nav ul li {
  position: relative;
}
.tp-main-menu nav ul li:hover.has-dropdown > a > span {
  color: var(--tp-common-black);
}
.tp-main-menu-vp > nav > ul > li > a {
  font-family: var(--tp-ff-sora);
  letter-spacing: -0.02em;
  color: var(--tp-common-black-5);
}

.header-sticky {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  opacity: 1;
  width: 100%;
  z-index: 10;
  visibility: visible;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 2px 6px 0 rgba(19, 19, 22, 0.08);
  transform: translateY(0);
  transition: transform 0.35s ease, opacity 0.3s ease;
  animation: 0.95s ease 0s normal forwards 1 running headerSlideDown;
  -webkit-animation: 0.95s ease 0s normal forwards 1 running headerSlideDown;
}
.header-sticky.header-hidden {
  transform: translateY(-120%);
  opacity: 0;
  pointer-events: none;
  box-shadow: none;
}
.header-sticky .tp-header-menu > nav > ul > li > a {
  padding: 22px 0;
}
.header-sticky.sticky-black-bg {
  background: rgba(38, 37, 40, 0.5);
}
.header-sticky.tp-header-blur::after {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  backdrop-filter: blur(40px);
  z-index: -1;
}
.header-sticky.tp-header-ai-wrap {
  background: none;
  box-shadow: none;
}
.header-sticky.tp-header-ai-wrap .tp-header-ai-bg {
  position: relative;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 20px;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {
  .header-sticky.tp-header-ai-wrap .tp-header-ai-bg {
    margin-top: 5px;
  }
}
.header-sticky.tp-header-ai-wrap .tp-header-ai-bg::after {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  backdrop-filter: blur(40px);
  z-index: -1;
  border-radius: 20px;
}
.header-sticky.tp-header-vp-spacing {
  padding: 0;
}
@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: 574.98px) {
  .header-sticky.tp-header-vp-spacing {
    padding: 10px 0px;
  }
}
.header-sticky .tp-btn-vp-group .tp-btn-2 {
  background: #fff;
}
.header-sticky .tp-btn-vp-group:hover > *:nth-child(2) {
  background: var(--tp-common-black-5);
  color: var(--tp-common-white);
}
.header-sticky .tp-main-menu-cst > nav > ul > li > a {
  padding: 21px 0px;
}
.header-sticky.tp-header-cst-wrap {
  border-bottom: none;
}
.header-sticky .tp-header-it-bg {
  border-radius: 0;
  border: none;
  background: none;
  padding: 0;
  margin-top: 0;
}
.header-sticky .tp-main-menu-it > nav > ul > li > a {
  padding: 21px 0px;
}
.header-sticky .tp-header-pb-top {
  display: none !important;
}
.header-sticky .tp-header-pb-bottom {
  border-top: none;
  border-bottom: none;
}
.header-sticky .tp-header-md-top {
  display: none !important;
}
.header-sticky .tp-main-menu-md > nav > ul > li {
  padding: 15px 0px;
}

.tp-header-dropdown nav ul li {
  list-style: none;
}

/*----------------------------------------*/
/*  4.2 Mobilemenu css
/*----------------------------------------*/
.tp-offcanvas-menu {
  margin-bottom: 40px;
}

/*----------------------------------------*/
/*  5.2 Postbox css
/*----------------------------------------*/

/*----------------------------------------*/
/*  5.3 Sidebar css
/*----------------------------------------*/

/*----------------------------------------*/
/*  5.1 blog css
/*----------------------------------------*/

/*----------------------------------------*/
/*  6.1 Footer Style
/*----------------------------------------*/
/*----------------------------------------*/
/*  5.4 footer css
/*----------------------------------------*/
.tp-footer-top-title {
  font-size: 145px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .tp-footer-top-title {
    font-size: 120px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .tp-footer-top-title {
    font-size: 80px;
  }
}
@media (max-width: 574.98px) {
  .tp-footer-top-title {
    font-size: 60px;
  }
}
.tp-footer-copyright p span {
  transform: translateY(-2px);
  display: inline-block;
}
.tp-footer-it-copyright {
  color: rgba(243, 241, 242, 0.8);
}
.tp-footer-it-copyright a {
  color: rgb(243, 241, 242);
}
.tp-footer-md-copyright-menu a:not(:last-child) {
  margin-right: 30px;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {
  .tp-footer-md-copyright-menu a:not(:last-child) {
    margin-right: 10px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {
  .tp-footer-vp-widget {
    margin-left: 0;
  }
}
.tp-footer-vp-widget span {
  color: rgba(251, 252, 238, 0.6);
}
.tp-footer-vp-widget ul li {
  list-style: none;
}
.tp-footer-vp-widget ul li:not(:last-child) {
  margin-bottom: 15px;
}
.tp-footer-vp-widget ul li a {
  font-family: var(--tp-ff-inter);
  font-weight: 400;
  font-size: 20px;
  letter-spacing: -0.02em;
  color: #fbfcee;
  background-image: linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor);
  background-size: 0 1px, 0 1px;
  background-position: 100% 100%, 0 100%;
  background-repeat: no-repeat;
  transition: background-size 0.3s linear;
  -webkit-transition: all 0.4s ease 0.3s 0s ease-out;
  -moz-transition: all 0.4s ease 0.3s 0s ease-out;
  -ms-transition: all 0.4s ease 0.3s 0s ease-out;
  -o-transition: all 0.4s ease 0.3s 0s ease-out;
  transition: all 0.4s ease 0.3s 0s ease-out;
}
.tp-footer-vp-widget ul li a:hover {
  background-image: linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor);
  background-size: 0 1px, 100% 1px;
  background-position: 100% 100%, 0 100%;
  background-repeat: no-repeat;
  transition: background-size 0.3s linear;
  -webkit-transition: all 0.4s ease 0.3s 0s ease-out;
  -moz-transition: all 0.4s ease 0.3s 0s ease-out;
  -ms-transition: all 0.4s ease 0.3s 0s ease-out;
  -o-transition: all 0.4s ease 0.3s 0s ease-out;
  transition: all 0.4s ease 0.3s 0s ease-out;
}
.tp-footer-vp-widget ul li a svg {
  margin-left: 3px;
}

/*----------------------------------------*/
/*  7.16 Hero css start
/*----------------------------------------*/
.tp-hero-social {
  writing-mode: vertical-rl;
  gap: 15px;
  z-index: 999;
}
.tp-hero-social span {
  font-family: var(--tp-ff-heading);
  font-weight: 700;
  font-size: 18px;
  color: var(--tp-common-black);
}
.tp-hero-social a {
  width: 36px;
  height: 36px;
  border: 1px solid #eee;
  border-radius: 100px;
  transition: all 0.4s ease;
  display: flex;
  justify-content: center;
  align-items: center;
}
.tp-hero-social a:hover {
  background: var(--tp-common-black);
  color: var(--tp-common-white);
  border-color: var(--tp-common-black);
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {
  .tp-hero-vp-content {
    margin-bottom: 50px;
  }
}
.tp-hero-vp-title {
  font-weight: 800;
  font-size: 505px;
  line-height: 73%;
}
@media only screen and (min-width: 1700px) and (max-width: 1800px), only screen and (min-width: 1600px) and (max-width: 1700px) {
  .tp-hero-vp-title {
    font-size: 450px;
  }
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .tp-hero-vp-title {
    font-size: 380px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .tp-hero-vp-title {
    font-size: 330px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tp-hero-vp-title {
    font-size: 270px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tp-hero-vp-title {
    font-size: 210px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .tp-hero-vp-title {
    font-size: 150px;
  }
}
@media (max-width: 574.98px) {
  .tp-hero-vp-title {
    font-size: 92px;
  }
}
.tp-hero-vp-spacing {
  padding-top: 318px;
  padding-bottom: 20px;
  position: relative;
  z-index: 999;
}
@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: 574.98px) {
  .tp-hero-vp-spacing {
    padding-top: 260px;
  }
}
/* @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {
  .tp-hero-vp-spacing {
    padding-top: 170px;
  }
} */

.tp-image-distortion {
  overflow: hidden;
  height: 100%;
  position: relative;
}

.tp-image-distortion canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}


.content__img {
  width: 400px;
  height: auto;
  aspect-ratio: 1.5;
  border-radius: 10px;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  overflow: hidden;
  will-change: transform, filter;
}

.content__img-inner {
  background-position: 50% 50%;
  width: calc(100% + 20px);
  height: calc(100% + 20px);
  background-size: cover;
  position: absolute;
  top: -10px;
  left: -10px;
}

.tp-hero-area {
  position: relative;
  align-items: center;
  overflow: hidden;
}
@media only screen and (min-width: 576px) and (max-width: 991px) {
  .tp-hero-vp-title {
    margin-top: 100px;
  }
}
.tp-hero-vp-title {
  font-weight: 800;
  font-size: 505px;
  line-height: 73%;
  transition: all 0.3s ease-out;
  transform-origin: center center;
  margin-bottom: 2rem;
  position: relative;
  z-index: 10;
}
@media only screen and (min-width: 1700px) and (max-width: 1800px), only screen and (min-width: 1600px) and (max-width: 1700px) {
  .tp-hero-vp-title {
    font-size: 450px;
  }
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .tp-hero-vp-title {
    font-size: 380px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .tp-hero-vp-title {
    font-size: 330px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tp-hero-vp-title {
    font-size: 270px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tp-hero-vp-title {
    font-size: 210px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .tp-hero-vp-title {
    font-size: 150px;
  }
}
@media (max-width: 574.98px) {
  .tp-hero-vp-title {
    font-size: 92px;
  }
}
.tp-hero-vp-spacing {
  padding-top: 318px;
  padding-bottom: 20px;
  position: relative;
}
@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: 574.98px) {
  .tp-hero-vp-spacing {
    padding-top: 260px;
  }
}
/* @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {
  .tp-hero-vp-spacing {
    padding-top: 170px;
  }
} */

/*----------------------------------------*/
/*  7.1 about css start
/*----------------------------------------*/

/*----------------------------------------*/
/*  7.4 brand
/*----------------------------------------*/
.tp-brand-spacing {
  padding: 100px 0px;
  border-top: 1px solid rgba(3, 3, 3, 0.1411764706);
  border-bottom: 1px solid rgba(3, 3, 3, 0.1411764706);
}
@media (max-width: 574.98px) {
  .tp-brand-spacing {
    padding: 70px 0px;
  }
}
.tp-brand-item a {
  opacity: 0.5;
}
.tp-brand-item a:hover {
  opacity: 1;
}
.tp-brand-slide-active .swiper-slide {
  display: inline-block;
  width: auto;
  margin: 0 80px;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) {
  .tp-brand-slide-active .swiper-slide {
    margin: 0 50px;
  }
}
@media (max-width: 574.98px) {
  .tp-brand-slide-active .swiper-slide {
    margin: 0 30px;
  }
}

/*----------------------------------------*/
/*  7.26 service
/*----------------------------------------*/
.tp-service-wd-content ul li {
  font-weight: 500;
  font-size: 18px;
  color: var(--tp-common-black);
  list-style: none;
  margin-bottom: 4px;
}
.tp-service-wd-item {
  border-top: 1px solid var(--tp-border-1);
  padding-top: 35px;
  padding-bottom: 20px;
}
@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: 574.98px) {
  .tp-service-wd-item-title span {
    margin-right: 20px;
  }
}
@media (max-width: 574.98px) {
  .tp-service-wd-item-title span {
    margin-bottom: 3px;
  }
}
.tp-service-vp-bigtitle {
  font-size: 660px;
  color: #dadada;
  font-weight: 800;
  line-height: 73%;
}
@media only screen and (min-width: 1700px) and (max-width: 1800px), only screen and (min-width: 1600px) and (max-width: 1700px) {
  .tp-service-vp-bigtitle {
    font-size: 600px;
  }
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .tp-service-vp-bigtitle {
    font-size: 480px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .tp-service-vp-bigtitle {
    font-size: 440px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tp-service-vp-bigtitle {
    font-size: 360px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tp-service-vp-bigtitle {
    font-size: 270px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .tp-service-vp-bigtitle {
    font-size: 200px;
  }
}
@media (max-width: 574.98px) {
  .tp-service-vp-bigtitle {
    font-size: 120px;
  }
}
.tp-service-vp-para {
  color: rgba(17, 17, 18, 0.8);
}

/*----------------------------------------*/
/*  7.32 video css start
/*----------------------------------------*/

/*----------------------------------------*/
/*  7.21 portfolio css start
/*----------------------------------------*/
:root {
  --numOfSlides: 5;
  --slidingAT: 1.3s;
  --controlSize: 60px;
}
.tp-portfolio-showcase-full-bg {
  padding: 207px 30px 220px 30px;
}
@media only screen and (max-width: 992px) {
    .tp-portfolio-showcase-full-bg {
        padding-top: 50px !important;
    }
}
@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: 574.98px) {
  .tp-portfolio-showcase-full-bg {
    padding: 160px 30px 150px 30px;
  }
}

/* ============ creative Slider ================= */

/* ============ creative Slider ================= */

/*----------------------------------------*/
/*  7.8 counter css start
/*----------------------------------------*/

/*----------------------------------------*/
/*  7.2 awards css start
/*----------------------------------------*/

/*----------------------------------------*/
/*  7.31 text css start
/*----------------------------------------*/
.tp-text-it-item span {
  font-weight: 700;
  font-size: 132px;
  line-height: 1.2;
  letter-spacing: -0.04em;
  text-transform: capitalize;
  color: transparent;
  transition: 0.3s;
  cursor: pointer;
  white-space: nowrap;
  display: inline-block;
  background-size: 0% 100%;
  padding-right: 30px;
  background-repeat: no-repeat;
  font-family: var(--tp-ff-inter);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 2px #000;
  transition: background-size 0.6s cubic-bezier(0.32, 0.55, 0.58, 0.76) 0s, 0.6s -webkit-clip-path cubic-bezier(0.32, 0.55, 0.58, 0.76) 0s;
  background-image: linear-gradient(90deg, #000 0%, #000 50%, transparent 50.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) {
  .tp-text-it-item span {
    font-size: 100px;
  }
}
@media (max-width: 574.98px) {
  .tp-text-it-item span {
    font-size: 50px;
  }
}
.tp-text-it-item span:hover {
  background-size: 200% 100%;
}

/*----------------------------------------*/
/*  7.30 testimonial css start
/*----------------------------------------*/

/*----------------------------------------*/
/*  7.3 banner css start
/*----------------------------------------*/

/*----------------------------------------*/
/*  7.27 skill css start
/*----------------------------------------*/

/*----------------------------------------*/
/*  7.9 cta css start
/*----------------------------------------*/
.tp-cta-wd-shape {
  position: absolute;
  bottom: -16px;
  right: 0;
  width: 36%;
}
.tp-cta-wd-shape svg {
  width: 100%;
}
.tp-cta-sa-btn {
  position: absolute;
  bottom: 0;
  right: 0;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {
  .tp-cta-sa-btn {
    position: inherit;
    margin-top: 30px;
  }
}

.tp-cta-ai-bg {
  border-radius: 60px;
  padding: 187px 30px 200px 30px;
}

@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: 574.98px) {
  .tp-cta-ai-bg {
    padding: 100px 30px 100px 30px;
  }
}

/*----------------------------------------*/
/*  7.23 process css start
/*----------------------------------------*/

/*----------------------------------------*/
/*  7.29 techonolgy css start
/*----------------------------------------*/

/*----------------------------------------*/
/*  7.29 team css start
/*----------------------------------------*/

/*----------------------------------------*/
/*  7.12 faq css start
/*----------------------------------------*/
.tp-faq-wrap .tp-faq-btn {
  font-weight: 700;
  font-size: 18px;
  color: var(--tp-common-black);
  background: none;
  border-color: transparent;
  display: flex;
  justify-content: space-between;
  padding: 17px 30px;
}
.tp-faq-wrap .tp-faq-btn:focus {
  outline: inherit;
  box-shadow: none;
  border-color: none;
}
.tp-faq-wrap .tp-faq-btn:not(.collapsed) {
  background-color: transparent;
  box-shadow: none;
}
.tp-faq-wrap .accordion-item:not(:first-of-type) {
  border: 1px solid #eee;
}
.tp-faq-wrap .accordion-item:first-of-type {
  border-radius: 0;
}
.tp-faq-wrap .accordion-btn {
  color: #d9d9d9;
}
.tp-faq-wrap .accordion-body {
  padding: 0px 30px 18px 30px;
}
.tp-faq-details-para p {
  font-size: 18px;
  line-height: 144%;
}
@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: 574.98px) {
  .tp-faq-cst-tab-content {
    margin-left: 0;
  }
}
.tp-faq-cst-tab-content .tp-faq-btn {
  font-family: var(--tp-ff-dm);
  font-weight: 600;
  font-size: 20px;
  color: var(--tp-common-black-1);
  padding: 27px 30px;
  padding-left: 0;
}
.tp-faq-cst-tab-content .tp-faq-btn .accordion-btn {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  display: inline-block;
  width: 12px;
  height: 12px;
}
.tp-faq-cst-tab-content .tp-faq-btn .accordion-btn::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 2px;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  background-color: #000000;
  border-radius: 2px;
  transition: all 0.4s ease;
}
.tp-faq-cst-tab-content .tp-faq-btn .accordion-btn::before {
  position: absolute;
  content: "";
  width: 2px;
  height: 100%;
  left: 50%;
  top: 0;
  background-color: #000000;
  transform: translateX(-50%);
  border-radius: 2px;
  transition: all 0.4s ease;
}
.tp-faq-cst-tab-content .tp-faq-btn:not(.collapsed) .accordion-btn::before {
  transform: translateX(-50%) rotate(90deg);
  background: var(--tp-common-black);
  opacity: 1;
}
.tp-faq-cst-tab-content .tp-faq-btn:not(.collapsed) .accordion-btn::after {
  background: var(--tp-common-black);
  opacity: 1;
}
.tp-faq-cst-tab-content .accordion-item:not(:first-of-type) {
  border: none;
  border-bottom: 1px solid #E1E5E4;
}
.tp-faq-cst-tab-content .accordion-item {
  border: none;
  border-bottom: 1px solid #E1E5E4;
  background: transparent;
}
.tp-faq-cst-tab-content .accordion-body {
  padding: 0px 30px 18px 0;
}
.tp-faq-cst-tab-content .tp-faq-details-para p {
  font-family: var(--tp-ff-dm);
  color: rgba(16, 48, 42, 0.8);
  margin-bottom: 7px;
}
.tp-faq-ai-tab-content .tp-faq-btn {
  color: var(--tp-grey-5);
  font-family: var(--tp-ff-jakarta);
  font-weight: 600;
  font-size: 32px;
  letter-spacing: -0.04em;
  padding: 23px 30px;
  padding-left: 0;
  text-align: left;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {
  .tp-faq-ai-tab-content .tp-faq-btn {
    font-size: 22px;
  }
}
.tp-faq-ai-tab-content .tp-faq-btn .accordion-btn::before {
  background-color: var(--tp-common-white);
}
.tp-faq-ai-tab-content .tp-faq-btn:not(.collapsed) .accordion-btn::after {
  background-color: var(--tp-common-white);
}
.tp-faq-ai-tab-content .tp-faq-btn .accordion-btn::after {
  background-color: var(--tp-common-white);
}
.tp-faq-ai-tab-content .tp-faq-btn .accordion-btn {
  width: 20px;
  height: 20px;
}
.tp-faq-ai-tab-content .tp-faq-details-para p {
  color: var(--tp-grey-5);
  opacity: 1;
  font-family: var(--tp-ff-dm);
  font-weight: 400;
  font-size: 21px;
  line-height: 156%;
  padding-left: 136px;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {
  .tp-faq-ai-tab-content .tp-faq-details-para p {
    padding-left: 55px;
  }
}
.tp-faq-ai-tab-content .accordion-item {
  border-color: rgba(255, 255, 255, 0.1);
  padding: 32px 24px;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {
  .tp-faq-ai-tab-content .accordion-item {
    padding: 10px 0;
  }
}
.tp-faq-ai-tab-content .accordion-item:not(:first-of-type) {
  border-color: rgba(255, 255, 255, 0.1);
}
.tp-faq-ai-count {
  padding-right: 100px;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {
  .tp-faq-ai-count {
    padding-right: 30px;
  }
}

/*----------------------------------------*/
/*  7.7 contact css start
/*----------------------------------------*/

/*----------------------------------------*/
/*  7.15 gallery css start
/*----------------------------------------*/

/*----------------------------------------*/
/*  7.20 map
/*----------------------------------------*/

/*----------------------------------------*/
/*  7.5 Cart css
/*----------------------------------------*/

/*----------------------------------------*/
/*  7.28 skill css start
/*----------------------------------------*/

/*--------------------------------------------------
	16. Responsive
---------------------------------------------------*/
/*----------------------------------------*/
/*  7.22 pricing css start
/*----------------------------------------*/

/*----------------------------------------*/
/*  7.13 feature css start
/*----------------------------------------*/

/*----------------------------------------*/
/*  7.14 Funfact Css
/*----------------------------------------*/

/*----------------------------------------*/
/*  7.17 intaractive
/*----------------------------------------*/

/*----------------------------------------*/
/*  7.19 Login Css
/*----------------------------------------*/

/*----------------------------------------*/
/*  7.25 profile css start
/*----------------------------------------*/

/*----------------------------------------*/
/*  2.6 Nice Select
/*----------------------------------------*/

/*----------------------------------------*/
/*  7.24 product css start
/*----------------------------------------*/

/*----------------------------------------*/
/*  7.6 Checkout css
/*----------------------------------------*/

/*----------------------------------------*/
/*  7.11 Error Css
/*----------------------------------------*/

/*----------------------------------------*/
/*  7.10 dark css start
/*----------------------------------------*/
.aleric-dark body {
  background-color: #030303;
}
.aleric-dark .tp-main-menu > nav > ul > li > a {
  color: var(--tp-common-white);
}
.aleric-dark .tp-main-menu > nav > ul > li:hover.has-dropdown > a > span {
  color: var(--tp-common-white);
}
.aleric-dark .tp-hero-social span {
  color: var(--tp-common-white);
}
.aleric-dark .tp-hero-social a {
  border: 1px solid var(--tp-border-3);
  color: var(--tp-common-white);
}
.aleric-dark .tp-hero-social a:hover {
  background: var(--tp-common-white);
  color: var(--tp-common-black);
}
.aleric-dark .tp-rounded-btn-wrap a {
  border: 1px solid var(--tp-border-3);
  background: var(--tp-common-black);
  color: var(--tp-common-white);
}
.aleric-dark .tp-rounded-btn-wrap a:hover {
  color: var(--tp-common-black);
}
.aleric-dark .tp-brand-spacing {
  border-top: 1px solid var(--tp-border-3);
  border-bottom: 1px solid var(--tp-border-3);
}
.aleric-dark .tp-header-sidebar-btn span {
  background: var(--tp-common-white);
}
.aleric-dark .tp-btn-vp-group .tp-btn-2 {
  background: #ffd700;
  border: 1px solid var(--tp-border-3);
  color: var(--tp-common-black);
}
.aleric-dark .tp-btn-vp-group:hover > *:nth-child(1) {
  background: var(--tp-common-white) !important;
  color: var(--tp-common-black) !important;
  transform: scale(1.25) !important;
}
.aleric-dark .tp-service-vp-para {
  color: var(--tp-grey-2);
}
.aleric-dark .tp-faq-cst-tab-content .tp-faq-btn {
  color: #ffd700;
  opacity: 0.9;
}
.aleric-dark .tp-faq-cst-tab-content .tp-faq-details-para p {
  color: #fff
}
.aleric-dark .tp-faq-cst-tab-content .accordion-item {
  border-bottom: 1px solid var(--tp-border-3);
}
.aleric-dark .tp-text-it-item span {
  -webkit-text-stroke: 2px var(--tp-common-black);
}
.aleric-dark .tp-service-wd-content ul li {
  color: var(--tp-common-white);
}
.aleric-dark .tp-service-wd-item {
  border-top: 1px solid var(--tp-border-3);
}
.aleric-dark .tp-faq-cst-tab-content .tp-faq-btn .accordion-btn::before {
  background-color: var(--tp-common-white);
}
.aleric-dark .tp-faq-cst-tab-content .tp-faq-btn .accordion-btn::after {
  background-color: var(--tp-common-white);
}

/*----------------------------------------*/
/*  7.18 light css start
/*----------------------------------------*/

/*----------------------------------------*/
/*  4.1 hero css
/*----------------------------------------*/

/*----------------------------------------*/
/*  4.1 button css
/*----------------------------------------*/

/*----------------------------------------*/
/*  4.1 brand css
/*----------------------------------------*/

/*----------------------------------------*/
/*  4.1 step css
/*----------------------------------------*/

/*----------------------------------------*/
/*  4.1 common css
/*----------------------------------------*/

/*----------------------------------------*/
/*  4.1 video css
/*----------------------------------------*/

/*----------------------------------------*/
/*  4.1 service css
/*----------------------------------------*/

/*----------------------------------------*/
/*  4.1 project css
/*----------------------------------------*/

/*----------------------------------------*/
/*  4.1 price css
/*----------------------------------------*/

/*----------------------------------------*/
/*  4.1 faq css
/*----------------------------------------*/

/*----------------------------------------*/
/*  4.1 text-slider css
/*----------------------------------------*/

/*----------------------------------------*/
/*  4.1 testimonial css
/*----------------------------------------*/

/*----------------------------------------*/
/*  4.1 blog css
/*----------------------------------------*/

/*----------------------------------------*/
/*  4.1 footer css
/*----------------------------------------*/

/*----------------------------------------*/
/*  4.1 header css
/*----------------------------------------*/

/*----------------------------------------*/
/*  4.1 about css
/*----------------------------------------*/

/*----------------------------------------*/
/*  4.1 fact css
/*----------------------------------------*/

/*----------------------------------------*/
/*  4.1 chose css
/*----------------------------------------*/

/*----------------------------------------*/
/*  4.1 instagram css
/*----------------------------------------*/

/*----------------------------------------*/
/*  4.1 banner css
/*----------------------------------------*/

/*----------------------------------------*/
/*  4.1 cetagory css
/*----------------------------------------*/

/*----------------------------------------*/
/*  4.1 product css
/*----------------------------------------*/

/*----------------------------------------*/
/*  4.1 featured css
/*----------------------------------------*/

/*----------------------------------------*/
/*  4.1 dark css
/*----------------------------------------*/

.custom-title-style {
    font-size: 2.5em; 
    margin-left: 4em; 
    margin-right: 4em; 
    margin-bottom: 10px !important;
}

@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {
    .custom-title-style {
        font-size: 2.2em; 
        margin-left: 0em; 
        margin-right: 0em;
    }
}

/* Mobile fix for the CTA button text wrapping */
@media (max-width: 600px) {

  /* if the parent is flex/inline-block, give it room */
  .tp-btn-vp-group{
    width: 100%;
    justify-content: center;
  }

  .tp-btn-vp-group .tp-btn-2{
    width: 100%;            /* or remove if you don't want full width */
    max-width: 320px;       /* optional: keeps it from being too wide */
    height: auto;           /* critical: allow multi-line height */
    min-width: 0;           /* critical in flex layouts */

    white-space: normal;    /* ✅ allow wrapping */
    overflow-wrap: anywhere;/* ✅ break long chunks if needed */
    word-break: normal;     /* ✅ don't chop words unnecessarily */

    line-height: 1.25;      /* line-height: 1 often looks clipped */
    text-align: center;

    display: inline-block;  /* safest for wrapping buttons */
  }
}

@media (max-width: 600px) {
    .hero-height {
        display: flex;
        align-items: end;
        height: 90vh !important;
    }   
}