/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
1.	Fonts
2.	Reset
3.	Global Settings
4.	Scroll To Top style
5.	Main Header style / Header Style One
6.	Sticky Header
7.	Search Popup
8.	Mobile Menu
9.	Lazy Load Settings
10.	Banner Section
11.	Section Title
12.	Services Section
13.	About Section
14.	Live Section
15.	We DO Section
16.	Gallery Section
17.	Fun Facts Section
18.	We DO Section
19.	Team Section
20.	Parallax Section
21.	Sponsors Section
22.	Agency Section
23.	News Section
24.	Call Section
25.	Main Footer
26.	Services Section
27.	We DO Section
28.	Gallery Section
29.	Why Us Section
30.	Testimonials Section
31.	Parallax Section
32.	We DO Section
33.	Call Section
34.	Call Section
35.	Services Section
36.	Discover Section
37.	Parallax Section
38.	We Work Section
39.	Testimonials Section
40.	We DO Section
41.	Get Quote
42.	Map Section
43.	Sponsors Section
44.	Page Banner
45.	Faqs Section
46.	Get Quote
47.	Error Section
48.	Contact Section
49.	Sidebar Page Container
50.	Comment Area
51.	Leave Comments Form
52.	Service Details
53.	Service Details
--------------------------------------------------------------*/
/*
  font-family: 'Teko', sans-serif;
  font-family: 'Barlow', sans-serif;
  font-family: 'Rubik', sans-serif;
*/
/***

====================================================================
2.	Reset
====================================================================

 ***/
* {
  margin: 0px;
  padding: 0px;
  border: none;
  outline: none;
  font-size: 100%;
  line-height: inherit;
}

/***

====================================================================
3.	Global Settings
====================================================================

 ***/
:root {
  --thm-font: "Teko", sans-serif;
  --thm-b-font: "Rubik", sans-serif;
  --thm-base: #5d46ee;
  --thm-base-rgb: 28, 58, 123;
  --thm-black: #1e222d;
  --thm-text: #686a6f;
}

.container {
  padding-left: 15px;
  padding-right: 15px;
}

.row {
  --bs-gutter-x: 30px;
  --bs-gutter-y: 0px;
}

body {
  font-size: 16px;
  font-family: var(--thm-b-font);
  color: var(--thm-text);
  line-height: 2.125em;
  font-weight: 400;
  background: #131128;
  -webkit-font-smoothing: antialiased;
  -moz-font-smoothing: antialiased;
  top: 0 !important;
}

a {
  text-decoration: none;
  cursor: pointer;
  color: var(--thm-base);
}

.theme_color {
  color: var(--thm-base);
}

a:hover,
a:focus,
a:visited,
a:active,
button:active {
  text-decoration: none;
  outline: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  position: relative;
  font-weight: 400;
  margin: 0px 0px 20px;
  background: none;
  line-height: 1.25em;
  font-family: var(--thm-font);
  color: var(--thm-black);
}

h1 {
  font-size: 140px;
}

h2 {
  font-size: 70px;
}

h3 {
  font-size: 60px;
  color: #fff;
}

h4 {
  font-size: 40px;
  color: #fff;
}

h5 {
  font-size: 30px;
}

h6 {
  font-size: 26px;
  color: #fff;
}

input,
select,
button {
  font-family: var(--thm-font);
}

textarea {
  overflow: hidden;
  resize: none;
}

button {
  outline: none !important;
  cursor: pointer;
}

p {
  line-height: 2.125em;
  margin: 0 0 20px;
}

.text {
  line-height: 2.125em;
  margin: 0 0;
}

::-webkit-input-placeholder {
  color: inherit;
}

::-moz-input-placeholder {
  color: inherit;
}

::-ms-input-placeholder {
  color: inherit;
}

.page-wrapper {
  position: relative;
  margin: 0 auto;
  width: 100%;
  min-width: 300px;
  z-index: 9;
  overflow: hidden;
}

.page-wrapper__dark {
  background-color: #131128;
  background-image: url(../images/background/home-portfolio-bg-1-1.png);
}

