/*-----------------------------------------------------------------
Theme Name: Niotech
Author: Gramentheme
Author URI: https://themeforest.net/user/gramentheme
Version: 1.0.0 
Description: Niotech - App Landing HTML Template <

-------------------------------------------------------------------
 CSS TABLE OF CONTENTS
-------------------------------------------------------------------

    01.Mixins
    02.Variables
    03.Typography
    04.Buttons 
    05.Gutter 
    06.Container 
    07.Animation 
    08.Helping 
    09.MeanMenu 
    10.Preloader
    11.Title 
    12.Common 
    13.Header
    14.Breadcumb
    15.Footer
    16.Intro 
    17.Brand 
    18.About
    19.Work Process 
    20.Advantage
    21.Wcu
    22.Counter
    23.Faq
    24.Testimonial
    25.Feature
    26.Pricing 
    27.Cta
    28.Blog
    29.Services
    30.Project 
    31.Team
    32.Team Extra
    33.Sidebar
    34.Contact
    35.Input
    36.Useed Technologies
    37.Policy
------------------------------------------------------------------*/
/* 01.Mixins */
/* 02.Variables */
/* --------------------------------------------
    Template Default Fonts & Fonts Styles
 ---------------------------------------------- */
@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700;800&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700;800&display=swap");
/*----------------------------------------------
    # All Variables here
----------------------------------------------*/
:root {
  --body: #fff;
  --black: #000;
  --white: #fff;
  --theme: #d0fd1c;
  --theme2: #F9F3EF;
  --theme3: #FAF8FF;
  --title: #242424;
  --header: #242424;
  --orange: #201cfd;
  --text: #242424;
  --text2: #cbcbcb;
  --border: #E6E6E6;
  --border-2: #F1F1F1;
  --border-3: #0f0707;
  --border-4: #E0E0E0;
  --border-5: #565656;
  --bg-1: #d0fd1c;
  --bg-2: #F6F7FF;
  --box-shadow: 0px 4px 25px 0px rgba(0, 0, 0, 0.06);
}

/* 03.Typography */
/*-----------------------------------------------------------------
Theme Name: Niotech
Author: Gramentheme
Author URI: https://themeforest.net/user/gramentheme
Version: 1.0.0 
Description: Niotech - App Landing HTML Template <

-------------------------------------------------------------------
 CSS TABLE OF CONTENTS
-------------------------------------------------------------------

    01.Mixins
    02.Variables
    03.Typography
    04.Buttons 
    05.Gutter 
    06.Container 
    07.Animation 
    08.Helping 
    09.MeanMenu 
    10.Preloader
    11.Title 
    12.Common 
    13.Header
    14.Breadcumb
    15.Footer
    16.Intro 
    17.Brand 
    18.About
    19.Work Process 
    20.Advantage
    21.Wcu
    22.Counter
    23.Faq
    24.Testimonial
    25.Feature
    26.Pricing 
    27.Cta
    28.Blog
    29.Services
    30.Project 
    31.Team
    32.Team Extra
    33.Sidebar
    34.Contact
    35.Input
    36.Useed Technologies
    37.Policy
------------------------------------------------------------------*/
/* 01.Mixins */
/* 02.Variables */
body {
  font-family: "Manrope", sans-serif;
  font-size: 16px;
  font-weight: normal;
  line-height: 28px;
  color: var(--text);
  background-color: var(--white);
  padding: 0;
  margin: 0;
  overflow-x: hidden;
}

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

button {
  border: none;
  background-color: transparent;
  padding: 0;
}

input:focus {
  color: var(--text);
  outline: none;
}

input::-moz-placeholder {
  color: #767771;
}

input::placeholder {
  color: #767771;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Manrope", sans-serif;
  margin: 0px;
  padding: 0;
  color: var(--title);
  text-transform: capitalize;
  transition: all 0.4s ease-in-out;
}

h1 {
  font-size: 42px;
  font-weight: 700;
  line-height: 120%;
}

h2 {
  font-size: 40px;
  line-height: 145%;
  font-weight: 700;
}
@media (max-width: 767px) {
  h2 {
    font-size: 34px;
  }
}
@media (max-width: 575px) {
  h2 {
    font-size: 28px;
  }
}

h3 {
  font-size: 18px;
  font-weight: 700;
  line-height: 145%;
}
@media (max-width: 767px) {
  h3 {
    font-size: 16px;
  }
}

h4 {
  font-size: 20px;
  font-weight: 700;
  line-height: 130%;
}

h5 {
  font-size: 18px;
  font-weight: 700;
}

h6 {
  font-size: 16px;
  font-weight: 600;
  line-height: 145%;
}

a {
  text-decoration: none;
  outline: none !important;
  cursor: pointer;
  color: var(--title);
  transition: all 0.4s ease-in-out;
}
a:hover {
  color: var(--theme) !important;
}

p {
  margin: 0px;
  transition: all 0.4s ease-in-out;
}

span {
  margin: 0px;
  transition: all 0.4s ease-in-out;
}

.info-text-style {
  color: var(--white);
  font-family: "Manrope", sans-serif;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 35.04px;
}

.form-contl {
  position: relative;
  margin-top: 30px;
}
.form-contl input {
  position: relative;
  padding: 17px 20px;
  height: 60px;
  background: var(--theme2);
  width: 100%;
  border: 1px solid #6E6E6E;
  opacity: 0.8;
}
.form-contl input::-moz-placeholder {
  color: var(--white);
  font-family: "Manrope", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 26.08px;
}
.form-contl input::placeholder {
  color: var(--white);
  font-family: "Manrope", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 26.08px;
}
.form-contl input.style2 {
  border: none;
}
.form-contl button {
  position: absolute;
  top: 0;
  right: 0;
  width: 60px;
  height: 60px;
  line-height: 60px;
  text-align: center;
  background: var(--theme);
  color: var(--white);
}
.form-contl button.style2 {
  background: transparent;
  color: var(--theme);
}

input.form-control,
textarea.form-control {
  outline: none;
  box-shadow: none;
  background-color: var(--white);
  border: 1px solid var(--border);
  padding: 17px 10px;
  font-size: 1rem;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
}

input.form-control:focus,
textarea.form-control:focus {
  background-color: var(--white);
  border: 1px solid var(--border);
  outline: none;
  box-shadow: none;
}

label {
  color: var(--title);
  font-family: "Manrope", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 35.04px;
}

.form-group {
  margin-bottom: var(--bs-gutter-x);
  position: relative;
}

.form-group > i {
  display: inline-block;
  position: absolute;
  right: 25px;
  top: 13px;
  font-size: 16px;
  color: var(--text);
}

.form-group > i.fa-envelope {
  padding-top: 1px;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

input[type=checkbox] {
  visibility: hidden;
  opacity: 0;
  display: inline-block;
  vertical-align: middle;
  width: 0;
  height: 0;
  border-radius: 10px;
}

input[type=checkbox]:checked ~ label:after {
  opacity: 1;
}

input[type=checkbox] ~ label {
  position: relative;
  padding-left: 30px;
  cursor: pointer;
  display: block;
  line-height: 30px;
}

input[type=checkbox] ~ label:before {
  content: "";
  position: absolute;
  left: 0px;
  top: 3.5px;
  background: var(--white);
  border: 1px solid var(--border-2);
  height: 20px;
  width: 20px;
  text-align: center;
  z-index: 9;
}

input[type=checkbox] ~ label:after {
  content: "";
  position: absolute;
  left: 6px;
  top: 9px;
  background: var(--theme);
  height: 8px;
  width: 8px;
  opacity: 0;
  transition: 0.4s;
  z-index: 9;
}

input[type=checkbox].style2 ~ label {
  color: #8B929C;
  padding-left: 23px;
  margin-bottom: -0.5em;
}

input[type=checkbox].style2 ~ label:before {
  background-color: white;
  border: 1px solid #f7ccd7;
  height: 14px;
  width: 14px;
  line-height: 14px;
  border-radius: 3px;
  top: 6px;
}

input[type=checkbox].style2:checked ~ label:before {
  color: var(--theme);
}

input[type=radio] {
  visibility: hidden;
  opacity: 0;
  display: inline-block;
  vertical-align: middle;
  width: 0;
  height: 0;
  display: none;
}

input[type=radio] ~ label {
  position: relative;
  padding-left: 30px;
  cursor: pointer;
  line-height: 1;
  display: inline-block;
  font-weight: 600;
  margin-bottom: 0;
}

input[type=radio] ~ label::before {
  content: "\f111";
  position: absolute;
  font-family: "Font Awesome 6 Pro";
  left: 0;
  top: -2px;
  width: 20px;
  height: 20px;
  padding-left: 0;
  font-size: 0.6em;
  line-height: 19px;
  text-align: center;
  border: 1px solid var(--theme);
  border-radius: 100%;
  font-weight: 700;
  background: var(--white);
  color: transparent;
  transition: all 0.2s ease;
}

input[type=radio]:checked ~ label::before {
  border-color: var(--theme);
  background-color: var(--theme);
  color: var(--white);
}

/* 04.Buttons */
/*-----------------------------------------------------------------
Theme Name: Niotech
Author: Gramentheme
Author URI: https://themeforest.net/user/gramentheme
Version: 1.0.0 
Description: Niotech - App Landing HTML Template <

-------------------------------------------------------------------
 CSS TABLE OF CONTENTS
-------------------------------------------------------------------

    01.Mixins
    02.Variables
    03.Typography
    04.Buttons 
    05.Gutter 
    06.Container 
    07.Animation 
    08.Helping 
    09.MeanMenu 
    10.Preloader
    11.Title 
    12.Common 
    13.Header
    14.Breadcumb
    15.Footer
    16.Intro 
    17.Brand 
    18.About
    19.Work Process 
    20.Advantage
    21.Wcu
    22.Counter
    23.Faq
    24.Testimonial
    25.Feature
    26.Pricing 
    27.Cta
    28.Blog
    29.Services
    30.Project 
    31.Team
    32.Team Extra
    33.Sidebar
    34.Contact
    35.Input
    36.Useed Technologies
    37.Policy
------------------------------------------------------------------*/
/* 01.Mixins */
/* 02.Variables */
/* 03.Typography */
/*----------------------------------------------
    # Buttons style here
----------------------------------------------*/
.theme-btn {
  display: inline-block;
  position: relative;
  padding: 20px 36px;
  gap: 10px;
  color: var(--text);
  font-family: "Manrope", sans-serif;
  text-align: center;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  background: var(--theme);
  z-index: 1;
  line-height: 1;
  overflow: hidden;
  border: none;
  border-radius: 100px;
  transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
}
.theme-btn i, .theme-btn svg {
  margin-left: 6px;
}
.theme-btn:before {
  transition-duration: 800ms;
  position: absolute;
  width: 210%;
  height: 290%;
  content: "";
  top: 162%;
  left: 50%;
  background: var(--title);
  transform: translateX(-50%) rotate(-8deg);
  border-radius: 80%;
  z-index: -1;
}
.theme-btn.style2 {
  display: inline-block;
  background: transparent;
  border: 1px solid var(--border-5);
  color: var(--title);
}
.theme-btn.style2 i, .theme-btn.style2 svg {
  margin-left: 6px;
}
.theme-btn.style2:before {
  transition-duration: 800ms;
  background: var(--theme);
}
.theme-btn.style2 svg path,
.theme-btn.style2 svg rect {
  fill: var(--title);
  transition: all 0.4s;
  -webkit-transition: all 0.4s;
  -moz-transition: all 0.4s;
  -ms-transition: all 0.4s;
  -o-transition: all 0.4s;
}
.theme-btn.style2:hover svg path,
.theme-btn.style2:hover svg rect {
  fill: var(--white);
}
.theme-btn.style3 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: transparent !important;
  border: 1px solid var(--white);
  color: var(--white);
}
.theme-btn.style3 i, .theme-btn.style3 svg {
  margin-left: 6px;
  color: var(--white);
}
.theme-btn.style3:before {
  transition-duration: 800ms;
  background: var(--theme);
}
.theme-btn.style3 svg path,
.theme-btn.style3 svg rect {
  fill: var(--white);
  transition: all 0.4s;
  -webkit-transition: all 0.4s;
  -moz-transition: all 0.4s;
  -ms-transition: all 0.4s;
  -o-transition: all 0.4s;
}
.theme-btn.style3:hover svg path,
.theme-btn.style3:hover svg rect {
  fill: var(--white);
}
.theme-btn.style4 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--theme);
  color: var(--white);
  border: 1px solid var(--border-4);
}
.theme-btn.style4:before {
  transition-duration: 800ms;
  background: var(--title);
  color: var(--white);
}
.theme-btn.style4 svg path,
.theme-btn.style4 svg rect {
  fill: var(--title);
  transition: all 0.4s;
  -webkit-transition: all 0.4s;
  -moz-transition: all 0.4s;
  -ms-transition: all 0.4s;
  -o-transition: all 0.4s;
}
.theme-btn.style4:hover {
  color: var(--white) !important;
}
.theme-btn.style4:hover svg path,
.theme-btn.style4:hover svg rect {
  fill: var(--white);
}
.theme-btn.style5 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--title) !important;
  border: 1px solid var(--white);
  color: var(--white);
}
.theme-btn.style5 i, .theme-btn.style5 svg {
  margin-left: 6px;
  color: var(--white);
}
.theme-btn.style5:before {
  transition-duration: 800ms;
  background: var(--theme);
}
.theme-btn.style5 svg path,
.theme-btn.style5 svg rect {
  fill: var(--white);
  transition: all 0.4s;
  -webkit-transition: all 0.4s;
  -moz-transition: all 0.4s;
  -ms-transition: all 0.4s;
  -o-transition: all 0.4s;
}
.theme-btn.style5:hover svg path,
.theme-btn.style5:hover svg rect {
  fill: var(--white);
}
.theme-btn:hover {
  color: var(--white) !important;
}
.theme-btn:hover:before {
  top: -96%;
}

.slider-arrow-btn {
  display: flex;
  gap: 15px;
}

.slider-arrow.style1 {
  display: inline-block;
  width: 56px;
  height: 56px;
  line-height: 56px;
  text-align: center;
  background: var(--theme);
  color: var(--white);
  margin-top: -0.4em;
  box-shadow: 0px 10px 30px 0px rgba(52, 55, 170, 0.15);
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  transition: all 0.4s ease-in-out;
}
.slider-arrow.style1:hover {
  background: var(--white);
  color: var(--theme);
  box-shadow: 0px 10px 30px 0px rgba(52, 55, 170, 0.15);
}
.slider-arrow.style1.style2 {
  background: var(--theme2);
  color: var(--title);
}
.slider-arrow.style1.style2:hover {
  background: var(--theme);
  color: var(--white);
}

.link-btn.style1 {
  color: var(--title);
  font-family: "Manrope", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 28px;
}
.link-btn.style1 i,
.link-btn.style1 svg {
  margin-left: 0px;
}
.link-btn.style3 {
  display: inline-block;
  background: var(--theme);
  color: var(--title);
  font-family: "Manrope", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 28px;
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
}
.link-btn.style3 i path,
.link-btn.style3 svg path {
  fill: var(--white);
}

/* 05.Gutter */
/*----------------------------------------------
    # Gutter  style here
----------------------------------------------*/
@media (min-width: 1600px) {
  .gx-25 {
    --bs-gutter-x: 25px;
  }
  .gx-30 {
    --bs-gutter-x: 30px;
  }
  .gx-40 {
    --bs-gutter-x: 40px;
  }
  .gx-60 {
    --bs-gutter-x: 60px;
  }
  .gx-80 {
    --bs-gutter-x: 80px;
  }
  .gx-95 {
    --bs-gutter-x: 95px;
  }
  .gx-100 {
    --bs-gutter-x: 100px;
  }
  .gx-114 {
    --bs-gutter-x: 114px;
  }
  .gx-85 {
    --bs-gutter-x: 85px;
  }
  .gx-134 {
    --bs-gutter-x: 134px;
  }
  .gx-165 {
    --bs-gutter-x: 165px;
  }
}
.gy-30 {
  --bs-gutter-y: 30px;
}

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

/* 06.Container */
/*----------------------------------------------
    # Container  style here
----------------------------------------------*/
@media (min-width: 550px) {
  .header-1 .container {
    max-width: 1620px;
  }
  .header-2 .container,
  .header-3 .container {
    max-width: 1620px;
  }
  .intro-container-wrapper.style1 .container {
    max-width: 1820px;
  }
  .intro-wrapper.style1 .container {
    max-width: 1450px;
  }
  .brand-slider-container-wrapper.style1 .container {
    max-width: 1450px;
  }
  .brand-slider-container-wrapper.style2 .container {
    max-width: 1450px;
  }
  .work-process-container-wrapper.style1 .container {
    max-width: 1440px;
  }
  .advantage-container-wrapper.style1 .container {
    max-width: 1820px;
  }
  .advantage-wrapper.style1 .container {
    max-width: 1200px;
  }
  .counter-container-wrapper.style1 .container {
    max-width: 1820px;
  }
  .counter-wrapper.style1 .container {
    max-width: 1450px;
  }
  .testimonial-container-wrapper.style1 > .container {
    max-width: 1820px;
  }
  .testimonial-container-wrapper.style2 > .container {
    max-width: 1820px;
  }
  .cta-container-wrapper.style1 > .container {
    max-width: 1820px;
  }
  .wcu-container-wrapper.style2 > .container {
    max-width: 1820px;
  }
  .about-container-wrapper.style2 .container {
    max-width: 1820px;
  }
  .about-wrapper.style2 .container {
    max-width: 1450px;
  }
  .project-container-wrapper.style2 .container {
    max-width: 1790px;
  }
  .project-details-container-wrapper .container {
    max-width: 1440px;
  }
  .team-page-container-wrapper .container {
    max-width: 1330px;
  }
  .footer-widgets-wrapper.style1 .container {
    max-width: 1580px;
  }
  .footer-bottom.style1 .container {
    max-width: 1580px;
  }
  .service-details-container-wrapper .container {
    max-width: 1440px;
  }
}
/* 07.Animation */
/*-----------------------------------------------------------------
Theme Name: Niotech
Author: Gramentheme
Author URI: https://themeforest.net/user/gramentheme
Version: 1.0.0 
Description: Niotech - App Landing HTML Template <

-------------------------------------------------------------------
 CSS TABLE OF CONTENTS
-------------------------------------------------------------------

    01.Mixins
    02.Variables
    03.Typography
    04.Buttons 
    05.Gutter 
    06.Container 
    07.Animation 
    08.Helping 
    09.MeanMenu 
    10.Preloader
    11.Title 
    12.Common 
    13.Header
    14.Breadcumb
    15.Footer
    16.Intro 
    17.Brand 
    18.About
    19.Work Process 
    20.Advantage
    21.Wcu
    22.Counter
    23.Faq
    24.Testimonial
    25.Feature
    26.Pricing 
    27.Cta
    28.Blog
    29.Services
    30.Project 
    31.Team
    32.Team Extra
    33.Sidebar
    34.Contact
    35.Input
    36.Useed Technologies
    37.Policy
------------------------------------------------------------------*/
/* 01.Mixins */
/* 02.Variables */
/*----------------------------------------------
    # All Animation style here
----------------------------------------------*/
@keyframes rippleOne {
  70% {
    box-shadow: 0 0 0 40px rgba(244, 68, 56, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(244, 68, 56, 0);
  }
}
.ripple-effect {
  display: inline-block;
  width: 60px;
  height: 60px;
  line-height: 60px;
  text-align: center;
  background-color: #F3E7E0;
  border: 1px solid var(--white);
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgb(255, 217, 196);
  animation: rippleOne 2s infinite;
}
.ripple-effect .playerImg {
  width: 19px;
  height: 24px;
}

/*img-animation**********************/
.img-custom-anim-right {
  animation: img-anim-right 1.3s forwards cubic-bezier(0.645, 0.045, 0.355, 1) 0.4s;
  opacity: 0;
}

@keyframes img-anim-right {
  0% {
    transform: translateX(5%);
    clip-path: inset(0 0 0 100%);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    clip-path: inset(0 0 0 0);
    opacity: 1;
  }
}
.img-custom-anim-left {
  animation: img-anim-left 1.3s forwards cubic-bezier(0.645, 0.045, 0.355, 1) 0.4s;
  opacity: 0;
}

@keyframes img-anim-left {
  0% {
    transform: translateX(-5%);
    clip-path: inset(0 100% 0 0);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    clip-path: inset(0 0 0 0);
    opacity: 1;
  }
}
.img-custom-anim-top {
  animation: img-anim-top 1.3s forwards cubic-bezier(0.645, 0.045, 0.355, 1);
  opacity: 0;
}

@keyframes img-anim-top {
  0% {
    transform: translateY(-5%);
    clip-path: inset(0 0 100% 0);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    clip-path: inset(0 0 0 0);
    opacity: 1;
  }
}
@keyframes up-down {
  0% {
    transform: translateY(10px);
  }
  100% {
    transform: translateY(-10px);
  }
}
@keyframes spinner {
  to {
    transform: rotateZ(360deg);
  }
}
@keyframes letters-loading {
  0%, 75%, 100% {
    opacity: 0;
    transform: rotateY(-90deg);
  }
  25%, 50% {
    opacity: 1;
    transform: rotateY(0deg);
  }
}
@keyframes loaderspin {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
@keyframes tpswing {
  0% {
    transform: rotate(20deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
@keyframes width {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}
@keyframes loaderpulse {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.2);
  }
}
@keyframes rounded {
  50% {
    transform: rotate(20deg);
  }
}
.cir36 {
  animation: cir36 20s linear infinite;
  -webkit-animation: cir36 20s linear infinite;
}

@keyframes cir36 {
  100% {
    transform: rotate(360deg);
  }
}
.float-bob-y {
  animation-name: float-bob-y;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
@keyframes float-bob-y {
  0% {
    transform: translateY(-30px);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(-30px);
  }
}
.float-bob-y2 {
  animation-name: float-bob-y;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
@keyframes float-bob-y {
  0% {
    transform: translateY(-30px);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(-30px);
  }
}
.float-bob-x {
  animation-name: float-bob-x;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
@keyframes float-bob-x {
  0% {
    transform: translateX(30px);
  }
  50% {
    transform: translateX(10px);
  }
  100% {
    transform: translateX(30px);
  }
}
@keyframes bounce-x {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(30px);
  }
  100% {
    transform: translateX(0);
  }
}
.bounce-x {
  animation: bounce-x 7s infinite linear;
}

@keyframes criss-cross-left {
  0% {
    left: -20px;
  }
  50% {
    left: 50%;
    width: 20px;
    height: 20px;
  }
  100% {
    left: 50%;
    width: 375px;
    height: 375px;
  }
}
@keyframes criss-cross-right {
  0% {
    right: -20px;
  }
  50% {
    right: 50%;
    width: 20px;
    height: 20px;
  }
  100% {
    right: 50%;
    width: 375px;
    height: 375px;
  }
}
@keyframes rotated2 {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(-360deg);
  }
}
@keyframes wave {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(-25%);
  }
  100% {
    transform: translateX(-50%);
  }
}
@keyframes animate-positive {
  0% {
    width: 0;
  }
  100% {
    width: var(--progress-width);
  }
}
.reveal {
  position: relative;
  display: -ms-inline-flexbox;
  visibility: hidden;
  overflow: hidden;
}

.reveal img {
  height: 100%;
  width: 100%;
  display: inline-block;
  -o-object-fit: cover;
  object-fit: cover;
  transform-origin: left;
}

.image-anime {
  position: relative;
  overflow: hidden;
}

.image-anime:after {
  content: "";
  position: absolute;
  width: 200%;
  height: 0%;
  left: 50%;
  top: 50%;
  background-color: rgba(255, 255, 255, 0.3);
  transform: translate(-50%, -50%) rotate(-45deg);
  z-index: 1;
}

.image-anime:hover:after {
  height: 250%;
  transition: all 600ms linear;
  background-color: transparent;
}

/*------------------- 3.10. Animation -------------------*/
.ripple-animation,
.play-btn:after,
.play-btn:before {
  animation-duration: var(--ripple-ani-duration);
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-name: ripple;
}

@keyframes ripple {
  0% {
    transform: scale(1);
    opacity: 0;
  }
  30% {
    opacity: 0.4;
  }
  100% {
    transform: scale(1.8);
    opacity: 0;
  }
}
@keyframes ripple2 {
  0% {
    transform: scale(1);
    opacity: 0;
  }
  30% {
    opacity: 0.4;
  }
  100% {
    transform: scale(2.8);
    opacity: 0;
  }
}
.wave-anim {
  width: 105px;
  height: 69px;
  background-repeat: repeat;
  background-size: auto;
  animation: wave 70s linear infinite;
}

@keyframes wave {
  0% {
    background-position: top left;
  }
  100% {
    background-position: top left -2000px;
  }
}
.fancy-animation {
  animation: morph 8s ease-in-out infinite;
}

@keyframes morph {
  0% {
    border-radius: 60% 40% 30% 70%/60% 30% 70% 40%;
  }
  50% {
    border-radius: 30% 60% 70% 40%/50% 60% 30% 60%;
  }
  100% {
    border-radius: 60% 40% 30% 70%/60% 30% 70% 40%;
  }
}
.movingX {
  animation: movingX 8s linear infinite;
}

@keyframes movingX {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(50px);
  }
  100% {
    transform: translateX(0);
  }
}
.movingCar {
  animation: movingCar 25s linear infinite;
}

@keyframes movingCar {
  0% {
    transform: translateX(0) rotateY(0deg);
  }
  50% {
    transform: translateX(calc(-100vw + 108%));
  }
  51% {
    transform: translateX(calc(-100vw + 108%)) rotateY(180deg);
  }
  100% {
    transform: translateX(0) rotateY(180deg);
  }
}
.moving {
  animation: moving 8s linear infinite;
}

@keyframes moving {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(-50px);
  }
  100% {
    transform: translateX(0);
  }
}
.moving2 {
  animation: moving2 8s linear infinite;
}

@keyframes moving2 {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(0);
  }
}
.moving3 {
  animation: moving3 8s linear infinite;
}

@keyframes moving3 {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(10px);
  }
  100% {
    transform: translateX(0);
  }
}
.jump {
  animation: jumpAni 7s linear infinite;
}

@keyframes jumpAni {
  0% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-30px);
  }
  100% {
    transform: translateY(0);
  }
}
.jump-reverse {
  animation: jumpReverseAni 7s linear infinite;
}

@keyframes jumpReverseAni {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(30px);
  }
  100% {
    transform: translateY(0);
  }
}
.spin {
  animation: spin 10s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}
.bg-color-ani,
.color-animate {
  animation: bgColor 6s linear infinite;
}

@keyframes bgColor {
  0% {
    background-color: #F2BA4C;
  }
  25% {
    background-color: #81F24C;
  }
  50% {
    background-color: #41F27D;
  }
  75% {
    background-color: #0500FF;
  }
  100% {
    background-color: #F2BA4C;
  }
}
@keyframes animate-positive {
  0% {
    width: 0;
  }
}
.fadein,
.scalein,
.slidetopleft,
.slidebottomright,
.slideinleft,
.slideinright,
.slideindown,
.slideinup,
.rollinleft,
.rollinright {
  opacity: 0;
  animation-fill-mode: forwards;
  animation-iteration-count: 1;
  animation-duration: 1.3s;
  animation-delay: 0.3s;
  animation-name: var(--animation-name);
}

.swiper-slide-active .fadein {
  --animation-name: fadein;
}

.swiper-slide-active .scalein {
  --animation-name: scalein;
}

.swiper-slide-active .slidetopleft {
  --animation-name: slidetopleft;
}

.swiper-slide-active .slidebottomright {
  --animation-name: slidebottomright;
}

.swiper-slide-active .slideinleft {
  --animation-name: slideinleft;
}

.swiper-slide-active .slideinright {
  --animation-name: slideinright;
}

.swiper-slide-active .slideinup {
  --animation-name: slideinup;
}

.swiper-slide-active .slideindown {
  --animation-name: slideindown;
}

.swiper-slide-active .rollinleft {
  --animation-name: rollinleft;
}

.swiper-slide-active .rollinright {
  --animation-name: rollinright;
}

