body, html {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  color: #fff;
  font-family: "Space Grotesk", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
}

body::-webkit-scrollbar {
  display: none; /* Hide the scrollbar in webkit-based browsers */
}

body {
  background-color: #0D0D0D;
}
body h1, body h2, body h3, body h4 {
  font-family: "Space Grotesk", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
}
body h1 span, body h1 p, body h1 a, body h2 span, body h2 p, body h2 a, body h3 span, body h3 p, body h3 a, body h4 span, body h4 p, body h4 a {
  font-family: "Space Grotesk", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}
body p, body a, body span, body li {
  font-family: "Archivo", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
  font-variation-settings: "wdth" 100;
}
body h1 {
  font-size: 64px;
  line-height: 68px;
}
body h2 {
  font-size: 44px;
  line-height: 54px;
}
body h3 {
  font-size: 32px;
  line-height: 40px;
}
body h4 {
  font-size: 28px;
  line-height: 36px;
  font-weight: 500;
}
body p {
  font-size: 20px;
  line-height: 24px;
}
body p.small {
  font-size: 16px;
  line-height: 20px;
}
body a {
  text-decoration: none;
}
body svg {
  max-width: 100%;
  height: auto;
}
body button {
  font-family: "Space Grotesk", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
}
@media (max-width: 1400px) {
  body h1 {
    font-size: 52px;
    line-height: 62px;
  }
  body h2 {
    font-size: 36px;
    line-height: 44px;
  }
  body h3 {
    font-size: 26px;
    line-height: 34px;
  }
}
@media (max-width: 1200px) {
  body p {
    font-size: 18px;
    line-height: 22px;
  }
}
@media (max-width: 768px) {
  body h1 {
    font-size: 36px;
    line-height: 46px;
  }
  body h2 {
    font-size: 36px;
    line-height: 44px;
  }
  body h3 {
    font-size: 24px;
    line-height: 32px;
  }
  body p {
    font-size: 18px;
    line-height: 26px;
  }
}

