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

    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.1

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

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

a,
button,
p,
input,
select,
textarea,
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,
h4,
h5,
h6 {
  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;
}

h4 {
  font-size: 26px;
}

h5 {
  font-size: 20px;
}

h6 {
  font-size: 16px;
}

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

input[type=text],
input[type=number],
input[type=url],
textarea {
  outline: none;
  background-color: var(--tp-common-white);
  height: 52px;
  width: 100%;
  line-height: 52px;
  font-size: 16px;
  color: var(--tp-theme-primary);
  padding-left: 25px;
  padding-right: 25px;
  border-radius: 4px;
  border: 1px solid var(--tp-common-white);
}
input[type=text]::-webkit-input-placeholder,
input[type=number]::-webkit-input-placeholder,
input[type=url]::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  /* Chrome/Opera/Safari */
  color: var(--tp-grey-2);
}
input[type=text]::-moz-placeholder,
input[type=number]::-moz-placeholder,
input[type=url]::-moz-placeholder,
textarea::-moz-placeholder {
  /* Firefox 19+ */
  color: var(--tp-grey-2);
}
input[type=text]:-moz-placeholder,
input[type=number]:-moz-placeholder,
input[type=url]:-moz-placeholder,
textarea:-moz-placeholder {
  /* Firefox 4-18 */
  color: var(--tp-grey-2);
}
input[type=text]:-ms-input-placeholder,
input[type=number]:-ms-input-placeholder,
input[type=url]:-ms-input-placeholder,
textarea:-ms-input-placeholder {
  /* IE 10+  Edge*/
  color: var(--tp-grey-2);
}
input[type=text]::placeholder,
input[type=number]::placeholder,
input[type=url]::placeholder,
textarea::placeholder {
  /* MODERN BROWSER */
  color: var(--tp-grey-2);
}
[dir=rtl] input[type=text],
[dir=rtl] input[type=number],
[dir=rtl] input[type=url],
[dir=rtl] textarea {
  text-align: right;
}
input[type=text]:focus,
input[type=number]:focus,
input[type=url]:focus,
textarea:focus {
  border-color: var(--tp-theme-primary);
}
input[type=text]:focus::placeholder,
input[type=number]: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-theme-primary);
  font-size: 14px;
  opacity: 1;
}

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

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

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

.fix {
  overflow: hidden;
}

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

.p-relative {
  position: relative;
}

/* transfrom */

@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) {
  .br br {
    display: none;
  }
}

/*---------------------------------
    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-100 {
    padding-top: 60px;
  }
}

/*---------------------------------
  1.2 init style
---------------------------------*/
/* Font weight */

/* Font size */
.fs-12 {
  font-size: 12px;
}

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

/* Font size media query */
/* Font size media query */

/*----------------------------------------*/
/*  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: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 .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: #7A259EE0;
  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-cst {
  padding: 18px 30px;
}

/*----------------------------------------*/
/*  2.1 Animations
/*----------------------------------------*/
@keyframes headerSlideDown {
  0% {
    margin-top: -150px;
  }
  100% {
    margin-top: 0;
  }
}
@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);
  }
}

.box {
  position: relative;
  overflow: hidden;
}

