/*

*/
/*================================================
1. Default CSS
2. Menu CSS
3. About CSS
4. Service CSS
5. Industries CSS
6. Achievement CSS
7. Data CSS
8. Blog CSS
9. FAQ CSS
10. Subscribe CSS
11. Footer CSS
12. Testimonial CSS
13. Hero CSS
14. Price CSS
15. Choose CSS
16. Team CSS
17. Error CSS
18. Works CSS
19. Showcase CSS
20. Features CSS
21. Creativity CSS
22. Form CSS
23. Terms and Condition CSS
24. Contact CSS

=================================================*/
/*================================================
1. Default CSS
=================================================*/
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Inter+Tight:wght@100;200;300;400;500;600;700;800;900&display=swap");
@import url("../webfonts/inter-display/inter-display.css");
@import url("https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap");

/* Media Query Variable */
/*CSS Variable*/
:root {
  /*font Variable*/
  --ff-inter: "Inter", sans-serif;
  --ff-inter-tight: "Inter Tight", sans-serif;
  /*Color Variable*/
  --primary-black: #02021a;
  --primary-green: #075197;
  --primary-purple: #6e45e9;
  --color-light-black: #0e0f23;
  --color-white: #fff;
  --color-black: #000000;
  --color-light-white: rgba(255, 255, 255, 0.7);
  --color-blue: #0071ab;
  --color-deep-blue: #00001d;
  --color-text-heading: #031811;
  --color-text-body: rgba(3, 24, 17, 0.7);
}

a {
  color: unset;
  text-decoration: none;
}

a:focus {
  outline: 0 solid;
}

a:hover {
  text-decoration: none;
  color: unset;
}

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

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

h1,
h2,
h3,
h4,
h5,
h6 {
  margin-bottom: 0;
  font-family: var(--ff-inter);
  text-transform: capitalize;
  color: var(--color-text-heading);
}

h2.h2 {
  font-size: 24px;
  font-weight: 500;
  line-height: 1.6;
  text-transform: capitalize;
}

@media only screen and (max-width: 1199.98px) {
  h2.h2 {
    font-size: 22px;
  }
}

@media only screen and (max-width: 991.98px) {
  h2.h2 {
    font-size: 20px;
  }
}

h3.h3 {
  font-size: 20px;
  font-weight: 500;
  line-height: normal;
  text-transform: capitalize;
}

@media only screen and (max-width: 991.98px) {
  h3.h3 {
    font-size: 18px;
  }
}

html,
body {
  font-weight: 400;
  font-size: 16px;
  line-height: 2;
  font-family: var(--ff-inter-tight);
  color: var(--color-text-body);
}

p {
  margin-bottom: 0;
}

.text-p-18 {
  font-size: 18px;
}

@media only screen and (max-width: 991.98px) {
  .text-p-18 {
    font-size: 16px;
  }
}

input:focus,
textarea:focus,
button:focus {
  outline: none;
}

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

i.bx {
  vertical-align: middle;
}

/* Remove Chrome Input Field's Unwanted Yellow Background Color */
input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0px 1000px white inset !important;
}

input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0px 1000px white inset !important;
}

.bg_color_black {
  background-color: var(--primary-black);
}

.bg_color_black_two {
  background-color: #070b17;
}

.bg_color_black_three {
  background-color: #0a0e19;
}

.bg_color_light_black {
  background-color: var(--color-light-black);
}

.bg_color_light_black_two {
  background-color: #1b1d2b;
}

.bg_color_light_white {
  background-color: rgba(251, 251, 251, 0.8);
}

.bg_color_deep_blue {
  background-color: var(--color-deep-blue);
}

.bg_color_white {
  background-color: var(--color-white);
}

.text_color_white {
  color: var(--color-white);
}

.text_color_light_white {
  color: var(--color-light-white);
}

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

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

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

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

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

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

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

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

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

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

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

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

.z-index-one {
  z-index: 1 !important;
}

.z-index-minus-one {
  z-index: -1 !important;
}

.max-width-728 {
  max-width: 728px;
}

.max-width-500 {
  max-width: 500px;
}

.section-middle {
  margin: 0 auto;
}

@media only screen and (max-width: 991.98px) {
  .mt-120 {
    margin-top: 60px;
  }

  .mb-120 {
    margin-bottom: 60px;
  }

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

  .mb-96 {
    margin-bottom: 36px;
  }

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

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

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

  .pt-96 {
    padding-top: 36px;
  }

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

  .pb-96 {
    padding-bottom: 36px;
  }
}

/*
============================================
============= Custom Scroll Bar CSS ================
*/
body::-webkit-scrollbar {
  width: 0.3em;
}

body::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}

body::-webkit-scrollbar-thumb {
  background-color: darkgrey;
  outline: 1px solid slategrey;
  border-radius: 10px;
}

/*
============================================
============= Custom Scroll Bar CSS End ================
*/
/*
============================================
============= Preloader CSS ================
*/
.preloader {
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 99999;
  background: var(--color-deep-blue);
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.preloader .spinner-wrap {
  width: 160px;
  height: 160px;
  position: relative;
}

.preloader .preloader-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.preloader .spinner {
  position: relative;
  width: 100%;
  height: 100%;
  border: 2px solid #040404;
  border-top: 3px solid var(--primary-green);
  border-radius: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  animation: spin 2s infinite linear;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

/*
============= Preloader CSS END ================
================================================
*/
/* Custom Cursor */
.cursor {
  pointer-events: none;
  position: fixed;
  height: 10px;
  width: 10px;
  background-color: #fff;
  border-radius: 50%;
  mix-blend-mode: exclusion;
  transition: transform 0.3s ease, opacity 0.4s ease;
  z-index: 99999;
  transform: translate(-50%, -50%) scale(1);
}

.cursor-active {
  transform: translate(-50%, -50%) scale(2);
  opacity: 0.1;
  cursor: pointer;
}

/* Custom Cursor End */
/*Back to Top btn*/
.back-to-top-btn {
  position: fixed;
  bottom: 40px;
  right: 30px;
  background: #fff;
  mix-blend-mode: exclusion;
  height: 38px;
  width: 38px;
  border-radius: 50%;
  text-align: center;
  line-height: 36px;
  display: none;
  z-index: 9999;
  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.4);
}

.back-to-top-btn i {
  color: #000;
  font-size: 18px;
  transition: 0.3s;
  -webkit-text-stroke: 1px;
}

.back-to-top-btn i::before {
  vertical-align: middle;
}

/*Back to Top btn End*/
.container.custom-container {
  margin-left: calc((100% - 1320px) / 2);
  width: auto;
  min-width: auto;
  max-width: inherit;
}

@media only screen and (min-width: 1200px) and (max-width: 1400px) {
  .container.custom-container {
    margin-left: calc((100% - 1143px) / 2);
  }
}

@media only screen and (min-width: 992px) and (max-width: 1200px) {
  .container.custom-container {
    margin-left: calc((100% - 970px) / 2);
  }
}

@media (min-width: 1450px) {
  .container.container-large {
    max-width: 1500px;
  }
}

@media (min-width: 100px) {
  .container.custom-container {
    max-width: 540px;
    margin-right: auto;
    margin-left: auto;
  }
}

@media (min-width: 768px) {
  .container.custom-container {
    max-width: 720px;
    margin-right: auto;
    margin-left: auto;
  }
}

@media (min-width: 992px) {
  .container.custom-container {
    margin-left: calc((100% - 970px) / 2);
    width: auto;
    min-width: auto;
    max-width: inherit;
  }
}

@media (min-width: 1200px) {
  .container.custom-container {
    margin-left: calc((100% - 1143px) / 2);
    width: auto;
    min-width: auto;
    max-width: inherit;
  }
}

@media (min-width: 1400px) {
  .container.custom-container {
    margin-left: calc((100% - 1320px) / 2);
    width: auto;
    min-width: auto;
    max-width: inherit;
  }
}

.section-title .sub-title {
  font-family: var(--ff-inter);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.9px;
  text-transform: uppercase;
  margin-bottom: 16px;
  line-height: normal;
}

.section-title .title {
  font-size: 60px;
  font-weight: 600;
  line-height: 1.2;
  text-transform: capitalize;
}

.section-title .title span {
  font-weight: 400;
}

.section-title .desc {
  font-size: 18px;
  line-height: 1.7;
  margin-top: 24px;
}

@media only screen and (max-width: 1199.98px) {
  .section-title .title {
    font-size: 40px;
  }

  .section-title .desc {
    margin-top: 15px;
  }
}

@media only screen and (max-width: 991.98px) {
  .section-title .title {
    font-size: 20px;
  }

  .section-title .desc {
    margin-top: 12px;
  }
}

.section-title.gradient-sub-title .gradient-sub {
  font-family: var(--ff-inter);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.9px;
  border-radius: 50px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.3) -17.5%, rgba(255, 255, 255, 0) 118.75%);
  padding: 1px 16px;
  display: inline-block;
  margin-bottom: 16px;
}

@media only screen and (max-width: 1199.98px) {
  .section-title.gradient-sub-title .gradient-sub {
    font-size: 16px;
  }
}

.section-title.gradient-sub-title .title {
  font-size: 56px;
}

@media only screen and (max-width: 1199.98px) {
  .section-title.gradient-sub-title .title {
    font-size: 40px;
  }
}

@media only screen and (max-width: 991.98px) {
  .section-title.gradient-sub-title .title {
    font-size: 25px;
  }
}

.section-title.gradient-sub-title.gradient-sub-border .gradient-sub-border-wrap {
  padding: 1.5px;
  margin-bottom: 16px;
  border-radius: 50px;
  display: inline-block;
  position: relative;
  overflow: hidden;
}

.section-title.gradient-sub-title.gradient-sub-border .gradient-sub-border-wrap::before {
  position: absolute;
  left: 50%;
  top: 50%;
  content: "";
  background: linear-gradient(80deg, rgba(66, 41, 255, 0.8) 17.87%, rgba(255, 255, 255, 0.5) 45.75%, rgba(66, 41, 255, 0.8) 80.38%);
  height: 410%;
  width: 101%;
  animation: animate_border 4s linear infinite;
}

.section-title.gradient-sub-title.gradient-sub-border .gradient-sub {
  background: #1a1b3a;
  margin-bottom: 0;
  padding: 5px 24px;
  position: relative;
  z-index: 1;
}

.section-title.border-style .border-sbu {
  color: var(--color-text-heading);
  font-family: var(--ff-inter);
  font-size: 20px;
  font-weight: 500;
  line-height: normal;
  letter-spacing: 1px;
  position: relative;
  padding-bottom: 8px;
  margin-bottom: 12px;
}

@media only screen and (max-width: 991.98px) {
  .section-title.border-style .border-sbu {
    font-size: 18px;
  }
}

.section-title.border-style .border-sbu::before {
  position: absolute;
  background: linear-gradient(90deg, #031811 0%, rgba(3, 24, 17, 0) 100%);
  left: 0;
  bottom: 0;
  height: 1.5px;
  width: 100%;
  content: "";
}

.section-title.border-style .border-sbu.border-sbu-middle::before {
  background: linear-gradient(90deg, rgba(3, 24, 17, 0) 0%, #031811 47.3%, rgba(3, 24, 17, 0) 92.66%);
  left: 50%;
  bottom: 0;
  height: 1.3px;
  transform: translateX(-50%);
}

.section-title.border-style .title {
  font-size: 48px;
  font-weight: 500;
  line-height: 1.3;
}

@media only screen and (max-width: 1199.98px) {
  .section-title.border-style .title {
    font-size: 40px;
  }
}

@media only screen and (max-width: 991.98px) {
  .section-title.border-style .title {
    font-size: 35px;
  }
}

.section-header .section-sub-title {
  display: block;
  color: rgba(255, 255, 255, 0.6);
  font-family: "Inter Display", sans-serif;
  font-size: 14.01px;
  font-weight: 500;
  line-height: normal;
  letter-spacing: 3.082px;
  margin-bottom: 32px;
}

@media only screen and (max-width: 1199.98px) {
  .section-header .section-sub-title {
    margin-bottom: 15px;
  }
}

@media only screen and (max-width: 991.98px) {
  .section-header .section-sub-title {
    margin-bottom: 12px;
  }
}

.section-header .section-title {
  display: inline-block;
  color: #fff;
  font-family: "Inter Display", sans-serif;
  font-size: 50px;
  font-weight: 400;
  line-height: 106.452%;
  letter-spacing: -1.343px;
  text-transform: initial;
}

.section-header .section-title:has(+ p) {
  margin-bottom: 29px;
}

@media only screen and (max-width: 1199.98px) {
  .section-header .section-title:has(+ p) {
    margin-bottom: 20px;
  }
}

@media only screen and (max-width: 991.98px) {
  .section-header .section-title:has(+ p) {
    margin-bottom: 15px;
  }
}

@media only screen and (max-width: 1199.98px) {
  .section-header .section-title {
    font-size: 52px;
  }
}

@media only screen and (max-width: 991.98px) {
  .section-header .section-title {
    font-size: 22px;
  }
}

.section-header .section-title span {
  display: inline-block;
  background: linear-gradient(45deg, #7f5fff 35.71%, #ae77ff 44.58%, #bb6dff 53.75%, #d759ff 63.77%, #f8cc84 75.8%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.section-header p {
  color: #bfbfbf;
  font-family: "Inter Display", sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 144.444%;
}

.common-btn {
  font-weight: 500;
  letter-spacing: 0.32px;
  display: inline-flex;
  line-height: 1;
  gap: 10px;
  font-size: 18px;
  align-items: center;
  padding: 13px 22px;
  border-radius: 32px;
  color: var(--color-white);
  transition: all 0.4s linear;
  overflow: hidden;
  border: 1px solid transparent;
}

.common-btn.border-style {
  border-radius: 32px;
  border: 1px solid rgba(255, 255, 255, 0.32);
  background: var(--color-light-black);
}

.common-btn.border-style:hover {
  background: linear-gradient(rgba(117, 172, 255, 0) 0%, rgba(255, 255, 255, 0.12) 100%);
  opacity: 1;
  color: var(--color-white);
}

.common-btn.border-style.border-style-transparent {
  background: transparent;
  border: 1px solid #fff;
}

.common-btn.border-style.border-style-transparent:hover {
  background: linear-gradient(rgba(117, 172, 255, 0) 0%, rgba(255, 255, 255, 0.12) 100%);
  opacity: 1;
  color: var(--color-white);
}

.common-btn.bg-white-style {
  color: var(--primary-black);
  background-color: var(--color-white);
}

.common-btn.bg-white-style:hover {
  background-color: hsl(0, 0%, 95%);
}

.common-btn.bg-green-style {
  color: var(--color-white);
  background-color: var(--primary-green);
}

.common-btn.bg-green-style:hover {
  background-color: hsl(138, 69%, 30%);
}

.common-btn.bg-blue-style {
  color: var(--color-white);
  background-color: var(--color-blue);
}

.common-btn.bg-blue-style:hover {
  background-color: hsl(247, 100%, 63%);
}

.common-btn.bg-purple-style {
  color: var(--color-white);
  background-color: var(--primary-purple);
}

.common-btn.bg-purple-style:hover {
  background-color: hsl(255, 79%, 65%);
}

@media only screen and (max-width: 991.98px) {
  .common-btn {
    font-size: 16px;
  }
}

.powerai-btn {
  position: relative;
  z-index: 2;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  height: -moz-max-content;
  height: max-content;
  width: -moz-max-content;
  width: max-content;
  color: #fff;
  font-family: "Inter Display", sans-serif;
  font-size: 18px;
  font-weight: 400;
  letter-spacing: -0.9px;
  text-transform: capitalize;
  border-radius: 50px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  transition: all 0.5s ease-in-out;
  line-height: 1;
  padding: 20px 34px;
  overflow: hidden;
}

@media only screen and (max-width: 991.98px) {
  .powerai-btn {
    padding: 15px 30px;
  }
}

.powerai-btn::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  background: linear-gradient(75deg, #7f5fff -47.93%, #ae77ff -17.55%, #bb6dff 13.89%, #d759ff 48.23%, #f8cc84 89.43%);
  z-index: -1;
  opacity: 0;
  transition: all 0.5s ease-in-out;
}

.powerai-btn:hover {
  color: #fff;
  border-color: transparent;
}

.powerai-btn:hover::before {
  opacity: 1;
}

.powerai-btn.v2 {
  border-color: #fff;
  background-color: #fff;
  color: #141414;
}

.powerai-btn.v2::before {
  opacity: 0;
  height: 100%;
  width: 100%;
}

.powerai-btn.v2:hover {
  border-color: transparent;
  background-color: transparent;
  color: #fff;
}

.powerai-btn.v2:hover::before {
  opacity: 1;
}

.powerai-btn-3 {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border-radius: 60px;
  background: #7f5fff;
  overflow: hidden;
  padding: 19px 34px;
  color: #fff;
  transition: all 0.5s ease;
  z-index: 2;
  font-family: "Inter Display";
  font-size: 18px;
  font-weight: 400;
  line-height: normal;
  letter-spacing: -0.9px;
}

.powerai-btn-3::before {
  position: absolute;
  content: "";
  inset: 0;
  background: linear-gradient(75deg, #7f5fff -47.93%, #ae77ff -17.55%, #bb6dff 13.89%, #d759ff 48.23%, #f8cc84 89.43%);
  transition: all 0.5s ease;
  opacity: 0;
  z-index: -1;
}

.powerai-btn-3 .icon {
  display: grid;
  place-content: center;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  aspect-ratio: 1/1;
  background-color: #fff;
  color: #000;
  font-size: 10px;
  border-radius: 50%;
}

.powerai-btn-3 .icon i,
.powerai-btn-3 .icon svg {
  font-size: 16px;
}

.powerai-btn-3:hover {
  background-color: transparent;
  color: #fff;
}

.powerai-btn-3:hover::before {
  opacity: 1;
}

.breadcrumb-area {
  padding: 243px 0 156px;
  background-color: var(--color-deep-blue);
}

.breadcrumb-area::before {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-image: url(../images/breadcrumb-img.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  content: "";
}

@media only screen and (max-width: 991.98px) {
  .breadcrumb-area {
    padding: 160px 0 60px;
  }
}

.breadcrumb-area.breadcrumb-area-two {
  background-image: url(../images/breadcrumb-img-two.png);
  background-size: 100% 100%;
}

.breadcrumb-video-bg {
  -o-object-fit: cover;
  object-fit: cover;
}

.breadcrumb-info .breadcrumb-nav {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.4) -17.5%, rgba(255, 255, 255, 0) 118.75%);
  display: inline-block;
  padding: 8px 16px;
  margin-bottom: 12px;
  border-radius: 50px;
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  letter-spacing: 0.9px;
  text-transform: uppercase;
}

@media only screen and (max-width: 991.98px) {
  .breadcrumb-info .breadcrumb-nav {
    font-size: 9px;
  }
}

.breadcrumb-info h1 {
  font-size: clamp(40px, 3vw, 50px);
  font-weight: 600;
}

.breadcrumb-info .breadcrumb-desc {
  margin-top: 24px;
  font-size: 18px;
  font-weight: 400;
  line-height: 32px;
}

@media only screen and (max-width: 991.98px) {
  .breadcrumb-info .breadcrumb-desc {
    margin-top: 14px;
  }
}

.border-divider {
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

/*================================================
2. Menu CSS
=================================================*/
.header-top {
  background: linear-gradient(180deg, #06284D 0%, #07294E 50%, #174268e0 92%, #051125 100%);
  padding: 8px 0;
  position: relative;
  z-index: 9 !important;
}

.header-top-contact .header-top-address {
  font-size: 18px;
}

.header-top-contact .header-top-address:hover {
  color: var(--color-white);
}

.header-top-contact .social-list {
  gap: 10px;
}

.header-top-contact .header-top-item {
  position: relative;
}

.header-top-contact .header-top-item:not(:last-child) {
  padding-right: 24px;
  margin-right: 24px;
}

.header-top-contact .header-top-item:not(:last-child)::before {
  position: absolute;
  background: rgba(255, 255, 255, 0.25);
  width: 1px;
  height: 70%;
  content: "";
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

.header-top-text {
  gap: 5px;
}

@media only screen and (max-width: 991.98px) {
  .header-top-text {
    font-size: 12px;
  }
}

.menu-area {
  width: 100%;
  padding: 18px 0px;
  position: absolute;
  left: 0;
  z-index: 9;
}

.menu-area.menu-area-border::before {
  position: absolute;
  background: linear-gradient(270deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.12) 51.86%, rgba(255, 255, 255, 0) 100%);
  height: 2px;
  width: 100%;
  content: "";
  left: 0;
  bottom: 0;
}

@keyframes slide_down_site {
  from {
    transform: translateY(-100%);
  }

  to {
    transform: translateY(0);
  }
}

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

.mainmenu ul ul li ul {
  left: 278px;
  top: 64px;
}

.mainmenu ul ul li:hover>ul {
  visibility: visible;
  opacity: 1;
  top: 15px;
}

.mainmenu li {
  display: inline-block;
  position: relative;
  padding: 0 40px 0 0;
}

@media only screen and (max-width: 1199.98px) {
  .mainmenu li {
    padding: 0 32px 0 0;
  }
}

.mainmenu li a {
  padding: 9px 0;
  transition: 0.3s;
  display: inline-block;
  color: #fff;
  font-size: 18px;
}

.mainmenu li ul {
  position: absolute;
  background: #f3f3f3;
  min-width: 300px;
  height: auto;
  transform-origin: 0 0 0;
  left: 0px;
  visibility: hidden;
  opacity: 0;
  transition: all 0.5s;
  z-index: 9;
  padding: 10px 13px;
  border-radius: 16px;
  transform: scaleY(0);
}

.mainmenu li ul li {
  text-align: left;
  display: block;
  padding: 3px;
}

.mainmenu li ul li>a {
  color: var(--primary-black);
  font-weight: 500;
  transition: 0.3s;
}

.mainmenu li ul li>a:hover {
  transform: translateX(2px);
}

.mainmenu li ul a {
  color: #fff;
  width: 85%;
  text-align: left;
  margin-left: 0px;
  padding: 0px 0px;
}

.mainmenu li:hover ul {
  visibility: visible;
  opacity: 1;
  transform: scaleY(1);
}

.mainmenu li:hover ul ul {
  visibility: hidden;
  opacity: 0;
}

.mainmenu li>a {
  transition: 0.3s;
}

.mainmenu li.has-child-menu>a {
  position: relative;
}

.mainmenu li.has-child-menu>a::before {
  position: absolute;
  left: 106%;
  top: 50%;
  transform: translateY(-50%);
  font-size: 11px;
  font-family: bootstrap-icons !important;
  content: "\f282";
  transition: all 0.5s;
  margin-left: 4px;
}

.mainmenu li.has-child-menu:hover a::before {
  transform: translateY(-50%) rotate(180deg);
}

.mainmenu li.has-child-menu ul li.has-child-menu>a::before {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 10px;
  font-family: bootstrap-icons !important;
  -webkit-text-stroke: 1px;
  content: "\f285";
  transition: all 0.5s;
  color: #000;
}

@media only screen and (min-width: 992px) {
  .has-child-menu-mega-menu {
    position: unset !important;
  }

  .has-child-menu-mega-menu ul {
    display: none;
    z-index: -1;
  }

  .has-child-menu-mega-menu .sub-nav {
    position: absolute;
    width: 100%;
    height: auto;
    left: 0;
    right: 0;
    top: 55px;
    transition: all ease 0.4s;
    z-index: 5;
    border-radius: 28px;
    padding: 20px 0;
    background-color: #f3f3f3;
    max-width: 98%;
    margin: 0 auto;
    transform-origin: 0 0 0;
    transform: scaleY(0.5);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }

  .has-child-menu-mega-menu .sub-nav .nav-item .nav-item-img {
    border-radius: 16px;
    padding: 6px;
    background-color: #ddd;
  }

  .has-child-menu-mega-menu .sub-nav .nav-item .nav-item-img img {
    border-radius: 14px;
    transition: all 0.3s;
  }

  .has-child-menu-mega-menu .sub-nav .nav-item h6 {
    font-weight: 600;
    font-size: 18px;
  }

  .has-child-menu-mega-menu .sub-nav .nav-item a {
    padding: 0;
  }

  .has-child-menu-mega-menu:hover .sub-nav {
    transform: scaleY(1);
    opacity: 1;
    visibility: visible;
    pointer-events: all;
  }
}

@media only screen and (max-width: 991.98px) {
  .has-child-menu-mega-menu .sub-nav {
    display: none;
  }

  .main-menu-wrap li {
    margin: 0;
    padding: 0;
  }

  .main-menu-wrap li.has-child-menu .sub-menu .has-child-menu .sub-menu {
    position: relative;
    top: unset;
    left: unset;
  }

  .main-menu-wrap li.has-child-menu:hover>.sub-menu {
    transform: unset;
    opacity: unset;
    visibility: unset;
  }

  .main-menu-wrap li.has-child-menu .sub-menu li a {
    padding: 1em 10%;
  }

  .main-menu-wrap li.has-child-menu .sub-menu {
    position: relative;
    top: unset;
    min-width: unset;
    list-style: none;
    transform: unset;
    opacity: 1;
    visibility: visible;
    transition: unset;
    background: unset;
    box-shadow: unset;
    border-radius: unset;
    border: unset;
    padding: 0;
  }

  .main-menu-wrap li.has-child-menu::before {
    display: none;
  }

  .mean-container .mean-nav {
    position: relative;
    margin-top: 48px;
  }

  .mean-container .mean-bar {
    position: absolute;
    background: transparent;
    padding: 0px 0;
    min-height: 0px;
    z-index: 2;
    top: 0;
    right: 0;
  }

  .mean-container a.meanmenu-reveal {
    right: 12px !important;
    color: #fff;
    font-weight: 600;
    border-radius: 50%;
    height: 16px;
    width: 16px;
    display: inline-grid;
    padding: 12px;
    top: 5px;

  }

  .mean-container a.meanmenu-reveal i {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    line-height: 1;
  }

  .mean-container a.meanmenu-reveal span {
    background: #fff;
    height: 2px;
    margin-top: 2px;
  }

  .mean-container a.meanmenu-reveal span:first-child {
    margin-top: 0px;
  }

  .mean-container .mean-nav ul li a.mean-expand {
    height: 33px;
    border-left: unset !important;
    border-bottom: unset !important;
    display: flex;
    justify-content: end;
    align-items: center;
    font-size: 27px !important;
    font-weight: 200;
    background: none;
    width: 100%;
  }

  .mean-container .mean-nav ul li a.mean-expand:hover {
    background: none;
  }

  .main-menu-wrap li.has-child-menu .sub-menu li a {
    color: rgba(255, 255, 255, 0.9215686275);
    font-size: 14px;
  }

  .mean-container .mean-nav>ul {
    height: 47vh;
    overflow-y: auto;
  }

  /* Menu button */
  .meanmenu-reveal~.mean-nav .menu-btn-wrap {
    display: none;
  }

  .meanmenu-reveal.meanclose~.mean-nav .menu-btn-wrap {
    display: block;
  }

  /* Menu button End */
  /* menu End */
}

/*================================================
3. About CSS
=================================================*/
.about-wrap {
  border-radius: 48px;
  padding: 60px 80px;
  gap: 15px;
}

.about-wrap .section-title {
  /* max-width: 278px; */
}

.about-wrap .section-title .sub-title,
.about-wrap .section-title .title {
  color: #02021f;
}

.about-wrap .about-info {
  max-width: 576px;
}

.about-wrap .about-info p {
  color: rgba(2, 2, 31, 0.7);
}

.about-wrap .about-info .disc-2 {
  margin: 18px 0 32px;
}

@media only screen and (max-width: 1199.98px) {
  .about-wrap {
    padding: 40px;
  }

  .about-wrap .about-info .disc-2 {
    margin: 10px 0 12px;
  }
}

.border-btn {
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: 28px;
  /* 155.556% */
  letter-spacing: 0.36px;
  color: #02021f;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid #02021f;
  padding-bottom: 3px;
  transition: all 0.3s;
}

.border-btn:hover .icon {
  animation: 0.3s moving_side alternate;
  transition: all 0.3s;
}

.border-btn.border-btn-white {
  color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}

@keyframes moving_side {
  0% {
    transform: translateX(4px);
  }

  100% {
    transform: translateX(0px);
  }
}

.commitment-brand-title {
  color: rgba(255, 255, 255, 0.9);
  font-size: 24px;
  font-weight: 500;
  letter-spacing: 2.88px;
}

.commitment-brand-title.commitment-brand-title-two {
  position: relative;
  max-width: 770px;
  width: 100%;
  margin: 0 auto;
  z-index: 1;
}

.commitment-brand-title.commitment-brand-title-two::after,
.commitment-brand-title.commitment-brand-title-two::before {
  position: absolute;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.6) 100%);
  width: 186px;
  height: 1px;
  content: "";
  top: 50%;
  transform: translateY(-50%);
  left: -274px;
  z-index: -1;
}

@media only screen and (max-width: 1199.98px) {

  .commitment-brand-title.commitment-brand-title-two::after,
  .commitment-brand-title.commitment-brand-title-two::before {
    display: none;
  }
}

.commitment-brand-title.commitment-brand-title-two::after {
  left: auto;
  right: -274px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0) 100%);
}

.about-ai-info .section-title .title {
  font-size: 40px;
  font-weight: 500;
  line-height: 1.5;
}

@media only screen and (max-width: 1199.98px) {
  .about-ai-info .section-title .title {
    font-size: 30px;
  }
}

.section-border {
  padding: 100px 0;
}

@media only screen and (max-width: 991.98px) {
  .section-border {
    padding: 45px 0;
  }
}

.values-wrapper {
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  padding: 80px 48px;
}

@media only screen and (max-width: 991.98px) {
  .values-wrapper {
    padding: 30px 15px;
  }
}

.values-heading .section-title .title {
  font-size: 48px;
}

@media only screen and (max-width: 1199.98px) {
  .values-heading .section-title .title {
    font-size: 35px;
  }
}

.values-box-wrap {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 28px;
  /* max-width: 650px; */
  margin: 0 0 0 auto;
}

@media only screen and (max-width: 767.98px) {
  .values-box-wrap {
    grid-template-columns: repeat(1, 1fr);
  }
}

.values-box-wrap .single-values-box {
  position: relative;
  padding-left: 28px;
  overflow: hidden;
}

.values-box-wrap .single-values-box::before {
  position: absolute;
  left: 0;
  top: 0;
  content: "";
  background: #262739;
  width: 2px;
  height: 100%;
}

.values-box-wrap .single-values-box::after {
  position: absolute;
  left: 0;
  content: "";
  background-image: url(../images/shapes/values-sp.png);
  width: 2px;
  height: 81px;
  animation: slide_up 6s linear infinite;
}

.values-box-wrap .single-values-box .values-icon {
  border-radius: 8px;
  border: 0.5px solid rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.06);
  width: 40px;
  height: 40px;
}

.values-box-wrap .single-values-box .values-icon svg,
.values-box-wrap .single-values-box .values-icon i {
  color: #fff;
  transition: all 0.1s linear;
}

.values-box-wrap .single-values-box h2 {
  margin: 12px 0 4px;
}

.values-box-wrap .single-values-box:hover .values-icon svg,
.values-box-wrap .single-values-box:hover .values-icon i {
  color: #f6ba50;
}

@keyframes slide_up {
  from {
    bottom: -81px;
  }

  to {
    bottom: 100%;
  }
}

.about-5.section {
  background-color: #141414;
  position: relative;
  z-index: 2;
}

.about-5.section::before {
  position: absolute;
  content: "";
  width: 463px;
  height: 463px;
  border-radius: 463px;
  background: linear-gradient(133deg, rgba(232, 66, 140, 0.2) 24.11%, rgba(112, 78, 231, 0.2) 75.89%);
  filter: blur(120px);
  top: 0;
  left: -140px;
  pointer-events: none;
}

.about-5.section .shape {
  position: absolute;
  top: 80px;
  left: 0;
}

@media only screen and (max-width: 1199.98px) {
  .about-5.section .shape {
    display: none;
  }
}

.about-5.section .shape img {
  animation: floatUpDown 2s ease-in-out infinite;
}

@media only screen and (max-width: 1599.98px) {
  .about-5.section .shape img {
    max-width: 70%;
  }
}

.about-5__thumb {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 28px;
  align-items: center;
}

@media only screen and (max-width: 1199.98px) {
  .about-5__thumb {
    grid-template-columns: repeat(15, minmax(0, 1fr));
    gap: 22px;
  }
}

@media only screen and (max-width: 575.98px) {
  .about-5__thumb {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 20px;
  }
}

.about-5__thumb img {
  border-radius: 32px;
}

.about-5__thumb img:nth-of-type(1) {
  grid-column: span 4/span 4;
}

@media only screen and (max-width: 1199.98px) {
  .about-5__thumb img:nth-of-type(1) {
    grid-column: span 7/span 7;
  }
}

@media only screen and (max-width: 575.98px) {
  .about-5__thumb img:nth-of-type(1) {
    grid-column: span 12/span 12;
  }
}

.about-5__thumb img:nth-of-type(2) {
  grid-column: span 5/span 5;
}

@media only screen and (max-width: 1199.98px) {
  .about-5__thumb img:nth-of-type(2) {
    grid-column: span 8/span 8;
  }
}

@media only screen and (max-width: 575.98px) {
  .about-5__thumb img:nth-of-type(2) {
    grid-column: span 12/span 12;
  }
}