.navbar {
  border-bottom: 1px solid #223944;
  z-index: 6;
}
.navbar .navbar-brand {
  padding: 16px 0px;
}
.navbar .right-nav {
  padding: 16px 0 8px 24px;
  border-left: 1px solid #223944;
}
.navbar .right-nav button {
  position: relative;
  width: 36px;
  height: 36px;
}
.navbar .right-nav button svg {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.navbar .right-nav button .open {
  opacity: 0;
  visibility: hidden;
  -webkit-transition: 0.3s all ease-in;
  transition: 0.3s all ease-in;
}
.navbar .right-nav button .open.active {
  opacity: 1;
  visibility: visible;
  -webkit-transition: 0.3s all ease-in;
  transition: 0.3s all ease-in;
}
.navbar .right-nav button .close {
  opacity: 0;
  visibility: hidden;
  -webkit-transition: 0.3s all ease-in;
  transition: 0.3s all ease-in;
}
.navbar .right-nav button .close.active {
  opacity: 1;
  visibility: visible;
  -webkit-transition: 0.3s all ease-in;
  transition: 0.3s all ease-in;
}
@media (max-width: 991px) {
  .navbar {
    background: #0D0D0D;
  }
}

.menu {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  color: white;
  height: 100vh;
  width: 100%;
  position: fixed;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  top: 0;
  left: 0;
  background: #1D2037;
  padding: 0 50px;
  z-index: 5;
  -webkit-transform: translateY(-100%);
          transform: translateY(-100%);
}
@media (max-width: 768px) {
  .menu {
    padding: 0;
  }
}
.menu .menu-logo {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: -1;
}
.menu .menu-logo svg {
  width: 600px;
}
@media (max-width: 768px) {
  .menu .menu-logo svg {
    width: 300px;
  }
}
.menu .menu-item .nav-li {
  margin-bottom: 36px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
@media (max-width: 768px) {
  .menu .menu-item .nav-li {
    margin-bottom: 16px;
  }
}
.menu .menu-item .nav-li .small-number {
  font-size: 32px;
  line-height: 46px;
  color: #D2DEEB;
}
@media (max-width: 768px) {
  .menu .menu-item .nav-li .small-number {
    font-size: 16px;
    line-height: 18px;
  }
}
.menu .menu-item .nav-li > a {
  font-size: 64px;
  line-height: 68px;
  color: #816DEA;
  padding-left: 0;
  padding-right: 0;
  border-bottom: 1.5px solid #D2DEEB;
  -webkit-transition: padding-left 1s ease;
  transition: padding-left 1s ease;
}
.menu .menu-item .nav-li > a:hover {
  padding-left: 200px;
  -webkit-transition: padding-left 1s ease;
  transition: padding-left 1s ease;
}
@media (max-width: 768px) {
  .menu .menu-item .nav-li > a {
    font-size: 32px;
    line-height: 36px;
    margin-bottom: 24px;
  }
  .menu .menu-item .nav-li > a .small-number {
    font-size: 16px;
    line-height: 18px;
  }
}

.wrapper {
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.gsap-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 100vh;
  width: 1240vw; /* Adjusted to accommodate wider section */
}

.section {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  width: 100vw;
  height: 100vh;
  padding-top: 66px;
}
.section .bottom-count span {
  color: #223944;
  font-family: "Space Grotesk", sans-serif;
  font-optical-sizing: auto;
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}
.section .bottom-count span.active {
  color: #CDE5EF;
}
.section.hero .main {
  padding-top: 24px;
}
.section.hero .main h1 span {
  font-weight: 500;
  background: -webkit-gradient(linear, left top, right top, color-stop(-3.47%, #22E6C8), color-stop(105.44%, #806DE9));
  background: linear-gradient(90deg, #22E6C8 -3.47%, #806DE9 105.44%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.section.hero .hero-img-360 {
  position: absolute;
  bottom: -160px;
  left: 0;
  right: 0;
}
.section.hero .hero-img-360 > img {
  -o-object-fit: fill;
     object-fit: fill;
}
.section.hero .scroll-anim {
  position: absolute;
  bottom: 25px;
  left: 50%; /* Center horizontally */
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%); /* Adjust back by 50% of the element's width */
}
.section.hero .scroll-anim-svg {
  position: absolute;
  bottom: 50px;
  left: 50%; /* Center horizontally */
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%); /* Adjust back by 50% of the element's width */
}
@media (max-width: 1441px) {
  .section.hero .hero-img-360 {
    bottom: -180px;
  }
}
@media (max-width: 1400px) {
  .section.hero .main .top-tag svg {
    width: 180px;
  }
}
.section.intro .center-bg {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.section.intro .rectangle {
  position: absolute;
  bottom: 100px;
  left: -200px;
}
.section.intro .mix-elements {
  position: absolute;
  bottom: 40px;
  left: -190px;
}
.section.intro .section-count {
  border-right: 1px solid #223944;
  padding-left: 40px;
}
.section.intro .section-count .top {
  color: #1D2037;
  font-family: "Space Grotesk", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-size: 240px;
  font-style: normal;
  line-height: 280px; /* 116.667% */
  letter-spacing: -12px;
}
.section.intro .section-count .bottom {
  padding-bottom: 36px;
}
.section.intro .auto-meter {
  position: absolute;
  left: 30px;
  top: 20px;
}
.section.intro .auto-meter svg {
  width: 550px;
}
.section.intro .off-elements {
  position: absolute;
  left: -100px;
  top: 60px;
}
.section.intro .off-elements svg {
  width: 550px;
}
.section.intro .content {
  padding-bottom: 90px;
}
.section.intro .content.transparency {
  padding-bottom: 24px;
}
.section.intro .content h2 {
  color: #22E7C9;
}
.section.intro .content p {
  color: #CDE5EF;
}
@media (max-width: 1400px) {
  .section.intro .section-count .top {
    font-size: 220px;
    line-height: 260px;
  }
  .section.intro .auto-meter {
    top: 0px;
  }
  .section.intro .auto-meter svg {
    width: 500px;
  }
}
.section.customer-base {
  padding-top: 0;
}
.section.customer-base .left-section {
  padding: 171px 130px 24px 40px;
}
.section.customer-base .left-section .top {
  background: #1D2037;
}
.section.customer-base .left-section .top > p {
  font-family: "Space Grotesk", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-size: 32px;
  line-height: 40px;
  color: #816DEA;
}
.section.customer-base .video-container {
  position: relative;
  overflow: hidden;
}
.section.customer-base .video-container video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: fill;
     object-fit: fill;
  display: none;
  z-index: 0;
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}
.section.customer-base .video-container .interface {
  background: #816DEA;
  padding: 171px 24px 24px 24px;
  color: #1D2037;
  border-left: 1px solid #1D2037;
  position: relative;
  z-index: 1;
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}
.section.customer-base .video-container:hover video {
  display: block;
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}
.section.customer-base .video-container:hover .interface {
  background: rgba(29, 32, 55, 0.8);
  color: #816DEA;
  -webkit-transition: all 0.5s ease-in;
  transition: all 0.5s ease-in;
}
@media (max-width: 1400px) {
  .section.customer-base .left-section .top > p {
    font-size: 24px;
    line-height: 32px;
  }
}
.section.blockchain .left-section {
  padding: 0 120px 40px 120px;
}
.section.blockchain .left-section h3 {
  color: #816DEA;
}
@media (max-width: 1400px) {
  .section.blockchain .b-blocks svg {
    width: 300px;
  }
}
.section.vision {
  padding-top: 0;
}
.section.vision .top-c {
  padding: 171px 150px 120px 171px;
}
.section.vision .top-c > p {
  font-family: "Space Grotesk", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-size: 32px;
  line-height: 36px;
  color: #1D2037;
}
.section.vision .top-c .union {
  position: absolute;
  left: 60px;
  top: 120px;
}
.section.vision .top-c .bottom-el {
  position: absolute;
  right: 60px;
  bottom: 120px;
}
.section.vision .top-c .bottom-count {
  position: absolute;
  left: 171px;
  bottom: 40px;
}
.section.vision .bottom-c {
  background: #1D2037;
  padding: 0 150px;
}
.section.vision .bottom-c h3 {
  color: #22E7C9;
}
.section.vision .bottom-c .bottom-count {
  position: absolute;
  left: 150px;
  bottom: 40px;
}
@media (max-width: 1400px) {
  .section.vision .top-c > p {
    font-size: 24px;
    line-height: 32px;
  }
}
.section.team {
  padding-left: 40px;
}
.section.team .bottom-count {
  position: absolute;
  left: -10px;
  bottom: 16px;
}
.section.team .team-details .team-con {
  z-index: 1;
}
.section.team .team-details .team-con .line {
  position: absolute;
  top: -70px;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
}
.section.team .team-details .team-con .name {
  color: #24E5C9;
}
.section.team .team-details .team-con .designation {
  font-size: 16px;
  line-height: 18px;
}
.section.team .team-details .team-con .linked-in-profile {
  text-decoration: none;
}
.section.team .team-details .team-con .linked-in-profile span {
  color: #816DEA;
}
.section.team .team-details .team-con .testimonials .testi {
  font-size: 16px;
  line-height: 22px;
  max-width: 280px;
}
.section.service {
  padding-top: 0;
}
.section.service .service-tab {
  margin-top: 66px;
  border-left: 1px solid #223944;
}
.section.service .service-tab .nav {
  padding-right: 80px;
}
.section.service .service-tab button {
  font-size: 24px;
  line-height: 40px;
  border: none;
  border-bottom: 1px solid #223944;
  padding: 36px 20px 36px 60px;
  margin-right: 20px;
  border-radius: 0;
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
  color: #223944;
}
.section.service .service-tab button:hover {
  color: #CDE5EF;
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}
.section.service .service-tab button.active {
  padding-left: 80px;
  border-bottom: 1px solid #CDE5EF;
  color: #CDE5EF;
  margin-right: 0;
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}
.section.service .tab-content {
  background: #1D2037;
}
.section.service .tab-content .autoacc-details {
  padding-top: 90px;
}
.section.service .tab-content .autoacc-details .autoacc-tab {
  position: absolute;
  bottom: 50px;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  width: 100%;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.section.service .tab-content .autoacc-details .autoacc-tab button {
  width: 116px;
  height: 104px;
  position: relative;
  display: inline-block;
  background-clip: padding-box; /* Ensures padding area has the background */
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  z-index: 1;
  background: #2A2F50;
  border-radius: 16px;
  border: none;
  margin: 0 12px;
}
.section.service .tab-content .autoacc-details .autoacc-tab button .autoacc-btn > p {
  font-family: "Space Grotesk", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
  font-size: 16px;
  line-height: 20px;
  color: #D2DEEB;
}
.section.service .tab-content .autoacc-details .autoacc-tab button.active {
  background: #191919;
}
.section.service .tab-content .autoacc-details .autoacc-tab button::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 16px; /* Same as element's border-radius */
  padding: 1px; /* Width of the gradient border */
  background: radial-gradient(102.09% 102.09% at 97.55% 100%, rgba(46, 50, 81, 0.5) 0%, rgba(34, 231, 201, 0.5) 33.33%, rgba(46, 50, 81, 0.5) 66.67%, rgba(129, 109, 234, 0.5) 100%);
  -webkit-mask: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fff)) content-box, -webkit-gradient(linear, left top, left bottom, color-stop(0, #fff));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; /* For Safari */
  mask-composite: exclude; /* For other browsers */
  z-index: -1; /* Behind the element */
}
.section.service .tab-content .autoacc-details .tab-content .acessories p {
  padding: 0 170px;
}
.section.service .tab-content .buy-cell {
  padding: 66px 24px;
}
.section.service .tab-content .buy-cell .bc-wrap {
  position: relative;
  display: inline-block;
  background-clip: padding-box; /* Ensures padding area has the background */
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  z-index: 1;
  padding: 21px;
  background: #2A2F50;
  border-radius: 24px;
}
.section.service .tab-content .buy-cell .bc-wrap::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 24px; /* Same as element's border-radius */
  padding: 2px; /* Width of the gradient border */
  background: radial-gradient(102.09% 102.09% at 97.55% 100%, rgba(46, 50, 81, 0.5) 0%, rgba(34, 231, 201, 0.5) 33.33%, rgba(46, 50, 81, 0.5) 66.67%, rgba(129, 109, 234, 0.5) 100%);
  -webkit-mask: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fff)) content-box, -webkit-gradient(linear, left top, left bottom, color-stop(0, #fff));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; /* For Safari */
  mask-composite: exclude; /* For other browsers */
  z-index: -1; /* Behind the element */
}
.section.service .tab-content .buy-cell .bc-wrap p {
  padding-top: 21px;
  font-size: 24px;
  line-height: 26px;
}
.section.service .tab-content .upcoming-services {
  padding: 111px 24px 64px 24px;
}
.section.service .tab-content .upcoming-services .uc-service-details {
  background: #181B2E;
  padding: 28px;
  border-radius: 24px;
}
.section.service .tab-content .upcoming-services .uc-service-details .acc-content .content {
  padding-left: 36px;
}
.section.service .tab-content .upcoming-services .uc-service-details .acc-content .icon-wrap {
  width: 25%;
}
.section.service .tab-content .upcoming-services .uc-service-details .acc-content .icon-wrap > p {
  font-size: 12px;
  line-height: 16px;
}
.section.service .tab-content .upcoming-services .autoacc-tab button {
  background: #181B2E;
  padding: 18px 21px;
  border-radius: 16px;
  border: none;
  color: #D2DEEB;
  font-size: 20px;
  line-height: 25px;
  font-weight: 500;
}
.section.service .tab-content .upcoming-services .autoacc-tab button.active {
  background: #2A2F50;
  color: #D2DEEB;
}
.section.service .tab-content .upcoming-services .autoacc-tab button.odd {
  margin-right: 12px;
}
.section.service .tab-content .upcoming-services .autoacc-tab button.even {
  margin-left: 12px;
}
.section.service .tab-content .brand-release {
  padding-top: 90px;
}
.section.service .tab-content .brand-release h3 {
  font-size: 20px;
  line-height: 26px;
  color: #816DEA;
}
.section.service .tab-content .brand-release .latest-launch .splide__pagination {
  display: block;
  text-align: center;
  bottom: -40px;
}
.section.service .tab-content .brand-release .latest-launch .splide__track .splide__list .splide__slide .br-content span {
  display: block;
  position: absolute;
  left: 50px;
  top: 0px;
  padding: 5px 20px;
  background: #22E7C9;
  color: #1D2037;
}
.section.service .tab-content .brand-release .latest-launch .splide__track .splide__list .splide__slide .br-content .details {
  position: absolute;
  left: 40px;
  bottom: 70px;
}
.section.service .tab-content .brand-release .latest-launch .splide__track .splide__list .splide__slide .br-content .details h4 {
  font-size: 16px;
  line-height: 18px;
  text-transform: uppercase;
}
.section.service .tab-content .brand-release .latest-launch .splide__track .splide__list .splide__slide .br-content .details h2 {
  font-size: 72px;
  line-height: 72px;
}
.section.service .tab-content .brand-release .latest-launch .splide__track .splide__list .splide__slide .br-content img {
  border-radius: 16px;
}
.section.service .tab-content .brand-release .upcoming-launch-wrapper {
  cursor: url("../img/hover-mouse-img.svg"), auto;
}
.section.service .tab-content .brand-release .upcoming-launch-wrapper .splide__track .splide__list .splide__slide .upcoming-launch img {
  width: 100%;
  border-radius: 16px;
  -o-object-fit: cover;
     object-fit: cover;
}
.section.b-works {
  padding-top: 66px;
}
.section.b-works .bottom-count {
  padding-bottom: 40px;
}
.section.b-works .work-process {
  padding: 24px 0px 40px 64px;
  border-left: 1px solid #223944;
}
.section.b-works .work-process.last {
  border-right: 1px solid #223944;
}
.section.b-works .work-process .count h3 {
  color: #816DEA;
}
.section.b-works .work-process .icon > svg {
  position: absolute;
  left: 0;
}
.section.b-works .work-process .details {
  max-width: 200px;
}
.section.b-works .work-process .details h3 {
  color: #816DEA;
}
.section.contact .ellipse {
  position: absolute;
  left: -500px;
  top: 0;
}
.section.contact .left-details h3 {
  color: #22E7C9;
}
.section.contact .left-details p {
  font-family: "Space Grotesk", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}
.section.contact .contact-form {
  background: #191919;
  padding: 52px 67px;
  margin-bottom: 50px;
  border-radius: 32px;
  border: 1px solid #333333;
  width: 80%;
}
.section.contact .contact-form form {
  position: relative;
}
.section.contact .contact-form p {
  width: 100%;
  margin-bottom: 0;
}
.section.contact .contact-form p span.wpcf7-form-control-wrap {
  width: 100%;
}
.section.contact .contact-form p span.wpcf7-form-control-wrap .wpcf7-not-valid-tip {
  display: none !important;
}
.section.contact .contact-form input, .section.contact .contact-form textarea {
  background-color: #0D0D0D;
  border: 1px solid #333333;
  -webkit-box-shadow: none;
          box-shadow: none;
  padding: 18px 12px;
  color: #D2DEEB;
  font-family: "Archivo", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
  border-radius: 12px;
}
.section.contact .contact-form input::-webkit-input-placeholder, .section.contact .contact-form textarea::-webkit-input-placeholder {
  font-family: "Archivo", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
  color: #666666; /* Change this to your desired placeholder color */
  opacity: 1; /* Optional: Ensures full opacity on all browsers */
}
.section.contact .contact-form input::-moz-placeholder, .section.contact .contact-form textarea::-moz-placeholder {
  font-family: "Archivo", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
  color: #666666; /* Change this to your desired placeholder color */
  opacity: 1; /* Optional: Ensures full opacity on all browsers */
}
.section.contact .contact-form input:-ms-input-placeholder, .section.contact .contact-form textarea:-ms-input-placeholder {
  font-family: "Archivo", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
  color: #666666; /* Change this to your desired placeholder color */
  opacity: 1; /* Optional: Ensures full opacity on all browsers */
}
.section.contact .contact-form input::-ms-input-placeholder, .section.contact .contact-form textarea::-ms-input-placeholder {
  font-family: "Archivo", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
  color: #666666; /* Change this to your desired placeholder color */
  opacity: 1; /* Optional: Ensures full opacity on all browsers */
}
.section.contact .contact-form input::placeholder, .section.contact .contact-form textarea::placeholder {
  font-family: "Archivo", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
  color: #666666; /* Change this to your desired placeholder color */
  opacity: 1; /* Optional: Ensures full opacity on all browsers */
}
.section.contact .contact-form input:focus, .section.contact .contact-form textarea:focus {
  border: 1px solid #261A66;
}
.section.contact .contact-form textarea {
  height: 86px;
}
.section.contact .contact-form input.wpcf7-not-valid {
  border: 1px solid red;
}
.section.contact .contact-form .input-group.phone > .input-group-prepend {
  width: 15%;
}
.section.contact .contact-form .input-group.phone > .input-group-prepend > p {
  width: 100%;
}
.section.contact .contact-form .input-group.phone > .input-group-prepend > p span.wpcf7-form-control-wrap {
  width: 100%;
}
.section.contact .contact-form .input-group.phone > .input-group-prepend > p span.wpcf7-form-control-wrap input {
  width: 100%;
  border-radius: 12px 0 0 12px;
  border-right: 0.5px solid #333333;
}
.section.contact .contact-form .input-group.phone > .input-group-prepend > p span.wpcf7-form-control-wrap input:focus {
  border-right: 2px solid #261A66;
}
.section.contact .contact-form .input-group.phone > .input-group-prepend > p span.wpcf7-form-control-wrap input.wpcf7-not-valid {
  border-right: 0.5px solid red;
}
.section.contact .contact-form .input-group.phone p {
  width: 85%;
}
.section.contact .contact-form .input-group.phone p span.wpcf7-form-control-wrap input {
  border-radius: 0 12px 12px 0;
  border-left: 0.5px solid #333333;
}
.section.contact .contact-form .input-group.phone p span.wpcf7-form-control-wrap input:focus {
  border-left: 1px solid #261A66;
}
.section.contact .contact-form .input-group.phone p span.wpcf7-form-control-wrap input.wpcf7-not-valid {
  border-left: 1px solid red;
}
.section.contact .contact-form .wpcf7-response-output {
  position: absolute;
  bottom: 0;
  width: 100%;
  text-align: center;
  border: none;
  color: green;
  font-size: 14px;
  line-height: 18px;
  padding: 0;
  margin: 0;
}
.section.contact .contact-form .invalid .wpcf7-response-output {
  display: none !important;
}
.section.contact .contact-form .wpcf7-submit {
  height: 65px;
  background: -webkit-gradient(linear, left top, right top, from(#22E7C9), to(#816DEA));
  background: linear-gradient(90deg, #22E7C9 0%, #816DEA 100%);
  color: #0D0B17;
  border-radius: 32px;
  text-transform: uppercase;
  font-size: 16px;
  line-height: 18px;
}
.section.contact .contact-form .wpcf7-spinner {
  display: none !important;
}
@media (max-width: 1400px) {
  .section.contact .contact-form {
    padding: 45px 50px;
    margin-bottom: 32px;
  }
  .section.contact .contact-form input, .section.contact .contact-form textarea {
    padding: 14px 8px;
  }
}
.section.footer .footer-top .secondary-f .f-address {
  color: #816DEA;
}
.section.footer .footer-bottom {
  padding: 20px 0 44px 0;
  border-top: 1px solid #223944;
}
.section.footer .social-media a {
  -webkit-transition: 4s all ease;
  transition: 4s all ease;
}
.section.footer .social-media a.mail:hover svg path:nth-child(1) {
  fill: #1d2037;
  -webkit-transition: 1s all ease;
  transition: 1s all ease;
}
.section.footer .social-media a.mail:hover svg path:nth-child(2) {
  stroke: #816dea;
  -webkit-transition: 1s all ease;
  transition: 1s all ease;
}
.section.footer .social-media a:hover svg rect {
  fill: #816dea;
  -webkit-transition: 2s all ease;
  transition: 2s all ease;
}
.section.footer .social-media a:hover svg > path {
  fill: #1d2037;
  -webkit-transition: 1s all ease;
  transition: 1s all ease;
}
.section.footer .social-media a:hover svg g > g path {
  fill: #1d2037;
  -webkit-transition: 1s all ease;
  transition: 1s all ease;
}

#section1 {
  background-color: #0D0D0D;
}

#section2, #section7, #section9, #section11, #section8 {
  background-color: #0D0D0D;
}

#section3 {
  background-color: #1D2037;
  width: 110vw;
}

#section4 {
  background-color: #0D0D0D;
  width: 150vw;
}

#section5 {
  background-color: #22E7C9;
}