@keyframes dash {
  to {
    stroke-dashoffset: 0px;
    stroke-dasharray: 1000;
  }
}
@keyframes dash-2 {
  to {
    stroke-dashoffset: 0px;
    stroke-dasharray: 3000;
  }
}
@-webkit-keyframes tpSwing {
  0% {
    -webkit-transform: rotate(6deg);
    -moz-transform: rotate(6deg);
    -ms-transform: rotate(6deg);
    -o-transform: rotate(6deg);
    transform: rotate(6deg);
  }
  100% {
    -webkit-transform: rotate(-6deg);
    -moz-transform: rotate(-6deg);
    -ms-transform: rotate(-6deg);
    -o-transform: rotate(-6deg);
    transform: rotate(-6deg);
  }
}
@-moz-keyframes tpSwing {
  0% {
    -webkit-transform: rotate(6deg);
    -moz-transform: rotate(6deg);
    -ms-transform: rotate(6deg);
    -o-transform: rotate(6deg);
    transform: rotate(6deg);
  }
  100% {
    -webkit-transform: rotate(-6deg);
    -moz-transform: rotate(-6deg);
    -ms-transform: rotate(-6deg);
    -o-transform: rotate(-6deg);
    transform: rotate(-6deg);
  }
}
@-ms-keyframes tpSwing {
  0% {
    -webkit-transform: rotate(6deg);
    -moz-transform: rotate(6deg);
    -ms-transform: rotate(6deg);
    -o-transform: rotate(6deg);
    transform: rotate(6deg);
  }
  100% {
    -webkit-transform: rotate(-6deg);
    -moz-transform: rotate(-6deg);
    -ms-transform: rotate(-6deg);
    -o-transform: rotate(-6deg);
    transform: rotate(-6deg);
  }
}
@keyframes tpSwing {
  0% {
    -webkit-transform: rotate(6deg);
    -moz-transform: rotate(6deg);
    -ms-transform: rotate(6deg);
    -o-transform: rotate(6deg);
    transform: rotate(6deg);
  }
  100% {
    -webkit-transform: rotate(-6deg);
    -moz-transform: rotate(-6deg);
    -ms-transform: rotate(-6deg);
    -o-transform: rotate(-6deg);
    transform: rotate(-6deg);
  }
}

@keyframes tp_animation_spin {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes tdfadeUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(50px);
    -ms-transform: translateY(50px);
    transform: translateY(50px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}
@keyframes mymove {
  0% {
    transform: scale(0.9);
  }
  50% {
    transform: scale(1);
  }
  100% {
    transform: scale(0.9);
  }
}
@keyframes levitate-lg {
  0% {
    -webkit-transform: translateY(0) scale(1);
    transform: translateY(0) scale(1);
  }
  50% {
    -webkit-transform: translateY(30px) scale(1.01);
    transform: translateY(30px) scale(1.01);
  }
  100% {
    -webkit-transform: translateY(0) scale(1);
    transform: translateY(0) scale(1);
  }
}
@keyframes popups {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  50% {
    -webkit-transform: scale(1.4);
    transform: scale(1.4);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes color-change {
  0% {
    opacity: 0.7;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.7;
  }
}
@-webkit-keyframes sliderTitle3 {
  0% {
    background-position: 0%;
  }
  100% {
    background-position: 100%;
  }
}
@-moz-keyframes sliderTitle3 {
  0% {
    background-position: 0%;
  }
  100% {
    background-position: 100%;
  }
}
@-ms-keyframes sliderTitle3 {
  0% {
    background-position: 0%;
  }
  100% {
    background-position: 100%;
  }
}
@keyframes sliderTitle3 {
  0% {
    background-position: 0%;
  }
  100% {
    background-position: 100%;
  }
}

@-webkit-keyframes tpshake {
  10% {
    transform: translateY(-10px);
  }
  50% {
    transform: skew(15deg);
  }
  80% {
    transform: rotate(10deg);
  }
  100% {
    transform: translate(0);
  }
}
@-moz-keyframes tpshake {
  10% {
    transform: translateY(-10px);
  }
  50% {
    transform: skew(15deg);
  }
  80% {
    transform: rotate(10deg);
  }
  100% {
    transform: translate(0);
  }
}
@-ms-keyframes tpshake {
  10% {
    transform: translateY(-10px);
  }
  50% {
    transform: skew(15deg);
  }
  80% {
    transform: rotate(10deg);
  }
  100% {
    transform: translate(0);
  }
}
@keyframes tpshake {
  10% {
    transform: translateY(-10px);
  }
  50% {
    transform: skew(15deg);
  }
  80% {
    transform: rotate(10deg);
  }
  100% {
    transform: translate(0);
  }
}

@-webkit-keyframes ripple-red {
  0% {
    -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.3), 0 0 0 10px rgba(255, 255, 255, 0.3), 0 0 0 20px rgba(255, 255, 255, 0.3);
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.3), 0 0 0 10px rgba(255, 255, 255, 0.3), 0 0 0 20px rgba(255, 255, 255, 0.3);
  }
  100% {
    -webkit-box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.3), 0 0 0 20px rgba(255, 255, 255, 0.3), 0 0 0 30px rgba(255, 255, 255, 0);
    box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.3), 0 0 0 20px rgba(255, 255, 255, 0.3), 0 0 0 30px rgba(255, 42, 2, 0);
  }
}
@-moz-keyframes ripple-red {
  0% {
    -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.3), 0 0 0 10px rgba(255, 255, 255, 0.3), 0 0 0 20px rgba(255, 255, 255, 0.3);
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.3), 0 0 0 10px rgba(255, 255, 255, 0.3), 0 0 0 20px rgba(255, 255, 255, 0.3);
  }
  100% {
    -webkit-box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.3), 0 0 0 20px rgba(255, 255, 255, 0.3), 0 0 0 30px rgba(255, 255, 255, 0);
    box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.3), 0 0 0 20px rgba(255, 255, 255, 0.3), 0 0 0 30px rgba(255, 42, 2, 0);
  }
}
@-ms-keyframes ripple-red {
  0% {
    -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.3), 0 0 0 10px rgba(255, 255, 255, 0.3), 0 0 0 20px rgba(255, 255, 255, 0.3);
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.3), 0 0 0 10px rgba(255, 255, 255, 0.3), 0 0 0 20px rgba(255, 255, 255, 0.3);
  }
  100% {
    -webkit-box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.3), 0 0 0 20px rgba(255, 255, 255, 0.3), 0 0 0 30px rgba(255, 255, 255, 0);
    box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.3), 0 0 0 20px rgba(255, 255, 255, 0.3), 0 0 0 30px rgba(255, 42, 2, 0);
  }
}
@keyframes ripple-red {
  0% {
    -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.3), 0 0 0 10px rgba(255, 255, 255, 0.3), 0 0 0 20px rgba(255, 255, 255, 0.3);
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.3), 0 0 0 10px rgba(255, 255, 255, 0.3), 0 0 0 20px rgba(255, 255, 255, 0.3);
  }
  100% {
    -webkit-box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.3), 0 0 0 20px rgba(255, 255, 255, 0.3), 0 0 0 30px rgba(255, 255, 255, 0);
    box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.3), 0 0 0 20px rgba(255, 255, 255, 0.3), 0 0 0 30px rgba(255, 42, 2, 0);
  }
}