.page-wrapper__gradient {
  background: #432ff6;
  background: linear-gradient(100deg, #432ff6 0%, #f174e3 100%);
}

body.boxed-wrapper {
  background-color: #f4f5f8;
}

.page-wrapper.boxed-wrapper {
  max-width: 1410px;
  margin-left: auto;
  margin-right: auto;
  background-color: #ffffff;
  -webkit-box-shadow: 0px 0px 100px 0px rgba(0, 0, 0, 0.08);
  box-shadow: 0px 0px 100px 0px rgba(0, 0, 0, 0.08);
}

.page-wrapper__dark.boxed-wrapper {
  background-color: #131128;
}

@media (max-width: 1440px) {
  .page-wrapper.boxed-wrapper {
    max-width: 90%;
  }
}

@media (max-width: 768px) {
  .page-wrapper.boxed-wrapper {
    max-width: 95%;
  }
}

.auto-container {
  position: static;
  max-width: 1200px;
  padding: 0px 15px;
  margin: 0 auto;
}

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

figure {
  margin-bottom: 0;
}

.theme-btn {
  display: inline-block;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.theme-btn i {
  position: relative;
  display: inline-block;
  font-size: 14px;
  margin-left: 3px;
}

.centered {
  text-align: center !important;
}

/* Btn Margin bottom */
.btn-mgbt-no {
  margin-top: 25px;
  margin-bottom: 0;
}

/*Btn Style four*/
.btn-style-four {
  position: relative;
  display: inline-block;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: var(--thm-base);
  color: var(--thm-black);
  border-radius: 5px;
  overflow: hidden;
  font-family: var(--thm-font);
  transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
}

.btn-style-four .btn-title {
  color: #fff;
  position: relative;
  display: block;
  font-size: 18px;
  line-height: 30px;
  font-weight: 400;
  letter-spacing: 0.1em;
  padding: 15px 30px;
  z-index: 1;
}

.btn-style-four:hover {
  background: var(--thm-base);
  color: #ffffff;
}

.btn-style-four .btn-curve {
  position: absolute;
  right: -15px;
  top: 0;
  width: 26px;
  height: 100%;
  background: var(--thm-black);
  opacity: 0.2;
  z-index: 0;
  -webkit-transform: skewX(-22deg);
  transform: skewX(-22deg);
  transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -webkit-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
}

.btn-style-four:hover .btn-curve {
  opacity: 1;
  right: 0;
  width: 100%;
  -webkit-transform: skewX(0deg);
  transform: skewX(0deg);
}

/* Btn Style One */
.btn-style-one {
  position: relative;
  display: inline-block;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: linear-gradient(264.28deg, #9a46f1 -38.2%, #5d46ee 103.12%);

  color: var(--thm-black);
  border-radius: 5px;
  overflow: hidden;
  font-family: var(--thm-font);
  transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
}

.btn-style-one .btn-title {
  color: #fff;
  position: relative;
  display: block;
  font-size: 18px;
  line-height: 30px;
  font-weight: 400;
  letter-spacing: 0.1em;
  padding: 19px 50px 16px;
  z-index: 1;
}

.btn-style-one:hover {
  background: var(--thm-base);
  color: #ffffff;
}

.btn-style-one .btn-curve {
  position: absolute;
  right: -15px;
  top: 0;
  width: 26px;
  height: 100%;
  background: var(--thm-black);
  opacity: 0.2;
  z-index: 0;
  -webkit-transform: skewX(-22deg);
  transform: skewX(-22deg);
  transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -webkit-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
}

.btn-style-one:hover .btn-curve {
  opacity: 1;
  right: 0;
  width: 100%;
  -webkit-transform: skewX(0deg);
  transform: skewX(0deg);
}

/*Btn Style Two*/
.btn-style-two {
  position: relative;
  display: inline-block;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: var(--thm-black);
  color: #ffffff;
  border-radius: 5px;
  overflow: hidden;
  font-family: var(--thm-font);
  transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
}

.btn-style-two .btn-title {
  position: relative;
  display: block;
  font-size: 18px;
  line-height: 30px;
  font-weight: 400;
  padding: 19px 50px 16px;
  z-index: 1;
  letter-spacing: 0.1em;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}

.btn-style-two:hover {
  color: var(--thm-black);
}

.btn-style-two .btn-curve {
  position: absolute;
  right: -15px;
  top: 0;
  width: 26px;
  height: 100%;
  background: #ffffff;
  opacity: 0.2;
  z-index: 0;
  -webkit-transform: skewX(-22deg);
  transform: skewX(-22deg);
  transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -webkit-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
}

.btn-style-two:hover .btn-curve {
  opacity: 1;
  right: 0;
  width: 100%;
  -webkit-transform: skewX(0deg);
  transform: skewX(0deg);
}

.btn-style-three {
  background-color: var(--thm-base);
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  padding: 22.5px 40px;
  font-family: var(--thm-font);
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  line-height: 1;
}

.btn-style-three:hover {
  background-color: var(--thm-black);
  color: #fff;
}

.pull-right {
  float: right;
}

.pull-left {
  float: left;
}

.preloader {
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 999999;
  background-color: white;
  background-color: #131128;
}

.preloader__gradient {
  background: #432ff6;
  background: linear-gradient(100deg, #432ff6 0%, #f174e3 100%);
}

.preloader .icon {
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 5;
  background-color: rgba(0, 0, 0, 0);
  background-position: center center;
  background-repeat: no-repeat;
  background-image: url(../images/icons/preloader.svg);
  -webkit-transition: all 200ms ease;
  transition: all 200ms ease;
  -webkit-animation-name: rotateMe;
  -webkit-animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  -moz-animation-name: rotateMe;
  -moz-animation-duration: 2s;
  -moz-animation-iteration-count: infinite;
  -moz-animation-timing-function: linear;
  -ms-animation-name: ScaleMe;
  -ms-animation-duration: 2s;
  -ms-animation-iteration-count: infinite;
  -ms-animation-timing-function: linear;
  animation-name: ScaleMe;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

.preloader__gradient .icon {
  background-image: url(../images/icons/preloader-white.png);
}

.page-loaded .preloader .icon {
  opacity: 0;
}

img {
  display: inline-block;
  max-width: 100%;
  height: auto;
}

.dropdown-toggle::after {
  display: none;
}

.fa {
  line-height: inherit;
}

/***

====================================================================
4.	Scroll To Top style
====================================================================

***/
.scroll-to-top {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 44px;
  height: 44px;
  color: var(--thm-black);
  font-size: 14px;
  line-height: 44px;
  border-radius: 50%;
  text-align: center;
  z-index: 100;
  cursor: pointer;
  background: var(--thm-base);
  display: none;
  -webkit-transition: all 300ms ease;
  transition: all 300ms ease;
}

.scroll-to-top:hover {
  background: var(--thm-black);
  color: #ffffff;
}

/***

====================================================================
5.	Main Header style / Header Style One
====================================================================

***/

/*=== Header Main Box ===*/

/* topbar */

/***

====================================================================
6.				Sticky Header
====================================================================

***/

/***

====================================================================
7.	Search Popup
====================================================================

***/

/***

====================================================================
8.			Mobile Menu
====================================================================

***/

/***

====================================================================
9.		Lazy Load Settings
====================================================================

***/
img.lazy-image {
  background: url(../images/icons/image-bg.svg) center center no-repeat;
}

img.lazy-image.loaded {
  background-image: none;
}

.owl-theme img.lazy-image.loaded {
  height: auto;
  opacity: 1;
}

/* Default Form Style */
.default-form {
  position: relative;
}

.default-form .row {
  margin: 0 -15px;
}

.default-form .form-group {
  position: relative;
  margin-bottom: 30px;
}

.default-form .field-inner {
  position: relative;
  display: block;
}

.default-form .field-inner .alt-icon {
  position: absolute;
  left: 20px;
  top: 50%;
  margin-top: -15px;
  line-height: 30px;
  font-size: 20px;
  color: #9b9fa6;
  z-index: 1;
  pointer-events: none;
}

.default-form .form-group .field-label {
  position: relative;
  display: block;
  color: #0f172b;
  font-size: 14px;
  line-height: 24px;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 10px;
}

.default-form .form-group .e-label {
  position: relative;
}

.default-form .form-group input[type="text"],
.default-form .form-group input[type="email"],
.default-form .form-group input[type="password"],
.default-form .form-group input[type="tel"],
.default-form .form-group input[type="url"],
.default-form .form-group input[type="file"],
.default-form .form-group input[type="number"],
.default-form .form-group textarea,
.default-form .form-group select {
  position: relative;
  display: block;
  height: 70px;
  width: 100%;
  font-size: 14px;
  color: #686a6f;
  line-height: 40px;
  font-weight: 400;
  padding: 14px 30px;
  background-color: #f4f5f8;
  border: 1px solid #f4f5f8;
  border-radius: 7px;
  font-family: var(--thm-b-font);
  -webkit-transition: all 300ms ease;
  transition: all 300ms ease;
}

.default-form .form-group ::-webkit-input-placeholder {
  opacity: 1;
  color: inherit;
}

.default-form .form-group :-ms-input-placeholder {
  opacity: 1;
  color: inherit;
}

.default-form .form-group ::-ms-input-placeholder {
  opacity: 1;
  color: inherit;
}

.default-form .form-group ::placeholder {
  opacity: 1;
  color: inherit;
}

.default-form .form-group textarea {
  height: 220px;
  resize: none;
}

.contact-form .form-group input[type="submit"],
.contact-form .form-group button {
  display: inline-block;
}

.default-form .form-group input[type="text"]:focus,
.default-form .form-group input[type="email"]:focus,
.default-form .form-group input[type="password"]:focus,
.default-form .form-group input[type="tel"]:focus,
.default-form .form-group input[type="url"]:focus,
.default-form .form-group input[type="file"]:focus,
.default-form .form-group input[type="number"]:focus,
.default-form .form-group textarea:focus,
.default-form .form-group select:focus,
.form-group .ui-selectmenu-button.ui-button:focus,
.form-group .ui-selectmenu-button.ui-button:active {
  border-color: var(--thm-base);
}

.default-form ::-webkit-input-placeholder {
  color: #aaaaaa;
}

.default-form ::-moz-input-placeholder {
  color: #aaaaaa;
}

.default-form ::-ms-input-placeholder {
  color: #aaaaaa;
}

.default-form label.error {
  color: #ff0000;
  font-size: 14px;
  text-transform: capitalize;
  text-align: left;
  display: block;
  letter-spacing: 1px;
  padding-top: 7px;
  line-height: 24px;
}

/*Custom Select*/
.form-group .ui-selectmenu-button.ui-button {
  width: 100%;
  font-size: 14px;
  font-style: normal;
  height: 70px;
  padding: 14px 30px;
  line-height: 40px;
  font-family: var(--thm-b-font);
  color: var(--thm-text);
  border-radius: 7px;
  background-color: #f4f5f8;
  border: 1px solid #f4f5f8;
}

.form-group .ui-button .ui-icon {
  background: none;
  position: relative;
  top: 10px;
  text-indent: 0px;
  color: var(--thm-black);
}

.form-group .ui-button .ui-icon:before {
  font-family: "Font Awesome 5 Free";
  content: "\f107";
  position: absolute;
  right: 0px;
  top: 0px !important;
  width: 15px;
  height: 30px;
  display: block;
  color: var(--thm-black);
  line-height: 20px;
  font-size: 16px;
  font-weight: 900;
  text-align: center;
  z-index: 5;
}

.ui-widget.ui-widget-content {
  background: #f4f5f8;
  border: 1px solid #e9ebee;
  border-top: none;
  font-family: var(--thm-font);
  border-radius: 0;
  padding: 0;
}

.ui-menu .ui-menu-item {
  font-size: 20px;
  border-bottom: 1px solid #e9ebee;
}

.ui-menu .ui-menu-item:last-child {
  border: none;
}

.ui-menu .ui-menu-item-wrapper {
  position: relative;
  display: block;
  padding: 14px 30px !important;
  font-size: 20px;
  letter-spacing: 0.02em;
  line-height: 30px;
  -webkit-transition: all 300ms ease;
  transition: all 300ms ease;
}

.ui-menu .ui-menu-item-wrapper:hover,
.ui-menu .ui-menu-item-wrapper.ui-state-active {
  background: var(--thm-base);
  margin: 0;
}

/***

====================================================================
10a.		Hero Banner Section
====================================================================

***/

/***

====================================================================
10a.		Hero Banner Section
====================================================================

***/

/***

====================================================================
10.		Banner Section
====================================================================

***/

/***

====================================================================
11.		Section Title
====================================================================

***/

/***

====================================================================
12.	Services Section
====================================================================

***/

/***

====================================================================
13.	About Section
====================================================================

***/

/***

====================================================================
14.	Live Section
====================================================================

***/

/***

====================================================================
15.	We DO Section
====================================================================

***/

/***

====================================================================
16.		Gallery Section
====================================================================

***/

/*=== Mixitup Gallery ===*/

/***

====================================================================
17.	Fun Facts Section
====================================================================

***/

/***

====================================================================
18.	We DO Section
====================================================================

***/

/***

====================================================================
19.	Team Section
====================================================================

***/

/***

====================================================================
20.	Parallax Section
====================================================================

***/

/* login page */
.login-wrapper {
  position: relative;
  min-height: 100vh;
}

.login-wrapper .login-bg {
  position: absolute;
  background-color: #5d46ee;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100vw;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center right;
}

.login-wrapper .login-content__inner {
  width: 100%;
  max-width: 630px;
  margin: 50px auto 0 auto;
  padding-left: 115px;
  padding-right: 115px;
  border-radius: 16px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.05) 0%,
    rgba(255, 255, 255, 0) 73.86%
  );
  -webkit-box-shadow: 9.986px -0.523px 30px 0px rgba(5, 5, 6, 0.1);
  box-shadow: 9.986px -0.523px 30px 0px rgba(5, 5, 6, 0.1);
  min-height: 100vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  position: relative;
  z-index: 10;
}

.login-wrapper form input[type="text"],
.login-wrapper form input[type="email"],
.login-wrapper form input[type="password"] {
  width: 100%;
  border-radius: 8px;
  background-color: #1e222d;
  height: 70px;
  padding-left: 30px;
  padding-right: 30px;
  font-size: 14px;
  color: #686a6f;
  font-weight: 400;
  font-family: var(--thm-b-font);
  margin-bottom: 20px;
}

.login-wrapper form ::-webkit-input-placeholder {
  opacity: 1;
  color: inherit;
}

.login-wrapper form :-ms-input-placeholder {
  opacity: 1;
  color: inherit;
}

.login-wrapper form ::-ms-input-placeholder {
  opacity: 1;
  color: inherit;
}

.login-wrapper form ::placeholder {
  opacity: 1;
  color: inherit;
}

.login-wrapper form p {
  margin: 0;
  color: #686a6f;
  line-height: 2.125;
}

.login-wrapper form p a {
  color: inherit;
}

.login-wrapper form .theme-btn {
  width: 100%;
  font-size: 18px;
  letter-spacing: 0.1em;
  font-weight: 400;
  margin-top: 15px;
}

.login-wrapper .login-content__inner .copyright-text {
  margin-top: auto;
  text-align: center;
  color: #686a6f;
  margin-bottom: 60px;
}

.login-wrapper .logo {
  margin-top: 90px;
  margin-bottom: 80px;
}

.login-wrapper .signup-link {
  text-transform: uppercase;
  color: #fff;
  font-weight: 400;
  letter-spacing: 0.1em;
  font-size: 20px;
  text-align: center;
  line-height: 1;
  margin-top: 35px;
  font-family: var(--thm-font);
}

.login-wrapper .signup-link a {
  color: #9a46f1;
  -webkit-transition: all 500ms ease;
  transition: all 500ms ease;
}

.login-wrapper .signup-link a:hover {
  opacity: 0.7;
}

/*--------------------------------------------------------------
# Pricing
--------------------------------------------------------------*/
.shape.right {
  left: auto;
  right: -60%;
}

.shape {
  content: "";
  position: absolute;
  width: 2000px;
  height: 2000px;
  top: -70%;
  left: -60%;
  z-index: -1;
  background: radial-gradient(
    34.98% 34.98% at 50% 50%,
    #261b63 0%,
    rgba(6, 19, 45, 0) 100%
  );
  opacity: 0.5;
}

/*--------------------------------------------------------------
# Coming Soon
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Shop
--------------------------------------------------------------*/

/* checkout page */

/*--------------------------------------------------------------
# Video Styles
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# How it works Styles
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# History Styles
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Brand Portfolio Styles
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Events Styles
--------------------------------------------------------------*/