.about-5__content .section-header .section-sub-title {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 32px;
  font-size: 28px;
  font-weight: 600;
  line-height: 130%;
  font-family: var(--ff-inter-tight);
  background: linear-gradient(75deg, #7f5fff -47.93%, #ae77ff -17.55%, #bb6dff 13.89%, #d759ff 48.23%, #f8cc84 89.43%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

@media only screen and (max-width: 991.98px) {
  .about-5__content .section-header .section-sub-title {
    font-size: 20px;
    gap: 15px;
  }
}

.about-5__content .section-header .section-sub-title::before {
  position: relative;
  content: "";
  background-color: var(--color-white);
  width: 100px;
  height: 1px;
  opacity: 0.2;
}

@media only screen and (max-width: 991.98px) {
  .about-5__content .section-header .section-sub-title::before {
    width: 50px;
  }
}

.about-5__content .section-header .section-title {
  font-weight: 500;
  line-height: 106.452%;
  letter-spacing: -1.86px;
}

.about-5__content .section-header p {
  color: rgba(255, 255, 255, 0.59);
  font-family: var(--ff-inter);
  font-size: 16px;
  font-weight: 400;
  line-height: 150%;
  letter-spacing: 0.32px;
}

.about-5__content .section-header p:first-of-type {
  max-width: 560px;
  margin-bottom: 18px;
}

.about-5__content .section-header p:last-of-type {
  max-width: 598px;
}

.about-5__content .btn-and-user {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px;
}

.about-5__content .btn-and-user .users-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
}

.about-5__content .btn-and-user .users-group .users img {
  width: 45px;
  height: 45px;
  flex-shrink: 0;
  border-radius: 100%;
}

.about-5__content .btn-and-user .users-group .users img:not(:first-of-type) {
  margin-left: -15px;
}

.about-5__content .btn-and-user .users-group .info {
  color: #fff;
  font-family: "Inter Display";
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 20.8px;
}

@keyframes floatUpDown {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(20px);
  }
}

/*================================================
4. Service CSS
=================================================*/
.service-box-wrap {
  padding: 1px;
  overflow: hidden;
  position: relative;
  border-radius: 24px;
  transition: all 1s;
}

.service-box-wrap::before {
  position: absolute;
  left: 0%;
  top: 0%;
  height: 100%;
  width: 100%;
  opacity: 1;
  background: linear-gradient(115deg, rgba(255, 255, 255, 0.25) 11.62%, rgba(255, 255, 255, 0) 50.7%, rgba(255, 255, 255, 0.25) 92.88%);
  transition: all 1s linear;
  content: "";
  z-index: 1;
}

.service-box-wrap .service-box {
  padding: 32px 36px;
  background-color: #0c0d25;
  border-radius: 24px;
  transition: all 0.2s linear;
  height: 100%;
  position: relative;
  z-index: 1;
}

.service-box-wrap .service-box h3 {
  color: var(--color-white);
  font-size: 20px;
  font-weight: 500;
  line-height: normal;
  text-transform: capitalize;
  display: flex;
  align-items: center;
  gap: 24px;
  position: relative;
  z-index: 2;
}

.service-box-wrap .service-box p {
  color: var(--color-light-white);
  margin-top: 24px;
  position: relative;
  z-index: 2;
}

@media only screen and (max-width: 991.98px) {
  .service-box-wrap .service-box {
    font-size: 18px;
  }
}

.service-box-wrap:hover {
  background: linear-gradient(115deg, rgba(255, 255, 255, 0) 11.62%, rgba(255, 255, 255, 0) 50.7%, rgba(255, 255, 255, 0) 92.88%);
}

.service-box-wrap:hover::before {
  animation: animate_border 6.5s linear infinite;
  opacity: 1;
  left: 50%;
  top: 50%;
  height: 269%;
  width: 115%;
}

/*================================================
5. Industries CSS
=================================================*/
.industries-box {
  border-radius: 24px;
  padding: 36px 36px 56px;
  background: #0c0d25;
  height: 100%;
}

.industries-box::before {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  background-image: url(../images/shapes/line.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  content: "";
  z-index: -1;
}

.industries-box .industries-img {
  border-radius: 16px;
  overflow: hidden;
}

.industries-box .industries-img img {
  border-radius: 16px;
  transition: all 0.2s linear;
}

.industries-box .industries-info {
  margin-top: 40px;
  padding: 0 20px;
}

.industries-box .industries-info span {
  font-family: var(--ff-inter);
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  display: inline-block;
}

.industries-box .industries-info h2 {
  color: var(--color-white);
  margin: 12px 0 20px;
  font-size: 32px;
  font-style: normal;
  font-weight: 500;
  line-height: 1.5;
  text-transform: capitalize;
}

.industries-box .industries-info p {
  margin-bottom: 30px;
  font-size: 15px;
}

.industries-box:hover .industries-img img {
  transform: scale(1.02);
}

@media only screen and (max-width: 991.98px) {
  .industries-box {
    padding: 8px;
  }

  .industries-box .industries-info {
    margin-top: 20px;
    padding: 0 10px;
  }

  .industries-box .industries-info h2 {
    margin: 5px 0 10px;
    font-size: 22px;
  }

  .industries-box .industries-info p {
    margin-bottom: 16px;
  }
}

.industries-box.industries-box-design-two {
  gap: 100px;
  padding: 50px;
}

.industries-box.industries-box-design-two .industries-info {
  padding: 0px;
}

@media only screen and (max-width: 1399.98px) {
  .industries-box.industries-box-design-two {
    gap: 40px;
  }

  .industries-box.industries-box-design-two .industries-img {
    max-width: 400px;
    width: 100%;
  }
}

@media only screen and (max-width: 1199.98px) {
  .industries-box.industries-box-design-two .industries-info h2 {
    font-size: 25px;
  }
}

@media only screen and (max-width: 991.98px) {
  .industries-box.industries-box-design-two {
    padding: 20px;
  }

  .industries-box.industries-box-design-two .industries-img {
    max-width: unset;
    width: 100%;
  }
}

/*================================================
6. Achievement CSS
=================================================*/
.achievement-line-wrap .achievement-single-line-wrap {
  position: relative;
}

.achievement-line-wrap .achievement-single-line-wrap:not(:last-child)::before {
  position: absolute;
  background-image: url(../images/shapes/count.png);
  content: "";
  left: 100%;
  top: 50%;
  width: 1px;
  height: 88px;
  transform: translateY(-50%);
}

@media only screen and (max-width: 991.98px) {
  .achievement-line-wrap .achievement-single-line-wrap:not(:last-child)::before {
    display: none;
  }
}

.achievement-line-wrap.achievement-line-wrap-white .achievement-single-line-wrap:not(:last-child)::before {
  background-image: url(../images/shapes/count-white.png);
  height: 100%;
}

.achievement-count-box .counter-item {
  font-size: 60px;
  font-weight: 600;
}

.achievement-count-box .counter-item em {
  font-style: normal;
  margin-left: -10px;
  font-size: 55px;
}

.achievement-count-box p {
  font-size: 22px;
  margin-top: 4px;
}

@media only screen and (max-width: 991.98px) {
  .achievement-count-box .counter-item {
    font-size: 50px;
  }

  .achievement-count-box .counter-item em {
    font-size: 45px;
  }

  .achievement-count-box p {
    font-size: 18px;
    margin-top: 0;
  }
}

.site-border {
  border: 0.5px solid rgba(255, 255, 255, 0.2);
}

/*================================================
7. Data CSS
=================================================*/
.data-info span {
  font-family: var(--ff-inter);
  font-size: 18px;
  font-weight: 500;
  line-height: normal;
  letter-spacing: 0.9px;
  text-transform: uppercase;
}

.data-info h2 {
  color: #fff;
  font-size: 32px;
  font-style: normal;
  font-weight: 600;
  line-height: 1.2;
  text-transform: capitalize;
  margin: 16px 0 24px;
}

.data-info p {
  margin-bottom: 32px;
  font-size: 18px;
}

@media only screen and (max-width: 1199.98px) {
  .data-info h2 {
    font-size: 40px;
    margin: 10px 0 16px;
  }

  .data-info p {
    margin-bottom: 22px;
  }
}

@media only screen and (max-width: 991.98px) {
  .data-info h2 {
    font-size: 24px;
  }
}

.data-img-wrap {
  padding-left: 40px;
}

.data-img-wrap .data-img-2 {
  animation: slide_1 3s ease-in-out alternate infinite;
  top: 10%;
  left: -40px;
}

@media only screen and (max-width: 991.98px) {
  .data-img-wrap {
    padding-left: 0px;
  }
}

.data-sp {
  left: -76px;
  bottom: -215px;
}

.listing {
  gap: 20px;
}

.listing li {
  color: var(--color-light-white);
  display: flex;
  align-items: center;
  font-size: 18px;
  gap: 18px;
}

.listing.listing-two {
  gap: 12px;
}

.listing.listing-two li {
  gap: 12px;
  font-size: 16px;
}

@keyframes slide_1 {
  0% {
    transform: translateY(50px);
  }

  100% {
    transform: translateY(0px);
  }
}

/*================================================
8. Blog CSS
=================================================*/
.blog-box {
  padding: 20px 20px 20px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  height: 100%;
}

.blog-box .blog-img {
  border-radius: 12px;
}

.blog-box .blog-img img {
  border-radius: 12px;
  transition: all 0.3s linear;
}

.blog-box .blog-info h2 {
  font-size: 24px;
  font-weight: 500;
  line-height: 1.6;
  text-transform: capitalize;
  margin: 40px 0 16px;
}

.blog-box .blog-info h3 {
  font-size: 18px;
  font-weight: 500;
  line-height: 1.6;
  text-transform: capitalize;
  margin: 20px 0 0px;
}


@media only screen and (max-width: 991.98px) {
  .blog-box .blog-info h2 {
    font-size: 20px;
  }

  .blog-box .blog-info h2 {
    font-size: 20px;
  }
}

.blog-box .blog-info p {
  margin-bottom: 28px;
}

.blog-box:hover .blog-img img {
  transform: scale(1.07);
}

@media only screen and (max-width: 991.98px) {
  .blog-box .blog-info h2 {
    margin: 25px 0 6px;
  }

  .blog-box .blog-info p {
    margin-bottom: 18px;
  }
}

.blog-box.blog-box-sidebar {
  padding: 30px;
}

.blog-box.blog-box-sidebar .blog-meta {
  margin-top: 20px;
}

.blog-box.blog-box-sidebar .blog-info h2 {
  font-size: 32px;
  font-weight: 500;
  margin: 24px 0 12px;
  line-height: 150%;
}

@media only screen and (max-width: 1199.98px) {
  .blog-box.blog-box-sidebar .blog-info h2 {
    font-size: 22px;
    margin: 14px 0 8px;
  }
}

.blog-box.blog-box-sidebar .blog-info p {
  font-size: 18px;
  margin-bottom: 24px;
}

@media only screen and (max-width: 1199.98px) {
  .blog-box.blog-box-sidebar .blog-info p {
    margin-bottom: 16px;
  }
}

@media only screen and (max-width: 1199.98px) {
  .blog-box.blog-box-sidebar {
    padding: 20px;
  }
}

.blog-meta {
  gap: 28px;
  margin-top: 20px;
}

.blog-meta li {
  color: var(--color-light-white);
  display: flex;
  align-items: center;
  gap: 8px;
}

.blog-meta li svg,
.blog-meta li i {
  color: var(--color-white);
}

@media only screen and (max-width: 767.98px) {
  .blog-meta {
    gap: 15px;
    row-gap: 0px;
  }
}

.slider-button-wrap-arrow {
  gap: 24px;
}

.slider-button-wrap-arrow .slide-btn {
  transition: all 0.3s;
  color: rgba(255, 255, 255, 0.25);
}

.slider-button-wrap-arrow .slide-btn:hover {
  color: #fff;
}

@media only screen and (max-width: 991.98px) {
  .slider-button-wrap-arrow .slide-btn svg {
    width: 50px;
  }
}

@media only screen and (max-width: 991.98px) {
  .slider-button-wrap-arrow {
    gap: 14px;
  }
}

.blog-box-wrapper {
  max-width: 850px;
  width: 100%;
  gap: 30px;
}

.sidebar-wrap .single-sidebar {
  padding: 30px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.sidebar-wrap .single-sidebar:not(:last-child) {
  margin-bottom: 30px;
}

@media only screen and (max-width: 1199.98px) {
  .sidebar-wrap .single-sidebar {
    padding: 20px;
  }
}

.sidebar-search input {
  width: 100%;
  background: transparent;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.7);
  padding: 7px 80px 7px 24px;
}

.sidebar-search input::-moz-placeholder {
  color: rgba(255, 255, 255, 0.7);
  font-family: var(--ff-inter);
  font-size: 18px;
}

.sidebar-search input::placeholder {
  color: rgba(255, 255, 255, 0.7);
  font-family: var(--ff-inter);
  font-size: 18px;
}

.sidebar-search button {
  background-color: var(--color-blue);
  right: 0;
  padding: 0px 18px;
  border-radius: 0px 8px 8px 0px;
  color: var(--color-white);
}

.sidebar-title {
  color: var(--color-white);
  border-bottom: 1px solid #191933;
  padding-bottom: 12px;
  margin-bottom: 28px;
}

@media only screen and (max-width: 1199.98px) {
  .sidebar-title {
    padding-bottom: 8px;
    margin-bottom: 18px;
  }
}

.sidebar-recent-post-wrap .sidebar-recent-post-box:not(:last-child) {
  margin-bottom: 20px;
}

.sidebar-recent-post-wrap .sidebar-recent-post-box .recent-post-title {
  font-size: 18px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.8);
  transition: all 0.2s;
}

.sidebar-recent-post-wrap .sidebar-recent-post-box .recent-post-meta {
  color: var(--color-light-white);
  margin-top: 4px;
}

.sidebar-recent-post-wrap .sidebar-recent-post-box:hover .recent-post-title {
  color: var(--color-white);
}

.sidebar-category {
  gap: 20px;
}

@media only screen and (max-width: 1199.98px) {
  .sidebar-category {
    gap: 16px;
  }
}

.sidebar-category li {
  color: var(--color-light-white);
  transition: all 0.3s;
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-transform: capitalize;
  font-family: var(--ff-inter);
  font-size: 18px;
}

.sidebar-category li:hover {
  color: var(--color-white);
}

.sidebar-newsletter input {
  border-radius: 100px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.02);
  color: var(--color-light-white);
  padding: 12px 24px;
  margin-bottom: 12px;
}

.sidebar-newsletter input::-moz-placeholder {
  color: rgba(255, 255, 255, 0.7);
  font-family: var(--ff-inter);
  font-size: 18px;
}

.sidebar-newsletter input::placeholder {
  color: rgba(255, 255, 255, 0.7);
  font-family: var(--ff-inter);
  font-size: 18px;
}

.sidebar-newsletter .common-btn {
  padding: 16px 22px;
}

.page-list {
  gap: 16px;
}

.page-list li:not(:first-child):not(:last-child) {
  height: 25px;
  width: 25px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid transparent;
  color: var(--color-blue);
  font-size: 14px;
  font-weight: 700;
}

.page-list li svg,
.page-list li i {
  color: var(--color-light-white);
  transition: all 0.2s;
}

.page-list li svg:hover,
.page-list li i:hover {
  color: var(--color-white);
}

.page-list li.active:not(:first-child):not(:last-child) {
  color: var(--color-white);
  border: 1px solid var(--color-light-white);
}

.blog-details-info-wrap {
  /* max-width: 1110px; */
  padding-left: 0px;
  width: 100%;
}

.blog-details-info-wrap .details-title-gap {
  margin-bottom: 20px;
}

@media only screen and (max-width: 991.98px) {
  .blog-details-info-wrap .details-title-gap {
    margin-bottom: 20px;
  }
}

.blog-details-info-wrap .details-section-gap {
  margin-bottom: 48px;
}

@media only screen and (max-width: 991.98px) {
  .blog-details-info-wrap .details-section-gap {
    margin-bottom: 30px;
  }
}

.blog-details-info-wrap .details-text-gap {
  margin-top: 24px;
}

@media only screen and (max-width: 991.98px) {
  .blog-details-info-wrap .details-text-gap {
    margin-top: 12px;
  }
}

.blog-details-info-wrap .blog-meta {
  gap: 32px;
  margin-bottom: 48px;
}

.blog-details-info-wrap .blog-meta li {
  font-size: 18px;
  gap: 20px;
}

@media only screen and (max-width: 991.98px) {
  .blog-details-info-wrap .blog-meta {
    gap: 15px;
    row-gap: 12px;
    margin-bottom: 30px;
  }
}

.blog-details-info-wrap .blog-details-title {
  font-size: 32px);
  font-weight: 600;
  line-height: 128.571%;
}

.blog-details-info-wrap .blog-details-sub-title {
  font-size: 24px;
  font-weight: 500;
  color: var(--color-white);
}

@media only screen and (max-width: 991.98px) {
  .blog-details-info-wrap .blog-details-sub-title {
    font-size: 22px;
  }
}

.blog-details-info-wrap p {
  font-size: 18px;
  line-height: 177.778%;
}

@media only screen and (max-width: 1199.98px) {
  .blog-details-info-wrap {
    padding-left: 10px;
  }
}

@media only screen and (max-width: 991.98px) {
  .blog-details-info-wrap {
    padding-left: 0px;
  }
}

.wp-block-quote {
  border-radius: 10px;
  background: url(../images/blog/quote-box-bg.png);
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  padding: 48px;
  z-index: 1;
  margin: 64px 0;
}

@media only screen and (max-width: 991.98px) {
  .wp-block-quote {
    padding: 25px 25px 100px;
    margin: 34px 0;
  }
}

.wp-block-quote::after {
  position: absolute;
  background-image: url(../images/blog/quote.svg);
  background-repeat: no-repeat;
  content: "";
  right: 48px;
  bottom: 48px;
  width: 72px;
  height: 72px;
  z-index: -1;
}

@media only screen and (max-width: 991.98px) {
  .wp-block-quote::after {
    right: 18px;
    bottom: 18px;
  }
}

.wp-block-quote p {
  font-size: 28px;
  font-style: italic;
  font-weight: 500;
  line-height: 157.143%;
}

.wp-block-quote .quote-author {
  margin-top: 40px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 20px;
}

@media only screen and (max-width: 991.98px) {
  .wp-block-quote .quote-author {
    flex-direction: column;
  }
}

.wp-block-quote .quote-author .quote-author-info .quote-author-title {
  color: #c6c5fa;
  font-size: 18px;
  line-height: 32px;
}

.wp-block-quote cite {
  font-family: var(--ff-inter);
  font-size: 22px;
  font-weight: 600;
  line-height: normal;
}

.tag-list.blog-details-tag-list {
  gap: 20px;
}

.tag-list.blog-details-tag-list li {
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.1);
  font-family: var(--ff-inter);
  font-style: italic;
  font-weight: 500;
  padding: 13px 28px;
  color: var(--color-white);
}

@media only screen and (max-width: 991.98px) {
  .tag-list.blog-details-tag-list li {
    padding: 8px 15px;
  }
}

@media only screen and (max-width: 991.98px) {
  .tag-list.blog-details-tag-list {
    gap: 10px;
  }
}

.blog-details-social {
  gap: 28px;
}

.blog-details-social .details-social-title {
  font-size: 32px;
  font-weight: 500;
  line-height: 0;
}

.comments-wrap .single-comments-box {
  gap: 28px;
}

@media only screen and (max-width: 991.98px) {
  .comments-wrap .single-comments-box {
    gap: 12px;
  }
}

.comments-wrap .single-comments-box:not(:last-child) {
  margin-bottom: 30px;
}

.comments-wrap .single-comments-box:nth-child(even) {
  padding-left: 100px;
}

@media only screen and (max-width: 991.98px) {
  .comments-wrap .single-comments-box:nth-child(even) {
    padding-left: 20px;
  }
}

.comments-wrap .single-comments-box .comments-img {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  padding: 3px;
  overflow: hidden;
}

.comments-wrap .single-comments-box .comments-info h3 {
  font-size: 20px;
  font-weight: 600;
  line-height: 160%;
}

.comments-wrap .single-comments-box .comments-info p {
  font-size: 18px;
  margin: 4px 0 20px;
}

@media only screen and (max-width: 991.98px) {
  .comments-wrap .single-comments-box .comments-info p {
    margin: 4px 0 10px;
  }
}

.comments-wrap .single-comments-box .comments-info .reply-btn {
  gap: 8px;
  transition: all 0.3s;
}

.comments-wrap .single-comments-box:hover .comments-info .reply-btn {
  color: #fff;
}

.comments-wrap .single-comments-box:hover .comments-info .reply-btn svg,
.comments-wrap .single-comments-box:hover .comments-info .reply-btn i {
  color: var(--primary-green);
}

/*================================================
9. FAQ CSS
=================================================*/
.faq-wrap .accordion-item {
  background-color: transparent;
  border: unset;
}

.faq-wrap .accordion-item .accordion-collapse .accordion-body {
  padding: 0 0 24px;
  color: var(--color-light-white);
  padding-right: 90px;
}

.faq-wrap .accordion-item .accordion-collapse.show .accordion-body {
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}

.faq-wrap .accordion-item:not(:last-child) {
  margin-bottom: 20px;
}

.faq-wrap .accordion-item:first-of-type,
.faq-wrap .accordion-item:last-of-type {
  border-radius: unset;
}

.faq-wrap .accordion-item .accordion-button {
  font-family: var(--ff-inter);
  color: var(--color-white);
  padding: 0 0 23px;
  font-size: 24px;
  font-weight: 500;
  line-height: 1.6;
  text-transform: capitalize;
  background-color: transparent;
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}

@media only screen and (max-width: 991.98px) {
  .faq-wrap .accordion-item .accordion-button {
    font-size: 18px;
  }
}

.faq-wrap .accordion-item .accordion-button::after {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: bootstrap-icons !important;
  content: "\f4fe";
  background-image: unset;
  font-size: 25px;
  width: 35.833px;
  height: 35.833px;
  border: 2.5px solid rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  color: var(--color-light-white);
}

@media only screen and (max-width: 991.98px) {
  .faq-wrap .accordion-item .accordion-button::after {
    font-size: 18px;
    width: 25px;
    height: 25px;
  }
}

.faq-wrap .accordion-item .accordion-button:focus {
  box-shadow: unset;
  border-color: rgba(255, 255, 255, 0.25);
}

.faq-wrap .accordion-item .accordion-button:not(.collapsed) {
  background-color: transparent;
  box-shadow: unset;
  border-bottom: 1px solid transparent;
}

.faq-wrap .accordion-item .accordion-button:not(.collapsed)::after {
  font-family: bootstrap-icons !important;
  content: "\f2ea";
  border: 2.5px solid #fff;
  color: var(--color-white);
}

.faq-wrap .accordion-item:last-of-type .accordion-button.collapsed {
  border-bottom-right-radius: unset;
  border-bottom-left-radius: unset;
}

.faq-wrap.faq-wrap-two .accordion-item {
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  padding: 40px;
  transition: all 0.5s linear;
}

@media only screen and (max-width: 991.98px) {
  .faq-wrap.faq-wrap-two .accordion-item {
    padding: 20px;
  }
}

.faq-wrap.faq-wrap-two .accordion-item:hover {
  background-color: #060621;
}

.faq-wrap.faq-wrap-two .accordion-item .accordion-body {
  margin-top: 30px;
}

.faq-wrap.faq-wrap-two .accordion-item .accordion-collapse .accordion-body {
  padding: 0;
}

.faq-wrap.faq-wrap-two .accordion-item .accordion-collapse.show .accordion-body {
  border-bottom: unset;
}

.faq-wrap.faq-wrap-two .accordion-item:not(:last-child) {
  margin-bottom: 24px;
}

.faq-wrap.faq-wrap-two .accordion-item:first-of-type,
.faq-wrap.faq-wrap-two .accordion-item:last-of-type {
  border-radius: 20px;
}

.faq-wrap.faq-wrap-two .accordion-item .accordion-button {
  padding: 0;
  font-size: 32px;
  font-weight: 500;
  border-bottom: unset;
}

@media only screen and (max-width: 991.98px) {
  .faq-wrap.faq-wrap-two .accordion-item .accordion-button {
    font-size: 18px;
  }
}

.faq-wrap.faq-wrap-two .accordion-item .accordion-button::after {
  width: 35px;
  height: 35px;
  font-size: 35px;
  border: 2.5px solid transparent;
}

@media only screen and (max-width: 991.98px) {
  .faq-wrap.faq-wrap-two .accordion-item .accordion-button::after {
    font-size: 22px;
  }
}

.faq-wrap.faq-wrap-two .accordion-item .accordion-button:focus {
  border-color: transparent;
}

.faq-wrap.faq-wrap-two .accordion-item .accordion-button:not(.collapsed)::after {
  border: 2.5px solid transparent;
}

.faq-wrap.faq-wrap-three .accordion-item:hover {
  background-color: #191f2f;
}

.faq-wrap.faq-wrap-white .accordion-item .accordion-body {
  color: var(--color-text-body);
  border-radius: 0px 0px 12px 12px;
  background: rgba(3, 24, 17, 0.02);
  font-size: 18px;
  padding: 40px;
}

@media only screen and (max-width: 991.98px) {
  .faq-wrap.faq-wrap-white .accordion-item .accordion-body {
    padding: 20px;
  }
}

.faq-wrap.faq-wrap-white .accordion-item .accordion-button {
  color: var(--color-text-heading);
  padding: 0;
  font-size: 32px;
  font-weight: 500;
  border-bottom: unset;
  border-bottom: 1.5px solid rgba(3, 24, 17, 0.5);
  padding-bottom: 30px;
}

@media only screen and (max-width: 991.98px) {
  .faq-wrap.faq-wrap-white .accordion-item .accordion-button {
    padding-bottom: 20px;
  }
}

@media only screen and (max-width: 991.98px) {
  .faq-wrap.faq-wrap-white .accordion-item .accordion-button {
    font-size: 18px;
  }
}

.faq-wrap.faq-wrap-white .accordion-item .accordion-button::after {
  color: var(--color-text-body);
  font-size: 34px;
}

@media only screen and (max-width: 991.98px) {
  .faq-wrap.faq-wrap-white .accordion-item .accordion-button::after {
    font-size: 22px;
  }
}

.faq-wrap.faq-wrap-white .accordion-item .accordion-button:focus {
  border-color: rgba(3, 24, 17, 0.5);
}

.faq-wrap.faq-wrap-white .accordion-item .accordion-button:not(.collapsed)::after {
  border: 2.5px solid transparent;
}

.faq-wrap.faq-wrap-white .accordion-item:not(:last-child) {
  margin-bottom: 30px;
}

@media only screen and (max-width: 991.98px) {
  .faq-wrap.faq-wrap-white .accordion-item:not(:last-child) {
    margin-bottom: 20px;
  }
}

.faq-nav-list-wrap {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 24px;
  margin: 0 0 0 auto;
}

.faq-nav-list-wrap .nav-link {
  display: flex;
  height: 100%;
  flex-direction: column;
  text-align: center;
  align-items: center;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  padding: 20px;
  background-color: transparent;
  min-width: 300px;
  width: 100%;
}

.faq-nav-list-wrap .nav-link .faq-list-title {
  font-family: var(--ff-inter);
  font-size: 24px;
  font-weight: 500;
  line-height: 166.667%;
  text-transform: capitalize;
  margin: 28px 0 4px;
}

.faq-nav-list-wrap .nav-link .faq-list-desc {
  font-size: 18px;
  font-weight: 400;
  line-height: 177.778%;
}

.faq-nav-list-wrap .nav-link.active,
.faq-nav-list-wrap .show>.nav-link {
  background-color: transparent;
  border: 1px solid var(--color-blue);
}

@media only screen and (max-width: 1399.98px) {
  .faq-nav-list-wrap .nav-link {
    min-width: 250px;
  }

  .faq-nav-list-wrap .nav-link svg {
    width: 50px;
    height: 50px;
  }

  .faq-nav-list-wrap .nav-link .faq-list-title {
    font-size: 22px;
    margin: 20px 0 4px;
  }

  .faq-nav-list-wrap .nav-link .faq-list-desc {
    font-size: 16px;
  }
}

@media only screen and (max-width: 1199.98px) {
  .faq-nav-list-wrap .nav-link {
    min-width: 200px;
  }

  .faq-nav-list-wrap .nav-link .faq-list-title {
    font-size: 20px;
    margin: 15px 0 4px;
  }
}

@media only screen and (max-width: 991.98px) {
  .faq-nav-list-wrap .nav-link {
    min-width: 150px;
  }

  .faq-nav-list-wrap .nav-link svg {
    width: 30px;
    height: 30px;
  }

  .faq-nav-list-wrap .nav-link .faq-list-title {
    font-size: 15px;
    margin: 12px 0 4px;
  }

  .faq-nav-list-wrap .nav-link .faq-list-desc {
    font-size: 12px;
  }
}

@media only screen and (max-width: 767.98px) {
  .faq-nav-list-wrap {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: scroll;
    gap: 10px;
  }

  .faq-nav-list-wrap .nav-link {
    padding: 10px;
  }
}

.faq-5.section {
  background: #141414;
}

.faq-5.section .section-header p {
  max-width: 350px;
}

@media only screen and (max-width: 1199.98px) {
  .faq-5.section .section-header p {
    max-width: 100%;
  }
}

.faq-5__accordion {
  border-radius: 0;
}

.faq-5__accordion .accordion-item {
  position: relative;
  z-index: 2;
  border-radius: 19px;
  overflow: hidden;
  border: 1px solid transparent;
  background-color: transparent;
  transition: opacity 0.5s ease-in-out;
}

.faq-5__accordion .accordion-item::before {
  position: absolute;
  content: "";
  inset: 0;
  border-radius: 19px;
  overflow: hidden;
  z-index: -1;
  background-color: #1f1e28;
  opacity: 1;
  transition: opacity 0.5s ease-in-out;
}

.faq-5__accordion .accordion-item:has(.accordion-button:not(.collapsed)) {
  border-color: rgba(255, 255, 255, 0.15);
}

.faq-5__accordion .accordion-item:has(.accordion-button:not(.collapsed))::before {
  opacity: 0;
}

.faq-5__accordion .accordion-item:has(.accordion-button:not(.collapsed)) .accordion-header {
  color: rgb(255, 255, 255);
}

.faq-5__accordion .accordion-item:not(:last-of-type) {
  margin-bottom: 16px;
}

.faq-5__accordion .accordion-item .accordion-header {
  color: rgba(255, 255, 255, 0.7);
  font-family: "Inter Display", sans-serif;
  font-size: 24px;
  font-weight: 400;
  line-height: 125%;
  letter-spacing: -1.44px;
}

@media only screen and (max-width: 1199.98px) {
  .faq-5__accordion .accordion-item .accordion-header {
    font-size: 20px;
  }
}

.faq-5__accordion .accordion-item .accordion-header .accordion-button {
  gap: 10px;
  font: inherit;
  color: inherit;
  background-color: transparent;
  padding: 22px 32px;
}

@media only screen and (max-width: 1199.98px) {
  .faq-5__accordion .accordion-item .accordion-header .accordion-button {
    padding: 18px 25px;
  }
}

.faq-5__accordion .accordion-item .accordion-header .accordion-button::after {
  display: grid;
  place-content: center;
  background-image: none;
  font-family: "bootstrap-icons";
  font-size: 20px;
  content: "\f64d";
  color: inherit;
}

.faq-5__accordion .accordion-item .accordion-header .accordion-button:not(.collapsed) {
  box-shadow: none;
}

.faq-5__accordion .accordion-item .accordion-header .accordion-button:not(.collapsed)::after {
  content: "\f2ea";
  font-family: "bootstrap-icons";
  font-size: 20px;
}

.faq-5__accordion .accordion-item .accordion-header .accordion-button:focus,
.faq-5__accordion .accordion-item .accordion-header .accordion-button:focus-visible,
.faq-5__accordion .accordion-item .accordion-header .accordion-button:hover {
  box-shadow: none;
}

.faq-5__accordion .accordion-item .accordion-collapse .accordion-body {
  padding: 22px 32px;
  padding-top: 0;
  color: rgba(191, 191, 191, 0.8);
  font-family: "Inter Display", sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 23.4px;
  letter-spacing: -1.08px;
}

@media only screen and (max-width: 1199.98px) {
  .faq-5__accordion .accordion-item .accordion-collapse .accordion-body {
    padding: 18px 25px;
    padding-top: 0;
  }
}