@keyframes upslide {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-20px);
  }
  60% {
    transform: translateY(-10px);
  }
}

@keyframes upslide-1 {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-8px);
  }
  60% {
    transform: translateY(-4px);
  }
}

@keyframes arrowLineRotation {
  to {
    transform: rotate(180deg);
  }
}
@keyframes arrowLineRotationRev {
  to {
    transform: rotate(-180deg);
  }
}
@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;
}

@-webkit-keyframes loading {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes loading {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

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

/*----------------------------------------*/
/*  2.7 Nice Select
/*----------------------------------------*/
.nice-select {
  -webkit-tap-highlight-color: transparent;
  box-sizing: border-box;
  clear: both;
  cursor: pointer;
  display: block;
  outline: none;
  position: relative;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  border: 1px solid transparent;
  user-select: none;
  white-space: nowrap;
  width: auto;
  color: #999 !important;
  padding-left: 25px;
  padding-right: 25px;
  font-weight: 400;
  font-size: 16px;
  line-height: 56px;
}
.nice-select:hover {
  border-color: ar(--tp-theme-primary);
}
.nice-select:active, .nice-select.open, .nice-select:focus {
  border-color: var(--tp-theme-primary);
}
.nice-select::after {
  position: absolute;
  content: "\f107";
  top: 50%;
  right: 25px;
  font-family: var(--tp-ff-fontawesome);
  color: var(--tp-grey-2);
  font-weight: 500;
  pointer-events: none;
  font-size: 18px;
  -webkit-transition: all 0.15s ease-in-out;
  transition: all 0.15s ease-in-out;
  margin-top: 0;
  transform-origin: center;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
}
.nice-select.open::after {
  -webkit-transform: translateY(-50%) rotate(-180deg);
  -moz-transform: translateY(-50%) rotate(-180deg);
  -ms-transform: translateY(-50%) rotate(-180deg);
  -o-transform: translateY(-50%) rotate(-180deg);
  transform: translateY(-50%) rotate(-180deg);
}
.nice-select.disabled {
  border-color: #ededed;
  color: #999;
  pointer-events: none;
}
.nice-select.disabled::after {
  border-color: #cccccc;
}
.nice-select.right {
  float: right;
}
.nice-select.small {
  font-size: 12px;
  height: 36px;
  line-height: 34px;
}
.nice-select.small::after {
  height: 4px;
  width: 4px;
}

/*----------------------------------------*/
/*  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-top {
  margin-bottom: 90px;
}
.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-gallery {
  margin-bottom: 65px;
}
.tp-offcanvas-gallery-img img {
  transition: 0.9s;
}
.tp-offcanvas-gallery-img:hover img {
  transform: scale(1.2) rotate(-2deg);
}

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

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

/*----------------------------------------*/
/*  2.10 Search css start
/*----------------------------------------*/
.tp-search-form-toggle {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: var(--tp-common-white);
  z-index: 100;
  padding-top: 70px;
  padding-bottom: 100px;
  opacity: 0;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  -webkit-transform: translateY(calc(-100% - 80px));
  -ms-transform: translateY(calc(-100% - 80px));
  transform: translateY(calc(-100% - 80px));
  -webkit-transition: opacity 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
  transition: opacity 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
  transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
  transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
  -webkit-transition-delay: 0.5s;
  transition-delay: 0.5s;
  z-index: 9999;
}
.tp-search-form-toggle.active {
  opacity: 1;
  -webkit-transform: translateY(0%);
  -ms-transform: translateY(0%);
  transform: translateY(0%);
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}
.tp-search-body-overlay {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(24, 24, 24, 0.5);
  z-index: 99;
  cursor: -webkit-zoom-out;
  cursor: zoom-out;
  -webkit-transform: translateY(calc(-100% - 80px));
  -ms-transform: translateY(calc(-100% - 80px));
  transform: translateY(calc(-100% - 80px));
  -webkit-transition: all 0.5s ease-in-out 0s;
  transition: all 0.5s ease-in-out 0s;
  -webkit-transition-delay: 0.3s;
  transition-delay: 0.3s;
}
.tp-search-body-overlay.active {
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0);
}

/*----------------------------------------*/
/*  2.6 Magic Cursor css start
/*----------------------------------------*/

#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-black-bg #ball {
  background-color: var(--tp-common-black) !important;
}

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

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

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

