/* =========== common css =========== */
* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  line-height: normal;
}

ul {
  padding: 0;
  margin: 0;
}

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

a {
  text-decoration: none;
  color: inherit;
  transition: all 0.3s ease;

  &:hover {
    color: #FF4D02;
  }
}

::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

::-webkit-scrollbar-track {
  background: #a7a7a7;
}

::-webkit-scrollbar-thumb {
  background: #333333;
}

body {
  font-family: 'Karla';
  font-size: 18px;
  font-weight: 300;
  overflow-y: auto;
  overflow-x: hidden;
  color: #444444;
  position: relative;
  scroll-behavior: smooth;
}

h1,
h2,
h3,
h4,
h5,
h6,
.heading {
  font-family: 'Inter';
  color: #111111;
}

.color_primary_dark{
  color: #333333 !important;
}

.color_primary_dark_2{
  color: #111111 !important;
}

.color_theme_orange{
  color: #FF4D02 !important;
}

.text_light{
  color: #EEEEEE;
}

.common_section{
  padding: 50px 0;
}

.common_section_2{
  padding: 80px 0;
}

.btn {
  font-family: 'Inter';
  font-weight: 700;
  transition: all 0.3s ease;
  position: relative;
  font-size: 18px;
}

.btn_primary {
  color: #FF4D02;
  border: 1px solid #FF4D02;
  background: #FF4D020D;
  padding: 16px 28px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 18px;
  font-size: 18px;

  &:hover,
  &:active{
    color: #fff !important;
    background: #0D0A60 !important;
    border-color: #0D0A60 !important;
  }

  &:hover img,
  &:active img{
    filter: grayscale(9) brightness(9);
  }
}

h2 {
  font-weight: 800;
  font-size: 56px;
  line-height: 64px;
}

.section_para{
  line-height: 28px;
}

.fs-18{
  font-size: 18px !important;
}

.fw-800{
  font-weight: 800 !important;
}

.orange_link_hover{
  color: #FF4D02;

  &:hover{
    color: #0D0A60;
  }
}
/* =========== common css end =========== */

/* =========== header css start =========== */
header{
  padding: 0;
  position: absolute;
  width: 100%;
  z-index: 99999999;
  background: transparent;
  transition: all 0.3s ease;
}

header.scroll_header{
  position: fixed;
  top: 0;
  left: 0;
  box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
}

header.scroll_header .navbar {
  padding: 10px 0;
}

header.scroll_header .navbar,
header.offcanvas_expand .navbar{
  background: #fff;
}

header.offcanvas_expand::after {
  position: absolute;
  content: '';
  width: 83.5%;
  height: 1px;
  transform: translateX(-50%);
  left: 50%;
  bottom: 0;
  background: #00000026;
  z-index: 99999;
}

header .navbar{
  padding: 30px 0;
  position: relative;
  z-index: 9999;
  transition: all 0.3s ease;
}

.login_btn{
  color: #0D0A60;
  border: none !important;
  outline: none !important;
  padding: 0;

  &:hover,
  &:active{
    color: #FF4D02 !important;
  }
}

.signup_btn{
  color: #FF4D02;
  background: #FF4D020D;
  border-radius: 8px;
  padding: 10px 22px;

  &:hover,
  &:active{
    border: 1px solid #FF4D02;
    background: transparent !important;
    color: #FF4D02 !important;
  }
}

.offcanvas_toggle {
  border: 1px solid #FF4D02;
  background: #FF4D020D;
  border-radius: 12px;
  padding: 0;
  width: 47px;
  height: 47px;
  display: flex;
  justify-content: center;
  align-items: center;

  &:hover{
    border-color: #0D0A60 !important;
    background: transparent;
  }

  &:hover path{
    stroke: #0D0A60;
    fill: #0D0A60;
  }
}

.offcanvas_toggle svg path{
  transition: all 0.3s ease;
}

.offcanvas_toggle.clicked path:not(.cross_path){
  display: none;
}

.offcanvas_toggle.clicked path.cross_path{
  display: block !important;
}