#section6 {
  background-color: #1D2037;
  width: 140vw;
}

#section10 {
  background-color: #0D0D0D;
  width: 220vw;
}

#section12 {
  background-color: #1D2037;
  width: 40vw;
}

@media (max-width: 1400px) {
  .section.service .service-tab .nav button {
    padding-left: 36px;
    font-size: 21px;
    line-height: 28px;
  }
  .section.service .service-tab .nav button.active {
    padding-left: 48px;
  }
  .section.service .tab-content .autoacc-details .tab-content .tab-pane .acessories img {
    width: 500px;
  }
  .section.service .tab-content .latest-launch .splide__track .splide__list .splide__slide .br-content img {
    height: 230px;
    -o-object-fit: cover;
       object-fit: cover;
  }
  .section.service .tab-content .upcoming-services {
    padding: 90px 24px 64px 24px;
  }
  .section.service .tab-content .upcoming-services .uc-service-details {
    padding: 18px;
  }
  .section.service .tab-content .upcoming-services .autoacc-tab button {
    padding: 12px 16px;
  }
}
@media (max-width: 1300px) {
  .section.hero .hero-img-360 {
    bottom: -90px;
  }
  .section.service .tab-content .autoacc-details .autoacc-tab button {
    width: 110px;
    height: 100px;
  }
}
@media (max-width: 1200px) {
  .section.hero .hero-img-360 {
    bottom: -120px;
  }
  .section.intro .auto-meter svg {
    width: 410px;
  }
  .section.intro .off-elements svg {
    width: 420px;
  }
  .section.intro .section-count {
    padding-left: 20px;
  }
  .section.intro .section-count .top {
    font-size: 180px;
    line-height: 200px;
  }
  .section.intro .mix-elements {
    bottom: 100px;
  }
  .section.intro .mix-elements svg {
    width: 400px;
  }
  .section.customer-base .left-section {
    padding: 100px 100px 24px 28px;
  }
  .section.customer-base .video-container .interface {
    padding: 100px 24px 24px 24px;
  }
  .section.blockchain .left-section {
    padding: 0 80px 40px 80px;
  }
  .section.vision .top-c {
    padding: 120px 120px 120px 120px;
  }
  .section.vision .top-c .union {
    left: 40px;
    top: 70px;
  }
  .section.vision .top-c .bottom-el {
    right: 85px;
    bottom: 85px;
  }
  .section.vision .bottom-c {
    padding: 0 120px;
  }
  .section.team .team-details .team-con img {
    width: 230px;
  }
  .section.service .service-tab .nav {
    padding-right: 50px;
  }
  .section.service .service-tab .nav button {
    font-size: 18px;
    line-height: 24px;
    padding-left: 28px;
  }
  .section.service .service-tab .nav button.active {
    padding-left: 38px;
  }
  .section.service .tab-content .autoacc-details .tab-content .acessories p {
    padding: 0 28px;
  }
}
@media (max-width: 991px) {
  .wrapper {
    overflow: initial;
  }
  .gsap-container {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    width: 100% !important;
    height: auto;
  }
  .section {
    width: 100%;
    height: auto;
  }
  .section.hero {
    height: 95vh;
  }
  .section.hero .hero-img-360 {
    bottom: 36px;
  }
  .section.hero .icon-auto {
    padding-top: 32px;
  }
  .section.intro {
    padding-top: 36px;
  }
  .section.intro .section-count {
    padding-left: 0;
    border-right: none;
  }
  .section.intro .section-count .top {
    font-size: 96px;
    line-height: 108px;
  }
  .section.intro .rectangle {
    bottom: initial;
    left: auto;
    right: -72px;
    top: -112px;
  }
  .section.intro .rectangle svg {
    width: 230px;
  }
  .section.intro .auto-meter {
    left: inherit;
    top: inherit;
    bottom: -50px;
    right: 0;
  }
  .section.intro .auto-meter svg {
    width: 250px;
  }
  .section.intro .off-elements {
    top: -150px;
    left: initial;
    right: 0;
  }
  .section.intro .off-elements svg {
    width: 200px;
  }
  .section.intro .mix-elements {
    bottom: initial;
    right: -35px;
    top: -174px;
    left: inherit;
  }
  .section.intro .mix-elements svg {
    width: 200px;
  }
  .section.intro .content.transparency {
    padding-bottom: 0;
    padding-top: 36px;
  }
  .section.intro.offer .content {
    padding-bottom: 0px;
  }
  .section.customer-base .left-section {
    padding: 36px 0;
  }
  .section.customer-base .left-section .top > p {
    font-size: 18px;
    line-height: 26px;
  }
  .section.customer-base .video-container .interface {
    padding: 36px 16px;
    border-right: none;
    border-bottom: 1px solid #1D2037;
  }
  .section.customer-base .video-container .interface.last {
    border-bottom: none;
  }
  .section.blockchain {
    padding-top: 36px;
  }
  .section.blockchain .left-section {
    padding: 0 16px;
  }
  .section.blockchain .b-blocks {
    padding-bottom: 36px;
  }
  .section.blockchain .b-blocks svg {
    width: 210px;
  }
  .section.vision .top-c {
    padding: 36px 0px;
  }
  .section.vision .top-c > p {
    font-size: 18px;
    line-height: 24px;
  }
  .section.vision .top-c .union {
    left: 0;
    top: 10px;
  }
  .section.vision .top-c .union svg {
    width: 50px;
  }
  .section.vision .top-c .bottom-el {
    right: 0;
    bottom: 50px;
  }
  .section.vision .top-c .bottom-el svg {
    width: 50px;
  }
  .section.vision .bottom-c {
    padding: 36px 0;
  }
  .section.vision .bottom-c svg {
    width: 200px;
  }
  .section.team {
    padding-left: 0;
    padding-top: 36px;
    overflow: hidden;
  }
  .section.team .team-details .team-con .testimonials .testi {
    max-width: 100%;
  }
  .section.b-works {
    padding-top: 36px;
  }
  .section.b-works .work-process {
    padding: 0;
  }
  .section.b-works .work-process .details {
    max-width: 100%;
  }
  .section.contact {
    padding-top: 36px;
  }
  .section.contact .left-details svg {
    width: 220px;
  }
  .section.contact .contact-form {
    width: 100%;
    padding: 32px;
    margin-bottom: 36px;
  }
  .section.footer {
    padding-top: 36px;
  }
  .section.footer .logo-3d img {
    width: 50%;
  }
  .section.service .service-tab {
    margin-top: 26px;
    position: sticky;
    top: 60px;
    z-index: 1;
    background: #1D2037;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .section.service .service-tab .nav {
    padding-right: 0;
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    overflow-x: auto; /* Enable horizontal scrolling */
    white-space: nowrap; /* Prevent content from wrapping */
    padding-bottom: 0px;
    cursor: -webkit-grab;
    cursor: grab;
    -ms-scroll-snap-type: x mandatory;
        scroll-snap-type: x mandatory; /* Enable mandatory snapping */
    -webkit-overflow-scrolling: touch; /* Enable momentum scrolling on iOS */
  }
  .section.service .service-tab .nav:active {
    cursor: -webkit-grabbing;
    cursor: grabbing; /* Change cursor when active */
  }
  .section.service .service-tab .nav::-webkit-scrollbar {
    display: none; /* Hide scrollbar for WebKit browsers */
  }
  .section.service .service-tab .nav button {
    font-size: 14px;
    line-height: 14px;
    padding: 8px 0;
    padding-left: 0;
    margin-right: 8px;
    border-bottom: none;
  }
  .section.service .service-tab .nav button.active {
    border-bottom: 1px solid #CDE5EF;
    padding-left: 0;
  }
  .section.service .tab-content .autoacc-details {
    padding-top: 60px;
  }
  .section.service .tab-content .autoacc-details .tab-content .acessories p {
    padding: 0;
    font-size: 14px;
    line-height: 18px;
  }
  .section.service .tab-content .autoacc-details .autoacc-tab {
    position: initial;
    -webkit-transform: translateX(0);
            transform: translateX(0);
    margin-bottom: 36px;
  }
  .section.service .tab-content .autoacc-details .autoacc-tab button {
    width: 104px;
  }
  .section.service .tab-content .buy-cell {
    padding: 28px 0;
  }
  .section.service .tab-content .buy-cell .bc-wrap {
    padding: 8px;
    border-radius: 8px;
  }
  .section.service .tab-content .buy-cell .bc-wrap::before {
    border-radius: 8px;
  }
  .section.service .tab-content .buy-cell .bc-wrap p {
    font-size: 14px;
    line-height: 18px;
    padding-top: 8px;
  }
  .section.service .tab-content .brand-release {
    padding-top: 28px;
    padding-bottom: 36px;
  }
  .section.service .tab-content .brand-release h3 {
    font-size: 14px;
    line-height: 18px;
  }
  .section.service .tab-content .brand-release .latest-launch .splide__track .splide__list .splide__slide .br-content .details {
    bottom: 20px;
    left: 25px;
  }
  .section.service .tab-content .brand-release .latest-launch .splide__track .splide__list .splide__slide .br-content .details h2 {
    font-size: 28px;
    line-height: 28px;
  }
  .section.service .tab-content .brand-release .latest-launch .splide__track .splide__list .splide__slide .br-content .details h4 {
    font-size: 10px;
    line-height: 10px;
  }
  .section.service .tab-content .brand-release .latest-launch .splide__track .splide__list .splide__slide .br-content img {
    height: 316px;
    -o-object-fit: cover;
       object-fit: cover;
  }
  .section.service .tab-content .upcoming-services {
    padding: 28px 0;
  }
  .section.service .tab-content .upcoming-services .uc-service-details {
    padding: 0 16px 16px 16px;
  }
  .section.service .tab-content .upcoming-services .uc-service-details .acc-img {
    text-align: center;
    background: -webkit-gradient(linear, left top, right top, from(#22E7C9), to(#816DEA));
    background: linear-gradient(90deg, #22E7C9 0%, #816DEA 100%);
    background-size: 100% 70%;
    background-repeat: no-repeat; /* Ensure the background does not repeat */
    background-position: center;
    border-radius: 8px;
  }
  .section.service .tab-content .upcoming-services .uc-service-details .acc-content .content {
    padding-left: 0;
  }
  .section.service .tab-content .upcoming-services .autoacc-tab button .first {
    font-size: 14px;
    line-height: 18px;
    width: 70%;
  }
  #section3, #section4, #section6, #section10, #section12 {
    width: 100vw;
  }
  #section8 {
    background: #1D2037;
  }
}