/*----------------------------------------*/
/*  3.1 Header Style
/*----------------------------------------*/

/* HEADER CSS */
/*----------------------------------------*/
/*  4.1 Main menu css
/*----------------------------------------*/

/*----------------------------------------*/
/*  4.2 Mobilemenu css
/*----------------------------------------*/
.tp-offcanvas-menu {
  margin-bottom: 40px;
}
.tp-offcanvas-menu ul {
  list-style: none;
}
.tp-offcanvas-menu ul li {
  position: relative !important;
}
.tp-offcanvas-menu ul li > a {
  padding: 8px 0;
  display: block;
  font-size: 18px;
  font-weight: 500;
  font-family: var(--tp-ff-inter);
}
.tp-offcanvas-menu ul li.active > a {
  color: var(--tp-common-black);
}

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

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

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

/*----------------------------------------*/
/*  6.1 Footer Style
/*----------------------------------------*/
/*----------------------------------------*/
/*  5.4 footer css
/*----------------------------------------*/

/*----------------------------------------*/
/*  7.16 Hero css start
/*----------------------------------------*/

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

/*----------------------------------------*/
/*  7.4 brand
/*----------------------------------------*/

/*----------------------------------------*/
/*  7.26 service
/*----------------------------------------*/

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

/*----------------------------------------*/
/*  7.21 portfolio css start
/*----------------------------------------*/
:root {
  --numOfSlides: 5;
  --slidingAT: 1.3s;
  --controlSize: 60px;
}

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

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

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

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

/*----------------------------------------*/
/*  7.31 text css start
/*----------------------------------------*/

/* Custom Title Slider */

/* IT Text Slider Pills */

/* Big Gradient-Stroke Words */

/* PB Text Slider */

/* AI Slider */

/* Medium Background Titles */

/*----------------------------------------*/
/*  Responsive
/*----------------------------------------*/

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

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

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