.offcanvas_div {
  position: absolute;
  z-index: 99;
  height: calc(100vh - 109px);
  overflow: auto;
  background: #fff;
  width: 100%;
  top: 100%;
  opacity: 0;
  transition: all 0.6s ease-in-out;
  transform: translateY(-100%);
  display: flex;
  padding: 4rem 0;
}

header.scroll_header .offcanvas_div{
  height: calc(100vh - 69px); 
}

.offcanvas_div.show{
  opacity: 1;
  transform: translateY(0);
}

.navigation_ul li a {
  font-size: 30px;
  color: #111111;
  font-family: 'Inter';
  font-weight: 700;

  &:hover{
    color: #FF4D02;
  }
}
.navigation_ul li a.active, .ecosystem_nav_ul li a.active  {
  color: #ff4d02 !important;
}
.text-underline {
  text-decoration: underline;
}

.navigation_ul {
  gap: 30px;
}

.social_links_ul{
  gap: 14px;
}

.social_links_ul li a {
  display: flex;
  width: 55px;
  height: 55px;
  justify-content: center;
  align-items: center;
  border: 1px solid #FF4D02;
  color: #FF4D02;
  font-size: 30px;
  border-radius: 100%;
  transition: all 0.2s ease-in-out;

  &:hover{
    color: #0D0A60;
    border-color: #0D0A60;
    transform: scale(1.1);
  }
}

.offcanvas_bg_text {
  color: #000;
  font-family: 'Inter';
  font-weight: 800;
  font-size: 22rem;
  position: absolute;
  display: block;
  transform: translate(-50% , -50%);
  top: 50%;
  left: 50%;
  text-transform: uppercase;
  z-index: -1;
  opacity: 2%;
}

.ecosystem_nav_ul{
  gap: 25px;
}

.ecosystem_nav_ul li a{
  color: #444444;
  font-family: 'Inter';
  font-size: 24px;
  font-weight: 500;

  &:hover{
    color: #ff4d02;
  }
}
/* =========== header css end =========== */