/*================================================
10. Subscribe CSS
=================================================*/
.subscribe-wrap {
  padding: 100px 20px;
  border-radius: 32px;
  background: linear-gradient(212deg, #0023ec 13.33%, #9746d8 55.74%, #d100eb 93.86%);
}

.subscribe-wrap .section-title p {
  max-width: 806px;
  margin: 24px auto 0;
}

@media only screen and (max-width: 991.98px) {
  .subscribe-wrap {
    padding: 60px 20px;
  }

  .subscribe-wrap .section-title p {
    margin: 12px auto 0;
  }
}

.subscribe-wrap.subscribe-wrap-two {
  background-image: url(../images/subscribe-bg.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.subscribe-wrap.subscribe-wrap-two .section-title .title {
  max-width: 740px;
  margin: 0 auto;
}

.subscribe-wrap.subscribe-wrap-two .section-title p {
  max-width: 462px;
  margin: 12px auto 32px;
}

.subscribe-wrap.subscribe-wrap-img-generator {
  background: linear-gradient(180deg, #0e8f62 0%, #1a503d 100%);
}

.subscribe-wrap.subscribe-wrap-img-generator .section-title .title {
  max-width: 770px;
}

.subscribe-wrap.subscribe-wrap-img-generator .section-title p {
  max-width: 700px;
  margin: 24px auto 48px;
}

@media only screen and (max-width: 991.98px) {
  .subscribe-wrap.subscribe-wrap-img-generator .section-title p {
    margin: 14px auto 28px;
  }
}

.two-btn-wrap {
  gap: 28px;
}

.arrow-left-img {
  bottom: 70px;
}

@media only screen and (max-width: 1399.98px) {
  .arrow-left-img {
    width: 35%;
  }
}

@media only screen and (max-width: 991.98px) {
  .arrow-left-img {
    display: none;
  }
}

.arrow-right-img {
  bottom: 90px;
}

@media only screen and (max-width: 1399.98px) {
  .arrow-right-img {
    width: 35%;
  }
}

@media only screen and (max-width: 991.98px) {
  .arrow-right-img {
    display: none;
  }
}

.cs-subscribe-wrap {
  /* background: var(--primary-purple); */
  background: #055398;
  border-radius: 60px;
}

@media only screen and (max-width: 991.98px) {
  .cs-subscribe-wrap {
    border-radius: 30px;
  }
}

.cs-subscribe-wrap .cs-subscribe-info {
  padding: 80px 0 80px 80px;
}

@media only screen and (max-width: 1199.98px) {
  .cs-subscribe-wrap .cs-subscribe-info {
    padding: 80px;
  }
}

@media only screen and (max-width: 991.98px) {
  .cs-subscribe-wrap .cs-subscribe-info {
    padding: 17px;
  }
}

.cs-subscribe-wrap .cs-subscribe-info h2 {
  font-size: 48px;
  font-weight: 600;
  line-height: 120.833%;
}

@media only screen and (max-width: 991.98px) {
  .cs-subscribe-wrap .cs-subscribe-info h2 {
    font-size: 35px;
  }
}

.cs-subscribe-wrap .cs-subscribe-info p {
  margin: 24px 0 48px;
}

@media only screen and (max-width: 991.98px) {
  .cs-subscribe-wrap .cs-subscribe-info p {
    margin: 14px 0 28px;
  }
}

.cs-subscribe-wrap .cs-subscribe-info .cs-sub-btn .common-btn {
  background-color: #0a0e19;
}

.cs-subscribe-wrap .cs-subscribe-info .cs-sub-btn .common-btn:hover {
  color: var(--color-white);
  background-color: hsl(224, 43%, 13%);
}

@media only screen and (max-width: 1399.98px) {
  .cs-subs-arrow {
    max-width: 40%;
  }
}

/*================================================
11. Footer CSS
=================================================*/
.footer-widget-wrapper {
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
  padding-bottom: 60px;
}

@media only screen and (max-width: 991.98px) {
  .footer-widget-wrapper {
    padding-bottom: 25px;
  }
}

@media only screen and (max-width: 991.98px) {
  .footer-widget {
    margin-bottom: 25px;
  }
}

.footer-widget-max {
  max-width: 340px;
}

.social-list {
  gap: 19px;
}

.social-list li {
  color: var(--color-white);
  transition: all 0.3s linear;
}

.social-list li:hover {
  transform: translateY(-3px);
}

.social-list.social-list-two {
  gap: 24px;
}

.social-list.social-list-two li a {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
}

.social-list.social-list-two li a svg {
  width: 24px;
  height: 24px;
}

.footer-title {
  font-size: 20px;
  font-weight: 500;
  line-height: normal;
  text-transform: capitalize;
  color: var(--color-white);
  margin-bottom: 32px;
}

@media only screen and (max-width: 991.98px) {
  .footer-title {
    margin-bottom: 22px;
  }
}

.footer-title.footer-title-two {
  position: relative;
  padding-left: 25px;
}

.footer-title.footer-title-two::before {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: var(--color-white);
  content: "";
}

.footer-link li {
  line-height: 1.7;
  font-size: 18px;
  color: var(--color-light-white);
  transition: all 0.3s;
}

.footer-link li:not(:last-child) {
  margin-bottom: 12px;
}

.footer-link li:hover {
  color: var(--color-white);
}

.footer-subscribe input {
  border-radius: 50px;
  border: 1px solid rgba(255, 255, 255, 0.75);
  background: transparent;
  padding: 10px 130px 10px 20px;
  color: #fff;
}

.footer-subscribe .common-btn {
  right: 4px;
  height: 87%;
}

.footer-subscribe.footer-subscribe-two input {
  border: unset;
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
  padding: 10px 130px 10px 0px;
  border-radius: unset;
}

.footer-subscribe.footer-subscribe-two button {
  right: 0;
  height: 100%;
  color: var(--primary-green);
}

.footer-subscribe.footer-subscribe-two button:hover svg,
.footer-subscribe.footer-subscribe-two button:hover i {
  animation: 0.3s moving_side alternate;
  transition: all 0.3s;
}

.footer-subscribe.hero-subscribe {
  max-width: 639px;
  width: 100%;
  background: linear-gradient(90deg, #707c78 0%, #2f403a 54%, #707c78 100%);
  margin: 40px auto 24px;
  padding: 1px;
  border-radius: 36px;
}

.footer-subscribe.hero-subscribe input {
  border-radius: 36px;
  border: unset;
  background: #2c3e38;
}

@media only screen and (max-width: 991.98px) {
  .footer-subscribe.hero-subscribe {
    margin: 20px auto 24px;
  }
}

.select1_inner {
  position: relative;
}

.select1_inner::after {
  pointer-events: none;
  content: "";
}

.select2-container--default .select2-results>.select2-results__options {
  max-height: 500px;
}

.select2-container--default .select2-selection--single {
  background: none;
  border-radius: 0;
  border: none;
  height: auto;
  width: 100%;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
  display: none;
}

.select2-container--default .select2-results__option[aria-selected=true] {
  background: #f4f4f4;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background: #f4f4f4;
}

.selection {
  display: inline-flex;
  width: 100%;
}

.select2-dropdown {
  background: none;
  border-radius: 0;
  z-index: 100;
  min-width: 0px;
  border: none;
}

.select2-container--open .select2-dropdown--above {
  border-bottom: 1px solid #ececec;
}

.select2-container--open .select2-dropdown--below {
  border-top: 1px solid #ececec;
}

.select2-results__option {
  padding: 10px 30px;
  font-size: 15px;
  line-height: 20px;
  background-color: #fff;
  color: #1b1b1b;
  border: 1px solid #ececec;
  text-align: center;
}

.select2-results__option:first-child {
  border-top: none;
}

.small .select2-results__option {
  padding-left: 0;
}

.copy-right-wrap {
  padding: 24px 0;
}

@media only screen and (max-width: 991.98px) {
  .copy-right-wrap {
    gap: 30px;
  }
}

.copy-right-wrap.copy-right-wrap-two {
  background: rgba(47, 35, 149, 0.15);
  box-shadow: 0px -5px 150px 0px rgba(66, 41, 255, 0.3);
}

.copy-right-wrap.copy-right-wrap-three {
  background: #041f16;
}

.copy-right-wrap-cs .footer-menu li {
  border-bottom: 1px solid;
  line-height: 1;
}

.copy-right-language {
  width: 115px;
}

.copy-right-language .select2 {
  width: 100% !important;
  color: var(--color-light-white);
  padding: 0 0px 0 30px;
}

.copy-right-language .language-icon {
  position: absolute;
  left: 0;
  margin-top: 3px;
}

.copy-right-language .language-icon-2 {
  position: absolute;
  right: 0;
}

.footer-menu {
  gap: 48px;
}

@media only screen and (max-width: 991.98px) {
  .footer-menu {
    gap: 15px;
  }
}

.footer-menu li {
  color: var(--color-light-white);
  transition: all 0.3s;
}

.footer-menu li:hover {
  color: var(--color-white);
}

.footer-area-three {
  background-color: var(--color-text-heading);
}

.contact-page-footer {
  padding-top: 90px;
}

@media only screen and (max-width: 991.98px) {
  .contact-page-footer {
    padding-top: 60px;
  }
}

.footer-5.section {
  background-color: #141414;
  overflow: hidden;
}

.footer-5__main {
  margin-inline: 32px;
  border-radius: 32px 32px 0 0;
}

@media only screen and (max-width: 1199.98px) {
  .footer-5__main {
    margin-inline: 20px;
  }
}

@media only screen and (max-width: 991.98px) {
  .footer-5__main {
    margin-inline: 15px;
  }
}

@media only screen and (max-width: 575.98px) {
  .footer-5__main {
    margin-inline: 0px;
  }
}

.footer-5__main .container {
  position: relative;
  z-index: 2;
  padding-bottom: 220px;
}

@media only screen and (max-width: 1199.98px) {
  .footer-5__main .container {
    padding-bottom: 180px;
  }
}

@media only screen and (max-width: 767.98px) {
  .footer-5__main .container {
    padding-bottom: 100px;
  }
}

.footer-5__main .footer-logo {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: -1;
}

.footer-5__main .footer-logo img {
  width: 100%;
}

.footer-5__main .border-row {
  position: relative;
  z-index: 2;
}

.footer-5__main .border-row::after {
  position: absolute;
  content: "";
  left: 32%;
  bottom: -60px;
  z-index: -1;
  background-color: rgba(255, 255, 255, 0.05);
  width: 1000%;
  height: 1px;
}

@media only screen and (max-width: 991.98px) {
  .footer-5__main .border-row::after {
    bottom: -30px;
    left: -20%;
  }
}

.footer-5__main .footer-info .section-header {
  display: flex;
  flex-direction: column;
  gap: 50px;
}

@media only screen and (max-width: 1199.98px) {
  .footer-5__main .footer-info .section-header {
    gap: 20px;
  }
}

.footer-5__main .links-wrapper {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 25px;
  position: relative;
}

@media only screen and (max-width: 767.98px) {
  .footer-5__main .links-wrapper {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 15px;
  }
}

@media only screen and (max-width: 399.98px) {
  .footer-5__main .links-wrapper {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
}

.footer-5__main .links-wrapper .links-group .link-title {
  color: #fff;
  font-family: "Inter Display", sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: normal;
  letter-spacing: -0.54px;
  margin-bottom: 45px;
}

@media only screen and (max-width: 1399.98px) {
  .footer-5__main .links-wrapper .links-group .link-title {
    margin-bottom: 30px;
  }
}

.footer-5__main .links-wrapper .links-group ul {
  padding: 0;
  list-style: none;
}

.footer-5__main .links-wrapper .links-group ul li {
  line-height: 1;
}

.footer-5__main .links-wrapper .links-group ul li a {
  color: rgba(232, 232, 232, 0.8);
  font-family: "Inter Display", sans-serif;
  font-size: 16px;
  font-weight: 300;
  letter-spacing: -0.64px;
  transition: all 0.5s ease;
}

.footer-5__main .links-wrapper .links-group ul li a:not(:last-of-type) {
  font-size: 14px;
}

.footer-5__main .links-wrapper .links-group ul li a:hover {
  color: #e8e8e8;
  letter-spacing: 0px;
}

.footer-5__main .links-wrapper .links-group ul li:not(:last-of-type) {
  margin-bottom: 20px;
}

@media only screen and (max-width: 1399.98px) {
  .footer-5__main .links-wrapper .links-group ul li:not(:last-of-type) {
    margin-bottom: 10px;
  }
}

.footer-5__bottom {
  padding-block: 24px;
}

@media only screen and (max-width: 767.98px) {
  .footer-5__bottom {
    text-align: center;
  }
}

.footer-5__bottom .copyright {
  color: rgba(255, 255, 255, 0.6);
  font-family: "Inter Display", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20.8px;
  letter-spacing: -1px;
}

.footer-5__bottom .copyright a {
  color: #fff;
}

.footer-5__bottom .bottom-links ul {
  display: flex;
  align-items: center;
  gap: 50px;
  margin: 0;
  padding: 0;
}

@media only screen and (max-width: 767.98px) {
  .footer-5__bottom .bottom-links ul {
    justify-content: center;
  }
}

@media only screen and (max-width: 1199.98px) {
  .footer-5__bottom .bottom-links ul {
    gap: 30px;
  }
}

@media only screen and (max-width: 767.98px) {
  .footer-5__bottom .bottom-links ul {
    gap: 20px;
  }
}

@media only screen and (max-width: 575.98px) {
  .footer-5__bottom .bottom-links ul {
    flex-direction: column;
    gap: 5px;
  }
}

.footer-5__bottom .bottom-links ul li {
  line-height: 1;
}

.footer-5__bottom .bottom-links ul li a {
  color: rgba(255, 255, 255, 0.6);
  font-family: "Inter Display", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 130%;
  letter-spacing: -1px;
  transition: all 0.5s ease-in-out;
}

@media only screen and (max-width: 575.98px) {
  .footer-5__bottom .bottom-links ul li a {
    font-size: 14px;
    line-height: 1;
  }
}

.footer-5__bottom .bottom-links ul li a:hover {
  color: #fff;
}

/*================================================
12. Testimonial CSS
=================================================*/
.testimonial-box {
  padding: 32px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: #060621;
  height: 100%;
  max-width: 608px;
}

@media only screen and (max-width: 991.98px) {
  .testimonial-box {
    max-width: 300px;
  }
}

.testimonial-box p {
  line-height: 1.7;
  margin: 24px 0;
}

.testimonial-box h3 {
  font-size: 20px;
  font-weight: 600;
}

.rating {
  gap: 8px;
}

.rating li {
  color: rgb(243, 180, 51);
}

.testimonial-slide-top .swiper-wrapper,
.testimonial-slide-bottom .swiper-wrapper,
.brand-slide-wrap .swiper-wrapper {
  transition-timing-function: linear !important;
  position: relative;
}

.testimonial-slide-top .swiper-slide,
.testimonial-slide-bottom .swiper-slide,
.brand-slide-wrap .swiper-slide {
  width: auto;
}

.brand-slide-wrap.side-shadow {
  position: relative;
}

.brand-slide-wrap.side-shadow::before,
.brand-slide-wrap.side-shadow::after {
  background: linear-gradient(270deg, rgba(7, 11, 23, 0) 8.94%, #070b17 94.03%);
  width: 187px;
  height: 100%;
  top: 50%;
  transform: translateY(-50%);
  content: "";
  left: 0;
  position: absolute;
  z-index: 2;
}

.brand-slide-wrap.side-shadow::after {
  left: auto;
  right: 0;
  background: linear-gradient(90deg, rgba(7, 11, 23, 0) 8.94%, #070b17 94.03%);
}

.testimonial-img-slide-wrap {
  border-radius: 32px;
  background: linear-gradient(187deg, #20352e -44.72%, rgba(32, 53, 46, 0) 94.23%);
  padding: 8px;
}

.testimonial-img-slide-wrap .testimonial-img-generator {
  border-radius: 26px;
  transform: scale(0.8) rotate(10deg);
  transition: all 0.4s linear;
}

.testimonial-info-wrap h2 {
  margin: 16px 0;
}

.testimonial-info-wrap h3 {
  font-size: 32px;
  font-weight: 500;
}

.testimonial-info-wrap p {
  font-size: 18px;
  margin-top: 4px;
  max-width: 300px;
}

@media only screen and (max-width: 1199.98px) {
  .testimonial-info-wrap p {
    max-width: 250px;
  }
}

@media only screen and (max-width: 991.98px) {
  .testimonial-info-wrap p {
    max-width: unset;
  }
}

.slider-button-wrap {
  gap: 24px;
}

.testimonial-info-slider-button-wrap {
  position: absolute;
  bottom: 0;
  right: 0;
}

@media only screen and (max-width: 991.98px) {
  .testimonial-info-slider-button-wrap {
    position: relative;
    margin-top: 20px;
  }
}

.testimonial-img-slide .swiper-slide-active .testimonial-img-generator {
  transform: scale(1) rotate(0deg);
}

.cg-testimonial-area {
  background: linear-gradient(180deg, #1b1d2b 0%, #070b17 100%);
}

.cg-testimonial-wrap {
  background: linear-gradient(284deg, rgba(255, 255, 255, 0) -39.66%, rgba(255, 255, 255, 0.15) 39.42%, rgba(255, 255, 255, 0) 112.84%);
  padding: 1.3px;
  border-radius: 20px;
  height: 100%;
}

.cg-testimonial-wrap .cg-testimonial-box {
  height: 100%;
}

.cg-testimonial-wrap .cg-testimonial-box .cg-testimonial-qt-icon {
  float: right;
  margin-top: -69px;
}

.cg-testimonial-wrap .cg-testimonial-box {
  background-color: #181f2f;
  padding: 30px;
  border-radius: 20px;
}

.cg-testimonial-wrap .cg-testimonial-box .cg-testimonial-commenter {
  gap: 12px;
}

.cg-testimonial-wrap .cg-testimonial-box .cg-testimonial-commenter img {
  max-width: 44px;
  width: 100%;
}

.cg-testimonial-wrap .cg-testimonial-box .cg-testimonial-commenter h3 {
  font-size: 20px;
  font-weight: 500;
}

.cg-testimonial-wrap .cg-testimonial-box .commenter-text {
  font-size: 22px;
  line-height: 1.72;
  margin: 20px 0;
}

.cg-testimonial-wrap .cg-testimonial-box .rating {
  font-size: 20px;
}

.cs-testimonial-info-wrap {
  border-radius: 24px;
  background: #191f2f;
  padding: 40px 40px 40px 76px;
}

@media only screen and (max-width: 767.98px) {
  .cs-testimonial-info-wrap {
    padding: 30px 30px 30px 38px;
  }
}

.cs-testimonial-info-wrap h2 {
  font-size: 32px;
  font-weight: 500;
  line-height: 150%;
  text-transform: capitalize;
}

@media only screen and (max-width: 767.98px) {
  .cs-testimonial-info-wrap h2 {
    font-size: 25px;
  }
}

.cs-testimonial-info-wrap h2 .cs-testimonial-qt {
  left: -35px;
  top: 0;
}

@media only screen and (max-width: 767.98px) {
  .cs-testimonial-info-wrap h2 .cs-testimonial-qt {
    left: -25px;
    top: -7px;
  }
}

.cs-testimonial-info-wrap .cs-testimonial-desc {
  margin: 24px 0 32px;
}

@media only screen and (max-width: 767.98px) {
  .cs-testimonial-info-wrap .cs-testimonial-desc {
    margin: 14px 0 22px;
  }
}

.cs-testimonial-info-wrap .cs-testimonial-dev-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

@media only screen and (max-width: 767.98px) {
  .cs-testimonial-info-wrap .cs-testimonial-dev-info {
    flex-direction: column;
    justify-content: start;
    align-items: start;
    gap: 10px;
  }
}

.cs-testimonial-info-wrap .cs-testimonial-dev-info .cs-testimonial-dev-name h3 {
  font-size: 20px;
  font-weight: 500;
}

.cs-testimonial-info-wrap .cs-testimonial-dev-info .cs-testimonial-dev-name p {
  margin-top: 8px;
}

.cs-testimonial-info-wrap .cs-testimonial-dev-info .cs-testimonial-rating .rating {
  gap: 8px;
}

.cs-testimonial-info-wrap .cs-testimonial-dev-info .cs-testimonial-rating .rating li {
  color: rgb(243, 180, 51);
}

.cs-testimonial-img {
  border-radius: 24px;
  height: 100%;
  width: 100%;
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  min-height: 400px;
}

.testimonial-5.section {
  background-color: #141414;
}

.testimonial-5.section .section-header .section-title {
  font-weight: 500;
}

@media only screen and (min-width: 992px) {
  .testimonial-5.section .section-header .section-title {
    font-size: 62px;
  }
}

@media only screen and (min-width: 1200px) {
  .testimonial-5.section .section-header .section-title {
    font-size: 80px;
  }
}

@media only screen and (min-width: 1400px) {
  .testimonial-5.section .section-header .section-title {
    font-size: 120px;
  }
}

.testimonial-5__slider .swiper-wrapper {
  transition-timing-function: linear !important;
}

.testimonial-5__item {
  position: relative;
  z-index: 2;
  padding: 42px;
  border-radius: 32px;
  background: #191820;
  border: 1px solid #191820;
  transition: all 0.5s ease-in-out;
  overflow: hidden;
}

@media only screen and (max-width: 991.98px) {
  .testimonial-5__item {
    padding: 30px;
    border-radius: 20px;
  }
}

.testimonial-5__item .item-bg {
  opacity: 0;
  transition: all 0.5s ease-in-out;
  position: absolute;
  z-index: -1;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: fill;
  object-fit: fill;
}

.testimonial-5__item .item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}

.testimonial-5__item .item-header .author {
  display: flex;
  align-items: center;
  gap: 18px;
}

@media only screen and (max-width: 767.98px) {
  .testimonial-5__item .item-header .author {
    gap: 10px;
  }
}

.testimonial-5__item .item-header .author .author-thumb {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}

@media only screen and (max-width: 767.98px) {
  .testimonial-5__item .item-header .author .author-thumb {
    width: 60px;
    height: 60px;
  }
}

.testimonial-5__item .item-header .author .author-thumb img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.testimonial-5__item .item-header .author .author-info .stars {
  margin-bottom: 12px;
}

.testimonial-5__item .item-header .author .author-info .stars ul {
  display: flex;
  align-items: center;
  gap: 3.5px;
  font-size: 15px;
  padding-left: 0;
}

.testimonial-5__item .item-header .author .author-info .stars ul li {
  line-height: 1;
  list-style: none;
}

.testimonial-5__item .item-header .author .author-info .stars ul li i,
.testimonial-5__item .item-header .author .author-info .stars ul li svg {
  color: #ffc31b;
}

.testimonial-5__item .item-header .author .author-info .author-name {
  color: rgba(255, 255, 255, 0.58);
  font-family: "Inter Display", sans-serif;
  font-size: 20px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -1.4px;
}

@media only screen and (max-width: 767.98px) {
  .testimonial-5__item .item-header .author .author-info .author-name {
    font-size: 17px;
  }
}

.testimonial-5__item .item-body {
  margin-top: 32px;
  padding-top: 32px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.testimonial-5__item .item-body .title {
  color: #fff;
  font-family: "Inter Display", sans-serif;
  font-size: 24px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -1.68px;
  opacity: 0.62;
  margin-bottom: 40px;
}

@media only screen and (max-width: 991.98px) {
  .testimonial-5__item .item-body .title {
    margin-bottom: 30px;
  }
}

.testimonial-5__item .item-body p {
  color: #fff;
  font-family: "Inter Display", sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 27px;
  letter-spacing: -1.08px;
  opacity: 0.52;
}

.testimonial-5__item:hover {
  border-color: transparent;
  background-color: transparent;
}

.testimonial-5__item:hover .item-bg {
  opacity: 1;
}

/*================================================
13. Hero CSS
=================================================*/
.hero-area {
  padding: 264px 0 120px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

@media only screen and (max-width: 991.98px) {
  .hero-area {
    padding: 170px 0 60px;
  }
}

.hero-area-canvas {
  position: relative;
  overflow: hidden;
}

.hero-area-canvas canvas {
  position: absolute;
  overflow: hidden;
  top: 0;
  left: 0;
  height: 100% !important;
  width: 100% !important;
}

.hero-area-img-generator {
  padding: 217px 0 0;
  background: linear-gradient(180deg, #163027 0%, #0c1d17 100%);
}

@media only screen and (max-width: 991.98px) {
  .hero-area-img-generator {
    padding: 150px 0 0;
  }
}

.hero-area-cg {
  background-color: #070b17;
  padding: 200px 0 40px;
}

@media only screen and (max-width: 991.98px) {
  .hero-area-cg {
    padding: 185px 0 0px;
  }
}

.hero-area-cs {
  padding: 218px 0 98px;
}

@media only screen and (max-width: 1199.98px) {
  .hero-area-cs {
    padding: 200px 0 60px;
  }
}

@media only screen and (max-width: 991.98px) {
  .hero-area-cs {
    padding: 130px 0 60px;
  }

  .hero-area-cs::before {
    position: absolute;
    height: 100%;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.3882352941);
    content: "";
    top: 0;
    left: 0;
  }
}

.hero-cs-bg {
  max-width: 700px;
}

@media only screen and (max-width: 1199.98px) {
  .hero-cs-bg {
    max-width: 550px;
  }
}

@media only screen and (max-width: 767.98px) {
  .hero-cs-bg {
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: left;
    object-position: left;
  }
}

.hero-gallery-wrap {
  max-width: 1680px;
  width: 100%;
  margin-top: 85px;
}

@media only screen and (max-width: 991.98px) {
  .hero-gallery-wrap {
    margin-top: 35px;
  }
}

.minus-margin {
  /* margin-top: -53px; */
  margin-top: -165px;
}

.hero-info .hero-sub-spn {
  border-radius: 50px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.3) -17.5%, rgba(255, 255, 255, 0) 118.75%);
  font-family: var(--ff-inter);
  font-size: 18px;
  font-weight: 500;
  line-height: normal;
  letter-spacing: 0.9px;
  padding: 8px 16px;
}

@media only screen and (max-width: 991.98px) {
  .hero-info .hero-sub-spn {
    font-size: 13px;
  }
}

.hero-info h1 {
  font-size: clamp(34px, 4vw, 64px);
  font-weight: 600;
  line-height: 1.25;
  margin: 20px 0 24px;
}

@media only screen and (max-width: 991.98px) {
  .hero-info h1 {
    margin: 15px 0 10px;
  }
}

.hero-info .hero-text {
  font-size: 18px;
}

.hero-info.hero-info-img-generator h1 {
  font-size: clamp(34px, 4vw, 56px);
  font-weight: 500;
  line-height: 132.143%;
}

.hero-info.hero-info-cs .hero-info-cs-sub {
  font-size: 18px;
  font-weight: 500;
}

.hero-info.hero-info-cs h1 {
  font-size: clamp(34px, 4vw, 60px);
  font-weight: 500;
  line-height: 1.2;
  margin: 12px 0 0;
}

.hero-info.hero-info-cs .border-divider {
  max-width: 555px;
  margin: 34px 0 19px;
}

.hero-info.hero-info-cs .hero-text {
  max-width: 544px;
}

.hero-info.hero-info-cs .two-btn-wrap {
  margin-top: 34px;
}

.hero-info.hero-info-cs .hero-arrow-sp {
  right: 50px;
  bottom: 5px;
}

@media only screen and (max-width: 1399.98px) {
  .hero-info.hero-info-cs .hero-arrow-sp {
    right: 25px;
  }
}

.cg-hero-info .section-title.gradient-sub-title .title {
  text-shadow: 0px 0px 8px rgba(255, 255, 255, 0.32);
  font-size: clamp(34px, 4vw, 40px);
  font-weight: 500;
  line-height: 126.667%;
  text-transform: capitalize;
}

.cg-hero-info .section-title.gradient-sub-title.gradient-sub-border .gradient-sub-border-wrap {
  background: linear-gradient(20deg, rgba(66, 41, 255, 0.8) 17.87%, rgba(255, 255, 255, 0.5) 45.75%, rgba(66, 41, 255, 0.8) 80.38%);
  padding: 1px;
}

.cg-hero-info .section-title.gradient-sub-title.gradient-sub-border .gradient-sub-border-wrap::before {
  display: none;
}

@media only screen and (max-width: 991.98px) {
  .cg-hero-info .section-title.gradient-sub-title.gradient-sub-border .gradient-sub {
    font-size: 12px;
  }
}

@media only screen and (max-width: 767.98px) {
  .hero-img-wrap {
    max-width: 300px;
  }
}

.cg-hero-img-wrap {
  margin-top: 50px;
  padding: 1.3px;
  padding-bottom: 0;
  display: inline-block;
  overflow: hidden;
  border-radius: 20px 20px 0 0;
}

@media only screen and (max-width: 991.98px) {
  .cg-hero-img-wrap {
    margin-top: 50px;
  }
}

.cg-hero-img-wrap::before {
  background: linear-gradient(151deg, rgba(66, 41, 255, 0.8) 17.16%, rgba(255, 255, 255, 0.8) 35.34%, rgba(66, 41, 255, 0.8) 57.49%);
  height: 276%;
  width: 166%;
  left: 50%;
  top: 50%;
  content: "";
  position: absolute;
  animation: animate_border 8.5s linear infinite;
  z-index: 0;
}

.cg-hero-img-wrap .cg-hero-img-box {
  background-color: #1a1b3a;
  padding: 20px;
  border-radius: 20px 20px 0 0;
}

.brand-box svg {
  color: rgb(164, 167, 186);
  transition: all 0.3s linear;
}

.brand-box svg:hover {
  color: var(--color-white);
}

.tag-wrap {
  gap: 12px;
}

.tag-wrap .tag-title {
  font-size: 18px;
}

.tag-list {
  gap: 12px;
}

.tag-list li {
  color: var(--color-light-white);
  background-color: #2c3e38;
  border-radius: 40px;
  padding: 1px 15px;
  transition: all 0.2s;
}

.tag-list li:hover {
  transform: translateY(-2px);
  background-color: hsl(160, 17%, 28%);
}

.tag-list.sidebar-tag-list li {
  border-radius: 12px;
  border-radius: 12px;
  background-color: rgba(255, 255, 255, 0.05);
  font-family: var(--ff-inter);
  padding: 3px 15px;
}

.tag-list.sidebar-tag-list li:hover {
  color: var(--color-white);
}

/* Bubble */
.bubbles-bg {
  height: 100%;
  overflow: hidden;
}

.bubbles-bg .bubbles span {
  position: relative;
  min-width: 30px;
  height: 30px;
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  margin: 0 4px;
  animation: animate_dust 200s linear infinite;
  animation-duration: calc(175s / var(--i));
}

.bubbles-bg .bubbles span:nth-child(even) {
  background-color: rgba(110, 69, 233, 0.5);
  border-radius: 0;
}

@keyframes animate_dust {
  0% {
    transform: translateY(100vh) scale(0.1);
  }

  100% {
    transform: translateY(0) scale(0.19);
  }
}

/* Bubble End */
.bottom-img-generator-hero {
  background: #163027;
  padding: 60px 0;
}

.bottom-img-generator-hero .brand-box svg {
  color: #878787;
}

.bottom-img-generator-hero .brand-box svg:hover {
  color: hsl(0, 0%, 70%);
}

.bottom-img-generator-hero .brand-slide-wrap.side-shadow::before {
  background: linear-gradient(270deg, rgba(7, 11, 23, 0) 8.94%, #163027 94.03%);
}

.bottom-img-generator-hero .brand-slide-wrap.side-shadow::after {
  background: linear-gradient(90deg, rgba(7, 11, 23, 0) 8.94%, #163027 94.03%);
}

.bottom-img-generator-hero.bottom-img-generator-hero-cs {
  background: #0e1422;
}

.hero-5.section {
  background: #141414;
  margin-top: -53px;
}

.hero-5__wrapper {
  padding-top: 188px;
  padding-bottom: 100px;
  overflow: hidden;
}

.hero-5__thumb-content {
  display: grid;
  align-items: center;
  justify-content: space-between;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  row-gap: 30px;
  -moz-column-gap: 30px;
  column-gap: 30px;
}

@media only screen and (max-width: 1199.98px) {
  .hero-5__thumb-content {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

.hero-5__content {
  grid-column: span 3/span 3;
}

@media only screen and (max-width: 1199.98px) {
  .hero-5__content {
    grid-column: span 3/span 3;
  }
}

@media only screen and (max-width: 991.98px) {
  .hero-5__content {
    grid-column: span 6/span 6;
  }
}

.hero-5__content .section-header .section-sub-title {
  color: #fff;
  font-weight: 500;
  letter-spacing: 3.12px;
  font-size: 24px;
}

@media only screen and (max-width: 991.98px) {
  .hero-5__content .section-header .section-sub-title {
    font-size: 18px;
  }
}

.hero-5__content .section-header .section-title {
  font-family: "Inter Display", sans-serif;
  font-size: 82px;
  font-weight: 300;
  line-height: 102.439%;
  letter-spacing: -1.64px;
}

@media only screen and (max-width: 1599.98px) {
  .hero-5__content .section-header .section-title {
    font-size: 75px;
  }
}

@media only screen and (max-width: 1399.98px) {
  .hero-5__content .section-header .section-title {
    font-size: 70px;
  }
}

@media only screen and (max-width: 1199.98px) {
  .hero-5__content .section-header .section-title {
    font-size: 65px;
  }
}

@media only screen and (max-width: 991.98px) {
  .hero-5__content .section-header .section-title {
    font-size: 60px;
  }
}

@media only screen and (max-width: 767.98px) {
  .hero-5__content .section-header .section-title {
    font-size: 50px;
  }
}

.hero-5__content .section-header .section-title span {
  font-weight: 600;
  background: linear-gradient(72deg, #7f5fff -44.41%, #ae77ff -18.9%, #bb6dff 7.49%, #d759ff 36.33%, #f8cc84 70.93%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero-5__content p {
  max-width: 588px;
  width: 100%;
  color: rgba(255, 255, 255, 0.6);
  font-family: "Inter Display", sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 140%;
  letter-spacing: -1.08px;
}

.hero-5__content p span {
  display: inline-block;
  color: #fff;
}

.hero-5__content .prompt-generation {
  display: inline-flex;
  justify-content: space-between;
  align-items: center;
  gap: 0;
  border-radius: 88px;
  border: 1px solid rgba(127, 95, 255, 0.32);
  background: rgba(255, 255, 255, 0.03);
  overflow: hidden;
  padding: 8px;
  padding-inline-start: 32px;
  max-width: 549px;
  width: 100%;
  margin-top: 42px;
}

@media only screen and (max-width: 575.98px) {
  .hero-5__content .prompt-generation {
    gap: 20px;
    padding: 0px;
    border-color: transparent;
    background-color: transparent;
    flex-direction: column;
    border-radius: 0;
  }
}

.hero-5__content .prompt-generation .input-control {
  border: none;
  background-color: transparent;
  color: #fff;
  font-family: "Inter Display", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 150%;
  letter-spacing: 0.32px;
  flex: 1;
}

@media only screen and (max-width: 575.98px) {
  .hero-5__content .prompt-generation .input-control {
    border-radius: 88px;
    border: 1px solid rgba(127, 95, 255, 0.32);
    background: rgba(255, 255, 255, 0.03);
    overflow: hidden;
    padding: 15px;
    padding-inline-start: 32px;
    width: 100%;
    text-align: center;
  }
}

.hero-5__content .prompt-generation .input-control::-moz-placeholder {
  color: #fff;
  opacity: 0.5;
}

.hero-5__content .prompt-generation .input-control::placeholder {
  color: #fff;
  opacity: 0.5;
}

.hero-5__content .prompt-generation button {
  padding: 15px 32px;
  color: #fff;
  font-family: "Inter Display", sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 25.2px;
  text-transform: capitalize;
  border: none;
  height: 100%;
  border-radius: 64px;
  background: linear-gradient(75deg, #7f5fff -47.93%, #ae77ff -17.55%, #bb6dff 13.89%, #d759ff 48.23%, #f8cc84 89.43%);
}

@media only screen and (max-width: 991.98px) {
  .hero-5__content .prompt-generation button {
    padding: 12px 32px;
  }
}

@media only screen and (max-width: 575.98px) {
  .hero-5__content .prompt-generation button {
    width: 100%;
  }
}

.hero-5__content .tags-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-top: 30px;
  margin-left: 30px;
}

@media only screen and (max-width: 767.98px) {
  .hero-5__content .tags-group {
    margin-left: 0px;
  }
}

.hero-5__content .tags-group .tag-title {
  color: #fff;
  font-family: var(--ff-inter);
  font-size: 18px;
  font-weight: 400;
  line-height: 140%;
}

.hero-5__content .tags-group .tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.hero-5__content .tags-group .tags .tag {
  border-radius: 26px;
  border: 1px solid rgba(127, 95, 255, 0.32);
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
  color: #fff;
  font-family: var(--ff-inter);
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
  padding: 6.5px 14px;
}

.hero-5__thumb {
  width: 100%;
  grid-column: span 2/span 2;
}

@media only screen and (max-width: 1199.98px) {
  .hero-5__thumb {
    grid-column: span 3/span 3;
  }
}

@media only screen and (max-width: 991.98px) {
  .hero-5__thumb {
    grid-column: span 6/span 6;
  }
}

.hero-5__thumb .top-thumb {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: -50px;
  z-index: 2;
}

@media only screen and (max-width: 1399.98px) {
  .hero-5__thumb .top-thumb {
    margin-bottom: -20px;
  }
}

@media only screen and (max-width: 575.98px) {
  .hero-5__thumb .top-thumb {
    flex-direction: column;
    gap: 25px;
    margin-bottom: 25px;
  }
}

.hero-5__thumb .top-thumb .play-video {
  position: relative;
  display: grid;
  place-content: center;
  width: 170px;
  height: 170px;
  flex-shrink: 0;
}

@media only screen and (max-width: 1399.98px) {
  .hero-5__thumb .top-thumb .play-video {
    width: 135px;
    height: 135px;
  }
}

.hero-5__thumb .top-thumb .play-video .circle {
  position: absolute;
  inset: 0;
  animation: rotate360 5s linear infinite;
  pointer-events: none;
}

.hero-5__thumb .top-thumb .play-video .circle img {
  width: 100%;
  height: 100%;
}

.hero-5__thumb .top-thumb .play-video .popup-youtube {
  display: grid;
  place-content: center;
  width: 85px;
  height: 85px;
  flex-shrink: 0;
  border-radius: 100%;
  overflow: hidden;
  background: linear-gradient(75deg, #7f5fff -47.93%, #ae77ff -17.55%, #bb6dff 13.89%, #d759ff 48.23%, #f8cc84 89.43%);
}

@media only screen and (max-width: 1399.98px) {
  .hero-5__thumb .top-thumb .play-video .popup-youtube {
    width: 60px;
    height: 60px;
  }
}

.hero-5__thumb .top-thumb .play-video .popup-youtube i,
.hero-5__thumb .top-thumb .play-video .popup-youtube svg {
  font-size: 30px;
}

.hero-5__thumb img {
  border-radius: 35px;
  max-width: 360px;
}

@media only screen and (max-width: 1799.98px) {
  .hero-5__thumb img {
    max-width: 250px;
  }
}

.hero-5__thumb .bottom-thumb {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

@media only screen and (max-width: 575.98px) {
  .hero-5__thumb .bottom-thumb {
    justify-content: center;
  }
}

.hero-5__thumb .bottom-thumb .icon {
  animation: rotate360 5s linear infinite;
}

@media only screen and (max-width: 575.98px) {
  .hero-5__thumb .bottom-thumb .icon {
    display: none;
  }
}

@keyframes rotate360 {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

/*================================================
14. Price CSS
=================================================*/
.switch-wrapper {
  position: relative;
  display: inline-flex;
  padding: 10px;
  border-radius: 60px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: transparent;
}

.switch-wrapper [type=radio] {
  position: absolute;
  left: -9999px;
}

.switch-wrapper [type=radio]:checked#monthly+label[for=yearly]~.highlighter {
  transform: none;
}

.switch-wrapper [type=radio]:checked#yearly+label[for=monthly]~.highlighter {
  transform: translateX(100%);
}

.switch-wrapper label {
  font-family: var(--ff-inter);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.9px;
  text-transform: uppercase;
  text-align: center;
  z-index: 1;
  min-width: 125px;
  cursor: pointer;
  border-radius: 30px;
  transition: color 0.25s ease-in-out;
  color: var(--color-light-white);
}

.switch-wrapper .highlighter {
  position: absolute;
  top: 4px;
  left: 4px;
  width: calc(50% - 4px);
  height: calc(100% - 8px);
  border-radius: 30px;
  background: var(--color-blue);
  transition: transform 0.25s ease-in-out;
}

.switch-wrapper.switch-wrapper-two {
  border: 1px solid rgba(3, 24, 17, 0.32);
}

.switch-wrapper.switch-wrapper-two label {
  color: var(--color-text-heading);
  border: 1px solid transparent;
}

.switch-wrapper.switch-wrapper-two .highlighter {
  border: 1px solid var(--primary-green);
  background: rgba(29, 158, 67, 0.1);
}

.switch-wrapper.switch-wrapper-purple .highlighter {
  background: var(--primary-purple);
}

.switch-wrapper [type=radio]:checked#monthly~label[for=monthly],
.switch-wrapper [type=radio]:checked#yearly~label[for=yearly] {
  color: var(--color-white);
}

.switch-wrapper.switch-wrapper-two [type=radio]:checked#monthly~label[for=monthly],
.switch-wrapper.switch-wrapper-two [type=radio]:checked#yearly~label[for=yearly] {
  color: var(--primary-green);
}

.switch-wrapper [type=radio]:checked#monthly~label[for=monthly]:hover,
.switch-wrapper [type=radio]:checked#yearly~label[for=yearly]:hover {
  background: transparent;
}

.price-box {
  border-radius: 24px;
  background: #0c0d25;
  height: 100%;
  transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.price-box .hide {
  display: none;
}

.price-box .price-value-box {
  border-radius: 24px;
  background: rgba(66, 41, 255, 0.07);
  padding: 48px 20px;
}

.price-box .price-value-box .price-plan {
  font-family: var(--ff-inter);
  font-size: 14px;
  letter-spacing: 0.7px;
  border-radius: 60px;
  border: 1px solid rgba(66, 41, 255, 0.2);
  background: rgba(66, 41, 255, 0.1);
  padding: 20px 23px;
  line-height: 0;
  transition: all 0.4s linear;
}

.price-box .price-value-box h2 {
  font-size: 48px;
  margin: 28px 0 2px;
  animation: priceFade 0.7s alternate linear forwards;
}

@media only screen and (max-width: 991.98px) {
  .price-box .price-value-box h2 {
    font-size: 40px;
  }
}

.price-box .price-value-box h2 span {
  font-family: var(--ff-inter-tight);
  font-size: 18px;
  font-weight: 400;
}

.price-box .price-info-details li {
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  margin: 24px 0;
  font-size: 18px;
  padding: 0 32px 24px;
}

.price-box .price-info-details li svg {
  color: rgba(66, 41, 255, 0.7);
  transition: all 0.3s;
}

.price-box .price-info-details li {
  color: var(--color-light-white);
}

.price-box .price-info-details li:hover svg {
  color: rgb(66, 41, 255);
}

.price-box .price-info-btn-wrap {
  padding: 8px 32px 32px;
}

.price-box .price-info-btn-wrap .price-info-btn {
  font-size: 18px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.36px;
  border-radius: 60px;
  border: 1px solid var(--color-blue);
  display: block;
  text-align: center;
  padding: 20px 10px;
  transition: all 0.4s linear;
}

.price-box:hover {
  transform: translateY(-4px);
}

.price-box:hover .price-value-box .price-plan {
  transform: rotateX(360deg);
}

.price-box:hover .price-info-btn-wrap .price-info-btn {
  border: 1px solid var(--color-blue);
  color: #fff;
  background-color: var(--color-blue);
}

.price-box.price-box-white {
  border-radius: 30px;
  background: #fcfcfc;
}

.price-box.price-box-white .price-value-box {
  border-radius: 30px;
  background: #eaedfa;
  box-shadow: 0px 1px 0px 0px rgba(75, 98, 230, 0.5);
  padding: 61px 20px 30px;
}

.price-box.price-box-white .price-value-box h2 {
  font-weight: 600;
  font-size: 64px;
}

@media only screen and (max-width: 1199.98px) {
  .price-box.price-box-white .price-value-box h2 {
    font-size: 45px;
  }
}

.price-box.price-box-white .price-value-box h2 span {
  color: rgba(0, 0, 0, 0.7);
  font-weight: 500;
  font-size: 20px;
}

.price-box.price-box-white .price-value-box p {
  color: rgba(0, 0, 0, 0.7);
  font-size: 18px;
}

@media only screen and (max-width: 1199.98px) {
  .price-box.price-box-white .price-value-box p {
    font-size: 18px;
  }
}

.price-box.price-box-white .price-value-box .price-plan {
  border-radius: 0px 0px 50px 50px;
  background: linear-gradient(0deg, #fff 0%, #fff 100%), #4b62e6;
  padding: 15px 30px;
  font-size: 16px;
  font-weight: 500;
  line-height: normal;
  letter-spacing: 4px;
  color: var(--color-blue);
  top: -1px;
}

.price-box.price-box-white .price-info-details {
  margin: 50px 0;
}

@media only screen and (max-width: 1199.98px) {
  .price-box.price-box-white .price-info-details {
    margin: 30px 0;
  }
}

.price-box.price-box-white .price-info-details li {
  color: var(--color-text-body);
}

.price-box.price-box-white .price-info-details li svg {
  color: var(--primary-green);
}

.price-box.price-box-white .price-info-details li {
  position: relative;
  border-bottom: unset;
}

.price-box.price-box-white .price-info-details li::before {
  position: absolute;
  background: linear-gradient(90deg, rgba(3, 24, 17, 0) 0%, rgba(3, 24, 17, 0.5) 47.3%, rgba(3, 24, 17, 0) 92.66%);
  height: 1px;
  width: 100%;
  content: "";
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

@media only screen and (max-width: 1199.98px) {
  .price-box.price-box-white .price-info-details li {
    font-size: 16px;
  }
}

.price-box.price-box-white .price-info-btn-wrap {
  padding: 0px 32px 40px;
}

.price-box.price-box-white .price-info-btn-wrap .price-info-btn {
  color: var(--primary-green);
  border: 1px solid var(--primary-green);
}

.price-box.price-box-white:hover {
  transform: translateY(0px);
}

.price-box.price-box-white:hover .price-value-box .price-plan {
  transform: unset;
}

.price-box.price-box-white:hover .price-info-btn-wrap .price-info-btn {
  border: 1px solid var(--primary-green);
  color: #fff;
  background-color: var(--primary-green);
}

.price-box.price-box-two {
  background: #11192c;
}

.price-box.price-box-two .price-value-box {
  background: rgba(110, 69, 233, 0.07);
}

.price-box.price-box-two .price-value-box .price-plan {
  background: rgba(110, 69, 233, 0.1);
  border: 1px solid rgba(110, 69, 233, 0.2);
}

.price-box.price-box-two .price-info-details li svg {
  color: rgba(110, 69, 233, 0.7);
}

.price-box.price-box-two .price-info-btn-wrap .price-info-btn {
  border: 1px solid var(--primary-purple);
}

.price-box.price-box-two:hover .price-info-btn-wrap .price-info-btn {
  border: 1px solid var(--primary-purple);
  color: #fff;
  background-color: var(--primary-purple);
}

.price-box-wrap-white {
  border-radius: 30px;
  background: linear-gradient(180deg, #fcfcfc 0%, #bec3c1 100%);
  padding: 1px;
  transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.price-box-wrap-white:hover {
  transform: translateY(-4px);
}

.price_wrapper .single-price-box:nth-child(2) .price-box.price-box-white .price-value-box {
  background: rgba(250, 127, 39, 0.1);
  box-shadow: 0px 1px 0px 0px rgba(250, 127, 39, 0.5);
}

.price_wrapper .single-price-box:nth-child(2) .price-box.price-box-white .price-value-box .price-plan {
  background: #fa7f27;
  color: #fff;
}

.price_wrapper .single-price-box:nth-child(3) .price-box.price-box-white .price-value-box {
  background: rgba(247, 134, 190, 0.1);
  box-shadow: 0px 1px 0px 0px rgba(247, 134, 190, 0.5);
}

.price_wrapper .single-price-box:nth-child(3) .price-box.price-box-white .price-value-box .price-plan {
  color: #f786be;
}

.cg-price-wrap {
  background: linear-gradient(206deg, rgba(255, 255, 255, 0) -20.59%, rgba(255, 255, 255, 0.1) 48.36%, rgba(255, 255, 255, 0) 112.38%);
  padding: 1.3px;
  transition: all 0.4s;
  border-radius: 20px;
  height: 100%;
}

.cg-price-wrap .hide {
  display: none;
}

.cg-price-wrap .cg-price-box {
  border-radius: 20px;
  background-color: #1a1e2d;
  padding: 40px;
  height: 100%;
}

@media only screen and (max-width: 991.98px) {
  .cg-price-wrap .cg-price-box {
    padding: 20px;
  }
}

@media only screen and (max-width: 1199.98px) {
  .cg-price-wrap .cg-price-box {
    padding: 30px;
  }
}

.cg-price-wrap .cg-price-box::before {
  position: absolute;
  background: linear-gradient(201deg, rgba(66, 41, 255, 0) 37.65%, #0071ab 151.6%);
  height: 0;
  width: 100%;
  bottom: 0;
  left: 0;
  content: "";
  z-index: -1;
  transition: all 0.4s;
}

.cg-price-wrap .cg-price-box .cg-price-value-box .cg-price-plan {
  font-size: 20px;
  font-weight: 500;
}

.cg-price-wrap .cg-price-box .cg-price-value-box .cg-price-plan svg,
.cg-price-wrap .cg-price-box .cg-price-value-box .cg-price-plan i {
  margin-left: 8px;
  transition: all 0.3s;
}

.cg-price-wrap .cg-price-box .cg-price-value-box .price {
  font-size: 48px;
  font-weight: 500;
  margin: 48px 0 12px;
}

.cg-price-wrap .cg-price-box .cg-price-value-box .price span {
  font-family: var(--ff-inter-tight);
  font-size: 16px;
  font-weight: 400;
}

@media only screen and (max-width: 991.98px) {
  .cg-price-wrap .cg-price-box .cg-price-value-box .price {
    margin: 30px 0 12px;
  }
}

.cg-price-wrap .cg-price-box .cg-price-info-details {
  margin: 32px 0;
}

@media only screen and (max-width: 991.98px) {
  .cg-price-wrap .cg-price-box .cg-price-info-details {
    margin: 22px 0;
  }
}

.cg-price-wrap .cg-price-box .cg-price-info-details li {
  font-size: 18px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #fff;
}

.cg-price-wrap .cg-price-box .cg-price-info-details li:not(:last-child) {
  margin-bottom: 12px;
}

.cg-price-wrap .cg-price-box .cg-price-info-details li svg,
.cg-price-wrap .cg-price-box .cg-price-info-details li i {
  color: var(--color-blue);
}

.cg-price-wrap .cg-price-box .cg-price-info-details li svg.check-discolor,
.cg-price-wrap .cg-price-box .cg-price-info-details li i.check-discolor {
  color: #25314c;
}

.cg-price-wrap .cg-price-btn {
  font-size: 18px;
  font-weight: 500;
  width: 100%;
  text-align: center;
  border-radius: 100px;
  color: var(--color-white);
  border: 1px solid var(--color-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 11px 5px;
  transition: all 0.4s linear;
}

.cg-price-wrap:hover {
  background: linear-gradient(216deg, rgba(255, 255, 255, 0) -50.46%, rgba(255, 255, 255, 0.2) 4.53%, rgba(255, 255, 255, 0) 55.58%);
}

.cg-price-wrap:hover .cg-price-box::before {
  height: 100%;
}

.cg-price-wrap:hover .cg-price-box .cg-price-btn {
  background-color: var(--color-white);
  color: var(--color-blue);
}

.cg-price-wrap:hover .cg-price-box .cg-price-value-box .cg-price-plan svg,
.cg-price-wrap:hover .cg-price-box .cg-price-value-box .cg-price-plan i {
  color: var(--color-blue);
}

@keyframes priceFade {
  0% {
    transform: scale(0.8);
  }

  100% {
    transform: scale(1);
  }
}

/*================================================
15. Choose CSS
=================================================*/
.choose-card-body {
  height: 100%;
}

.choose-card-body .icon-card {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  background: #0c0d25;
  width: 104px;
  height: 104px;
  margin: 0 auto 32px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.25);
}

@media only screen and (max-width: 991.98px) {
  .choose-card-body .icon-card {
    margin: 0 auto 16px;
  }
}

.choose-card-body .choose-card-title {
  font-size: 24px;
  font-weight: 500;
  line-height: 1.6;
  margin-bottom: 6px;
}

.choose-card-body .choose-card-desc {
  max-width: 370px;
  margin: 0 auto;
}

.choose-us-img {
  filter: brightness(90%) contrast(110%) saturate(80%);
}

.ai-img-choose-box {
  border-radius: 24px;
  border: 1px solid rgba(0, 0, 0, 0.05);
  background: #fff;
  box-shadow: 8px 8px 0px 0px rgba(3, 24, 17, 0.08);
  padding: 56px 28px;
  height: 100%;
  transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.ai-img-choose-box h3 {
  margin: 28px 0 16px;
}

.ai-img-choose-box:hover {
  transform: translateY(-6px);
}

.choose-img-bg-1 {
  bottom: 200px;
}

.choose-img-bg-2 {
  right: 20px;
  top: 43px;
  animation: slide_2 18s ease-in-out alternate infinite;
}

@keyframes slide_2 {
  0% {
    transform: translate(0) rotate(0deg);
  }

  15% {
    transform: translate(10px, 10px) rotate(15deg);
  }

  30% {
    transform: translate(10px, -15px) rotate(0deg);
  }

  45% {
    transform: translate(-10px, -25px) rotate(-10deg);
  }

  60% {
    transform: translate(0, 25px) rotate(15deg);
  }

  75% {
    transform: translate(-10px, -15px) rotate(10deg);
  }

  90% {
    transform: translate(-5, -5px) rotate(-10deg);
  }

  100% {
    transform: translate(0) rotate(0deg);
  }
}

.cs-choose-card-body {
  height: 100%;
  background: linear-gradient(44deg, #11192c 65.66%, rgba(17, 25, 44, 0) 99.16%), url(../images/shapes/pattern-masked-1.svg);
  background-size: cover;
  background-repeat: no-repeat;
  border-radius: 20px;
  padding: 40px;
  transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.cs-choose-card-body .cs-icon-card {
  margin-bottom: 32px;
}

.cs-choose-card-body:hover {
  background: linear-gradient(44deg, #11192c 65.66%, rgba(17, 25, 44, 0) 99.16%), url(../images/shapes/pattern-masked-2.svg);
  transform: translateY(-3px);
}

@media only screen and (max-width: 1199.98px) {
  .cs-choose-card-body {
    padding: 20px;
  }

  .cs-choose-card-body .cs-icon-card {
    margin-bottom: 22px;
  }
}

/*================================================
16. Team CSS
=================================================*/
.team-box-wrap {
  border-radius: 20px;
  padding: 1px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.25) 33.13%, var(--color-deep-blue) 91.05%);
}

.team-box-wrap .team-box {
  background-color: var(--color-deep-blue);
  border-radius: 20px;
  overflow: hidden;

}

.team-box-wrap .team-box .team-img {
  /* padding-top: 40px; */
  padding-top: 0px;
}

@media only screen and (max-width: 1199.98px) {
  .team-box-wrap .team-box .team-img {
    /* padding-top: 20px; */
    padding-top: 0px;
  }
}

.team-box-wrap .team-box .team-img img {
  transition-duration: 0.8s;
  transition: all 0.3s linear;
  border-radius: 20px;
  overflow: hidden;
}

.team-box-wrap .team-box .team-img .team-info-wrap {
  background: linear-gradient(180deg, rgba(0, 0, 29, 0) 33.13%, var(--color-deep-blue) 91.05%);
  padding: 40px;
}

@media only screen and (max-width: 1199.98px) {
  .team-box-wrap .team-box .team-img .team-info-wrap {
    padding: 20px;
  }
}

.team-box-wrap .team-box .team-img .team-info-wrap .team-info h2 {
  font-size: 20px;
}

@media only screen and (max-width: 1199.98px) {
  .team-box-wrap .team-box .team-img .team-info-wrap .team-info p {
    font-size: 14px;
  }
}

.team-box-wrap .team-box .team-img .team-info-wrap .team-social {
  border-radius: 8px;
  border: 0.5px solid rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.06);
  width: 32px;
  height: 32px;
  padding: 4px;
  transition: all 0.3s linear;
  margin-left: 15px;
}

.team-box-wrap .team-box .team-img .team-info-wrap .team-social svg,
.team-box-wrap .team-box .team-img .team-info-wrap .team-social i {
  color: var(--color-white);
  transition: all 0.3s linear;
}

.team-box-wrap .team-box:hover .team-img img {
  transform: scale(1.05);
  border-radius: 20px;
  overflow: hidden;
}

.team-box-wrap .team-box:hover .team-img .team-info-wrap .team-social {
  background: var(--color-light-black);
  transform: rotate3d(1, 1, 1, 360deg);
}

.team-personal-data .team-dev-head {
  margin-bottom: 90px;
}

@media only screen and (max-width: 991.98px) {
  .team-personal-data .team-dev-head {
    margin-bottom: 60px;
  }
}

.team-personal-data .team-dev-head .team-dev-name {
  font-size: 48px;
  font-style: normal;
  font-weight: 600;
  line-height: 1.2em;
  text-transform: capitalize;
  margin-bottom: 8px;
}

@media only screen and (max-width: 991.98px) {
  .team-personal-data .team-dev-head .team-dev-name {
    font-size: 35px;
  }
}

.team-personal-data .team-dev-head .team-dev-title {
  font-family: var(--ff-inter-tight);
  font-size: 22px;
  font-style: normal;
  font-weight: 400;
  line-height: 1.36em;
}

.team-personal-data .team-dev-head .team-dev-desc {
  margin-top: 40px;
  font-family: var(--ff-inter-tight);
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 1.77em;
}

@media only screen and (max-width: 991.98px) {
  .team-personal-data .team-dev-head .team-dev-desc {
    margin-top: 30px;
  }
}

.team-personal-data .team-dev-head .dev-overview-data {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 48px;
  margin-top: 48px;
}

@media only screen and (max-width: 991.98px) {
  .team-personal-data .team-dev-head .dev-overview-data {
    margin-top: 30px;
  }
}

.team-personal-data .team-dev-head .dev-overview-data p {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 20px;
  text-align: left;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 1.77em;
}

.team-personal-data .team-dev-head .dev-overview-data p svg {
  width: 24px;
  height: 24px;
}

@media only screen and (max-width: 991.98px) {
  .team-personal-data .team-dev-head .dev-overview-data {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 20px;
    margin-top: 30px;
  }
}

.team-dev-skills {
  margin-bottom: 90px;
}

@media only screen and (max-width: 991.98px) {
  .team-dev-skills {
    margin-bottom: 60px;
  }
}

.team-dev-skills .dev-skills-title {
  font-size: 32px;
  font-style: normal;
  font-weight: 500;
  line-height: 1.5em;
  text-transform: capitalize;
  margin-bottom: 28px;
}

.team-dev-skills .dev-skills-desc {
  font-family: var(--ff-inter-tight);
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 1.7em;
}

.team-dev-skills .dev-skills-tags {
  margin-top: 48px;
}

.team-dev-skills .dev-skills-tags .tag-list {
  gap: 20px;
}

.team-dev-skills .dev-skills-tags .tag-list li {
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.1);
  font-family: var(--ff-inter);
  font-style: italic;
  font-weight: 500;
  padding: 13px 28px;
  color: var(--color-white);
}

@media only screen and (max-width: 991.98px) {
  .team-dev-skills .dev-skills-tags .tag-list li {
    padding: 8px 15px;
  }
}

.team-dev-social .dev-social-title {
  margin-bottom: 28px;
  font-size: 32px;
  font-weight: 500;
  line-height: 150%;
  text-transform: capitalize;
}

/*================================================
17. Error CSS
=================================================*/
.common-bg-area {
  padding: 300px 0 50px;
  background: url(../images/error-bg.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

@media only screen and (max-width: 991.98px) {
  .common-bg-area {
    padding: 180px 0 0px;
  }
}

.error-info {
  gap: 64px;
}

@media only screen and (max-width: 991.98px) {
  .error-info {
    gap: 44px;
  }
}

/*================================================
18. Works CSS
=================================================*/
.work-step-wrap .work-step-box {
  padding-left: 42px;
  position: relative;
}

.work-step-wrap .work-step-box::before {
  position: absolute;
  left: 0;
  top: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #fa7f27;
  content: "";
}

.work-step-wrap .work-step-box:nth-child(2)::before {
  background-color: #4b62e6;
}

.work-step-wrap .work-step-box:nth-child(3)::before {
  background-color: #f786be;
}

.work-step-wrap .work-step-box .section-title.border-style .border-sbu {
  padding-bottom: 16px;
  margin-bottom: 16px;
}

.work-step-wrap .work-step-box .section-title.border-style .title {
  font-size: 30px;
  line-height: 1.6;
}

@media only screen and (max-width: 991.98px) {
  .work-step-wrap .work-step-box .section-title.border-style .title {
    font-size: 20px;
  }
}

.work-step-wrap .work-step-box .section-title .desc {
  margin-top: 20px;
}

@media only screen and (max-width: 991.98px) {
  .work-step-wrap .work-step-box .section-title .desc {
    margin-top: 10px;
  }
}

.work-step-wrap .work-step-box:not(:last-child) {
  padding-bottom: 56px;
}

@media only screen and (max-width: 991.98px) {
  .work-step-wrap .work-step-box:not(:last-child) {
    padding-bottom: 30px;
  }
}

.work-step-wrap .work-step-box:not(:last-child)::after {
  position: absolute;
  left: 9px;
  top: 4px;
  width: 1px;
  height: 100%;
  border: 1px dashed #c0c5c3;
  content: "";
  z-index: -1;
}

.cg-work-box-wrap {
  background: linear-gradient(270deg, rgba(255, 255, 255, 0) 0.08%, rgba(255, 255, 255, 0.25) 51.85%, rgba(255, 255, 255, 0) 99.92%);
  padding: 1.5px;
  border-radius: 12px;
  transition: all 0.4s linear;
}

.cg-work-box-wrap .cg-work-box {
  background-color: rgb(24, 31, 47);
  border-radius: 12px;
  padding: 50px 0px 0 50px;
  gap: 126px;
  transition: all 0.3s;
}

@media only screen and (max-width: 1399.98px) {
  .cg-work-box-wrap .cg-work-box {
    gap: 50px;
  }
}

@media only screen and (max-width: 1199.98px) {
  .cg-work-box-wrap .cg-work-box {
    padding: 30px;
  }
}

@media only screen and (max-width: 991.98px) {
  .cg-work-box-wrap .cg-work-box {
    gap: 30px;
  }
}

.cg-work-box-wrap .cg-work-box .cg-work-info {
  max-width: 499px;
  width: 100%;
}

.cg-work-box-wrap .cg-work-box .cg-work-info span {
  font-size: 24px;
  font-weight: 500;
  background-color: #1b7cd4;
  border-radius: 12px;
  line-height: 1;
  padding: 8px 18px;
}

@media only screen and (max-width: 991.98px) {
  .cg-work-box-wrap .cg-work-box .cg-work-info span {
    font-size: 18px;
  }
}

.cg-work-box-wrap .cg-work-box .cg-work-info h2 {
  font-size: 32px;
  font-weight: 500;
  margin: 16px 0 20px;
}

@media only screen and (max-width: 991.98px) {
  .cg-work-box-wrap .cg-work-box .cg-work-info h2 {
    font-size: 20px;
    margin: 15px 0 10px;
  }
}

.cg-work-box-wrap .cg-work-box .cg-work-img {
  padding: 32px 0px 0 32px;
  background-image: url(../images/works/bg-sp-1.png);
  border-top-left-radius: 28px;
  max-width: 643px;
  width: 100%;
}

@media only screen and (max-width: 1399.98px) {
  .cg-work-box-wrap .cg-work-box .cg-work-img {
    max-width: 530px;
  }
}

@media only screen and (max-width: 1199.98px) {
  .cg-work-box-wrap .cg-work-box .cg-work-img {
    border-radius: 40px 0px 28px 0px;
    padding: 22px 0px 0 22px;
  }
}

.cg-work-box-wrap .cg-work-box .cg-work-img img {
  border-top-left-radius: 28px;
}

.cg-work-box-wrap:hover {
  background: linear-gradient(270deg, rgba(255, 255, 255, 0) 0.08%, rgba(255, 255, 255, 0.4) 51.85%, rgba(255, 255, 255, 0) 99.92%);
}

.cg-work-box-wrap:hover .cg-work-box {
  background-color: rgba(24, 31, 47, 0.5);
}

.cg-work-box-area-wrap .single-cg-work-box-area:nth-child(2) .cg-work-box-wrap .cg-work-box .cg-work-info span {
  background-color: #6354ac;
}

.cg-work-box-area-wrap .single-cg-work-box-area:nth-child(2) .cg-work-box-wrap .cg-work-box .cg-work-img {
  background-image: url(../images/works/bg-sp-2.png);
}

.cg-work-box-area-wrap .single-cg-work-box-area:nth-child(3) .cg-work-box-wrap .cg-work-box .cg-work-info span {
  background-color: #03b0d5;
}

.cg-work-box-area-wrap .single-cg-work-box-area:nth-child(3) .cg-work-box-wrap .cg-work-box .cg-work-img {
  background-image: url(../images/works/bg-sp-3.png);
}

/*================================================
19. Showcase CSS
=================================================*/
.work-mixi .mix {
  display: none;
}

.showcase-list {
  gap: 24px;
}

.showcase-list li {
  font-size: 22px;
  border-radius: 50px;
  color: var(--color-text-heading);
  border: 1px solid transparent;
  padding: 2px 24px;
  cursor: pointer;
  transition: all 0.3s;
}

.showcase-list li.active {
  background: rgba(3, 24, 17, 0.03);
  color: var(--primary-green);
  border: 1px solid var(--primary-green);
}

@media only screen and (max-width: 1399.98px) {
  .showcase-list {
    flex-wrap: wrap;
  }
}

@media only screen and (max-width: 991.98px) {
  .showcase-list {
    flex-wrap: nowrap;
    overflow-x: scroll;
    gap: 5px;
  }

  .showcase-list li {
    font-size: 18px;
  }
}

.single-showcase-img {
  border-radius: 24px;
  overflow: hidden;
}

.single-showcase-img img {
  border-radius: 24px;
  transition: filter 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95);
  will-change: filter;
}

.single-showcase-img:hover img {
  filter: brightness(120%) hue-rotate(45deg);
}

.slider-button-wrap .swiper-pagination-bullets.swiper-pagination-horizontal {
  width: auto;
}

.slider-button-wrap .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
  margin: 0;
}

.slider-button-wrap .common-pagination {
  gap: 10px;
}

.slider-button-wrap .common-pagination span {
  width: 24px;
  height: 24px;
  background-color: transparent;
  border: 1px solid transparent;
  opacity: 1;
  position: relative;
}

.slider-button-wrap .common-pagination span::before {
  position: absolute;
  width: 12px;
  height: 12px;
  background-color: #d9d9d9;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  content: "";
  border-radius: 50%;
}

.slider-button-wrap .common-pagination span.swiper-pagination-bullet-active {
  background-color: rgba(29, 158, 67, 0.1);
  border: 1px solid var(--primary-green);
}

.slider-button-wrap .common-pagination span.swiper-pagination-bullet-active::before {
  background-color: var(--primary-green);
}

.slider-button-wrap .slide-btn-prev,
.slider-button-wrap .slide-btn-next {
  color: rgba(3, 24, 17, 0.5);
  transition: all 0.3s;
}

.slider-button-wrap .slide-btn-prev:hover,
.slider-button-wrap .slide-btn-next:hover {
  color: var(--color-text-heading);
}

.slider-button-wrap.slider-button-wrap-blue .common-pagination {
  gap: 10px;
}

.slider-button-wrap.slider-button-wrap-blue .common-pagination span {
  width: 24px;
  height: 24px;
  background-color: transparent;
  border: 1px solid transparent;
  opacity: 1;
  position: relative;
}

.slider-button-wrap.slider-button-wrap-blue .common-pagination span::before {
  background-color: #5f50d5;
}

.slider-button-wrap.slider-button-wrap-blue .common-pagination span.swiper-pagination-bullet-active {
  background: linear-gradient(180deg, rgba(56, 57, 86, 0.4) 34.9%, rgba(56, 57, 86, 0.16) 100%);
  border: 1px solid var(--color-light-white);
}

.slider-button-wrap.slider-button-wrap-blue .common-pagination span.swiper-pagination-bullet-active::before {
  background-color: var(--color-white);
}

.slider-button-wrap.slider-button-wrap-blue .slide-btn-prev,
.slider-button-wrap.slider-button-wrap-blue .slide-btn-next {
  color: rgba(255, 255, 255, 0.25);
}

.slider-button-wrap.slider-button-wrap-blue .slide-btn-prev:hover,
.slider-button-wrap.slider-button-wrap-blue .slide-btn-next:hover {
  color: rgb(255, 255, 255);
}

.cg-testimonial-slide {
  padding-top: 38px;
}

.cg-testimonial-slide .swiper-slide {
  min-height: 100%;
  height: unset;
}

.cg-testimonial-sp {
  bottom: 91px;
}

/*================================================
20. Features CSS
=================================================*/
.cg-features-box .cg-features-icon-wrap {
  background: linear-gradient(135deg, rgba(66, 41, 255, 0.25) 34.78%, rgba(66, 41, 255, 0.25) 45.56%, rgba(66, 41, 255, 0.25) 67.43%);
  max-width: 340px;
  padding: 1.5px;
  border-radius: 10px;
  transition: all 0.4s;
}

.cg-features-box .cg-features-icon-wrap::before {
  position: absolute;
  left: 50%;
  top: 50%;
  height: 313%;
  width: 90%;
  background: transparent;
  transition: all 0.6s linear;
  content: "";
  z-index: 1;
  animation: animate_border 4.5s linear infinite;
}

.cg-features-box .cg-features-icon-wrap .cg-features-icon {
  background-color: #111725;
  position: relative;
  z-index: 1;
  padding: 50px 20px;
  border-radius: 10px;
}

.cg-features-box .cg-features-info h2 {
  margin: 32px 0 12px;
}

.cg-features-box .cg-features-info p {
  max-width: 408px;
}

.cg-features-box:hover .cg-features-icon-wrap::before {
  width: 190%;
  background: linear-gradient(135deg, rgba(66, 41, 255, 0.5) 34.78%, rgba(255, 255, 255, 0.5) 45.56%, rgba(66, 41, 255, 0.5) 67.43%);
}

@keyframes animate_border {
  from {
    transform: translate(-50%, -50%) rotateZ(0deg);
  }

  to {
    transform: translate(-50%, -50%) rotateZ(360deg);
  }
}

.cs-feature-wrap {
  max-width: 1620px;
  border-radius: 80px;
}

@media only screen and (max-width: 1199.98px) {
  .cs-feature-wrap {
    border-radius: 40px;
  }
}

.cs-feature-box {
  background-color: #f6f7f9;
  border-radius: 40px;
  gap: 48px;
  padding: 40px 40px 0;
  transition: all 0.3s;
}

@media only screen and (max-width: 991.98px) {
  .cs-feature-box {
    gap: 30px;
    padding: 25px;
    border-radius: 20px;
  }
}

.cs-feature-box .cs-feature-info h2 {
  font-size: 32px;
  line-height: 1.5;
}

@media only screen and (max-width: 991.98px) {
  .cs-feature-box .cs-feature-info h2 {
    font-size: 24px;
  }
}

.cs-feature-box .cs-feature-info p {
  margin-top: 20px;
}

@media only screen and (max-width: 991.98px) {
  .cs-feature-box .cs-feature-info p {
    margin-top: 10px;
  }
}

.cs-feature-box .cs-feature-info .cs-feature-icon {
  height: 80px;
  width: 80px;
  border-radius: 50%;
  background-color: #19aacd;
  margin-bottom: 30px;
  transition: all 0.3s linear;
}

@media only screen and (max-width: 991.98px) {
  .cs-feature-box .cs-feature-info .cs-feature-icon {
    margin-bottom: 20px;
  }
}

.cs-feature-box:hover .cs-feature-info .cs-feature-icon {
  background-color: var(--primary-purple);
}

.cs-feature-box:hover {
  transform: translateY(-3px);
}

.cs-feature-box.cs-feature-box-two {
  padding: 40px 32px;
}

@media only screen and (max-width: 991.98px) {
  .cs-feature-box.cs-feature-box-two {
    padding: 25px;
  }
}

.cs-feature-box.cs-feature-box-two .cs-feature-img {
  max-width: 568px;
}

@media only screen and (max-width: 1199.98px) {
  .cs-feature-box.cs-feature-box-two .cs-feature-img {
    max-width: 458px;
  }
}

.cs-feature-box.cs-feature-box-three {
  padding: 40px 16px 16px;
}

@media only screen and (max-width: 991.98px) {
  .cs-feature-box.cs-feature-box-three {
    padding: 25px;
  }
}

.cs-feature-box.cs-feature-box-three .cs-feature-info {
  padding: 0 24px;
}

@media only screen and (max-width: 991.98px) {
  .cs-feature-box.cs-feature-box-three .cs-feature-info {
    padding: 0;
  }
}

/*================================================
21. Creativity CSS
=================================================*/
.creativity-wrap {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  justify-content: space-evenly;
  justify-items: stretch;
  align-content: space-evenly;
  align-items: center;
  grid-gap: 145px;
}

@media only screen and (max-width: 1399.98px) {
  .creativity-wrap {
    grid-gap: 100px;
  }
}

@media only screen and (max-width: 1199.98px) {
  .creativity-wrap {
    grid-gap: 24px;
  }
}

@media only screen and (max-width: 991.98px) {
  .creativity-wrap {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media only screen and (max-width: 767.98px) {
  .creativity-wrap {
    grid-template-columns: repeat(1, 1fr);
    justify-items: center;
  }
}

.creativity-box {
  max-width: 343px;
}

.creativity-box .creativity-icon-wrap {
  border-radius: 20px;
  padding: 1.5px;
  position: relative;
  z-index: 1;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.5) 45.56%, rgba(66, 41, 255, 0.5) 67.43%);
}

.creativity-box .creativity-icon-wrap .creativity-icon {
  width: 86px;
  height: 86px;
  background: #1a1e30;
  color: #fff;
  border-radius: 20px;
  transition: all 0.4s;
}

.creativity-box .creativity-info h2 {
  margin: 36px 0 10px;
}

.creativity-box .creativity-info p {
  font-size: 18px;
  line-height: 177.778%;
}

.creativity-box:hover .creativity-icon-wrap {
  background: linear-gradient(308deg, rgba(255, 255, 255, 0.5) 45.56%, rgba(66, 41, 255, 0.5) 67.43%);
}

.creativity-box:hover .creativity-icon-wrap .creativity-icon {
  color: #5a45f9;
}

.cg-creativity-area {
  background: linear-gradient(180deg, #070b17 0%, rgba(7, 11, 23, 0.95) 100%);
}

/*================================================
22. Form CSS
=================================================*/
.form-wrap {
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: #0e0f23;
  padding: 40px;
  max-width: 731px;
}

@media only screen and (max-width: 991.98px) {
  .form-wrap {
    padding: 40px 20px;
  }
}

.form-wrap .common-form-box .form-title {
  font-size: 48px;
  font-weight: 600;
  line-height: 120.833%;
  text-transform: capitalize;
  margin-bottom: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

@media only screen and (max-width: 1199.98px) {
  .form-wrap .common-form-box .form-title {
    font-size: 38px;
    margin-bottom: 30px;
    padding-bottom: 20px;
  }
}

.form-wrap .common-form-box .input-group label {
  color: #fff;
  font-size: 18px;
  line-height: 1.7;
  margin-bottom: 6px;
}

.form-wrap .common-form-box .input-group input,
.form-wrap .common-form-box .input-group textarea {
  width: 100%;
  background: #0e0f23;
  border-radius: 16px !important;
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 12px 20px;
  color: #fff;
  transition: border-color 0.3s ease;
}

.form-wrap .common-form-box .input-group input::-moz-placeholder,
.form-wrap .common-form-box .input-group textarea::-moz-placeholder {
  color: rgba(255, 255, 255, 0.5);
  font-size: 18px;
}

.form-wrap .common-form-box .input-group input::placeholder,
.form-wrap .common-form-box .input-group textarea::placeholder {
  color: rgba(255, 255, 255, 0.5);
  font-size: 18px;
}

.form-wrap .common-form-box .input-group input:focus,
.form-wrap .common-form-box .input-group textarea:focus {
  border-color: var(--color-blue);
  outline: none;
}

.form-wrap.form-wrap-contact {
  max-width: unset;
}

.form-wrap.form-wrap-contact .common-form-box .form-title {
  margin-bottom: 0px;
  padding-bottom: 0px;
  border-bottom: unset;
}

.form-wrap.form-wrap-contact .common-form-box .form-info {
  margin: 12px 0 48px;
  font-size: 18px;
}

@media only screen and (max-width: 991.98px) {
  .form-wrap.form-wrap-contact .common-form-box .form-info {
    margin: 12px 0 30px;
  }
}

.check-group {
  display: block;
  margin: 0px 0 40px;
}

.check-group input {
  padding: 0;
  height: initial;
  width: initial;
  margin-bottom: 0;
  display: none;
  cursor: pointer;
}

.check-group label {
  position: relative;
  cursor: pointer;
  line-height: 0;
}

.check-group label::before {
  content: "";
  -webkit-appearance: none;
  background-color: transparent;
  border: 1.5px solid rgba(255, 255, 255, 0.5);
  padding: 10px;
  display: inline-block;
  position: relative;
  vertical-align: middle;
  cursor: pointer;
  margin-right: 12px;
  border-radius: 6px;
}

.check-group label a {
  color: var(--color-white);
  border-bottom: 1px solid;
  text-transform: capitalize;
}

.check-group input:checked+label:after {
  content: "";
  display: block;
  position: absolute;
  top: 2px;
  left: 9px;
  width: 6px;
  height: 14px;
  border: solid rgba(255, 255, 255, 0.7);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.form-info-wrap .common-btn {
  padding: 20px 22px;
}

.form-info-wrap .common-btn.border-style {
  border: 1px solid var(--color-blue);
}

.login-link {
  color: var(--color-blue);
}

.login-link:hover {
  color: var(--color-blue);
}

/*================================================
23. Terms and Condition CSS
=================================================*/
.condition-content:not(:last-child) {
  margin-bottom: 48px;
}

@media only screen and (max-width: 991.98px) {
  .condition-content:not(:last-child) {
    margin-bottom: 30px;
  }
}

.condition-content .terms-desc {
  font-size: 18px;
  line-height: 1.7;
}

@media only screen and (max-width: 991.98px) {
  .condition-content .terms-desc {
    font-size: 16px;
  }
}

.condition-content .terms-inner-desc {
  margin-top: 20px;
}

@media only screen and (max-width: 991.98px) {
  .condition-content .terms-inner-desc {
    margin-top: 10px;
  }
}

.terms-title {
  margin-bottom: 24px;
  font-size: 32px;
  font-weight: 500;
  line-height: 150%;
  text-transform: capitalize;
}

@media only screen and (max-width: 991.98px) {
  .terms-title {
    margin-bottom: 16px;
    font-size: 22px;
  }
}

.table-content ul li:not(:last-child) {
  margin-bottom: 12px;
}

.table-content ul li a {
  font-family: var(--ff-inter);
  color: var(--color-white);
  font-size: 20px;
  line-height: 190%;
  transition: 0.3s;
}

.table-content ul li a:hover {
  color: var(--color-light-white);
}

.italic-font {
  font-style: italic;
}

/*================================================
24. Contact CSS
=================================================*/
.contact-card-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.contact-card-box .contact-card-icon {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-bottom: 30px;
  width: 64px;
  height: 64px;
  background: var(--color-blue);
  border: none;
  border-radius: 50%;
  transition: all 0.3s;
}

.contact-card-box .contact-card-icon svg,
.contact-card-box .contact-card-icon i {
  color: var(--color-white);
}

.contact-card-box .contact-card-text {
  max-width: 280px;
  margin: 0 auto;
}

.contact-card-box .contact-card-text .contact-card-title {
  margin-bottom: 4px;
  font-size: 20px;
  font-weight: 500;
  text-transform: capitalize;
}

.contact-card-box .contact-card-text .contact-card-desc {
  font-family: var(--ff-inter-tight);
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 32px;
}

.contact-card-box:hover .contact-card-icon {
  background: var(--primary-green);
}

.contact-hero {
  background-image: url(../xera-images/contact-bg.webp);
  border-radius: 24px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.map-wrap {
  width: 100%;
  height: 560px;
}

.map-wrap iframe {
  height: 100%;
  width: 100%;
}

@media only screen and (max-width: 767.98px) {
  .map-wrap {
    height: 250px;
  }
}

@media only screen and (max-width: 575.98px) {
  .container {
    padding-right: 1rem;
    padding-left: 1rem;
  }
}

.brand-5.section {
  background-color: #141414;
}

.brand-5__content {
  line-height: 1;
}

.brand-5__content .section-title {
  font-family: "Inter Display";
  font-size: 20px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -1.2px;
}

.brand-5__content .section-title span {
  background: linear-gradient(70deg, #7f5fff -90.77%, #ae77ff -51.53%, #bb6dff -10.92%, #d759ff 33.45%, #f8cc84 86.68%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.brand-5__slider .swiper-wrapper {
  transition-timing-function: linear !important;
}

.brand-5__slider .swiper-wrapper .swiper-slide {
  width: auto;
}

.system-5.section {
  background-color: #141414;
}

.system-5.section .section-header {
  max-width: 560px;
  margin-inline: auto;
}

.system-5__wrapper {
  position: relative;
  border-radius: 32px;
  overflow: hidden;
  margin-inline: 32px;
}

@media only screen and (max-width: 991.98px) {
  .system-5__wrapper {
    margin-inline: 15px;
  }
}

@media only screen and (max-width: 767.98px) {
  .system-5__wrapper {
    margin-inline: 0px;
  }
}

.system-5__wrapper .masked {
  position: absolute;
  top: 0;
  right: 0;
}

.system-5__item {
  position: relative;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.02);
  padding: 50px 42px;
  text-align: center;
  z-index: 2;
  transition: all 0.5s ease-in-out;
}

@media only screen and (max-width: 1399.98px) {
  .system-5__item {
    padding: 40px 30px;
  }
}

.system-5__item .item-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0;
  transition: all 0.5s ease-in-out;
}

.system-5__item .item-icon {
  display: grid;
  place-content: center;
  width: 90px;
  height: 90px;
  flex-shrink: 0;
  aspect-ratio: 1/1;
  margin-inline: auto;
  color: #fff;
  background-color: rgba(127, 95, 255, 0.16);
  border-radius: 50%;
  -webkit-mask: url(#starMask);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  -webkit-mask: url(#starMask);
  mask: url(#starMask);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  transition: all 0.5s ease;
  margin-bottom: 25px;
  transform-style: preserve-3d;
  transition: all 0.5s ease;
  position: relative;
  z-index: 2;
}

@media only screen and (max-width: 1199.98px) {
  .system-5__item .item-icon {
    margin-bottom: 20px;
  }
}

.system-5__item .item-icon::before {
  position: absolute;
  content: "";
  inset: 0;
  z-index: -1;
  background: linear-gradient(75deg, #7f5fff -47.93%, #ae77ff -17.55%, #bb6dff 13.89%, #d759ff 48.23%, #f8cc84 89.43%);
  opacity: 0;
  transition: all 0.5s ease-in-out;
}

.system-5__item .title {
  color: #fff;
  font-family: "Inter Display", sans-serif;
  font-size: 32px;
  font-weight: 500;
  line-height: 125%;
  letter-spacing: -2.24px;
  opacity: 0.8;
  margin-bottom: 45px;
}

@media only screen and (max-width: 1399.98px) {
  .system-5__item .title {
    margin-bottom: 30px;
    font-size: 28px;
  }
}

@media only screen and (max-width: 1199.98px) {
  .system-5__item .title {
    letter-spacing: -1px;
  }
}

@media only screen and (max-width: 991.98px) {
  .system-5__item .title {
    font-size: 25px;
  }
}

.system-5__item p {
  color: #999;
  font-family: "Inter Display", sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 23.4px;
  letter-spacing: -1.08px;
}

.system-5__item:hover {
  background-color: transparent;
}

.system-5__item:hover .item-bg {
  opacity: 1;
}

.system-5__item:hover .item-icon {
  transform: rotateY(180deg) scale(1.1);
  background-color: transparent;
}

.system-5__item:hover .item-icon::before {
  opacity: 1;
}

.custom-img-5.section {
  background: #141414;
}

.custom-img-5__thumb {
  border-radius: 32px;
  overflow: hidden;
}

.custom-img-5__thumb img {
  width: 100%;
}

.custom-img-5__content .section-header .section-sub-title {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 32px;
  font-size: 28px;
  font-weight: 600;
  line-height: 130%;
  font-family: var(--ff-inter-tight);
  background: linear-gradient(75deg, #7f5fff -47.93%, #ae77ff -17.55%, #bb6dff 13.89%, #d759ff 48.23%, #f8cc84 89.43%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

@media only screen and (max-width: 991.98px) {
  .custom-img-5__content .section-header .section-sub-title {
    font-size: 20px;
    gap: 15px;
  }
}

.custom-img-5__content .section-header .section-sub-title::before {
  position: relative;
  content: "";
  background-color: var(--color-white);
  width: 100px;
  height: 1px;
  opacity: 0.2;
}

@media only screen and (max-width: 991.98px) {
  .custom-img-5__content .section-header .section-sub-title::before {
    width: 50px;
  }
}

.custom-img-5__content .section-header .section-title {
  font-weight: 500;
  line-height: 106.452%;
  letter-spacing: -1.86px;
}

.custom-img-5__content .section-header p {
  color: rgba(255, 255, 255, 0.59);
  font-family: var(--ff-inter);
  font-size: 16px;
  font-weight: 400;
  line-height: 150%;
  letter-spacing: 0.32px;
}

.custom-img-5__content .section-header p:first-of-type {
  max-width: 560px;
  margin-bottom: 18px;
}

.custom-img-5__content .section-header p:last-of-type {
  max-width: 598px;
}

.ai-image-5.section {
  position: relative;
  background: #141414;
  z-index: 2;
  overflow-x: clip;
}

.ai-image-5.section .section-header {
  max-width: 780px;
}

.ai-image-5.section .section-header p {
  color: rgba(255, 255, 255, 0.59);
  font-family: Inter;
  font-size: 16px;
  font-weight: 400;
  line-height: 150%;
  letter-spacing: 0.32px;
}

.ai-image-5.section .ai-image-5-shape {
  position: absolute;
  top: -45%;
  right: -100px;
  z-index: -1;
  pointer-events: none;
}

@media only screen and (max-width: 1199.98px) {
  .ai-image-5.section .ai-image-5-shape {
    opacity: 0.5;
    top: -25%;
    right: -150px;
  }
}

.ai-image-5__item-wrapper {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 24px;
}

@media only screen and (max-width: 1199.98px) {
  .ai-image-5__item-wrapper {
    gap: 18px;
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }
}

.ai-image-5__item-wrapper .ai-image-5__item:nth-of-type(1) {
  grid-column: span 2/span 2;
}

@media only screen and (max-width: 1199.98px) {
  .ai-image-5__item-wrapper .ai-image-5__item:nth-of-type(1) {
    grid-column: span 4/span 4;
  }
}

@media only screen and (max-width: 575.98px) {
  .ai-image-5__item-wrapper .ai-image-5__item:nth-of-type(1) {
    grid-column: span 8/span 8;
  }
}

.ai-image-5__item-wrapper .ai-image-5__item:nth-of-type(2) {
  grid-column: span 2/span 2;
}

@media only screen and (max-width: 1199.98px) {
  .ai-image-5__item-wrapper .ai-image-5__item:nth-of-type(2) {
    grid-column: span 4/span 4;
  }
}

@media only screen and (max-width: 575.98px) {
  .ai-image-5__item-wrapper .ai-image-5__item:nth-of-type(2) {
    grid-column: span 8/span 8;
  }
}

.ai-image-5__item-wrapper .ai-image-5__item:nth-of-type(3) {
  grid-column: span 3/span 3;
}

@media only screen and (max-width: 1199.98px) {
  .ai-image-5__item-wrapper .ai-image-5__item:nth-of-type(3) {
    grid-column: span 8/span 8;
  }
}

@media only screen and (max-width: 575.98px) {
  .ai-image-5__item-wrapper .ai-image-5__item:nth-of-type(3) {
    grid-column: span 8/span 8;
  }
}

.ai-image-5__item-wrapper .ai-image-5__item:nth-of-type(4) {
  grid-column: span 3/span 3;
}

@media only screen and (max-width: 1199.98px) {
  .ai-image-5__item-wrapper .ai-image-5__item:nth-of-type(4) {
    grid-column: span 8/span 8;
  }
}

@media only screen and (max-width: 575.98px) {
  .ai-image-5__item-wrapper .ai-image-5__item:nth-of-type(4) {
    grid-column: span 8/span 8;
  }
}

.ai-image-5__item-wrapper .ai-image-5__item:nth-of-type(5) {
  grid-column: span 2/span 2;
}

@media only screen and (max-width: 1199.98px) {
  .ai-image-5__item-wrapper .ai-image-5__item:nth-of-type(5) {
    grid-column: span 4/span 4;
  }
}

@media only screen and (max-width: 575.98px) {
  .ai-image-5__item-wrapper .ai-image-5__item:nth-of-type(5) {
    grid-column: span 8/span 8;
  }
}

.ai-image-5__item-wrapper .ai-image-5__item:nth-of-type(6) {
  grid-column: span 2/span 2;
}

@media only screen and (max-width: 1199.98px) {
  .ai-image-5__item-wrapper .ai-image-5__item:nth-of-type(6) {
    grid-column: span 4/span 4;
  }
}

@media only screen and (max-width: 575.98px) {
  .ai-image-5__item-wrapper .ai-image-5__item:nth-of-type(6) {
    grid-column: span 8/span 8;
  }
}

.ai-image-5__item {
  height: 100%;
}

.ai-image-5__item img {
  min-height: 250px;
  width: 100%;
  height: 100%;
}

.pricing-5.section {
  background: #141414;
}

.pricing-5__plans-btns {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 23px;
  margin-top: 50px;
}

@media only screen and (max-width: 1199.98px) {
  .pricing-5__plans-btns {
    margin-top: 30px;
  }
}

.pricing-5__plans-btns .yearly,
.pricing-5__plans-btns .monthly {
  color: #b5bcc2;
  font-family: "Inter Display", sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 1;
}

.pricing-5__plans-btns .yearly.current,
.pricing-5__plans-btns .monthly.current {
  color: #7f5fff;
}

.pricing-5__plans-btns .switch {
  position: relative;
  display: inline-block;
  font-size: 50px;
  height: 50px;
  width: 90px;
  padding: 10px;
  background: rgba(255, 255, 255, 0.28);
  border-radius: 25px;
  border: 1px solid var(--ColorWhite, #fff);
}

@media only screen and (max-width: 1199.98px) {
  .pricing-5__plans-btns .switch {
    font-size: 35px;
    height: 35px;
    width: 80px;
    padding: 5px;
  }
}

.pricing-5__plans-btns .switch input {
  position: absolute;
  opacity: 0;
}

.pricing-5__plans-btns .switch input:checked+.toggle {
  transform: translate3d(40px, 0, 0);
}

@media only screen and (max-width: 1199.98px) {
  .pricing-5__plans-btns .switch input:checked+.toggle {
    transform: translate3d(40px, 0, 0);
  }
}

.pricing-5__plans-btns .switch .toggle {
  display: block;
  height: 30px;
  width: 30px;
  border-radius: 100%;
  background: #fff;
  box-shadow: 0 0.1em 0.3em rgba(0, 0, 0, 0.3);
  transition: all 300ms;
  cursor: pointer;
}

@media only screen and (max-width: 1199.98px) {
  .pricing-5__plans-btns .switch .toggle {
    height: 23px;
    width: 23px;
  }
}

.pricing-5__plan-item {
  position: relative;
  border-radius: 32px;
  background: #191820;
  padding: 50px 60px;
  z-index: 2;
  transition: all 0.5s ease-in-out;
}

@media only screen and (max-width: 1399.98px) {
  .pricing-5__plan-item {
    padding: 35px;
    border-radius: 20px;
  }
}

.pricing-5__plan-item .item-bg {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: -1;
  -o-object-fit: fill;
  object-fit: fill;
  transition: all 0.5s ease-in-out;
}

.pricing-5__plan-item .plan-header .plan-title {
  display: block;
  color: #fff;
  font-family: "Inter Display", sans-serif;
  font-size: 24px;
  font-weight: 500;
  line-height: 125%;
  letter-spacing: -1.68px;
  opacity: 0.8;
  margin-bottom: 22px;
  transition: all 0.5s ease-in-out;
}

@media only screen and (max-width: 1199.98px) {
  .pricing-5__plan-item .plan-header .plan-title {
    font-size: 20px;
    margin-bottom: 15px;
  }
}

.pricing-5__plan-item .plan-header .price {
  color: #fff;
  font-family: "Inter Display", sans-serif;
  font-size: 62px;
  font-weight: 700;
  line-height: 106.452%;
  letter-spacing: -3.72px;
  margin-bottom: 22px;
}

@media only screen and (max-width: 1199.98px) {
  .pricing-5__plan-item .plan-header .price {
    font-size: 50px;
    margin-bottom: 15px;
  }
}

.pricing-5__plan-item .plan-header .price sub {
  display: inline-block;
  font-family: "Inter Display", sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 166.667%;
  letter-spacing: -1.26px;
  font-style: normal;
}

.pricing-5__plan-item .plan-header p {
  color: #fff;
  font-family: "Inter Display", sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 187.5%;
  letter-spacing: -1.12px;
  opacity: 0.8;
  transition: all 0.5s ease-in-out;
}

.pricing-5__plan-item .plan-feathers {
  margin-top: 50px;
  padding-top: 50px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

@media only screen and (max-width: 1199.98px) {
  .pricing-5__plan-item .plan-feathers {
    margin-top: 30px;
    padding-top: 30px;
  }
}

.pricing-5__plan-item .plan-feathers ul {
  padding-left: 0;
}

.pricing-5__plan-item .plan-feathers ul li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  color: rgba(153, 153, 153, 0.5);
  font-family: "Inter Display", sans-serif;
  font-size: 20.014px;
  font-weight: 400;
  line-height: 150%;
  letter-spacing: -1.201px;
}

@media only screen and (max-width: 1199.98px) {
  .pricing-5__plan-item .plan-feathers ul li {
    font-size: 18px;
  }
}

.pricing-5__plan-item .plan-feathers ul li:not(:last-of-type) {
  margin-bottom: 18px;
}

@media only screen and (max-width: 1199.98px) {
  .pricing-5__plan-item .plan-feathers ul li:not(:last-of-type) {
    margin-bottom: 12px;
  }
}

.pricing-5__plan-item .plan-feathers ul li i,
.pricing-5__plan-item .plan-feathers ul li svg {
  opacity: 0.5;
  flex-shrink: 0;
  transition: all 0.5s ease;
  background: linear-gradient(75deg, #7f5fff -47.93%, #ae77ff -17.55%, #bb6dff 13.89%, #d759ff 48.23%, #f8cc84 89.43%);
  background: -webkit-gradient(75deg, #7f5fff -47.93%, #ae77ff -17.55%, #bb6dff 13.89%, #d759ff 48.23%, #f8cc84 89.43%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.pricing-5__plan-item .plan-parches {
  margin-top: 40px;
}

.pricing-5__plan-item .plan-parches a {
  position: relative;
  z-index: 2;
  display: block;
  color: #fff;
  text-align: center;
  font-family: "Inter Display", sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: normal;
  letter-spacing: -0.9px;
  padding: 20px 34px;
  border-radius: 50px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  width: 100%;
  transition: all 0.5s ease;
  overflow: hidden;
}

@media only screen and (max-width: 1199.98px) {
  .pricing-5__plan-item .plan-parches a {
    padding: 12px 20px;
  }
}

.pricing-5__plan-item .plan-parches a::before {
  position: absolute;
  content: "";
  inset: 0;
  z-index: -1;
  background: linear-gradient(75deg, #7f5fff -47.93%, #ae77ff -17.55%, #bb6dff 13.89%, #d759ff 48.23%, #f8cc84 89.43%);
  transition: all 0.5s ease;
  transform-origin: center;
  opacity: 0;
}

.pricing-5__plan-item .plan-parches a:hover {
  color: #000;
  border-color: transparent;
}

.pricing-5__plan-item .plan-parches a:hover::before {
  opacity: 1;
}

.pricing-5__plan-item:hover {
  background-color: transparent;
}

.pricing-5__plan-item:hover .item-bg {
  opacity: 1;
}

.pricing-5__plan-item:hover .plan-header .plan-title,
.pricing-5__plan-item:hover .plan-header p {
  opacity: 1;
}

.pricing-5__plan-item:hover .plan-feathers ul li i,
.pricing-5__plan-item:hover .plan-feathers ul li svg {
  opacity: 1;
}

.pricing-5__plan-item:hover .plan-parches a {
  color: #fff;
  border-color: transparent;
}

.pricing-5__plan-item:hover .plan-parches a::before {
  opacity: 1;
}

.cta-5.section {
  background: #141414;
}

.cta-5__content {
  text-align: center;
  border-radius: 42px;
  background: #7f5fff;
  overflow: hidden;
  padding-inline: 20px;
}

@media only screen and (max-width: 1199.98px) {
  .cta-5__content {
    border-radius: 20px;
  }
}

.cta-5__content .content-title {
  color: #fff;
  text-align: center;
  font-family: "Inter Display", sans-serif;
  font-size: 62px;
  font-weight: 500;
  line-height: 106.452%;
  letter-spacing: -1.34px;
}

@media only screen and (max-width: 1199.98px) {
  .cta-5__content .content-title {
    font-size: 52px;
  }
}

@media only screen and (max-width: 991.98px) {
  .cta-5__content .content-title {
    font-size: 42px;
  }
}

.cta-5__content p {
  margin-block: 22px 32px;
  max-width: 442px;
  margin-inline: auto;
  color: #fff;
  text-align: center;
  font-family: "Inter Display", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20.8px;
  letter-spacing: -0.9px;
}

.cta-5__content .button-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
}

@media only screen and (max-width: 767.98px) {
  .cta-5__content .button-wrapper {
    flex-direction: column;
  }

  .cta-5__content .button-wrapper .powerai-btn {
    width: 100%;
  }
}

/* ai-startup page start  */
:root {
  --gradient: linear-gradient(90deg, #000000 0%, #666666 100%);
  --hover-gradient: linear-gradient(90deg, #666666 0%, #000000 100%);
  --hover-1: linear-gradient(180deg, #CD9CF2 0%, #CCBBFF 100%);
  --hover-2: linear-gradient(180deg, #F8EEFF 0%, #FEFEFF 100%);
  --hover-3: radial-gradient(48.15% 268.71% at 43.68% 51.85%, #F8F7FF 0%, #F5F5FD 100%);
  --hover-4: radial-gradient(116.24% 353.74% at 38.21% 28.17%, #FFF2FC 0%, #FEEFF4 100%);
  --hover-5: radial-gradient(116.24% 353.74% at 38.21% 28.17%, #F3F2FF 0%, #EFFBFE 100%);
  --hover-6: radial-gradient(116.24% 353.74% at 38.21% 28.17%, #FCF2FF 0%, #EFEFFE 100%);
  --hover-7: radial-gradient(116.24% 353.74% at 38.21% 28.17%, #FFF4ED 0%, #FFEFEE 100%);
}

/* Section spacing with responsive padding */
.section-spacing {
  padding-top: 120px;
  padding-bottom: 120px;
}

@media only screen and (max-width: 1919px) {
  .section-spacing {
    padding-top: 100px;
    padding-bottom: 100px;
  }
}

@media only screen and (max-width: 1399px) {
  .section-spacing {
    padding-top: 80px;
    padding-bottom: 80px;
  }
}

@media only screen and (max-width: 1199px) {
  .section-spacing {
    padding-top: 60px;
    padding-bottom: 60px;
  }
}

.section-spacing-top {
  padding-top: 120px;
}

@media only screen and (max-width: 1919px) {
  .section-spacing-top {
    padding-top: 100px;
  }
}

@media only screen and (max-width: 1399px) {
  .section-spacing-top {
    padding-top: 80px;
  }
}

@media only screen and (max-width: 1199px) {
  .section-spacing-top {
    padding-top: 60px;
  }
}

.section-spacing-bottom {
  padding-bottom: 120px;
}

@media only screen and (max-width: 1919px) {
  .section-spacing-bottom {
    padding-bottom: 100px;
  }
}

@media only screen and (max-width: 1399px) {
  .section-spacing-bottom {
    padding-bottom: 80px;
  }
}

@media only screen and (max-width: 1199px) {
  .section-spacing-bottom {
    padding-bottom: 60px;
  }
}

.ui-container-1330 {
  max-width: 1330px;
}

.section-subtitle {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  padding: 7px 15px;
  border: 1px solid #CD9CF2;
  border-radius: 100px;
}

.section-subtitle .shape {
  display: inline-flex;
}

.section-subtitle .gr-text {
  font-weight: 500;
  font-size: 14px;
  line-height: 1;
  text-transform: capitalize;
  background: linear-gradient(90deg, #666666 0%, #000000 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
}

.ai-section-title {
  font-family: var(--ff-inter-tight);
  font-weight: 500;
  font-size: 48px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-transform: none;
}

@media only screen and (max-width: 1199px) {
  .ai-section-title {
    font-size: 42px;
  }
}

@media only screen and (max-width: 991px) {
  .ai-section-title {
    font-size: 38px;
  }
}

@media only screen and (max-width: 767px) {
  .ai-section-title {
    font-size: 34px;
  }
}

@media (max-width: 575px) {
  .ai-section-title {
    font-size: 32px;
  }
}

.site-wrapper {
  position: relative;
}

.ai-site-bg {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -1;
}

.ai-site-bg:before {
  position: absolute;
  width: 100%;
  height: 100%;
  background: #FFFFFF;
  top: 0;
  left: 0;
  content: "";
  z-index: -2;
}

.ai-site-bg img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.ai-border-line {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.ai-border-line .container {
  height: 100%;
}

.ai-border-line .line-wrapper {
  display: flex;
  justify-content: space-between;
  height: 100%;
}

.ai-border-line .line {
  height: 100%;
  width: 1px;
  background-color: #E5E4FF;
}

.ui-btn-group {
  display: inline-flex;
}

.ui-btn-group>*:nth-child(1) {
  transform: scale3d(0.5, 0.5, 1);
  margin-right: -46px;
  transition: all 0.3s;
}

.ui-btn-group>*:nth-child(2) {
  transform: scale3d(1, 1, 1);
  transition: all 0.3s;
}

.ui-btn-group>*:nth-child(3) {
  transform: scale3d(1, 1, 1);
  margin-left: 0;
  transition: all 0.3s;
}

.ui-btn-group:hover>*:nth-child(1) {
  transform: scale3d(1, 1, 1);
  margin-right: 0;
}

.ui-btn-group:hover>*:nth-child(2) {
  transform: scale3d(1, 1, 1);
}

.ui-btn-group:hover>*:nth-child(3) {
  transform: scale3d(0.5, 0.5, 1);
  margin-left: -46px;
}

.ui-btn-group .btn-text {
  font-weight: 500;
  font-size: 14px;
  line-height: 1;
  padding: 14px 18px;
  border: 1px solid transparent;
  border-radius: 100px;
  background: var(--hover-gradient) padding-box, var(--gradient) border-box;
  color: var(--color-white);
  transition: all 0.3s;
  z-index: 1;
  display: flex;
  justify-content: center;
}

.ui-btn-group .btn-icon {
  width: 44px;
  min-width: 44px;
  background: var(--hover-gradient) padding-box, var(--gradient) border-box;
  color: var(--color-white);
  font-size: 20px;
  border: 1px solid transparent;
  border-radius: 100px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  transition: all 0.3s;
}

.ui-btn-group .btn-icon i {
  transform: rotate(-45deg);
}

.ui-btn-group.ui-bg-white .btn-text {
  background: linear-gradient(90deg, #FFFFFF, #FFFFFF) padding-box, var(--hover-1) border-box;
  color: var(--color-black);
}

.ui-btn-group.ui-bg-white .btn-icon {
  background: linear-gradient(90deg, #FFFFFF, #FFFFFF) padding-box, var(--hover-1) border-box;
  color: var(--color-black);
}

.ui-btn-group.bordered .btn-text {
  background: linear-gradient(90deg, #FFFFFF, #FFFFFF) padding-box, linear-gradient(90deg, rgba(0, 0, 0, 0.1019607843), rgba(0, 0, 0, 0.1019607843)) border-box;
  color: var(--color-black);
}

.ui-btn-group.bordered .btn-icon {
  background: linear-gradient(90deg, #FFFFFF, #FFFFFF) padding-box, linear-gradient(90deg, rgba(0, 0, 0, 0.1019607843), rgba(0, 0, 0, 0.1019607843)) border-box;
  color: var(--color-black);
}

.ui-btn-underline {
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  color: var(--color-black);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding-bottom: 1px;
  white-space: nowrap;
}

.ui-btn-underline:hover {
  color: var(--color-black);
}

.ui-btn-underline:hover::before {
  width: 0;
}

.ui-btn-underline:hover i {
  rotate: 0deg;
}

.ui-btn-underline::before {
  position: absolute;
  content: "";
  inset-inline-start: 0;
  bottom: 0px;
  width: 100%;
  height: 1px;
  background-color: currentColor;
  transition: 0.3s;
}

.ui-btn-underline .icon {
  display: flex;
}

.ui-btn-underline i {
  font-size: 17px;
  font-weight: 400;
  transition: all 0.3s;
}

.text-btn {
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  color: var(--color-black);
}

/* header-2-top style  */
.header-2-top {
  background: linear-gradient(180deg, #4B4B4B 0%, #0E0E11 100%);
  padding: 13px 0;
  position: relative;
  z-index: 9 !important;
}

.header-2-top-text {
  font-family: var(--ff-inter-tight);
  font-weight: 500;
  font-size: 14px;
  line-height: 1;
  text-transform: capitalize;
  color: var(--color-white);
  text-align: center;
}

.header-2-top-text .percentage {
  background: linear-gradient(180deg, #CD9CF2 0%, #F6F3FF 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
}

/* menu-2 style  */
.menu-2-area-inner {
  padding-inline: 20px;
  border-bottom: 1px solid #E5E4FF;
  padding-top: 10px;
  padding-bottom: 10px;
}

@media only screen and (max-width: 767px) {
  .menu-2-area-inner {
    padding-inline: 0;
  }
}

.menu-2 {
  padding: 0;
}

@media only screen and (max-width: 1199px) {
  .menu-2 .logo {
    width: 150px;
  }
}

.menu-2 .home-menu>li>a {
  color: var(--color-black);
  font-weight: 500;
}

.menu-2 .mainmenu li.has-child-menu>a::before {
  font-weight: 700;
}

.menu-2 .menu-btn-wrap {
  gap: 20px;
  align-items: center;
}

.menu-2 .mean-container a.meanmenu-reveal {
  padding: 5px;
  color: var(--color-black);
}

.menu-2 .mean-container a.meanmenu-reveal span {
  background: var(--color-black);
}

/* ai hero area style  */
.ai-hero-area-inner {
  padding-top: 237px;
  padding-bottom: 120px;
  padding-inline: 20px;
}

@media only screen and (max-width: 1919px) {
  .ai-hero-area-inner {
    padding-top: 187px;
  }
}

@media only screen and (max-width: 991px) {
  .ai-hero-area-inner {
    padding-top: 137px;
  }
}

@media only screen and (max-width: 767px) {
  .ai-hero-area-inner {
    padding-top: 97px;
    padding-inline: 0;
  }
}

.ai-hero-content {
  position: relative;
  z-index: 1;
  text-align: center;
}

.ai-hero-content .section-subtitle {
  background: linear-gradient(#EFEBFE, #EFEBFE) padding-box, var(--hover-1) border-box;
}

.ai-hero-content .title-wrapper {
  margin-top: 9px;
}

.ai-hero-content .text-wrapper {
  margin-top: 22px;
}

.ai-hero-content .text {
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  text-align: center;
  max-width: 575px;
  margin-inline: auto;
}

.ai-hero-content .ai-hero-apps-box {
  margin-top: 33px;
}

.ai-hero-content .btn-wrapper {
  margin-top: 60px;
  display: flex;
  gap: 20px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
}

@media only screen and (max-width: 767px) {
  .ai-hero-content .btn-wrapper {
    margin-top: 40px;
  }
}

.ai-hero-title {
  font-family: var(--ff-inter-tight);
  font-weight: 500;
  font-size: 80px;
  line-height: 1;
  letter-spacing: -0.02em;
  text-align: center;
  max-width: 840px;
  margin-inline: auto;
}

@media only screen and (max-width: 1399px) {
  .ai-hero-title {
    font-size: 60px;
    max-width: 740px;
  }
}

@media only screen and (max-width: 991px) {
  .ai-hero-title {
    font-size: 50px;
    max-width: 580px;
  }
}

@media only screen and (max-width: 767px) {
  .ai-hero-title {
    font-size: 40px;
    max-width: 480px;
  }
}

.ai-hero-title .title-shape-1 {
  width: 60px;
  height: 60px;
  display: inline-flex;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 10px;
}

@media only screen and (max-width: 1199px) {
  .ai-hero-title .title-shape-1 {
    width: 50px;
    height: 50px;
  }
}

@media only screen and (max-width: 991px) {
  .ai-hero-title .title-shape-1 {
    width: 40px;
    height: 40px;
  }
}

@media only screen and (max-width: 767px) {
  .ai-hero-title .title-shape-1 {
    width: 35px;
    height: 35px;
  }
}

.ai-hero-title .gradient {
  color: #C982FF;
}

.hero-shape-1 {
  position: absolute;
  z-index: -1;
  top: -34px;
  left: 50%;
  transform: translateX(-50%);
  width: -moz-max-content;
  width: max-content;
  max-width: 100%;
}

.hero-shape-2 {
  position: absolute;
  top: 333px;
  left: 141px;
  z-index: -1;
  animation: anima-trasform-y-one 3s ease infinite alternate;
}

@media only screen and (max-width: 991px) {
  .hero-shape-2 {
    left: 91px;
  }
}

@media only screen and (max-width: 767px) {
  .hero-shape-2 {
    display: none;
  }
}

@keyframes anima-trasform-y-one {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(-30px);
  }
}

.hero-shape-3 {
  position: absolute;
  top: 219px;
  right: 99px;
  z-index: -1;
  animation: slide_2 15s ease-in-out alternate infinite;
}

@media only screen and (max-width: 991px) {
  .hero-shape-3 {
    top: 269px;
    right: 49px;
  }
}

@media only screen and (max-width: 767px) {
  .hero-shape-3 {
    display: none;
  }
}

.hero-shape-4 {
  position: absolute;
  width: 845px;
  height: 845px;
  left: 50%;
  transform: translateX(-50%);
  top: -325px;
  background: linear-gradient(180deg, rgba(230, 218, 255, 0.5) 0%, rgba(255, 255, 255, 0.5) 100%);
  filter: blur(300px);
  z-index: -2;
  max-width: 100%;
}

.ai-hero-apps-links {
  display: flex;
  justify-content: center;
}

.ai-hero-apps-links>*:not(:first-child) {
  margin-left: -6px;
}

.ai-hero-apps-links a {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid transparent;
  border-radius: 100px;
  background: linear-gradient(white, white) padding-box, linear-gradient(90deg, #262626, #BEBEBE) border-box;
}

/* brand area style  */
.brand-area {
  position: relative;
  z-index: 1;
}

.brand-area-inner {
  padding-inline: 20px;
}

@media only screen and (max-width: 767px) {
  .brand-area-inner {
    padding-inline: 0;
  }
}

.brand-header .text {
  font-weight: 500;
  font-size: 14px;
  line-height: 1;
  text-align: center;
  text-transform: capitalize;
  color: var(--color-black);
}

.brands-wrapper-box {
  margin-top: 40px;
}

.brand-slider-active .swiper-wrapper {
  transition-timing-function: linear !important;
  align-items: center;
}

.brand-slider-active .swiper-slide {
  width: auto;
  display: inline-flex;
}

.brand-box {
  display: inline-flex;
}

/* service area style  */
.service-area {
  position: relative;
  z-index: 1;
}

.service-area-inner {
  border-top: 1px solid #E5E4FF;
  padding-inline: 20px;
}

@media only screen and (max-width: 767px) {
  .service-area-inner {
    padding-inline: 0;
  }
}

.service-header .title-wrapper {
  margin-top: 11px;
}

.service-header .ai-section-title {
  max-width: 470px;
}

.services-wrapper-box {
  margin-top: 61px;
}

@media only screen and (max-width: 1199px) {
  .services-wrapper-box {
    margin-top: 41px;
  }
}

.services-wrapper {
  display: grid;
  gap: 20px;
  position: relative;
  z-index: 1;
}

.services-wrapper:before {
  position: absolute;
  content: "";
  width: 845px;
  height: 845px;
  left: 50%;
  transform: translateX(-50%);
  top: calc(100% - 284px);
  background: linear-gradient(180deg, rgba(228, 255, 202, 0.5) 0%, rgba(245, 241, 255, 0.5) 100%);
  filter: blur(300px);
  z-index: -1;
  max-width: 100%;
}

.services-wrapper>*:nth-child(1) .content-bg {
  background: radial-gradient(116.24% 353.74% at 38.21% 28.17%, #FFF4ED 0%, #FFEFEE 100%);
}

.services-wrapper>*:nth-child(1) .ui-btn-group .btn-text {
  background: linear-gradient(90deg, #FAEFE9, #FAEFE9) padding-box, var(--hover-1) border-box;
  color: var(--color-black);
}

.services-wrapper>*:nth-child(1) .ui-btn-group .btn-icon {
  background: linear-gradient(90deg, #FAEFE9, #FAEFE9) padding-box, var(--hover-1) border-box;
  color: var(--color-black);
}

.services-wrapper>*:nth-child(1) .thumb {
  background: radial-gradient(48.15% 268.71% at 43.68% 51.85%, #E7E4FF 0%, #F2E3FF 100%);
}

.services-wrapper>*:nth-child(2) .content-bg {
  background: radial-gradient(116.24% 353.74% at 38.21% 28.17%, #F8DDFF 0%, #DEDEFF 100%);
}

.services-wrapper>*:nth-child(2) .ui-btn-group .btn-text {
  background: linear-gradient(90deg, #F0DAFA, #F0DAFA) padding-box, var(--hover-1) border-box;
  color: var(--color-black);
}

.services-wrapper>*:nth-child(2) .ui-btn-group .btn-icon {
  background: linear-gradient(90deg, #F0DAFA, #F0DAFA) padding-box, var(--hover-1) border-box;
  color: var(--color-black);
}

.services-wrapper>*:nth-child(2) .thumb {
  background: radial-gradient(48.15% 268.71% at 43.68% 51.85%, #FFE7F0 0%, #E7E7FF 100%);
}

.services-wrapper>*:nth-child(3) .content-bg {
  background: radial-gradient(116.24% 353.74% at 38.21% 28.17%, #E2DDFF 0%, #D8F8FF 100%);
}

.services-wrapper>*:nth-child(3) .ui-btn-group .btn-text {
  background: linear-gradient(90deg, #DDDEFA, #DDDEFA) padding-box, var(--hover-1) border-box;
  color: var(--color-black);
}

.services-wrapper>*:nth-child(3) .ui-btn-group .btn-icon {
  background: linear-gradient(90deg, #DDDEFA, #DDDEFA) padding-box, var(--hover-1) border-box;
  color: var(--color-black);
}

.services-wrapper>*:nth-child(3) .thumb {
  background: radial-gradient(48.15% 268.71% at 43.68% 51.85%, #F4E6FF 0%, #F1F0FF 100%);
}

.services-wrapper>*:nth-child(4) .content-bg {
  background: radial-gradient(116.24% 353.74% at 38.21% 28.17%, #FFE2F9 0%, #FAE0E8 100%);
}

.services-wrapper>*:nth-child(4) .ui-btn-group .btn-text {
  background: linear-gradient(90deg, #F9DDF1, #F9DDF1) padding-box, var(--hover-1) border-box;
  color: var(--color-black);
}

.services-wrapper>*:nth-child(4) .ui-btn-group .btn-icon {
  background: linear-gradient(90deg, #F9DDF1, #F9DDF1) padding-box, var(--hover-1) border-box;
  color: var(--color-black);
}

.services-wrapper>* .thumb {
  background: var(--hover-3);
}

.ai-service-box {
  background-color: var(--color-white);
  border-radius: 20px;
  padding: 4px;
  display: grid;
  gap: 4px;
  grid-template-columns: 513px 1fr;
  position: relative;
  will-change: transform, opacity;
}

@media only screen and (max-width: 1199px) {
  .ai-service-box {
    grid-template-columns: 413px 1fr;
  }
}

@media only screen and (max-width: 991px) {
  .ai-service-box {
    grid-template-columns: 313px 1fr;
  }
}

@media only screen and (max-width: 767px) {
  .ai-service-box {
    grid-template-columns: 1fr;
  }
}

.ai-service-box .content-wrapper {
  position: relative;
  z-index: 1;
  padding: 25px 46px 46px;
}

@media only screen and (max-width: 1199px) {
  .ai-service-box .content-wrapper {
    padding: 15px 26px 26px;
  }
}

@media only screen and (max-width: 767px) {
  .ai-service-box .content-wrapper {
    padding: 5px 16px 16px;
  }
}

.ai-service-box .content-bg {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: radial-gradient(116.24% 353.74% at 38.21% 28.17%, #FFF4ED 0%, #FFEFEE 100%);
  border-radius: 16px;
  z-index: -1;
}

.ai-service-box .content-bg img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.ai-service-box .number {
  font-weight: 700;
  font-size: 80px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  background: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-stroke: 1px rgba(0, 0, 0, 0.1);
  color: transparent;
  display: inline-block;
}

@media only screen and (max-width: 1199px) {
  .ai-service-box .number {
    font-size: 60px;
  }
}

@media only screen and (max-width: 767px) {
  .ai-service-box .number {
    font-size: 50px;
  }
}

.ai-service-box .content {
  margin-top: 231px;
}

@media only screen and (max-width: 1399px) {
  .ai-service-box .content {
    margin-top: 131px;
  }
}

@media only screen and (max-width: 991px) {
  .ai-service-box .content {
    margin-top: 51px;
  }
}

.ai-service-box .title {
  font-family: var(--ff-inter-tight);
  font-weight: 500;
  font-size: 32px;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

@media only screen and (max-width: 1199px) {
  .ai-service-box .title {
    font-size: 26px;
  }
}

.ai-service-box .text {
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  color: #555555;
  margin-top: 13px;
}

.ai-service-box .ui-btn-group {
  margin-top: 33px;
}

.ai-service-box .thumb {
  background: radial-gradient(48.15% 268.71% at 43.68% 51.85%, #F8F7FF 0%, #F5F5FD 100%);
  border-radius: 16px;
  padding: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
}

@media only screen and (max-width: 767px) {
  .ai-service-box .thumb {
    padding: 16px;
  }
}

.ai-service-box .thumb img,
.ai-service-box .thumb svg {
  max-width: 100%;
  height: auto;
  overflow: visible;
}

/* process area style  */
.process-area {
  position: relative;
  z-index: 1;
}

.process-area-inner {
  border-top: 1px solid #E5E4FF;
  padding-inline: 20px;
}

@media only screen and (max-width: 767px) {
  .process-area-inner {
    padding-inline: 0;
  }
}

.process-header {
  text-align: center;
}

.process-header .title-wrapper {
  margin-top: 11px;
}

.process-header .ai-section-title {
  max-width: 470px;
  margin-inline: auto;
}

.process-wrapper-box {
  margin-top: 61px;
}

@media only screen and (max-width: 1199px) {
  .process-wrapper-box {
    margin-top: 41px;
  }
}

.process-wrapper {
  display: grid;
  gap: 20px;
  justify-content: center;
}

.process-box {
  position: relative;
  z-index: 1;
  max-width: 580px;
  background: #FFE7D7;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  padding: 16px 39px 39px;
}

@media only screen and (max-width: 991px) {
  .process-box {
    padding: 6px 19px 19px;
  }
}

@media only screen and (max-width: 767px) {
  .process-box {
    padding: 16px 19px 19px;
  }
}

.process-box .number {
  font-weight: 700;
  font-size: 120px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  background: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-stroke: 1px rgba(0, 0, 0, 0.1);
  color: transparent;
  display: inline-block;
}

@media only screen and (max-width: 1919px) {
  .process-box .number {
    font-size: 80px;
  }
}

@media only screen and (max-width: 1399px) {
  .process-box .number {
    font-size: 50px;
  }
}

.process-box .thumb {
  position: absolute;
  top: 39px;
  right: 39px;
  z-index: -1;
}

@media only screen and (max-width: 991px) {
  .process-box .thumb {
    top: 19px;
    right: 19px;
  }
}

.process-box .thumb img {
  height: 222px;
}

@media only screen and (max-width: 1919px) {
  .process-box .thumb img {
    height: 122px;
  }
}

@media only screen and (max-width: 1399px) {
  .process-box .thumb img {
    height: 92px;
  }
}

@media only screen and (max-width: 767px) {
  .process-box .thumb img {
    height: 72px;
  }
}

.process-box .content {
  margin-top: 246px;
}

@media only screen and (max-width: 1919px) {
  .process-box .content {
    margin-top: 146px;
  }
}

@media only screen and (max-width: 1399px) {
  .process-box .content {
    margin-top: 96px;
  }
}

.process-box .title {
  font-family: var(--ff-inter-tight);
  font-weight: 500;
  font-size: 40px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--color-black);
}

@media only screen and (max-width: 991px) {
  .process-box .title {
    font-size: 35px;
  }
}

@media only screen and (max-width: 767px) {
  .process-box .title {
    font-size: 30px;
  }
}

.process-box .text {
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  margin-top: 10px;
  color: #555555;
}

.process-box .tools-list {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 43px;
}

.process-box .tool {
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  color: var(--color-black);
  display: inline-flex;
  padding: 7px 15px;
  border: 1px solid rgba(7, 7, 7, 0.14);
  border-radius: 100px;
}

.process-box.bg-2 {
  background: #FFC5F2;
}

.process-box.bg-3 {
  background: #DDD8FF;
}

.process-box.bg-4 {
  background: #F9E2FF;
}

.process-box.bg-5 {
  background: #FFE3F9;
}

/* about area style  */
.about-area-inner {
  border-top: 1px solid #E5E4FF;
  padding-inline: 20px;
  display: grid;
  gap: 11px 60px;
  grid-template-columns: 1fr 695px;
  position: relative;
  z-index: 1;
}

@media only screen and (max-width: 991px) {
  .about-area-inner {
    grid-template-columns: 1fr;
  }
}

@media only screen and (max-width: 767px) {
  .about-area-inner {
    padding-inline: 0;
  }
}

.about-area-inner:before {
  position: absolute;
  width: 845px;
  height: 845px;
  left: 50%;
  transform: translateX(-50%);
  top: calc(100% - 324px);
  background: radial-gradient(116.24% 353.74% at 38.21% 28.17%, #FFF4ED 0%, #FFEFEE 100%);
  opacity: 0.5;
  filter: blur(300px);
  content: "";
  max-width: 100%;
  z-index: -1;
}

.about-content {
  margin-top: -6px;
}

.about-content .ai-section-title .title-shape-1 {
  overflow: hidden;
  display: inline-flex;
}

.about-content .ai-section-title .title-shape-1 img {
  width: 40px;
  height: 40px;
  border-radius: 100px;
}

@media only screen and (max-width: 1199px) {
  .about-content .ai-section-title .title-shape-1 img {
    width: 35px;
    height: 35px;
  }
}

@media only screen and (max-width: 991px) {
  .about-content .ai-section-title .title-shape-1 img {
    width: 30px;
    height: 30px;
  }
}

@media only screen and (max-width: 767px) {
  .about-content .ai-section-title .title-shape-1 img {
    width: 25px;
    height: 25px;
  }
}

.about-content .ai-section-title .title-shape-2 {
  overflow: hidden;
  display: inline-flex;
}

.about-content .ai-section-title .title-shape-2 img {
  width: 90px;
  height: 40px;
  border-radius: 100px;
}

@media only screen and (max-width: 1199px) {
  .about-content .ai-section-title .title-shape-2 img {
    width: 80px;
    height: 35px;
  }
}

@media only screen and (max-width: 991px) {
  .about-content .ai-section-title .title-shape-2 img {
    width: 70px;
    height: 30px;
  }
}

@media only screen and (max-width: 767px) {
  .about-content .ai-section-title .title-shape-2 img {
    width: 60px;
    height: 25px;
  }
}

.about-content .text {
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  color: #555555;
}

.about-content .text-wrapper {
  margin-top: 24px;
}

.about-content .btn-wrapper {
  margin-top: 53px;
}

.counter-wrapper-box {
  margin-top: 80px;
  border-top: 1px solid #E5E4FF;
  padding-top: 39px;
}

.counter-wrapper {
  display: grid;
  gap: 30px 60px;
  grid-template-columns: auto auto auto;
  justify-content: space-between;
}

@media only screen and (max-width: 767px) {
  .counter-wrapper {
    grid-template-columns: auto auto;
  }
}

@media (max-width: 575px) {
  .counter-wrapper {
    grid-template-columns: auto;
  }
}

.counter-box .number {
  font-family: var(--ff-inter-tight);
  font-weight: 600;
  font-size: 80px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--color-black);
  display: inline-flex;
  align-items: center;
}

@media only screen and (max-width: 767px) {
  .counter-box .number {
    font-size: 60px;
  }
}

.counter-box .number .icon {
  background: linear-gradient(180deg, #CD9CF2 0%, #F6F3FF 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
}

.counter-box .text {
  font-weight: 400;
  font-size: 16px;
  line-height: 1;
  color: #555555;
  margin-top: 7px;
}

/* use area style  */
.use-area {
  position: relative;
  z-index: 1;
}

.use-area-inner {
  border-top: 1px solid #E5E4FF;
  padding-inline: 20px;
}

@media only screen and (max-width: 767px) {
  .use-area-inner {
    padding-inline: 0;
  }
}

.use-header .title-wrapper {
  margin-top: 11px;
}

.use-header .ai-section-title {
  max-width: 520px;
}

.use-wrapper-box {
  margin-top: 61px;
}

@media only screen and (max-width: 1199px) {
  .use-wrapper-box {
    margin-top: 41px;
  }
}

.use-wrapper {
  display: grid;
  gap: 14px 14px;
  grid-template-columns: repeat(3, 1fr);
}

@media only screen and (max-width: 1199px) {
  .use-wrapper {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media only screen and (max-width: 767px) {
  .use-wrapper {
    grid-template-columns: repeat(1, 1fr);
  }
}

.use-box {
  background: linear-gradient(180deg, #F8EEFF 0%, #FEFEFF 100%);
  border: 2px solid #FFFFFF;
  border-radius: 10px;
  padding: 24px 29px 26px;
  display: grid;
  gap: 24px 18px;
  grid-template-columns: 34px 1fr;
}

@media (max-width: 575px) {
  .use-box {
    grid-template-columns: 1fr;
    padding: 14px 19px 16px;
  }
}

.use-box .thumb {
  margin-top: 5px;
}

.use-box .title {
  font-family: var(--ff-inter-tight);
  font-weight: 500;
  font-size: 24px;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.use-box .text {
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  color: #555555;
  margin-top: 9px;
}

.use-box .ui-btn {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  transition: all 0.3s;
  margin-top: 21px;
}

.use-box .ui-btn:hover {
  gap: 8px;
}

.use-box .ui-btn .btn-text {
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  text-transform: capitalize;
  color: var(--color-black);
}

.use-box .ui-btn .btn-icon {
  display: inline-flex;
}

.use-box .ui-btn .btn-icon i {
  font-size: 20px;
  line-height: 1;
  color: var(--color-black);
}

/* pricing area style  */
.pricing-area-inner {
  border-top: 1px solid #E5E4FF;
  padding-inline: 20px;
}

@media only screen and (max-width: 767px) {
  .pricing-area-inner {
    padding-inline: 0;
  }
}

.pricing-header {
  text-align: center;
}

.pricing-header .title-wrapper {
  margin-top: 11px;
}

.pricing-header .ai-section-title {
  max-width: 500px;
  margin-inline: auto;
}

.pricing-tabs-wrapper {
  margin-top: 41px;
}

.pricing-tabs-wrapper .toggle-content {
  margin-top: 45px;
}

.ui-toggle_switcher .slide-toggle-wrapper {
  display: flex;
  justify-content: center;
}

.ui-toggle_switcher .slide-toggle-btn {
  --switcher-width: 70px;
  --switcher-border-width: 1px;
  --switcher-indicator-width: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.ui-toggle_switcher .slide-toggle-btn input {
  display: none;
}

.ui-toggle_switcher .before_label,
.ui-toggle_switcher .after_label {
  cursor: pointer;
  font-family: var(--ff-inter-tight);
  font-weight: 500;
  font-size: 14px;
  color: #555555;
}

.ui-toggle_switcher .before_label .discount,
.ui-toggle_switcher .after_label .discount {
  padding: 4px 8px;
  display: inline-flex;
  border-radius: 100px;
  margin-left: 8px;
  background-color: #EFDBFF;
}

.ui-toggle_switcher .before_label .discount .text,
.ui-toggle_switcher .after_label .discount .text {
  font-family: var(--ff-inter-tighr);
  font-weight: 500;
  font-size: 10px;
  line-height: 1.2;
  text-transform: capitalize;
  color: var(--color-black);
}

.ui-toggle_switcher .toggle-pane {
  display: none;
}

.ui-toggle_switcher .toggle-pane.show {
  display: block;
}

.ui-toggle_switcher .switcher {
  display: inline-block;
  width: var(--switcher-width);
  height: 30px;
  background: linear-gradient(90deg, #FFFFFF, #FFFFFF) padding-box, linear-gradient(90deg, #262626, #BEBEBE) border-box;
  border: var(--switcher-border-width) solid transparent;
  border-radius: 100px;
  position: relative;
  cursor: pointer;
  backdrop-filter: blur(2.5px);
}

.ui-toggle_switcher .switcher::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 5px;
  width: var(--switcher-indicator-width);
  height: var(--switcher-indicator-width);
  background-color: #ffffff;
  border-radius: 50%;
  transition: transform 0.3s;
  transform: translate(0px, -50%);
  background: linear-gradient(90deg, #000000 0%, #666666 100%);
}

.ui-toggle_switcher input:checked+.switcher::before {
  transform: translate(calc(var(--switcher-width) - (var(--switcher-indicator-width) + 12 * var(--switcher-border-width))), -50%);
}

.pricing-wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  justify-content: center;
  gap: 30px;
  position: relative;
  z-index: 2;
}

.pricing-wrapper:before {
  position: absolute;
  width: 845px;
  height: 845px;
  left: 50%;
  transform: translateX(-50%);
  top: calc(100% - 233px);
  background: radial-gradient(116.24% 353.74% at 38.21% 28.17%, #FFF2FC 0%, #FEEFF4 100%);
  opacity: 0.5;
  filter: blur(300px);
  content: "";
  z-index: -1;
  max-width: 100%;
}

.pricing-box {
  position: relative;
  border: 1px solid transparent;
  background: linear-gradient(#FFFFFF, #FFFFFF) padding-box, var(--hover-1) border-box;
  backdrop-filter: blur(2.5px);
  border-radius: 10px;
  padding: 29px 29px 39px;
}

@media only screen and (max-width: 1199px) {
  .pricing-box {
    padding: 19px 19px 29px;
  }
}

.pricing-box .title {
  font-family: var(--font-inter-tight);
  font-weight: 500;
  font-size: 14px;
  line-height: 1;
  padding: 7px 15px;
  border-radius: 100px;
  color: var(--color-black);
  display: inline-block;
  border: 1px solid transparent;
  background: linear-gradient(#FFFFFF, #FFFFFF) padding-box, var(--hover-1) border-box;
}

.pricing-box .price {
  font-family: var(--ff-inter-tight);
  font-weight: 500;
  font-size: 48px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--color-black);
  margin-top: 15px;
}

@media (max-width: 575px) {
  .pricing-box .price {
    font-size: 38px;
  }
}

.pricing-box .price span {
  font-weight: 500;
  font-size: 16px;
  line-height: 1.1;
  letter-spacing: 0px;
}

.pricing-box .text {
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  color: #555555;
  margin-top: 2px;
}

.pricing-box .btn-wrapper {
  margin-top: 23px;
}

.pricing-box .ui-btn-group {
  width: 100%;
}

.pricing-box .ui-btn-group .btn-text {
  width: 100%;
}

.pricing-box .feature-heading {
  font-size: 14px;
  line-height: 1;
  color: #555555;
  padding-top: 28px;
  border-top: 1px solid rgba(0, 0, 0, 0.1019607843);
  margin-top: 30px;
}

.pricing-box .feature-list {
  margin-top: 28px;
  margin-bottom: 0;
  padding-left: 0;
}

.pricing-box .feature-list li {
  font-family: var(--ff-inter-tight);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-black);
  display: flex;
  gap: 10px;
  margin-top: 14px;
}

.pricing-box .feature-list li .icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  background: linear-gradient(180deg, #CD9CF2 0%, #F6F3FF 100%);
  border-radius: 10px;
  color: var(--color-white);
  font-size: 16px;
  margin-top: 2px;
}

.pricing-box .tag-popular {
  font-weight: 500;
  font-size: 14px;
  line-height: 1;
  text-align: center;
  text-transform: capitalize;
  display: inline-flex;
  gap: 4px;
  align-items: center;
  padding: 7px 11px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: -15px;
  border: 1px solid transparent;
  background: linear-gradient(#EFDBFF, #EFDBFF) padding-box, var(--hover-1) border-box;
  border-radius: 100px;
  color: var --color-black;
}

.pricing-box .shape-1 {
  position: absolute;
  top: 19px;
  right: 19px;
  z-index: -1;
}

/* team area style  */
.team-area {
  position: relative;
  z-index: 2;
}

.team-area-inner {
  border-top: 1px solid #E5E4FF;
  padding-inline: 20px;
}

@media only screen and (max-width: 767px) {
  .team-area-inner {
    padding-inline: 0;
  }
}

.team-header {
  display: grid;
  gap: 20px 60px;
  grid-template-columns: 1fr auto;
  align-items: flex-end;
}

@media only screen and (max-width: 991px) {
  .team-header {
    grid-template-columns: 1fr;
  }
}

.team-header .title-wrapper {
  margin-top: 11px;
}

.team-header .ai-section-title {
  max-width: 470px;
}

.team-header .btn-wrapper {
  margin-bottom: 9px;
}

.team-wrapper-box {
  margin-top: 61px;
}

@media only screen and (max-width: 1199px) {
  .team-wrapper-box {
    margin-top: 41px;
  }
}

.team-wrapper {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(4, 1fr);
}

@media only screen and (max-width: 1199px) {
  .team-wrapper {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media only screen and (max-width: 767px) {
  .team-wrapper {
    grid-template-columns: repeat(1, 1fr);
  }
}

.team-box {
  background: var(--color-white);
  border-radius: 10px;
  padding: 4px;
}

.team-box:hover .thumb img {
  transform: scale(1.1);
}

.team-box .thumb {
  border-radius: 6px;
  overflow: hidden;
}

.team-box .thumb img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  transition: all 0.3s;
}

.team-box .content-wrapper {
  background: var(--hover-4);
  border-radius: 10px;
  margin-top: 4px;
  padding: 18px 20px 18px;
  display: grid;
  gap: 10px 20px;
  grid-template-columns: 1fr auto;
  align-items: center;
}

.team-box .social-link a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: #000000;
  border-radius: 6px;
  color: var(--color-white);
  transition: all 0.3s;
}

.team-box .social-link a:hover {
  background-color: var(--color-white);
  color: var(--color-black);
}

.team-box .name {
  font-family: var(--ff-inter-tight);
  font-weight: 500;
  font-size: 20px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--color-black);
}

.team-box .post {
  font-weight: 500;
  font-size: 14px;
  line-height: 1;
  text-transform: capitalize;
  color: #555555;
  display: inline-block;
  margin-top: 8px;
}

/* testimonial area style  */
.testimonial-area-inner {
  border-top: 1px solid #E5E4FF;
  padding-inline: 20px;
}

@media only screen and (max-width: 767px) {
  .testimonial-area-inner {
    padding-inline: 0;
  }
}

.testimonial-header {
  text-align: center;
}

.testimonial-header .title-wrapper {
  margin-top: 9px;
}

.testimonial-header .ai-section-title {
  font-size: 60px;
  max-width: 730px;
  margin-inline: auto;
}

@media only screen and (max-width: 1199px) {
  .testimonial-header .ai-section-title {
    font-size: 42px;
  }
}

@media only screen and (max-width: 991px) {
  .testimonial-header .ai-section-title {
    font-size: 38px;
  }
}

@media only screen and (max-width: 767px) {
  .testimonial-header .ai-section-title {
    font-size: 34px;
  }
}

@media (max-width: 575px) {
  .testimonial-header .ai-section-title {
    font-size: 30px;
  }
}

.testimonial-header .btn-wrapper {
  margin-top: 49px;
}

.testimonial-wrapper-box {
  padding-top: 61px;
}

@media only screen and (max-width: 1199px) {
  .testimonial-wrapper-box {
    padding-top: 41px;
  }
}

.testimonial-wrapper {
  display: flex;
  gap: 0 40px;
  flex-wrap: wrap;
  justify-content: center;
  position: relative;
}

.testimonial-wrapper>*:nth-child(2) {
  transform: rotate(-5deg);
  background: var(--hover-4);
}

.testimonial-wrapper>*:nth-child(3) {
  transform: rotate(5deg);
  background: var(--hover-5);
}

.testimonial-wrapper>*:nth-child(4) {
  transform: rotate(-5deg);
  background: var(--hover-7);
}

.testimonial-box-item {
  background: #EFDBFF;
  border-radius: 10px;
  padding: 40px 40px 40px;
  max-width: 500px;
  min-height: 451px;
  position: relative;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

@media only screen and (max-width: 1199px) {
  .testimonial-box-item {
    padding: 20px 30px 30px;
    max-width: 450px;
    min-height: 401px;
  }
}

@media (max-width: 575px) {
  .testimonial-box-item {
    padding: 10px 20px 20px;
    min-height: auto;
  }
}

.testimonial-box-item .rating-stars {
  display: inline-flex;
  gap: 5px;
}

.testimonial-box-item .rating-stars i {
  color: var(--color-black);
  font-size: 17px;
  line-height: 1;
}

.testimonial-box-item .text {
  font-weight: 500;
  font-size: 24px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--color-black);
}

@media only screen and (max-width: 1199px) {
  .testimonial-box-item .text {
    font-size: 22px;
  }
}

@media (max-width: 575px) {
  .testimonial-box-item .text {
    font-size: 20px;
  }
}

.testimonial-box-item .text-wrapper {
  margin-top: 27px;
}

.testimonial-box-item .author {
  margin-top: 84px;
  display: flex;
  gap: 10px;
}

@media (max-width: 575px) {
  .testimonial-box-item .author {
    margin-top: 54px;
  }
}

.testimonial-box-item .avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  overflow: hidden;
}

.testimonial-box-item .meta {
  margin-top: 9px;
}

.testimonial-box-item .name {
  font-family: var(--ff-inter-tight);
  font-weight: 500;
  font-size: 18px;
  line-height: 1;
  text-transform: capitalize;
  color: var(--color-black);
}

.testimonial-box-item .post {
  font-weight: 500;
  font-size: 14px;
  line-height: 1;
  text-transform: capitalize;
  display: inline-block;
  color: #555555;
  margin-top: 10px;
}

.testimonial-box-item .brand {
  position: absolute;
  right: 40px;
  bottom: 40px;
}

@media only screen and (max-width: 1199px) {
  .testimonial-box-item .brand {
    right: 30px;
    bottom: 30px;
  }
}

@media (max-width: 575px) {
  .testimonial-box-item .brand {
    right: 20px;
    bottom: 20px;
  }
}

/* faq area style  */
.faq-area-inner {
  border-top: 1px solid #E5E4FF;
  padding-inline: 20px;
  display: grid;
  gap: 40px 60px;
  grid-template-columns: 1fr 672px;
}

@media only screen and (max-width: 1199px) {
  .faq-area-inner {
    grid-template-columns: 1fr 572px;
  }
}

@media only screen and (max-width: 991px) {
  .faq-area-inner {
    grid-template-columns: 1fr;
  }
}

@media only screen and (max-width: 767px) {
  .faq-area-inner {
    padding-inline: 0;
  }
}

.faq-content .title-wrapper {
  margin-top: 11px;
}

.faq-content .ai-section-title {
  max-width: 410px;
}

.faq-content .btn-wrapper {
  margin-top: 51px;
}

.faq-accordion-wrapper .accordion {
  background-color: var(--color-white);
  padding: 4px;
  border-radius: 10px;
}

.faq-accordion-wrapper .accordion .accordion-button {
  font-family: var(--ff-inter-tight);
  font-size: 20px;
  line-height: 1.1;
  color: var(--color-black);
  padding-top: 19px;
  padding-bottom: 0;
  padding-inline-start: 19px;
  padding-inline-end: 19px;
  background-color: transparent;
  box-shadow: none;
  text-align: start;
  font-weight: 500;
}

@media only screen and (max-width: 1199px) {
  .faq-accordion-wrapper .accordion .accordion-button {
    padding-top: 16px;
    padding-inline-start: 14px;
    padding-inline-end: 14px;
    font-size: 18px;
  }
}

.faq-accordion-wrapper .accordion .accordion-button::after {
  content: "+";
  color: var(--color-black);
  background: var(--color-white);
  background-image: none;
  line-height: 1;
  width: 30px;
  height: 30px;
  font-size: 25px;
  margin-inline-start: 50px;
  margin-inline-start: auto;
  margin-inline-end: 0;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
}

.faq-accordion-wrapper .accordion .accordion-button:not(.collapsed) {
  pointer-events: none;
}

.faq-accordion-wrapper .accordion .accordion-button:not(.collapsed)::after {
  content: "-";
}

.faq-accordion-wrapper .accordion .accordion-button .number {
  margin-right: 10px;
  width: 29px;
}

.faq-accordion-wrapper .accordion .accordion-item {
  border: 1px solid transparent;
  background: var(--hover-2) padding-box, var(--hover-4) border-box;
  border-radius: 6px;
  padding-bottom: 23px;
}

@media only screen and (max-width: 1199px) {
  .faq-accordion-wrapper .accordion .accordion-item {
    padding-bottom: 12px;
  }
}

.faq-accordion-wrapper .accordion .accordion-item:not(:first-child) {
  margin-top: 4px;
}

.faq-accordion-wrapper .accordion .accordion-body {
  font-family: var(--ff-inter-tight);
  font-size: 16px;
  line-height: 1.6;
  padding-inline-start: 58px;
  padding-inline-end: 19px;
  padding-bottom: 0;
  padding-top: 7px;
  color: #555555;
}

@media only screen and (max-width: 1199px) {
  .faq-accordion-wrapper .accordion .accordion-body {
    padding-inline-start: 53px;
    padding-inline-end: 14px;
  }
}

/* cta area style  */
.cta-area-inner {
  padding-inline: 20px;
}

@media only screen and (max-width: 767px) {
  .cta-area-inner {
    padding-inline: 0;
  }
}

.cta-content {
  text-align: center;
  position: relative;
  z-index: 1;
  border: 1px solid #EFDBFF;
  border-radius: 20px;
  background: radial-gradient(116.24% 353.74% at 38.21% 28.17%, #F6D8FF 0%, #DBDBFF 100%);
  padding: 99px 20px 91px;
}

.cta-content .section-subtitle {
  background: transparent;
  border-color: rgba(0, 0, 0, 0.1);
}

.cta-content .title-wrapper {
  margin-top: 11px;
}

.cta-content .ai-section-title {
  max-width: 500px;
  margin-inline: auto;
}

@media only screen and (max-width: 991px) {
  .cta-content .ai-section-title {
    max-width: 400px;
  }
}

.cta-content .ai-section-title .title-shape-1 {
  display: inline-flex;
  margin-left: 8px;
  margin-right: 8px;
  transform: translateY(5px);
}

.cta-content .ai-section-title .title-shape-1 img {
  width: 40px;
  height: 40px;
  border-radius: 100px;
}

@media only screen and (max-width: 1199px) {
  .cta-content .ai-section-title .title-shape-1 img {
    width: 35px;
    height: 35px;
  }
}

@media only screen and (max-width: 991px) {
  .cta-content .ai-section-title .title-shape-1 img {
    width: 30px;
    height: 30px;
  }
}

@media only screen and (max-width: 767px) {
  .cta-content .ai-section-title .title-shape-1 img {
    width: 25px;
    height: 25px;
  }
}

.cta-content .text-wrapper {
  margin-top: 14px;
}

.cta-content .text {
  max-width: 456px;
  margin-inline: auto;
  font-size: 16px;
  line-height: 1.6;
  color: #555555;
}

.cta-content .btn-wrapper {
  margin-top: 53px;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: center;
  justify-content: center;
}

.cta-bg {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -1;
}

.cta-bg img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.video-btn {
  display: flex;
  gap: 10px;
  align-items: center;
}

.video-btn .btn-text {
  font-weight: 500;
  font-size: 14px;
  line-height: 1;
  text-transform: capitalize;
  background: var(--gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
  display: inline-flex;
}

.video-btn .btn-icon {
  width: 44px;
  height: 44px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border: 1px solid transparent;
  background: linear-gradient(#E9D2FF, #E9D2FF) padding-box, var(--gradient) border-box;
  border-radius: 50%;
}

.video-btn .btn-icon i {
  background: var(--gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
}

/* blog area style  */
.blog-area-inner {
  padding-inline: 20px;
}

@media only screen and (max-width: 767px) {
  .blog-area-inner {
    padding-inline: 0;
  }
}

.blog-header {
  display: grid;
  gap: 20px 60px;
  grid-template-columns: 1fr auto;
  align-items: flex-end;
}

@media only screen and (max-width: 991px) {
  .blog-header {
    grid-template-columns: 1fr;
  }
}

.blog-header .title-wrapper {
  margin-top: 11px;
}

.blog-header .ai-section-title {
  max-width: 475px;
}

.blog-header .btn-wrapper {
  margin-bottom: 9px;
}

.blog-wrapper-box {
  margin-top: 61px;
}

@media only screen and (max-width: 1199px) {
  .blog-wrapper-box {
    margin-top: 41px;
  }
}

.blog-wrapper {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(3, 1fr);
}

@media only screen and (max-width: 1199px) {
  .blog-wrapper {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media only screen and (max-width: 767px) {
  .blog-wrapper {
    grid-template-columns: repeat(1, 1fr);
  }
}

.blog {
  background-color: var(--color-white);
  border-radius: 10px;
  padding: 4px;
}

.blog:hover .thumb img {
  transform: scale(1.1);
}

.blog .thumb {
  border-radius: 6px;
  overflow: hidden;
  position: relative;
}

.blog .thumb img {
  width: 100%;
  transition: all 0.5s;
}

.blog .date {
  background-color: var(--color-white);
  border-radius: 6px;
  position: absolute;
  top: 10px;
  left: 10px;
  font-weight: 500;
  font-size: 32px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--color-black);
  text-align: center;
  width: 69px;
  height: 72px;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2px 0;
}

@media only screen and (max-width: 767px) {
  .blog .date {
    font-size: 26px;
    width: 59px;
    height: 62px;
  }
}

.blog .month {
  font-weight: 400;
  font-size: 16px;
  line-height: 1;
  text-align: center;
  letter-spacing: 0;
  color: #555555;
}

.blog .content {
  background-color: #F5E8FF;
  margin-top: 4px;
  border-radius: 6px;
  padding: 15px 20px 20px;
}

@media (max-width: 575px) {
  .blog .content {
    padding: 10px 10px 10px;
  }
}

.blog .title {
  font-family: var(--ff-inter-tight);
  font-weight: 500;
  font-size: 24px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--color-black);
}

@media (max-width: 575px) {
  .blog .title {
    font-size: 20px;
  }
}

.blog .name {
  font-weight: 500;
  font-size: 14px;
  line-height: 1;
  text-transform: capitalize;
  color: var(--color-black);
}

.blog .meta {
  display: flex;
  gap: 10px 14px;
  align-items: center;
  margin-top: 26px;
}

@media only screen and (max-width: 767px) {
  .blog .meta {
    margin-top: 16px;
  }
}

.blog .author {
  display: flex;
  gap: 6px;
  align-items: center;
}

.blog .avatar {
  overflow: hidden;
  min-width: 24px;
  display: inline-block;
}

.blog .avatar img {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  -o-object-fit: cover;
  object-fit: cover;
}

.blog .tag {
  font-weight: 500;
  font-size: 14px;
  line-height: 1;
  text-transform: capitalize;
  color: var(--color-black);
  display: flex;
  align-items: center;
}

.blog .tag:before {
  margin-right: 14px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gradient);
  content: "";
  display: inline-block;
}

/* footer area style  */
.ai-footer-widget-wrapper {
  padding-top: 120px;
  padding-bottom: 80px;
  display: grid;
  gap: 50px 100px;
  grid-template-columns: 1fr 220px auto auto;
  justify-content: space-between;
  padding-inline: 20px;
  border-top: 1px solid #E5E4FF;
}

@media only screen and (max-width: 1199px) {
  .ai-footer-widget-wrapper {
    grid-template-columns: 1fr 1fr;
    padding-top: 80px;
    padding-bottom: 60px;
  }
}

@media only screen and (max-width: 767px) {
  .ai-footer-widget-wrapper {
    grid-template-columns: 1fr;
    padding-inline: 0;
  }
}

.footer-logo img {
  width: 184px;
}

@media only screen and (max-width: 1199px) {
  .footer-logo img {
    width: 150px;
  }
}

.footer-text {
  margin-top: 17px;
}

.footer-text .text {
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  color: #555555;
  max-width: 304px;
}

.footer-social {
  margin-top: 71px;
}

@media only screen and (max-width: 1199px) {
  .footer-social {
    margin-top: 41px;
  }
}

.footer-social .title {
  font-weight: 500;
  font-size: 14px;
  line-height: 1;
  color: var(--color-black);
}

.footer-social-links {
  margin-top: 18px;
  display: flex;
  gap: 4px;
  align-items: center;
}

.footer-social-links a {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 16px;
  color: var(--color-black);
  display: inline-flex;
  justify-content: center;
  align-items: center;
  transition: all 0.3s;
  border: 1px solid transparent;
  background: var(--hover-2) padding-box, var(--hover-1) border-box;
}

.footer-social-links a:hover {
  color: var(--color-black);
  margin-top: -3px;
}

.footer-widget-title {
  font-family: var(--ff-inter-tight);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.1;
  color: var(--color-black);
  text-transform: capitalize;
  margin-top: -4px;
}

.footer-contact-list {
  margin-top: 30px;
  display: grid;
  gap: 12px;
  padding-left: 0;
  margin-bottom: 0;
}

.footer-contact-list li {
  list-style: none;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  color: #555555;
  display: inline-flex;
}

.footer-contact-list li a:hover {
  color: var(--color-black);
}

.footer-nav-list {
  margin-top: 30px;
  display: grid;
  gap: 12px;
  padding-left: 0;
  margin-bottom: 0;
}

.footer-nav-list li {
  list-style: none;
}

.footer-nav-list li a {
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  color: #555555;
  display: inline-flex;
}

.footer-nav-list li a:hover {
  color: var(--color-black);
}

.copyright-area-inner {
  border-top: 1px solid #E5E4FF;
  display: grid;
  gap: 10px 60px;
  grid-template-columns: auto auto;
  justify-content: space-between;
  align-items: center;
  padding-top: 18px;
  padding-bottom: 24px;
  padding-inline: 20px;
  border-bottom: 1px solid #E5E4FF;
}

@media only screen and (max-width: 767px) {
  .copyright-area-inner {
    grid-template-columns: auto;
    padding-inline: 0;
  }
}

.copyright-text .text {
  font-weight: 400;
  font-size: 14px;
  line-height: 1.6;
  color: #555555;
}

.copyright-text .text a {
  color: currentColor;
}

.copyright-text .text a:hover {
  color: var(--color-black);
}

.copyright-link {
  display: flex;
  gap: 5px 40px;
  flex-wrap: wrap;
  align-items: center;
}

.copyright-link a {
  font-weight: 400;
  font-size: 14px;
  line-height: 1.6;
  color: #555555;
  display: inline-block;
}

.copyright-link a:hover {
  color: var(--color-black);
}

/* story area style  */
.story-area {
  position: relative;
  z-index: 1;
}

.story-wrapper {
  display: flex;
  height: 100vh;
  width: 100%;
  justify-content: center;
  align-items: center;
}

@media only screen and (max-width: 991px) {
  .story-wrapper {
    height: auto;
    padding-top: 60px;
    padding-bottom: 60px;
  }
}

.story-video {
  width: 1300px;
  margin-inline: auto;
  border-radius: 600px;
  overflow: hidden;
  aspect-ratio: 100/50;
  position: relative;
}

@media only screen and (max-width: 991px) {
  .story-video {
    border-radius: 0;
  }
}

.story-video img,
.story-video video {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.story-video .text {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--ff-inter-tight);
  font-weight: 700;
  font-size: 200px;
  line-height: 1;
  text-align: center;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.14);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

@media only screen and (max-width: 1199px) {
  .story-video .text {
    font-size: 150px;
  }
}

@media only screen and (max-width: 991px) {
  .story-video .text {
    font-size: 100px;
  }
}

@media only screen and (max-width: 767px) {
  .story-video .text {
    font-size: 70px;
  }
}

@media (max-width: 575px) {
  .story-video .text {
    font-size: 50px;
  }
}

/* eq-bar animation  */
.eq-bar {
  transform-box: fill-box;
  transform-origin: bottom;
  animation: equalizer 0.8s infinite ease-in-out alternate;
}

@keyframes equalizer {
  0% {
    transform: scaleY(0.3);
  }

  25% {
    transform: scaleY(1);
  }

  50% {
    transform: scaleY(0.5);
  }

  75% {
    transform: scaleY(0.9);
  }

  100% {
    transform: scaleY(0.4);
  }
}

.eq-bar:nth-of-type(1) {
  animation-delay: 0s;
}

.eq-bar:nth-of-type(2) {
  animation-delay: 0.05s;
}

.eq-bar:nth-of-type(3) {
  animation-delay: 0.1s;
}

.eq-bar:nth-of-type(4) {
  animation-delay: 0.15s;
}

.eq-bar:nth-of-type(5) {
  animation-delay: 0.2s;
}

.eq-bar:nth-of-type(6) {
  animation-delay: 0.25s;
}

.eq-bar:nth-of-type(7) {
  animation-delay: 0.3s;
}

.eq-bar:nth-of-type(8) {
  animation-delay: 0.35s;
}

.eq-bar:nth-of-type(9) {
  animation-delay: 0.4s;
}

.eq-bar:nth-of-type(10) {
  animation-delay: 0.45s;
}

.eq-bar:nth-of-type(11) {
  animation-delay: 0.5s;
}

.eq-bar:nth-of-type(12) {
  animation-delay: 0.55s;
}

.eq-bar:nth-of-type(13) {
  animation-delay: 0.6s;
}

.eq-bar:nth-of-type(14) {
  animation-delay: 0.65s;
}

.eq-bar:nth-of-type(15) {
  animation-delay: 0.7s;
}

.eq-bar:nth-of-type(16) {
  animation-delay: 0.75s;
}

.eq-bar:nth-of-type(17) {
  animation-delay: 0.8s;
}

.eq-bar:nth-of-type(18) {
  animation-delay: 0.85s;
}

.eq-bar:nth-of-type(19) {
  animation-delay: 0.9s;
}

.eq-bar:nth-of-type(20) {
  animation-delay: 0.95s;
}

.eq-bar:nth-of-type(21) {
  animation-delay: 1s;
}

.eq-bar:nth-of-type(22) {
  animation-delay: 1.05s;
}

.eq-bar:nth-of-type(23) {
  animation-delay: 1.1s;
}

.eq-bar:nth-of-type(24) {
  animation-delay: 1.15s;
}

.eq-bar:nth-of-type(25) {
  animation-delay: 1.2s;
}

.eq-bar:nth-of-type(26) {
  animation-delay: 1.25s;
}

.eq-bar:nth-of-type(27) {
  animation-delay: 1.3s;
}

.eq-bar:nth-of-type(28) {
  animation-delay: 1.35s;
}

.eq-bar:nth-of-type(29) {
  animation-delay: 1.4s;
}

.eq-bar:nth-of-type(30) {
  animation-delay: 1.45s;
}

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


.br-10 {
  border-radius: 10px;
}

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

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

.listing li svg {
  min-width: 24px;
}


.menu-area {
  position: relative;
  width: 100%;
  z-index: 999;
  transition: all 0.4s ease;
}

.menu-area.sticky {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: #000000c9;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
  animation: slideDown 0.4s ease;
}

/* body.sticky-menu { */
/* padding-top: 90px; /* Menu height */
*/
/* } */

@keyframes slideDown {
  from {
    transform: translateY(-100%);
  }

  to {
    transform: translateY(0);
  }
}


.menu-logo-wrap img {
  height: 70px;
  transition: 0.3s;
}

.menu-area.sticky .menu-logo-wrap img {
  height: 55px;
}

.blog__tag a {
  color: #1d81c0;
}

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

.bg-slider {
  background: #070b19;
  width: 100%;
  overflow: hidden;
  display: block;
  position: relative;
  height: auto !important;
}

.abt-txt {
  color: #fff;
  font-size: 22px;
}

.testimonial-slide-top img {
  max-width: 300px;
}

.section_gap {
  padding: 80px 0px;
}

.ptb-50 {
  padding: 50px 0px !important;
}

.br-10 {
  border-radius: 10px;
}


/* =========================================
   NETRA KEY CAPABILITIES
========================================= */

.netra-capabilities {
  position: relative;
  padding: 0px 0px 80px;
  background: #00001d;
  overflow: hidden;
}

.netra-capabilities::before {
  content: "";
  position: absolute;
  width: 450px;
  height: 450px;
  right: -180px;
  top: -180px;
  border-radius: 50%;
  background: rgba(0, 194, 255, 0.07);
  filter: blur(80px);
}

.netra-capabilities .container {
  position: relative;
  z-index: 2;
}


/* =========================================
   HEADING
========================================= */

.section-heading {
  margin-bottom: 50px;
}

.section-heading span {
  display: inline-block;
  margin-bottom: 10px;
  color: #23aae1;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
}

.section-heading h2 {
  margin: 0;
  color: #ffffff;
  font-size: 36px;
  font-weight: 700;
}


/* =========================================
   CAPABILITY ITEM
========================================= */

.capability-item {
  position: relative;
  min-height: 130px;
  padding: 28px 60px 28px 28px;

  display: flex;
  align-items: center;
  gap: 22px;

  background: rgba(255, 255, 255, 0.035);

  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 18px;

  overflow: hidden;

  transition: all 0.5s ease;
}


/* Left glowing line */

.capability-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;

  width: 3px;
  height: 0;

  background: #23aae1;

  transition: height 0.5s ease;
}

.capability-item:hover::before {
  height: 100%;
}


/* Hover */

.capability-item:hover {
  transform: translateY(-8px);

  border-color: rgba(0, 217, 255, 0.45);

  background: rgba(0, 217, 255, 0.045);

  box-shadow:
    0 18px 40px rgba(0, 0, 0, 0.25),
    0 0 30px rgba(0, 217, 255, 0.06);
}


/* =========================================
   ICON
========================================= */

.capability-icon {
  flex: 0 0 62px;

  width: 62px;
  height: 62px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 15px;

  color: #23aae1;

  background: rgba(0, 217, 255, 0.08);

  border: 1px solid rgba(0, 217, 255, 0.2);

  transition: all 0.5s ease;
}

.capability-icon i {
  font-size: 27px;
  transition: transform 0.5s ease;
}

.capability-item:hover .capability-icon {
  background: #23aae1;
  color: #03151f;

  transform: rotate(-5deg);

  box-shadow:
    0 0 25px rgba(0, 217, 255, 0.3);
}

.capability-item:hover .capability-icon i {
  transform: scale(1.15);
}


/* =========================================
   TEXT
========================================= */

.capability-content h4 {
  margin: 0;

  color: #ffffff;

  font-size: 17px;
  font-weight: 600;
  line-height: 1.5;

  transition: color 0.4s ease;
}

.capability-item:hover .capability-content h4 {
  color: #23aae1;
}


/* =========================================
   NUMBER
========================================= */

.capability-number {
  position: absolute;
  right: 18px;
  top: 15px;

  color: rgba(255, 255, 255, 0.12);

  font-size: 28px;
  font-weight: 800;

  transition: all 0.5s ease;
}

.capability-item:hover .capability-number {
  color: rgba(0, 217, 255, 0.25);
  transform: translateY(-4px);
}


/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 991px) {

  .netra-capabilities {
    padding: 70px 0;
  }

  .section-heading h2 {
    font-size: 38px;
  }
}


@media (max-width: 767px) {

  .netra-capabilities {
    padding: 20px 0;
  }

  .section-heading {
    margin-bottom: 35px;
  }

  .section-heading h2 {
    font-size: 32px;
  }

  .capability-item {
    min-height: 110px;
    padding: 22px 50px 22px 22px;
    gap: 17px;
  }

  .capability-icon {
    flex: 0 0 55px;
    width: 55px;
    height: 55px;
  }

  .capability-icon i {
    font-size: 23px;
  }

  .capability-content h4 {
    font-size: 13px;
  }

  .capability-number {
    font-size: 23px;
    right: 13px;
  }
}


@media (max-width: 575px) {

  .section-heading h2 {
    font-size: 28px;
  }

  .capability-item {
    padding: 20px 45px 20px 18px;
  }
}


/* =========================================
   NETRA APPLICATIONS
========================================= */

.netra-applications {
  position: relative;
  padding: 80px 0;
  background: #03151f;
  overflow: hidden;
}

.netra-applications::before {
  content: "";
  position: absolute;
  width: 450px;
  height: 450px;
  left: -180px;
  bottom: -200px;
  border-radius: 50%;
  background: rgba(0, 194, 255, 0.07);
  filter: blur(80px);
}

.netra-applications .container {
  position: relative;
  z-index: 2;
}


/* =========================================
   HEADING
========================================= */

.netra-applications .section-heading {
  margin-bottom: 50px;
}

.netra-applications .section-heading span {
  display: inline-block;
  margin-bottom: 10px;

  color: #23aae1;

  font-size: 12px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
}

.netra-applications .section-heading h2 {
  margin: 0;

  color: #ffffff;

  font-size: 36px;
  font-weight: 700;
}


/* =========================================
   APPLICATION ITEM
========================================= */

.application-item {
  position: relative;

  min-height: 130px;

  padding: 28px 60px 28px 28px;

  display: flex;
  align-items: center;
  gap: 22px;

  background: rgba(255, 255, 255, 0.035);

  border: 1px solid rgba(255, 255, 255, 0.09);

  border-radius: 18px;

  overflow: hidden;

  transition:
    transform 0.5s ease,
    border-color 0.5s ease,
    background 0.5s ease,
    box-shadow 0.5s ease;
}


/* Animated Left Line */

.application-item::before {
  content: "";

  position: absolute;

  left: 0;
  top: 0;

  width: 3px;
  height: 0;

  background: #23aae1;

  transition: height 0.5s ease;
}

.application-item:hover::before {
  height: 100%;
}


/* Hover */

.application-item:hover {
  transform: translateY(-8px);

  border-color: rgba(0, 217, 255, 0.45);

  background: rgba(0, 217, 255, 0.045);

  box-shadow:
    0 18px 40px rgba(0, 0, 0, 0.25),
    0 0 30px rgba(0, 217, 255, 0.06);
}


/* =========================================
   ICON
========================================= */

.application-icon {
  flex: 0 0 62px;

  width: 62px;
  height: 62px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 15px;

  color: #23aae1;

  background: rgba(0, 217, 255, 0.08);

  border: 1px solid rgba(0, 217, 255, 0.2);

  transition: all 0.5s ease;
}

.application-icon i {
  font-size: 27px;

  transition: transform 0.5s ease;
}


/* Icon Hover */

.application-item:hover .application-icon {
  background: #23aae1;

  color: #03151f;

  transform: rotate(-5deg);

  box-shadow:
    0 0 25px rgba(0, 217, 255, 0.3);
}

.application-item:hover .application-icon i {
  transform: scale(1.15);
}


/* =========================================
   TEXT
========================================= */

.application-content h4 {
  margin: 0;

  color: #ffffff;

  font-size: 17px;
  font-weight: 600;

  line-height: 1.5;

  transition: color 0.4s ease;
}

.application-item:hover .application-content h4 {
  color: #23aae1;
}


/* =========================================
   NUMBER
========================================= */

.application-number {
  position: absolute;

  right: 18px;
  top: 15px;

  color: rgba(255, 255, 255, 0.12);

  font-size: 28px;
  font-weight: 800;

  transition: all 0.5s ease;
}

.application-item:hover .application-number {
  color: rgba(0, 217, 255, 0.25);

  transform: translateY(-4px);
}


/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 991px) {

  .netra-applications {
    padding: 70px 0;
  }

  .netra-applications .section-heading h2 {
    font-size: 38px;
  }
}


@media (max-width: 767px) {

  .netra-applications {
    padding: 60px 0;
  }

  .netra-applications .section-heading {
    margin-bottom: 35px;
  }

  .netra-applications .section-heading h2 {
    font-size: 32px;
  }

  .application-item {
    min-height: 110px;

    padding: 22px 50px 22px 22px;

    gap: 17px;
  }

  .application-icon {
    flex: 0 0 55px;

    width: 55px;
    height: 55px;
  }

  .application-icon i {
    font-size: 23px;
  }

  .application-content h4 {
    font-size: 15px;
  }

  .application-number {
    font-size: 23px;
    right: 13px;
  }
}


@media (max-width: 575px) {

  .netra-applications .section-heading h2 {
    font-size: 28px;
  }

  .application-item {
    padding: 20px 45px 20px 18px;
  }
}


.pdt-lgt .achievement-count-box .counter-item {
  font-size: 40px;
  font-weight: 600;
}

.pdt-lgt .achievement-count-box .counter-item em {
  font-style: normal;
  margin-left: -10px;
  font-size: 30px;
}

.sml-txt {
  font-size: 18px;
  color: #fff;
  font-weight: 600;
}

.inr-tle {
  color: #9ae1ff;
  font-size: 24px;
  font-weight: 600;
  text-align: center;
  margin-top: 60px;
  font-style: italic;
  border: 1px solid #9ae1ff;
  padding: 15px;
  border-radius: 10px;
}

/* Gradient Border Box */
.fleet-highlight {
  position: relative;
  padding: 20px 30px;
  border-radius: 14px;
  background: #00001f;
  overflow: hidden;
  z-index: 1;
  margin-top: 50px;
}

/* Animated Gradient Border */
.fleet-highlight::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 3px;
  border-radius: inherit;

  background: linear-gradient(90deg,
      #4fdcff,
      #7b61ff,
      #00f5d4,
      #4fdcff);
  background-size: 300% 100%;

  animation: borderMove 5s linear infinite;

  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);

  -webkit-mask-composite: xor;
  mask-composite: exclude;

  pointer-events: none;
}

/* Text */
.fleet-highlight h3 {
  position: relative;
  z-index: 2;
  margin: 0;
  text-align: center;

  color: #6ddfff;
  font-size: 30px;
  font-weight: 700;
  font-style: italic;

  animation: textGlow 2.5s ease-in-out infinite alternate;
}

/* Gradient Border Movement */
@keyframes borderMove {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

/* Text Glow Animation */
@keyframes textGlow {
  0% {
    text-shadow: 0 0 5px rgba(79, 220, 255, 0.25);
  }

  100% {
    text-shadow:
      0 0 8px rgba(79, 220, 255, 0.5),
      0 0 18px rgba(79, 220, 255, 0.25);
  }
}

/* Optional Hover Effect */
.fleet-highlight:hover::before {
  animation-duration: 2s;
}

.fleet-highlight:hover h3 {
  transform: scale(1.02);
  transition: 0.4s ease;
}

/* Responsive */
@media (max-width: 767px) {
  .fleet-highlight {
    padding: 16px 18px;
    border-radius: 10px;
  }

  .fleet-highlight h3 {
    font-size: 20px;
    line-height: 1.4;
  }
}

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

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

.blg-brdcmp h1 {
  font-size: 32px;
  line-height: 42px;
  text-transform: inherit;
}

.blg-sml-tle {
  color: #fff;
  font-size: 18px;
  padding-bottom: 0px;
}

.blog-details-info-wrap p {
  text-align: justify;
  line-height: 27px;
  padding-bottom: 15px;
}

/***new menu style***/
.mainmenu li.active a {
  color: #2185e5;
}

.mainmenu .home-menu>li>a {
  position: relative;
  display: inline-block;
  padding-bottom: 8px;
}

.mainmenu .home-menu>li>a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 3px;
  background: #2185e5;
  /* Change color */
  transition: width 0.3s ease;
}

/* Hover */
.mainmenu .home-menu>li>a:hover::after {
  width: 100%;
}

/* Active menu */
.mainmenu .home-menu>li.active>a::after {
  width: 100%;
}

.header-menu {
  position: relative;
  display: block;
  background: #060e21;
}

.header-top-text .text_color_white svg {
  width: 22px;
}

.new_gaps_sections {
  margin-right: 6px;
}

.new_gaps_sections svg {
  stroke: #1275f7;
  width: 22px;
  stroke-width: 2;
}

.header-top-contact .social-list li a {
  border: 1px solid #1275f7;
  padding: 4px;
  border-radius: 100px;
}

/***our technology page style***/
:root {
  --bg-deep: #010821;
  --bg-panel: #050f2b;
  --bg-panel-2: #071433;
  --accent: #0c72b4;
  --text-muted: #c2c1c7;
  --accent-dim: rgba(3, 252, 156, 0.14);
  --line: rgba(255, 255, 255, 0.08);
}

/* ---------- HERO ---------- */
.hero-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 41px;
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: #fff;
  text-transform: math-auto;
}

.hero-title .accent {
  color: var(--accent);
}

.hero-rule {
  width: 52px;
  height: 3px;
  background: var(--accent);
  border: none;
  border-radius: 2px;
  margin: 1.4rem 0 1.2rem;
}

.hero-copy {
  color: var(--text-muted);
  font-size: 0.98rem;
  line-height: 1.75;
  max-width: 340px;
}

.hero-visual {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 4/3;
  background:
    radial-gradient(120% 90% at 30% 20%, rgba(3, 252, 156, 0.14), transparent 55%),
    linear-gradient(160deg, #08152f 0%, #030c22 60%, #010820 100%);
  border: 1px solid var(--line);
}

.hero-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: radial-gradient(circle at 50% 40%, black 35%, transparent 78%);
}

.hero-visual .ship-silhouette {
  position: absolute;
  bottom: -6%;
  left: 0;
  right: 0;
  height: 46%;
  background:
    linear-gradient(180deg, transparent, rgba(1, 8, 32, 0.9) 70%),
    radial-gradient(60% 100% at 40% 100%, rgba(3, 252, 156, 0.10), transparent 70%);
}

.hero-visual .scan-line {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(3, 252, 156, 0.85), transparent);
  animation: scan 5.5s ease-in-out infinite;
  opacity: 0.85;
}

@keyframes scan {
  0% {
    top: 8%;
    opacity: 0;
  }

  10% {
    opacity: 0.9;
  }

  50% {
    top: 88%;
    opacity: 0.9;
  }

  90% {
    opacity: 0;
  }

  100% {
    top: 88%;
    opacity: 0;
  }
}

.hero-visual .pulse-dot {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 0 rgba(3, 252, 156, 0.6);
  animation: pulse 2.4s ease-out infinite;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(3, 252, 156, 0.55);
  }

  70% {
    box-shadow: 0 0 0 16px rgba(3, 252, 156, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(3, 252, 156, 0);
  }
}

/* ---------- FEATURE GRID ---------- */
.feature-panel {
  /* background:linear-gradient(180deg, var(--bg-panel), var(--bg-panel-2)); */
  border: 1px solid rgb(255 255 255 / 17%);
  border-radius: 18px;
  padding: clamp(1.6rem, 1.4vw, 2.6rem);
}

.feature-col {
  padding: 1.55rem 1.7rem;
  position: relative;
}

/* grid divider lines (desktop) */
@media (min-width:992px) {
  .feature-col {
    border-right: 1px solid var(--line);
  }

  .feature-col:nth-child(3n) {
    border-right: none;
  }

  .feature-row {
    border-bottom: 1px solid var(--line);
  }
}

@media (max-width:991.98px) {
  .feature-col {
    border-bottom: 1px solid var(--line);
  }
}

.feature-icon {
  width: 70px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(3, 252, 156, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  margin-bottom: 10px;
  background: radial-gradient(circle, rgba(3, 252, 156, 0.10), transparent 70%);
  transition: transform .35s ease, box-shadow .35s ease, background .35s ease;
}

.feature-icon img {
  padding: 8px;
}

.feature-icon svg {
  width: 22px;
  height: 22px;
}

.feature-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.02rem;
  color: #fff;
  margin-bottom: 0.7rem;
  line-height: 1.35;
}

.feature-desc {
  color: var(--text-muted);
  font-size: 0.88rem;
  line-height: 1.7;
  margin: 0;
  text-align: justify;
}

.feature-col {
  transition: background .35s ease;
  border-radius: 10px;
}

.feature-col:hover {
  background: rgba(3, 252, 156, 0.035);
}

.feature-col:hover .feature-icon {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px -6px rgba(3, 252, 156, 0.45);
  background: radial-gradient(circle, rgba(3, 252, 156, 0.22), transparent 70%);
}

/* ---------- SCROLL REVEAL ---------- */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s cubic-bezier(.2, .7, .2, 1), transform .7s cubic-bezier(.2, .7, .2, 1);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- BOTTOM STRIP ---------- */
.domain-strip {
  margin-top: 2.2rem;
  background: linear-gradient(90deg, rgba(3, 252, 156, 0.10), rgba(3, 252, 156, 0.02));
  border: 1px solid rgba(3, 252, 156, 0.25);
  border-radius: 14px;
  padding: 1rem 1.6rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem 1.6rem;
}

.domain-strip .badge-icon {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #01150d;
  flex-shrink: 0;
}

.domain-strip .badge-icon svg {
  width: 16px;
  height: 16px;
}

.domain-strip .headline {
  font-family: var(--font-display);
  font-weight: 600;
  color: #fff;
  font-size: 11px;
  white-space: nowrap;
}

.domain-strip .tags {
  color: var(--text-muted);
  font-size: 11px;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.5rem;
  align-items: center;
}

.domain-strip .tags span.dot {
  color: rgba(3, 252, 156, 0.55);
}

.domain-divider {
  width: 1px;
  align-self: stretch;
  background: rgba(255, 255, 255, 0.12);
  display: none;
}

@media (min-width:768px) {
  .domain-divider {
    display: block;
  }
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    transition: none;
    opacity: 1;
    transform: none;
  }

  .scan-line,
  .pulse-dot,
  .btn-console,
  .feature-icon {
    animation: none !important;
    transition: none !important;
  }
}

.hero {
  background: #020821;
  padding: 50px 0;
}

.new-side-border {
  position: absolute;
  overflow: hidden;
  width: 102%;
  transform: rotate(90deg);
  left: -21%;
  right: 0;
  top: 39%;
}

.features .feature-panel .feature-row .feature-col .flex_sections_serivces {
  gap: 10px;
}

.features .feature-panel .feature-row .feature-col .flex_sections_serivces .feature-title {
  color: #1e99d2;
}

/***about new section style start**/
:root {
  --bg-deep: #010821;
  --bg-panel: #050f2b;
  --bg-panel-2: #071433;
}

/* ---------- HERO ---------- */
.hero-section {
  padding: 50px 0;
  text-align: center;
  background: #00001d;
  padding-top: 0;
}

.hero-brand {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.45em;
  color: #fff;
  margin-bottom: 0.35rem;
}

.hero-brand span {
  color: var(--accent);
}

.hero-kicker {
  font-family: var(--font-display);
  font-size: 0.72rem;
  letter-spacing: 0.35em;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-bottom: 1.6rem;
}

.hero-headline {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.1rem, 5.2vw, 3.8rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
  max-width: 900px;
  margin: 0 auto;
  color: #fff;
}

.hero-headline .accent {
  color: var(--accent);
}

.hero-tags {
  margin-top: 2rem;
  font-family: var(--font-display);
  font-size: 0.82rem;
  letter-spacing: 0.18em;
  color: var(--text-muted);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.55rem 0.9rem;
}

.hero-tags .sep {
  color: rgba(3, 252, 156, 0.5);
}

.hero_sections_services {
  padding-top: 40px;
}

/* ---------- ECOSYSTEM ---------- */
.eco-card {
  background: linear-gradient(180deg, var(--bg-panel), var(--bg-panel-2));
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 1.9rem 1.5rem;
  height: 100%;
  text-align: center;
  transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease;
}

.eco-card:hover {
  transform: translateY(-6px);
  border-color: rgb(33 133 229);
  box-shadow: 0 16px 34px -14px rgb(33 133 229 / 61%);
}

.eco-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 1.1rem;
  border-radius: 50%;
  border: 1px solid rgba(3, 252, 156, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  background: radial-gradient(circle, rgba(3, 252, 156, 0.10), transparent 70%);
  transition: transform .35s ease;
}

.eco-card:hover .eco-icon {
  transform: scale(1.08) translateY(-2px);
}

.eco-icon svg {
  width: 26px;
  height: 26px;
}

.eco-name {
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  color: #fff;
  line-height: 1.4;
}

.ecosystem {
  position: relative;
  background: #00001d;
  padding-bottom: 60px;
}

.kicker {
  font-size: 0.72rem;
  letter-spacing: 0.35em;
  color: #0c72b4;
  text-transform: uppercase;
  font-weight: 600;
}

.eco-card .eco-icon img.img-fluid {
  padding: 10px;
}

.capability-item .capability-icon i img.img-fluid {
  padding: 5px;
}

.capability-item:hover .capability-icon i img.img-fluid {
  filter: brightness(17.5);
}

.blue_color {
  text-transform: initial !important;
  font-size: 32px !important;
  color: #23aae1;
}

.new_list_texts {
  margin-top: 30px;
  text-align: center;
}

.new_sellar_sections_services {
  padding: 50px 0;

}

/* ---------- CLOSING STATEMENT ---------- */
.closing-section {
  text-align: center;
  background:
    radial-gradient(60% 80% at 50% 0%, rgba(3, 252, 156, 0.10), transparent 70%),
    linear-gradient(180deg, var(--bg-panel), var(--bg-deep));
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 50px 0;
}

.closing-kicker {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.6rem, 4vw, 2.6rem);
  letter-spacing: 0.04em;
  color: var(--accent);
  text-shadow: 0 0 30px rgba(3, 252, 156, 0.35);
}

.closing-copy {
  max-width: 760px;
  margin: 1.3rem auto 0;
  color: var(--text-muted);
  font-size: 1.02rem;
  line-height: 1.85;
}

@media(min-width:991px) {
  .capability-item {
    height: 185px;
  }
}

/***about new sections style end***/

@media(max-width:991px) {
  .new_about_sections {
    width: 40%;
    margin: 0 auto;
  }

  .about-ai-info .section-title .title {
    font-size: 18px;
  }

  .footer-widget .footer-desc img.img-fluid {
    width: 60%;
  }
}

.client_logo .title {
  font-size: 40px !important;
}

/* Outer wrapper: rounded corners + border like the screenshot */
.map-container {
  position: relative;
  width: 100%;
  /* max-width: 1024px; */
  height: 450px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid #1e293b;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
  background: #0b0f1a;
}

/* The actual Google iframe, recolored via filter */
.map-container iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  /* This combo turns Google's default light map into a dark navy/blue theme */
  filter: invert(90%) hue-rotate(180deg) brightness(95%) contrast(90%);
}

/* "Open in Google Maps" pill button, bottom-left, like the screenshot */
.map-btn {
  position: absolute;
  left: 20px;
  bottom: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(15, 23, 42, 0.9);
  color: #e2e8f0;
  padding: 10px 18px;
  border-radius: 999px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(4px);
  transition: background 0.2s ease;
}

.map-btn:hover {
  background: rgba(30, 41, 59, 0.95);
}

.map-btn img {
  width: 18px;
  height: 18px;
}

.new-youtubes {
  font-size: 27px;
  position: relative;
  top: 4px;
}

.infor_industries p.text_color_light_white {
  margin-top: 10px;
}

.panel {
  border: 1px solid #e9f3f224;
  border-radius: 8px;
  background: #e9f3f20a;
  margin: 22px 0;
}

table.compare {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

table.compare thead th {
  text-align: left;
  padding: 8px 18px;
  font-family: var(--mono);
  font-size: 17px;
  color: #fff;
  font-weight: 500;
  background: #1b4080;
}

table.compare tbody tr td {
  color: #fff;
}

.nav-strip {
  border: 1px solid #e9f3f224;
  border-radius: 8px;
  padding: 26px 24px;
  margin: 20px 0 26px;
  background: #e9f3f20a;
}

.nav-strip .label {
  font-size: 11px;
  color: #5f7981;
  margin-bottom: 16px;
  letter-spacing: .5px;
}

.flow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-size: 13px;
}

.flow .node {
  padding: 7px 12px;
  border: 1px solid #e9f3f224;
  border-radius: 5px;
  color: rgb(63 216 205);
  background: rgba(63, 216, 205, .06);
}

.flow .arrow {
  color: #5f7981;
}

.flow .result {
  color: #e9f3f2;
  font-size: 12.5px;
  padding-left: 4px;
}

.remember {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 26px 24px;
  margin: 26px 0;
  background: linear-gradient(135deg, rgba(63, 216, 205, .06), rgba(255, 181, 69, .05));
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.remember .chip {
  flex: 1;
  min-width: 220px;
}

.remember .chip:first-child .tag {
  color: #3fd8cd;
}

.remember .chip .tag {
  font-size: 12px;
  margin-bottom: 8px;
}

.remember .chip .txt {
  font-size: 16px;
  color: #fff;
  font-weight: 600;
}

.remember .chip:last-child .tag {
  color: #ffb545;
}

.product-tags {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 22px 0 8px;
}

.product-tags span {
  font-size: 12.5px;
  color: #66b1fd;
  border: 1px solid #e9f3f224;
  padding: 8px 14px;
  border-radius: 20px;
  background: rgb(63 216 205 / 20%);
}

.tagline {
  font-size: 15px;
  color: #8fa7ae;
  margin-top: 14px;
}

.defence-areas .industries-box .industries-info h2 {
  margin: 12px 0 20px;
  font-size: 18px;
}

.defence-areas .industries-box .industries-info {
  margin-top: 20px;
  padding: 0 6px;
}

.defence-areas .common-btn {
  gap: 10px;
  font-size: 14px;
  padding: 5px 16px;
}

.defence-areas .industries-box {
  padding: 18px 20px 30px;
  text-align: center;
}

.img-content {
  position: relative;
}

.img-content .hero_slide__overlay {
  position: absolute;
  top: 85%;
  left: 0;
  text-align: center;
  width: 100%;
  overflow: hidden;
}

.img-content .hero_slide__overlay h3 {
  color: #0a498d;
  font-weight: 700;
}

.img-content .hero_slide__overlay p {
  color: #fff;
}

@media(min-width:991px) {
  .new_techno_services .blog-box .blog-img img.w-100 {
    height: 430px;
  }
}

/****defence***/

/* ---------- SECTION ---------- */
.solutions {
  padding: 56px 0 90px;
}

.cards {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.solutions .card {
  display: grid;
  grid-template-columns: 420px 1fr;
  background: #0c1526;
  border: 1px solid #1b2a42;
  border-radius: 14px;
  overflow: hidden;
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s ease, transform .7s ease, border-color .35s ease, box-shadow .35s ease;
}

.solutions .card.in-view {
  opacity: 1;
  transform: translateY(0);
}

.solutions .card:hover {
  border-color: #2c4266;
  box-shadow: 0 24px 48px -24px rgba(0, 0, 0, 0.6);
}

.solutions .card-media {
  position: relative;
  overflow: hidden;
  min-height: 230px;
}

.solutions .card-media img {
  width: 100%;
  height: 100%;
  object-fit: none;
  transition: transform .8s cubic-bezier(.2, .7, .2, 1);
}

.solutions .card:hover .solutions .card-media img {
  transform: scale(1.08);
}

.solutions .card-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 60%, rgba(12, 21, 38, 0.5) 100%);
}

.solutions .card-body {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 24px;
  padding: 30px 32px;
}

.solutions .card-text h3 {
  font-size: 26px;
  font-weight: 600;
  margin: 0 0 10px;
  color: #fff;
}

.solutions .card-text .rule-sm {
  width: 40px;
  height: 2px;
  background: linear-gradient(90deg, #4f8bff, #7fb4ff);
  margin-bottom: 14px;
}

.solutions .card-text p {
  color: #93a0b8;
  font-size: 18px;
  line-height: 1.7;
  margin: 0 0 16px;
  max-width: 46ch;
}

.learn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #2185e5;
  font-weight: 600;
  font-size: 14.5px;
}

.card-text {
  color: #fff;
}

.learn svg {
  width: 15px;
  height: 15px;
  transition: transform .3s ease;
}

.card:hover .learn svg {
  transform: translateX(5px);
}

.feat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  align-items: center;
}

.feat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
}

.feat-icon {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #1b2a42;
  background: #0f1b30;
  color: #7fb4ff;
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease, background .35s ease;
}

.feat-icon svg {
  width: 30px;
  height: 30px;
}

.feat:hover .feat-icon {
  transform: translateY(-4px) scale(1.06);
  border-color: var(--accent);
  background: rgba(79, 139, 255, 0.12);
  box-shadow: 0 0 0 6px rgba(79, 139, 255, 0.08);
}

.feat span {
  font-size: 12.5px;
  color: #93a0b8;
  line-height: 1.4;
}


@media(max-width:1199px) {
  .solutions .card {
    display: block;
  }

  .solutions .card-body {
    display: block;
    padding: 15px 15px;
  }

}

@media(max-width:991px) {
  .solutions .card-media {
    min-height: auto;
  }

  .feat-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .solutions .card-text h3 {
    font-size: 17px;
  }

  .solutions .card-text p {
    color: #93a0b8;
    font-size: 13px;
  }

  .area_serivces_sections p {
    font-size: 12px;
  }

  .area_serivces_sections .title {
    font-size: 21px;
  }

  .solutions {
    padding: 20px 0 30px;
  }
}


.rule-sm {
  width: 40px;
  height: 2px;
  background: linear-gradient(90deg, #4f8bff, #7fb4ff);
  margin-bottom: 14px !important;
  margin-top: 10px;
}



/**martitime css***/
:root {
  --blue: #2f6fed;
  --blue-light: #5b8dff;
  --text: #eef2fa;
  --text-dim: #9aa7bd;
  --text-faint: #6b7893;
}

/* PRODUCT GRID */
.maritime-soltions .grid3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.maritime-soltions .grid2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-top: 24px;
}

.maritime-soltions .card {
  background: #0c1526;
  border: 1px solid #1b2740;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.maritime-soltions .card-media {
  aspect-ratio: auto;
  position: relative;
  width: 100% !important;
  height: auto !important;
}

.maritime-soltions .card-media img.img-fluid {
  object-fit: contain;
}

.maritime-soltions .card-body {
  padding: 22px 24px 26px;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 2px;
}

.maritime-soltions .card-body h3 {
  font-size: 19px;
  font-weight: 800;
  margin-bottom: 4px;
  color: #eef2fa;
}

.maritime-soltions .card-tag {
  color: #348de1;
  font-size: 15.5px;
  font-weight: 600;
  margin-bottom: 2px;
}

.maritime-soltions .card-desc {
  color: #d2dffa;
  font-size: 14px;
  margin-bottom: 18px;
}

.maritime-soltions .feature-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 20px;
}

.maritime-soltions .feature-row.five {
  grid-template-columns: repeat(5, 1fr);
}

.maritime-soltions .feature {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
}

.maritime-soltions .feature .icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--blue-light);
}

.maritime-soltions .feature span {
  font-size: 11.5px;
  color: #d2dffa;
  line-height: 1.3;
}

.maritime-soltions .learn-more {
  margin-top: auto;
  color: #348de1;
  font-weight: 600;
  font-size: 16px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* WHY US STRIP */
.maritime-soltions .strip {
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
  padding: 34px 0;
}

.maritime-soltions .strip-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
}

.maritime-soltions .strip-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.maritime-soltions .strip-item .icon-badge {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border-radius: 9px;
  border: 1px solid var(--border);
  color: var(--blue-light);
  display: flex;
  align-items: center;
  justify-content: center;
}

.maritime-soltions .strip-item h4 {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 5px;
}

.maritime-soltions .strip-item p {
  font-size: 13px;
  color: var(--text-faint);
  line-height: 1.45;
}

/* CTA */
.maritime-soltions .cta {
  margin: 20px auto 20px;
  background: linear-gradient(135deg, #0c1730, #0a1120);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 30px 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.maritime-soltions .cta-left {
  display: flex;
  align-items: center;
  gap: 18px;
}

.maritime-soltions .cta-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(47, 111, 237, 0.15);
  color: var(--blue-light);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 48px;
}

.maritime-soltions .cta h3 {
  font-size: 19px;
  font-weight: 800;
  margin-bottom: 4px;
  color: #fff;
}

.maritime-soltions .cta p {
  font-size: 14px;
  color: var(--text-dim);
}

.maritime-soltions .feature .icon i {
  font-size: 28px;
  color: #348de1;
}

.maritime_serivces_box .capability-item {
  position: relative;
  min-height: 130px;
  padding: 10px 10px 10px 10px;
}

.maritime_serivces_box .capability-item .capability-content p {
  color: #9aa7bd;
  font-size: 13px;
}

@media(min-width:991px) {
  .maritime_serivces_box .capability-item {
    height: 155px;
  }
}

@media(max-width:991px) {
  .maritime-soltions .grid3 {
    grid-template-columns: repeat(1, 1fr);
  }

  .maritime-soltions .grid2 {
    grid-template-columns: repeat(1, 1fr);
  }

  .maritime-soltions .cta {
    padding: 22px 6px;
  }
}

@media(max-width:767px) {
  .maritime-soltions .cta h3 {
    font-size: 14px;
  }

  .maritime-soltions .cta p {
    font-size: 10px;
  }

  .maritime-soltions .cta {
    display: block;
  }

  .maritime-soltions .cta-left {
    margin-bottom: 10px;
  }

  .area_serivces_sections .title {
    font-size: 15px !important;
  }

  .area_serivces_sections p {
    font-size: 10px;
  }

  .section-heading h2 {
    font-size: 22px;
  }

  .maritime-soltions .feature-row {
    grid-template-columns: repeat(2, 1fr);
  }

  .maritime-soltions .card-tag {
    font-size: 13.5px;
  }

  .maritime-soltions .card-body {
    padding: 15px 10px 15px;
  }

  .maritime-soltions .card-desc {
    font-size: 11px;
  }

  .maritime-soltions .feature-row.five {
    grid-template-columns: repeat(2, 1fr);
  }

  .maritime_serivces_box .capability-item .capability-content p {
    font-size: 10px;
  }

  .common-btn {
    padding: 7px 9px;
    font-size: 12px;
  }
}

.icons_eco_systems .eco-icon i {
  font-size: 30px;
}

/**our technology page style***/
:root {

  --accent: #46a8ff;
  --accent-soft: rgba(70, 168, 255, 0.12);
  --check: #46a8ff;
}

/* ---- TABS ---- */
.xera_caps_technology_services .tabs {
  position: relative;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid var(--panel-border);
  margin-bottom: 40px;
}

.xera_caps_technology_services .tab {
  position: relative;
  flex: 1;
  background: none;
  border: none;
  padding: 16px 8px;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--text-dim);
  cursor: pointer;
  text-transform: uppercase;
  transition: color 0.25s ease;
}

.xera_caps_technology_services .tab:hover {
  color: #c3cee0;
}

.xera_caps_technology_services .tab.active {
  color: var(--accent);
}

/* animated sliding underline */
.xera_caps_technology_services .tab-indicator {
  position: absolute;
  bottom: -1px;
  height: 2px;
  background: var(--accent);
  border-radius: 2px;
  box-shadow: 0 0 10px 1px rgba(70, 168, 255, 0.55);
  transition: left 0.38s cubic-bezier(.65, .05, .36, 1),
    width 0.38s cubic-bezier(.65, .05, .36, 1),
    opacity 0.2s ease;
}

/* soft preview underline shown on hover of a non-active tab */
.xera_caps_technology_services .tab-hover-indicator {
  position: absolute;
  bottom: -1px;
  height: 2px;
  background: #4a5a72;
  border-radius: 2px;
  opacity: 0;
  transition: left 0.25s ease, width 0.25s ease, opacity 0.2s ease;
}

/* quick pulse when a tab is clicked */
@keyframes tabPulse {
  0% {
    transform: scaleX(0.4);
    opacity: 0.4;
  }

  60% {
    transform: scaleX(1.06);
    opacity: 1;
  }

  100% {
    transform: scaleX(1);
    opacity: 1;
  }
}

.xera_caps_technology_services .tab-indicator.pulse {
  animation: tabPulse 0.38s cubic-bezier(.34, 1.56, .64, 1);
}

/* ---- PANELS ---- */
.xera_caps_technology_services .panels {
  position: relative;
  min-height: 340px;
}

.xera_caps_technology_services .panel {
  display: none;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.xera_caps_technology_services .panel.active {
  display: grid;
  animation: panelIn 0.4s ease;
}

@keyframes panelIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 900px) {
  .xera_caps_technology_services .panel {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .xera_caps_technology_services .panel {
    grid-template-columns: 1fr;
  }

  .xera_caps_technology_services .tab {
    font-size: 0.68rem;
    padding: 14px 4px;
  }
}

/* ---- CARD ---- */
.xera_caps_technology_services .card {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.xera_caps_technology_services .card:hover {
  transform: translateY(-4px);
  border-color: rgba(70, 168, 255, 0.4);
  box-shadow: 0 12px 30px -14px rgba(70, 168, 255, 0.35);
}

.xera_caps_technology_services .card-media {
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(120% 120% at 50% 20%, rgba(70, 168, 255, 0.10), transparent 60%),
    linear-gradient(180deg, #101826 0%, #0a1019 100%);
  border-bottom: 1px solid var(--panel-border);
}

.xera_caps_technology_services .card-media svg {
  width: 84px;
  height: 84px;
  color: var(--accent);
  opacity: 0.9;
}

.xera_caps_technology_services .card-body {
  padding: 16px 16px 18px;
  display: flex;
  flex-direction: column;
  flex: 1;
  margin-top: 20px;
}

.xera_caps_technology_services .card-body h3 {
  margin: 0 0 4px;
  font-size: 19px;
  font-weight: 700;
  color: #fff;
}

.xera_caps_technology_services .card-body .tagline {
  margin: 0 0 12px;
  font-size: 14px;
  color: var(--text-dim);
}

.xera_caps_technology_services .features {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  flex: 1;
}

.xera_caps_technology_services .features li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #c3cee0;
  margin-bottom: 7px;
}

.xera_caps_technology_services .features li svg {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  margin-top: 2px;
  color: var(--check);
}

.xera_caps_technology_services .view-details {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  color: var(--accent);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  width: fit-content;
}

.xera_caps_technology_services .view-details svg {
  width: 14px;
  height: 14px;
  transition: transform 0.2s ease;
}

.xera_caps_technology_services .view-details:hover svg {
  transform: translateX(4px);
}

.xera_caps_technology_services .card-media img.img-fluid {
  overflow: hidden;
  height: 174px;
  width: 100%;
  object-fit: cover;
}

/* ---------- Grallator ---------- */
.xera_caps_technology_services .grallator {
  margin-top: 70px;
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  display: grid;
  grid-template-columns: .9fr 1.3fr .8fr;
  align-items: center;
  overflow: hidden;
}

.xera_caps_technology_services .grallator-text {
  padding: 40px;
}

.xera_caps_technology_services .grallator-text h3 {
  font-size: 26px;
  font-weight: 800;
  color: #fff;
}

.xera_caps_technology_services .grallator-text .tag {
  color: var(--blue-light);
  font-size: 13.5px;
  font-weight: 600;
  margin: 6px 0 16px;
}

.xera_caps_technology_services .grallator-text p {
  color: var(--text-dim);
  font-size: 16px;
  line-height: 1.7;
  margin-bottom: 22px;
}

.xera_caps_technology_services .grallator-media {
  height: 230px;
  background:
    radial-gradient(circle at 50% 40%, rgba(59, 130, 246, .18), transparent 60%),
    linear-gradient(160deg, #0e1626, #050810);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-dimmer);
  font-size: 12px;
  letter-spacing: 3px;
  font-weight: 700;
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
}

.xera_caps_technology_services .grallator-specs {
  padding: 32px 30px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.xera_caps_technology_services .grallator-specs .spec {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.xera_caps_technology_services .grallator-specs svg {
     width: 30px;
    height: 30px;
    color: #c6d2e4;
    flex: none;

  margin-top: 2px;
}

.xera_caps_technology_services .grallator-specs h5 {
  font-size: 14.5px;
  font-weight: 700;
  color: #fff;
}

.xera_caps_technology_services .grallator-specs span {
  font-size: 12px;
  color: var(--text-dim);
}

.xera_caps_technology_services .grallator-text .common-btn {
  background: #2185e5;
  font-size: 16px;
  padding: 12px;
}
.captions_services hr.hero-rule {
    margin: 0 auto;
    margin-top: 20px;
}
.captions_services p.hero-copy {
    margin: 0 auto;
    margin-bottom: 20px;
    margin-top: 19px;
}
.captions_services a.new_common_btns {
        background: #44a3f8 !important;
    margin-right: 20px;
}
.custome_kaflex li a span {
    font-size: 14px;
    text-transform: capitalize;
    vertical-align: middle;
}
@media(max-width:991px){
  .xera_caps_technology_services .tabs {
    display: contents;
  }
  .xera_caps_technology_services .grallator {
    display: block;
  }
  .hero-title {
    font-size: 22px;
  }
  .hero-headline {
    font-size: 20px;
  }
  .breadcrumb-info h1 {
    font-size: 20px;
  }
}
/**our technology page style end***/


.blue_colors {
    font-size: 24px !important;
    text-transform: capitalize !important;
        margin-bottom: 0 !important;
}
.robotis {
    color: #fff;
    font-size: 22px;
}
.blue_ocean p.text-white {
    color: #ddd !important;
}
.new_white {
    color: #fff;
    font-size: 21px;
    font-weight: 600;
}
.blue_ocean h2 span {
    text-transform: capitalize;
    font-size: 32px;
}
/****about vision bottom section****/

  .knot_services .banner{
    position:relative;
    width:100%;
    max-width:1400px;
    border-radius:20px;
    padding:36px 40px;
    background:
      radial-gradient(ellipse 140% 220% at 0% 50%, rgba(63,214,224,0.10), transparent 55%),
      radial-gradient(ellipse 120% 200% at 100% 0%, rgba(63,214,224,0.06), transparent 60%),
      linear-gradient(135deg, var(--bg-2) 0%, var(--bg-1) 55%, var(--bg-3) 100%);
    box-shadow:
      0 0 0 1px rgba(63,214,224,0.15),
      0 0 40px rgba(30,90,150,0.35),
      inset 0 1px 0 rgba(255,255,255,0.03);
    overflow:hidden;
  }

  .knot_services .banner::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius:20px;
    padding:1px;
    background:linear-gradient(120deg, rgba(63,214,224,0.35), rgba(63,214,224,0) 30%, rgba(63,214,224,0) 70%, rgba(63,214,224,0.25));
    -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite:xor;
    mask-composite:exclude;
    pointer-events:none;
  }

 .knot_services .grid{
    display:grid;
    grid-template-columns: 1.35fr 1px 1.15fr 1px 0.65fr;
    align-items:center;
    gap:32px;
    position:relative;
    z-index:1;
  }

  .knot_services .divider{
    width:1px;
    height:64px;
    background:var(--divider);
    justify-self:center;
  }

  /* --- Column 1 --- */
  .knot_services .col-1{
    display:flex;
    flex-direction:column;
    gap:14px;
    width: 100%;
  }

  .knot_services .eyebrow{
    display:flex;
    align-items:center;
    gap:14px;
  }

  .knot_services .eyebrow span{
    color:var(--teal);
    font-size:12px;
    font-weight:700;
    letter-spacing:3px;
  }

  .knot_services .eyebrow .line{
    flex:1;
    max-width:46px;
    height:1px;
    background:linear-gradient(to right, var(--teal-dim), transparent);
  }

  .knot_services .role-row{
    display:flex;
    align-items:center;
    gap:18px;
  }

  .knot_services .icon-box{
    flex-shrink:0;
    width:56px;
    height:56px;
    border-radius:12px;
    border:1.5px solid var(--teal-dim);
    background:linear-gradient(160deg, rgba(63,214,224,0.10), rgba(63,214,224,0.02));
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 0 18px rgba(63,214,224,0.15), inset 0 0 12px rgba(63,214,224,0.08);
  }

  .knot_services .icon-box svg{
    width:26px;
    height:26px;
    stroke:var(--teal);
  }

  .knot_services .role-title{
    color:var(--white);
    font-size:22px;
    font-weight:700;
    line-height:1.35;
    letter-spacing:0.2px;
    margin:0;
  }

  /* --- Column 2 --- */
  .knot_services .col-2{
    display:flex;
    flex-direction:column;
    gap:18px;
    width: 100%;
  }

 .knot_services .col-2 p{
    margin:0;
    color:var(--muted);
    font-size:13.5px;
    line-height:1.6;
    max-width:420px;
  }

  .knot_services .contact-btn{
    display:inline-flex;
    align-items:center;
    gap:14px;
    padding:12px 18px;
    background:rgba(20,55,95,0.55);
    border:1px solid rgba(63,214,224,0.25);
    border-radius:10px;
    width:fit-content;
    text-decoration:none;
    transition:border-color .2s ease, background .2s ease;
  }

  .knot_services .contact-btn:hover{
    border-color:rgba(63,214,224,0.55);
    background:rgba(20,55,95,0.75);
  }

  .knot_services .mail-icon{
    flex-shrink:0;
    width:32px;
    height:32px;
    border-radius:7px;
    background:linear-gradient(160deg,#2a6ea8,#123a63);
    display:flex;
    align-items:center;
    justify-content:center;
  }

  .knot_services .mail-icon svg{
    width:16px;
    height:16px;
    stroke:#eaf6ff;
  }

  .knot_services .contact-text{
    display:flex;
    flex-direction:column;
    gap:2px;
  }

  .knot_services .contact-text .label{
    color:var(--muted-2);
    font-size:11.5px;
  }

  .knot_services .contact-text .email{
    color:var(--white);
    font-size:14px;
    font-weight:700;
  }

  .knot_services .arrow{
    margin-left:6px;
    color:var(--teal);
    font-size:16px;
  }

  /* --- Column 3 --- */
  .knot_services .col-3{
    text-align:right;
    display:flex;
    flex-direction:column;
    gap:6px;
    width: 100%;
  }

  .knot_services .col-3 span{
    color:#c7d3e3;
    font-size:12px;
    font-weight:700;
    letter-spacing:2.5px;
  }

  /* --- Responsive --- */
  @media (max-width: 900px){
    .knot_services .grid{
      grid-template-columns:1fr;
      gap:24px;
    }
    .knot_services .divider{
      width:100%;
      height:1px;
    }
    .knot_services .col-3{
      text-align:left;
    }
  }

  @media (max-width: 480px){
    .knot_services .banner{
      padding:28px 22px;
      border-radius:16px;
    }
    .knot_services .role-title{
      font-size:19px;
    }
    .knot_services .role-row{
      gap:14px;
    }
    .knot_services .icon-box{
      width:48px;
      height:48px;
    }
  }
 @media(max-width:991px){
    .single_hero__slide .hero_slide__overlay p {
    font-size: 9px;
}
.area_serivces_sections {
    padding: 20px 0;
}
.pt-60 {
        padding-top: 30px !important;
    }
    .pt-80 {
    padding-top: 40px;
}
.about-wrap {
        padding: 18px;
        gap: 10px;
    }
    .section-title .sub-title {
    font-size: 12px;
    margin-bottom: 5px;
    }
    .about-wrap .about-info p.disc {
    font-size: 12px;
    line-height: 17px;
}
.about-wrap .about-info .disc-2 {
        font-size: 12px !important;
        line-height: 19px;
    }
        .pb-60 {
        padding-bottom: 30px !important;
    }
    .industries-box .industries-info {
        margin-top: 0;
    }
    .listing li {
    font-size: 11px;
    }
    .data-info p {
    font-size: 13px;
    line-height: 19px;
}
.subscribe-wrap .section-title p {
        font-size: 11px;
    }
    .about-ai-info p {
    font-size: 12px;
    text-align: justify;
}
.values-box-wrap p {
    font-size: 12px;
}
.values-area {
    padding-bottom: 20px !important;
}
.blue_ocean h2 span {
    font-size: 22px;
}
.new_white {
    font-size: 14px;
    line-height: 20px;
}
.blue_ocean p.text-white {
    font-size: 12px;
            text-align: justify;
}
.blue_colors {
    font-size: 12px !important;
}
.robotis {
    font-size: 14px;
}
.knot_services .role-title {
        font-size: 12px;
    }
    .knot_services .col-3 span {
    font-size: 7px;
    }
    .section-title .desc {
    font-size: 13px;
    }
    .team-box-wrap .team-box .team-img .team-info-wrap .team-info h2 {
    font-size: 14px;
}
.cs-subscribe-wrap .cs-subscribe-info h2 {
        font-size: 16px;
    }
    .text-p-18 {
        font-size: 11px;
    }
    .img-content .hero_slide__overlay h3 {
    font-size: 11px;
}
.img-content .hero_slide__overlay p {
    font-size: 10px;
}
.pdt-lgt .achievement-count-box .counter-item em {
    font-style: normal;
    margin-left: -3px;
    font-size: 19px;
}
.pdt-lgt .achievement-count-box .counter-item {
    font-size: 26px;
}
.achievement-count-box p {
        font-size: 15px;
}
.connect-text {
    font-size: 14px !important;
}
.panel {
    padding: 15px !important;
}
.panel-sub {
    font-size: 12px;
}
.connect-icon {
    width: 40px;
    height: 40px;
}
.connect-icon svg {
    width: 17px;
    height: 19px;
}
.connect-title {
    font-size: 18px;
}
.panel-sub {
    font-size: 14px;
}
.map-container {
    height: auto;
}
  }

  @media(max-width:767px){
    .client_logo .title {
    font-size: 19px !important;
}
  }