/*----------------------------------------*/
/*  7.9 cta css start
/*----------------------------------------*/

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

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

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

/*----------------------------------------*/
/*  7.12 faq css start
/*----------------------------------------*/

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

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

/*----------------------------------------*/
/*  4.1 hero css
/*----------------------------------------*/
.al-hero-seo-bg {
  padding-top: 260px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
@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) {
  .al-hero-seo-bg {
    padding-top: 200px;
  }
}
@media (max-width: 574.98px) {
  .al-hero-seo-bg {
    padding-top: 160px;
  }
}
.al-hero-seo-title {
  font-size: 70px;
  text-align: center;
  letter-spacing: -0.02em;
  color: var(--tp-common-black-1);
  font-family: var(--tp-ff-inter);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .al-hero-seo-title {
    font-size: 65px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .al-hero-seo-title {
    font-size: 55px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {
  .al-hero-seo-title {
    font-size: 36px;
  }
}
.al-hero-seo-title span {
  color: var(--tp-common-blue);
}
.al-hero-seo-title-line {
  position: absolute;
  bottom: -25px;
  left: 30px;
}
.al-hero-seo-title-box p {
  font-weight: 400;
  font-size: 20px;
  line-height: 1.5;
  text-align: center;
  letter-spacing: -0.02em;
  color: var(--tp-common-black-4);
  font-family: var(--tp-ff-inter);
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {
  .al-hero-seo-title-box p {
    font-size: 16px;
  }
  .al-hero-seo-title-box p br {
    display: none;
  }
}
.al-hero-seo-dashboard {
  position: relative;
}
.al-hero-seo-dashboard::after {
  position: absolute;
  content: "";
  bottom: 0;
  left: 0;
  height: 220px;
  width: 100%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #fff 85.94%);
}

/*----------------------------------------*/
/*  4.1 button css
/*----------------------------------------*/
.al-btn-blue {
  font-weight: 500;
  font-size: 16px;
  transition: all 0.3s ease;
  border-radius: 30px;
  display: inline-block;
  padding: 10px 30px;
  letter-spacing: -0.02em;
  color: var(--tp-common-white);
  background-color: var(--tp-common-blue);
  font-family: var(--tp-ff-inter);
}
.al-btn-blue:hover {
  background: var(--tp-common-black-1);
  color: var(--tp-common-white);
}
.al-btn-blue.sky-bg {
  background-color: #a1ecea;
  color: var(--tp-common-black-3);
}
.al-btn-blue.sky-bg:hover {
  color: var(--tp-common-white);
  background-color: var(--tp-common-blue);
}

/*----------------------------------------*/
/*  4.1 brand css
/*----------------------------------------*/
.al-brand-seo-box a {
  color: #8a969a;
  transition: 0.3s;
}
.al-brand-seo-box a:not(:last-child) {
  margin-right: 55px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .al-brand-seo-box a:not(:last-child) {
    margin-right: 35px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {
  .al-brand-seo-box a:not(:last-child) {
    margin-right: 25px;
  }
}
.al-brand-seo-box a:hover {
  color: var(--tp-common-black-1);
}

/*----------------------------------------*/
/*  4.1 step css
/*----------------------------------------*/
.al-step-title-box {
  margin: 0px 60px;
  margin-bottom: 40px;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {
  .al-step-title-box {
    margin: 0;
    margin-bottom: 40px;
  }
}
.al-step-title-sm {
  font-size: 18px;
  font-weight: 500;
  line-height: 1.33;
  margin-bottom: 0;
  text-align: center;
  letter-spacing: -0.02em;
  color: var(--tp-common-black-1);
  font-family: var(--tp-ff-inter);
}
.al-step-icon {
  display: inline-block;
  margin-bottom: 25px;
}
.al-step-icon > span {
  height: 100px;
  width: 100px;
  text-align: center;
  line-height: 95px;
  border-radius: 50%;
  display: inline-block;
  color: var(--tp-common-blue);
  border: 2px solid var(--tp-common-blue);
  transition: 0.3s;
  position: relative;
}
.al-step-icon > span::after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  content: "";
  visibility: hidden;
  border-radius: 50%;
  transition: 0.3s;
  transform: scale(1.2);
  border: 1px dashed var(--tp-common-blue);
}
.al-step-item {
  display: inline-block;
}
.al-step-item.active .al-step-icon > span {
  color: var(--tp-common-white);
  border-color: var(--tp-common-blue);
  background-color: var(--tp-common-blue);
}
.al-step-item.active .al-step-icon > span::after {
  opacity: 1;
  visibility: visible;
}
.al-step-item:hover .al-step-icon > span {
  color: var(--tp-common-white);
  border-color: var(--tp-common-blue);
  background-color: var(--tp-common-blue);
}
.al-step-item:hover .al-step-icon > span::after {
  opacity: 1;
  visibility: visible;
}
.al-step-number {
  position: absolute;
  top: 3px;
  right: 1px;
  z-index: 3;
  height: 30px;
  width: 30px;
  line-height: 29px;
  border-radius: 50%;
  font-style: normal;
  display: inline-block;
  color: var(--tp-common-white);
  background-color: var(--tp-common-blue);
  font-family: var(--tp-ff-inter);
}
.al-step-number::after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: "";
  border-radius: 50%;
  border: 4px solid var(--tp-common-white);
  transform: scale(1.2);
}
.al-step-shape-1 {
  position: absolute;
  top: 26%;
  left: 0;
}
.al-step-shape-1 img {
  animation: anim-top-bottom 1s linear infinite alternate;
}
.al-step-shape-2 {
  position: absolute;
  top: 42%;
  right: 0;
  animation: anim-left-right 4s linear infinite alternate;
}
.al-step-arrow-shape-1 {
  position: absolute;
  top: 21%;
  right: 0;
}
.al-step-arrow-shape-2 {
  position: absolute;
  top: 21%;
  left: 0;
}

/*----------------------------------------*/
/*  4.1 common css
/*----------------------------------------*/
.al-section-title {
  font-weight: 700;
  font-size: 47px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--tp-common-black-1);
  font-family: var(--tp-ff-inter);
}
@media (max-width: 574.98px) {
  .al-section-title {
    font-size: 35px;
  }
}
@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) {
  .al-section-title br {
    display: none;
  }
}
.al-section-subtitle.fs-12 {
  font-weight: 600;
  font-size: 12px;
  border-radius: 20px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background-color: #eef3f6;
  padding: 2px 23px;
  color: var(--tp-common-black-1);
  display: inline-block;
  font-family: var(--tp-ff-inter);
}
.al-section-subtitle.fs-12.sky-bg {
  background-color: #cae1ec;
}

@keyframes anim-top-bottom {
  0% {
    transform: translateY(-20px);
  }
  100% {
    transform: translateY(0px);
  }
}
@keyframes anim-left-right {
  0% {
    transform: translateX(-50px);
  }
  100% {
    transform: translateX(0px);
  }
}
@keyframes animate-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.8), 0 0 0 0 rgba(255, 255, 255, 0.8);
  }
  40% {
    box-shadow: 0 0 0 50px rgba(255, 109, 74, 0), 0 0 0 0 rgba(255, 255, 255, 0.8);
  }
  80% {
    box-shadow: 0 0 0 50px rgba(255, 109, 74, 0), 0 0 0 30px rgba(255, 109, 74, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 109, 74, 0), 0 0 0 30px rgba(255, 109, 74, 0);
  }
}
@keyframes fadeInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(20px);
    -ms-transform: translateX(20px);
    transform: translateX(20px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}
@keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(20px);
    -ms-transform: translateY(20px);
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}

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

/*----------------------------------------*/
/*  4.1 service css
/*----------------------------------------*/
.al-service-seo-title {
  font-weight: 700;
  font-size: 20px;
  margin-bottom: 14px;
  letter-spacing: -0.02em;
  color: var(--tp-common-black-1);
  font-family: var(--tp-ff-inter);
}
.al-service-seo-item:hover .al-service-seo-icon span {
  animation: icon-bounce 0.8s 1;
}
.al-service-seo-icon {
  margin-bottom: 25px;
}
.al-service-seo-icon span {
  height: 50px;
  width: 50px;
  line-height: 47px;
  text-align: center;
  border-radius: 50%;
  display: inline-block;
  background-color: #fbcea0;
  color: var(--tp-common-black-1);
}
.al-service-seo-content p {
  font-size: 14px;
  line-height: 1.57;
  color: #4d5051;
  margin-bottom: 0;
  padding-right: 30px;
  font-family: var(--tp-ff-inter);
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .al-service-seo-content p {
    font-size: 13px;
    padding-right: 0;
  }
}

/*----------------------------------------*/
/*  4.1 project css
/*----------------------------------------*/
.al-project-seo-title-box .al-section-subtitle.fs-12 {
  background-color: #0d3f52;
  color: var(--tp-common-white);
}