/* =========== banner css start =========== */
.banner_section{
  background: linear-gradient(to right ,#ff4d000a , #FFFFFF , #ff4d000a);
  background: -webkit-linear-gradient(to right ,#ff4d000a , #FFFFFF , #ff4d000a);
  padding: 55px 0;
  position: relative;
  min-height: 100vh;
  overflow: hidden;
}

.banner_section .banner_main_img {
  animation: Rotate 40s linear infinite;
  -webkit-animation:Rotate 40s linear infinite;
  z-index: 0;
  position: relative;
  opacity: 0.9;
}

.banner_section .content_div{
  top: 13.5rem;
  left: 0;
  width: 100%;
  z-index: 1;
  padding: 0 20px;
}

.banner_section h1{
  font-weight: 900;
  font-size: 80px;
  line-height: 80px;
}

.banner_section p {
  font-size: 21px;
  font-weight: 500;
  line-height: 32px;
  color: #333333;
}

.sub_banner{
  padding: 9rem 0 3rem;
  align-items: center;
  display: flex;
}
/* =========== banner css end =========== */

/* =========== banner bottom section css start =========== */
.banner_bottom_section {
  background: #061130;
  background-image: url('../images/glow_ellipse_1.png');
  background-repeat: no-repeat;
  background-size: 55%;
  background-position: 0% 50%;
}
/* =========== banner bottom section css end =========== */

/* =========== connected lifestyle section css start =========== */
.connected_lifestyle {
  padding: 120px 0 !important;
  background: url('../images/glow_ellipse_2.png');
  background-repeat: no-repeat;
  background-position: 123% -53%;
  background-size: 35%;
}

@keyframes up_down
{
 0%{
  bottom: 24px;
 } 
 100%{
  bottom: -50px;
 }
}

@keyframes rotate_360
{
 0%{
  transform: rotate3d(0, 1, 0, 0deg);
 } 
 100%{
  transform: rotate3d(0, 1, 0, 360deg);
 }
}

.your_gatway_img_div .animation_img_1{
  right: 155px;
  bottom: 0;
  width: 27%;
  animation: up_down 3.5s infinite alternate linear;
}

.your_gatway_img_div .animation_img_2 {
  left: 28%;
  top: 45px;
  animation: rotate_360 6s infinite linear;
}
/* =========== connected lifestyle section css end =========== */

/* =========== our promise section css start =========== */
.our_promise_section{
  background: linear-gradient(to right ,#ff4d000a , #FFFFFF , #ff4d000a);
  background: -webkit-linear-gradient(to right ,#ff4d000a , #FFFFFF , #ff4d000a);
}

.card_type_1 .img_div {
  background: #FF4D0208;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 120px;
  height: 120px;
  border-radius: 18px;
}

.card_type_1 .img_div img{
  transition: all 0.3s ease;
}

@keyframes rotate_right{
  from{
    transform: rotate3d(0, 1, 0, 0deg);
  }
  to{
    transform: rotate3d(0, 1, 0, 360deg);
  }
}

.card_type_1{
  padding: 35px;
  height: 100%;
  border: none;
  border-radius: 14px; 
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; 
  position: relative;
  overflow: hidden;
  background: transparent;
  transition: all 0.3s ease;

  &:hover{
    transform: scale(1.04);
  }

  &:hover .img_div img{
    animation: 5s rotate_right linear infinite;
  }
}

.card_type_1::before {
  content: '';
  transform: translate(-50% , -50%);
  z-index: 0;
  background: conic-gradient(from -140deg,transparent 0% , #FF4D02 25% , transparent 50%);
  position: absolute;
  width: calc(100%* 2);
  padding-bottom: calc(100%* 2);
  left: 50%;
  top: 50%;
  transition: all 0.3s ease;
}

.card_type_1::after{
  content: '';
  position: absolute;
  background: #fff;
  top: 1px;
  bottom: 1px;
  left: 1px;
  right: 1px;
  border-radius: 14px;
  z-index: 1;
}

@keyframes spin {
  from {transform: translate(-50% , -50%) rotate(0deg);}
  to   {transform: translate(-50% , -50%) rotate(360deg);}
}

.card_type_1:hover::before{
  animation: spin 5s linear infinite;
}
/* =========== our promise section css end =========== */

/* =========== our vision and mission section css start =========== */
.vision_section{
  background: #001D42;
  background-image: url('../images/glow_ellipse_3.png');
  background-repeat: no-repeat;
  background-size: 55%;
  background-position: 0% 50%;
}

@keyframes up_down_2
{
 0%{
  top: 26.5%;
 } 
 100%{
  top: 30.5%;
 }
}

.vision_section .animation_img_1 {
  animation: 3s up_down_3 linear alternate infinite;
  left: 0;
}
@keyframes up_down_3 {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-30px);
  }
}

.w-fit-content {
  width: fit-content !important;
}
.mh-fit-content {
  min-height: fit-content;
}
.vision_section .animation_img_2{
  animation: 3s rotate_right linear alternate infinite;
  right: 0;
  top: 0;
}
/* =========== our vision and mission section css end =========== */

/* =========== what make us different section css start =========== */
.what_make_us_different_section {
  background: url('../images/glow_ellipse_half_orange.png') , url('../images/glow_ellipse_half_blue.png');
  background-repeat: no-repeat;
  background-size: 20%;
  background-position: 0% -50% , 100% 150%;
}

.accordion_type_1 .accordion-item {
  border: none !important;
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
  padding: 22px 18px;
  border-radius: 14px;
  background: #fff;
}

.accordion_type_1 .accordion-button{
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 26px;
  font-weight: 700;
  font-family: 'Inter'; 
}

.accordion_type_1 .accordion-button:not(.collapsed) {
  color: #FF4D02 !important;
}

.accordion_type_1 .accordion-button::after {
  display: none;
}

.accordion_type_1 .accordion-button span{
  display: block;
  width: 36px;
  min-width: 36px;
  height: 36px;
  min-height: 36px;
  border-radius: 8px;
  border: 2px solid #FF4D02;
  position: relative;
}

.accordion_type_1 .accordion-button span::after,
.accordion_type_1 .accordion-button span::before{
  position: absolute;
  content: '';
  background: #FF4D02;
  width: 14px;
  height: 2px;
  transform: translate(-50% , -50%);
  top: 50%;
  left: 50%;
  transition: all 0.3s ease;
}

.accordion_type_1 .accordion-button span::after {
  width: 2px;
  height: 14px;
  transform-origin: 0px 0px;
}

.accordion_type_1 .accordion-button:not(.collapsed) span::after{
  rotate: 90deg;
}

.accordion_type_1 .accordion-body p {
  margin: 0;
  color: #444444;
  line-height: 28px;
  font-weight: 400;
}
/* =========== what make us different section css end =========== */

/* =========== our ecosystem section css start =========== */
.our_ecosystem_section{
  background: linear-gradient(to right ,#ff4d000a , #FFFFFF , #ff4d000a);
  background: -webkit-linear-gradient(to right ,#ff4d000a , #FFFFFF , #ff4d000a);
}

.ecosystem_slider .swiper-slide .main_img {
  width: 100%;
  height: auto;
  transition: all 0.3s ease;

  &:hover{
    transform: scale(1.02);
  }
}

.ecosystem_slider .swiper-slide .img_div{
  background: #fff;
  width: 55px;
  height: 55px;
  border-radius: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
}

.ecosystem_slider h3{
  font-size: 20px;
  font-weight: 800;
}

.ew_red_box {
  animation: 4s up_down_5 linear alternate infinite;
  left: 38%;
  top: 19%;
  width: 8%;
}
@keyframes up_down_5 {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
}
.ew_blue_box {
  animation: 2s up_down_4 linear alternate infinite;
  right: 42%;
  top: 53%;
  width: 6%;
}
@keyframes up_down_4 {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}
.ew_red_box_last {
  animation: 3s up_down_3 linear alternate infinite;
  right: 32%;
  top: 19%;
  width: 8%;
}
@keyframes up_down_3 {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-30px);
  }
}
.ew_white_box {
  animation: 5s up_down_3 linear alternate infinite;
  right: 40%;
  top: 30%;
  width: 7%;
}

/* =========== our ecosystem section css end =========== */

/* =========== get involved section css start =========== */
.get_involved_section{
  background: #071230;
  background-image: url('../images/glow_ellipse_1.png');
  background-repeat: no-repeat;
  background-size: 55%;
  background-position: 100% 50%;
}
/* =========== get involved section css end =========== */

/* =========== footer section css start =========== */
footer{
  background: linear-gradient(to right ,#ff4d000a , #FFFFFF , #ff4d000a);
  background: -webkit-linear-gradient(to right ,#ff4d000a , #FFFFFF , #ff4d000a);
  padding: 90px 0 0;
}
footer a {
  width: fit-content;
}
footer .social_links_ul li a {
  width: 40px;
  height: 40px;
  font-size: 24px;
}

.scroll_top_button {
  position: fixed;
  right: 40px;
  bottom: 40px;
  background: #FF4D02;
  border: none !important;
  border-radius: 10px;
  padding: 0 !important;
  width: 40px;
  height: 40px;
  top: unset !important;
  opacity: 0;
  z-index: -5;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
}

.scroll_top_button.visible_btn {
  opacity: 0.2;
  z-index: 99;

  &:hover {
    opacity: 1;
    background: #FF4D02;
  }
}

footer h3 {
  font-size: 22px;
  font-weight: 800;
}

.footer_nav_links{
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-weight: 500;
}

.footer_bottom_row {
  color: #111111;
  font-weight: 500;
  font-size: 16px;
  border-top: 1px solid transparent;
  border-image: linear-gradient(to right, #FF4D0200 , #FF4D02 , #FF4D0200);
  border-image-slice: 1;
}

.footer_nav_links li a:hover,
.footer_nav_links li a:active,
.terms_privacy_ul li a:hover,
.terms_privacy_ul li a:active{
  color: #FF4D02;
}

.line_div{
  border-right: 1px solid transparent;
  border-image: linear-gradient(to top, #FF4D0200 , #FF4D02 , #FF4D0200);
  border-image-slice: 1;
  height: 100%;
}

.footer_subscribe_form .btn_primary{
  color: #fff !important;
  background: #0D0A60 !important;
  border: none !important;
  top: unset !important;
  min-width: max-content;
  padding: 14px 16px;

  &:hover{
    background: #FF4D02 !important;
  }
}

.footer_subscribe_form input {
  box-shadow: none !important;
  outline: none !important;
  border: 1px solid #0000001A !important;
  border-radius: 14px;
  margin-right: -28px;
  height: 55px;
  padding: 12px 40px;
  max-width: 350px;
}

.footer_subscribe_form input::placeholder{
  color: #999999;
}

.footer_subscribe_form .input_div::after {
  position: absolute;
  content: '';
  background: url('../images/subscribe_mail_icon.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  width: 24px;
  height: 24px;
  transform: translateY(-50%);
  top: 50%;
  left: 12px;
}
/* =========== footer section css end =========== */

/* =========== about us page css start =========== */
.about_banner_vector {
  border: 1px solid #ff4d02;
  border-radius: 100%;
  background: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-46%) translateX(-54%);
  padding: 25px;
}

.who_we_are_section{
  min-height: 90vh;
  background-position: 50% 50%;
  background-size: 85% 100%;
}

.what_we_do_section{
  background: #001D42;
  background-image: url('../images/glow_ellipse_3.png');
  background-repeat: no-repeat;
  background-size: 55%;
  background-position: 50% 50%;
}

.our_commitment_section{
  border-top: 1px solid transparent;
  border-image: linear-gradient(to right, #FF4D0200 , #FF4D02 , #FF4D0200);
  border-image-slice: 1;
}

.our_commitment_section .accordion-item {
  flex-grow: 1;
  transition: all 1s ease;
  padding: 0px;
  border: none;
  border-radius: 14px;
  box-shadow: none;
  position: relative;
  overflow: hidden;
  background: transparent;
  min-width: 19rem;
  width: 19rem;
}

.our_commitment_section .accordion-item::before {
  content: '';
  transform: translate(-50% , -50%);
  z-index: 0;
  background: conic-gradient(from -140deg,#EDEDED 15% , #FF4D02 25% , #EDEDED 40%);
  position: absolute;
  width: calc(100%* 2);
  padding-bottom: calc(100%* 2);
  left: 50%;
  top: 50%;
  transition: all 0.7s ease;
}

.our_commitment_section .accordion-item::after {
  content: '';
  position: absolute;
  background: #fff;
  top: 1px;
  bottom: 1px;
  left: 1px;
  right: 1px;
  border-radius: 14px;
  z-index: 1;
}

.our_commitment_section .accordion-item:has(.accordion-button:not(.collapsed)) {
  /* flex-grow: 4; */
  width: 100%;
}

.our_commitment_section .accordion-item:has(.accordion-button:not(.collapsed))::before {
  background: #FF4D02;
}

.our_commitment_section .accordion-item .accordion-button{
  padding: 35px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  height: 100%;
  max-height: 360px;
  min-height: 360px;
}

.our_commitment_section .accordion-item .accordion-button p{
  font-size: 18px;
  font-weight: 400;
  color: #444444 !important;
  transition: all 1s ease !important;
  max-height: 52px;
  overflow: hidden;
  opacity: 0;
}

.our_commitment_section .accordion-item:has(.accordion-button:not(.collapsed)) p{
  opacity: 1;
}

.our_commitment_section .img_div {
  background: #FF4D0208;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 120px;
  height: 120px;
  border-radius: 18px;
}

.our_commitment_section .accordion-button span {
  display: block;
  width: 36px;
  min-width: 36px;
  height: 36px;
  min-height: 36px;
  border-radius: 8px;
  border: 2px solid #FF4D02;
  position: absolute;
  bottom: 35px;
  background: #fff;
  left: 35px;
  z-index: 2;
}

.our_commitment_section .accordion-button span::after, 
.our_commitment_section .accordion-button span::before {
  position: absolute;
  content: '';
  background: #FF4D02;
  width: 14px;
  height: 2px;
  transform: translate(-50% , -50%);
  top: 50%;
  left: 50%;
  transition: all 0.3s ease;
}

.our_commitment_section .accordion-button span::after {
  width: 2px;
  height: 14px;
  transform-origin: 0px 0px;
}

.our_commitment_section .accordion-button:not(.collapsed) span::after {
  rotate: 90deg;
}

.our_commitment_section .accordion-button::after {
  display: none !important;
}

.about_banner_vector img {
  animation: zoom-in-zoom-out 4s linear infinite;
  -webkit-animation: zoom-in-zoom-out 4s linear infinite;
}

@keyframes zoom-in-zoom-out {
  0% {
    scale: 150%;
  }
  50% {
    scale: 50%;
  }
  100% {
    scale: 150%;
  }
}

.zoom_in_out {
  animation: zoom-in-zoom-out 4s linear infinite;
  -webkit-animation: zoom-in-zoom-out 4s linear infinite;
}

@keyframes zoom-in-zoom-out {
  0% {
    scale: 100%;
  }
  50% {
    scale: 80%;
  }
  100% {
    scale: 100%;
  }
}
.zoom_in_out_1 {
  animation: zoom-in-zoom-out-1 3s linear infinite;
  -webkit-animation: zoom-in-zoom-out-1 3s linear infinite;
}
@keyframes zoom-in-zoom-out-1 {
  0% {
    scale: 100%;
  }
  50% {
    scale: 70%;
  }
  100% {
    scale: 100%;
  }
}


.connected_lifestyle_box {
  animation: 3s up_down_3 linear alternate infinite;
  right: 29%;
  transform: translateX(-50%);
  top: 22%;
  position: absolute;
  width: 10%;
}

.our_vision_globe {
  position: absolute;
  height: 100%;
  width: 100%;
  background: url("../images/map.jpg");
  background-size: 200%;
  border-radius: 100%;
  box-shadow: inset 0 0 150px 4px #cacaca08;
  animation-name: rotate;
  animation-duration: 32s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  transform: rotate(-10deg);
}
.our_vision_globe::before {
  content: "";
  background: url(../images/map_outline.png);
  position: absolute;
  width: 100%;
  height: 100%;
  left: 50%;
  transform: rotate(9deg) translateX(-57%) translateY(-41%);
  background-size: cover;
  top: 50%;
  opacity: 0.7;
}
.our_vision_globe::after {
  content: "";
  background: url(../images/gloab_shadow.png);
  position: absolute;
  width: 100%;
  height: 100%;
  left: 50%;
  transform: rotate(9deg) translateX(-57%) translateY(-29%);
  background-size: 64%;
  top: 50%;
  background-repeat: no-repeat;
  background-position: center bottom;
}
@keyframes rotate {
    from {
        background-position: 0;
    }
    to {
        background-position: 500px;
    }
}
.our_vision_globe_main {
  position: absolute;
  height: 15% !important;
  width: 13% !important;
  right: 31% !important;
  transform: translateX(0%) translateY(7%);
  justify-content: center;
  display: flex;
  bottom: 34%;
  z-index: 0;
}


.wtg_globe {
  position: absolute;
  height: 100%;
  width: 100%;
  background: url("../images/dark_map.jpg");
  background-size: 200%;
  border-radius: 100%;
  box-shadow: inset 0 0 150px 4px #cacaca08;
  animation-name: rotate;
  animation-duration: 32s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  transform: rotate(-10deg);
}
.wtg_globe_main {
  position: absolute;
  height: 18% !important;
  width: 17% !important;
  left: 36.5% !important;
  transform: translateX(0%) translateY(7%);
  justify-content: center;
  display: flex;
  top: 2%;
  z-index: 0;
}

.ju_globe {
  position: absolute;
  height: 100%;
  width: 100%;
  background: url("../images/ju_global.png");
  background-size: 200%;
  border-radius: 100%;
  box-shadow: inset 0 0 150px 4px #cacaca08;
  animation-name: rotate;
  animation-duration: 32s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  transform: rotate(-10deg);
}
.ju_globe_main {
  position: absolute;
  height: 18% !important;
  width: 15% !important;
  left: 45% !important;
  transform: translateX(0%) translateY(7%);
  justify-content: center;
  display: flex;
  top: -16%;
}
.ju_globe::before {
  content: "";
  background: url(../images/ju_map_outline.png);
  position: absolute;
  width: 128%;
  height: 100%;
  left: 50%;
  transform: rotate(9deg) translateX(-57%) translateY(-41%);
  background-size: 100%;
  top: 50%;
  opacity: 0.7;
  background-repeat: no-repeat;
}
/* =========== about us page css end =========== */

/* =========== ecosystem page css start =========== */
.ecosystem_banner_img_section{
  margin-bottom: -48px;
  overflow: hidden;
}
.ecosystem_banner_vector {
  position: absolute;
  left: 0;
  bottom: 0px;
  z-index: 1;
}
.ecosystem_banner_dots {
  position: absolute;
}
.ecosystem_banner_dot {
  position: absolute;
  left: 58%;
  top: 19%;
  width: 5%;
}
.ecosystem_banner_img {
  -webkit-animation: Rotate 40s linear infinite;
  animation: Rotate 40s linear infinite;
}
@-webkit-keyframes Rotate {
  from {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

.key_features_of_ecosystem h3 {
  font-size: 26px;
  font-weight: 700;
}

.key_features_of_ecosystem .img_div {
  background: #fff;
  width: 60px;
  height: 60px;
  border-radius: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
}

.key_features_of_ecosystem .key_features_row img{
  transition: all 0.3s ease;

  &:hover{
    scale: 1.05;
  }
}

.how_our_ecosystem_works{
  background: #001D42;
  background-image: url('../images/glow_ellipse_3.png');
  background-repeat: no-repeat;
  background-size: 55%;
  background-position: 50% 50%;
}

.how_our_ecosystem_works .accordion_type_1 .accordion-item {
  background: #ffffff26;
}

.how_our_ecosystem_works .accordion-item:has(.accordion-button:not(.collapsed)) {
  background: #fff;
}

.how_our_ecosystem_works  .accordion_type_1 .accordion-button {
  color: #fff;
}

.join_our_ecosystem{
  background-position: 0% 50%;
}
/* =========== ecosystem page css end =========== */

/* =========== team page css start =========== */
.meet_our_team_section .team_img_div{
  position: relative;
  overflow: hidden;
  width: auto;
  height: auto;
  border-radius: 12px;
}

.meet_our_team_section .team_img_div::after{
  position: absolute;
  content: '';
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: linear-gradient(#ff4e036e, #ffffff);
  z-index: 0;
  transition: all 0.4s ease;
  opacity: 0.28;
}

.meet_our_team_section .team_img_div:hover::after{
  opacity: 1;
}

.team_member_img{
  position: relative;
  z-index: 1;
}
/* =========== team page css end =========== */

/* =========== contact page css start =========== */
.contact_section ::placeholder{
  color: #999999;
  font-size: 20px;
  line-height: normal;
  font-weight: 500;
}

.contact_section .form-control{
  box-shadow: none !important;
  border: 1px solid #CCCCCC !important;
  outline: none !important;
  padding: 20px;
  line-height: normal;
  font-size: 20px;
  border-radius: 12px;
}

input[type=number] {
  appearance: textfield;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

textarea{
  resize: none !important;
}

.contact_us_vector {
  position: absolute;
  left: 42.6%;
  bottom: 34%;
  width: 15%;
  animation:5s up_down_3 linear alternate infinite;
}
/* =========== contact page css end =========== */

/* =========== tiebixpay page css start =========== */
.introduction_section{
  background-size: 55%;
  background-position: 100% 50%;
}

.tiebixpay_coin {
  position: absolute;
  width: 50%;
  left: 26%;
  animation: 3s up_down_3 linear alternate infinite;
  bottom: 25%;
}

.key_features_section h3{
  font-size: 28px;
  font-weight: 700;
  padding: 18px;
  background: linear-gradient(to right, #ff4e031a, #ffffff);
}

.features_ul span{
  font-weight: 700;
  color: #111111;
}

.features_ul li {
  line-height: 28px;
  font-weight: 400;
  position: relative;
  padding-left: 16px;
}

.features_ul li::after{
  content: '';
  position: absolute;
  background: #FF4D02;
  border-radius: 100%;
  width: 8px;
  height: 8px;
  left: 0;
  top: 10px;
}

.features_ul{
  display: flex;
  flex-direction: column;
  gap: 12px;
}
/* =========== tiebixpay page css end =========== */

@keyframes path_move{
  0%{
      offset-distance: 0%;
      z-index: 1;
  }
  22%{
      z-index: 4;
  }
  30%{
    z-index: 4;
  }
  85%{
      z-index: 1;
  }
  86%{
      z-index: 4;
  }
  100%{
      offset-distance: 100%;
      z-index: 4;  
  }
}

.circle_div {
  width: 25px;
  min-width: 25px;
  min-height: 25px;
  height: 25px;
  border-radius: 100%;
  background: #FF4D02;
  position: absolute;
  top: 68px;
  left: 60px;
  animation: path_move 8s linear infinite;
  offset-distance: 0%;
  offset-path: path("M0.761 19.2804C13.6708 15.6849 33.6908 11.2287 58.5141 7.76196C119.094 -0.685385 153.778 -0.912115 218.720 8.08097C239.061 10.9581 280.958 18.961 285.304 43.2814C285.744 50.3219 287.261 62.253 221.003 91.6637C185.545 108.611 111.286 147.595 94.0576 163.733C52.4023 190.449 -1.5244 237.892 114.637 242.244C234.042 242.881 395.785 256.452 422.084 277.766C448.384 299.08 485.989 345.505 432.525 388.509C410.672 400.94 338.861 420.239 222.984 397.41C204.810 392.609 167.280 380.918 161.293 374.392");
  /* offset-path: path("M0% 4.82% C2.73% 3.92%, 6.74% 2.81%, 11.74% 1.94% C24.31% -0.17%, 30.78% -0.23%, 44.64% 2.02% C48.79% 2.74%, 56.19% 4.74%, 57.06% 10.82% C57.15% 12.58%, 57.45% 15.56%, 44.2% 22.91% C37.11% 27.15%, 22.26% 36.89%, 18.81% 40.93% C10.48% 47.61%, -0.31% 59.47%, 22.93% 60.56% C46.81% 60.72%, 79.16% 64.11%, 84.42% 69.44% C89.68% 74.78%, 97.19% 86.38%, 86.51% 97.13% C82.13% 100.24%, 67.77% 105.06%, 44.2% 99.35% C40.96% 98.15%, 33.46% 95.23%, 32.26% 93.60%"); */

}






.swiper-slide {
  transition: transform 0.8s ease-in-out;
}

.get_involved_section .bulb-container {
  left: 0%;
  width: 100%;
  justify-content: center;
  display: flex;
}
.get_involved_section .bulb-container img {
  width: 42%;
}

.how_untie_fitness_section .zoom_in_out {
  position: absolute;
  right: 5%;
  bottom: 58%;
  width: 10%;
}
.how_untie_fitness_section .zoom_in_out_1 {
  position: absolute;
  right: 33%;
  bottom: 49%;
  width: 10%;
}

.untie_fitness_vision_1 {
  position: absolute;
  left: 7%;
  top: 16%;
  width: 30%;
  animation: 5s up_down_3 linear alternate infinite;
}
.untie_fitness_vision_2 {
  position: absolute;
  left: 34%;
  top: 2%;
  width: 20%;
  animation: 3s up_down_4 linear alternate infinite;
}
.untie_fitness_vision_3 {
  position: absolute;
  left: 35.5%;
  bottom: 33%;
  width: 20%;
  animation: 3s up_down_3 linear alternate infinite;
}

.trophy_vector {
  position: absolute;
  top: 29%;
  left: 40%;
  width: 17%;
}

#toast-container {
  position: fixed;
  z-index: 999999999 !important;
}

.help-block {
  color: red;
}