@keyframes fadein {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes scalein {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.3);
  }
}
@keyframes slideinup {
  0% {
    opacity: 0;
    transform: translateY(100px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes slideinright {
  0% {
    opacity: 0;
    transform: translateX(180px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes slideindown {
  0% {
    opacity: 0;
    transform: translateY(-100px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes slideinleft {
  0% {
    opacity: 0;
    transform: translateX(-100px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes slidebottomright {
  0% {
    opacity: 0;
    transform: translateX(120px) translateY(120px);
  }
  100% {
    opacity: 1;
    transform: translateX(0) translateY(0);
  }
}
@keyframes slidetopleft {
  0% {
    opacity: 0;
    transform: translateX(-100px) translateY(-100px);
  }
  100% {
    opacity: 1;
    transform: translateX(0) translateY(0);
  }
}
.spin2 {
  animation: spin2 10s linear infinite;
}

@keyframes spin2 {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(-360deg);
  }
}
/*animation bubble****************/
.animation-bubble {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  overflow: hidden;
  z-index: 1;
  pointer-events: none;
}

.animation-bubble div[class^=bubble-] {
  height: 1px;
  width: 1px;
  position: absolute;
  background: url(../img/shape/star.html) no-repeat center center;
  background-size: cover;
  border-radius: 50%;
  transform: translateX(-50%);
  pointer-events: none;
}

@media (max-width: 1024px) {
  .animation-bubble > :nth-child(even) {
    display: none;
  }
}
.bubble-1 {
  bottom: -5px;
  left: 68%;
  animation: bubble-animation 4.5s infinite ease-in -6.57s;
}

.bubble-2 {
  bottom: -71px;
  left: 97%;
  animation: bubble-animation 4.5s infinite ease-in -5.07s;
}

.bubble-3 {
  bottom: -71px;
  left: 43%;
  animation: bubble-animation 4.5s infinite ease-in -6.73s;
}

.bubble-4 {
  bottom: -3.8px;
  left: 82%;
  animation: bubble-animation 4.5s infinite ease-in -4.04s;
}

.bubble-5 {
  bottom: -73.4px;
  left: 29%;
  animation: bubble-animation 4.5s infinite ease-in -3.11s;
}

.bubble-6 {
  bottom: -71px;
  left: 41%;
  animation: bubble-animation 4.5s infinite ease-in -5.95s;
}

.bubble-7 {
  bottom: -79.4px;
  left: 14%;
  animation: bubble-animation 4.5s infinite ease-in -3.68s;
}

.bubble-8 {
  bottom: -115.4px;
  left: 90%;
  animation: bubble-animation 4.5s infinite ease-in -3.89s;
}

.bubble-9 {
  bottom: -44.6px;
  left: 33%;
  animation: bubble-animation 4.5s infinite ease-in -1.09s;
}

.bubble-10 {
  bottom: -6.2px;
  left: 59%;
  animation: bubble-animation 4.5s infinite ease-in -0.96s;
}

@keyframes bubble-animation {
  0% {
    transform: translate3d(-50%, 0, 0);
    height: 1px;
    width: 1px;
  }
  100% {
    transform: translate3d(-50%, -280px, 0);
    height: 30px;
    width: 30px;
  }
}
@keyframes toTopFromBottom {
  49% {
    transform: translateY(-100%);
  }
  50% {
    opacity: 0;
    transform: translateY(100%);
  }
  51% {
    opacity: 1;
  }
}
@keyframes icon-anim {
  0% {
    top: 26px;
    right: 90px;
  }
  25% {
    top: 86px;
    right: 110px;
  }
  100% {
    top: 26px;
    right: 90px;
  }
}
.img-shine {
  position: relative;
}

.img-shine:after {
  position: absolute;
  top: 0;
  left: -75%;
  z-index: 2;
  display: block;
  content: "";
  width: 50%;
  height: 100%;
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%);
  transform: skewX(-20deg);
}

.img-shine:hover:after {
  animation: imgShine 1s;
}

@keyframes imgShine {
  100% {
    left: 125%;
  }
}
/* 08.Helping */
/*-----------------------------------------------------------------
Theme Name: Niotech
Author: Gramentheme
Author URI: https://themeforest.net/user/gramentheme
Version: 1.0.0 
Description: Niotech - App Landing HTML Template <

-------------------------------------------------------------------
 CSS TABLE OF CONTENTS
-------------------------------------------------------------------

    01.Mixins
    02.Variables
    03.Typography
    04.Buttons 
    05.Gutter 
    06.Container 
    07.Animation 
    08.Helping 
    09.MeanMenu 
    10.Preloader
    11.Title 
    12.Common 
    13.Header
    14.Breadcumb
    15.Footer
    16.Intro 
    17.Brand 
    18.About
    19.Work Process 
    20.Advantage
    21.Wcu
    22.Counter
    23.Faq
    24.Testimonial
    25.Feature
    26.Pricing 
    27.Cta
    28.Blog
    29.Services
    30.Project 
    31.Team
    32.Team Extra
    33.Sidebar
    34.Contact
    35.Input
    36.Useed Technologies
    37.Policy
------------------------------------------------------------------*/
/* 01.Mixins */
/* 02.Variables */
/*----------------------------------------------
    # Helping  style here
----------------------------------------------*/
::-webkit-scrollbar {
  width: 8px;
  height: 4px;
}

/* Track */
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px var(--orange);
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: var(--orange);
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
}

.fix {
  overflow: hidden;
}

.ralt {
  position: relative;
}

.ripple {
  position: relative;
}
.ripple::before, .ripple::after {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 60px;
  height: 60px;
  transform: translateX(-50%) translateY(-50%);
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(56, 75, 255, 0.5);
  animation: rippleOne 3s infinite;
}
.ripple::before {
  animation-delay: 0.9s;
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
}
.ripple::after {
  animation-delay: 0.6s;
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
}

.mega-hover {
  position: relative;
  overflow: hidden;
  z-index: 2;
}

.mega-hover:after,
.mega-hover:before {
  content: "";
  position: absolute;
  pointer-events: none;
  opacity: 1;
  z-index: -1;
}

.mega-hover:before {
  top: 0;
  right: 51%;
  bottom: 0;
  left: 50%;
  background: rgba(255, 255, 255, 0.2);
}

.mega-hover:after {
  top: 50%;
  right: 0;
  bottom: 50%;
  left: 0;
  background: rgba(245, 255, 255, 0.3);
}

.mega-hover:hover:before {
  left: 0;
  right: 0;
  opacity: 0;
  transition: all 900ms linear;
}

.mega-hover:hover:after {
  top: 0;
  bottom: 0;
  opacity: 0;
  transition: all 900ms linear;
}

@media (max-width: 767px) {
  br {
    display: none;
  }
}

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

.bg-cover-2 {
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  background-position: center;
  width: 100%;
  height: 100%;
}

.page-nav-wrap ul li {
  display: inline-block;
  text-align: center;
}
.page-nav-wrap ul li .page-numbers.current {
  background-color: var(--theme);
  color: var(--white);
}
.page-nav-wrap ul li .page-numbers {
  display: inline-block;
  width: 50px;
  height: 50px;
  line-height: 50px;
  background: transparent;
  font-weight: 600;
  transition: all 0.3s ease-in-out;
  margin: 0 2px;
  border: 1px solid #E3E3E3;
  color: var(--title);
}
@media (max-width: 767px) {
  .page-nav-wrap ul li .page-numbers {
    margin-top: 10px;
    width: 50px;
    height: 50px;
    line-height: 50px;
    font-size: 14px;
  }
}
.page-nav-wrap ul li .page-numbers i {
  margin-top: 2px;
}
.page-nav-wrap ul li .page-numbers.icon {
  border: none;
  background-color: transparent;
  color: var(--theme);
}
.page-nav-wrap ul li .page-numbers.icon:hover {
  border: none;
  background-color: transparent;
  color: var(--theme);
}
.page-nav-wrap ul li .page-numbers:hover {
  background-color: var(--theme);
  color: var(--white) !important;
  border: 1px solid transparent;
}

.box-shadow {
  box-shadow: 0px 4px 40px 0px rgba(0, 0, 0, 0.06);
}

.pt-100 {
  padding-top: 100px;
}
@media (max-width: 991px) {
  .pt-100 {
    padding-top: 80px;
  }
}

.pt-110 {
  padding-top: 110px;
}
@media (max-width: 991px) {
  .pt-110 {
    padding-top: 80px;
  }
}

.pb-100 {
  padding-bottom: 100px;
}
@media (max-width: 991px) {
  .pb-100 {
    padding-bottom: 80px;
  }
}

.pb-110 {
  padding-bottom: 110px;
}
@media (max-width: 991px) {
  .pb-110 {
    padding-bottom: 80px;
  }
}

.pb-30 {
  padding-bottom: 30px;
}

.pt-30 {
  padding-top: 30px;
}

.margin-top-10 {
  margin-top: -10px;
}

.margin-top-5 {
  margin-top: -5px;
}

.margin-top-60 {
  margin-top: -65px;
}
@media (max-width: 1399px) {
  .margin-top-60 {
    margin-top: -25px;
  }
}
@media (max-width: 1199px) {
  .margin-top-60 {
    margin-top: -27px;
  }
}
@media (max-width: 991px) {
  .margin-top-60 {
    margin-top: -75px;
  }
}
@media (max-width: 767px) {
  .margin-top-60 {
    margin-top: -65px;
  }
}

.margin-top-8 {
  margin-top: -10px;
}

.mt-n30 {
  margin-top: -30px !important;
}

.mt-n50 {
  margin-top: -50px !important;
}

.mt-10 {
  margin-top: 10px;
}

.mt-15 {
  margin-top: 15px;
}

.mr-7 {
  margin-right: 7px;
}

.mb-20 {
  margin-bottom: 20px;
}

.mr-44 {
  margin-right: 44px;
}

.mb-40 {
  margin-bottom: 40px;
}
@media (max-width: 767px) {
  .mb-40 {
    margin-bottom: 35px;
  }
}
@media (max-width: 575px) {
  .mb-40 {
    margin-bottom: 25px;
  }
}

.ml-50 {
  margin-left: 50px;
}
@media (max-width: 1199px) {
  .ml-50 {
    margin-left: 0;
  }
}

.mt-n10 {
  margin-top: -10px;
}

.mt-n5 {
  margin-top: -5px;
}

.mt-10 {
  margin-top: 10px;
}

.mt-15 {
  margin-top: 15px;
}

.mt-25 {
  margin-top: 25px;
}

.mt-40 {
  margin-top: 40px;
}

.mt-60 {
  margin-top: 60px;
}

.mt-90 {
  margin-top: 90px;
}

.mb-20 {
  margin-bottom: 20px;
}

.mb-30 {
  margin-bottom: 30px;
}

.mb-40 {
  margin-bottom: 40px;
}

.mb-50 {
  margin-bottom: 50px;
}

.mb-55 {
  margin-bottom: 55px;
}

.mb-60 {
  margin-bottom: 60px;
}
@media (max-width: 767px) {
  .mb-60 {
    margin-bottom: 40px;
  }
}
@media (max-width: 575px) {
  .mb-60 {
    margin-bottom: 30px;
  }
}

.mb-70 {
  margin-bottom: 70px;
}

.mb-80 {
  margin-bottom: 80px;
}

.mb-90 {
  margin-bottom: 90px;
}

.mb-100 {
  margin-bottom: 100px;
}

@media (min-width: 992px) {
  .mb-md-100 {
    margin-bottom: 100px;
  }
}
.pb-262 {
  padding-bottom: 262px !important;
}
@media (max-width: 767px) {
  .pb-262 {
    padding-bottom: 80px !important;
  }
}

.mxw-345 {
  max-width: 345px;
}

.mxw-410 {
  max-width: 410px;
}

.mxw-440 {
  max-width: 440px;
}

.mxw-530 {
  max-width: 530px;
}

.mxw-565 {
  max-width: 565px;
}

.mxw-570 {
  max-width: 570px;
}

.mxw-586 {
  max-width: 586px;
}

.mxw-630 {
  max-width: 630px;
}

.mxw-640 {
  max-width: 640px;
}

.mxw-651 {
  max-width: 651px;
}

.mxw-685 {
  max-width: 685px;
}

.mxw-850 {
  max-width: 850px;
}

.mxw-848 {
  max-width: 848px;
}

.mxw-705 {
  max-width: 705px;
}

.mxw-770 {
  max-width: 770px;
}

.mxw-300 {
  max-width: 300px;
}

.mxw-1450 {
  max-width: 1450px;
}

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

.center {
  text-align: center;
  margin: 0 auto;
}

.bg-theme {
  background-color: var(--theme) !important;
}

.bg-theme2 {
  background: var(--theme2) !important;
}

.bg-theme3 {
  background: var(--theme3) !important;
}

.bg-orange {
  background-color: var(--orange) !important;
}

.bg-color1 {
  background-color: #0B0B0C;
}

.bg-color2 {
  background-color: #343434;
}

.bg-title {
  background-color: var(--title);
}

.text-title {
  color: var(--title);
}

.text-dark2 {
  color: #838387 !important;
}

.text-bg-color2 {
  color: var(--theme2) !important;
}

.text-theme-color {
  color: var(--theme) !important;
}

.text-theme-color2 {
  color: var(--theme2) !important;
}

.text-orange-color {
  color: var(--orange) !important;
}

.bg-transparent {
  background: transparent;
}

.border-theme {
  border: 1px solid var(--theme);
}

.border-dark {
  border-bottom: 1px solid #54595F;
}

.mb-20 {
  margin-bottom: 20px !important;
}

.mb-30 {
  margin-bottom: 30px !important;
}

.mb-60 {
  margin-bottom: 60px !important;
}

.mt-30 {
  margin-top: 30px !important;
}

/* 09.MeanMenu */
/*-----------------------------------------------------------------
Theme Name: Niotech
Author: Gramentheme
Author URI: https://themeforest.net/user/gramentheme
Version: 1.0.0 
Description: Niotech - App Landing HTML Template <

-------------------------------------------------------------------
 CSS TABLE OF CONTENTS
-------------------------------------------------------------------

    01.Mixins
    02.Variables
    03.Typography
    04.Buttons 
    05.Gutter 
    06.Container 
    07.Animation 
    08.Helping 
    09.MeanMenu 
    10.Preloader
    11.Title 
    12.Common 
    13.Header
    14.Breadcumb
    15.Footer
    16.Intro 
    17.Brand 
    18.About
    19.Work Process 
    20.Advantage
    21.Wcu
    22.Counter
    23.Faq
    24.Testimonial
    25.Feature
    26.Pricing 
    27.Cta
    28.Blog
    29.Services
    30.Project 
    31.Team
    32.Team Extra
    33.Sidebar
    34.Contact
    35.Input
    36.Useed Technologies
    37.Policy
------------------------------------------------------------------*/
/* 01.Mixins */
/* 02.Variables */
/*----------------------------------------------
    # Meanmenu style here
----------------------------------------------*/
.mean-container a.meanmenu-reveal {
  display: none;
}

.mean-container .mean-nav {
  background: none;
  margin-top: 0;
}

.mean-container .mean-bar {
  padding: 0;
  min-height: auto;
  background: none;
}

.mean-container .mean-nav > ul {
  padding: 0;
  margin: 0;
  width: 100%;
  list-style-type: none;
  display: block !important;
}
.mean-container .mean-nav > ul .homemenu-items {
  display: flex;
  align-items: center;
  gap: 30px;
  justify-content: space-between;
}
@media (max-width: 1199px) {
  .mean-container .mean-nav > ul .homemenu-items {
    flex-wrap: wrap;
  }
}
.mean-container .mean-nav > ul .homemenu-items .homemenu {
  position: relative;
}
@media (max-width: 1199px) {
  .mean-container .mean-nav > ul .homemenu-items .homemenu {
    max-width: 300px;
    text-align: center;
    margin: 0 auto;
    border: 1px solid var(--border);
    padding: 10px;
  }
}
.mean-container .mean-nav > ul .homemenu-items .homemenu .homemenu-thumb {
  position: relative;
}
.mean-container .mean-nav > ul .homemenu-items .homemenu .homemenu-thumb .demo-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60%;
  gap: 10px;
  display: flex;
  justify-content: center;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s ease-in-out;
  margin-top: 20px;
}
.mean-container .mean-nav > ul .homemenu-items .homemenu .homemenu-thumb .demo-button .theme-btn {
  padding: 12px 20px;
  color: var(--white) !important;
  width: initial;
  font-size: 16px;
  text-align: center;
  border-radius: 0;
}
.mean-container .mean-nav > ul .homemenu-items .homemenu .homemenu-thumb .demo-button .theme-btn:hover {
  color: var(--white) !important;
}
.mean-container .mean-nav > ul .homemenu-items .homemenu .homemenu-thumb::before {
  background: linear-gradient(to bottom, rgba(99, 92, 92, 0) 0%, #252527 100%);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  overflow: hidden;
  opacity: 0;
  transition: all 0.3s ease-in-out;
  content: "";
}
.mean-container .mean-nav > ul .homemenu-items .homemenu .homemenu-thumb:hover::before {
  visibility: visible;
  opacity: 1;
}
.mean-container .mean-nav > ul .homemenu-items .homemenu .homemenu-thumb:hover .demo-button {
  opacity: 1;
  visibility: visible;
  margin-top: 0;
}
.mean-container .mean-nav > ul .homemenu-items .homemenu .homemenu-thumb:hover .homemenu-btn {
  opacity: 1;
  visibility: visible;
  bottom: 50%;
  transform: translateY(50%);
}
.mean-container .mean-nav > ul .homemenu-items .homemenu .homemenu-thumb img {
  width: 100%;
}
.mean-container .mean-nav > ul .homemenu-items .homemenu .homemenu-title {
  text-align: center;
  margin: 15px auto;
  display: inline-block;
  font-size: 16px;
}

.mean-container a.meanmenu-reveal {
  display: none !important;
}

.mean-container .mean-nav ul li a {
  width: 100%;
  padding: 10px 0;
  color: var(--white) !important;
  font-size: 16px;
  line-height: 1.5;
  font-weight: 600;
  text-transform: capitalize;
  border-bottom: 1px solid var(--border) !important;
  border: none;
}
.mean-container .mean-nav ul li a:hover {
  color: var(--theme);
}

.mean-container .mean-nav ul li a:last-child {
  border-bottom: 0;
}

.mean-container .mean-nav ul li a:hover {
  color: var(--theme2);
}

.mean-container .mean-nav ul li a.mean-expand {
  margin-top: 5px;
  padding: 0 !important;
}

.mean-container .mean-nav ul li > a > i {
  display: none;
}

.mean-container .mean-nav ul li > a.mean-expand i {
  display: inline-block;
  font-size: 18px;
}

.mean-container .mean-nav > ul > li:first-child > a {
  border-top: 0;
}

.mean-container .mean-nav ul li a.mean-expand.mean-clicked i {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transition: all 0.4s ease-in-out;
}

.mean-container .mean-nav ul li .mega-menu li a {
  height: 200px;
  width: 100%;
  padding: 0;
  border-top: 0;
  margin-bottom: 20px;
}

/* 10.Preloader */
/*-----------------------------------------------------------------
Theme Name: Niotech
Author: Gramentheme
Author URI: https://themeforest.net/user/gramentheme
Version: 1.0.0 
Description: Niotech - App Landing HTML Template <

-------------------------------------------------------------------
 CSS TABLE OF CONTENTS
-------------------------------------------------------------------

    01.Mixins
    02.Variables
    03.Typography
    04.Buttons 
    05.Gutter 
    06.Container 
    07.Animation 
    08.Helping 
    09.MeanMenu 
    10.Preloader
    11.Title 
    12.Common 
    13.Header
    14.Breadcumb
    15.Footer
    16.Intro 
    17.Brand 
    18.About
    19.Work Process 
    20.Advantage
    21.Wcu
    22.Counter
    23.Faq
    24.Testimonial
    25.Feature
    26.Pricing 
    27.Cta
    28.Blog
    29.Services
    30.Project 
    31.Team
    32.Team Extra
    33.Sidebar
    34.Contact
    35.Input
    36.Useed Technologies
    37.Policy
------------------------------------------------------------------*/
/* 01.Mixins */
/* 02.Variables */
/* 03.Typography */
/*----------------------------------------------
    # Preloader style here
----------------------------------------------*/
.preloader {
  align-items: center;
  cursor: default;
  display: flex;
  height: 100%;
  justify-content: center;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 9999999;
}
.preloader .animation-preloader {
  z-index: 1000;
}
.preloader .animation-preloader .spinner {
  animation: spinner 1s infinite linear;
  border-radius: 50%;
  border: 3px solid rgba(0, 0, 0, 0.2);
  border-top-color: var(--theme);
  height: 9em;
  margin: 0 auto 3.5em auto;
  width: 9em;
}
@media (max-width: 767px) {
  .preloader .animation-preloader .spinner {
    width: 7.5em;
    height: 7.5em;
    margin: 0 auto 1.5em auto;
  }
}
.preloader .animation-preloader .txt-loading {
  font: bold 5em "Manrope", sans-serif, "Manrope", sans-serif;
  text-align: center;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
@media (max-width: 767px) {
  .preloader .animation-preloader .txt-loading {
    font-size: 2.5em;
  }
}
.preloader .animation-preloader .txt-loading .letters-loading {
  color: var(--theme);
  position: relative;
}
.preloader .animation-preloader .txt-loading .letters-loading:nth-child(2):before {
  animation-delay: 0.2s;
}
.preloader .animation-preloader .txt-loading .letters-loading:nth-child(3):before {
  animation-delay: 0.4s;
}
.preloader .animation-preloader .txt-loading .letters-loading:nth-child(4):before {
  animation-delay: 0.6s;
}
.preloader .animation-preloader .txt-loading .letters-loading:nth-child(5):before {
  animation-delay: 0.8s;
}
.preloader .animation-preloader .txt-loading .letters-loading:nth-child(6):before {
  animation-delay: 1s;
}
.preloader .animation-preloader .txt-loading .letters-loading:nth-child(7):before {
  animation-delay: 1.2s;
}
.preloader .animation-preloader .txt-loading .letters-loading:nth-child(8):before {
  animation-delay: 1.4s;
}
.preloader .animation-preloader .txt-loading .letters-loading::before {
  animation: letters-loading 4s infinite;
  color: var(--header);
  content: attr(data-text-preloader);
  left: 0;
  opacity: 0;
  font-family: "Manrope", sans-serif;
  position: absolute;
  top: -3px;
  transform: rotateY(-90deg);
}
.preloader p {
  font-size: 15px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 8px;
  color: var(--theme);
}
.preloader .loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  font-size: 0;
  z-index: 1;
  pointer-events: none;
}
.preloader .loader .row {
  height: 100%;
}
.preloader .loader .loader-section {
  padding: 0px;
}
.preloader .loader .loader-section .bg {
  background-color: #fff;
  height: 100%;
  left: 0;
  width: 100%;
  transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1);
}
.preloader.loaded .animation-preloader {
  opacity: 0;
  transition: 0.3s ease-out;
}
.preloader.loaded .loader-section .bg {
  width: 0;
  transition: 0.7s 0.3s allcubic-bezier(0.1, 0.1, 0.1, 1);
}

.back-to-top {
  border-radius: 12px;
  background-color: var(--theme);
  width: 50px;
  height: 50px;
  line-height: 50px;
  color: var(--text);
  font-size: 18px;
  position: fixed;
  display: inline-block;
  z-index: 99;
  right: 30px;
  bottom: 30px;
  transition: all 0.4s ease-in-out;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
}
.back-to-top:hover {
  background-color: var(--title);
}
.back-to-top.show {
  opacity: 1;
  visibility: visible;
  transform: translate(0);
}

/* 11.Title */
/*-----------------------------------------------------------------
Theme Name: Niotech
Author: Gramentheme
Author URI: https://themeforest.net/user/gramentheme
Version: 1.0.0 
Description: Niotech - App Landing HTML Template <

-------------------------------------------------------------------
 CSS TABLE OF CONTENTS
-------------------------------------------------------------------

    01.Mixins
    02.Variables
    03.Typography
    04.Buttons 
    05.Gutter 
    06.Container 
    07.Animation 
    08.Helping 
    09.MeanMenu 
    10.Preloader
    11.Title 
    12.Common 
    13.Header
    14.Breadcumb
    15.Footer
    16.Intro 
    17.Brand 
    18.About
    19.Work Process 
    20.Advantage
    21.Wcu
    22.Counter
    23.Faq
    24.Testimonial
    25.Feature
    26.Pricing 
    27.Cta
    28.Blog
    29.Services
    30.Project 
    31.Team
    32.Team Extra
    33.Sidebar
    34.Contact
    35.Input
    36.Useed Technologies
    37.Policy
------------------------------------------------------------------*/
/* 01.Mixins */
/* 02.Variables */
/* 03.Typography */
/*----------------------------------------------
    # Title style here
----------------------------------------------*/
.single-section-title {
  color: var(--title);
  text-align: center;
  font-family: "Manrope", sans-serif;
  font-size: 48px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  letter-spacing: -0.96px;
}
@media (max-width: 1199px) {
  .single-section-title {
    font-size: 35px;
  }
}

.section-title .subtitle {
  display: inline-flex;
  padding: 4px 15px;
  align-items: center;
  gap: 10px;
  border-radius: 100px;
  background: rgb(208, 253, 28);
  color: var(--text);
  font-family: "Manrope", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 28px;
  letter-spacing: -0.32px;
  margin-bottom: 15px;
  border-radius: 100px;
}
.section-title .subtitle.bg2 {
  background: rgba(255, 255, 255, 0.15);
}
.section-title .subtitle img {
  margin-left: 3px;
}
.section-title .title {
  color: var(--title);
  font-family: "Manrope", sans-serif;
  font-size: 48px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  letter-spacing: -0.96px;
  margin-bottom: 25px;
}
@media (max-width: 1199px) {
  .section-title .title {
    font-size: 35px;
  }
}
.section-title .section-desc {
  color: var(--text);
  font-family: "Manrope", sans-serif;
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
  line-height: 28px;
  letter-spacing: -0.32px;
  margin-bottom: 30px;
}

/* 12.Common */
/*-----------------------------------------------------------------
Theme Name: Niotech
Author: Gramentheme
Author URI: https://themeforest.net/user/gramentheme
Version: 1.0.0 
Description: Niotech - App Landing HTML Template <

-------------------------------------------------------------------
 CSS TABLE OF CONTENTS
-------------------------------------------------------------------

    01.Mixins
    02.Variables
    03.Typography
    04.Buttons 
    05.Gutter 
    06.Container 
    07.Animation 
    08.Helping 
    09.MeanMenu 
    10.Preloader
    11.Title 
    12.Common 
    13.Header
    14.Breadcumb
    15.Footer
    16.Intro 
    17.Brand 
    18.About
    19.Work Process 
    20.Advantage
    21.Wcu
    22.Counter
    23.Faq
    24.Testimonial
    25.Feature
    26.Pricing 
    27.Cta
    28.Blog
    29.Services
    30.Project 
    31.Team
    32.Team Extra
    33.Sidebar
    34.Contact
    35.Input
    36.Useed Technologies
    37.Policy
------------------------------------------------------------------*/
/* 01.Mixins */
/* 02.Variables */
/* 03.Typography */
.brandSliderTwo .brand-logo {
  text-align: center;
}

.swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  background-color: var(--theme);
  opacity: 0.25;
  border-radius: 50%;
  margin: 0 6px;
  transition: all 0.3s ease;
}

.swiper-pagination-bullet-active {
  width: 28px;
  background-color: var(--theme);
  opacity: 1;
  border-radius: 8px;
}

.social-profile {
  position: absolute;
  left: 40px;
  bottom: 100px;
  text-align: center;
  content: "";
  transition: all 0.4s ease-in-out;
  z-index: 2;
  display: inline-block;
  overflow: hidden;
  z-index: 9;
}
.social-profile ul {
  padding-left: 0;
  margin-bottom: 5px;
  transform: translateY(100px);
  transition: all 0.6s ease-in-out;
  opacity: 0;
  visibility: hidden;
}
.social-profile ul li {
  margin-bottom: 5px;
}
.social-profile ul li a {
  width: 36px;
  height: 36px;
  line-height: 36px;
  text-align: center;
  font-size: 14px;
  display: block;
  background: var(--white);
  color: var(--theme);
  transition: all 0.4s ease-in-out;
  text-align: center;
  margin: 0 auto;
  border-radius: 50%;
}
.social-profile ul li a:hover {
  background-color: var(--theme);
  color: var(--white) !important;
}
.social-profile .plus-btn {
  position: relative;
  z-index: 2;
  cursor: pointer;
  width: 36px;
  height: 36px;
  line-height: 36px;
  text-align: center;
  font-size: 14px;
  display: inline-block;
  background: var(--theme);
  color: var(--white);
  transition: all 0.4s ease-in-out;
  border-radius: 50%;
}
.social-profile .plus-btn:hover {
  background: var(--theme) !important;
}
.social-profile:hover .plus-btn {
  background-color: var(--theme3);
  color: var(--white);
}
.social-profile:hover ul {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  -o-transform: translateY(0);
}

.social-media {
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 5;
}
.social-media li a {
  display: inline-block;
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  background: var(--theme2);
  color: var(--theme);
  transition: all 0.4s;
  border-radius: 5px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  -webkit-transition: all 0.4s;
  -moz-transition: all 0.4s;
  -ms-transition: all 0.4s;
  -o-transition: all 0.4s;
}
.social-media li a:hover {
  background: var(--theme);
  color: var(--white) !important;
  border: 1px solid var(--border);
}
.social-media.style2 li a {
  display: inline-block;
  width: 35px;
  height: 35px;
  line-height: 35px;
  text-align: center;
  background: var(--white);
  color: var(--title);
  transition: all 0.4s;
  border-radius: 0px;
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  -ms-border-radius: 0px;
  -o-border-radius: 0px;
  -webkit-transition: all 0.4s;
  -moz-transition: all 0.4s;
  -ms-transition: all 0.4s;
  -o-transition: all 0.4s;
}
.social-media.style2 li a:hover {
  background: var(--theme);
  color: var(--white) !important;
  border: 1px solid var(--theme);
}
.social-media.style3 li a {
  display: inline-block;
  width: 15px;
  height: 15px;
  line-height: 15px;
  text-align: center;
  background: transparent;
  color: var(--title);
  transition: all 0.4s;
  border-radius: 0px;
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  -ms-border-radius: 0px;
  -o-border-radius: 0px;
  -webkit-transition: all 0.4s;
  -moz-transition: all 0.4s;
  -ms-transition: all 0.4s;
  -o-transition: all 0.4s;
}
.social-media.style3 li a:hover {
  color: var(--theme) !important;
  border: none;
}

.fancy-box-wrapper.style1 {
  display: flex;
  align-items: center;
  gap: 45px;
}
@media (max-width: 767px) {
  .fancy-box-wrapper.style1 {
    flex-direction: column;
    gap: 20px;
  }
}
.fancy-box-wrapper.style3 {
  display: flex;
  padding: 20px;
  gap: 40px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin-bottom: 40px;
}
.fancy-box-wrapper.style3 .box-text {
  max-width: 245px;
}
@media (max-width: 1899px) {
  .fancy-box-wrapper.style3 {
    padding: 10px;
  }
}
@media (max-width: 767px) {
  .fancy-box-wrapper.style3 {
    flex-direction: column;
    flex-wrap: wrap;
    gap: 20px;
  }
}

.fancy-box.style1 {
  display: flex;
  align-items: center;
  gap: 20px;
}
.fancy-box.style1 .icon {
  width: 60px;
  height: 60px;
  line-height: 60px;
  text-align: center;
  background: var(--theme2);
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
}
.fancy-box.style1 h4 {
  color: var(--title);
  font-family: "Manrope", sans-serif;
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  letter-spacing: -0.54px;
}
.fancy-box.style2 {
  display: flex;
  align-items: center;
  gap: 19px;
  margin-bottom: 30px;
}
.fancy-box.style2 .content {
  max-width: 205px;
}
.fancy-box.style2 .content h4 {
  color: var(--title);
  font-family: "Manrope", sans-serif;
  font-size: 24px;
  font-style: normal;
  font-weight: 600;
  line-height: 34px;
  letter-spacing: -0.48px;
  margin-bottom: 1px;
}
.fancy-box.style2 .content .text {
  color: var(--text);
  font-family: "Manrope", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 28px;
  letter-spacing: -0.32px;
}
.fancy-box.style3 {
  display: flex;
  align-items: center;
  gap: 20px;
}
.fancy-box.style3 .content {
  max-width: 330px;
}
.fancy-box.style3 .content h4 {
  color: var(--title);
  font-family: "Manrope", sans-serif;
  font-size: 20px;
  font-style: normal;
  font-weight: 600;
  line-height: 30px;
  letter-spacing: -0.4px;
  margin-bottom: 3px;
}
.fancy-box.style3 .content .text {
  color: var(--text);
  font-family: "Manrope", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 28px;
  letter-spacing: -0.32px;
}
.fancy-box.style4 {
  padding: 20px 20px 20px 30px;
  border: 1px solid #E5E5E5;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.fancy-box.style4 .content {
  position: relative;
}
.fancy-box.style4 .content h5 {
  color: var(--title);
  font-family: "Manrope", sans-serif;
  font-size: 20px;
  font-style: normal;
  font-weight: 600;
  line-height: 140%;
  text-transform: capitalize;
}
.fancy-box.style4 .content .text {
  color: var(--text);
  font-family: "Manrope", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 130%;
  text-transform: capitalize;
}
.fancy-box.style4 .content:before {
  position: absolute;
  content: "";
  width: 5px;
  height: 5px;
  background-color: #EE332B;
  top: 10px;
  left: -10px;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
}
.fancy-box.style5 {
  padding-left: 24px;
  position: relative;
}
.fancy-box.style5:before {
  position: absolute;
  content: "";
  width: 2px;
  height: 40px;
  top: 5px;
  background-color: #1B1C20;
  margin-left: -30px;
}

.icon-box.style1 {
  width: 70px;
  height: 70px;
  line-height: 70px;
  text-align: center;
  background: linear-gradient(90deg, #AC60E5 0%, #0C87F0 100%);
  border-radius: 8px;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  -ms-border-radius: 8px;
  -o-border-radius: 8px;
}
.icon-box.style2 {
  width: 105px;
  height: 105px;
  line-height: 105px;
  text-align: center;
  background: var(--theme);
  border-radius: 8px;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  -ms-border-radius: 8px;
  -o-border-radius: 8px;
}
.icon-box.style3 {
  width: 70px;
  height: 70px;
  line-height: 70px;
  text-align: center;
  background: linear-gradient(90deg, rgba(172, 96, 229, 0.2509803922) 25%, rgba(12, 135, 240, 0.2509803922) 100%);
  border-radius: 8px;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  -ms-border-radius: 8px;
  -o-border-radius: 8px;
}

.counter-box-wrapper.style3 {
  display: flex;
  align-items: center;
  gap: 60px;
}
@media (max-width: 767px) {
  .counter-box-wrapper.style3 {
    flex-direction: column;
  }
}

@media (max-width: 767px) {
  .counter-box.style1 {
    text-align: center;
  }
}
.counter-box.style1 .counter {
  color: var(--theme);
  font-family: "Manrope", sans-serif;
  font-size: 30px;
  font-style: normal;
  font-weight: 700;
  line-height: 30px;
  letter-spacing: -0.9px;
}
.counter-box.style1 p {
  color: var(--title);
  font-family: "Manrope", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 30px;
}
.counter-box.style3 .counter {
  color: var(--title);
  font-family: "Manrope", sans-serif;
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.48px;
  margin-bottom: 2px;
}
.counter-box.style3 .text {
  color: var(--text);
  font-family: "Manrope", sans-serif;
  font-size: 18px;
  font-style: normal;
  font-weight: 600;
  line-height: 26px;
  letter-spacing: -0.36px;
}

.checklist-wrapper.style1 {
  display: flex;
  align-items: center;
  gap: 40px;
}
@media (max-width: 767px) {
  .checklist-wrapper.style1 {
    flex-direction: column;
    gap: 5px;
  }
}

.checklist.style1 li {
  color: var(--title);
  font-family: "Manrope", sans-serif;
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
  line-height: 28px;
  letter-spacing: -0.36px;
  margin-bottom: 20px;
}
.checklist.style1 li img {
  margin-right: 10px;
}

.contact-meta {
  position: relative;
  display: flex;
  align-items: center;
  gap: 30px;
}
.contact-meta .video-box {
  display: flex;
  align-items: center;
  gap: 10px;
}
.contact-meta .video-box .video-wrap {
  position: relative;
}
.contact-meta .video-box .video-wrap .play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  animation: 6s rippleOne linear infinite;
}
.contact-meta .video-box h4 {
  color: var(--title);
  font-family: "Manrope", sans-serif;
  font-size: 24px;
  font-style: normal;
  font-weight: 400;
  line-height: 35.04px;
}
@media (max-width: 767px) {
  .contact-meta {
    display: flex;
    flex-direction: column;
    align-items: start;
  }
}

.marquee-wrapper {
  position: relative;
  overflow: hidden;
  white-space: nowrap;
  height: 107px;
  padding-top: 24px;
  background: var(--theme);
  z-index: 9;
}
.marquee-wrapper.style-1 {
  background-color: transparent;
  line-height: 55px;
}
@media (max-width: 1399px) {
  .marquee-wrapper.style-1 {
    margin-bottom: 0px;
    margin: 30px 0;
  }
}
@media (max-width: 767px) {
  .marquee-wrapper.style-1 {
    margin-bottom: -50px;
    margin: 0px 0px;
  }
}
.marquee-wrapper.style-1.text-slider {
  height: auto;
}
.marquee-wrapper.style-2 {
  line-height: 55px;
}

.text-slider {
  font-family: var(--title);
  font-size: 48px;
  font-style: normal;
  font-weight: 400;
  line-height: 57.6px;
  color: var(--white);
}
@media (max-width: 767px) {
  .text-slider {
    font-size: 36px;
  }
}
.text-slider img {
  margin-bottom: 10px;
  margin-right: 8px;
  margin-left: 10px;
}

.marquee-inner {
  position: absolute;
  display: inline-flex;
  width: 200%;
}

.marquee-list {
  float: left;
  width: 50%;
}

.marquee-item {
  float: left;
  transition: animation 0.2s ease-out;
}
.marquee-item.style1 .text-style {
  transition: all 0.4s ease-in-out;
  background-image: linear-gradient(var(--theme), var(--theme));
  background-position: 0 95%;
  background-repeat: no-repeat;
  background-size: 0% 2px;
  color: transparent;
  -webkit-text-stroke: 1px #bcb8b1;
  font-family: "Manrope", sans-serif;
  font-size: 80px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  text-transform: uppercase;
}
.marquee-item.style1 .text-style:hover {
  color: var(--theme);
  background-size: 100% 3px;
  opacity: 1;
}
.marquee-item.style-2 .text-slider {
  font-family: var(--title);
  font-size: 48px;
  font-style: normal;
  font-weight: 400;
  line-height: 57.6px;
  color: var(--white);
}
@media (max-width: 767px) {
  .marquee-item.style-2 .text-slider {
    font-size: 36px;
  }
}
.marquee-item.style-2 .text-style {
  transition: all 0.4s ease-in-out;
  background-image: linear-gradient(var(--theme2), var(--theme2));
  background-position: 0 95%;
  background-repeat: no-repeat;
  background-size: 0% 2px;
}
.marquee-item.style-2 .text-style:hover {
  color: var(--theme2);
  background-size: 100% 3px;
  opacity: 0.7;
}

.marquee-inner.to-left {
  animation: marqueeLeft 25s linear infinite;
}

@keyframes marqueeLeft {
  0% {
    left: 0;
  }
  100% {
    left: -100%;
  }
}
.marquee-inner.to-right {
  animation: marqueeRight 25s linear infinite;
}

@keyframes marqueeRight {
  0% {
    right: 0;
  }
  100% {
    right: -100%;
  }
}
.marque-section-2 {
  position: relative;
}

.modal-details .title-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 30px;
  margin-bottom: 30px;
  border-bottom: 1px solid #E5E5E5;
}
.modal-details .title-box .title h3 {
  color: var(--title);
  font-family: "Manrope", sans-serif;
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: 50px;
  text-transform: capitalize;
}
.modal-details .title-box .price {
  color: var(--title);
  font-family: "Manrope", sans-serif;
  font-size: 36px;
  font-style: normal;
  font-weight: 700;
  line-height: 30px;
  text-transform: capitalize;
}
.modal-details .desc p {
  color: var(--text);
  font-family: "Manrope", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 26px;
}

.progress-wrap {
  margin-bottom: 15px;
}
.progress-wrap .progress-meta {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
}
.progress-wrap .progress-meta .title {
  color: var(--title);
  font-family: "Manrope", sans-serif;
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: 130%;
}
.progress-wrap .progress-meta .percentage {
  color: var(--theme);
  font-family: "Manrope", sans-serif;
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: 130%;
}
@media (max-width: 500px) {
  .progress-wrap .progress-meta {
    gap: 210px;
  }
}
@media (max-width: 470px) {
  .progress-wrap .progress-meta {
    gap: 150px;
  }
}
.progress-wrap .progress-container {
  position: relative;
  max-width: 504px;
  height: 7px;
  background-color: #D9DDFF !important;
  border-radius: 10px;
  overflow: visible;
}
.progress-wrap .progress-container .progress-bar {
  height: 7px;
  background-color: var(--theme);
  border-radius: 10px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  z-index: 1;
}
@media (max-width: 575px) {
  .progress-wrap .progress-container {
    width: 85%;
  }
}
.progress-wrap .progress-container.style2:before, .progress-wrap .progress-container.style2:after {
  background-color: var(--theme2);
}

.slider-arrow-button.style2 {
  display: flex;
  align-items: center;
  justify-content: end;
  gap: 20px;
}
@media (max-width: 1199px) {
  .slider-arrow-button.style2 {
    margin-bottom: 30px;
  }
}
.slider-arrow-button.style2 .arrowPrev {
  width: 56px;
  height: 56px;
  line-height: 56px;
  text-align: center;
  border-radius: 8px;
  background: var(--white);
  box-shadow: 0px 4px 20px 0px rgba(52, 55, 170, 0.15);
}
.slider-arrow-button.style2 .arrowNext {
  width: 56px;
  height: 56px;
  line-height: 56px;
  text-align: center;
  border-radius: 8px;
  background: var(--theme);
  color: var(--white);
}

.mouse-cursor {
  position: fixed;
  left: 0;
  top: 0;
  pointer-events: none;
  border-radius: 50%;
  transform: translateZ(0);
  visibility: hidden;
}

.cursor-inner {
  width: 6px;
  height: 6px;
  z-index: 10000001;
  background-color: var(--theme2);
  transition: width 0.3s ease-in-out, height 0.3s ease-in-out, margin 0.3s ease-in-out, opacity 0.3s ease-in-out;
}
.cursor-inner.cursor-hover {
  margin-left: -35px;
  margin-top: -35px;
  width: 70px;
  height: 70px;
  background-color: var(--theme2);
  opacity: 0.3;
}

.cursor-outer {
  margin-left: -12px;
  margin-top: -12px;
  width: 30px;
  height: 30px;
  border: 1px solid var(--theme2);
  box-sizing: border-box;
  z-index: 10000000;
  opacity: 0.5;
  transition: all 0.08s ease-out;
}
.cursor-outer.cursor-hover {
  opacity: 0;
}

.before-after-section .thumb {
  width: 100%;
}
.before-after-section .thumb img {
  width: 100%;
}

.comment-list .comment-item {
  position: relative;
  padding-bottom: 30px;
  margin-bottom: 30px;
  border-bottom: 1px solid var(--border-2);
}
.comment-list .comment-item .post-comment {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.comment-list .comment-item .post-comment .comment-content .name {
  color: var(--title);
  font-family: "Manrope", sans-serif;
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: 30px;
  text-transform: capitalize;
  margin-bottom: 5px;
}
.comment-list .comment-item .post-comment .comment-content .commented-on {
  margin-bottom: 15px;
}
@media (max-width: 575px) {
  .comment-list .comment-item .post-comment .comment-content .commented-on {
    margin-bottom: -10px;
  }
}
.comment-list .comment-item .post-comment .comment-content .star {
  position: absolute;
  top: 15px;
  right: 15px;
}
@media (max-width: 575px) {
  .comment-list .comment-item .post-comment .comment-content .star {
    position: relative;
    margin: 0px 0 25px 12px;
  }
}
@media (max-width: 575px) {
  .comment-list .comment-item .post-comment {
    display: flex;
    flex-direction: column;
  }
}

.star-wrapper.style1 {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.star-wrapper.style1 li {
  color: var(--theme);
}

.profile-meta {
  display: flex;
  align-items: center;
  gap: 20px;
}
.profile-meta .content h6 {
  color: var(--title);
  font-family: "Manrope", sans-serif;
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: 28px;
}
.profile-meta .content p {
  color: var(--text);
  font-family: "Manrope", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 28px;
}

.comment-form {
  margin-top: var(--blog-space-y, 50px);
  padding: 60px;
  position: relative;
  border-radius: 0;
  background: var(--theme2);
  border: 0;
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
}
.comment-form .inner-title {
  color: var(--title);
  font-family: "Manrope", sans-serif;
  font-size: 30px;
  font-style: normal;
  font-weight: 900;
  line-height: 50px;
  text-transform: capitalize;
  margin-bottom: 25px;
}
.comment-form .rating {
  display: flex;
  align-items: center;
  gap: 25px;
  margin-top: 15px;
  margin-bottom: 35px;
}
@media (max-width: 575px) {
  .comment-form {
    padding: 30px;
  }
}

.search-wrap {
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999999;
  background-color: rgba(255, 255, 255, 0.9);
}
.search-wrap .search-inner {
  position: relative;
  width: 100%;
  height: 100%;
}
.search-wrap .search-cell {
  position: absolute;
  top: 50%;
  width: 100%;
  transform: translateY(-50%);
}
.search-wrap .search-field-holder {
  width: 50%;
  margin: auto;
  position: relative;
  animation: slideInUp 0.3s;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .search-wrap .search-field-holder {
    width: 70%;
  }
}
@media (max-width: 575px) {
  .search-wrap .search-field-holder {
    width: 80%;
  }
}
.search-wrap .main-search-input {
  width: 100%;
  height: 70px;
  border: 0;
  padding: 0 50px;
  text-transform: capitalize;
  background: transparent;
  font-size: 25px;
  color: var(--theme);
  border-bottom: 2px solid var(--theme);
  text-align: center;
  letter-spacing: 2px;
}

@media (max-width: 575px) {
  .search-wrap .main-search-input {
    height: 50px;
    padding: 0 0;
    line-height: 50px;
    font-size: 18px;
  }
}
.search-wrap input.form-control,
.search-wrap input.form-control:focus {
  background-color: var(--theme);
}

input.main-search-input::-moz-placeholder {
  color: var(--theme);
  opacity: 1;
  font-size: 25px;
}

input.main-search-input::placeholder {
  color: var(--theme);
  opacity: 1;
  font-size: 25px;
}

@media (max-width: 575px) {
  input.main-search-input::-moz-placeholder {
    font-size: 18px;
  }
  input.main-search-input::placeholder {
    font-size: 18px;
  }
}
.search-close {
  position: absolute;
  top: 50px;
  right: 50px;
  font-size: 30px;
  color: var(--theme);
  cursor: pointer;
}

.inner-section-padding {
  padding: 100px 0;
}
@media (max-width: 1199px) {
  .inner-section-padding {
    padding: 100px 0;
  }
}
@media (max-width: 991px) {
  .inner-section-padding {
    padding: 90px 0;
  }
}
@media (max-width: 575px) {
  .inner-section-padding {
    padding: 80px 0;
  }
}

.section-padding {
  padding: 120px 0;
}
@media (max-width: 1199px) {
  .section-padding {
    padding: 100px 0;
  }
}
@media (max-width: 991px) {
  .section-padding {
    padding: 80px 0;
  }
}
@media (max-width: 575px) {
  .section-padding {
    padding: 60px 0;
  }
}

.section-padding1 {
  padding: 200px 0 110px;
}
@media (max-width: 1199px) {
  .section-padding1 {
    padding: 180px 0 90px;
  }
}
@media (max-width: 991px) {
  .section-padding1 {
    padding: 170px 0 80px;
  }
}

.section-padding2 {
  padding: 110px 0 270px;
}
@media (max-width: 1199px) {
  .section-padding2 {
    padding: 90px 0 240px;
  }
}
@media (max-width: 991px) {
  .section-padding2 {
    padding: 80px 0 230px;
  }
}
@media (max-width: 767px) {
  .section-padding2 {
    padding: 80px 0 190px;
  }
}

.background-image,
[data-bg-src] {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}

.mask-content {
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-size: cover;
  -webkit-mask-size: cover;
  mask-position: center center;
  -webkit-mask-position: center center;
  width: 100%;
}

.gt-social a {
  display: inline-block;
  width: 36px;
  height: 36px;
  line-height: 36px;
  text-align: center;
  background: linear-gradient(90deg, #384BFF 0%, #B42AF3 123.82%);
  color: var(--white);
  margin-right: 5px;
  border: 1px solid rgba(255, 255, 255, 0.8);
  transition: 0.4s ease-in-out;
  -webkit-transition: 0.4s ease-in-out;
  -moz-transition: 0.4s ease-in-out;
  -ms-transition: 0.4s ease-in-out;
  -o-transition: 0.4s ease-in-out;
}
.gt-social a:hover {
  background: var(--white);
  color: var(--theme);
}
.gt-social.style2 a {
  display: inline-block;
  width: 36px;
  height: 36px;
  line-height: 36px;
  text-align: center;
  background: transparent;
  color: var(--white);
  margin-right: 5px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: 0.4s ease-in-out;
  -webkit-transition: 0.4s ease-in-out;
  -moz-transition: 0.4s ease-in-out;
  -ms-transition: 0.4s ease-in-out;
  -o-transition: 0.4s ease-in-out;
}
.gt-social.style2 a:hover {
  background: linear-gradient(90deg, #384BFF 0%, #B42AF3 123.82%);
  color: var(--white);
  border: 1px solid var(--title);
}

/* 13.Header */
/*-----------------------------------------------------------------
Theme Name: Niotech
Author: Gramentheme
Author URI: https://themeforest.net/user/gramentheme
Version: 1.0.0 
Description: Niotech - App Landing HTML Template <

-------------------------------------------------------------------
 CSS TABLE OF CONTENTS
-------------------------------------------------------------------

    01.Mixins
    02.Variables
    03.Typography
    04.Buttons 
    05.Gutter 
    06.Container 
    07.Animation 
    08.Helping 
    09.MeanMenu 
    10.Preloader
    11.Title 
    12.Common 
    13.Header
    14.Breadcumb
    15.Footer
    16.Intro 
    17.Brand 
    18.About
    19.Work Process 
    20.Advantage
    21.Wcu
    22.Counter
    23.Faq
    24.Testimonial
    25.Feature
    26.Pricing 
    27.Cta
    28.Blog
    29.Services
    30.Project 
    31.Team
    32.Team Extra
    33.Sidebar
    34.Contact
    35.Input
    36.Useed Technologies
    37.Policy
------------------------------------------------------------------*/
/* 01.Mixins */
/* 02.Variables */
/* 03.Typography */
/*----------------------------------------------
    # Header style here
----------------------------------------------*/
.header-section-1 {
  position: absolute;
  top: 40px;
  left: 0;
  width: 100%;
  z-index: 150;
}

.header-section-2 {
  position: absolute;
  top: 0px;
  left: 0;
  width: 100%;
  z-index: 150;
}

.header-section-3 {
  position: absolute;
  top: 40px;
  left: 0;
  width: 100%;
  z-index: 150;
}

.main-header-wrapper {
  display: flex;
  align-items: center;
  gap: 100px;
}
@media (max-width: 1899px) {
  .main-header-wrapper {
    gap: 70px;
  }
}
@media (max-width: 1600px) {
  .main-header-wrapper {
    gap: 40px;
  }
}
@media (max-width: 1199px) {
  .main-header-wrapper {
    padding: 15px 0;
  }
}
.main-header-wrapper .main-header-items {
  width: 100%;
}
.main-header-wrapper .main-header-items .header-contact-info-area {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 50px;
  border: 1px solid #D4DCED;
}
@media (max-width: 1600px) {
  .main-header-wrapper .main-header-items .header-contact-info-area {
    padding: 0 30px;
  }
}
@media (max-width: 1199px) {
  .main-header-wrapper .main-header-items .header-contact-info-area {
    display: none;
  }
}
@media (max-width: 575px) {
  .main-header-wrapper .main-header-items .header-contact-info-area {
    gap: 30px;
  }
}
.main-header-wrapper .main-header-items .header-contact-info-area .contact-info-items {
  display: flex;
  align-items: center;
  gap: 20px;
  justify-content: space-between;
  position: relative;
  padding: 30px 0;
  border-right: 1px solid #D4DCED;
  padding-right: 50px;
}
@media (max-width: 1399px) {
  .main-header-wrapper .main-header-items .header-contact-info-area .contact-info-items {
    border-right: none;
    padding-right: 0;
  }
}
.main-header-wrapper .main-header-items .header-contact-info-area .contact-info-items .icon {
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  position: relative;
  background-color: var(--white);
  border-radius: 50%;
  color: var(--theme);
  box-shadow: 0px 4px 25px rgba(0, 0, 0, 0.06);
  position: relative;
}
@media (max-width: 1399px) {
  .main-header-wrapper .main-header-items .header-contact-info-area .contact-info-items .icon {
    width: 30px;
    height: 30px;
    line-height: 30px;
  }
}
.main-header-wrapper .main-header-items .header-contact-info-area .contact-info-items .icon::before {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 64px;
  height: 64px;
  content: "";
  background-color: transparent;
  border-radius: 50%;
  border: 1px solid rgba(30, 32, 35, 0.1);
  transform: translate(-50%, -50%);
}
@media (max-width: 1399px) {
  .main-header-wrapper .main-header-items .header-contact-info-area .contact-info-items .icon::before {
    width: 54px;
    height: 54px;
  }
}
.main-header-wrapper .main-header-items .header-contact-info-area .contact-info-items .content p {
  color: var(--text);
  margin-bottom: 5px;
  text-transform: capitalize;
  font-size: 14px;
  font-weight: 500;
  opacity: 0.7;
}
.main-header-wrapper .main-header-items .header-contact-info-area .contact-info-items .content h3 {
  font-size: 20px;
  color: var(--title);
  text-transform: initial;
}
@media (max-width: 1600px) {
  .main-header-wrapper .main-header-items .header-contact-info-area .contact-info-items .content h3 {
    font-size: 18px;
  }
}
.main-header-wrapper .main-header-items .header-contact-info-area .contact-info-items .content h3 a {
  color: var(--title);
}
.main-header-wrapper .main-header-items .header-contact-info-area .contact-info-items.style-2 {
  border: none;
  padding-right: 0;
}
@media (max-width: 1600px) {
  .main-header-wrapper .main-header-items .header-contact-info-area .header-button .theme-btn {
    font-size: 14px;
    padding: 24px 27px;
  }
}

.header-1 {
  background-color: transparent;
}
.header-1.sticky-bg-dark .header-main .main-menu ul li a {
  color: var(--white) !important;
}
.header-1 .mega-menu-wrapper {
  position: relative;
  z-index: 1;
}
@media (max-width: 470px) {
  .header-1 .mega-menu-wrapper {
    padding: 0 15px;
  }
}
@media (max-width: 450px) {
  .header-1 .mega-menu-wrapper {
    padding: 0;
  }
}
@media (max-width: 1399px) {
  .header-1 .mega-menu-wrapper .header-main {
    gap: 30px;
  }
}
@media (max-width: 450px) {
  .header-1 .mega-menu-wrapper .header-main {
    gap: 0;
  }
  .header-1 .mega-menu-wrapper .header-main .header-logo img {
    max-width: 100%;
  }
}
@media (max-width: 1399px) {
  .header-1 .mega-menu-wrapper .header-main .main-menu ul li {
    margin-inline-end: 15px;
  }
  .header-1 .mega-menu-wrapper .header-main .main-menu ul li a {
    font-size: 14px;
  }
}
@media (max-width: 1899px) {
  .header-1 .mega-menu-wrapper .header-main .main-menu ul li .has-homemenu {
    left: -50px;
  }
}
.header-1 .header-right .header-button {
  margin-left: 25px;
}
@media (max-width: 767px) {
  .header-1 .header-right .header-button {
    display: none;
  }
}
.header-1 .header-right .sidebar__toggle {
  color: var(--white);
  margin-left: 30px;
}
@media (max-width: 1399px) {
  .header-1 .header-right .sidebar__toggle {
    color: var(--theme);
  }
}
.header-1.header-3 {
  background-color: var(--white);
}
.header-1.header-3 .container-fluid {
  padding: 0 225px;
}
@media (max-width: 1899px) {
  .header-1.header-3 .container-fluid {
    padding: 0 60px;
  }
}
@media (max-width: 1600px) {
  .header-1.header-3 .container-fluid {
    padding: 0 50px;
  }
}
@media (max-width: 1399px) {
  .header-1.header-3 .container-fluid {
    padding: 0 40px;
  }
}
@media (max-width: 1199px) {
  .header-1.header-3 .container-fluid {
    padding: 0 30px;
  }
}

.header-2 {
  background-color: transparent;
}
.header-2 .header-main .main-menu ul li a {
  color: var(--white);
}
.header-2 .header-main .main-menu ul li a:hover {
  color: var(--white) !important;
}
.header-2 .header-main .main-menu ul li:hover > a {
  color: var(--white) !important;
}
.header-2.sticky-bg-dark .header-main .main-menu ul li a {
  color: var(--white) !important;
}
.header-2.sticky-bg-dark .header-right .header-contact-info.style2 .content h6 {
  color: var(--white) !important;
}
.header-2.sticky-bg-dark .header-right .header-contact-info.style2 .content h5 a {
  color: var(--white) !important;
}
.header-2.sticky-bg-dark .header-right .search-icon {
  color: var(--white) !important;
}
.header-2.sticky-bg-dark .header-right .header__cart > a {
  color: var(--white) !important;
}
.header-2.sticky-bg-dark .header-right .sidebar__toggle {
  color: var(--white) !important;
}
.header-2.sticky-bg-dark .header-right .sidebar__toggle svg line {
  stroke: var(--white) !important;
}
.header-2 .mega-menu-wrapper {
  position: relative;
  z-index: 9;
}
@media (max-width: 470px) {
  .header-2 .mega-menu-wrapper {
    padding: 0 15px;
  }
}
@media (max-width: 450px) {
  .header-2 .mega-menu-wrapper {
    padding: 0;
  }
}
@media (max-width: 1399px) {
  .header-2 .mega-menu-wrapper .header-main {
    gap: 30px;
  }
}
@media (max-width: 450px) {
  .header-2 .mega-menu-wrapper .header-main {
    gap: 0;
  }
}
@media (max-width: 1399px) {
  .header-2 .mega-menu-wrapper .header-main .main-menu ul li {
    margin-inline-end: 10px;
  }
  .header-2 .mega-menu-wrapper .header-main .main-menu ul li a {
    font-size: 14px;
  }
}
@media (max-width: 1899px) {
  .header-2 .mega-menu-wrapper .header-main .main-menu ul li .has-homemenu {
    left: -50px;
  }
}
.header-2 .header-right {
  gap: 30px !important;
}
.header-2 .header-right .search-icon {
  color: var(--white) !important;
  font-size: 15px;
}
.header-2 .header-right .cart {
  color: var(--white) !important;
  font-size: 15px;
}
@media (max-width: 1399px) {
  .header-2 .header-right {
    gap: 10px !important;
  }
}
@media (max-width: 450px) {
  .header-2 .header-right {
    gap: 5px !important;
  }
}
.header-2 .header-right .header-button {
  margin-left: 25px;
}
@media (max-width: 767px) {
  .header-2 .header-right .header-button {
    display: none;
  }
}
.header-2 .header-right .header-contact-info.style2 {
  display: flex;
  align-items: center;
  gap: 15px;
}
.header-2 .header-right .header-contact-info.style2 .icon {
  width: 48px;
  height: 48px;
  line-height: 48px;
  text-align: center;
  background: var(--theme);
}
.header-2 .header-right .header-contact-info.style2 .content h6 {
  color: var(--title);
  font-family: "Manrope", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  margin-bottom: 7px;
}
.header-2 .header-right .header-contact-info.style2 .content h5 a {
  color: var(--title);
  font-family: "Manrope", sans-serif;
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}
@media (max-width: 1399px) {
  .header-2 .header-right .header-contact-info.style2 {
    display: none;
  }
}
@media (max-width: 767px) {
  .header-2 .header-right .search-icon {
    display: none;
  }
}
@media (max-width: 767px) {
  .header-2 .header-right .header__cart {
    display: none;
  }
}
.header-2 .header-right .sidebar__toggle {
  color: var(--white);
  margin-left: 30px;
}
@media (max-width: 1399px) {
  .header-2 .header-right .sidebar__toggle {
    color: var(--white);
  }
}

.header-3 .header-right .search-icon {
  margin-left: 30px;
}
@media (max-width: 1399px) {
  .header-3 .header-right .search-icon {
    margin-left: 10px;
  }
}

.header-right {
  gap: 30px;
}
@media (max-width: 1399px) {
  .header-right {
    gap: 20px;
  }
}
@media (max-width: 767px) {
  .header-right {
    gap: 5px;
  }
  .header-right .theme-btn {
    display: none;
  }
}
.header-right .search-icon {
  color: var(--text);
  font-size: 18px;
}
.header-right .header__cart {
  padding: 0 8px;
  position: relative;
  display: flex;
  align-items: center;
  height: 100%;
}
@media (max-width: 991px) {
  .header-right .header__cart {
    padding: 0px 10px;
  }
}
.header-right .header__cart:hover > a {
  color: var(--theme);
}
.header-right .header__cart:hover .header__right__dropdown__wrapper {
  visibility: visible;
  opacity: 1;
  top: 100%;
  transition: 0.3s;
}
.header-right .header__cart > a {
  font-size: 18px;
  color: var(--text);
  padding: 15px 0;
  position: relative;
}
.header-right .header__cart > a::before {
  font-size: 10px;
  font-weight: 500;
  line-height: 15px;
  position: absolute;
  top: 0;
  right: -10px;
  width: 15px;
  height: 15px;
  padding: 0 4px;
  content: "3";
  text-align: center;
  border-radius: 100%;
  background: var(--theme);
  color: var(--white);
}
@media (max-width: 991px) {
  .header-right .header__cart > a::before {
    top: 7px;
    right: 11px;
  }
}
.header-right .header__cart .header__right__dropdown__wrapper {
  position: absolute;
  width: 300px;
  max-height: 700px;
  padding: 20px;
  border-bottom: 3px solid var(--border);
  background-color: var(--white);
  box-shadow: 0 0 50px 10px rgba(95, 45, 237, 0.15);
  top: 100%;
  left: -235px;
  opacity: 0;
  visibility: hidden;
  z-index: 999;
}
@media (max-width: 767px) {
  .header-right .header__cart .header__right__dropdown__wrapper {
    left: -220px;
  }
}
.header-right .header__cart .header__right__dropdown__wrapper .header__right__dropdown__close {
  position: absolute;
  right: 0;
  top: -10px;
}
.header-right .header__cart .header__right__dropdown__wrapper .header__right__dropdown__close a :hover {
  color: var(--theme2);
}
.header-right .header__cart .header__right__dropdown__wrapper .header__right__dropdown__inner {
  border-bottom: 1px solid var(--border-2);
  margin-bottom: 30px;
}
.header-right .header__cart .header__right__dropdown__wrapper .header__right__dropdown__inner .single__header__right__dropdown {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
  position: relative;
}
.header-right .header__cart .header__right__dropdown__wrapper .header__right__dropdown__inner .single__header__right__dropdown .header__right__dropdown__img {
  width: 30%;
}
.header-right .header__cart .header__right__dropdown__wrapper .header__right__dropdown__inner .single__header__right__dropdown .header__right__dropdown__img a {
  display: inline-block;
  border-radius: 16px;
  -webkit-border-radius: 16px;
  -moz-border-radius: 16px;
  -ms-border-radius: 16px;
  -o-border-radius: 16px;
}
.header-right .header__cart .header__right__dropdown__wrapper .header__right__dropdown__inner .single__header__right__dropdown .header__right__dropdown__img img {
  width: 100%;
  border-radius: 16px;
  -webkit-border-radius: 16px;
  -moz-border-radius: 16px;
  -ms-border-radius: 16px;
  -o-border-radius: 16px;
}
.header-right .header__cart .header__right__dropdown__wrapper .header__right__dropdown__inner .single__header__right__dropdown .header__right__dropdown__content {
  text-align: left;
  width: 70%;
  margin-left: 15px;
}
.header-right .header__cart .header__right__dropdown__wrapper .header__right__dropdown__inner .single__header__right__dropdown .header__right__dropdown__content a {
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  color: var(--title);
}
.header-right .header__cart .header__right__dropdown__wrapper .header__right__dropdown__inner .single__header__right__dropdown .header__right__dropdown__content a:hover {
  color: var(--theme2);
}
.header-right .header__cart .header__right__dropdown__wrapper .header__right__dropdown__inner .single__header__right__dropdown .header__right__dropdown__content p {
  color: var(--title);
  font-size: 14px;
}
.header-right .header__cart .header__right__dropdown__wrapper .header__right__dropdown__inner .single__header__right__dropdown .header__right__dropdown__content p span {
  color: var(--theme);
}
.header-right .header__cart .header__right__dropdown__wrapper .dropdown__price {
  text-align: left;
  font-size: 17px;
  margin-bottom: 20px;
}
.header-right .header__cart .header__right__dropdown__wrapper .dropdown__price span {
  float: right;
  color: var(--theme);
  font-weight: 700;
}
.header-right .header__cart .header__right__dropdown__wrapper .header__right__dropdown__button a {
  display: block;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  width: 100%;
  padding: 10px 0px;
}
.header-right .header__cart .header__right__dropdown__wrapper .header__right__dropdown__button a.white__color {
  border: 1px solid var(--theme2);
  margin-bottom: 20px;
}
.header-right .header__cart .header__right__dropdown__wrapper .header__right__dropdown__button a.white__color:hover {
  background: var(--theme2);
  color: var(--white);
}
.header-right .header__cart .header__right__dropdown__wrapper .header__right__dropdown__button a.blue__color {
  background: var(--title);
  color: var(--white);
}
.header-right .header__cart .header__right__dropdown__wrapper .header__right__dropdown__button a.blue__color:hover {
  background: var(--theme2);
}

.sidebar__toggle {
  cursor: pointer;
  font-size: 20px;
  color: var(--text);
}

@media (max-width: 1199px) {
  .menu-thumb {
    display: none !important;
  }
}

.header-main {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 0;
  z-index: 99;
}
@media (max-width: 1899px) {
  .header-main {
    padding: 20px 10px;
  }
}
.header-main .main-menu ul {
  margin-bottom: 0;
}
.header-main .main-menu ul li {
  position: relative;
  list-style: none;
  display: inline-block;
  margin-inline-end: 55px;
}
@media (max-width: 1899px) {
  .header-main .main-menu ul li {
    margin-inline-end: 25px;
  }
}
.header-main .main-menu ul li:last-child {
  margin-inline-end: 0;
}
.header-main .main-menu ul li a {
  display: inline-block;
  padding: 20px 0;
  text-align: left;
  position: relative;
  color: var(--title);
  font-family: "Manrope", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  transition: all 0.4s ease-in-out;
}
@media (max-width: 1399px) {
  .header-main .main-menu ul li a {
    letter-spacing: 1px;
  }
}
.header-main .main-menu ul li a i {
  margin-left: 7px;
}
.header-main .main-menu ul li a:hover, .header-main .main-menu ul li a.active {
  color: var(--title) !important;
}
.header-main .main-menu ul li .submenu {
  position: absolute;
  top: 113%;
  inset-inline-start: 0;
  width: -moz-max-content;
  width: max-content;
  background: var(--white);
  z-index: 99999;
  visibility: hidden;
  opacity: 0;
  transform-origin: top center;
  color: var(--title);
  border-top: 6px solid var(--theme);
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
  transition: all 0.4s ease-in-out;
  transform: translateY(10px);
  -webkit-transform: translateY(10px);
  -moz-transform: translateY(10px);
  -ms-transform: translateY(10px);
  -o-transform: translateY(10px);
}
.header-main .main-menu ul li .submenu li {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
}
.header-main .main-menu ul li .submenu li a {
  position: relative;
  z-index: 999;
  color: var(--title);
  font-family: "Manrope", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  text-transform: capitalize;
  color: var(--title);
  padding: 0 25px;
  padding-bottom: 11px;
  padding-top: 11px;
  width: 100%;
  border-bottom: 1px solid #eeeeee;
}
.header-main .main-menu ul li .submenu li a.active, .header-main .main-menu ul li .submenu li a:hover {
  background-color: var(--theme2);
  color: var(--title) !important;
}
.header-main .main-menu ul li .submenu li:last-child a {
  border: none;
}
.header-main .main-menu ul li .submenu li .submenu {
  inset-inline-start: 100%;
  top: 0;
  visibility: hidden;
  opacity: 0;
}
.header-main .main-menu ul li .submenu li:hover > a {
  background: var(--theme2);
  color: var(--theme) !important;
  padding: 11px 35px;
}
.header-main .main-menu ul li .submenu li:hover > a::after {
  color: var(--theme2);
}
.header-main .main-menu ul li .submenu li:hover > .submenu {
  visibility: visible;
  opacity: 1;
}
.header-main .main-menu ul li .submenu li.has-dropdown > a::after {
  position: absolute;
  top: 50%;
  inset-inline-end: 25px;
  transform: translateY(-50%);
  color: var(--theme);
}
.header-main .main-menu ul li .has-homemenu {
  width: 800px;
  padding: 30px 30px 10px 30px;
  opacity: 0;
  left: -100px;
  visibility: hidden;
  padding: 30px 30px 10px 30px;
}
.header-main .main-menu ul li .has-homemenu .homemenu-items {
  position: relative;
  z-index: 99999;
  display: flex;
  align-items: center;
  gap: 30px;
  justify-content: space-between;
}
@media (max-width: 991px) {
  .header-main .main-menu ul li .has-homemenu .homemenu-items {
    flex-wrap: wrap;
  }
}
.header-main .main-menu ul li .has-homemenu .homemenu-items .homemenu {
  position: relative;
}
.header-main .main-menu ul li .has-homemenu .homemenu-items .homemenu .homemenu-thumb {
  position: relative;
}
.header-main .main-menu ul li .has-homemenu .homemenu-items .homemenu .homemenu-thumb .demo-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 70%;
  gap: 10px;
  display: flex;
  justify-content: center;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s ease-in-out;
  margin-top: 20px;
}
.header-main .main-menu ul li .has-homemenu .homemenu-items .homemenu .homemenu-thumb .demo-button .theme-btn {
  padding: 14px 20px;
  color: var(--white) !important;
  width: initial;
  font-size: 14px;
  text-align: center;
  border-radius: 0px !important;
  background-color: var(--theme);
}
.header-main .main-menu ul li .has-homemenu .homemenu-items .homemenu .homemenu-thumb .demo-button .theme-btn:hover {
  color: var(--title) !important;
}
.header-main .main-menu ul li .has-homemenu .homemenu-items .homemenu .homemenu-thumb .demo-button .theme-btn:hover::before {
  background-color: var(--theme2);
}
.header-main .main-menu ul li .has-homemenu .homemenu-items .homemenu .homemenu-thumb::before {
  background: linear-gradient(to bottom, rgba(99, 92, 92, 0) 0%, #252527 100%);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  overflow: hidden;
  opacity: 0;
  transition: all 0.3s ease-in-out;
  content: "";
}
.header-main .main-menu ul li .has-homemenu .homemenu-items .homemenu .homemenu-thumb:hover::before {
  visibility: visible;
  opacity: 1;
}
.header-main .main-menu ul li .has-homemenu .homemenu-items .homemenu .homemenu-thumb:hover .demo-button {
  opacity: 1;
  visibility: visible;
  margin-top: 0;
}
.header-main .main-menu ul li .has-homemenu .homemenu-items .homemenu .homemenu-thumb:hover .homemenu-btn {
  opacity: 1;
  visibility: visible;
  bottom: 50%;
  transform: translateY(50%);
}
.header-main .main-menu ul li .has-homemenu .homemenu-items .homemenu .homemenu-thumb img {
  width: 100%;
}
.header-main .main-menu ul li .has-homemenu .homemenu-items .homemenu .homemenu-title {
  text-align: center;
  margin: 15px auto;
  display: inline-block;
  font-size: 16px;
}
.header-main .main-menu ul li:hover > a {
  color: var(--title);
}
.header-main .main-menu ul li:hover > a::after {
  color: var(--theme);
}
.header-main .main-menu ul li:hover > .submenu {
  visibility: visible;
  opacity: 1;
  transform: translateY(10px);
  -webkit-transform: translateY(10px);
  -moz-transform: translateY(10px);
  -ms-transform: translateY(10px);
  -o-transform: translateY(10px);
}
.header-main .header-right {
  gap: 30px;
}
@media (max-width: 1399px) {
  .header-main .header-right {
    gap: 20px;
  }
}
.header-main .header-right .search-icon {
  color: var(--title);
  font-size: 18px;
}
@media (max-width: 767px) {
  .header-main .header-right .search-icon {
    display: none;
  }
}
@media (max-width: 767px) {
  .header-main .header-right .cart {
    display: none;
  }
}
.header-main .sidebar__toggle {
  cursor: pointer;
  font-size: 20px;
  color: var(--title);
}

.sticky {
  position: fixed !important;
  top: 0 !important;
  left: 0;
  width: 100%;
  z-index: 999;
  transition: all 0.9s;
  background-color: var(--white);
  box-shadow: var(--box-shadow);
  animation: 500ms ease-in-out 0s normal none 1 running fadeInDown;
}
.sticky.sticky-bg-dark {
  background-color: #161921;
}
.sticky.sticky-bg-dark .header-main .main-menu ul li a {
  color: var(--white) !important;
}
.sticky.header-1 {
  padding: 0 10px;
}
.sticky.header-1 .logo {
  display: block;
}
.sticky.header-1 .header-main .main-menu ul li .submenu li a {
  color: var(--title);
}
.sticky.header-1 .header-main .main-menu ul li a {
  color: var(--title);
}
.sticky.header-1 .header-main .main-menu ul li a.active, .sticky.header-1 .header-main .main-menu ul li a:hover {
  color: var(--title) !important;
}
@media (max-width: 450px) {
  .sticky.header-1 {
    padding: 0;
  }
}
.sticky.header-2 {
  padding: 0 10px;
  background-color: #2b00a5;
}
.sticky.header-2 .logo {
  display: block;
}
.sticky.header-2 .header-main .main-menu ul li .submenu li a {
  color: var(--title) !important;
}
.sticky.header-2 .header-main .main-menu ul li a {
  color: var(--white) !important;
}
.sticky.header-2 .header-main .main-menu ul li a.active, .sticky.header-2 .header-main .main-menu ul li a:hover {
  color: var(--white) !important;
}
@media (max-width: 450px) {
  .sticky.header-2 {
    padding: 0;
  }
}
.sticky.header-2 .theme-btn {
  background: var(--white);
  color: var(--title);
}
.sticky.header-3 {
  padding: 0 10px;
}
.sticky.header-3 .logo {
  display: block;
}
.sticky.header-3 .header-main .main-menu ul li .submenu li a {
  color: var(--title);
}
.sticky.header-3 .header-main .main-menu ul li a {
  color: var(--title);
}
.sticky.header-3 .header-main .main-menu ul li a.active, .sticky.header-3 .header-main .main-menu ul li a:hover {
  color: var(--title) !important;
}
@media (max-width: 450px) {
  .sticky.header-3 {
    padding: 0;
  }
}

.offcanvas__info {
  background: var(--title) none repeat scroll 0 0;
  border-left: 2px solid var(--theme);
  position: fixed;
  right: 0;
  top: 0;
  width: 400px;
  height: 100%;
  transform: translateX(calc(100% + 80px));
  transition: transform 0.45s ease-in-out, opacity 0.45s ease-in-out;
  z-index: 99999;
  overflow-y: scroll;
  overscroll-behavior-y: contain;
  scrollbar-width: none;
}
.offcanvas__info::-webkit-scrollbar {
  display: none;
}

.offcanvas__info.info-open {
  opacity: 1;
  transform: translateX(0);
}

.offcanvas__logo a img {
  width: 150px;
}

.offcanvas__wrapper {
  position: relative;
  height: 133vh;
  padding: 30px 30px;
  background-color: var(--bg-1);
}
.offcanvas__wrapper .offcanvas__content .text {
  color: var(--white);
}
.offcanvas__wrapper .offcanvas__content .offcanvas__close {
  width: 45px;
  height: 45px;
  line-height: 45px;
  text-align: center;
  border-radius: 50%;
  background-color: var(--theme);
  position: relative;
  z-index: 9;
  cursor: pointer;
}
.offcanvas__wrapper .offcanvas__content .offcanvas__close i {
  color: var(--white);
}
.offcanvas__wrapper .offcanvas__content .offcanvas__contact {
  margin-top: 20px;
}
.offcanvas__wrapper .offcanvas__content .offcanvas__contact h4 {
  color: var(--theme2);
}
.offcanvas__wrapper .offcanvas__content .offcanvas__contact ul {
  margin-top: 20px;
}
.offcanvas__wrapper .offcanvas__content .offcanvas__contact ul li {
  font-size: 16px;
  font-weight: 600;
  text-transform: capitalize;
}
.offcanvas__wrapper .offcanvas__content .offcanvas__contact ul li a {
  color: var(--white);
}
.offcanvas__wrapper .offcanvas__content .offcanvas__contact ul li:not(:last-child) {
  margin-bottom: 15px;
}
.offcanvas__wrapper .offcanvas__content .offcanvas__contact ul li .offcanvas__contact-icon {
  margin-right: 20px;
}
.offcanvas__wrapper .offcanvas__content .offcanvas__contact ul li .offcanvas__contact-icon i {
  color: var(--theme2);
}
.offcanvas__wrapper .offcanvas__content .offcanvas__contact span {
  text-transform: initial;
}
.offcanvas__wrapper .offcanvas__content .offcanvas__contact .header-button .theme-btn {
  width: 100%;
  padding: 16px 40px;
  text-transform: capitalize !important;
}
.offcanvas__wrapper .offcanvas__content .offcanvas__contact .social-icon {
  margin-top: 30px;
  gap: 10px;
}
.offcanvas__wrapper .offcanvas__content .offcanvas__contact .social-icon a {
  width: 45px;
  height: 45px;
  line-height: 45px;
  text-align: center;
  font-size: 16px;
  display: block;
  background: var(--theme);
  color: var(--white);
  border-radius: 50%;
  transition: all 0.4s ease-in-out;
  text-align: center;
  border: 1px solid var(--border);
}
.offcanvas__wrapper .offcanvas__content .offcanvas__contact .social-icon a:hover {
  background-color: var(--theme2);
  color: var(--title) !important;
}

.offcanvas__overlay {
  position: fixed;
  height: 100%;
  width: 100%;
  background: #151515;
  z-index: 900;
  top: 0;
  opacity: 0;
  visibility: hidden;
  right: 0;
}

.offcanvas__overlay.overlay-open {
  opacity: 0.8;
  visibility: visible;
}

@media (max-width: 450px) {
  .offcanvas__info {
    width: 300px;
  }
}
@media (max-width: 575px) {
  .offcanvas__wrapper {
    padding: 20px;
  }
}
.breadcrumb-wrapper {
  position: relative;
  overflow: hidden;
  z-index: 9;
  padding-top: 150px;
  padding-bottom: 50px;
}
.breadcrumb-wrapper::before {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  content: "";
  z-index: -1;
  background: var(--theme);
}
.breadcrumb-wrapper .shape-image {
  position: absolute;
  right: 0;
  bottom: 10%;
}
@media (max-width: 991px) {
  .breadcrumb-wrapper .shape-image {
    display: none;
  }
}
.breadcrumb-wrapper .page-heading {
  position: relative;
  display: flex;
  align-items: end;
  justify-content: space-between;
}
.breadcrumb-wrapper .page-heading .shape {
  position: absolute;
  top: 0px;
  right: 180px;
  animation: float-bob-x 5s linear infinite;
  -webkit-animation: float-bob-x 5s linear infinite;
}
.breadcrumb-wrapper .page-heading .title .title-heading {
  display: inline-block;
  padding: 8px 24px;
  background-color: var(--theme2);
  color: var(--title);
  font-family: "Manrope", sans-serif;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
  margin-bottom: 20px;
  border-radius: 60px;
  transform: rotate(-20deg);
  -webkit-border-radius: 60px;
  -moz-border-radius: 60px;
  -ms-border-radius: 60px;
  -o-border-radius: 60px;
  -webkit-transform: rotate(-20deg);
  -moz-transform: rotate(-20deg);
  -ms-transform: rotate(-20deg);
  -o-transform: rotate(-20deg);
}
.breadcrumb-wrapper .page-heading h1 {
  color: var(--white);
  color: var(--theme2);
  font-family: "Manrope", sans-serif;
  font-size: 40px;
  font-style: normal;
  font-weight: 700;
  line-height: 120%;
  max-width: 528px;
}
@media (max-width: 991px) {
  .breadcrumb-wrapper .page-heading h1 {
    font-size: 60px;
  }
}
@media (max-width: 575px) {
  .breadcrumb-wrapper .page-heading h1 {
    font-size: 42px;
  }
}
.breadcrumb-wrapper .page-heading .breadcrumb-items {
  display: flex;
  align-items: center;
  margin-top: 20px;
  gap: 10px;
}
@media (max-width: 575px) {
  .breadcrumb-wrapper .page-heading .breadcrumb-items {
    margin-top: 15px;
  }
}
.breadcrumb-wrapper .page-heading .breadcrumb-items li {
  color: var(--theme2);
  text-transform: capitalize;
  font-weight: 500;
  font-size: 18px;
}
.breadcrumb-wrapper .page-heading .breadcrumb-items li a {
  color: var(--white);
  transition: all 0.4s ease-in-out;
}
.breadcrumb-wrapper .page-heading .breadcrumb-items li a:hover {
  color: var(--theme);
}
.breadcrumb-wrapper .page-heading .breadcrumb-items li i {
  color: var(--white);
  opacity: 0.8;
}
@media (max-width: 991px) {
  .breadcrumb-wrapper .page-heading {
    display: block;
  }
  .breadcrumb-wrapper .page-heading h1 {
    max-width: 100%;
  }
}
.breadcrumb-wrapper .breadcrumb-wrapper-items {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
@media (max-width: 991px) {
  .breadcrumb-wrapper .breadcrumb-wrapper-items {
    flex-wrap: wrap;
  }
}
.breadcrumb-wrapper .breadcrumb-wrapper-items .breadcrumb-image {
  position: relative;
  height: 380px;
  margin-bottom: -50px;
}
@media (max-width: 991px) {
  .breadcrumb-wrapper .breadcrumb-wrapper-items .breadcrumb-image {
    margin-bottom: 0;
  }
  .breadcrumb-wrapper .breadcrumb-wrapper-items .breadcrumb-image img {
    width: 100%;
    height: 100%;
  }
}
.breadcrumb-wrapper .breadcrumb-wrapper-items .breadcrumb-image .bar-shape {
  position: absolute;
  top: -60px;
  bottom: 0;
  left: -27%;
  z-index: -1;
}
@media (max-width: 991px) {
  .breadcrumb-wrapper .breadcrumb-wrapper-items .breadcrumb-image .bar-shape {
    display: none;
  }
}
.breadcrumb-wrapper .breadcrumb-wrapper-items .breadcrumb-image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.error-wrapper {
  position: relative;
}
.error-wrapper .shape1 {
  position: absolute;
  top: 60%;
  left: 10%;
  z-index: 1;
}
.error-wrapper .shape2 {
  position: absolute;
  top: 10%;
  right: 8%;
  z-index: 1;
}
.error-wrapper .error-items h1 {
  color: var(--title);
  text-align: center;
  font-family: "Manrope", sans-serif;
  font-size: 48px;
  font-style: normal;
  font-weight: 700;
  line-height: 120%;
  margin-top: 15px;
  margin-bottom: 15px;
}
.error-wrapper .error-items p {
  color: var(--text);
  text-align: center;
  font-family: "Manrope", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 300;
  line-height: 150%;
  margin-bottom: 30px;
}
.error-wrapper .error-items .btn-wrapper {
  text-align: center;
  max-width: 160px;
  margin: 0 auto;
}

/* 14.Breadcumb */
/*-----------------------------------------------------------------
Theme Name: Niotech
Author: Gramentheme
Author URI: https://themeforest.net/user/gramentheme
Version: 1.0.0 
Description: Niotech - App Landing HTML Template <

-------------------------------------------------------------------
 CSS TABLE OF CONTENTS
-------------------------------------------------------------------

    01.Mixins
    02.Variables
    03.Typography
    04.Buttons 
    05.Gutter 
    06.Container 
    07.Animation 
    08.Helping 
    09.MeanMenu 
    10.Preloader
    11.Title 
    12.Common 
    13.Header
    14.Breadcumb
    15.Footer
    16.Intro 
    17.Brand 
    18.About
    19.Work Process 
    20.Advantage
    21.Wcu
    22.Counter
    23.Faq
    24.Testimonial
    25.Feature
    26.Pricing 
    27.Cta
    28.Blog
    29.Services
    30.Project 
    31.Team
    32.Team Extra
    33.Sidebar
    34.Contact
    35.Input
    36.Useed Technologies
    37.Policy
------------------------------------------------------------------*/
/* 01.Mixins */
/* 02.Variables */
/* 03.Typography */
.breadcumb-container-wrapper {
  padding: 250px 0 170px;
  background-color: var(--theme3);
  position: relative;
  overflow: hidden;
}
.breadcumb-container-wrapper .shape1 {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 1;
}
@media (max-width: 991px) {
  .breadcumb-container-wrapper .shape1 {
    display: none;
  }
}
.breadcumb-container-wrapper .shape2 {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
}
@media (max-width: 991px) {
  .breadcumb-container-wrapper .shape2 {
    display: none;
  }
}
.breadcumb-container-wrapper .breadcumb-wrapper {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (max-width: 991px) {
  .breadcumb-container-wrapper .breadcumb-wrapper {
    justify-content: center;
  }
}
.breadcumb-container-wrapper .breadcumb-wrapper .page-heading {
  text-align: center;
}
.breadcumb-container-wrapper .breadcumb-wrapper .page-heading h1 {
  color: var(--title);
  text-align: center;
  font-family: "Manrope", sans-serif;
  font-size: 48px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  letter-spacing: -0.96px;
  margin-bottom: 10px;
}
@media (max-width: 991px) {
  .breadcumb-container-wrapper .breadcumb-wrapper .page-heading h1 {
    font-size: 40px;
  }
}
.breadcumb-container-wrapper .breadcumb-wrapper .page-heading .links {
  color: var(--theme);
  font-family: "Manrope", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 28px;
  letter-spacing: -0.32px;
}
.breadcumb-container-wrapper .breadcumb-wrapper .page-heading .links .slash {
  margin: 0 5px;
}

/* 15.Footer */
/*-----------------------------------------------------------------
Theme Name: Niotech
Author: Gramentheme
Author URI: https://themeforest.net/user/gramentheme
Version: 1.0.0 
Description: Niotech - App Landing HTML Template <

-------------------------------------------------------------------
 CSS TABLE OF CONTENTS
-------------------------------------------------------------------

    01.Mixins
    02.Variables
    03.Typography
    04.Buttons 
    05.Gutter 
    06.Container 
    07.Animation 
    08.Helping 
    09.MeanMenu 
    10.Preloader
    11.Title 
    12.Common 
    13.Header
    14.Breadcumb
    15.Footer
    16.Intro 
    17.Brand 
    18.About
    19.Work Process 
    20.Advantage
    21.Wcu
    22.Counter
    23.Faq
    24.Testimonial
    25.Feature
    26.Pricing 
    27.Cta
    28.Blog
    29.Services
    30.Project 
    31.Team
    32.Team Extra
    33.Sidebar
    34.Contact
    35.Input
    36.Useed Technologies
    37.Policy
------------------------------------------------------------------*/
/* 01.Mixins */
/* 02.Variables */
/* 03.Typography */
/*----------------------------------------------
    # Footer style here
----------------------------------------------*/
.footer-top {
  padding: 50px 50px;
  background: var(--theme);
  margin-bottom: 40px;
}
.footer-top .fancy-box {
  display: flex;
  align-items: center;
  gap: 15px;
}
.footer-top .fancy-box .item1 i {
  width: 39px;
  height: 39px;
  line-height: 39px;
  text-align: center;
  background: var(--white);
  color: var(--theme);
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
}
.footer-top .fancy-box .item2 h6 {
  color: var(--white);
  font-family: "Manrope", sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  text-transform: capitalize;
  margin-bottom: 10px;
}
.footer-top .fancy-box .item2 p {
  color: var(--white);
  font-family: "Manrope", sans-serif;
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}

.footer-thumb {
  position: absolute;
  bottom: 0px;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  opacity: 0.2;
}

.footer-thumb3 {
  position: absolute;
  bottom: 0px;
  right: 0;
  z-index: 1;
  opacity: 0.5;
}

.footer-widgets-wrapper {
  padding: 220px 0 60px;
  position: relative;
  z-index: 9;
}
.footer-widgets-wrapper .single-footer-widget {
  margin-top: 30px;
}
.footer-widgets-wrapper .single-footer-widget .widget-head {
  margin-bottom: 30px;
}
@media (max-width: 575px) {
  .footer-widgets-wrapper .single-footer-widget .widget-head {
    margin-bottom: 20px;
  }
}
.footer-widgets-wrapper .single-footer-widget .widget-head h3 {
  color: var(--white);
  font-family: "Manrope", sans-serif;
  font-size: 20px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  display: inline-block;
  position: relative;
  padding-bottom: 20px;
}
.footer-widgets-wrapper .single-footer-widget .widget-head h3::before {
  position: absolute;
  bottom: 0;
  left: 0;
  content: "";
  width: 25px;
  height: 2px;
  background-color: #7444FD;
}
.footer-widgets-wrapper .single-footer-widget .widget-head h3::after {
  position: absolute;
  bottom: 0;
  left: 40px;
  content: "";
  width: 55px;
  height: 2px;
  background-color: #C2C2C2;
}
@media (max-width: 767px) {
  .footer-widgets-wrapper .single-footer-widget .widget-head h3 {
    font-size: 23px;
  }
}
@media (max-width: 575px) {
  .footer-widgets-wrapper .single-footer-widget .widget-head h3 {
    font-size: 20px;
  }
}
.footer-widgets-wrapper .single-footer-widget .widget-head h4 {
  font-weight: bold;
  color: var(--white);
  font-size: 24px;
  display: inline-block;
}
.footer-widgets-wrapper .single-footer-widget .widget-head .footer-input {
  position: relative;
}
.footer-widgets-wrapper .single-footer-widget .widget-head .footer-input input {
  background: transparent;
  border: none;
  outline: none;
  width: 100%;
  color: rgba(255, 255, 255, 0.69);
  border-bottom: 1px solid rgba(255, 255, 255, 0.55);
  padding-bottom: 20px;
}
.footer-widgets-wrapper .single-footer-widget .widget-head .footer-input input::-moz-placeholder {
  color: rgba(255, 255, 255, 0.69);
}
.footer-widgets-wrapper .single-footer-widget .widget-head .footer-input input::placeholder {
  color: rgba(255, 255, 255, 0.69);
}
.footer-widgets-wrapper .single-footer-widget .widget-head .footer-input .newsletter-btn {
  position: absolute;
  top: 10px;
  right: 0;
  color: var(--white);
}
.footer-widgets-wrapper .single-footer-widget .widget-head .footer-input .newsletter-btn i {
  font-size: 22px;
  transform: rotate(-40deg);
}
.footer-widgets-wrapper .single-footer-widget .footer-content p {
  color: rgba(255, 255, 255, 0.85);
}
.footer-widgets-wrapper .single-footer-widget .footer-content .social-icon {
  margin-top: 40px;
  gap: 10px;
  position: relative;
  z-index: 9;
}
@media (max-width: 575px) {
  .footer-widgets-wrapper .single-footer-widget .footer-content .social-icon {
    margin-top: 20px;
  }
}
.footer-widgets-wrapper .single-footer-widget .footer-content .social-icon a {
  width: 36px;
  height: 36px;
  line-height: 36px;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background-color: transparent;
  color: var(--white);
}
.footer-widgets-wrapper .single-footer-widget .footer-content .social-icon a:hover {
  background-color: var(--theme2);
  color: var(--title) !important;
}
.footer-widgets-wrapper .single-footer-widget .footer-content .social-icon.style2 a {
  border: none;
  background-color: transparent;
  color: var(--white);
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
}
.footer-widgets-wrapper .single-footer-widget .footer-content .social-icon.style2 a:hover {
  background-color: var(--theme);
  color: var(--white) !important;
}
.footer-widgets-wrapper .single-footer-widget .footer-content .footer-input {
  position: relative;
  margin-top: 40px;
}
.footer-widgets-wrapper .single-footer-widget .footer-content .footer-input input {
  background: transparent;
  border: none;
  outline: none;
  padding: 18px 20px;
  width: 100%;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: rgba(255, 255, 255, 0.8);
}
.footer-widgets-wrapper .single-footer-widget .footer-content .footer-input input::-moz-placeholder {
  color: rgba(255, 255, 255, 0.8);
}
.footer-widgets-wrapper .single-footer-widget .footer-content .footer-input input::placeholder {
  color: rgba(255, 255, 255, 0.8);
}
.footer-widgets-wrapper .single-footer-widget .footer-content .footer-input .newsletter-btn {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 60px;
  height: 55px;
  line-height: 60px;
  border-radius: 8px;
  text-align: center;
  background-color: var(--theme);
  color: var(--white);
  bottom: 5px;
}
.footer-widgets-wrapper .single-footer-widget .footer-content .footer-input .newsletter-btn i {
  font-size: 24px;
}
.footer-widgets-wrapper .single-footer-widget .list-area li {
  transition: all 0.4s ease-in-out;
  font-weight: 500;
}
.footer-widgets-wrapper .single-footer-widget .list-area li:not(:last-child) {
  margin-bottom: 20px;
}
.footer-widgets-wrapper .single-footer-widget .list-area li a {
  color: rgba(255, 255, 255, 0.8);
}
.footer-widgets-wrapper .single-footer-widget .list-area li a i {
  margin-right: 5px;
}
.footer-widgets-wrapper .single-footer-widget .list-area li a:hover {
  margin-left: 5px;
}
.footer-widgets-wrapper .single-footer-widget .list-area li a:hover a {
  color: var(--theme2);
}
.footer-widgets-wrapper.style1 {
  padding: 90px 0 151px;
  position: relative;
  z-index: 9;
  background-color: #FFF;
}
.footer-widgets-wrapper.style1 .shape1 {
  position: absolute;
  top: 40px;
  left: -40px;
  z-index: 1;
}
.footer-widgets-wrapper.style1 .shape2 {
  position: absolute;
  bottom: -40px;
  left: 0;
  z-index: 1;
}
.footer-widgets-wrapper.style1 .shape3 {
  position: absolute;
  top: 40px;
  right: 0;
  z-index: 1;
}
.footer-widgets-wrapper.style1 .single-footer-widget {
  position: relative;
  z-index: 5;
}
.footer-widgets-wrapper.style1 .single-footer-widget .widget-head h3 {
  font-family: "Manrope", sans-serif;
  color: #242331;
  font-size: 30px;
  font-style: normal;
  font-weight: 700;
  line-height: 128.182%;
  text-transform: capitalize;
}
.footer-widgets-wrapper.style1 .single-footer-widget .footer-content {
  max-width: 366px;
}
.footer-widgets-wrapper.style1 .single-footer-widget .footer-content p {
  color: #565656;
  font-family: "Manrope", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 157.4%;
}
.footer-widgets-wrapper.style1 .single-footer-widget .footer-content .store-links {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 30px;
}
@media (max-width: 1199px) {
  .footer-widgets-wrapper.style1 .single-footer-widget .footer-content .store-links {
    flex-direction: column;
    align-items: start;
  }
}
.footer-widgets-wrapper.style1 .single-footer-widget .footer-content .store-links .apple a svg {
  margin-right: 5px;
}
.footer-widgets-wrapper.style1 .single-footer-widget .footer-content .store-links .apple a {
  display: inline-block;
  padding: 18px 25px;
  border-radius: 39px;
  background: var(--title);
  color: var(--white);
  font-family: "Manrope", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}
.footer-widgets-wrapper.style1 .single-footer-widget .footer-content .store-links .apple a:hover {
  color: var(--white) !important;
}
.footer-widgets-wrapper.style1 .single-footer-widget .footer-content .store-links .play a svg {
  margin-right: 5px;
}
.footer-widgets-wrapper.style1 .single-footer-widget .footer-content .store-links .play a {
  display: inline-block;
  padding: 18px 25px;
  border-radius: 39px;
  border: 1px solid #D3D3D3;
  font-family: "Manrope", sans-serif;
  color: #242331;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}
.footer-widgets-wrapper.style1 .single-footer-widget .footer-content .store-links .play a:hover {
  color: var(--title) !important;
}
@media (max-width: 767px) {
  .footer-widgets-wrapper.style1 .single-footer-widget .footer-content .store-links {
    flex-direction: column;
  }
}
.footer-widgets-wrapper.style1 .single-footer-widget .list-area li a {
  color: #565656;
  font-family: "Manrope", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 267.5%;
  text-transform: capitalize;
}
.footer-widgets-wrapper.style1 .single-footer-widget .list-area li:not(:last-child) {
  margin-bottom: 5px;
}
.footer-widgets-wrapper.style1 .single-footer-widget .contact-box {
  border-radius: 20px;
  background: #F9F9F9;
  padding: 52px 58px 52px 45px;
}
.footer-widgets-wrapper.style1 .single-footer-widget .contact-box .subtitle {
  color: #5236FF;
  font-family: "Manrope", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  text-transform: capitalize;
  margin-bottom: 8px;
}
.footer-widgets-wrapper.style1 .single-footer-widget .contact-box .widget-head {
  font-family: "Manrope", sans-serif;
  color: #242331;
  font-size: 30px;
  font-style: normal;
  font-weight: 700;
  line-height: 128.182%;
  text-transform: capitalize;
  margin-bottom: 10px;
}
.footer-widgets-wrapper.style1 .single-footer-widget .contact-box .text {
  color: #797979;
  font-family: "Manrope", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 157.4%;
}
.footer-widgets-wrapper.style1 .single-footer-widget .contact-box .info {
  display: flex;
  align-items: start;
  gap: 15px;
  margin-top: 30px;
}
.footer-widgets-wrapper.style1 .single-footer-widget .contact-box .info .link {
  margin-top: -0.3em;
}
.footer-widgets-wrapper.style1 .single-footer-widget .contact-box .info .link a {
  color: #565656;
  font-family: "Manrope", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 157.4%;
}
@media (max-width: 767px) {
  .footer-widgets-wrapper.style1 .single-footer-widget .contact-box {
    padding: 25px;
  }
}

.footer-top-logo {
  position: relative;
}
.footer-top-logo:before {
  position: absolute;
  content: "";
  top: 35px;
  left: -555px;
  width: 515px;
  height: 1px;
  background: var(--border-2);
}
.footer-top-logo:after {
  position: absolute;
  content: "";
  top: 35px;
  right: -555px;
  width: 515px;
  height: 1px;
  background: var(--border-2);
}

.footer-bottom {
  position: relative;
  z-index: 9;
  background: #0B0B0C;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}
.footer-bottom .footer-wrapper {
  padding: 18px 0;
}
@media (max-width: 767px) {
  .footer-bottom .footer-wrapper {
    flex-wrap: wrap;
    gap: 5px;
    justify-content: center !important;
  }
}
.footer-bottom .footer-wrapper p {
  color: var(--white);
}
@media (max-width: 500px) {
  .footer-bottom .footer-wrapper p {
    font-size: 13px;
  }
}
.footer-bottom .footer-wrapper p a {
  color: var(--white);
  font-weight: 600;
}
.footer-bottom.style1 {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background: transparent !important;
}
.footer-bottom.style1 .footer-wrapper {
  padding: 35px 0 50px;
  border-top: 1px solid #E3E3E3;
}
@media (max-width: 767px) {
  .footer-bottom.style1 .footer-wrapper {
    flex-wrap: wrap;
    gap: 15px;
    justify-content: center !important;
  }
}
.footer-bottom.style1 .footer-wrapper p {
  color: #797979;
  font-family: "Manrope", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 157.4%;
  text-transform: capitalize;
}
@media (max-width: 500px) {
  .footer-bottom.style1 .footer-wrapper p {
    font-size: 13px;
  }
}
.footer-bottom.style1 .footer-wrapper p a {
  color: var(--white);
  font-weight: 600;
}
.footer-bottom.style1 .footer-wrapper .social-links {
  display: flex;
  align-items: center;
  gap: 25px;
}
@media (max-width: 767px) {
  .footer-bottom.style1 .footer-wrapper .social-links {
    gap: 5px;
  }
}

.contact-info-area {
  padding-top: 120px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  padding-bottom: 50px;
}
@media (max-width: 1399px) {
  .contact-info-area {
    flex-wrap: wrap;
    gap: 40px;
    padding-top: 80px;
    justify-content: initial;
  }
}
@media (max-width: 575px) {
  .contact-info-area {
    gap: 30px;
  }
}
.contact-info-area .contact-info-items {
  display: flex;
  align-items: center;
  gap: 20px;
  justify-content: space-between;
  position: relative;
}
@media (max-width: 1199px) {
  .contact-info-area .contact-info-items {
    flex-wrap: wrap;
  }
}
.contact-info-area .contact-info-items .icon {
  width: 65px;
  height: 65px;
  line-height: 65px;
  text-align: center;
  position: relative;
  border: 2px dotted var(--white);
  border-radius: 50%;
  font-size: 30px;
  color: var(--white);
}
.contact-info-area .contact-info-items .content p {
  color: var(--white);
  margin-bottom: 5px;
}
.contact-info-area .contact-info-items .content h3 {
  font-size: 24px;
  color: var(--white);
  text-transform: initial;
}
.contact-info-area .contact-info-items .content h3 a {
  color: var(--white);
}

/* 16.Intro */
/*-----------------------------------------------------------------
Theme Name: Niotech
Author: Gramentheme
Author URI: https://themeforest.net/user/gramentheme
Version: 1.0.0 
Description: Niotech - App Landing HTML Template <

-------------------------------------------------------------------
 CSS TABLE OF CONTENTS
-------------------------------------------------------------------

    01.Mixins
    02.Variables
    03.Typography
    04.Buttons 
    05.Gutter 
    06.Container 
    07.Animation 
    08.Helping 
    09.MeanMenu 
    10.Preloader
    11.Title 
    12.Common 
    13.Header
    14.Breadcumb
    15.Footer
    16.Intro 
    17.Brand 
    18.About
    19.Work Process 
    20.Advantage
    21.Wcu
    22.Counter
    23.Faq
    24.Testimonial
    25.Feature
    26.Pricing 
    27.Cta
    28.Blog
    29.Services
    30.Project 
    31.Team
    32.Team Extra
    33.Sidebar
    34.Contact
    35.Input
    36.Useed Technologies
    37.Policy
------------------------------------------------------------------*/
/* 01.Mixins */
/* 02.Variables */
/* 03.Typography */
.intro-wrapper.style1 {
  position: relative;
  border-radius: 50px;
  background: rgba(208, 253, 28, 0.06);
  margin-top: 40px;
}
@media (max-width: 767px) {
  .intro-wrapper.style1 {
    margin-top: 10px;
  }
}
.intro-wrapper.style1 .shape1 {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 1;
}
.intro-wrapper.style1 .shape2 {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
}
.intro-wrapper.style1 .shape3 {
  position: absolute;
  top: 110px;
  left: 34px;
  z-index: 1;
}
.intro-wrapper.style1 .shape4 {
  position: absolute;
  bottom: 111px;
  right: 22px;
  z-index: 1;
}
.intro-wrapper.style1 .shape5 {
  position: absolute;
  bottom: 162px;
  right: 874px;
  z-index: 1;
}
.intro-wrapper.style1 .intro-content {
  position: relative;
  padding: 223px 0 180px;
  z-index: 5;
  max-width: 720px;
}
@media (max-width: 1199px) {
  .intro-wrapper.style1 .intro-content {
    padding: 120px 0;
  }
}
@media (max-width: 767px) {
  .intro-wrapper.style1 .intro-content {
    padding: 80px 0;
  }
}
.intro-wrapper.style1 .intro-content .intro-section-title .intro-subtitle {
  display: inline-flex;
  padding: 5px 7px;
  align-items: center;
  gap: 10px;
  border-radius: 30px;
  background: rgba(116, 68, 253, 0.15);
  backdrop-filter: blur(2px);
  color: var(--theme);
  font-family: "Manrope", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 28px;
  letter-spacing: -0.32px;
  margin-bottom: 20px;
}
.intro-wrapper.style1 .intro-content .intro-section-title .intro-subtitle span {
  display: inline-block;
  padding: 5px 15px;
  gap: 10px;
  border-radius: 30px;
  background: var(--white);
  color: var(--title);
  font-family: "Manrope", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 30px;
  letter-spacing: -0.32px;
}
.intro-wrapper.style1 .intro-content .intro-section-title .intro-title {
  color: var(--title);
  font-family: "Manrope", sans-serif;
  font-size: 64px;
  font-style: normal;
  font-weight: 700;
  line-height: 80px;
  letter-spacing: -1.28px;
  margin-bottom: 15px;
}
@media (max-width: 1199px) {
  .intro-wrapper.style1 .intro-content .intro-section-title .intro-title {
    font-size: 50px;
    line-height: 62px;
  }
}
@media (max-width: 767px) {
  .intro-wrapper.style1 .intro-content .intro-section-title .intro-title {
    font-size: 42px;
    line-height: 140%;
  }
}
@media (max-width: 575px) {
  .intro-wrapper.style1 .intro-content .intro-section-title .intro-title {
    font-size: 36px;
  }
}
.intro-wrapper.style1 .intro-content .intro-section-title .intro-desc {
  color: var(--title);
  font-family: "Manrope", sans-serif;
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
  line-height: 28px;
  letter-spacing: -0.32px;
  margin-bottom: 30px;
}
.intro-wrapper.style1 .intro-content .btn-wrapper {
  display: flex;
  align-items: center;
  gap: 30px;
  margin-bottom: 45px;
}
@media (max-width: 767px) {
  .intro-wrapper.style1 .intro-content .btn-wrapper {
    flex-direction: column;
    gap: 20px;
  }
}
.intro-wrapper.style1 .intro-content .btn-wrapper img {
  max-width: 250px;
}
.intro-wrapper.style1 .intro-thumb {
  position: relative;
  padding: 155px 0 0;
  z-index: 3;
}
@media (max-width: 767px) {
  .intro-wrapper.style1 .intro-thumb {
    padding: 160px 0 0;
  }
}
.intro-wrapper.style1 .intro-thumb .main-thumb {
  position: relative;
  z-index: 3;
}
@media (max-width: 767px) {
  .intro-wrapper.style1 .intro-thumb .main-thumb {
    max-width: 100%;
  }
}
.intro-wrapper.style1 .intro-thumb .thumbShape1 {
  position: absolute;
  top: 192px;
  right: 0px;
  z-index: 1;
}
@media (max-width: 767px) {
  .intro-wrapper.style1 .intro-thumb .thumbShape1 {
    display: none;
  }
}
.intro-wrapper.style1 .intro-thumb .thumbShape2 {
  position: absolute;
  top: 260px;
  right: 40px;
  z-index: 2;
}
@media (max-width: 767px) {
  .intro-wrapper.style1 .intro-thumb .thumbShape2 {
    display: none;
  }
}
.intro-wrapper.style2 {
  position: relative;
  background: rgba(208, 253, 28, 0.06);
}
.intro-wrapper.style2 .intro-content {
  position: relative;
  padding: 120px 0 350px;
  z-index: 5;
  text-align: center;
}
.intro-wrapper.style2 .intro-content .intro-section-title .intro-subtitle {
  margin-top: 60px;
  margin-bottom: 20px;
  display: inline-block;
  padding: 5px 7px;
  align-items: center;
  gap: 10px;
  border-radius: 30px;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  color: var(--white);
  font-family: "Manrope", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 28px;
  letter-spacing: -0.32px;
}
.intro-wrapper.style2 .intro-content .intro-section-title .intro-subtitle span {
  display: inline-block;
  padding: 5px 15px;
  gap: 10px;
  border-radius: 30px;
  background: var(--white);
  color: var(--title);
  font-family: "Manrope", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 30px;
  letter-spacing: -0.32px;
  margin-right: 10px;
}
.intro-wrapper.style2 .intro-content .intro-section-title .intro-subtitle img {
  width: 16px;
  height: 16px;
  margin-left: 10px;
}
.intro-wrapper.style2 .intro-content .intro-section-title .intro-title {
  color: var(--white);
  font-family: "Manrope", sans-serif;
  text-align: center;
  font-size: 64px;
  font-style: normal;
  font-weight: 700;
  line-height: 80px;
  letter-spacing: -1.28px;
  margin-bottom: 20px;
}
@media (max-width: 1399px) {
  .intro-wrapper.style2 .intro-content .intro-section-title .intro-title {
    font-size: 50px;
    line-height: 60px;
  }
}
.intro-wrapper.style2 .intro-content .intro-section-title .intro-desc {
  color: var(--white);
  font-family: "Manrope", sans-serif;
  text-align: center;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 28px;
  letter-spacing: -0.32px;
  max-width: 627px;
  margin: 0 auto;
}
.intro-wrapper.style2 .intro-content .btn-wrapper {
  display: flex;
  justify-content: center;
  margin-top: 30px;
  margin-bottom: 155px;
  gap: 30px;
}
@media (max-width: 991px) {
  .intro-wrapper.style2 .intro-content .btn-wrapper {
    flex-direction: column;
    display: inline-block;
  }
}

.intro-container-wrapper.style2 .intro-wrapper {
  position: relative;
}
.intro-container-wrapper.style2 .intro-wrapper.style2 {
  max-width: 1920px;
  position: relative;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 1000"><path fill-rule="evenodd" clip-rule="evenodd" d="M-276 0H2195V653.846L-276 1000V0Z"/></svg>');
          mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 1000"><path fill-rule="evenodd" clip-rule="evenodd" d="M-276 0H2195V653.846L-276 1000V0Z"/></svg>');
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center center;
          mask-position: center center;
  -webkit-mask-size: cover;
          mask-size: cover;
}
.intro-container-wrapper.style2 .intro-wrapper.style2 img {
  width: 100%;
  height: 100%;
}
.intro-container-wrapper.style2 .thumb-box {
  position: relative;
}
.intro-container-wrapper.style2 .thumb-box .main-thumb {
  position: relative;
  z-index: 9;
  max-width: 1000px;
  margin: -410px auto auto auto;
  box-shadow: none;
  border-radius: 36.955px;
  box-shadow: 0px 83.148px 110.864px 0px rgba(2, 46, 86, 0.24);
  -webkit-border-radius: 36.955px;
  -moz-border-radius: 36.955px;
  -ms-border-radius: 36.955px;
  -o-border-radius: 36.955px;
}
.intro-container-wrapper.style2 .thumb-box .main-thumb > img {
  position: relative;
  border-radius: 36.955px;
  -webkit-border-radius: 36.955px;
  -moz-border-radius: 36.955px;
  -ms-border-radius: 36.955px;
  -o-border-radius: 36.955px;
}
@media (max-width: 1199px) {
  .intro-container-wrapper.style2 .thumb-box .main-thumb > img {
    max-width: 100%;
  }
}
.intro-container-wrapper.style2 .thumb-box .main-thumb .thumb1 {
  position: absolute;
  left: -76px;
  top: 176px;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
}
@media (max-width: 1399px) {
  .intro-container-wrapper.style2 .thumb-box .main-thumb .thumb1 {
    left: 0;
  }
}
@media (max-width: 1199px) {
  .intro-container-wrapper.style2 .thumb-box .main-thumb .thumb1 {
    left: 0;
    top: 0;
  }
}
.intro-container-wrapper.style2 .thumb-box .main-thumb .thumb2 {
  position: absolute;
  right: -89px;
  top: 76px;
  border-radius: 36.955px;
}
@media (max-width: 1399px) {
  .intro-container-wrapper.style2 .thumb-box .main-thumb .thumb2 {
    right: 0;
  }
}
@media (max-width: 767px) {
  .intro-container-wrapper.style2 .thumb-box .main-thumb .thumb2 {
    right: 50px;
  }
}

.hero-3 {
  padding: 100px 0;
  overflow: hidden;
}
.hero-3 .container-fluid {
  padding: 0 225px;
}
@media (max-width: 1899px) {
  .hero-3 .container-fluid {
    padding: 0 60px;
  }
}
@media (max-width: 1600px) {
  .hero-3 .container-fluid {
    padding: 0 50px;
  }
}
@media (max-width: 1399px) {
  .hero-3 .container-fluid {
    padding: 0 40px;
  }
}
@media (max-width: 1199px) {
  .hero-3 .container-fluid {
    padding: 0 30px;
  }
}
.hero-3 .hero-content h6 {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.4px;
  color: #1AD079;
}
.hero-3 .hero-content h1 {
  font-size: 80px;
  font-weight: 700;
  letter-spacing: -1.6px;
  line-height: 125%;
  margin-bottom: 30px;
}
@media (max-width: 1199px) {
  .hero-3 .hero-content h1 {
    font-size: 65px;
  }
}
@media (max-width: 991px) {
  .hero-3 .hero-content h1 {
    font-size: 60px;
  }
}
@media (max-width: 767px) {
  .hero-3 .hero-content h1 {
    font-size: 46px;
  }
}
@media (max-width: 575px) {
  .hero-3 .hero-content h1 {
    font-size: 34px;
  }
}
.hero-3 .hero-content h1 span {
  color: var(--theme);
}
.hero-3 .hero-content p {
  font-weight: 500;
  max-width: 760px;
  line-height: 175%;
  color: #565656;
}
.hero-3 .hero-content .btn-wrapper {
  display: flex;
  align-items: center;
  margin-top: 40px;
  gap: 25px;
}
@media (max-width: 1199px) {
  .hero-3 .hero-content .btn-wrapper {
    flex-wrap: wrap;
    gap: 20px;
  }
}
.hero-3 .hero-image {
  margin-right: -60%;
  position: relative;
}
.hero-3 .hero-image .mobile-image {
  position: absolute;
  bottom: 0;
  left: -60px;
  max-width: 180px;
}
@media (max-width: 1399px) {
  .hero-3 .hero-image .mobile-image {
    max-width: 140px;
    left: 0;
  }
}
@media (max-width: 1199px) {
  .hero-3 .hero-image .mobile-image {
    max-width: 180px;
  }
}
@media (max-width: 767px) {
  .hero-3 .hero-image .mobile-image {
    max-width: 100px;
  }
}
@media (max-width: 1199px) {
  .hero-3 .hero-image {
    margin-right: 0;
  }
}
.hero-3 .hero-image img {
  width: 100%;
  height: 100%;
  border-radius: 26px 0px 0px 26px;
}

.store-buttons {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.store-buttons a {
  display: inline-block;
  flex: 0 0 auto;
}
.store-buttons .store-badge-img {
  display: block;
  height: 48px;
  width: auto !important;
  max-width: none;
}

.intro-wrapper.style1 .intro-thumb .main-thumb {
  display: block;
  width: 100%;
  max-width: 726px;
  height: auto;
}

/* 17.Brand */
/*-----------------------------------------------------------------
Theme Name: Niotech
Author: Gramentheme
Author URI: https://themeforest.net/user/gramentheme
Version: 1.0.0 
Description: Niotech - App Landing HTML Template <

-------------------------------------------------------------------
 CSS TABLE OF CONTENTS
-------------------------------------------------------------------

    01.Mixins
    02.Variables
    03.Typography
    04.Buttons 
    05.Gutter 
    06.Container 
    07.Animation 
    08.Helping 
    09.MeanMenu 
    10.Preloader
    11.Title 
    12.Common 
    13.Header
    14.Breadcumb
    15.Footer
    16.Intro 
    17.Brand 
    18.About
    19.Work Process 
    20.Advantage
    21.Wcu
    22.Counter
    23.Faq
    24.Testimonial
    25.Feature
    26.Pricing 
    27.Cta
    28.Blog
    29.Services
    30.Project 
    31.Team
    32.Team Extra
    33.Sidebar
    34.Contact
    35.Input
    36.Useed Technologies
    37.Policy
------------------------------------------------------------------*/
/* 01.Mixins */
/* 02.Variables */
/* 03.Typography */
.brandSliderOne {
  padding: 30px 0 110px;
  border-bottom: 1px solid var(--border);
}
.brandSliderOne .brand-logo {
  text-align: center;
}

.brandSliderTwo {
  padding: 30px 0 0px;
  border-bottom: 0px;
}
.brandSliderTwo .brand-logo {
  text-align: center;
}

.brand-slider-wrapper.style1 .single-section-title {
  font-size: 24px;
}
.brand-slider-wrapper.style2 .single-section-title {
  font-size: 24px;
}

/* 18.About */
/*-----------------------------------------------------------------
Theme Name: Niotech
Author: Gramentheme
Author URI: https://themeforest.net/user/gramentheme
Version: 1.0.0 
Description: Niotech - App Landing HTML Template <

-------------------------------------------------------------------
 CSS TABLE OF CONTENTS
-------------------------------------------------------------------

    01.Mixins
    02.Variables
    03.Typography
    04.Buttons 
    05.Gutter 
    06.Container 
    07.Animation 
    08.Helping 
    09.MeanMenu 
    10.Preloader
    11.Title 
    12.Common 
    13.Header
    14.Breadcumb
    15.Footer
    16.Intro 
    17.Brand 
    18.About
    19.Work Process 
    20.Advantage
    21.Wcu
    22.Counter
    23.Faq
    24.Testimonial
    25.Feature
    26.Pricing 
    27.Cta
    28.Blog
    29.Services
    30.Project 
    31.Team
    32.Team Extra
    33.Sidebar
    34.Contact
    35.Input
    36.Useed Technologies
    37.Policy
------------------------------------------------------------------*/
/* 01.Mixins */
/* 02.Variables */
/* 03.Typography */
.about-wrapper.style1 .about-thumb {
  position: relative;
  padding-bottom: 70px;
}
.about-wrapper.style1 .about-thumb .bg {
  position: absolute;
  bottom: 70px;
  right: 0;
  z-index: 1;
  width: 465px;
  height: 350px;
  border-radius: 0px 0px 50px 50px;
  background: #d0fd1c;
}
@media (max-width: 767px) {
  .about-wrapper.style1 .about-thumb .bg {
    max-width: 100%;
  }
}
.about-wrapper.style1 .about-thumb .thumbShape1 {
  position: absolute;
  top: -40px;
  left: -90px;
  z-index: 1;
}
.about-wrapper.style1 .about-thumb .thumbShape2 {
  position: absolute;
  bottom: 0;
  right: -20px;
  z-index: 1;
}
.about-wrapper.style1 .about-thumb .thumbShape3 {
  position: absolute;
  top: 60px;
  left: 15px;
  z-index: 1;
}
.about-wrapper.style1 .about-thumb .thumbShape4 {
  position: absolute;
  top: 200px;
  left: 130px;
  z-index: 1;
}
.about-wrapper.style1 .about-thumb .main-thumb {
  position: relative;
  z-index: 3;
  display: flex;
  justify-content: end;
}
@media (max-width: 767px) {
  .about-wrapper.style1 .about-thumb .main-thumb img {
    max-width: 100%;
  }
}
.about-wrapper.style1 .about-thumb .absolute-thumb {
  padding: 15px;
  background: var(--white);
  position: absolute;
  bottom: -10px;
  left: -10px;
  z-index: 3;
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
}
@media (max-width: 1199px) {
  .about-wrapper.style1 .about-thumb .absolute-thumb {
    bottom: 59px;
    left: 236px;
  }
}
@media (max-width: 991px) {
  .about-wrapper.style1 .about-thumb .absolute-thumb {
    bottom: 0;
    left: 0;
  }
}
.about-wrapper.style1 .about-content .checklist {
  margin-bottom: 30px;
}
.about-wrapper.style2 {
  border-radius: 50px;
  background-color: var(--theme3);
}
.about-wrapper.style2 .about-thumb {
  position: relative;
  width: 100%;
}
.about-wrapper.style2 .about-thumb > img {
  width: 100%;
  position: relative;
}
.about-wrapper.style2 .about-thumb .absolute-thumb {
  position: absolute;
  top: 12px;
  right: -31px;
}
.about-wrapper.style2 .about-thumb .absolute-thumb img {
  max-width: 100%;
}
.about-wrapper.style2 .about-content .section-title .text1 {
  margin-bottom: 30px;
}
.about-wrapper.style2 .counter-box-wrapper {
  margin-top: 40px;
}

.about-wrapper-3 .about-image {
  margin-left: -70%;
}
@media (max-width: 1199px) {
  .about-wrapper-3 .about-image {
    margin-left: 0;
  }
}
.about-wrapper-3 .about-image img {
  width: 100%;
  height: 100%;
}
.about-wrapper-3 .about-content {
  margin-left: 40px;
}
@media (max-width: 1199px) {
  .about-wrapper-3 .about-content {
    margin-left: 0;
  }
}
.about-wrapper-3 .about-content ul {
  margin-top: 40px;
  margin-bottom: 40px;
}
.about-wrapper-3 .about-content ul li {
  font-weight: 500;
}
.about-wrapper-3 .about-content ul li b {
  font-weight: 700;
  color: var(--header);
  margin-left: 10px;
}
.about-wrapper-3 .about-content ul li:not(:last-child) {
  margin-bottom: 15px;
}

.feature-box-items {
  display: flex;
  gap: 20px;
}
.feature-box-items .content h3 {
  font-size: 32px;
  line-height: 1;
  margin-bottom: 10px;
}
.feature-box-items .content p {
  color: #565656;
  font-weight: 500;
}

.about-section-3 {
  position: relative;
}
.about-section-3 .about-shape {
  position: absolute;
  bottom: 0;
  right: 0;
}
@media (max-width: 1399px) {
  .about-section-3 .about-shape {
    display: none;
  }
}

.about-wrapper.style1 .about-thumb .main-thumb img {
  display: block;
  width: 100%;
  max-height: 530px;
  width: auto;
}

/* 19.Work Process */
/*-----------------------------------------------------------------
Theme Name: Niotech
Author: Gramentheme
Author URI: https://themeforest.net/user/gramentheme
Version: 1.0.0 
Description: Niotech - App Landing HTML Template <

-------------------------------------------------------------------
 CSS TABLE OF CONTENTS
-------------------------------------------------------------------

    01.Mixins
    02.Variables
    03.Typography
    04.Buttons 
    05.Gutter 
    06.Container 
    07.Animation 
    08.Helping 
    09.MeanMenu 
    10.Preloader
    11.Title 
    12.Common 
    13.Header
    14.Breadcumb
    15.Footer
    16.Intro 
    17.Brand 
    18.About
    19.Work Process 
    20.Advantage
    21.Wcu
    22.Counter
    23.Faq
    24.Testimonial
    25.Feature
    26.Pricing 
    27.Cta
    28.Blog
    29.Services
    30.Project 
    31.Team
    32.Team Extra
    33.Sidebar
    34.Contact
    35.Input
    36.Useed Technologies
    37.Policy
------------------------------------------------------------------*/
/* 01.Mixins */
/* 02.Variables */
/* 03.Typography */
.work-process-box.style1 {
  text-align: center;
  max-width: 210px;
  margin: auto;
}
.work-process-box.style1.child2 {
  margin-top: 55px;
}
.work-process-box.style1 .step {
  color: var(--text);
  text-align: center;
  font-family: "Manrope", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 28px;
  letter-spacing: -0.32px;
  display: inline-flex;
  height: 24px;
  padding: 7px 10px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-radius: 100px;
  background: rgba(208, 253, 28, 0.6);
  margin-bottom: 10px;
}
.work-process-box.style1 .title {
  color: var(--title);
  text-align: center;
  font-family: "Manrope", sans-serif;
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: 34px;
  letter-spacing: -0.48px;
  margin-bottom: 8px;
}
.work-process-box.style1 .text {
  color: var(--text);
  text-align: center;
  font-family: "Manrope", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 28px;
  letter-spacing: -0.32px;
}
@media (max-width: 1199px) {
  .work-process-box.style1 {
    margin-top: 30px;
  }
  .work-process-box.style1.child2 {
    margin-top: 30px;
  }
}

.work-process-wrapper.style1 {
  position: relative;
  margin-top: 85px;
}
@media (max-width: 1199px) {
  .work-process-wrapper.style1 {
    margin-top: 30px;
  }
}
.work-process-wrapper.style1 .shape {
  position: absolute;
  bottom: 0;
  right: 0;
}
.work-process-wrapper.style1 .shape img {
  max-width: 100%;
}
@media (max-width: 1199px) {
  .work-process-wrapper.style1 .shape {
    display: none;
  }
}

.wp-wrapper.style2 {
  position: relative;
  margin-right: -370px;
}
.wp-wrapper.style2 .shape {
  position: absolute;
  top: 0;
  left: -375px;
}
.wp-wrapper.style2 .section-title {
  margin-bottom: 50px;
}
.wp-wrapper.style2 .feature-box-wrapper.style2 {
  margin-top: 40px;
}
.wp-wrapper.style2 .feature-box-wrapper.style2 .feature-box.style2 {
  display: flex;
  align-items: start;
  gap: 20px;
}
.wp-wrapper.style2 .feature-box-wrapper.style2 .feature-box.style2 .content h5 {
  color: var(--title);
  font-family: "Manrope", sans-serif;
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: 24px;
  letter-spacing: -0.72px;
  margin-bottom: 10px;
}
.wp-wrapper.style2 .feature-box-wrapper.style2 .feature-box.style2 .content .text {
  color: var(--text);
  font-family: "Manrope", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 28px;
  letter-spacing: -0.32px;
  max-width: 310px;
}
.wp-wrapper.style2 .wp-thumb {
  width: 100%;
  height: 100%;
}
.wp-wrapper.style2 .wp-thumb img {
  width: 100%;
  height: 100%;
}
@media (max-width: 1899px) {
  .wp-wrapper.style2 {
    margin-right: 0;
  }
}
@media (max-width: 1199px) {
  .wp-wrapper.style2 {
    margin-top: -2em;
    margin-bottom: -2em;
  }
}

.wp-content .accordion-item {
  border: 0;
  background-color: var(--white);
  margin-bottom: 30px !important;
}
.wp-content .accordion-item .accordion-header .accordion-button {
  font-weight: 600;
  color: var(--white);
  letter-spacing: -0.2px;
  border: 0;
  box-shadow: none;
  background-color: var(--theme);
  padding: 15px 20px 0;
  text-align: center;
  font-family: "Manrope", sans-serif;
  font-size: 24px;
  font-style: normal;
  font-weight: 600;
  line-height: 34px;
  letter-spacing: -0.48px;
  border: 1px solid transparent;
  border-radius: 10px 10px 0px 0px;
  -webkit-border-radius: 10px 10px 0px 0px;
  -moz-border-radius: 10px 10px 0px 0px;
  -ms-border-radius: 10px 10px 0px 0px;
  -o-border-radius: 10px 10px 0px 0px;
}
.wp-content .accordion-item .accordion-header .accordion-button:after {
  font-size: 12px;
  font-weight: 500;
  transition: all 0.3s ease-in-out !important;
  background-image: url(../../assets/images/icon/chevron-right.svg);
  color: var(--theme2);
}
.wp-content .accordion-item .accordion-header .accordion-button:not(.collapsed):after {
  font-size: 12px;
  background-image: url(../../assets/images/icon/chevron-down.svg);
  font-weight: 500;
  color: var(--theme2);
  transform: rotate(0);
  -webkit-transform: rotate(0);
  -moz-transform: rotate(0);
  -ms-transform: rotate(0);
  -o-transform: rotate(0);
}
.wp-content .accordion-item .accordion-header .accordion-button.collapsed {
  background-color: transparent;
  border: 1px solid var(--border);
  padding: 18px 20px;
  color: var(--title);
}
.wp-content .accordion-item .accordion-collapse {
  border: none;
}
.wp-content .accordion-item .accordion-collapse .accordion-body {
  padding-right: 55px;
  padding-left: 20px;
  padding-top: 15px;
  background-color: var(--theme);
  color: var(--white);
  font-family: "Manrope", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 28px;
  letter-spacing: -0.32px;
  border-radius: 0 0 10px 10px;
  -webkit-border-radius: 0 0 10px 10px;
  -moz-border-radius: 0 0 10px 10px;
  -ms-border-radius: 0 0 10px 10px;
  -o-border-radius: 0 0 10px 10px;
}
@media (max-width: 1899px) {
  .wp-content .accordion-item .accordion-collapse .accordion-body {
    padding-right: 50px;
  }
}
@media (max-width: 1199px) {
  .wp-content .accordion-item .accordion-collapse .accordion-body {
    padding-right: 30px;
  }
}

/* 20.Advantage */
/*-----------------------------------------------------------------
Theme Name: Niotech
Author: Gramentheme
Author URI: https://themeforest.net/user/gramentheme
Version: 1.0.0 
Description: Niotech - App Landing HTML Template <

-------------------------------------------------------------------
 CSS TABLE OF CONTENTS
-------------------------------------------------------------------

    01.Mixins
    02.Variables
    03.Typography
    04.Buttons 
    05.Gutter 
    06.Container 
    07.Animation 
    08.Helping 
    09.MeanMenu 
    10.Preloader
    11.Title 
    12.Common 
    13.Header
    14.Breadcumb
    15.Footer
    16.Intro 
    17.Brand 
    18.About
    19.Work Process 
    20.Advantage
    21.Wcu
    22.Counter
    23.Faq
    24.Testimonial
    25.Feature
    26.Pricing 
    27.Cta
    28.Blog
    29.Services
    30.Project 
    31.Team
    32.Team Extra
    33.Sidebar
    34.Contact
    35.Input
    36.Useed Technologies
    37.Policy
------------------------------------------------------------------*/
/* 01.Mixins */
/* 02.Variables */
/* 03.Typography */
.advantage-wrapper.style1 {
  border-radius: 50px;
  background: #FAFFE8;
}
.advantage-wrapper.style1 .advantage-content .checklist-wrapper {
  margin-bottom: 30px;
}
.advantage-wrapper.style1 .advantage-thumb {
  position: relative;
}
.advantage-wrapper.style1 .advantage-thumb .thumb1 {
  position: relative;
  z-index: 1;
  max-width: 369px;
}
.advantage-wrapper.style1 .advantage-thumb .thumb2 {
  position: absolute;
  z-index: 2;
  right: -30px;
  bottom: 0;
  max-width: 369px;
}
.advantage-wrapper.style1 .advantage-thumb .shape1 {
  position: absolute;
  bottom: 0;
  right: -30px;
}
.advantage-wrapper.style1 .advantage-thumb .shape1 img {
  max-width: 100%;
}
@media (max-width: 1199px) {
  .advantage-wrapper.style1 .advantage-thumb {
    display: flex;
    justify-content: center;
  }
  .advantage-wrapper.style1 .advantage-thumb .thumb2 {
    right: 80px;
  }
}
@media (max-width: 767px) {
  .advantage-wrapper.style1 .advantage-thumb .thumb1 img {
    max-width: 369px;
  }
}
.advantage-wrapper.style1 .advantage-thumb .thumb2 {
  max-width: 100%;
  right: 0px;
}
.advantage-wrapper.style1 .advantage-thumb .thumb2 img {
  max-width: 100%;
  max-height: 700px;
}

.advantage-wrapper.style1 .advantage-thumb .thumb1 {
  max-width: 369px;
}

.advantage-wrapper.style1 .advantage-thumb .thumb1 img {
  display: block;
  width: 100%;
  height: auto;
}

/* 21.Wcu */
/*-----------------------------------------------------------------
Theme Name: Niotech
Author: Gramentheme
Author URI: https://themeforest.net/user/gramentheme
Version: 1.0.0 
Description: Niotech - App Landing HTML Template <

-------------------------------------------------------------------
 CSS TABLE OF CONTENTS
-------------------------------------------------------------------

    01.Mixins
    02.Variables
    03.Typography
    04.Buttons 
    05.Gutter 
    06.Container 
    07.Animation 
    08.Helping 
    09.MeanMenu 
    10.Preloader
    11.Title 
    12.Common 
    13.Header
    14.Breadcumb
    15.Footer
    16.Intro 
    17.Brand 
    18.About
    19.Work Process 
    20.Advantage
    21.Wcu
    22.Counter
    23.Faq
    24.Testimonial
    25.Feature
    26.Pricing 
    27.Cta
    28.Blog
    29.Services
    30.Project 
    31.Team
    32.Team Extra
    33.Sidebar
    34.Contact
    35.Input
    36.Useed Technologies
    37.Policy
------------------------------------------------------------------*/
/* 01.Mixins */
/* 02.Variables */
/* 03.Typography */
.wcu-wrapper.style1 {
  margin-top: 100px;
}
.wcu-wrapper.style1 .wcu-thumb {
  position: relative;
}
.wcu-wrapper.style1 .wcu-thumb .main-thumb {
  position: relative;
  z-index: 3;
}
.wcu-wrapper.style1 .wcu-thumb .main-thumb img {
  max-width: 100%;
}
.wcu-wrapper.style1 .wcu-thumb .shape {
  position: absolute;
  bottom: -20px;
  max-width: 100%;
  z-index: 1;
}
.wcu-wrapper.style1 .wcu-thumb .shape img {
  max-width: 100%;
}
.wcu-wrapper.style2 {
  border-radius: 50px;
  background-color: var(--theme3);
}
.wcu-wrapper.style2 .wcu-thumb {
  position: relative;
  margin-right: 58px;
}
.wcu-wrapper.style2 .wcu-thumb .main-thumb {
  position: relative;
}
.wcu-wrapper.style2 .wcu-thumb .main-thumb img {
  max-width: 100%;
  border-radius: 20px;
  box-shadow: 0px 5px 60px 0px rgba(0, 0, 0, 0.15);
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  -ms-border-radius: 20px;
  -o-border-radius: 20px;
}
.wcu-wrapper.style2 .wcu-thumb .thumb2 {
  position: absolute;
  bottom: -65px;
  left: -78px;
}
.wcu-wrapper.style2 .wcu-thumb .thumb2 img {
  max-width: 100%;
}
@media (max-width: 1199px) {
  .wcu-wrapper.style2 .wcu-thumb .thumb2 {
    left: 0;
    bottom: 0;
  }
}
.wcu-wrapper.style2 .wcu-thumb .thumb3 {
  position: absolute;
  top: 57px;
  right: -58px;
}
@media (max-width: 1199px) {
  .wcu-wrapper.style2 .wcu-thumb .thumb3 {
    top: 0;
    right: 0;
    margin-bottom: 30px;
  }
}
.wcu-wrapper.style2 .wcu-thumb .thumb3 img {
  max-width: 100%;
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
}
@media (max-width: 767px) {
  .wcu-wrapper.style2 .wcu-content {
    margin-top: 30px;
  }
}
.wcu-wrapper.style2 .wcu-content .section-title .text1 {
  margin-bottom: 30px;
}
.wcu-wrapper.style2 .counter-box-wrapper {
  margin-top: 40px;
}
.wcu-wrapper.style3 .wcu-content .section-title .text1 {
  margin-bottom: 10px;
}
.wcu-wrapper.style3 .wcu-content .section-title .text2 {
  margin-bottom: 30px;
}
.wcu-wrapper.style3 .wcu-thumb {
  position: relative;
  margin-left: 80px;
}
.wcu-wrapper.style3 .wcu-thumb .main-thumb {
  position: relative;
  z-index: 3;
  margin-left: 30px;
  width: 100%;
}
.wcu-wrapper.style3 .wcu-thumb .main-thumb img {
  max-width: 100%;
}
.wcu-wrapper.style3 .wcu-thumb .thumb-box {
  position: absolute;
  top: 0;
  left: -80px;
  z-index: 3;
  padding: 12px 35px;
  border-radius: 10px;
  background: linear-gradient(135deg, #AC60E5 0%, #0C87F0 100%);
}
.wcu-wrapper.style3 .wcu-thumb .thumb-box h5 {
  color: var(--white);
  text-align: center;
  font-family: "Manrope", sans-serif;
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: 135%;
}
.wcu-wrapper.style3 .wcu-thumb .thumb-box .text {
  color: var(--white);
  text-align: center;
  font-family: "Manrope", sans-serif;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}
.wcu-wrapper.style3 .wcu-thumb .thumb-box .shape-box {
  position: relative;
  margin-top: 10px;
}
.wcu-wrapper.style3 .wcu-thumb .thumb-box .shape-box img {
  position: relative;
}
.wcu-wrapper.style3 .wcu-thumb .thumb-box .shape-box .shape-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
}
.wcu-wrapper.style3 .wcu-thumb .thumb-box .shape-box .shape-content h6 {
  color: var(--white);
  text-align: center;
  font-family: "Manrope", sans-serif;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
}
.wcu-wrapper.style3 .wcu-thumb .thumb-box .shape-box .shape-content h3 {
  color: var(--white);
  text-align: center;
  font-family: "Manrope", sans-serif;
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: 110%;
  letter-spacing: -0.72px;
}
.wcu-wrapper.style3 .wcu-thumb .thumb2 {
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 1;
  margin-left: -80px;
}
.wcu-wrapper.style3 .wcu-thumb .thumb2 img {
  max-width: 100%;
}
.wcu-wrapper.style3 .counter-box-wrapper {
  margin-top: 40px;
}

/* 22.Counter */
/*-----------------------------------------------------------------
Theme Name: Niotech
Author: Gramentheme
Author URI: https://themeforest.net/user/gramentheme
Version: 1.0.0 
Description: Niotech - App Landing HTML Template <

-------------------------------------------------------------------
 CSS TABLE OF CONTENTS
-------------------------------------------------------------------

    01.Mixins
    02.Variables
    03.Typography
    04.Buttons 
    05.Gutter 
    06.Container 
    07.Animation 
    08.Helping 
    09.MeanMenu 
    10.Preloader
    11.Title 
    12.Common 
    13.Header
    14.Breadcumb
    15.Footer
    16.Intro 
    17.Brand 
    18.About
    19.Work Process 
    20.Advantage
    21.Wcu
    22.Counter
    23.Faq
    24.Testimonial
    25.Feature
    26.Pricing 
    27.Cta
    28.Blog
    29.Services
    30.Project 
    31.Team
    32.Team Extra
    33.Sidebar
    34.Contact
    35.Input
    36.Useed Technologies
    37.Policy
------------------------------------------------------------------*/
/* 01.Mixins */
/* 02.Variables */
/* 03.Typography */
.counter-wrapper.style1 {
  border-radius: 30px;
  background-color: var(--theme);
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  -ms-border-radius: 30px;
  -o-border-radius: 30px;
}

.counter-box.style1 {
  position: relative;
}
.counter-box.style1 .shape {
  position: absolute;
  bottom: 0;
  left: 0;
}
.counter-box.style1 .counter .counter-number {
  color: var(--white);
  font-family: "Manrope", sans-serif;
  font-size: 80px;
  font-style: normal;
  font-weight: 700;
  line-height: 100px;
  letter-spacing: -1.6px;
}
.counter-box.style1 .counter .plus {
  color: var(--white);
  font-family: "Manrope", sans-serif;
  font-size: 80px;
  font-style: normal;
  font-weight: 700;
  line-height: 100px;
  letter-spacing: -1.6px;
}
.counter-box.style1 .text {
  color: var(--white);
  font-family: "Manrope", sans-serif;
  font-size: 18px;
  font-style: normal;
  font-weight: 600;
  line-height: 26px;
  letter-spacing: -0.36px;
}

/* 23.Faq */
/*-----------------------------------------------------------------
Theme Name: Niotech
Author: Gramentheme
Author URI: https://themeforest.net/user/gramentheme
Version: 1.0.0 
Description: Niotech - App Landing HTML Template <

-------------------------------------------------------------------
 CSS TABLE OF CONTENTS
-------------------------------------------------------------------

    01.Mixins
    02.Variables
    03.Typography
    04.Buttons 
    05.Gutter 
    06.Container 
    07.Animation 
    08.Helping 
    09.MeanMenu 
    10.Preloader
    11.Title 
    12.Common 
    13.Header
    14.Breadcumb
    15.Footer
    16.Intro 
    17.Brand 
    18.About
    19.Work Process 
    20.Advantage
    21.Wcu
    22.Counter
    23.Faq
    24.Testimonial
    25.Feature
    26.Pricing 
    27.Cta
    28.Blog
    29.Services
    30.Project 
    31.Team
    32.Team Extra
    33.Sidebar
    34.Contact
    35.Input
    36.Useed Technologies
    37.Policy
------------------------------------------------------------------*/
/* 01.Mixins */
/* 02.Variables */
/* 03.Typography */
.faq-wrapper.style1 .faq-thumb {
  position: relative;
  margin-right: -200px;
}
.faq-wrapper.style1 .faq-thumb .main-thumb {
  position: relative;
  z-index: 1;
  margin-left: 150px;
  border-radius: 30px;
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  -ms-border-radius: 30px;
  -o-border-radius: 30px;
}
@media (max-width: 991px) {
  .faq-wrapper.style1 .faq-thumb .main-thumb {
    max-width: 100%;
    margin-left: 0;
  }
}
.faq-wrapper.style1 .faq-thumb .absolute-thumb {
  position: absolute;
  z-index: 3;
  top: 17%;
  left: 0px;
  transform: translateY(-17%);
  border-radius: 30px;
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  -ms-border-radius: 30px;
  -o-border-radius: 30px;
}
.faq-wrapper.style1 .faq-thumb .absolute-thumb img {
  max-width: 100%;
  border-radius: 30px;
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  -ms-border-radius: 30px;
  -o-border-radius: 30px;
}
@media (max-width: 991px) {
  .faq-wrapper.style1 .faq-thumb .absolute-thumb {
    max-width: 100%;
    top: 0;
    right: 0;
  }
  .faq-wrapper.style1 .faq-thumb .absolute-thumb img {
    max-width: 100%;
  }
}
.faq-wrapper.style2 .faq-thumb img {
  max-width: 100%;
}

.faq-content .accordion-item {
  border: 0;
  background-color: var(--white);
}
.faq-content .accordion-item .accordion-header .accordion-button {
  font-weight: 600;
  color: var(--theme);
  letter-spacing: -0.2px;
  border: 0;
  box-shadow: none;
  background-color: var(--theme3);
  padding: 15px 20px 0;
  text-transform: capitalize;
  font-size: 16px;
  border: 1px solid var(--border);
  border: 1px solid transparent;
  border-radius: 10px;
}
.faq-content .accordion-item .accordion-header .accordion-button:after {
  font-size: 12px;
  font-weight: 500;
  transition: all 0.3s ease-in-out !important;
  background-image: url(../../assets/images/icon/chevron-right.svg);
  color: var(--theme2);
}
.faq-content .accordion-item .accordion-header .accordion-button:not(.collapsed):after {
  font-size: 12px;
  background-image: url(../../assets/images/icon/chevron-down.svg);
  font-weight: 500;
  color: var(--theme2);
  transform: rotate(0);
  -webkit-transform: rotate(0);
  -moz-transform: rotate(0);
  -ms-transform: rotate(0);
  -o-transform: rotate(0);
}
.faq-content .accordion-item .accordion-header .accordion-button.collapsed {
  background-color: transparent;
  border: 1px solid var(--border);
  padding: 15px 20px;
  color: var(--title);
}
.faq-content .accordion-item .accordion-collapse {
  border: none;
}
.faq-content .accordion-item .accordion-collapse .accordion-body {
  padding-right: 55px;
  padding-left: 20px;
  padding-top: 15px;
  background-color: var(--theme);
  color: var(--text);
  font-family: "Manrope", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 28px;
  letter-spacing: -0.32px;
}
@media (max-width: 1899px) {
  .faq-content .accordion-item .accordion-collapse .accordion-body {
    padding-right: 50px;
  }
}
@media (max-width: 1199px) {
  .faq-content .accordion-item .accordion-collapse .accordion-body {
    padding-right: 30px;
  }
}
.faq-content.style1 {
  margin-top: 35px;
}
.faq-content.style1 .accordion-item {
  border: 0;
  background-color: var(--theme3);
  border-radius: 10px;
}
.faq-content.style1 .accordion-item .accordion-header .accordion-button {
  color: var(--title);
  font-family: "Manrope", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 28px;
  letter-spacing: -0.32px;
  background-color: var(--theme3);
  border: none;
}
.faq-content.style1 .accordion-item .accordion-collapse .accordion-body {
  background-color: var(--theme3);
  padding-bottom: 30px;
}

/* 24.Testimonial */
/*-----------------------------------------------------------------
Theme Name: Niotech
Author: Gramentheme
Author URI: https://themeforest.net/user/gramentheme
Version: 1.0.0 
Description: Niotech - App Landing HTML Template <

-------------------------------------------------------------------
 CSS TABLE OF CONTENTS
-------------------------------------------------------------------

    01.Mixins
    02.Variables
    03.Typography
    04.Buttons 
    05.Gutter 
    06.Container 
    07.Animation 
    08.Helping 
    09.MeanMenu 
    10.Preloader
    11.Title 
    12.Common 
    13.Header
    14.Breadcumb
    15.Footer
    16.Intro 
    17.Brand 
    18.About
    19.Work Process 
    20.Advantage
    21.Wcu
    22.Counter
    23.Faq
    24.Testimonial
    25.Feature
    26.Pricing 
    27.Cta
    28.Blog
    29.Services
    30.Project 
    31.Team
    32.Team Extra
    33.Sidebar
    34.Contact
    35.Input
    36.Useed Technologies
    37.Policy
------------------------------------------------------------------*/
/* 01.Mixins */
/* 02.Variables */
/* 03.Typography */
.testimonial-container-wrapper.style2 {
  position: relative;
  margin-top: -414px;
}

.testimonial-wrapper.style1 {
  position: relative;
  border-radius: 50px;
  background: rgba(116, 68, 253, 0.06);
}
.testimonial-wrapper.style1 .section-title {
  position: relative;
  z-index: 3;
  margin-bottom: 50px;
}
.testimonial-wrapper.style1 .shape1 {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 1;
}
.testimonial-wrapper.style1 .shape2 {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
}
.testimonial-wrapper.style1 .slider-pagination {
  max-width: 300px;
  text-align: center;
  margin: 55px auto 0px;
}
.testimonial-wrapper.style2 {
  position: relative;
  padding: 506px 0 120px;
  border-radius: 50px;
  background: rgba(116, 68, 253, 0.06);
}
.testimonial-wrapper.style2 .shape1 {
  position: absolute;
  bottom: 0;
  left: 0;
}
.testimonial-wrapper.style2 .shape2 {
  position: absolute;
  top: 0;
  right: 0;
}
.testimonial-wrapper.style2 .section-title-wrapper.style1 {
  position: relative;
  z-index: 5;
  margin-bottom: 30px;
}

.testimonial-card.style1 {
  position: relative;
  z-index: 3;
  padding: 30px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.6);
}
.testimonial-card.style1 .testimonial-header {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 20px;
}
.testimonial-card.style1 .testimonial-header .profile-thumb {
  border-radius: 6px;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  -ms-border-radius: 6px;
  -o-border-radius: 6px;
}
.testimonial-card.style1 .testimonial-header .content h5 {
  color: "Manrope", sans-serif;
  font-family: var(--title);
  font-size: 24px;
  font-style: normal;
  font-weight: 600;
  line-height: 34px;
  letter-spacing: -0.48px;
}
.testimonial-card.style1 .testimonial-header .content p {
  color: "Manrope", sans-serif;
  font-family: var(--title);
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 28px;
  letter-spacing: -0.32px;
}
.testimonial-card.style1 .testimonial-body {
  position: relative;
  margin-top: 15px;
}
.testimonial-card.style1 .testimonial-body .desc {
  color: var(--title);
  font-family: "Manrope", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 28px;
  letter-spacing: -0.32px;
  margin-top: 10px;
}
.testimonial-card.style1 .quote-icon {
  position: absolute;
  bottom: 20px;
  right: 20px;
}
.testimonial-card.style2 {
  position: relative;
  z-index: 3;
  padding: 30px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--white);
}
.testimonial-card.style2 .testimonial-header {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 20px;
}
.testimonial-card.style2 .testimonial-header .profile-thumb {
  border-radius: 6px;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  -ms-border-radius: 6px;
  -o-border-radius: 6px;
}
.testimonial-card.style2 .testimonial-header .content h5 {
  color: "Manrope", sans-serif;
  font-family: var(--title);
  font-size: 24px;
  font-style: normal;
  font-weight: 600;
  line-height: 34px;
  letter-spacing: -0.48px;
}
.testimonial-card.style2 .testimonial-header .content p {
  color: "Manrope", sans-serif;
  font-family: var(--title);
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 28px;
  letter-spacing: -0.32px;
}
.testimonial-card.style2 .testimonial-body {
  position: relative;
  margin-top: 15px;
}
.testimonial-card.style2 .testimonial-body .desc {
  color: var(--title);
  font-family: "Manrope", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 28px;
  letter-spacing: -0.32px;
  margin-top: 10px;
}
.testimonial-card.style2 .quote-icon {
  position: absolute;
  bottom: 20px;
  right: 20px;
}

.testimonialSliderTwo .swiper-slide {
  transition: all 0.4s;
  -webkit-transition: all 0.4s;
  -moz-transition: all 0.4s;
  -ms-transition: all 0.4s;
  -o-transition: all 0.4s;
}
.testimonialSliderTwo .swiper-slide.swiper-slide-next .testimonial-card.style2 {
  border-radius: 30px;
  border: 3px solid var(--theme);
  background: var(--theme3);
}

.testimonial-section-3 .section-title-area {
  display: flex;
  align-items: center;
  margin-bottom: 60px;
  justify-content: space-between;
}
.testimonial-section-3 .section-title-area .array-button {
  display: flex;
  align-items: center;
  gap: 10px;
}
@media (max-width: 1199px) {
  .testimonial-section-3 .section-title-area .array-button {
    margin-right: 0;
    justify-content: center !important;
  }
}
.testimonial-section-3 .section-title-area .array-button .array-prev, .testimonial-section-3 .section-title-area .array-button .array-next {
  width: 61px;
  height: 42px;
  line-height: 42px;
  transition: all 0.4s ease-in-out;
}
.testimonial-section-3 .section-title-area .array-button .array-prev {
  background-color: var(--white);
  border-top-left-radius: 100px;
  border-bottom-left-radius: 100px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.testimonial-section-3 .section-title-area .array-button .array-prev:hover {
  background-color: var(--theme);
  color: var(--white);
}
.testimonial-section-3 .section-title-area .array-button .array-next {
  background-color: var(--theme);
  border-top-right-radius: 100px;
  border-bottom-right-radius: 100px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  color: var(--white);
}
.testimonial-section-3 .section-title-area .array-button .array-next:hover {
  background-color: var(--header);
}

.testimonial-wrapper-3 {
  padding: 50px;
  background-color: var(--white);
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}
@media (max-width: 1199px) {
  .testimonial-wrapper-3 {
    flex-wrap: wrap;
    gap: 30px;
    padding: 30px;
  }
}
.testimonial-wrapper-3 .icon {
  width: 80px;
  height: 80px;
  line-height: 80px;
  text-align: center;
  border-radius: 50%;
  background-color: var(--theme);
  position: absolute;
  top: -45px;
  left: 0;
}
.testimonial-wrapper-3 .tesimonial-content {
  max-width: 670px;
}
.testimonial-wrapper-3 .tesimonial-content p {
  font-size: 23px;
  line-height: 142%;
  color: #515151;
}
@media (max-width: 767px) {
  .testimonial-wrapper-3 .tesimonial-content p {
    font-size: 20px;
  }
}
.testimonial-wrapper-3 .tesimonial-content .client-info-area {
  margin-top: 70px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
@media (max-width: 1199px) {
  .testimonial-wrapper-3 .tesimonial-content .client-info-area {
    margin-top: 30px;
    flex-wrap: wrap;
    gap: 30px;
  }
}
.testimonial-wrapper-3 .tesimonial-content .client-info-area .client-content h3 {
  font-size: 24px;
  font-weight: 600;
}
.testimonial-wrapper-3 .tesimonial-content .client-info-area .client-content span {
  color: #1AD079;
}
.testimonial-wrapper-3 .thumb {
  max-width: 352px;
}
.testimonial-wrapper-3 .thumb img {
  width: 100%;
  height: 100%;
}

/* 25.Feature */
/*-----------------------------------------------------------------
Theme Name: Niotech
Author: Gramentheme
Author URI: https://themeforest.net/user/gramentheme
Version: 1.0.0 
Description: Niotech - App Landing HTML Template <

-------------------------------------------------------------------
 CSS TABLE OF CONTENTS
-------------------------------------------------------------------

    01.Mixins
    02.Variables
    03.Typography
    04.Buttons 
    05.Gutter 
    06.Container 
    07.Animation 
    08.Helping 
    09.MeanMenu 
    10.Preloader
    11.Title 
    12.Common 
    13.Header
    14.Breadcumb
    15.Footer
    16.Intro 
    17.Brand 
    18.About
    19.Work Process 
    20.Advantage
    21.Wcu
    22.Counter
    23.Faq
    24.Testimonial
    25.Feature
    26.Pricing 
    27.Cta
    28.Blog
    29.Services
    30.Project 
    31.Team
    32.Team Extra
    33.Sidebar
    34.Contact
    35.Input
    36.Useed Technologies
    37.Policy
------------------------------------------------------------------*/
/* 01.Mixins */
/* 02.Variables */
/* 03.Typography */
.feature-box.style1 {
  position: relative;
  z-index: 1;
  padding: 15px 20px;
  border-radius: 15px;
  border: 2px solid var(--border-3);
  background: var(--white);
  box-shadow: 0px 4px 30px 0px rgba(0, 0, 0, 0.3);
  width: 353px;
}
@media (max-width: 991px) {
  .feature-box.style1 {
    max-width: 100%;
    margin-left: 0;
  }
}
.feature-box.style1 .feature-box-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border-2);
}
.feature-box.style1 .feature-box-header .content h5 {
  color: var(--title);
  font-family: "Manrope", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 28px;
  letter-spacing: -0.32px;
}
.feature-box.style1 .feature-box-header .content .text {
  color: var(--text);
  font-family: "Manrope", sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 26px;
  letter-spacing: -0.28px;
}
.feature-box.style1 .feature-box-footer {
  margin-top: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.feature-box.style1 .feature-box-footer .content .day {
  color: var(--title);
  font-family: "Manrope", sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 26px;
  letter-spacing: -0.28px;
}
.feature-box.style1 .feature-box-footer .content .time {
  color: var(--text);
  font-family: "Manrope", sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 26px;
  letter-spacing: -0.28px;
}
.feature-box.style1.child1 {
  position: relative;
  box-shadow: none;
  margin-left: 166px;
  margin-bottom: -20px;
  z-index: 3;
}
@media (max-width: 767px) {
  .feature-box.style1.child1 {
    margin-left: 0px;
    margin-bottom: 30px;
  }
}
.feature-box.style1.child2 {
  position: relative;
  z-index: 2;
  box-shadow: none;
  margin-left: 86px;
  margin-bottom: -20px;
}
@media (max-width: 767px) {
  .feature-box.style1.child2 {
    margin-left: 0px;
    margin-bottom: 30px;
  }
}

.feature-provide-box-items {
  border-radius: 16px;
  background: #E4E6FF;
  padding: 40px;
  position: relative;
  transition: all 0.4s ease-in-out;
  overflow: hidden;
}
@media (max-width: 1199px) {
  .feature-provide-box-items {
    margin-top: 30px;
  }
}
.feature-provide-box-items .icon {
  transition: all 0.4s ease-in-out;
}
.feature-provide-box-items .item-shape {
  position: absolute;
  bottom: -150px;
  right: 0;
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s ease-in-out;
}
.feature-provide-box-items .item-shape-2 {
  position: absolute;
  bottom: 0;
  right: 0;
  transition: all 0.4s ease-in-out;
}
.feature-provide-box-items .content {
  margin-top: 30px;
  position: relative;
  z-index: 9;
}
.feature-provide-box-items .content h3 {
  font-size: 24px;
  margin-bottom: 5px;
}
.feature-provide-box-items .content p {
  color: #3F444B;
}
.feature-provide-box-items:hover {
  background-color: var(--theme);
}
.feature-provide-box-items:hover .icon {
  filter: grayscale(100%) brightness(300%);
}
.feature-provide-box-items:hover .content h3, .feature-provide-box-items:hover .content p {
  color: var(--white);
}
.feature-provide-box-items:hover .item-shape {
  opacity: 1;
  visibility: visible;
  bottom: 0;
}
.feature-provide-box-items:hover .item-shape-2 {
  bottom: -150px;
  right: 0;
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s ease-in-out;
}
.feature-provide-box-items.style-2 {
  margin-top: 30px;
}

.how-work-wrapper {
  border-top: 1px solid var(--border);
  padding-top: 60px;
}
@media (max-width: 575px) {
  .how-work-wrapper {
    padding-top: 30px;
  }
}
.how-work-wrapper .how-work-content .text {
  max-width: 520px;
  color: #565656;
  font-weight: 500;
  margin-bottom: 40px;
}
@media (max-width: 575px) {
  .how-work-wrapper .how-work-content .text {
    margin-bottom: 30px;
  }
}
.how-work-wrapper .how-work-content .how-work-number-items {
  display: flex;
  gap: 24px;
}
.how-work-wrapper .how-work-content .how-work-number-items .number {
  font-size: 20px;
  font-weight: 600;
  color: var(--header);
  width: 56px;
  height: 56px;
  line-height: 56px;
  text-align: center;
  border-radius: 50%;
  background-color: var(--white);
  box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.1);
}
.how-work-wrapper .how-work-content .how-work-number-items .content {
  flex-basis: 75%;
}
.how-work-wrapper .how-work-content .how-work-number-items .content h3 {
  font-size: 20px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 15px;
  margin-bottom: 15px;
}
.how-work-wrapper .how-work-content .how-work-number-items .content p {
  font-weight: 500;
  color: #565656;
}
.how-work-wrapper .gap-image img {
  width: 100%;
  height: 100%;
}

.what-we-wrapper .thumb img {
  width: 100%;
  height: 100%;
}
.what-we-wrapper .what-we-content {
  max-width: 530px;
  margin-left: 40px;
}
@media (max-width: 991px) {
  .what-we-wrapper .what-we-content {
    margin-left: 0;
  }
}
.what-we-wrapper .what-we-content .section-title p {
  font-weight: 500;
  color: #565656;
}
.what-we-wrapper .what-we-content .list-items-area {
  margin-top: 30px;
}
.what-we-wrapper .what-we-content .list-items-area .list-items {
  display: flex;
  gap: 20px;
}
.what-we-wrapper .what-we-content .list-items-area .list-items:not(:last-child) {
  border-bottom: 1px solid var(--border);
  margin-bottom: 30px;
  padding-bottom: 30px;
}
.what-we-wrapper .what-we-content .list-items-area .list-items .content h3 {
  font-size: 20px;
  margin-bottom: 10px;
}
.what-we-wrapper .what-we-content .list-items-area .list-items .content p {
  font-weight: 500;
  color: #565656;
}

.used-technology-section .nav {
  display: flex;
  align-items: center;
  margin-top: 30px;
  gap: 10px;
  margin-bottom: 20px;
}
.used-technology-section .nav .nav-item .nav-link {
  font-size: 17px;
  font-weight: 500;
  color: var(--header);
  background-color: #FAF8FF;
  padding: 17px 35px;
  line-height: 1;
  border-radius: 10px;
}
.used-technology-section .nav .nav-item .nav-link.active {
  background-color: var(--theme);
  color: var(--white);
}

/* 26.Pricing */
/*-----------------------------------------------------------------
Theme Name: Niotech
Author: Gramentheme
Author URI: https://themeforest.net/user/gramentheme
Version: 1.0.0 
Description: Niotech - App Landing HTML Template <

-------------------------------------------------------------------
 CSS TABLE OF CONTENTS
-------------------------------------------------------------------

    01.Mixins
    02.Variables
    03.Typography
    04.Buttons 
    05.Gutter 
    06.Container 
    07.Animation 
    08.Helping 
    09.MeanMenu 
    10.Preloader
    11.Title 
    12.Common 
    13.Header
    14.Breadcumb
    15.Footer
    16.Intro 
    17.Brand 
    18.About
    19.Work Process 
    20.Advantage
    21.Wcu
    22.Counter
    23.Faq
    24.Testimonial
    25.Feature
    26.Pricing 
    27.Cta
    28.Blog
    29.Services
    30.Project 
    31.Team
    32.Team Extra
    33.Sidebar
    34.Contact
    35.Input
    36.Useed Technologies
    37.Policy
------------------------------------------------------------------*/
/* 01.Mixins */
/* 02.Variables */
/* 03.Typography */
.pricing-container-wrapper.style3 {
  position: relative;
  background: rgba(116, 68, 253, 0.06);
}
.pricing-container-wrapper.style3 .shape1 {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 1;
}
.pricing-container-wrapper.style3 .shape2 {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
}

.pricing-card.style1 {
  position: relative;
  padding: 40px;
  border-radius: 30px;
  background: #FAF8FF;
  z-index: 5;
}
@media (max-width: 1199px) {
  .pricing-card.style1 {
    background-color: #ebe4fb;
  }
}
.pricing-card.style1 .pricing-card-header {
  padding-bottom: 30px;
  margin-bottom: 30px;
  border-bottom: 1px solid var(--border);
}
.pricing-card.style1 .pricing-card-header h6 {
  color: var(--theme);
  font-family: "Manrope", sans-serif;
  font-size: 18px;
  font-style: normal;
  font-weight: 600;
  line-height: 30px;
  letter-spacing: -0.36px;
  margin-bottom: 14px;
}
.pricing-card.style1 .pricing-card-header .price-wrapper {
  margin-bottom: 14px;
}
.pricing-card.style1 .pricing-card-header .price-wrapper .price {
  color: var(--title);
  font-family: "Manrope", sans-serif;
  font-size: 48px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  letter-spacing: -0.96px;
}
.pricing-card.style1 .pricing-card-header .price-wrapper .text {
  color: var(--text);
  font-family: "Manrope", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 28px;
  letter-spacing: -0.32px;
}
.pricing-card.style1 .pricing-card-body {
  margin-bottom: 50px;
}
.pricing-card.style1 .pricing-card-body .checklist li {
  margin-bottom: 15px;
}
.pricing-card.style1 .pricing-card-body .checklist li svg {
  margin-right: 10px;
}
.pricing-card.style1 .theme-btn.style5 {
  display: block;
  margin: auto;
  position: absolute;
  background-color: var(--title);
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  border-radius: 0px 0px 30px 30px;
  -webkit-border-radius: 0px 0px 30px 30px;
  -moz-border-radius: 0px 0px 30px 30px;
  -ms-border-radius: 0px 0px 30px 30px;
  -o-border-radius: 0px 0px 30px 30px;
}
.pricing-card.style1 .theme-btn.style4 {
  display: block;
  margin: auto;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  border-radius: 0px 0px 30px 30px;
  -webkit-border-radius: 0px 0px 30px 30px;
  -moz-border-radius: 0px 0px 30px 30px;
  -ms-border-radius: 0px 0px 30px 30px;
  -o-border-radius: 0px 0px 30px 30px;
}

.pricing-wrapper.style1 {
  position: relative;
  z-index: 5;
}
.pricing-wrapper.style1 .tab-section {
  padding: 30px 0 10px;
  margin-bottom: 40px;
}
.pricing-wrapper.style1 .tab-section .nav-pills {
  padding: 7px 7px;
  border: 1px solid var(--border);
  border-radius: 50px;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  -ms-border-radius: 50px;
  -o-border-radius: 50px;
}
.pricing-wrapper.style1 .tab-section .nav-pills .nav-link {
  color: var(--text);
  font-family: "Manrope", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  text-transform: capitalize;
  border: 0;
  border-radius: 50px;
  margin-left: 4px;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  -ms-border-radius: 50px;
  -o-border-radius: 50px;
}
.pricing-wrapper.style1 .tab-section .nav-pills .nav-link.active {
  color: var(--white);
  background-color: var(--theme);
  margin-right: 4px;
}
@media (max-width: 767px) {
  .pricing-wrapper.style1 .tab-section {
    flex-direction: column;
  }
}

.pricing-section-3 {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top center;
}
.pricing-section-3 .section-title .text {
  font-weight: 500;
  color: #565656;
  max-width: 520px;
  margin: 0 auto;
}

/* 27.Cta */
/*-----------------------------------------------------------------
Theme Name: Niotech
Author: Gramentheme
Author URI: https://themeforest.net/user/gramentheme
Version: 1.0.0 
Description: Niotech - App Landing HTML Template <

-------------------------------------------------------------------
 CSS TABLE OF CONTENTS
-------------------------------------------------------------------

    01.Mixins
    02.Variables
    03.Typography
    04.Buttons 
    05.Gutter 
    06.Container 
    07.Animation 
    08.Helping 
    09.MeanMenu 
    10.Preloader
    11.Title 
    12.Common 
    13.Header
    14.Breadcumb
    15.Footer
    16.Intro 
    17.Brand 
    18.About
    19.Work Process 
    20.Advantage
    21.Wcu
    22.Counter
    23.Faq
    24.Testimonial
    25.Feature
    26.Pricing 
    27.Cta
    28.Blog
    29.Services
    30.Project 
    31.Team
    32.Team Extra
    33.Sidebar
    34.Contact
    35.Input
    36.Useed Technologies
    37.Policy
------------------------------------------------------------------*/
/* 01.Mixins */
/* 02.Variables */
/* 03.Typography */
.cta-container-wrapper.style2 {
  position: relative;
  z-index: 5;
  margin-bottom: -120px;
}
@media (max-width: 1199px) {
  .cta-container-wrapper.style2 {
    margin-bottom: 80px;
  }
}

.cta-wrapper.style1 {
  position: relative;
  border-radius: 50px;
  background: var(--theme);
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  -ms-border-radius: 50px;
  -o-border-radius: 50px;
}
.cta-wrapper.style1 .shape1 {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}
.cta-wrapper.style1 .shape2 {
  position: absolute;
  bottom: 60px;
  left: -130px;
  z-index: 1;
}
.cta-wrapper.style1 .shape3 {
  position: absolute;
  bottom: 57px;
  right: 400px;
  z-index: 1;
}
.cta-wrapper.style1 .shape4 {
  position: absolute;
  top: 53px;
  right: 0;
  z-index: 1;
}
.cta-wrapper.style1 .cta-content {
  position: relative;
  z-index: 3;
}
.cta-wrapper.style1 .cta-content .section-title {
  margin-bottom: 45px;
}
.cta-wrapper.style1 .cta-content .subtitle {
  background-color: #242424;
}
.cta-wrapper.style1 .cta-content .playstore {
  margin-right: 20px;
}
@media (max-width: 767px) {
  .cta-wrapper.style1 .cta-content .playstore {
    display: block;
    margin-bottom: 20px;
  }
}
.cta-wrapper.style1 .cta-content .playstore img {
  max-width: 250px;
}
.cta-wrapper.style1 .cta-thumb {
  position: relative;
  z-index: 3;
}
.cta-wrapper.style1 .cta-thumb img {
  max-width: 620px;
  margin-left: -75px;
}
.cta-wrapper.style2 {
  padding: 50px 60px;
  background-color: var(--theme);
  border-radius: 30px;
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  -ms-border-radius: 30px;
  -o-border-radius: 30px;
}
@media (max-width: 767px) {
  .cta-wrapper.style2 {
    padding: 50px 15px;
  }
}
.cta-wrapper.style2 .cta-content h2 {
  color: var(--white);
  font-family: "Manrope", sans-serif;
  font-size: 40px;
  font-style: normal;
  font-weight: 500;
  line-height: 48px;
  margin-bottom: 20px;
}
.cta-wrapper.style2 .cta-content p {
  color: var(--white);
  font-family: "Manrope", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 30px;
}
.cta-wrapper.style2 .cta-meta {
  display: flex;
  align-items: center;
  gap: 15px;
}
@media (max-width: 767px) {
  .cta-wrapper.style2 .cta-meta {
    flex-direction: column;
  }
}

/* 28.Blog */
/*-----------------------------------------------------------------
Theme Name: Niotech
Author: Gramentheme
Author URI: https://themeforest.net/user/gramentheme
Version: 1.0.0 
Description: Niotech - App Landing HTML Template <

-------------------------------------------------------------------
 CSS TABLE OF CONTENTS
-------------------------------------------------------------------

    01.Mixins
    02.Variables
    03.Typography
    04.Buttons 
    05.Gutter 
    06.Container 
    07.Animation 
    08.Helping 
    09.MeanMenu 
    10.Preloader
    11.Title 
    12.Common 
    13.Header
    14.Breadcumb
    15.Footer
    16.Intro 
    17.Brand 
    18.About
    19.Work Process 
    20.Advantage
    21.Wcu
    22.Counter
    23.Faq
    24.Testimonial
    25.Feature
    26.Pricing 
    27.Cta
    28.Blog
    29.Services
    30.Project 
    31.Team
    32.Team Extra
    33.Sidebar
    34.Contact
    35.Input
    36.Useed Technologies
    37.Policy
------------------------------------------------------------------*/
/* 01.Mixins */
/* 02.Variables */
/* 03.Typography */
.blog-wrapper.style1 .section-title {
  margin-bottom: 50px;
}

.blog-card.style1 {
  padding: 24px;
  border-radius: 15px;
  border: 1px solid var(--border);
  background: var(--white);
}
.blog-card.style1 .thumb {
  max-width: 100%;
}
.blog-card.style1 .thumb img {
  width: 100%;
}
.blog-card.style1 .body {
  position: relative;
}
.blog-card.style1 .body .tag-meta {
  position: absolute;
  top: -50px;
  left: 0;
  display: inline-block;
  color: var(--theme);
  font-family: var(--title);
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.32px;
  padding: 6px 12px;
  gap: 12px;
  border-radius: 100px;
  background: var(--theme3);
}
.blog-card.style1 .body .tag-meta img {
  margin-right: 10px;
}
.blog-card.style1 .body h3 {
  margin-top: 30px;
  padding-bottom: 24px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--border);
}
.blog-card.style1 .body h3 a {
  color: var(--title);
  font-family: "Manrope", sans-serif;
  font-size: 24px;
  font-style: normal;
  font-weight: 600;
  line-height: 34px;
  letter-spacing: -0.48px;
}
.blog-card.style1 .body .blog-meta {
  display: flex;
  align-items: center;
}
.blog-card.style1 .body .blog-meta .item {
  position: relative;
}
.blog-card.style1 .body .blog-meta .item .icon {
  margin-right: 15px;
}
.blog-card.style1 .body .blog-meta .item .text {
  color: var(--text);
  font-family: var(--title);
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 30px;
  letter-spacing: -0.32px;
}
.blog-card.style1 .body .blog-meta .item.child1 {
  position: relative;
  margin-right: 60px;
}
.blog-card.style1 .body .blog-meta .item.child1:before {
  position: absolute;
  content: "";
  width: 1px;
  height: 16px;
  background: var(--theme);
  right: -30px;
  top: 8px;
}
.blog-card.style2 {
  overflow: hidden;
  position: relative;
  padding: 24px;
  max-width: 370px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background-color: var(--white);
  -webkit-border-radius: 16px;
  -moz-border-radius: 16px;
  -ms-border-radius: 16px;
  -o-border-radius: 16px;
}
@media (max-width: 767px) {
  .blog-card.style2 {
    padding: 15px;
    max-width: 300px;
  }
}
.blog-card.style2 .blog-card-thumb {
  overflow: hidden;
  border-radius: 16px;
  -webkit-border-radius: 16px;
  -moz-border-radius: 16px;
  -ms-border-radius: 16px;
  -o-border-radius: 16px;
}
.blog-card.style2 .blog-card-thumb img {
  width: 322px;
  height: 216px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 16px;
  border: 1px solid var(--border);
  -webkit-border-radius: 16px;
  -moz-border-radius: 16px;
  -ms-border-radius: 16px;
  -o-border-radius: 16px;
  transition: all 0.4s ease;
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -ms-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
}
.blog-card.style2 .blog-card-body .blog-title {
  margin-bottom: 20px;
}
.blog-card.style2 .blog-card-body .blog-title a {
  color: var(--title);
  font-family: "Manrope", sans-serif;
  font-size: 22px;
  font-style: normal;
  font-weight: 700;
  line-height: 32px;
  transition: all 0.4s ease;
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -ms-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
}
.blog-card.style2 .blog-card-body .blog-title a:hover {
  color: var(--theme2);
}
.blog-card.style2 .blog-card-body .btn-wrapper a {
  color: var(--text);
  font-family: "Manrope", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 28px;
  text-transform: capitalize;
}
.blog-card.style2 .blog-card-body .btn-wrapper a:hover {
  color: var(--theme);
}
.blog-card.style2 .blog-card-body .btn-wrapper img,
.blog-card.style2 .blog-card-body .btn-wrapper i {
  color: var(--text);
  font-family: "Manrope", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 28px;
  text-transform: capitalize;
}
.blog-card.style2 .blog-card-body .tag-cloud {
  display: flex;
  align-items: center;
  gap: 32px;
  margin-top: 45px;
  margin-bottom: 5px;
}
.blog-card.style2 .blog-card-body .tag-cloud.style2 {
  margin-top: 25px;
}
.blog-card.style2 .calendar {
  position: absolute;
  top: 205px;
  left: 44px;
  border-radius: 10px;
  background-color: var(--white);
  box-shadow: 0px 4px 30px 0px rgba(0, 0, 0, 0.08);
}
.blog-card.style2 .calendar .date {
  padding: 10px 18px;
  color: var(--white);
  text-align: center;
  font-family: "Manrope", sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  text-transform: uppercase;
  margin-bottom: 3px;
  border-radius: 10px;
  background-color: var(--theme);
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
}
.blog-card.style2 .calendar .month {
  color: var(--text);
  text-align: center;
  font-family: "Manrope", sans-serif;
  font-size: 13px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  text-transform: uppercase;
}
.blog-card.style2:hover .blog-card-thumb img {
  transform: scale(1.23);
  -webkit-transform: scale(1.23);
  -moz-transform: scale(1.23);
  -ms-transform: scale(1.23);
  -o-transform: scale(1.23);
}

/*----------------------------------------------
    # Blog style here
----------------------------------------------*/
.blog-wrap.style1 {
  position: relative;
}
.blog-wrap.style1 .shape1_1 {
  position: absolute;
  bottom: 0;
  right: 0;
}
.blog-wrap.style2 {
  position: relative;
}
.blog-wrap.style2 .shape2_1 {
  position: absolute;
  top: 142px;
  left: 0;
}
.blog-wrap.style2 .shape2_2 {
  position: absolute;
  bottom: 50px;
  right: 0;
}

.blog-card-wrap.style1 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  place-items: center;
  gap: 30px;
}
@media (max-width: 1399px) {
  .blog-card-wrap.style1 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 991px) {
  .blog-card-wrap.style1 {
    grid-template-columns: repeat(1, 1fr);
    align-items: center;
    justify-content: center;
  }
}
.blog-card-wrap.style2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  place-items: center;
  gap: 30px;
}
@media (max-width: 1199px) {
  .blog-card-wrap.style2 {
    grid-template-columns: repeat(1, 1fr);
  }
}
@media (max-width: 991px) {
  .blog-card-wrap.style2 {
    grid-template-columns: repeat(1, 1fr);
  }
}
.blog-card-wrap.style3 {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 30px;
}

/*-----------------------------------------------------------------
Theme Name: Niotech
Author: Gramentheme
Author URI: https://themeforest.net/user/gramentheme
Version: 1.0.0 
Description: Niotech - App Landing HTML Template <

-------------------------------------------------------------------
 CSS TABLE OF CONTENTS
-------------------------------------------------------------------

    01.Mixins
    02.Variables
    03.Typography
    04.Buttons 
    05.Gutter 
    06.Container 
    07.Animation 
    08.Helping 
    09.MeanMenu 
    10.Preloader
    11.Title 
    12.Common 
    13.Header
    14.Breadcumb
    15.Footer
    16.Intro 
    17.Brand 
    18.About
    19.Work Process 
    20.Advantage
    21.Wcu
    22.Counter
    23.Faq
    24.Testimonial
    25.Feature
    26.Pricing 
    27.Cta
    28.Blog
    29.Services
    30.Project 
    31.Team
    32.Team Extra
    33.Sidebar
    34.Contact
    35.Input
    36.Useed Technologies
    37.Policy
------------------------------------------------------------------*/
/* 01.Mixins */
/* 02.Variables */
/* 03.Typography */
/*----------------------------------------------
    # Blog Extra style here
----------------------------------------------*/
.news-wrapper {
  padding: 0 75px;
}
@media (max-width: 1399px) {
  .news-wrapper {
    padding: 0;
  }
}

.single-news-items {
  margin-top: 30px;
  padding: 40px 20px;
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 30px;
}
@media (max-width: 1399px) {
  .single-news-items {
    flex-wrap: wrap;
  }
}
@media (max-width: 991px) {
  .single-news-items {
    flex-wrap: initial;
  }
}
@media (max-width: 575px) {
  .single-news-items {
    flex-wrap: wrap;
  }
}
.single-news-items .news-image {
  height: 220px;
  width: 220px;
  flex-basis: 100%;
  position: relative;
}
.single-news-items .news-image .post-date {
  position: absolute;
  top: 25px;
  left: 25px;
  background-color: var(--white);
  padding: 7px 10px;
}
.single-news-items .news-image .post-date span {
  color: var(--title);
  font-weight: 600;
}
.single-news-items .news-content h3 {
  margin-bottom: 10px;
}
.single-news-items .news-content h3 a:hover {
  color: var(--theme);
}
.single-news-items .news-content .theme-btn-2 {
  color: var(--theme);
}

.news-section-3 {
  margin-bottom: -50px;
}

.news-card-items {
  margin-top: 30px;
}
.news-card-items .news-image {
  position: relative;
}
.news-card-items .news-image .post-date {
  padding: 12px 24px;
  background-color: var(--theme);
  position: absolute;
  bottom: 40px;
  left: 0;
}
.news-card-items .news-image .post-date h3 {
  font-weight: 700;
  font-size: 24px;
  color: var(--white);
}
.news-card-items .news-image .post-date h3 span {
  font-weight: 400;
  font-size: 16px;
  color: var(--white);
}
.news-card-items .news-content {
  padding: 30px;
  background-color: var(--white);
  position: relative;
  z-index: 9;
  margin-right: 40px;
  margin-top: -40px;
}
.news-card-items .news-content ul {
  display: flex;
  gap: 50px;
  margin-bottom: 15px;
}
@media (max-width: 1399px) {
  .news-card-items .news-content ul {
    gap: 20px;
  }
}
.news-card-items .news-content ul li {
  font-size: 14px;
  font-weight: 500;
}
.news-card-items .news-content ul li i {
  color: var(--theme);
  margin-right: 5px;
}
.news-card-items .news-content h3 {
  font-weight: bold;
  margin-bottom: 5px;
}
.news-card-items .news-content h3 a:hover {
  color: var(--theme);
}
.news-card-items.style-2 {
  padding-bottom: 50px;
}
.news-card-items.style-2 .news-image {
  position: relative;
}
.news-card-items.style-2 .news-image .post-date {
  position: absolute;
  top: 20px;
  left: 20px;
  bottom: initial;
}
.news-card-items.style-2 .news-content {
  margin: 0;
}
.news-card-items.style-2 .news-content ul li {
  font-size: 16px;
}
.news-card-items.style-3 {
  padding-bottom: 0;
  background-color: var(--white);
  box-shadow: none;
}
.news-card-items.style-3 .news-image {
  padding: 15px 15px 0 15px;
}
.news-card-items.style-3 .news-image .post-date {
  left: 30px;
  top: 30px;
}
.news-card-items.style-3 .content {
  box-shadow: none;
}

.news-standard-wrapper .news-standard-items {
  border: 1px solid var(--border);
  padding: 30px;
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
}
.news-standard-wrapper .news-standard-items:not(:last-child) {
  margin-bottom: 20px;
}
.news-standard-wrapper .news-standard-items .news-thumb {
  position: relative;
}
.news-standard-wrapper .news-standard-items .news-thumb img {
  max-width: 100%;
}
.news-standard-wrapper .news-standard-items .news-thumb .post-date {
  position: absolute;
  top: 20px;
  left: 20px;
  display: flex;
  width: 59px;
  padding: 12px 16px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
  border-radius: 8px;
  background: var(--theme);
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  -ms-border-radius: 8px;
  -o-border-radius: 8px;
}
.news-standard-wrapper .news-standard-items .news-thumb .post-date h3 {
  color: var(--white);
  font-family: "Manrope", sans-serif;
  text-align: center;
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: 22px;
  margin-bottom: 0;
}
.news-standard-wrapper .news-standard-items .news-thumb .post-date h3 span {
  color: var(--white);
  font-family: "Manrope", sans-serif;
  text-align: center;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 22px;
}
.news-standard-wrapper .news-standard-items .news-content {
  margin-top: 20px;
  position: relative;
  z-index: 9;
}
.news-standard-wrapper .news-standard-items .news-content ul {
  display: flex;
  align-items: center;
  gap: 50px;
  margin-bottom: 15px;
  list-style-type: none;
  padding-left: 0;
}
@media (max-width: 1399px) {
  .news-standard-wrapper .news-standard-items .news-content ul {
    gap: 20px;
  }
}
.news-standard-wrapper .news-standard-items .news-content ul li {
  color: var(--title);
  font-family: "Manrope", sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 22px;
}
.news-standard-wrapper .news-standard-items .news-content ul li i {
  color: var(--theme);
  margin-right: 5px;
}
.news-standard-wrapper .news-standard-items .news-content h3 {
  margin-bottom: 10px;
}
.news-standard-wrapper .news-standard-items .news-content h3 a {
  color: var(--title);
  font-family: "Manrope", sans-serif;
  font-size: 30px;
  font-style: normal;
  font-weight: 700;
  line-height: 32px;
}
.news-standard-wrapper .news-standard-items .news-content h3 a:hover {
  color: var(--theme2);
}
.news-standard-wrapper .news-standard-items .news-content a i {
  margin-left: 5px;
}

.news-details-area .blog-post-details .single-blog-post .post-featured-thumb {
  height: 400px;
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
}
@media (max-width: 991px) {
  .news-details-area .blog-post-details .single-blog-post .post-featured-thumb {
    height: 400px;
  }
}
.news-details-area .blog-post-details .single-blog-post .post-content {
  margin-top: 30px;
}
.news-details-area .blog-post-details .single-blog-post .post-content .post-list {
  gap: 30px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 20px;
  padding-left: 0;
  list-style-type: none;
}
.news-details-area .blog-post-details .single-blog-post .post-content .post-list li {
  font-size: 14px;
  font-weight: 500;
}
.news-details-area .blog-post-details .single-blog-post .post-content .post-list li i, .news-details-area .blog-post-details .single-blog-post .post-content .post-list li img {
  color: var(--theme);
  margin-right: 5px;
}
.news-details-area .blog-post-details .single-blog-post .post-content h3 {
  margin-bottom: 20px;
  font-size: 32px;
}
@media (max-width: 767px) {
  .news-details-area .blog-post-details .single-blog-post .post-content h3 {
    font-size: 24px;
  }
}
.news-details-area .blog-post-details .single-blog-post .post-content h3 a:hover {
  color: var(--theme);
}
.news-details-area .blog-post-details .single-blog-post .post-content .hilight-text {
  border-left: 4px solid var(--theme);
  padding: 40px;
  background-color: #F5F5F5;
}
.news-details-area .blog-post-details .single-blog-post .post-content .hilight-text p {
  max-width: 650px;
  font-weight: 500;
  text-transform: capitalize;
  font-style: italic;
  line-height: 26px;
}
.news-details-area .blog-post-details .single-blog-post .post-content .hilight-text svg {
  float: right;
  margin-top: -10px;
}
.news-details-area .blog-post-details .single-blog-post .post-content .details-image img {
  max-width: 100%;
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
}
.news-details-area .blog-post-details .tag-share-wrap {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 30px 0;
}
.news-details-area .blog-post-details .tag-share-wrap .tagcloud a {
  display: inline-flex;
  padding: 10px 16px;
  color: var(--title);
  font-family: "Manrope", sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 14px;
  text-transform: capitalize;
  background: var(--white);
  margin-right: 5px;
  margin-bottom: 10px;
  border: none;
  border: 1px solid #E6E5E5;
  border-radius: 4px;
  transition: all 0.3s ease 0s;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
}
@media (max-width: 767px) {
  .news-details-area .blog-post-details .tag-share-wrap .tagcloud a {
    margin-bottom: 5px;
  }
}
.news-details-area .blog-post-details .tag-share-wrap .tagcloud a:hover {
  background: var(--theme);
  color: var(--white) !important;
}
.news-details-area .blog-post-details .tag-share-wrap .social-share span {
  font-size: 18px;
  color: var(--title);
  font-weight: 600;
}
.news-details-area .blog-post-details .tag-share-wrap .social-share a {
  font-size: 18px;
  color: var(--text);
}
.news-details-area .blog-post-details .tag-share-wrap .social-share a:not(:last-child) {
  margin-right: 10px;
}
.news-details-area .blog-post-details .tag-share-wrap .social-share a:hover {
  color: var(--theme);
}
.news-details-area .blog-post-details .comments-area {
  margin-top: 40px;
}
.news-details-area .blog-post-details .comments-area .comments-heading {
  margin-bottom: 0px;
}
@media (max-width: 767px) {
  .news-details-area .blog-post-details .comments-area .comments-heading {
    margin-bottom: 20px;
  }
}
.news-details-area .blog-post-details .comments-area .comments-heading h3 {
  font-size: 32px;
  font-weight: 500;
  color: var(--title);
  font-family: "Manrope", sans-serif;
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: 37px;
  margin-bottom: 0;
}
@media (max-width: 767px) {
  .news-details-area .blog-post-details .comments-area .comments-heading h3 {
    font-size: 28px;
  }
}
.news-details-area .blog-post-details .comments-area .blog-single-comment {
  border-bottom: 1px solid var(--border);
}
@media (max-width: 767px) {
  .news-details-area .blog-post-details .comments-area .blog-single-comment {
    flex-wrap: wrap;
    gap: 20px;
  }
}
.news-details-area .blog-post-details .comments-area .blog-single-comment .content .head .con h5 {
  margin-bottom: 0;
}
.news-details-area .blog-post-details .comments-area .blog-single-comment .content .head .con h5 a {
  color: var(--title);
  font-family: "Manrope", sans-serif;
  font-size: 20px;
  font-style: normal;
  font-weight: 600;
  line-height: 22px;
  text-transform: capitalize;
  transition: all 0.4s ease-in-out;
}
.news-details-area .blog-post-details .comments-area .blog-single-comment .content .head .con h5 a:hover {
  color: var(--theme2);
}
.news-details-area .blog-post-details .comments-area .blog-single-comment .content .head .btn {
  border: none !important;
}
.news-details-area .blog-post-details .comments-area .blog-single-comment .content .head .btn a {
  display: inline-flex;
  padding: 5px 16px;
  justify-content: center;
  align-items: center;
  border-radius: 50px;
  background: var(--theme);
  color: var(--white);
}
.news-details-area .blog-post-details .comments-area .blog-single-comment .content .head .btn a:hover {
  background: var(--title);
  color: var(--white) !important;
}
.news-details-area .blog-post-details .comments-area .blog-single-comment .content .reply {
  border-radius: 30px;
  padding: 5px 15px;
  font-weight: 400;
  background-color: var(--white);
  color: var(--theme);
}
.news-details-area .blog-post-details .comment-form-wrap h3 {
  font-size: 32px;
  margin-bottom: 30px;
}
@media (max-width: 767px) {
  .news-details-area .blog-post-details .comment-form-wrap h3 {
    font-size: 28px;
    margin-bottom: 20px;
  }
}
.news-details-area .blog-post-details .comment-form-wrap .form-clt input,
.news-details-area .blog-post-details .comment-form-wrap .form-clt textarea {
  width: 100%;
  outline: none;
  border: none;
  background-color: transparent;
  border: 1px solid var(--border);
  padding: 16px 20px;
  font-weight: 500;
}
.news-details-area .blog-post-details .comment-form-wrap .form-clt input::-moz-placeholder, .news-details-area .blog-post-details .comment-form-wrap .form-clt textarea::-moz-placeholder {
  color: var(--text);
}
.news-details-area .blog-post-details .comment-form-wrap .form-clt input::placeholder,
.news-details-area .blog-post-details .comment-form-wrap .form-clt textarea::placeholder {
  color: var(--text);
}
.news-details-area .blog-post-details .comment-form-wrap .form-clt textarea {
  padding-bottom: 100px;
}

/* 29.Services */
/*-----------------------------------------------------------------
Theme Name: Niotech
Author: Gramentheme
Author URI: https://themeforest.net/user/gramentheme
Version: 1.0.0 
Description: Niotech - App Landing HTML Template <

-------------------------------------------------------------------
 CSS TABLE OF CONTENTS
-------------------------------------------------------------------

    01.Mixins
    02.Variables
    03.Typography
    04.Buttons 
    05.Gutter 
    06.Container 
    07.Animation 
    08.Helping 
    09.MeanMenu 
    10.Preloader
    11.Title 
    12.Common 
    13.Header
    14.Breadcumb
    15.Footer
    16.Intro 
    17.Brand 
    18.About
    19.Work Process 
    20.Advantage
    21.Wcu
    22.Counter
    23.Faq
    24.Testimonial
    25.Feature
    26.Pricing 
    27.Cta
    28.Blog
    29.Services
    30.Project 
    31.Team
    32.Team Extra
    33.Sidebar
    34.Contact
    35.Input
    36.Useed Technologies
    37.Policy
------------------------------------------------------------------*/
/* 01.Mixins */
/* 02.Variables */
/* 03.Typography */
.service-box.style1 {
  padding: 30px;
  border-radius: 30px;
  border: 3px solid transparent;
  transition: all 0.4s;
  -webkit-transition: all 0.4s;
  -moz-transition: all 0.4s;
  -ms-transition: all 0.4s;
  -o-transition: all 0.4s;
}
.service-box.style1 .icon-box {
  margin-bottom: 25px;
  transition: all 0.4s;
  -webkit-transition: all 0.4s;
  -moz-transition: all 0.4s;
  -ms-transition: all 0.4s;
  -o-transition: all 0.4s;
}
.service-box.style1 .content h3 {
  color: var(--title);
  font-family: "Manrope", sans-serif;
  font-size: 20px;
  font-style: normal;
  font-weight: 600;
  line-height: 30px;
  letter-spacing: -0.4px;
  margin-bottom: 10px;
}
.service-box.style1 .content .text {
  color: var(--text);
  font-family: "Manrope", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 28px;
  letter-spacing: -0.32px;
}
.service-box.style1:hover, .service-box.style1.active {
  border: 3px solid var(--theme);
  background: var(--theme3);
}
.service-box.style1:hover .icon-box, .service-box.style1.active .icon-box {
  transform: rotate(-360deg);
  -webkit-transform: rotate(-360deg);
  -moz-transform: rotate(-360deg);
  -ms-transform: rotate(-360deg);
  -o-transform: rotate(-360deg);
}
.service-box.style3 {
  border-radius: 30px;
  border: 3px solid transparent;
  transition: all 0.4s;
  -webkit-transition: all 0.4s;
  -moz-transition: all 0.4s;
  -ms-transition: all 0.4s;
  -o-transition: all 0.4s;
}
.service-box.style3 .icon-box {
  margin-bottom: 25px;
  transition: all 0.4s;
  -webkit-transition: all 0.4s;
  -moz-transition: all 0.4s;
  -ms-transition: all 0.4s;
  -o-transition: all 0.4s;
}
.service-box.style3 .content h3 {
  color: var(--title);
  font-family: "Manrope", sans-serif;
  font-size: 20px;
  font-style: normal;
  font-weight: 600;
  line-height: 30px;
  letter-spacing: -0.4px;
  margin-bottom: 10px;
}
.service-box.style3 .content .text {
  color: var(--text);
  font-family: "Manrope", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 28px;
  letter-spacing: -0.32px;
}
.service-box.style3:hover .icon-box {
  transform: rotate(-360deg);
  -webkit-transform: rotate(-360deg);
  -moz-transform: rotate(-360deg);
  -ms-transform: rotate(-360deg);
  -o-transform: rotate(-360deg);
}

.service-section-3 .service-thumb {
  margin-bottom: -302px;
}
@media (max-width: 767px) {
  .service-section-3 .service-thumb {
    margin-bottom: 60px;
  }
}
.service-section-3 .service-thumb img {
  max-width: 100%;
}

.service-container-wrapper.style3 {
  position: relative;
  background: rgba(116, 68, 253, 0.06);
  padding-top: 300px;
}
@media (max-width: 767px) {
  .service-container-wrapper.style3 {
    margin-top: 0;
    padding-top: 60px;
  }
}
.service-container-wrapper.style3 .shape1 {
  position: absolute;
  bottom: 0;
  left: 0;
}
.service-container-wrapper.style3 .shape2 {
  position: absolute;
  top: 0;
  right: 0;
}

.service-wrapper.style3 {
  position: relative;
  z-index: 5;
}
.service-wrapper.style3 .service-thumb {
  border-radius: 30px;
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  -ms-border-radius: 30px;
  -o-border-radius: 30px;
}
.service-wrapper.style3 .service-thumb img {
  border-radius: 30px;
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  -ms-border-radius: 30px;
  -o-border-radius: 30px;
}
.service-wrapper.style3 h2 {
  color: var(--title);
  font-family: "Manrope", sans-serif;
  font-size: 36px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  letter-spacing: -0.72px;
  max-width: 580px;
  margin: 30px 0;
}
.service-wrapper.style3 .text {
  margin-bottom: 30px;
}

.service-details-wrapper .main-thumb img {
  max-width: 100%;
}
.service-details-wrapper .title {
  color: var(--title);
  font-family: "Manrope", sans-serif;
  font-size: 50px;
  font-style: normal;
  font-weight: 700;
  line-height: 60px;
  text-transform: uppercase;
  margin-top: 40px;
}
@media (max-width: 767px) {
  .service-details-wrapper .title {
    font-size: 35px;
    line-height: 45px;
  }
}
.service-details-wrapper .tagcloud {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 25px;
  padding-bottom: 35px;
  border-bottom: 1px solid rgba(30, 41, 46, 0.15);
}
.service-details-wrapper .tagcloud a {
  display: inline-block;
  padding: 10px 16px;
  border-radius: 100px;
  border: 1px solid rgba(30, 41, 46, 0.15);
  color: var(--Primary-Font-Color, #282C32);
  font-family: "Manrope", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 16px;
  text-transform: capitalize;
}
.service-details-wrapper .details-box1 {
  margin-top: 30px;
}
.service-details-wrapper .details-box1 .subtitle {
  color: var(--title);
  font-family: "Manrope", sans-serif;
  font-size: 36px;
  font-style: normal;
  font-weight: 700;
  line-height: 48px;
  text-transform: uppercase;
  margin-bottom: 5px;
}
@media (max-width: 767px) {
  .service-details-wrapper .details-box1 .subtitle {
    font-size: 30px;
    line-height: 45px;
  }
}
.service-details-wrapper .details-box1 .text {
  color: var(--border-5);
  font-family: "Manrope", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 28px;
  text-transform: lowercase;
}
.service-details-wrapper .details-box2 {
  margin-top: 30px;
  margin-bottom: -0.3em;
}
.service-details-wrapper .details-box2 .subtitle {
  color: var(--title);
  font-family: "Manrope", sans-serif;
  font-size: 36px;
  font-style: normal;
  font-weight: 700;
  line-height: 48px;
  text-transform: uppercase;
  margin-bottom: 5px;
}
@media (max-width: 767px) {
  .service-details-wrapper .details-box2 .subtitle {
    font-size: 30px;
    line-height: 45px;
  }
}
.service-details-wrapper .details-box2 .text {
  color: var(--border-5);
  font-family: "Manrope", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 28px;
  text-transform: lowercase;
}
.service-details-wrapper .details-box2 .feature-wrapper {
  display: flex;
  align-items: center;
  gap: 60px;
  flex-wrap: wrap;
  margin-top: 10px;
}
@media (max-width: 767px) {
  .service-details-wrapper .details-box2 .feature-wrapper {
    gap: 5px;
  }
}
.service-details-wrapper .details-box2 .feature-wrapper ul {
  margin-left: 20px;
}
.service-details-wrapper .details-box2 .feature-wrapper ul li {
  list-style-type: disc;
  color: var(--title);
  font-family: "Manrope", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 28px;
  text-transform: lowercase;
  margin-bottom: 15px;
}
.service-details-wrapper .details-box2 .progress-wrap {
  margin-bottom: 30px;
}
.service-details-wrapper .details-box2 .progress-wrap .progress-container {
  max-width: 100%;
  border-radius: 0;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  -ms-border-radius: 0;
  -o-border-radius: 0;
}
.service-details-wrapper .details-box2 .progress-wrap .progress-container .progress-bar {
  background-color: var(--theme);
}
.service-details-wrapper .details-box2 .progress-wrap .progress-meta {
  margin-bottom: 10px;
}
.service-details-wrapper .details-box2 .progress-wrap .progress-meta .title {
  margin-top: 0;
  color: var(--title);
  font-family: "Manrope", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 30px;
  text-transform: uppercase;
}
.service-details-wrapper .details-box2 .thumb-wrapper {
  margin-top: 40px;
  margin-bottom: 30px;
}
.service-details-wrapper .details-box2 .thumb-wrapper .thumb img {
  max-width: 100%;
}
.service-details-wrapper .details-box2 .text1 {
  color: var(--border-5);
  font-family: "Manrope", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 28px;
}
.service-details-wrapper .details-box2 .text2 {
  color: var(--border-5);
  font-family: "Manrope", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 28px;
  margin-top: 15px;
}

/* 30.Project */
/*-----------------------------------------------------------------
Theme Name: Niotech
Author: Gramentheme
Author URI: https://themeforest.net/user/gramentheme
Version: 1.0.0 
Description: Niotech - App Landing HTML Template <

-------------------------------------------------------------------
 CSS TABLE OF CONTENTS
-------------------------------------------------------------------

    01.Mixins
    02.Variables
    03.Typography
    04.Buttons 
    05.Gutter 
    06.Container 
    07.Animation 
    08.Helping 
    09.MeanMenu 
    10.Preloader
    11.Title 
    12.Common 
    13.Header
    14.Breadcumb
    15.Footer
    16.Intro 
    17.Brand 
    18.About
    19.Work Process 
    20.Advantage
    21.Wcu
    22.Counter
    23.Faq
    24.Testimonial
    25.Feature
    26.Pricing 
    27.Cta
    28.Blog
    29.Services
    30.Project 
    31.Team
    32.Team Extra
    33.Sidebar
    34.Contact
    35.Input
    36.Useed Technologies
    37.Policy
------------------------------------------------------------------*/
/* 01.Mixins */
/* 02.Variables */
/* 03.Typography */
.project-card.style1 {
  position: relative;
  overflow: hidden;
}
.project-card.style1 .project-thumb {
  max-width: 100%;
}
@media (min-width: 768px) {
  .project-card.style1 .project-thumb img {
    max-width: 100%;
  }
}
.project-card.style1 .project-thumb img {
  width: 100%;
}
.project-card.style1 .project-content {
  opacity: 0;
  visibility: hidden;
  position: absolute;
  bottom: -40px;
  left: 40px;
  right: 40px;
  padding: 25px;
  background-color: var(--white);
  max-width: 323px;
  border-radius: 5px;
  transition: all 0.4s;
  -webkit-transition: all 0.4s;
  -moz-transition: all 0.4s;
  -ms-transition: all 0.4s;
  -o-transition: all 0.4s;
}
@media (max-width: 991px) {
  .project-card.style1 .project-content {
    left: 10px;
    right: 10px;
  }
}
.project-card.style1 .project-content h3 {
  line-height: normal;
  margin-bottom: 5px;
}
.project-card.style1 .project-content h3 a {
  color: var(--title);
  font-family: "Manrope", sans-serif;
  font-size: 30px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}
.project-card.style1 .text {
  color: var(--theme);
  font-family: "Manrope", sans-serif;
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: 30px;
}
.project-card.style1:hover .project-content {
  opacity: 1;
  visibility: visible;
  bottom: 40px;
}
@media (max-width: 991px) {
  .project-card.style1:hover .project-content {
    bottom: 10px;
  }
}

.project-details-wapper .main-thumb {
  margin-bottom: 60px;
}
.project-details-wapper .main-thumb img {
  max-width: 100%;
}
.project-details-wapper .single-desc {
  margin-top: 60px;
}
.project-details-wapper .single-desc .single-desc-title {
  color: #282C32;
  font-family: "Manrope", sans-serif;
  font-size: 32px;
  font-style: normal;
  font-weight: 600;
  line-height: 130%;
  text-transform: capitalize;
  margin-bottom: 40px;
}
.project-details-wapper .single-desc .text1 {
  color: var(--text);
  font-family: "Manrope", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 28px;
  text-transform: capitalize;
  margin-bottom: 30px;
}
.project-details-wapper .single-desc .text2 {
  color: var(--text);
  font-family: "Manrope", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 28px;
  text-transform: capitalize;
  padding-bottom: 40px;
  margin-bottom: 40px;
  border-bottom: 1px solid #E5E5E5;
}
.project-details-wapper .testimonial-wrap .testimonial-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 40px;
  margin-bottom: 60px;
  border-bottom: 1px solid #E5E5E5;
}
.project-details-wapper .testimonial-wrap .testimonial-card .tesimonial-content .icon {
  margin-bottom: 20px;
}
.project-details-wapper .testimonial-wrap .testimonial-card .tesimonial-content .text3 {
  color: var(--title);
  font-family: "Manrope", sans-serif;
  font-size: 24px;
  font-style: normal;
  font-weight: 600;
  line-height: 50px;
  text-transform: capitalize;
  max-width: 650px;
}
.project-details-wapper .testimonial-wrap .testimonial-card .tesimonial-content .testimonial-author {
  color: var(--title);
  font-family: "Manrope", sans-serif;
  font-size: 24px;
  font-style: normal;
  font-weight: 600;
  line-height: 50px;
  text-transform: capitalize;
}
@media (max-width: 767px) {
  .project-details-wapper .testimonial-wrap .testimonial-card {
    flex-direction: column;
  }
}
.project-details-wapper .single-desc2 .single-desc-title {
  color: var(--title);
  font-family: "Manrope", sans-serif;
  font-size: 32px;
  font-style: normal;
  font-weight: 600;
  line-height: 130%;
  text-transform: capitalize;
  margin-bottom: 40px;
}
.project-details-wapper .single-desc2 .text1 {
  color: var(--text);
  font-family: "Manrope", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 28px;
  text-transform: capitalize;
  margin-bottom: 30px;
}
.project-details-wapper .single-desc2 .text2 {
  color: var(--text);
  font-family: "Manrope", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 28px;
  text-transform: capitalize;
  margin-bottom: 60px;
}
.project-details-wapper .projectSliderThree .swiper {
  overflow: visible !important;
}
.project-details-wapper .projectSliderThree .swiper .swiper-slide .project-thumb img {
  max-width: 100%;
}

/* 31.Team */
/*-----------------------------------------------------------------
Theme Name: Niotech
Author: Gramentheme
Author URI: https://themeforest.net/user/gramentheme
Version: 1.0.0 
Description: Niotech - App Landing HTML Template <

-------------------------------------------------------------------
 CSS TABLE OF CONTENTS
-------------------------------------------------------------------

    01.Mixins
    02.Variables
    03.Typography
    04.Buttons 
    05.Gutter 
    06.Container 
    07.Animation 
    08.Helping 
    09.MeanMenu 
    10.Preloader
    11.Title 
    12.Common 
    13.Header
    14.Breadcumb
    15.Footer
    16.Intro 
    17.Brand 
    18.About
    19.Work Process 
    20.Advantage
    21.Wcu
    22.Counter
    23.Faq
    24.Testimonial
    25.Feature
    26.Pricing 
    27.Cta
    28.Blog
    29.Services
    30.Project 
    31.Team
    32.Team Extra
    33.Sidebar
    34.Contact
    35.Input
    36.Useed Technologies
    37.Policy
------------------------------------------------------------------*/
/* 01.Mixins */
/* 02.Variables */
/* 03.Typography */
.team-card.style1 {
  margin-top: 150px;
  text-align: center;
  padding: 24px;
  border-radius: 20px;
  background: #F8F8FF;
}
.team-card.style1 .team-thumb {
  margin-top: -150px;
}
.team-card.style1 .team-thumb img {
  max-width: 100%;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
}
.team-card.style1 .team-card-content h3 {
  margin-top: 20px;
  margin-bottom: 5px;
}
.team-card.style1 .team-card-content h3 a {
  color: var(--title);
  text-align: center;
  font-family: "Manrope", sans-serif;
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}
.team-card.style1 .designation {
  color: var(--title);
  text-align: center;
  font-family: "Manrope", sans-serif;
  font-size: 18px;
  font-style: normal;
  font-weight: 300;
  line-height: normal;
  margin-bottom: 15px;
}
.team-card.style1 .social-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}
.team-card.style1 .social-links li a {
  display: inline-block;
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  background-color: #E7F1FF;
  color: var(--theme);
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
}
.team-card.style1 .social-links li a:hover {
  background-color: #FFEBEE;
  color: #E60023 !important;
}

.team-section-3 {
  margin-top: -1.4em;
}

/* 32.Team Extra */
/*-----------------------------------------------------------------
Theme Name: Niotech
Author: Gramentheme
Author URI: https://themeforest.net/user/gramentheme
Version: 1.0.0 
Description: Niotech - App Landing HTML Template <

-------------------------------------------------------------------
 CSS TABLE OF CONTENTS
-------------------------------------------------------------------

    01.Mixins
    02.Variables
    03.Typography
    04.Buttons 
    05.Gutter 
    06.Container 
    07.Animation 
    08.Helping 
    09.MeanMenu 
    10.Preloader
    11.Title 
    12.Common 
    13.Header
    14.Breadcumb
    15.Footer
    16.Intro 
    17.Brand 
    18.About
    19.Work Process 
    20.Advantage
    21.Wcu
    22.Counter
    23.Faq
    24.Testimonial
    25.Feature
    26.Pricing 
    27.Cta
    28.Blog
    29.Services
    30.Project 
    31.Team
    32.Team Extra
    33.Sidebar
    34.Contact
    35.Input
    36.Useed Technologies
    37.Policy
------------------------------------------------------------------*/
/* 01.Mixins */
/* 02.Variables */
/* 03.Typography */
/*----------------------------------------------
    # Team Extra style here
----------------------------------------------*/
.team-details-wrap {
  padding: 30px;
  margin-bottom: 60px;
  border-radius: 16px;
  border: 1px solid #E5E5E5;
  -webkit-border-radius: 16px;
  -moz-border-radius: 16px;
  -ms-border-radius: 16px;
  -o-border-radius: 16px;
}
.team-details-wrap .team-details-thumb img {
  max-width: 100%;
}
.team-details-wrap .team-details-content .details-info .profile h3 {
  color: var(--title);
  font-family: "Manrope", sans-serif;
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: 24px;
  letter-spacing: -0.4px;
  text-transform: capitalize;
  margin-bottom: 5px;
}
.team-details-wrap .team-details-content .details-info .profile span {
  color: var(--text);
  font-family: "Manrope", sans-serif;
  font-size: 15px;
  font-style: normal;
  font-weight: 500;
  line-height: 14px;
  letter-spacing: -0.3px;
  text-transform: capitalize;
}
.team-details-wrap .team-details-content .details-info .gt-social a {
  border-radius: 100px;
  color: var(--theme);
  background: #F5F5F5;
  -webkit-border-radius: 100px;
  -moz-border-radius: 100px;
  -ms-border-radius: 100px;
  -o-border-radius: 100px;
}
.team-details-wrap .team-details-content .details-info .gt-social a:hover {
  background: linear-gradient(90deg, #384BFF 0%, #B42AF3 123.82%);
  color: var(--white);
}
@media (max-width: 767px) {
  .team-details-wrap .team-details-content .details-info {
    flex-direction: column;
  }
  .team-details-wrap .team-details-content .details-info .profile {
    margin-bottom: 10px;
  }
}
.team-details-wrap .team-details-content .info-wrapper {
  gap: 30px;
}
.team-details-wrap .team-details-content .info-wrapper .checklist {
  margin-top: 30px;
  padding-top: 30px;
  margin-bottom: 0;
  border-top: 1px solid var(--border);
}
.team-details-wrap .team-details-content .info-wrapper .checklist ul {
  padding-left: 0;
  margin-bottom: 0;
}
.team-details-wrap .team-details-content .info-wrapper .checklist ul li i {
  width: 36px;
  height: 36px;
  line-height: 36px;
  text-align: center;
  border-radius: 24px;
  color: var(--theme);
  background-color: #F3EBFE;
  -webkit-border-radius: 24px;
  -moz-border-radius: 24px;
  -ms-border-radius: 24px;
  -o-border-radius: 24px;
}
@media (max-width: 991px) {
  .team-details-wrap .team-details-content .info-wrapper {
    flex-direction: column;
  }
  .team-details-wrap .team-details-content .info-wrapper .checklist {
    margin-top: 0;
  }
  .team-details-wrap .team-details-content .info-wrapper .checklist:first-child {
    margin-top: 30px;
  }
}

.team-simple-history {
  padding-top: 60px;
  padding-bottom: 120px;
  background-color: #FAF8FF;
}
@media (max-width: 991px) {
  .team-simple-history {
    padding-bottom: 80px;
  }
}
.team-simple-history .title {
  color: var(--title);
  font-family: "Manrope", sans-serif;
  font-size: 24px;
  font-style: normal;
  font-weight: 600;
  line-height: 24px;
  letter-spacing: -0.48px;
  text-transform: capitalize;
}
.team-simple-history .skills {
  padding: 28px 40px 70px;
  border-radius: 16px;
  background-color: var(--white);
  -webkit-border-radius: 16px;
  -moz-border-radius: 16px;
  -ms-border-radius: 16px;
  -o-border-radius: 16px;
}
.team-simple-history .skills > .title {
  color: var(--title);
  font-family: "Manrope", sans-serif;
  font-size: 20px;
  font-style: normal;
  font-weight: 600;
  line-height: 24px;
  letter-spacing: -0.4px;
  text-transform: capitalize;
  margin-bottom: 30px;
}
.team-simple-history .skills .progress-wrap .progress-meta {
  margin-bottom: 5px;
}
.team-simple-history .skills .progress-wrap .progress-meta .title {
  color: var(--title);
  font-family: "Manrope", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 30px;
  text-transform: capitalize;
}
.team-simple-history .skills .progress-wrap .progress-meta .percentage {
  color: var(--theme);
}
.team-simple-history .skills .progress-wrap .progress-container {
  height: 15px;
}
.team-simple-history .skills .progress-wrap .progress-container .progress-bar {
  height: 15px;
}

/* 33.Sidebar */
/*-----------------------------------------------------------------
Theme Name: Niotech
Author: Gramentheme
Author URI: https://themeforest.net/user/gramentheme
Version: 1.0.0 
Description: Niotech - App Landing HTML Template <

-------------------------------------------------------------------
 CSS TABLE OF CONTENTS
-------------------------------------------------------------------

    01.Mixins
    02.Variables
    03.Typography
    04.Buttons 
    05.Gutter 
    06.Container 
    07.Animation 
    08.Helping 
    09.MeanMenu 
    10.Preloader
    11.Title 
    12.Common 
    13.Header
    14.Breadcumb
    15.Footer
    16.Intro 
    17.Brand 
    18.About
    19.Work Process 
    20.Advantage
    21.Wcu
    22.Counter
    23.Faq
    24.Testimonial
    25.Feature
    26.Pricing 
    27.Cta
    28.Blog
    29.Services
    30.Project 
    31.Team
    32.Team Extra
    33.Sidebar
    34.Contact
    35.Input
    36.Useed Technologies
    37.Policy
------------------------------------------------------------------*/
/* 01.Mixins */
/* 02.Variables */
/* 03.Typography */
/*----------------------------------------------
    # Widget Sidebar style here
----------------------------------------------*/
.main-sidebar .single-sidebar-widget {
  padding: 40px 30px;
  background-color: var(--bg-2);
  margin-bottom: 30px;
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
}
.main-sidebar .single-sidebar-widget .wid-title {
  margin-bottom: 25px;
}
.main-sidebar .single-sidebar-widget .wid-title h3 {
  position: relative;
  padding-bottom: 15px;
}
.main-sidebar .single-sidebar-widget .wid-title h3::before {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  width: 83px;
  content: "";
  background-color: var(--theme);
}
.main-sidebar .single-sidebar-widget .search-widget form {
  width: 100%;
  position: relative;
}
.main-sidebar .single-sidebar-widget .search-widget form input {
  background-color: var(--white);
  font-size: 15px;
  padding: 20px;
  width: 100%;
  border: none;
  color: var(--text);
}
.main-sidebar .single-sidebar-widget .search-widget form button {
  position: absolute;
  right: 0;
  top: 0;
  width: 70px;
  font-size: 18px;
  height: 100%;
  background: var(--theme);
  border: none;
  color: var(--white);
  text-align: center;
  transition: background 0.3s ease;
  -webkit-transition: background 0.3s ease;
  -moz-transition: background 0.3s ease;
  -ms-transition: background 0.3s ease;
  -o-transition: background 0.3s ease;
  border-radius: 8px;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  -ms-border-radius: 8px;
  -o-border-radius: 8px;
}
.main-sidebar .single-sidebar-widget .search-widget form button:hover {
  background: var(--theme);
}
.main-sidebar .single-sidebar-widget .news-widget-categories ul {
  padding-left: 0;
  list-style-type: none;
}
.main-sidebar .single-sidebar-widget .news-widget-categories ul li {
  background-color: var(--white);
  font-weight: 500;
  transition: all 0.4s ease-in-out;
  border-radius: 8px;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  -ms-border-radius: 8px;
  -o-border-radius: 8px;
}
.main-sidebar .single-sidebar-widget .news-widget-categories ul li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  color: var(--title);
}
.main-sidebar .single-sidebar-widget .news-widget-categories ul li a span {
  transition: all 0.4s ease-in-out;
  color: var(--title);
}
.main-sidebar .single-sidebar-widget .news-widget-categories ul li:not(:last-child) {
  margin-bottom: 12px;
  border-radius: 8px;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  -ms-border-radius: 8px;
  -o-border-radius: 8px;
}
.main-sidebar .single-sidebar-widget .news-widget-categories ul li:hover {
  background: var(--theme);
  color: var(--white);
}
.main-sidebar .single-sidebar-widget .news-widget-categories ul li:hover a {
  color: var(--white) !important;
}
.main-sidebar .single-sidebar-widget .news-widget-categories ul li:hover span {
  color: var(--white);
}
.main-sidebar .single-sidebar-widget .news-widget-categories ul li.active {
  background: var(--theme);
}
.main-sidebar .single-sidebar-widget .news-widget-categories ul li.active a {
  color: var(--white);
}
.main-sidebar .single-sidebar-widget .news-widget-categories ul li.active span {
  color: var(--white);
}
.main-sidebar .single-sidebar-widget .recent-post-area .recent-items {
  display: flex;
  align-items: center;
  gap: 20px;
}
.main-sidebar .single-sidebar-widget .recent-post-area .recent-items:not(:last-child) {
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid #E6E5E5;
}
.main-sidebar .single-sidebar-widget .recent-post-area .recent-items .recent-thumb img {
  width: 78px;
  height: 79px;
  -o-object-fit: cover;
     object-fit: cover;
}
.main-sidebar .single-sidebar-widget .recent-post-area .recent-items .recent-content ul {
  list-style-type: none;
  padding-left: 0;
  margin-bottom: 8px;
}
.main-sidebar .single-sidebar-widget .recent-post-area .recent-items .recent-content ul li {
  color: var(--theme);
  font-family: "Manrope", sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 22px;
}
.main-sidebar .single-sidebar-widget .recent-post-area .recent-items .recent-content ul li i {
  color: var(--theme2);
  margin-right: 5px;
}
.main-sidebar .single-sidebar-widget .recent-post-area .recent-items .recent-content h6 {
  font-weight: 700;
  margin-bottom: 0;
}
.main-sidebar .single-sidebar-widget .recent-post-area .recent-items .recent-content h6 a {
  color: var(--title);
  font-family: "Manrope", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 24px;
}
.main-sidebar .single-sidebar-widget .recent-post-area .recent-items .recent-content h6 a:hover {
  color: var(--theme2);
}
.main-sidebar .single-sidebar-widget .tagcloud a {
  display: inline-flex;
  padding: 10px 16px;
  color: var(--title);
  font-family: "Manrope", sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 14px;
  text-transform: capitalize;
  background: var(--white);
  margin-right: 5px;
  margin-bottom: 10px;
  border: none;
  border-radius: 4px;
  transition: all 0.4s ease-in-out;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
}
.main-sidebar .single-sidebar-widget .tagcloud a:last-child {
  margin-right: 0;
}
.main-sidebar .single-sidebar-widget .tagcloud a:hover {
  background: var(--theme);
  color: var(--white) !important;
}

.recent-post {
  display: flex;
  align-items: center;
  margin-bottom: 25px;
}
.recent-post:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border: 0;
}
.recent-post .media-img {
  margin-right: 20px;
  width: 95px;
  overflow: hidden;
  flex: none;
}
.recent-post .media-img img {
  width: 100%;
  transition: 0.4s ease-in-out;
}
.recent-post .post-title {
  font-weight: 600;
  font-size: 18px;
  line-height: 1.25;
  margin: 10px 0 0px;
  font-family: "Manrope", sans-serif;
  text-transform: capitalize;
}
.recent-post .recent-post-meta {
  margin-bottom: -2px;
}
.recent-post .recent-post-meta .price {
  font-size: 18px;
  font-weight: 700;
  color: #c5c5c5;
}
.recent-post .recent-post-meta .price del {
  margin-right: 10px;
}
.recent-post .recent-post-meta .price strong {
  color: var(--theme);
  font-weight: 700;
}
.recent-post .recent-post-meta a {
  text-transform: capitalize;
  font-size: 14px;
  font-weight: 400;
  color: var(--text);
}
.recent-post .recent-post-meta a i {
  margin-right: 9px;
  color: var(--theme2);
  transition: 0.4s;
}
.recent-post .recent-post-meta a:hover {
  color: var(--theme);
}
.recent-post .recent-post-meta a:hover i {
  color: var(--theme);
}
.recent-post:hover .media-img img {
  transform: scale(1.1);
}

.widget_shopping_cart .widget_title {
  margin-bottom: 30px;
  border-bottom: none;
}
.widget_shopping_cart ul {
  margin: 0;
  padding: 0;
}
.widget_shopping_cart ul li {
  list-style-type: none;
}
.widget_shopping_cart .mini_cart_item {
  position: relative;
  padding: 30px 30px 30px 90px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  margin-bottom: 0;
  text-align: left;
}
.widget_shopping_cart .mini_cart_item:first-child {
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}
.widget_shopping_cart .cart_list a:not(.remove) {
  display: block;
  color: var(--text);
  font-size: 16px;
  font-weight: 500;
  font-family: "Manrope", sans-serif;
  font-weight: 600;
  color: var(--title);
  margin-bottom: 6px;
}
.widget_shopping_cart .cart_list a:not(.remove):hover {
  color: var(--theme);
}
.widget_shopping_cart .cart_list a.remove {
  position: absolute;
  top: 50%;
  left: 95%;
  transform: translateY(-50%);
  color: var(--text);
}
.widget_shopping_cart .cart_list a.remove:hover {
  color: var(--theme);
}
.widget_shopping_cart .cart_list img {
  width: 75px;
  height: 75px;
  position: absolute;
  left: 0;
  top: 18px;
}
.widget_shopping_cart .quantity {
  display: inline-flex;
  white-space: nowrap;
  vertical-align: top;
  margin-right: 20px;
  font-size: 14px;
  font-weight: 500;
}
.widget_shopping_cart .total {
  margin-top: 20px;
  font-size: 18px;
  color: var(--title);
  font-family: "Manrope", sans-serif;
}
.widget_shopping_cart .total strong {
  font-family: "Manrope", sans-serif;
}
.widget_shopping_cart .amount {
  padding-left: 5px;
}
.widget_shopping_cart .as-btn {
  margin-right: 15px;
}
.widget_shopping_cart .as-btn:last-child {
  margin-right: 0;
}

@media (max-width: 1199px) {
  .widget_title {
    font-size: 22px;
    margin: -0.12em 0 24px 0;
  }
}
@media (max-width: 330px) {
  .recent-post .post-title {
    font-size: 16px;
    line-height: 24px;
  }
  .recent-post .recent-post-meta a {
    font-size: 12px;
  }
}
/* 34.Contact */
/*-----------------------------------------------------------------
Theme Name: Niotech
Author: Gramentheme
Author URI: https://themeforest.net/user/gramentheme
Version: 1.0.0 
Description: Niotech - App Landing HTML Template <

-------------------------------------------------------------------
 CSS TABLE OF CONTENTS
-------------------------------------------------------------------

    01.Mixins
    02.Variables
    03.Typography
    04.Buttons 
    05.Gutter 
    06.Container 
    07.Animation 
    08.Helping 
    09.MeanMenu 
    10.Preloader
    11.Title 
    12.Common 
    13.Header
    14.Breadcumb
    15.Footer
    16.Intro 
    17.Brand 
    18.About
    19.Work Process 
    20.Advantage
    21.Wcu
    22.Counter
    23.Faq
    24.Testimonial
    25.Feature
    26.Pricing 
    27.Cta
    28.Blog
    29.Services
    30.Project 
    31.Team
    32.Team Extra
    33.Sidebar
    34.Contact
    35.Input
    36.Useed Technologies
    37.Policy
------------------------------------------------------------------*/
/* 01.Mixins */
/* 02.Variables */
/* 03.Typography */
.contact-info-box.style1 {
  padding: 12px;
  background-color: #FAF8FF;
  border-radius: 10px;
  transition: all 0.4s;
  -webkit-transition: all 0.4s;
  -moz-transition: all 0.4s;
  -ms-transition: all 0.4s;
  -o-transition: all 0.4s;
}
.contact-info-box.style1 .contact-content {
  padding: 50px 30px 30px;
  text-align: center;
  border-radius: 10px;
  background-color: #FAF8FF;
  border: 1px solid #E6E5E5;
  transition: all 0.4s;
  -webkit-transition: all 0.4s;
  -moz-transition: all 0.4s;
  -ms-transition: all 0.4s;
  -o-transition: all 0.4s;
}
.contact-info-box.style1 .contact-content .icon {
  margin-bottom: 40px;
}
.contact-info-box.style1 .contact-content .icon svg path {
  fill: var(--theme);
}
.contact-info-box.style1 .contact-content .title {
  margin-bottom: 10px;
  color: var(--title);
  text-align: center;
  font-family: "Manrope", sans-serif;
  font-size: 24px;
  font-style: normal;
  font-weight: 600;
  line-height: 30px;
}
.contact-info-box.style1 .contact-content .title a:hover {
  color: var(--white) !important;
}
.contact-info-box.style1 .contact-content .text {
  color: var(--text);
  text-align: center;
  font-family: "Manrope", sans-serif;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 26px;
}
.contact-info-box.style1:hover {
  background-color: var(--theme);
}
.contact-info-box.style1:hover .contact-content {
  background-color: var(--theme);
}
.contact-info-box.style1:hover .contact-content .icon svg path {
  fill: var(--white);
}
.contact-info-box.style1:hover .contact-content .title {
  color: var(--white);
}
.contact-info-box.style1:hover .contact-content .title:hover {
  color: var(--white) !important;
}
.contact-info-box.style1:hover .contact-content .title a {
  color: var(--white) !important;
}
.contact-info-box.style1:hover .contact-content .text {
  color: var(--white);
}
.contact-info-box.style1:hover .contact-content .text:hover {
  color: var(--white) !important;
}

.contact-form-wrapper.style1 .contact-map {
  width: 100%;
  height: 100%;
}
.contact-form-wrapper.style1 .contact-map iframe {
  width: 100%;
  height: 100%;
}

.contact-form.style1 .contact-title {
  color: var(--title);
  font-family: "Manrope", sans-serif;
  font-size: 50px;
  font-style: normal;
  font-weight: 700;
  line-height: 60px;
  margin-bottom: 20px;
}
.contact-form.style1 .desc {
  color: var(--text);
  font-family: "Manrope", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 28px;
}
.contact-form.style1 .contact-form-items {
  margin-top: 30px;
}
.contact-form.style1 .contact-form-items .form-clt span {
  color: var(--title);
  font-weight: 600;
  text-transform: capitalize;
}
.contact-form.style1 .contact-form-items .form-clt input,
.contact-form.style1 .contact-form-items .form-clt textarea {
  border: 1px solid var(--border);
  color: var(--text);
  padding: 18px 20px;
  border-radius: 5px;
}
.contact-form.style1 .contact-form-items .form-clt input::-moz-placeholder, .contact-form.style1 .contact-form-items .form-clt textarea::-moz-placeholder {
  color: var(--text);
}
.contact-form.style1 .contact-form-items .form-clt input::placeholder,
.contact-form.style1 .contact-form-items .form-clt textarea::placeholder {
  color: var(--text);
}
.contact-form.style1 .contact-form-items .form-clt textarea {
  padding-bottom: 150px;
  height: 200px;
  padding: 18px 20px;
}

/* 35.Input */
/*-----------------------------------------------------------------
Theme Name: Niotech
Author: Gramentheme
Author URI: https://themeforest.net/user/gramentheme
Version: 1.0.0 
Description: Niotech - App Landing HTML Template <

-------------------------------------------------------------------
 CSS TABLE OF CONTENTS
-------------------------------------------------------------------

    01.Mixins
    02.Variables
    03.Typography
    04.Buttons 
    05.Gutter 
    06.Container 
    07.Animation 
    08.Helping 
    09.MeanMenu 
    10.Preloader
    11.Title 
    12.Common 
    13.Header
    14.Breadcumb
    15.Footer
    16.Intro 
    17.Brand 
    18.About
    19.Work Process 
    20.Advantage
    21.Wcu
    22.Counter
    23.Faq
    24.Testimonial
    25.Feature
    26.Pricing 
    27.Cta
    28.Blog
    29.Services
    30.Project 
    31.Team
    32.Team Extra
    33.Sidebar
    34.Contact
    35.Input
    36.Useed Technologies
    37.Policy
------------------------------------------------------------------*/
/* 01.Mixins */
/* 02.Variables */
/* 03.Typography */
select,
.single-select,
.form-control,
.form-select,
textarea,
input {
  height: 56px;
  padding: 0 20px;
  border: 1px solid var(--border);
  color: var(--text);
  background-color: transparent;
  font-size: 16px;
  width: 100%;
  font-family: "Manrope", sans-serif;
  transition: 0.4s ease-in-out;
  border-radius: 0px;
}
select:focus,
.single-select:focus,
.form-control:focus,
.form-select:focus,
textarea:focus,
input:focus {
  outline: 0;
  box-shadow: none;
  border-color: var(--theme);
  background-color: var(--white);
}
select::-moz-placeholder, .single-select::-moz-placeholder, .form-control::-moz-placeholder, .form-select::-moz-placeholder, textarea::-moz-placeholder, input::-moz-placeholder {
  color: var(--text);
}
select::placeholder,
.single-select::placeholder,
.form-control::placeholder,
.form-select::placeholder,
textarea::placeholder,
input::placeholder {
  color: var(--text);
}

.form-text {
  font-size: 16px;
}
.form-text a {
  color: var(--title);
  font-weight: 500;
}

.single-select,
.form-select,
select {
  display: block;
  width: 100%;
  line-height: 56px;
  height: 56px;
  padding: 0 20px;
  font-size: 16px;
  cursor: pointer;
  background-image: none;
}
.single-select:after,
.form-select:after,
select:after {
  border-bottom: 1px solid var(--title);
  border-right: 1px solid var(--title);
  right: 20px;
  height: 7px;
  width: 7px;
}
.single-select .list,
.form-select .list,
select .list {
  width: 100%;
  display: block;
  border-radius: 0;
}
.single-select.style2,
.form-select.style2,
select.style2 {
  padding: 0 20px;
  font-size: 16px;
  position: relative;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3E%3C/svg%3E");
  background-size: 24px 12px;
}
.single-select.style2:after,
.form-select.style2:after,
select.style2:after {
  content: "";
  position: absolute;
  right: 20px;
  width: 10px;
  height: 6px;
  border-top: solid 6px var(--body-color);
  border-left: solid 5px transparent;
  border-right: solid 5px transparent;
  transform: rotate(0);
  border-bottom: 0;
  margin-top: -2px;
  z-index: 9;
}
.single-select.style2.open:after,
.form-select.style2.open:after,
select.style2.open:after {
  border-top: 0;
  border-bottom: solid 6px var(--body-color);
  border-left: solid 5px transparent;
  border-right: solid 5px transparent;
  transform: none;
}
.single-select.style3,
.form-select.style3,
select.style3 {
  background: var(--border);
  padding: 0 20px;
  font-size: 14px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3E%3C/svg%3E");
  background-size: 50px 10px;
  background-repeat: no-repeat;
  background-position: right;
}
.single-select.style-white2,
.form-select.style-white2,
select.style-white2 {
  background: var(--white);
  border-color: var(--white);
  padding: 0 30px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3E%3C/svg%3E");
  background-size: 70px 12px;
  background-repeat: no-repeat;
  background-position: right;
}
.single-select.style-white2:after,
.form-select.style-white2:after,
select.style-white2:after {
  right: 30px;
}

.single-select {
  background-image: none !important;
}

textarea.form-control,
textarea {
  min-height: 150px;
  padding-top: 16px;
  padding-bottom: 17px;
}
textarea.form-control.style2,
textarea.style2 {
  min-height: 105px;
}

.form-group {
  margin-bottom: var(--bs-gutter-x);
  position: relative;
}
.form-group > i {
  display: inline-block;
  position: absolute;
  right: 25px;
  top: 21px;
  font-size: 16px;
  color: var(--text);
}
.form-group > i.fa-envelope {
  padding-top: 1px;
}
.form-group > i.fa-comment {
  margin-top: -2px;
}
.form-group > i.fa-chevron-down {
  width: 17px;
  background-color: var(--text);
}
.form-group.has-label > i {
  top: 50px;
}
.form-group .input-icon {
  display: inline-block;
  position: absolute;
  right: 42px;
  top: 19px;
  font-size: 16px;
  color: var(--text);
}
.form-group .input-icon:hover {
  color: var(--theme);
}
.form-group.style-2 .form-control {
  padding: 0 30px 0 55px;
}
.form-group.style-2 textarea.form-control {
  padding: 16px 30px 30px 55px;
}
.form-group.style-white .form-control {
  background: var(--white);
}
.form-group.style-white2 .form-control {
  background: var(--white);
  border-color: var(--white);
  padding: 0 45px 0 30px;
}
.form-group.style-white2 textarea.form-control {
  padding: 16px 45px 30px 30px;
}

[class*=col-].form-group > i {
  right: calc(var(--bs-gutter-x) / 2 + 25px);
}
[class*=col-].form-group .form-icon-left {
  left: calc(var(--bs-gutter-x) / 2 + 30px);
  right: auto;
}

option:checked, option:focus, option:hover {
  background-color: var(--theme);
  color: var(--white);
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

input[type=checkbox] {
  visibility: hidden;
  opacity: 0;
  display: inline-block;
  vertical-align: middle;
  width: 0;
  height: 0;
  display: none;
  border-radius: 10px;
}
input[type=checkbox]:checked ~ label:after {
  opacity: 1;
}
input[type=checkbox] ~ label {
  position: relative;
  padding-left: 30px;
  cursor: pointer;
  display: block;
}
input[type=checkbox] ~ label:before {
  content: "";
  position: absolute;
  left: 0px;
  top: 3.5px;
  background: var(--white);
  border: 1px solid var(--border);
  height: 20px;
  width: 20px;
  text-align: center;
}
input[type=checkbox] ~ label:after {
  content: "";
  position: absolute;
  left: 6px;
  top: 9px;
  background: var(--theme);
  height: 8px;
  width: 8px;
  opacity: 0;
  transition: 0.4s;
}
input[type=checkbox].style2 ~ label {
  color: #8B929C;
  padding-left: 23px;
  margin-bottom: -0.5em;
}
input[type=checkbox].style2 ~ label:before {
  background-color: white;
  border: 1px solid rgb(247, 204, 215);
  height: 14px;
  width: 14px;
  line-height: 14px;
  border-radius: 3px;
  top: 6px;
}
input[type=checkbox].style2:checked ~ label:before {
  color: var(--theme);
}

input[type=radio] {
  visibility: hidden;
  opacity: 0;
  display: inline-block;
  vertical-align: middle;
  width: 0;
  height: 0;
  display: none;
}
input[type=radio] ~ label {
  position: relative;
  padding-left: 30px;
  cursor: pointer;
  line-height: 1;
  display: inline-block;
  font-weight: 600;
  margin-bottom: 0;
}
input[type=radio] ~ label::before {
  content: "\f111";
  position: absolute;
  left: 0;
  top: -2px;
  width: 20px;
  height: 20px;
  padding-left: 0;
  font-size: 0.6em;
  line-height: 19px;
  text-align: center;
  border: 1px solid var(--theme);
  border-radius: 100%;
  font-weight: 700;
  background: var(--white);
  color: transparent;
  transition: all 0.2s ease;
}
input[type=radio]:checked ~ label::before {
  border-color: var(--theme);
  background-color: var(--theme);
  color: var(--white);
}

label {
  margin-bottom: 0.5em;
  margin-top: -0.3em;
  display: block;
  color: var(--title);
  font-family: "Manrope", sans-serif;
  font-size: 16px;
}

textarea.is-invalid,
select.is-invalid,
input.is-invalid,
.was-validated input:invalid {
  border: 1px solid red !important;
  background-position: right calc(0.375em + 0.8875rem) center;
  background-image: none;
}
textarea.is-invalid:focus,
select.is-invalid:focus,
input.is-invalid:focus,
.was-validated input:invalid:focus {
  outline: 0;
  box-shadow: none;
}

textarea.is-invalid {
  background-position: top calc(0.375em + 0.5875rem) right calc(0.375em + 0.8875rem);
}

.row.no-gutters > .form-group {
  margin-bottom: 0;
}

.form-messages {
  display: none;
}
.form-messages.mb-0 * {
  margin-bottom: 0;
}
.form-messages.success {
  color: green;
  display: block;
}
.form-messages.error {
  color: red;
  display: block;
}
.form-messages pre {
  padding: 0;
  background-color: transparent;
  color: inherit;
}

/* 36.Useed Technologies */
/*-----------------------------------------------------------------
Theme Name: Niotech
Author: Gramentheme
Author URI: https://themeforest.net/user/gramentheme
Version: 1.0.0 
Description: Niotech - App Landing HTML Template <

-------------------------------------------------------------------
 CSS TABLE OF CONTENTS
-------------------------------------------------------------------

    01.Mixins
    02.Variables
    03.Typography
    04.Buttons 
    05.Gutter 
    06.Container 
    07.Animation 
    08.Helping 
    09.MeanMenu 
    10.Preloader
    11.Title 
    12.Common 
    13.Header
    14.Breadcumb
    15.Footer
    16.Intro 
    17.Brand 
    18.About
    19.Work Process 
    20.Advantage
    21.Wcu
    22.Counter
    23.Faq
    24.Testimonial
    25.Feature
    26.Pricing 
    27.Cta
    28.Blog
    29.Services
    30.Project 
    31.Team
    32.Team Extra
    33.Sidebar
    34.Contact
    35.Input
    36.Useed Technologies
    37.Policy
------------------------------------------------------------------*/
/* 01.Mixins */
/* 02.Variables */
/* 03.Typography */
.used-technology-section .nav {
  display: flex;
  align-items: center;
  margin-top: 30px;
  gap: 10px;
  margin-bottom: 20px;
}
.used-technology-section .nav .nav-item .nav-link {
  font-size: 17px;
  font-weight: 500;
  color: var(--title);
  background-color: #FAF8FF;
  padding: 17px 35px;
  line-height: 1;
  border-radius: 10px;
}
.used-technology-section .nav .nav-item .nav-link.active {
  background-color: var(--theme);
  color: var(--white) !important;
}

.technology-box-items-wrapper.style-4 {
  margin-top: 60px;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  padding: 65px 53px 35px;
  gap: 38px;
  background: #F8F8F8;
  border-radius: 30px;
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  -ms-border-radius: 30px;
  -o-border-radius: 30px;
}
@media (max-width: 1199px) {
  .technology-box-items-wrapper.style-4 {
    grid-template-columns: repeat(5, 1fr);
  }
}
@media (max-width: 991px) {
  .technology-box-items-wrapper.style-4 {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media (max-width: 767px) {
  .technology-box-items-wrapper.style-4 {
    grid-template-columns: repeat(3, 1fr);
    padding: 30px;
    gap: 20px;
  }
}
@media (max-width: 470px) {
  .technology-box-items-wrapper.style-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}
.technology-box-items-wrapper.style-4 > :nth-child(even) {
  margin-top: 140px;
}
.technology-box-items-wrapper.style-4 > :nth-child(odd) {
  margin-bottom: 60px;
}

.technology-box-items.style-4 {
  display: inline-block;
  max-width: 119px;
  max-height: 119px;
  text-align: center;
  padding: 15px 15px;
  border-radius: 16px;
  background: var(--white);
  box-shadow: 0px 4px 8px -2px rgba(45, 54, 67, 0.08), 0px 2px 4px -2px rgba(45, 54, 67, 0.06);
}
.technology-box-items.style-4 .logo {
  margin-bottom: 9px;
  max-width: 50px;
  margin: 0 auto 5px;
}
.technology-box-items.style-4 .logo img {
  max-width: 50px;
}
.technology-box-items.style-4 .title {
  color: var(--body-text2, rgba(38, 37, 46, 0.7));
  text-align: center;
  font-family: "Manrope", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px;
}

/* 37.Policy */
/*----------------------------------------------
    # Policy Page Styles
----------------------------------------------*/
header.policy-page {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  z-index: 999 !important;
  background-color: #fff !important;
  box-shadow: 0px 4px 25px 0px rgba(0, 0, 0, 0.06) !important;
}

header.policy-page .header-1.policy-section-header {
  background-color: #fff !important;
  box-shadow: 0px 4px 25px 0px rgba(0, 0, 0, 0.06) !important;
  padding: 0 10px;
}

header.policy-page .header-1.policy-section-header .header-main .main-menu ul li a {
  color: #242424;
}

header.policy-page .header-1.policy-section-header .header-main .main-menu ul li a:hover,
header.policy-page .header-1.policy-section-header .header-main .main-menu ul li a.active {
  color: #242424 !important;
}

header.policy-page .sidebar__toggle {
  color: #242424;
}

.policy-section {
  padding-top: 150px;
  padding-bottom: 50px;
}

.policy-section .section-title {
  margin-bottom: 50px;
}

.policy-section .section-title h1 {
  color: #242424;
  font-size: 48px;
  font-weight: 700;
  margin-bottom: 15px;
}

.policy-section .section-title p {
  color: #242424;
  font-size: 16px;
}

.policy-section h2 {
  color: #242424;
  font-size: 28px;
  font-weight: 700;
  margin-top: 40px;
  margin-bottom: 20px;
}

.policy-section p {
  color: #242424;
  line-height: 1.8;
  margin-bottom: 20px;
}

.test {
  color: red;
}/*# sourceMappingURL=main.css.map */