/*----------------------------------------*/
/*  4.1 price css
/*----------------------------------------*/
.al-price-item {
  border-radius: 10px;
  padding: 35px 40px;
  background-color: var(--tp-common-white);
}
.al-price-item.active {
  background-color: var(--tp-common-blue);
}
.al-price-item.active .al-btn-blue.sky-bg {
  color: var(--tp-common-black-1);
  background-color: var(--tp-common-white);
}
.al-price-item.active .al-btn-blue.sky-bg:hover {
  color: var(--tp-common-white);
  background-color: var(--tp-common-black-1);
}

/*----------------------------------------*/
/*  4.1 faq css
/*----------------------------------------*/
@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) {
  .al-faq-title-box {
    margin-bottom: 40px;
  }
}
@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) {
  .al-faq-wrapper {
    margin-bottom: 40px;
  }
}

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

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

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

/*----------------------------------------*/
/*  4.1 footer css
/*----------------------------------------*/
.al-footer-seo-widget-paragraph p {
  font-weight: 500;
  font-size: 16px;
  line-height: 1.5;
  color: var(--tp-common-white);
  font-family: var(--tp-ff-inter);
}
.al-footer-seo-widget-social a {
  height: 40px;
  width: 40px;
  line-height: 33px;
  border-radius: 50%;
  display: inline-block;
  text-align: center;
  color: rgba(255, 255, 255, 0.5);
  border: 2px solid rgba(255, 255, 255, 0.1);
}
.al-footer-seo-widget-social a:not(:last-child) {
  margin-right: 6px;
}
.al-footer-seo-widget-social a:hover {
  color: var(--tp-common-white);
  border-color: var(--tp-common-blue);
  background-color: var(--tp-common-blue);
}
.al-footer-seo-widget-title {
  font-weight: 700;
  font-size: 74px;
  line-height: 0.86;
  padding-bottom: 20px;
  background-clip: border-box;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background: linear-gradient(90deg, #d4fc79 0%, #96e6a1 100%);
  background: -webkit-linear-gradient(90deg, #d4fc79 0%, #96e6a1 100%);
  font-family: var(--tp-ff-inter);
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .al-footer-seo-widget-title {
    font-size: 55px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .al-footer-seo-widget-title {
    font-size: 51px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {
  .al-footer-seo-widget-title {
    font-size: 45px;
  }
}
.al-footer-seo-col-1 {
  padding-right: 125px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .al-footer-seo-col-1 {
    padding-right: 80px;
  }
}
@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) {
  .al-footer-seo-col-1 {
    padding-right: 0;
  }
}
.al-footer-seo-col-2 {
  padding-left: 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: 574.98px) {
  .al-footer-seo-col-2 {
    padding-left: 0;
  }
}
.al-footer-seo-bg::after {
  position: absolute;
  top: 0;
  left: 0;
  width: 38.9%;
  height: 100%;
  content: "";
  background-color: #082e3d;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .al-footer-seo-bg::after {
    width: 35.9%;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .al-footer-seo-bg::after {
    width: 34.9%;
  }
}
@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) {
  .al-footer-seo-bg::after {
    display: none;
  }
}
.al-footer-seo-black-bg {
  background: #012836;
}

.al-copyright-seo-left p {
  font-weight: 500;
  font-size: 14px;
  color: #72878e;
  margin-bottom: 0;
  font-family: var(--tp-ff-inter);
}
.al-copyright-seo-left p a {
  color: var(--tp-common-white);
}
.al-copyright-seo-border {
  padding-top: 22px;
  padding-bottom: 40px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  background-color: #012836;
}

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