@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

:root {

  --primary-color: #d6f236;

  --primary: #d6f236;

  --dark-bg: #171717;

  --card-bg: #1e1e1e;

  --border-color: #2d2d2d;

  --text-primary: #ffffff;

  --text-secondary: rgba(255, 255, 255, 0.8);

  --Angular: conic-gradient(from 180deg at 50% 50%,

      rgba(255, 255, 255, 0.60) 50.025deg,

      rgba(153, 153, 153, 0.10) 144deg,

      rgba(255, 255, 255, 0.60) 216deg,

      rgba(153, 153, 153, 0.10) 306deg);

}



.text-primary {

  color: var(--primary) !important;

}



* {

  margin: 0;

  padding: 0;

  box-sizing: border-box;

}



body {

  background-color: var(--dark-bg);

  color: var(--text-primary);

  overflow-x: hidden;

  font-family: 'Satoshi', sans-serif;

}



.error {

  color: #e71919;

  font-size: 12px;

}

.error > a {

  color: #fff;

  text-decoration: none;

}

.success {

  color: green;

  font-weight: 500;

}



.btn {

  padding: 0.5rem 1.5rem;

  border-radius: 0.75rem;

  font-size: 0.875rem;

  font-weight: 500;

  border: none;

  cursor: pointer;

  transition: all 0.3s;

}



.btn-secondary-brand {

  position: relative;

  overflow: hidden;

}



.btn-primary-brand {

  background-color: var(--primary-color);

  color: var(--dark-bg);

  padding: 8px 24px;

}



.btn-primary-brand::before,

.btn-primary-brand::after,

.btn-secondary-brand:after,

.btn-secondary-brand:before {

  content: '';

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  z-index: 0;

}



.btn-primary-brand {

  position: relative;

  overflow: hidden;

  /* background: rgb(0 0 0 / 40%); */

  color: #000;

}



.btn-primary-brand::before,

.btn-secondary-brand:before {

  content: "";

  /* background: #000; */

  /* color: #1E1E1E; */

  width: 120%;

  left: -10%;

  transform: skew(30deg);

  transition: transform 0.4s cubic-bezier(0.3, 1, 0.8, 1);

  z-index: -1;

}



.btn-secondary-brand:before {

  /* background: var(--primary-color); */

  background: radial-gradient(111.42% 170.43% at 83.26% 142.62%, rgba(255, 255, 255, 0.00) 79.1%, rgba(255, 255, 255, 0.10) 100%), rgba(0, 0, 0, 0.35);

}



.btn-primary-brand:hover::before {

  background: rgb(0 0 0 / 1);

  transform: translate3d(100%, 0, 0);

  z-index: 1;

}



.btn-secondary-brand:hover::before {

  background: var(--primary-color);

  transform: translate3d(100%, 0, 0);

  z-index: 1;

}







/* .btn-primary:hover {

  background-color: var(--primary-color);

  transform: translateY(-2px);

  color: var(--dark-bg);

} */



.btn-ghost {

  color: #fff;

  padding: 8px 24px;

  border-radius: 12px;

  border: 1px solid #FFF;

  background: radial-gradient(111.42% 170.43% at 83.26% 142.62%, rgba(255, 255, 255, 0.00) 79.1%, rgba(255, 255, 255, 0.10) 100%), rgba(0, 0, 0, 0.35);

}







.btn-ghost:hover {

  border: 1px solid #FFF;

  background: radial-gradient(111.42% 170.43% at 83.26% 142.62%, rgba(255, 255, 255, 0.00) 79.1%, rgba(255, 255, 255, 0.10) 100%), rgba(0, 0, 0, 0.35);

}



.btn-lg {

  padding: 0.75rem 2rem;

  font-size: 1rem;

}



.breadcrumb-item+.breadcrumb-item::before {

  color: #fff;

}





/* Navigation */

.navbar {

  background: rgba(0, 0, 0, 0.1);

  backdrop-filter: blur(10px);

  padding: 16px 52px 16px 44px;

  /* border-bottom: 1px solid rgba(255, 255, 255, 0.05); */

}



/* .navbar.fixed-top {

            background: rgba(0, 0, 0, 0.5);

        } */



/* .navbar-brand {

position: absolute;

  left: 50%;

  transform: translateX(-50%); 

} */



.navbar-nav .nav-link {

  color: #fff !important;

  margin: 0 1.5rem;

  font-size: 14px;

  transition: color 0.3s;

}



.navbar-nav .nav-item:first-child .nav-link {

  margin-left: 0;

}



.navbar-nav .nav-link:hover {

  color: #D6F236 !important;

}



.offcanvas-header .btn-close {

  color: #fff !important;

    opacity: 1;

    font-size: 18px;

}

.offcanvas-header .btn-close:focus {

  outline: 0;

  box-shadow: none;

}

.offcanvas-title {

  font-size: 16px;

}

.offcanvas-header .btn-close:hover {

  color: #D6F236 !important;

}



.offcanvas-end.bg-black {

      background: rgba(0, 0, 0, 0.7) !important;

    --bs-offcanvas-width: 260px;

}



.pr-0 {

  padding-right: 0;

}



.offcanvas-menu ul li a {

  text-decoration: none;

  color: #fff;

  font-size: 14px;

  margin-bottom: 15px;

  display: inline-block;

  text-align: center;

}

.offcanvas-menu ul li:hover a {

  color: #D6F236;

}



.btn-login {

  background: transparent;

  border: 1px solid rgba(255, 255, 255, 0.3);

  color: #fff;

  padding: 0.5rem 1.5rem;

  border-radius: 6px;

  transition: all 0.3s;

}



.btn-login:hover {

  border-color: #D6F236;

  color: #D6F236;

}



.btn-get-started {

  background: #D6F236;

  color: #0a0a0a;

  padding: 0.5rem 1.5rem;

  border-radius: 6px;

  font-weight: 600;

  border: none;

  transition: all 0.3s;

}



.btn-get-started:hover {

  background: #d4e63a;

  transform: translateY(-2px);

  box-shadow: 0 10px 30px rgba(196, 214, 42, 0.3);

}



/* Hero Section */

.hero-section {

  position: relative;

  /* min-height: 100vh; */

  /* display: flex; */

  align-items: center;

  justify-content: center;

  padding: 9rem 0 0;

  overflow: hidden;

}



/* .hero-section .vector-top {

                opacity: 0.2;

                position: absolute;

                top: -20px;

                left: 0;

                right: 0;

                width: 100%;

         }

         */



.hero-section::before {

  content: '';

  background: url(../images/home/hero-top.png) no-repeat;

  opacity: 0.2;

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  width: 100%;

  height: 100%;

  background-position: top;

  z-index: 1;

}



/* Grid Background */

.grid-background {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 136%;

  background:

    radial-gradient(ellipse at center, rgba(214, 242, 54, 0.20) 0%, transparent 70%),

    radial-gradient(ellipse at center bottom, rgba(214, 242, 54, 0.2) 0%, transparent 50%);

}



.grid-background::before {

  content: '';

  position: absolute;

  top: 30%;

  bottom: 60%;

  left: 0;

  width: 100%;

  height: 100%;

  background: url('../images/home/hero-banner-bottom.png') no-repeat;

  background-size: contain;

  /* background-size: 60px 60px; */

  /* transform: perspective(500px) rotateX(60deg) scale(2);

            transform-origin: center 40%;

            mask-image: linear-gradient(to bottom, transparent 0%, black 20%, black 80%, transparent 100%); */

}



.grid-background::after {

  content: '';

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  width: 800px;

  height: 800px;

  background: radial-gradient(circle, rgba(196, 214, 42, 0.15) 0%, transparent 70%);

  filter: blur(60px);

  animation: pulse 4s ease-in-out infinite;

}



@keyframes pulse {



  0%,

  100% {

    opacity: 0.5;

    transform: translate(-50%, -50%) scale(1);

  }



  50% {

    opacity: 0.8;

    transform: translate(-50%, -50%) scale(1.1);

  }

}



/* Badge */

.promo-badge {

  border-radius: 99px;

  border: 1px solid rgba(214, 242, 54, 0.30);

  background: rgba(214, 242, 54, 0.20);

  backdrop-filter: blur(2.5px);

  padding: 4px 10px 4px 6px;

  color: #F9FFD7;

  text-align: center;

  /* font-family: "Satoshi Variable"; */

  font-size: 12px;

  font-style: normal;

  font-weight: 400;

  line-height: 121.1%;

  /* 14.532px */

  letter-spacing: -0.36px;

  display: flex;

  align-items: center;

  width: fit-content;

  gap: 8px;

}



/* 

        .promo-badge::before {

            content: '⚡';

            font-size: 1.2rem;

        } */



/* Hero Content */

.hero-content {

  position: relative;

  z-index: 10;

  text-align: center;

  animation: fadeInUp 1s ease-out;

}



.hero-title {

  font-size: 4.5rem;

  font-weight: 700;

  line-height: 75px;

  margin-bottom: 0.5rem;

  letter-spacing: -2.16px;

  background: linear-gradient(to bottom, #FFFFFF 0%, #FFFFFF 82%, rgba(0, 0, 0, 0.25) 100%);

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

  background-clip: text;

}



.hero-title .italic-text {

  font-family: "Playfair Display";

  font-weight: 500;

}



.hero-subtitle {

  font-size: 1rem;

  color: rgba(255, 255, 255, 0.8);

  margin-bottom: 25px;

  max-width: 600px;

  margin-left: auto;

  margin-right: auto;

  font-weight: 400;

  opacity: 0.8;

}



.gap-c2 {

  gap: 12px;

}



.hero-buttons {

  display: flex;

  gap: 1.5rem;

  justify-content: center;

  flex-wrap: wrap;

}



.btn-primary-brand {

  border-radius: 12px;

  border: 1px solid #d4e63a;

  background: #D6F236;

  color: #1E1E1E;

  /* font-family: "Satoshi Variable"; */

  font-size: 14px;

  font-style: normal;

  font-weight: 500;

  line-height: normal;

  transition: all 0.3s;

  padding: 8px 24px;

}



.btn-primary-brand:hover {

  background: #d4e63a;

  color: #000;

}



.btn-secondary-brand {

  border-radius: 12px;

  border: 1px solid rgba(255, 255, 255, 0.2);

  background: radial-gradient(111.42% 170.43% at 83.26% 142.62%, rgba(255, 255, 255, 0.00) 79.1%, rgba(255, 255, 255, 0.10) 100%), rgba(0, 0, 0, 0.35);

  padding: 8px 24px;

  color: #FFF;

  /* font-family: "Satoshi Variable"; */

  font-size: 14px;

  font-style: normal;

  font-weight: 500;

  line-height: normal;

  transition: all 0.3s;

}



/*.btn-secondary-brand:hover {

   border-color: #D6F236;

            color: #D6F236;

            transform: translateY(-3px); 

}*/



/* Device Mockup */

.device-mockup {

  position: relative;

  max-width: 1280px;

  margin: 5rem auto 0;

  animation: fadeInUp 1.2s ease-out 0.3s both;

  padding-bottom: 20px;

}



.hero-section::after {

  content: "";

  position: absolute;

  left: 0;

  right: 0;

  bottom: 0;

  height: 700px;

  /* adjust shadow height */

  background: linear-gradient(180deg, rgba(23, 23, 23, 0.00) 67.23%, #171717 97.63%);

  pointer-events: none;

  z-index: 10;

}



.accordion-item:last-of-type {

  border-bottom-left-radius: 0.75rem;

  border-bottom-right-radius: 0.75rem;

}



.device-frame {

  background: linear-gradient(135deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.05) 100%);

  border-radius: 50px;

  padding: 20px 20px 0;

  border: 2px solid rgba(0, 0, 0, 0.1=3);

  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35);

  backdrop-filter: blur(7.5px);

  border-bottom-left-radius: 0;

  border-bottom-right-radius: 0;

}



.device-screen {

  background: rgba(214, 242, 54, 0.75);

  opacity: 1;

  border-radius: 32px;

  aspect-ratio: 16/8;

  position: relative;

  overflow: hidden;

  border-bottom-left-radius: 0;

  border-bottom-right-radius: 0;

  display: flex;

  /* align-items: flex-end; */

  justify-content: center;

}



/* loader css start */

/* From Uiverse.io by kennyotsu */

.loader-card {

  position: fixed;

  top: 0;

  right: 0;

  bottom: 0;

  left: 0;

  z-index: 9999;

  display: flex;

  justify-content: center;

  align-items: center;

  background: #000;

}



.loader {

  color: #fff;

  font-family: "Poppins", sans-serif;

  font-weight: 500;

  font-size: 25px;

  -webkit-box-sizing: content-box;

  box-sizing: content-box;

  height: 40px;

  padding: 10px 10px;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  border-radius: 8px;

}



.loading-words {

  overflow: hidden;

  position: relative;

}



.loading-words::after {

  content: "";

  position: absolute;

  inset: 0;

  background: linear-gradient(var(--bg-color) 10%,

      transparent 30%,

      transparent 70%,

      var(--bg-color) 90%);

  z-index: 20;

}



.loading-word {

  display: block;

  height: 100%;

  padding-left: 6px;

  color: #D6F236;

  animation: spin_4991 4s infinite;

}



@keyframes spin_4991 {

  10% {

    -webkit-transform: translateY(-102%);

    transform: translateY(-102%);

  }



  25% {

    -webkit-transform: translateY(-100%);

    transform: translateY(-100%);

  }



  35% {

    -webkit-transform: translateY(-202%);

    transform: translateY(-202%);

  }



  50% {

    -webkit-transform: translateY(-200%);

    transform: translateY(-200%);

  }



  60% {

    -webkit-transform: translateY(-302%);

    transform: translateY(-302%);

  }



  75% {

    -webkit-transform: translateY(-300%);

    transform: translateY(-300%);

  }



  85% {

    -webkit-transform: translateY(-402%);

    transform: translateY(-402%);

  }



  100% {

    -webkit-transform: translateY(-400%);

    transform: translateY(-400%);

  }

}



/* loader css end */



/* Marquee Section */

.marquee-section {

  background: rgba(214, 242, 54, 0.30);

  padding: 26px 0;

  overflow: hidden;

  position: relative;

  /* margin-top: -32px; */

  z-index: 10;

  /* border-top: 32px solid #000; */

}



.marquee-content {

  display: flex;

  animation: scroll 30s linear infinite;

  white-space: nowrap;

  align-items: center;

}



.marquee-item {

  display: inline-flex;

  align-items: center;

  color: #FFF;

  font-size: 32px;

  font-style: normal;

  font-weight: 700;

  line-height: normal;

}



.marquee-divider {

  color: #fff;

  margin: 0 1rem 0 1rem;

  line-height: normal;

  font-size: 32px;

}



@keyframes scroll {

  0% {

    transform: translateX(0);

  }



  100% {

    transform: translateX(-50%);

  }

}



@keyframes fadeInUp {

  from {

    opacity: 0;

    transform: translateY(40px);

  }



  to {

    opacity: 1;

    transform: translateY(0);

  }

}



@keyframes fadeInDown {

  from {

    opacity: 0;

    transform: translateY(-20px);

  }



  to {

    opacity: 1;

    transform: translateY(0);

  }

}





.hero-content .badge-pill { 

  margin-bottom: 20px;

}





.badge-pill {

  display: inline-flex;

  align-items: center;

  gap: 0.5rem;

  padding: 0.25rem 0.75rem;

  padding-left: 0.375rem;

  background: rgba(231, 255, 97, 0.20);

  border: 1px solid rgba(231, 255, 96, 0.30);

  border-radius: 99px;

  backdrop-filter: blur(2.5px);

  font-size: 0.75rem;

  color: #F9FFD8;

  font-weight: 400;

  letter-spacing: -0.36px;

  white-space: nowrap;



}



.why-choose-section {

  padding-top: 4rem !important;

}



.badge-pill img {

  width: 20px;

  height: 20px;

}



.badge-icon-wrapper {

  position: relative;

  width: 20px;

  height: 20px;

  display: inline-block;

}



.badge-icon-wrapper img {

  position: absolute;

  top: 0;

  left: 0;

  transition: all 0.4s ease-in-out;

}



/* First SVG - fades out */

.badge-icon-wrapper img:first-of-type {

  animation: fade-out 4s ease-in-out infinite;

}



/* Second SVG - fades in */

.badge-icon-wrapper img:last-of-type {

  animation: fade-in 4s ease-in-out infinite;

}



@keyframes fade-out {



  0%,

  45% {

    opacity: 1;

    transform: scale(1);

  }



  50%,

  100% {

    opacity: 0;

    transform: scale(0.8);

  }

}



@keyframes fade-in {



  0%,

  50% {

    opacity: 0;

    transform: scale(0.8);

  }



  55%,

  100% {

    opacity: 1;

    transform: scale(1);

  }

}





/* Section Styles */

.section-header {

  text-align: center;

  margin-bottom: 3.8rem;

}



.section-header h1 {

  background: linear-gradient(to bottom, #FFFFFF 0%, #FFFFFF 82%, rgba(0, 0, 0, 0.25) 100%);

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

  background-clip: text;

}



.accordion-button::after {

  background-image: url('../images/home/caret-down.svg') !important;

  filter: none !important;

  transform: rotate(-180deg);

}



.accordion-button:not(.collapsed)::after {

  transform: rotate(0deg);

}



.section-badge-wrapper {

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 1rem;

  margin-bottom: 1rem;

}



.line-decoration {

  max-width: 100%;

}



.line-decoration:last-child {

  transform: rotate(180deg);

}



.section-title {

  font-size: 2.625rem;

  font-weight: 700;

  line-height: 1.25;

  margin-bottom: 1rem;

  background: linear-gradient(to bottom, #FFFFFF 0%, #FFFFFF 82%, rgba(0, 0, 0, 0.25) 100%);

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

  background-clip: text;

  letter-spacing: -1.26px;

}



.section-title-small {

  font-size: 1.5rem;

  font-weight: 700;

  margin-bottom: 1rem;

}



.section-subtitle {

  font-size: 1rem;

  color: var(--text-secondary);

  max-width: 700px;

  margin: 0 auto;

}



/* Feature Cards */

.feature-card {

  position: relative;

  border-radius: 24px;

  border: 1px solid #2D2D2D;

  background: #171717;

  height: 100%;

  overflow: hidden;

  transition: all 0.4s ease;

  backdrop-filter: blur(10px);

  max-height: 434px;

  padding-bottom: 20px;

}



.feature-card:hover {

  border-color: rgba(214, 242, 54, 0.4);

  transform: translateY(-8px);

  /* box-shadow: 0 20px 40px rgba(214, 242, 54, 0.15); */

}



.feature-card:hover::before,

.feature-card:hover::after,

.feature-card:hover .card-content::before,

.feature-card:hover .card-content::after {

  border-color: rgba(214, 242, 54, 0.6);

}



.card-icon-wrapper {

  /* position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%); */

  display: flex;

  align-items: center;

  justify-content: center;

  width: 100%;

  position: relative;

  height: calc(424px - 140px);

  /* height: 180px; */

  /* margin-top: -30px; */

  z-index: 2;

}



.data-wrapper {

  padding-top: 24px;

}



.data-wrapper::before,

.data-wrapper::after {

  content: '';

  background: url('../images/home/data-security.svg') no-repeat;

  position: absolute;



  width: 100%;

  height: 100%;

  top: 49px;

}



.data-wrapper::before {

  left: 0;

}



.data-wrapper::after {

  transform: rotate(180deg);

  right: 0;

  left: auto;

  top: -24px;

}



@keyframes pulse-glow {



  0%,

  100% {

    opacity: 0.5;

    transform: scale(1);

  }



  50% {

    opacity: 0.8;

    transform: scale(1.1);

  }

}



.card-icon-text {

  font-size: 7rem;

  font-weight: 700;

  color: var(--primary-color);

  /* text-shadow: 0 0 40px rgba(212, 230, 58, 0.5); */

  position: relative;

  z-index: 2;

  width: 100%;

}



.card-icon-text {



  height: inherit;

}



.why-card:first-child .card-icon-text {

  background: url('../images/home/zero.png') no-repeat;

  background-position: top center;

  background-size: cover;

}



.why-card:nth-child(2) .card-icon-text {

  background: url('../images/home/500.png') no-repeat;

  background-position: top center;

  background-size: cover;

}



.why-card:nth-child(3) .card-icon-text {

  background: url('../images/home/24x7.png') no-repeat;

  /* background-position: bottom; */

  background-size: cover;

}



.why-card:nth-child(4) .feature-card {

  background: url('../images/home/register.png') no-repeat;

  background-position: bottom;

  background-size: 100% 100%;

}



.why-card:nth-child(4) .feature-card .card-content {

  position: absolute;

  top: 50%;

  left: 0;

  right: 0;

  transform: translateY(0);

}



.why-card:nth-child(5) .feature-card {

  background: url('../images/home/payment.png') no-repeat;

  /* background-position: 100% 100%; */

  background-size: 100% 100%;

}



.why-card:nth-child(5) .feature-card .card-icon-wrapper {

  height: 220px;

}



.why-card:nth-child(6) .card-icon-text {

  background: url('../images/home/realtimetracking.png') no-repeat;

  background-position: bottom;

  background-size: cover;

}



.why-card:nth-child(7) .card-icon-text {

  background: url('../images/home/datasecurity.png') no-repeat;

  /* background-position: bottom; */

  background-size: cover;

}



.card-icon-text.margin-icon {

  font-size: 5.5rem;

  letter-spacing: -0.05em;

}



.card-content {

  padding: 14px 26px 24px;

  z-index: 10;

  text-align: center;

}



.card-content h3 {

  font-size: 1rem;

  font-weight: 700;

  margin-bottom: 10px;

  color: var(--text-primary);

}



.card-content p {

  font-size: 0.875rem;

  color: rgba(255, 255, 255, 0.7);

  margin: 0;

  line-height: 1.5;

  font-weight: 400;

}



/* margin-wrapper */

.margin-wrapper {

  border-radius: 52.526px;

  background: rgba(150, 162, 83, 0.01);

  box-shadow: 0 17.509px 52.526px 0 rgba(134, 148, 55, 0.60) inset;

  height: 280px;

  width: 280px;

  transform: perspective(1000px) rotateY(-25deg) rotateX(16deg);

  margin: 0 auto;

  margin-left: 56px;

}



.card-margin.data-wrapper::after {

  right: -28px;

  bottom: 45%;

  top: auto;

}



.card-margin.data-wrapper::before {

  left: -28px;

}



/* Zero Brokerage Card Icon */

/* .card-zero-brokerage .card-icon-text {

  background: linear-gradient(180deg, #D6F236 0%, #B8D447 50%, #9AB438 100%);

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

  background-clip: text;

  position: relative;

} */



/*.card-zero-brokerage .card-icon-text::before {

   content: '0';

  position: absolute;

  top: 0;

  left: 0; */

  /* background: linear-gradient(180deg, rgba(214, 242, 54, 0.2) 0%, rgba(214, 242, 54, 0.4) 100%); */

  /* -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

  background-clip: text;

  filter: blur(20px);

  z-index: -1; 

}*/



/* 24x7 Support Card Icon */

.card-icon-sync {

  position: relative;

  z-index: 2;

  animation: rotate-sync 8s linear infinite;

}



@keyframes rotate-sync {

  0% {

    transform: rotate(0deg);

  }



  100% {

    transform: rotate(360deg);

  }

}



/* Register in 10 Sec Card Icon */

.card-icon-grid {

  display: grid;

  grid-template-columns: repeat(2, 50px);

  grid-template-rows: repeat(2, 50px);

  gap: 12px;

  position: relative;

  z-index: 2;

  border: 1px solid #525252;

  border-radius: 12px;

  padding: 12px 15px;

}



.grid-item {

  background: #D6F236;

  border: 2px solid #D6F236;

  border-radius: 12px;

  transition: all 0.3s ease;

  opacity: 0.8;

}



.grid-item.active {

  background: var(--primary-color);

  border-color: var(--primary-color);

  opacity: 1;

}



.feature-card:hover .grid-item {

  animation: grid-pulse 1.5s ease-in-out infinite;

}



@keyframes grid-pulse {



  0%,

  100% {

    opacity: 0.4;

  }



  50% {

    opacity: 1;

  }

}



/* Payment Methods Card Icon */

.card-icon-network {

  position: relative;

  width: 100%;

  z-index: 2;

}





.payment-wrapper {

  background: url('../images/home/payment-method.svg') no-repeat;

  height: 200px;

  background-position: top center;

  background-size: cover;

}





.network-node {

  position: absolute;

  width: 24px;

  height: 24px;

  background: var(--primary-color);

  border-radius: 50%;

  box-shadow: 0 0 15px rgba(214, 242, 54, 0.6);

}



.network-node.center {

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  width: 32px;

  height: 32px;

}



.network-node.top {

  top: 0;

  left: 50%;

  transform: translateX(-50%);

  animation: node-pulse 2s ease-in-out infinite;

}



.network-node.right {

  top: 50%;

  right: 0;

  transform: translateY(-50%);

  animation: node-pulse 2s ease-in-out infinite 0.4s;

}



.network-node.bottom {

  bottom: 0;

  left: 50%;

  transform: translateX(-50%);

  animation: node-pulse 2s ease-in-out infinite 0.8s;

}



.network-node.left {

  top: 50%;

  left: 0;

  transform: translateY(-50%);

  animation: node-pulse 2s ease-in-out infinite 1.2s;

}



@keyframes node-pulse {



  0%,

  100% {

    opacity: 0.5;

    transform: translate(0) scale(1);

  }



  50% {

    opacity: 1;

    transform: translate(0) scale(1.2);

  }

}



/* Data Security Card Icon */

.card-icon-shield {

  position: relative;

  z-index: 2;

  animation: shield-float 3s ease-in-out infinite;

  overflow: hidden;

  border-radius: 45px;

  opacity: 0.5;

  transform: perspective(1000px) rotateY(-25deg) rotateX(16deg);

  background: rgba(150, 162, 83, 0.01);

  box-shadow: 0 15px 45px 0 rgba(134, 148, 55, 0.60) inset;

  padding: 32px 0px;

}



.card-icon-shield::before {

  content: '';

  position: absolute;

  top: -100%;

  left: 0;

  right: 0;

  margin: 0 auto;

  width: 60%;

  height: 3px;

  background: linear-gradient(90deg,

      transparent 0%,

      rgba(255, 255, 255, 0.3) 25%,

      rgba(255, 255, 255, 0.8) 50%,

      rgba(255, 255, 255, 0.3) 75%,

      transparent 100%);

  box-shadow: 0 0 20px rgba(214, 242, 54, 0.6),

    0 0 40px rgba(214, 242, 54, 0.4);

  animation: scan-line 3s ease-in-out infinite;

  z-index: 10;

  transform: perspective(1000px) rotateY(-25deg) rotateX(16deg);

}



.card-icon-shield::after {

  content: '';

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  margin: 0 auto;

  width: 60%;

  height: 100%;

  background: linear-gradient(180deg,

      rgba(214, 242, 54, 0) 0%,

      rgba(214, 242, 54, 0.1) 45%,

      rgba(214, 242, 54, 0.2) 50%,

      rgba(214, 242, 54, 0.1) 55%,

      rgba(214, 242, 54, 0) 100%);

  animation: scan-glow 3s ease-in-out infinite;

  opacity: 0;

  transform: perspective(1000px) rotateY(-25deg) rotateX(16deg);

}



@keyframes scan-line {

  0% {

    top: -10%;

    opacity: 0;

  }



  10% {

    opacity: 1;

  }



  90% {

    opacity: 1;

  }



  100% {

    top: 110%;

    opacity: 0;

  }

}



@keyframes scan-glow {

  0% {

    opacity: 0;

    transform: translateY(-100%);

  }



  10% {

    opacity: 1;

  }



  90% {

    opacity: 1;

  }



  100% {

    opacity: 0;

    transform: translateY(100%);

  }

}





/* Benefits Section */

.benefits-section {

  position: relative;

  padding: 6rem 0;

  min-height: 1450px;

}



.benefits-section::after {

  content: "";

  position: absolute;

  bottom: 0;

  background: url(../images/home/benefits-bg.svg) no-repeat;

  background-size: contain;

  height: 44%;

  left: 0;

  right: 0;

  margin: 0 auto;

  opacity: 1;

  z-index: -1;

}



.benefits-card {

  /* background: radial-gradient(50% 50% at 83% 143%, rgba(255, 255, 255, 0) 79%, rgba(255, 255, 255, 0.1) 100%),

              linear-gradient(0deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.35) 100%); */

  border-radius: 1.5rem;

  backdrop-filter: blur(22px);

  padding: 2rem;

  border: 1px solid var(--Angular, rgba(255, 255, 255, 0.60));

  background: radial-gradient(111.42% 170.43% at 83.26% 142.62%, rgba(255, 255, 255, 0.00) 79.1%, rgba(255, 255, 255, 0.10) 100%), rgba(0, 0, 0, 0.35);

  backdrop-filter: blur(22px);

}



.benefits-header {

  margin-bottom: 5.5rem;

}



.benefits-logo {

  width: 92px;

  height: 24px;

  margin-bottom: 1rem;

}



.benefits-icon {

  width: 80px;

  height: 80px;

  margin-top: 20px;

  position: absolute;

  /* left: 0; */

  right: 20px;

}



.benefits-grid {

  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: 2.5rem 7.5rem;

  padding: 64px 64px 64px;

}



.benefit-item {

  display: flex;

  align-items: center;

  gap: 0.75rem;

  padding: 0.75rem;

  background: white;

  border-radius: 0.6rem;

  transition: transform 0.3s;

}



.benefit-item:hover {

  transform: scale(1.05);

}



.benefit-item img {

  width: 28px;

  height: 28px;

}



.benefit-item span {

  font-size: 1.3125rem;

  color: var(--dark-bg);

  font-weight: 400;

}



/* Statistics Section */

.statistics-section {

  padding: 6rem 0;

}



.stat-item {

  text-align: center;

}



.stat-value {

  font-size: 2.625rem;

  font-weight: 700;

  margin-bottom: 0.5rem;

  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.5) 100%);

  -webkit-background-clip: text;

  background-clip: text;

}



.stat-label {

  font-size: 1.3125rem;

  color: var(--text-secondary);

}



/* Trading Steps Swiper Slider - UPDATED */

.trading-steps-section {

  padding: 6rem 0 0;

  position: relative;

  overflow: hidden;

}

.stripe-glow-wrapper {

  padding: 149px 0;

  position: relative;

  overflow: hidden;

}

.trading-steps-section::before{

  content: '';

  position: absolute;

  background: url(../images/home/steps-bg.svg) repeat;

  width: 100%;

  height: 100%;

  background-size: contain;

  opacity: 0.1;

  background-position: center;

  left: 0;

  right: 0;

  z-index: -1;

}



.stripe-glow-wrapper::before  {

  content: '';

  position: absolute;

  background: url(../images/home/steps-bg.svg) repeat;

  width: 100%;

  height: 100%;

  background-size: cover;

  opacity: 0.1;

  background-position: center;

  left: 0;

  right: 0;

  z-index: -1;

  top: -3px;

}



.trading-steps-swiper-wrapper {

  position: relative;

  max-width: 1400px;

  margin: 0 auto;

  /* padding-bottom: 3rem; */

}



.stepsSwiper {

  width: 80%;

  padding: 170px 50px 0 50px;

  overflow: hidden !important;

}



.stepsSwiper .swiper-wrapper {

  align-items: center;

}



.stepsSwiper .swiper-slide {

  display: flex;

  justify-content: center;

  align-items: center;

  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);

  height: auto;

  width: 600px !important;

  /* Fixed width for each slide */

}



.trading-step-card {

  width: 100%;

  max-width: 400px;

  max-height: 400px;

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 0;



  border-radius: 1.5rem;

  backdrop-filter: blur(22px);

  position: relative;

  overflow: hidden;

  transition: all 0.6s ease;

  /* border: 1px solid rgba(214, 242, 54, 0.40); */

  border-bottom: 0;

  border-bottom-right-radius: 0;

  border-bottom-left-radius: 0;



}



/* Remove old swiper slide states - they will be handled by JS */

.swiper-slide-active .trading-step-card {

  opacity: 1;

}



.step-icon-large {

  width: 100%;

}



.step-title-large {

  font-size: 2.5rem;

  font-weight: 700;

  color: var(--text-primary);

  margin: 0;

  text-align: center;

  z-index: 2;

  position: relative;

}



.step-description-large {

  font-size: 1.25rem;

  color: var(--text-secondary);

  max-width: 500px;

  line-height: 1.8;

  margin: 0;

  text-align: center;

  z-index: 2;

  position: relative;

}



/* Swiper Navigation Buttons */

.steps-swiper-button-prev,

.steps-swiper-button-next {

  width: auto;

  top: 64px;





}



.steps-swiper-button-prev {

  left: 42%;

}



.steps-swiper-button-next {

  right: 42%;

}



.steps-swiper-button-prev:after,

.steps-swiper-button-next:after {

  display: none;

}



.steps-swiper-button-prev:hover,

.steps-swiper-button-next:hover {

  background: rgba(214, 242, 54, 0.2);

  border-color: var(--primary-color);

  transform: scale(1.1);

}



/* Swiper Pagination */

.steps-swiper-pagination {

  top: 0 !important;

  z-index: -1;

}



.steps-swiper-pagination .swiper-pagination-bullet {

  width: 12px;

  height: 12px;

  background: rgba(255, 255, 255, 0.3);

  opacity: 1;

  transition: all 0.3s;

}



.steps-swiper-pagination .swiper-pagination-bullet-active {

  background: #fff;

  width: 30px;

  border-radius: 6px;

}



/* Account Steps */

.account-section {

  padding: 6rem 0;

}



.account-step-card {

  border-radius: 24px;

  border: 1px solid var(--Angular, rgba(255, 255, 255, 0.60));

  position: relative;

  backdrop-filter: blur(22px);

  height: 250px;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: flex-end;

  padding: 62px 20px 30px;

  transition: transform 0.3s;

  position: relative;

  overflow: hidden;

  cursor: pointer;

}



.account-step-card::before {

  content: '';

  position: absolute;

  inset: 0;

  border-radius: 24px;

  padding: 1px;

  /* Border thickness */

  /* background: conic-gradient(

        from 180deg at 50% 50%, 

        rgba(255, 255, 255, 0.60) 50deg, 

        rgba(153, 153, 153, 0.10) 144deg, 

        rgba(255, 255, 255, 0.60) 216deg, 

        rgba(153, 153, 153, 0.10) 306deg

    );

    -webkit-mask: 

        linear-gradient(#fff 0 0) content-box, 

        linear-gradient(#fff 0 0);

    -webkit-mask-composite: xor;

    mask: 

        linear-gradient(#fff 0 0) content-box, 

        linear-gradient(#fff 0 0);

    mask-composite: exclude;

    z-index: -1; */

  border: 1px solid rgba(255, 255, 255, 0.1);

}



.account-step-card .testimonials-glow {

  opacity: 0;

  top: 0;

  left: 0;

}



.account-step-card:hover .testimonials-glow {

  opacity: 1;

  transform: scale(1.05);



}



.step-icon {

  width: 95px;

  height: 95px;

  margin-bottom: 1rem;

}



.step-text {

  font-size: 1.1rem;

  text-align: center;

  margin: 0;

  line-height: 121.1%;

  /* 25.471px */

  letter-spacing: -0.631px;

}



/* Global Earnings */

.global-earnings-section {

  position: relative;

  padding-top: 6rem;

  overflow: hidden;



}



.global-earnings-section .section-header {



  padding-top: 15rem;

}



.trust-section {

  border-radius: 24px;

  border: 1px solid var(--Angular, rgba(255, 255, 255, 0.60));

  background: radial-gradient(111.42% 170.43% at 83.26% 142.62%, rgba(255, 255, 255, 0.00) 79.1%, rgba(255, 255, 255, 0.10) 100%), rgba(0, 0, 0, 0.35);

  backdrop-filter: blur(22px);

  padding: 30px 28px;

  display: grid;

  grid-template-columns: repeat(auto-fill, 225px);

  gap: 56px;

  justify-content: center;

  max-width: 1189px;

  margin: 0 auto;

}



.trust-section .col {

  width: 225px;

  height: 265px;

}



.global-earnings-section::before {

  content: '';

  width: 100%;

  height: 100%;

  background: url(../images/home/globe.png) no-repeat center;

  background-size: contain;

  opacity: 0.5;

  left: 0;

  position: absolute;

  z-index: -1;

  background-position: bottom;

}



.earnings-title {

  font-size: 6rem;

  font-weight: 700;

  text-align: center;

  margin-bottom: 0;

}



.earnings-subtitle {

  font-size: 2rem;

  font-weight: 700;

  text-align: center;

  color: var(--text-secondary);

  margin-bottom: 24px;

}



.earnings-cards {

  display: flex;

  gap: 1rem;

  justify-content: center;

  margin-bottom: 24px;

}



.earning-card {

  padding: 24px 2rem;

  text-align: left;

  transition: transform 0.3s;

  border-radius: 24px;

  border: 1px solid var(--Angular, rgba(255, 255, 255, 0.60));

  background: rgba(214, 242, 54, 0.40);

  backdrop-filter: blur(22px);

  color: #FFF;

  max-width: 225px;

}



.earning-card:hover {

  transform: scale(1.05);

}



.earning-country {

  font-size: 1.7rem;

  font-weight: 700;

  margin-bottom: 0.5rem;

  line-height: 121.1%;

  /* 38.752px */

  letter-spacing: -0.96px;

  margin-bottom: 0;

}



.earning-amount {

  font-size: 1.7rem;

  font-weight: 700;

  margin: 0;

  line-height: 121.1%;

  /* 38.752px */

  letter-spacing: -0.96px;

}



.owl-dots {

  text-align: center;

  margin-top: 30px;

}



.owl-dot {

  display: inline-block;

  width: 12px;

  height: 12px;

  background: rgba(255, 255, 255, 0.5) !important;

  border-radius: 50%;

  margin: 0 5px;

  transition: all 0.3s ease;

}



.owl-dot.active {

  background: white !important;

  width: 30px;

  border-radius: 10px;

}



.owl-theme .owl-dots .owl-dot span {

  display: none;

}



.owl-theme .owl-nav.disabled+.owl-dots {

  margin-top: 10px;

  position: absolute;

  bottom: -51px;

  left: 0;

  right: 0;

}



/* Testimonials */

.testimonials-section {

  position: relative;

  padding: 6rem 0;

  overflow: hidden;

}



.testimonials-section::before {

  content: '';

  background: url(../images/home/vector-top-line.svg) no-repeat;

  position: absolute;

  top: 95px;

  left: 0;

  right: 0;

  height: 211px;

  opacity: 0.3;

  background-position: top;

}



.testimonials-section::after {

  content: '';

  content: '';

  background: url(../images/home/hero-banner-bottom.png) no-repeat;

  position: absolute;

  top: auto;

  bottom: 0;

  left: 0;

  right: 0;

  height: 100%;

  opacity: 0.3;

  background-position: center;

  background-size: contain;

  z-index: -1;

}



.testimonials-glow {

  position: absolute;

  top: 22%;

  left: 50%;

  transform: translateX(-50%);

  width: 600px;

  height: 600px;

  background: radial-gradient(circle, rgba(214, 242, 54, 0.5) 0%, rgba(214, 242, 54, 0.3) 30%, rgba(214, 242, 54, 0.1) 60%, transparent 100%);

  filter: blur(100px);

  pointer-events: none;

}

.mb-100 {

  margin-bottom: 100px;

}

.inner-glow {

  position: absolute;

  top: 0;

  left: 50%;

  transform: translateX(-50%);

  width: 100%;

  height: 100%;

  background: radial-gradient(circle, rgba(214, 242, 54, 0.5) 0%, rgba(214, 242, 54, 0.3) 30%, rgba(214, 242, 54, 0.1) 60%, transparent 100%);

  filter: blur(50px);

  pointer-events: none;

}

.section-glow {

  position: absolute;

  top: 22%;

  left: 50%;

  transform: translateX(-50%);

  width: 100%;

  height: 100%;

  background: radial-gradient(circle, rgba(214, 242, 54, 0.5) 0%, rgba(214, 242, 54, 0.3) 20%, rgba(214, 242, 54, 0.1) 20%, transparent 100%);

  filter: blur(100px);

  pointer-events: none;

}



.testimonials-carousel-wrapper {

  position: relative;

  max-width: 1200px;

  margin: 0 auto;

  padding: 2rem 0;

}



.testimonials-carousel {

  display: flex;

  gap: 1.5rem;

  justify-content: center;

  align-items: center;

  position: relative;

  min-height: 550px;

  perspective: 1000px;

  text-align: center;



}



.testimonial-card {

  background: var(--card-bg);

  border: 1px solid var(--border-color);

  border-radius: 1rem;

  padding: 2rem 1.5rem;

  width: 380px;

  min-height: 180px;

  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);

  position: absolute;

  left: 50%;

  transform: translateX(-50%) scale(0.8);

  opacity: 0.9;

  z-index: 1;

  pointer-events: none;

}



.testimonial-card-active {

  transform: translateX(-50%) scale(1) !important;

  opacity: 1 !important;

  filter: blur(0) !important;

  z-index: 10 !important;

  pointer-events: auto;

}



.testimonial-card .testimonials-glow {

  width: 400px;

  height: 400px;

  z-index: 10;

}



.testimonial-card:nth-child(1) {

  transform: translateX(calc(-50% - 420px)) scale(0.75);

}



.testimonial-card:nth-child(2) {

  transform: translateX(calc(-50% - 260px)) scale(0.85);

  opacity: 0.9;

  z-index: 5;

}



.testimonial-card:nth-child(4) {

  transform: translateX(calc(-50% + 260px)) scale(0.85);

  opacity: 0.9;

  z-index: 5;

}



.testimonial-card:nth-child(5) {

  transform: translateX(calc(-50% + 420px)) scale(0.75);

}



.testimonial-card img {

  margin-bottom: 40px;

}



.testimonial-card h4 {

  font-size: 1rem;

  font-weight: 700;

  margin-bottom: 10px;

  text-align: center;

  color: var(--text-primary);

}



.testimonial-card p {

  font-size: 0.875rem;

  color: var(--text-secondary);

  text-align: center;

  margin: 0;

  line-height: 1.6;

  opacity: 0.7;

}



.carousel-controls {

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 2rem;

  margin-top: 3rem;

}



.carousel-btn {

  background: transparent;

  border: none;
}



.carousel-btn:hover {



  transform: scale(1.1);

}



.carousel-btn:active {

  transform: scale(0.95);

}



.carousel-dots {

  display: flex;

  gap: 0.75rem;

  align-items: center;

}



.carousel-dot {

  width: 10px;

  height: 10px;

  border-radius: 50%;

  background: rgba(255, 255, 255, 0.3);

  cursor: pointer;

  transition: all 0.3s;

}



.carousel-dot:hover {

  background: rgba(255, 255, 255, 0.5);

  transform: scale(1.2);

}



.carousel-dot-active {

  background: var(--text-primary);

  width: 32px;

  border-radius: 5px;

}



/* FAQ Section */

.faq-section {

  padding: 6rem 0;

}



.accordion-item {

  background: transparent;

  border: 1px solid rgba(255, 255, 255, 0.1);

  border-radius: 0.75rem;

  margin-bottom: 1.25rem;

  transition: border-color 0.3s;

  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;

}



.accordion-item:first-of-type {

  border-radius: 0.75rem;

}



.accordion-item:hover,

.accordion-item:has(.show) {

  /* border-color: rgb(214 242 54 / 50%); */

  /* border-top: 1px solid rgb(214 242 54 / 50%) !important; */

  background: linear-gradient(180deg, rgba(214, 242, 54, 0.00) 20.83%, rgba(232, 255, 98, 0.20) 100%);

}



.accordion-button {

  background: transparent;

  color: var(--text-primary);

  font-weight: 700;

  padding: 1rem 2.25rem 0.875rem;

  border: none;

  font-size: 1rem;

}



.accordion-button:not(.collapsed) {

  background: transparent;

  color: var(--text-primary);

  box-shadow: none;

}



.accordion-button:focus {

  box-shadow: none;

  border: none;

}



.accordion-button::after {

  filter: invert(1);

}



.accordion-body {

  padding: 0 2.25rem 1.5rem;

  color: var(--text-secondary);

  font-size: 0.875rem;

}



.support-card {

  background: rgba(255, 255, 255, 0.01);

  border: 1px solid rgba(255, 255, 255, 0.1);

  border-radius: 1rem;

  padding: 1rem 2rem 2rem;

  text-align: center;

  box-shadow: inset 0 0 100px rgba(214, 242, 54, 0.5);

  transition: transform 0.3s;

  min-height: 383px;

}



.support-card:hover {

  transform: scale(1.05);

}



.support-card-image {

  width: 100px;

  height: 100px;

  margin-bottom: 24px;

}



.support-card h3 {

  font-size: 1.25rem;

  font-weight: 700;

  margin-bottom: 2rem;

  letter-spacing: -0.6px;

}



.support-card p {

  font-size: 1rem;

  color: var(--text-primary);

  margin-bottom: 2rem;

  letter-spacing: -0.48px;

  line-height: 121.1%;

  /* 19.376px */

  font-weight: 400;

}



.support-card .btn {

  display: inline-flex;

  align-items: center;

  gap: 0.5rem;

}



.support-card .btn img {

  width: 24px;

  height: 24px;

}



/* CTA Section */

.cta-section {

  position: relative;

  padding: 7.5rem 0;

  border-top: 1px solid transparent;

  border-image: linear-gradient(270deg, rgba(214, 242, 54, 0) 0%, rgba(238, 255, 140, 1) 35%, rgba(236, 255, 129, 1) 50%, rgba(237, 255, 136, 1) 65%, rgba(231, 255, 92, 0) 100%) 1;

  overflow: hidden;

}



.cta-glow-top {

  position: absolute;

  top: 0;

  width: 100%;

  height: 224px;

  background: url(../images/home/bg-lines-graphics.svg) no-repeat;

  background-size: cover;

  background-position: bottom;

}



.cta-glow-bottom {

  position: absolute;

  bottom: 0;

  width: 100%;

  height: 224px;

  background: url(../images/home/bg-lines-graphics.svg) no-repeat;

  background-size: cover;

  transform: rotate(180deg);

  background-position: bottom;

}



.cta-content {

  text-align: center;

  position: relative;

  z-index: 10;

  margin: 240px 0;

}



.cta-title {

  font-size: 2.625rem;

  font-weight: 700;

  margin-bottom: 2rem;

}



.cta-subtitle {

  font-size: 1rem;

  max-width: 700px;

  margin: 0 auto 2rem;

  color: #FFF;

  text-align: center;

  font-weight: 400;

  line-height: 121.1%;

  /* 19.376px */

  letter-spacing: -0.48px;

}



.cta-buttons {

  display: flex;

  gap: 0.75rem;

  justify-content: center;

  margin-bottom: 2rem;

}



.cta-app-image {

  width: 659px;

  max-width: 100%;

}



/* Footer */

.footer {

  padding: 7.5rem 0 5rem;

}



.footer-social-links ul {

  list-style: none;

  padding: 0;

  display: flex;

  gap: 27px;

  align-items: center;

  margin-top: 150px;

}



.footer-social-links ul li {

  display: inline-block;

}



.footer-brand {

  display: flex;

  align-items: flex-start;

  gap: 0.625rem;

  margin-bottom: 2rem;

}



.footer-brand img {

  /* width: 100%;` */

  height: 24px;

}



.footer-brand span {

  font-size: 1.12rem;

  font-weight: 700;

}



.footer-social {

  width: auto;

  height: auto;

}



.footer-title {

  font-size: 1rem;

  font-weight: 700;

  margin-bottom: 1.5rem;

}



.footer-links {

  list-style: none;

  padding: 0;

  margin: 0;

}



.footer-links li {

  margin-bottom: 0.875rem;

}



.footer-links a {

  color: var(--text-primary);

  text-decoration: none;

  font-size: 0.875rem;

  transition: color 0.3s;

}



.footer-links a:hover {

  color: var(--primary-color);

}



.footer-divider {

  border: none;

  height: 0.9px;

  opacity: 0.2;

  background: #D6F236;

  margin: 5rem 0;

}



.footer-newsletter h4 {

  font-size: 1rem;

  font-weight: 700;

  margin-bottom: 0.25rem;

}



.footer-newsletter p {

  font-size: 0.875rem;

  color: var(--text-primary);

  margin: 0;

}



.footer-bottom {

  display: flex;

  justify-content: space-between;

  align-items: center;

  color: var(--text-secondary);

}



.footer-legal {

  display: flex;

  align-items: center;

  gap: 1.125rem;

}



.footer-legal a {

  color: var(--text-primary);

  text-decoration: none;

  font-size: 0.875rem;

  transition: color 0.3s;

}



.footer-legal a:hover {

  color: var(--primary-color);

}



.footer-copyright {

  font-size: 0.875rem;

  margin: 0;

}



.navbar-toggler {

  background: transparent;

}



.navbar-toggler-icon {

  filter: invert(1);

}



.navbar-toggler:focus {

  border: 0;

  box-shadow: none;

}



.w-1068 {

  width: 1068px;

}



.w-225 {

  width: 225px;

}



/* sticky-sidebarcode */

.sticky-sidebar {

  position: fixed;

  right: 0;

  top: 50%;

  transform: translateY(-50%);

  border-radius: 24px 0 0 24px;

  background: rgba(214, 242, 54, 0.10);

  padding: 20px 15px;

  z-index: 10;

}

.sticky-sidebar-left {

    position: fixed;

    left: 0;

    top: 50%;

    transform: translateY(-50%);

    border-radius: 0 24px 24px 0;

    background: rgba(214, 242, 54, 0.10);

    padding: 20px 15px;

    z-index: 10;

}

.sidebar-item {

  display: flex;

  flex-direction: column;

  align-items: center;

  margin-bottom: 20px;

  padding-bottom: 20px;

  cursor: pointer;

  transition: all 0.3s ease;

  border-bottom: 0.5px solid #fff;

}



.sidebar-item .sidebar-link {

  display: flex;

  align-items: center;

  justify-content: center;

  text-decoration: none;

  flex-direction: column;

}



.sidebar-item .icon-wrapper {

  width: 50px;

  height: 50px;

  display: flex;

  align-items: center;

  justify-content: center;

}



.sidebar-item:last-child {

  border-bottom: none;

  margin-bottom: 0;

  padding-bottom: 0;

}



.sidebar-item:hover {

  transform: translateX(-5px);

}



.sidebar-item label {

  cursor: pointer;

  color: #D6F236;

  font-size: 16px;

  font-style: normal;

  font-weight: 400;

  line-height: normal;

}



/* sticky sidebarcode ends */

/* support page css start */

.input-container {

  position: relative;

}



.input-container .form-control:focus {

  box-shadow: none;

  border-color: #fff;

}



.input-container .form-control {

  border-radius: 4px;

  border-color: #fff;

}



.input-group .input-container .form-control,

.input-group .input-container .form-control:focus {

  border: 0;

}



.h-56 {

  height: 56px;

}



.input-group {

  border-radius: 5.3px;

  border: 1px solid #fff;

}



.input-container .form-control {

  width: 100%;

  padding: 8px 21px;

  font-size: 16px;

  outline: none;

  height: 60px;

  color: #fff;

  background-color: #202020;

}





.input-container .form-control::placeholder {

  color: #fff;

}

.input-container textarea.form-control {

  resize: none;

  height: 129px;

}

.input-container label {

  position: absolute;

  left: 16px;

  top: 50%;

  color: #fff;

  background: #202020;

  transition: all 0.2s ease;

  pointer-events: none;

  transform: translateY(-50%);

  font-size: 16px;

  padding: 0 5px;

  font-family: "Poppins";

}

.input-container:has(textarea) label {

  top: 33%;

}

.submit-btn {

  height: 65px;

  font-size: 18.4px;

  font-weight: 600;

  color: #202020;

  border-radius: 5.3px;

  font-family: "Poppins";

}

/* Float the label when input is focused or has value */

.input-container .form-control:focus+label,

.input-container .form-control:not(:placeholder-shown)+label {

  top: 3px;

  left: 16px;

}



.whatsap-btn a {

  height: 48px;

  align-self: stretch;

  display: flex;

  justify-content: center;

  align-items: center;

  gap: 10px;

  padding: 8px 16px;

  border-radius: 4px;

  background-color: #fff;

  color: #202020;

  font-size: 14px;

  font-weight: 600;

  max-width: 350px;

  margin: 0 auto;

  font-family: "Poppins";

  text-decoration: none;

}



.whatsap-btn a:focus {

  text-decoration: none;

  color: #202020;

}



/* Custom file upload */

 .drop-container {

   color: #fff;

   background-color: #202020;

   border-radius: 4px;

   border: 1px solid #fff;

   padding: 30px 20px;

 }



 .input-container.drop-container label {

   top: 3px;

 }



 .upload-area {

   text-align: center;

   color: #ffffff;

 }



 .upload-text {

   font-size: 16px;

   margin-bottom: 9px;

   font-family: "Poppins";

 }



 .browse-btn {

   display: inline-block;

   color: #fff;

   padding: 10px 24px;

   font-size: 14px;

   cursor: pointer;

   transition: all 0.3s ease;

   border-radius: 4.4px;

   border: 1.1px solid #fff;

   background-color: #202020;

   min-width: 392px;

   font-family: "Poppins";

 }



 .browse-btn:hover {

   background: var(--primary);

   color: #202020;

   border-color: var(--primary);

 }



 .file-input {

   display: none;

 }



 .file-preview {

   margin-top: 20px;

   padding: 15px;

   background: #202020;

   border-radius: 6px;

   border: 1px solid #3a3a3a;

   font-family: "Poppins";

 }



 .file-item {

   display: flex;

   align-items: center;

   justify-content: space-between;

   padding: 10px;

   background: #202020;

   border-radius: 4px;

   margin-bottom: 8px;

 }



 .file-item:last-child {

   margin-bottom: 0;

 }



 .file-info {

   display: flex;

   align-items: center;

   gap: 12px;

   flex: 1;

 }



 .file-details {

   flex: 1;

 }



 .file-name {

   color: #ffffff;

   font-size: 10px;

   font-weight: 500;

   margin-bottom: 4px;

   font-family: "Poppins";

 }



 .file-size {

   color: #fff;

   font-size: 10px;

   font-family: "Poppins";

 }



 .remove-btn {

   background: transparent;

   color: #cc0000;

   border: none;

   padding: 6px 12px;

   border-radius: 4px;

   cursor: pointer;

   font-size: 12px;

   transition: background 0.3s ease;

   font-family: "Poppins";

 }



 .remove-btn:hover {

   text-decoration: underline;

 }



 .preview-image {

   max-width: 100%;

   max-height: 40px;

   object-fit: contain;

 }

/* custom file upload ends */

.mb-149 {

  margin-bottom: 149px;

}

.section-heading-h4 {

  font-size: 22px;

  font-weight: 900;

   opacity: 0.8;

   color: #fff;

   margin: 32px 0;

}

.inner-hero-section:after {

  background-color: #171717;

    z-index: 1;

    height: 113px;

}

.inner-bg-hero-section {

      padding-bottom: 102px;

}

.inner-bg-hero-section:after {

  background: transparent;

}



.inner-bg-hero-section .grid-background::before {

       top: auto;

       bottom: -57%;

}

.steps-wrapper-grid {

  display: grid;

  grid-template-columns: repeat(3, 350px);

  gap: 20px; /* optional spacing between columns */

  height: 424px;

  justify-content: center;

      z-index: -1;

    position: relative;

}

.step-card {

  padding: 0 0 39px;

  border-radius: 24px;

  position: relative;

  overflow: hidden;

  background: #171717;

  z-index: -1;

}

.step-card::before {

  content: '';

  background: radial-gradient(circle at center, rgba(214, 242, 54, 0.7) 0%,

      /* bright yellow-green center */

      rgba(214, 242, 54, 0.35) 25%,

      /* medium olive transition */

      #202020 100%

      /* dark greenish-black edge */

    );

  filter: blur(65px);

  position: absolute;

  top: 0;

  right: 0;

  left: 0;

  width: 100%;

  height: 70%;

  z-index: -1;

}

.step-card::after {

  content: '';

  position: absolute;

  inset: 0;

  border-radius: 24px;

  padding: 1px; /* Border thickness */

background: conic-gradient(from 200deg at 99% 0%, #ffffff99 0deg, #99999919 40deg, #ffffff99 180deg,

      #ffffff99 270deg,

      #99999919 360deg);

  -webkit-mask: 

    linear-gradient(#fff 0 0) content-box, 

    linear-gradient(#fff 0 0);

  -webkit-mask-composite: xor;

  mask: 

    linear-gradient(#fff 0 0) content-box, 

    linear-gradient(#fff 0 0);

  mask-composite: exclude;

  pointer-events: none;

  z-index: -1;

  animation: rotate-border 3s linear infinite;

}

.img-gradient {

  height: 267px;

  display: flex;

  align-items: center;

  padding: 50px 40px 30px;

}



.img-gradient img {

    max-width: 100%;

    height: 176px;

}



.step-card-content {

  max-height: 117px;

  padding: 24px 32px;

}

.step-card-content h5 {

  font-size: 16px;

  font-weight: bold;

   color: #fff;

}

.step-card-content p {

  font-size: 14px;

  opacity: 0.7;

  color: #fff;

  line-height: normal;

}

/* inner table css start */

  .inner-table.table-container {

            max-width: 1080px;

            margin: 0 auto;

            border-radius: 24px;

            padding: 1px;

            background-image: conic-gradient(from 0.39turn, rgba(255, 255, 255, 0.6), rgba(153, 153, 153, 0.1) 0.26turn, rgba(255, 255, 255, 0.6) 0.46turn, rgba(153, 153, 153, 0.1) 0.71turn, rgba(255, 255, 255, 0.6)), linear-gradient(to bottom, #2d2d2d, #2d2d2d);

        }

       .inner-table .table-bordered>:not(caption)>* {

          border: 0;

        }

        .inner-table .table-responsive {

          border-radius: 24px;

        }

        .table-wrapper {

            background-color: #2d2d2d;

            border-radius: 6px;

            overflow: hidden;

        }

        .table {

            margin-bottom: 0;

            background-color: #2d2d2d;

            color: #fff;

        }

        .table thead th {

            background-color: #d6f236;

            color: #000;

            font-weight: 600;

            text-align: center;

            padding: 21px;

            font-size: 25px;

            position: relative;

            line-height: 1.21;

            letter-spacing: -0.75px;

        }

        .table thead th:not(:last-child)::after {

            content: '';

            position: absolute;

            right: -1px;

            top: 0;

            bottom: 0;

            width: 1px;

            background-image: conic-gradient(from 0.39turn, rgba(255, 255, 255, 0.6), rgba(153, 153, 153, 0.1) 0.26turn, rgba(255, 255, 255, 0.6) 0.46turn, rgba(153, 153, 153, 0.1) 0.71turn, rgba(255, 255, 255, 0.6)), linear-gradient(to bottom, #2d2d2d, #2d2d2d);

        }

        .table tbody tr {

            position: relative;

            border: 0;

        }

        .table tbody tr:not(:last-child)::after {

            content: '';

            position: absolute;

            bottom: 1px;

            left: 0;

            right: 0;

            height: 1px;

            background-image: conic-gradient(from 0.39turn, rgba(255, 255, 255, 0.6), rgba(153, 153, 153, 0.1) 0.26turn, rgba(255, 255, 255, 0.6) 0.46turn, rgba(153, 153, 153, 0.1) 0.71turn, rgba(255, 255, 255, 0.6)), linear-gradient(to bottom, #2d2d2d, #2d2d2d);

        }

        .table tbody td {

            background-color: var(--dark-bg);

            color: #fff;

            padding: 24px;

            border: none;

            position: relative;

            vertical-align: middle;

            font-size: 25px;

            font-weight: 500;

            line-height: 1.21;

        }

        .table tbody td:last-child {

            border-right: none;

        }

        .table tbody td:not(:last-child)::after {

            content: '';

            position: absolute;

            right: 0;

            top: 0;

            bottom: 0;

            width: 1px;

            background-image: conic-gradient(from 0.39turn, rgba(255, 255, 255, 0.6), rgba(153, 153, 153, 0.1) 0.26turn, rgba(255, 255, 255, 0.6) 0.46turn, rgba(153, 153, 153, 0.1) 0.71turn, rgba(255, 255, 255, 0.6)), linear-gradient(to bottom, #2d2d2d, #2d2d2d);

        }

        .table tbody td:first-child {

            font-weight: 500;

            text-align: center;

        }

        .table tbody td:not(:first-child) {

            text-align: center;

        }



        .note-content {

          background: var(--dark-bg);

          border-radius: 24px;

        }

        .note-left div {

          padding: 18px 18px 22px;

          font-size: 25px;

          font-weight: 500;

          line-height: 1.21;

          letter-spacing: -0.75px;

          text-align: center;

          color: #fff;

          position: relative;

        }

        .note-right {

          padding: 18px 18px 20px;

          position: relative;

        }

         .note-right .time {

          font-size: 25px;

          font-weight: 500;

          line-height: 1.21;

          letter-spacing: -0.75px;

          text-align: center;

          color: #fff;

          position: relative;

          margin-top: 12px;

        }

        .note-left div:not(:last-child)::after {

            content: '';

            position: absolute;

            bottom: 1px;

            left: 0;

            right: 0;

            height: 1px;

            background-image: conic-gradient(from 0.39turn, rgba(255, 255, 255, 0.6), rgba(153, 153, 153, 0.1) 0.26turn, rgba(255, 255, 255, 0.6) 0.46turn, rgba(153, 153, 153, 0.1) 0.71turn, rgba(255, 255, 255, 0.6)), linear-gradient(to bottom, #2d2d2d, #2d2d2d);

        }

.note-left {

  position: relative;

}

        .note-left::after {

            content: '';

            position: absolute;

            right: 0;

            width: 1px;

            top: 0;

            height: 100%;

            background-image: conic-gradient(from 0.39turn, rgba(255, 255, 255, 0.6), rgba(153, 153, 153, 0.1) 0.26turn, rgba(255, 255, 255, 0.6) 0.46turn, rgba(153, 153, 153, 0.1) 0.71turn, rgba(255, 255, 255, 0.6)), linear-gradient(to bottom, #2d2d2d, #2d2d2d);

        }

        .note-right .amount {

          font-size: 65px;

          line-height: 0.9;

          letter-spacing: -1.95px;

          text-align: center;

        }

/* inner table css end */

/* margin detail box */

.mcx-card {

  height: auto;

  padding: 56px 94px;

  border-radius: 24px;

  background-color: #171717;

  position: relative;

  overflow: hidden;

  margin-bottom: 20px;

}



.mcx-card::before {

  content: '';

  position: absolute;

  inset: 0;

  border-radius: 24px;

  padding: 1px;

  background: conic-gradient(from 140deg, #ababab, #383838 93.6deg, #ababab 165.6deg, #383838 255.6deg, #ababab);

  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);

  -webkit-mask-composite: xor;

  mask-composite: exclude;

  pointer-events: none;

}



.mcx-card-content {

  position: relative;

  z-index: 1;

  text-align: left;

  padding: 0;

}



.mcx-card-title {

  font-size: 36px;

  font-weight: bold;

  color: var(--primary-color);

  margin-bottom: 10px;

  line-height: normal;

}



.mcx-card-content p {

  font-size: 28px;

  color: rgba(255,255,255,0.7);

   line-height: normal;

   font-weight: normal;

}





.formula-section {

  margin-top: 10px;

}



.formula-label {

   font-size: 28px;

  color: rgba(255,255,255,0.7);

  margin-bottom: 10px;

  font-weight: bold;

  line-height: normal;

}



.formula-text {

  font-size: 28px;

  color: rgba(255,255,255,0.7);

  margin-bottom: 10px;

  line-height: normal;

}

.formula-text:last-child {

  margin-bottom: 0;

}

.inner-glow.shift-left {

  left: 80%;

  opacity: 0.7;

}



.inner-glow.shift-center {

  opacity: 0.7;

} 

.note-info {

  font-size: 25px;

  font-weight: 500;

  font-style: normal;

  line-height: 1.21;

  letter-spacing: -0.75px;

  text-align: left;

  color: #fff;

}

.inner-list {

  font-size: 26px;

  font-weight: 300;

  font-style: normal;

  line-height: 1.5;

  letter-spacing: normal;

  text-align: justify;

  color: #fff;

}

/* whatsapp btn */
.wa-widget-send-button {
    margin: 0 0 10px 0 !important;
    position: fixed !important;
    z-index: 16000160 !important;
    bottom: 0 !important;
    text-align: center !important;
    height: 50px;
    min-width: 50px;
    border: 0 solid #363636;
    border-radius: 100px;
    visibility: visible;
    transition: none !important;
    background-color: #00e785;
    box-shadow: 4px 5px 10px rgba(0, 0, 0, 0.4);
    right: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Responsive */

@media(max-width: 1000px) {

  .section-space {

    padding: 80px 50px;

  }

}



@media (max-width: 768px) {

  .hero-title {

    font-size: 48px;

    line-height: 121.1%;

    letter-spacing: -1.44px;

  }

  .marquee-section {

    padding: 0;

  }

  .global-earnings-section .section-header {

    padding-top: 5rem;

  }

  .steps-wrapper-grid {

    grid-template-columns: repeat(1, 1fr);

    height: 100%;

  }

  .browse-btn {

    min-width: 100%;

  }

  /* .section-title {

    font-size: 1.75rem;

  } */



  .benefits-grid {

    grid-template-columns: 1fr;

  }



  .earnings-cards {

    flex-wrap: wrap;

  }



  .testimonials-grid {

    flex-wrap: wrap;

  }



  .nav-links,

  .nav-buttons {

    display: none;

  }



  .gap-y39 {

    gap: 39px 0;

  }



  .cta-buttons {

    flex-direction: column;

    align-items: center;

  }



  .cta-buttons .btn {

    width: fit-content;

  }



  .app-btns {

    flex-direction: column;

  }



  .testimonial-card {

    width: 240px;

  }



  .testimonial-card img {

    height: 202px;

  }



  .testimonial-card:nth-child(1) {

    transform: translateX(calc(-50% - 420px)) scale(0.75);

  }



  .testimonial-card:nth-child(2) {

    transform: translateX(calc(-50% - 80px)) scale(0.85);

  }



  .testimonial-card:nth-child(4) {

    transform: translateX(calc(-50% + 80px)) scale(0.85);

  }



  .trust-section {

    padding: 20px 15px 20px;

  }



  .benefits-icon {

    width: 50px;

    height: 50px;

    position: relative;

  }



  .benefit-item span {

    font-size: 17px;

    line-height: normal;

  }



  .benefit-item {

    padding: 10px;

    gap: 10px;

  }



  .benefits-card {

    padding: 25px 25px 50px;

  }



  .benefit-item svg {

    width: 25px;

    height: 25px;

  }



  .benefits-grid {

    padding: 0;

    gap: 10px;

  }



  .benefits-header {

    margin-bottom: 3rem;

  }



  .benefits-section {

    min-height: auto;

  }





  .benefits-section::after {

    background-size: cover;

    /* height: calc(100% - 1000px); */

    background-position: center;

    bottom: 15%;



  }



  .mw-100 {

    max-width: 100%;

    padding: 0;

  }



  .stepsSwiper {

    width: 100%;

    padding: 170px 0 0 0;

  }



  .steps-swiper-button-next {

    right: 28%;

  }



  .steps-swiper-button-prev {

    left: 28%;

  }



  .step-text {

    font-size: 13px;

  }



  .trust-section {

    grid-template-columns: repeat(2, 1fr);

    gap: 10px;

    padding: 29px 15px;

  }



  /* fixesidebar css */

  .sticky-sidebar {

    padding: 10px 7px;

  }



  .sidebar-item {

    margin-bottom: 10px;

    padding-bottom: 10px;

  }



  .sidebar-item .icon-wrapper {

    width: 30px;

    height: 30px;

  }



  .icon-wrapper svg {

    width: 20px;

    height: 20px;

  }



  .sidebar-item label {

    font-size: 10px;

  }

  .table thead th,

    .table tbody td {

        font-size: 14px;

        padding: 12px;

        line-height: normal;

    }

    

  .formula-label, .formula-text {

    font-size: 18px;

  }

  .mcx-card .mcx-card-title {

      font-size: 28px;

  }

  .note-info {

    font-size: 16px;

  }

  .inner-list {

    font-size: 16px;

  }

}







@media (min-width: 768px) and (max-width: 860px) {

  .benefits-section::after {

    height: calc(100% - 1000px);

    background-size: cover;

    background-position: center;

    bottom: -3%;

  }



  .benefits-grid {

    gap: 2.5rem 2.5rem;

  }



  .card-icon-text.margin-icon {

    font-size: 3.5rem;

  }



  .margin-wrapper {

    width: 180px;

    height: 180px;

  }

}





/* @media (min-width: 991px) and (max-width: 1100px) {

  .device-screen {

    aspect-ratio: 16 / 16;

  }

} */



@media (min-width: 1200px) {



  .hero-section::before {

    background-size: contain;



  }



  .why-card.col-lg-3 {

    width: 27.5%;

  }

  

  .mw-1080 {

  max-width: 1080px;

  margin: 0 auto;

}



}



@media (min-width: 800px) and (max-width: 1280px) {

  .benefits-section::after {

    height: calc(100% - 1000px);

    bottom: 5%;

    background-position: center;

    background-size: cover;

  }



  .benefits-grid {

    gap: 2.5rem 2.5rem;

  }



  .card-icon-text.margin-icon {

    font-size: 3.5rem;

  }



  .margin-wrapper {

    width: 180px;

    height: 180px;

  }



  .navbar-nav .nav-link {

    margin: 0 0.5rem;

  }



  .trust-section {

    grid-template-columns: repeat(4, 1fr);

    gap: 30px;

  }

   .steps-wrapper-grid {

        grid-template-columns: repeat(3, 1fr);

   }

}



@media (max-width: 576px) {

  .hero-section {

    padding: 9rem 0 0;

  }



  .hero-title {

    font-size: 48px;

    line-height: 121.1%;

    letter-spacing: -1.44px;

  }



  .hero-buttons {

    flex-direction: column;

    align-items: center;

  }



  .btn-primary-hero,

  .btn-secondary-hero {

    width: 100%;

    max-width: 300px;

  }



  .card-icon-text.margin-icon {

    font-size: 3.5rem;

  }



  .margin-wrapper {

    height: 200px;

    width: 200px;

    margin-left: 24px;

  }



  .card-margin.data-wrapper::before {

    left: -50px;

  }



  .card-margin.data-wrapper::after {

    right: -50px;

  }



  .card-security .data-wrapper img {

    width: 100%;

  }



  .card-icon-shield {

    width: 60%;

  }



  .card-security .data-wrapper::before {

    left: -32px;

  }



  .card-security .data-wrapper::after {

    right: -30px;

    left: auto;

    top: 24px;

  }



  .why-card .feature-card {

    max-height: 295px;

    height: 295px;

  }



  .why-card .card-icon-wrapper {

    height: calc(295px - 125px);

    max-height: calc(295px - 125px);

  }



  .card-content {

    padding: 16px;

  }



  .card-content h3 {

    font-size: 11px !important;

    line-height: normal !important;

    margin-bottom: 2px;

  }



  .card-content p {

    font-size: 9px !important;

    line-height: normal !important;

  }



  .mcx-card .mcx-card-content p {

    font-size: 16px !important;

  }



  .cta-content {

    margin: 150px 0;

  }

  



  .global-earnings-section::before {

    background-position: bottom center;

    background-size: 170% auto;

  }

}



@media (max-width: 768px) {

  .hero-title {

    font-size: 48px;

    line-height: 121.1%;

    letter-spacing: -1.44px;

  }



  .hero-subtitle {

    font-size: 1rem;

    line-height: normal;

  }



  .btn-primary-hero,

  .btn-secondary-hero {

    padding: 0.8rem 2rem;

    font-size: 0.95rem;

  }



  .device-mockup {

    max-width: 90%;

    margin-top: 160px;

  }



  .device-frame {

    border-radius: 50px;

    border-bottom-left-radius: 0;

    border-bottom-right-radius: 0;

  }







  .marquee-item {

    font-size: 0.9rem;

  }



  .navbar {

    padding: 16px 12px 16px 20px;

  }



  .navbar-nav .nav-link {

    text-align: center;

    font-size: 16px

  }



  .navbar-nav .nav-item:first-child .nav-link {

    margin-left: 1.5rem;

  }



  .trust-section {

    justify-content: center;

  }



  .account-step-card {

    max-width: 265px;

    margin: 0 auto;

    padding: 32px 10px 20px;

    justify-content: flex-start;

    height: 100%;

  }



  .account-step-card svg {

    height: 95px;

  }



  .footer-links li {

    margin-bottom: 8px !important;

  }



  .footer-brand {

    margin-bottom: 0;

  }



  .footer-social-links ul {

    margin-top: 60px;

    margin-bottom: 0;

  }



  .footer-divider {

    margin: 40px 0;

  }



  .footer-bottom {

    flex-direction: column;

  }



  .footer-legal {

    margin-bottom: 10px;

  }

  .note-right {

    padding: 15px;

  }

  .note-right .amount {

    font-size: 30px;

  }

  .note-right .time, .note-left div {

    font-size: 16px;

  }

  .mcx-card {

    padding: 20px;

  }

}





/* Responsive */

@media (max-width: 992px) {

  .device-screen {

    aspect-ratio: 16 / 23;

    border-radius: 32px;

    border-bottom-left-radius: 0;

    border-bottom-right-radius: 0;

  }



  .hero-title {

    font-size: 48px;

    line-height: 121.1%;

    letter-spacing: -1.44px;

  }



  .navbar-collapse {

    background: rgba(10, 10, 10, 0.30);

    padding: 1rem;

    border-radius: 10px;

    margin-top: 1rem;

  }



  .navbar-brand {

    position: static;

    transform: none;

  }



  .earning-card {

    padding: 10px 25px 10px 13px;

    max-width: 100%;

    width: 100%;

    border-radius: 10.5px;

  }



  .earning-country,

  .earning-amount {

    font-size: 13px;

    line-height: 16px;

  }



  .earnings-title {

    font-size: 54px;

    font-weight: 700;

    line-height: 121.1%;

    /* 69.897px */

    letter-spacing: -1.732px;

  }



  .earnings-subtitle {

    font-size: 19.24px;

    font-weight: 700;

    line-height: 121.1%;

    /* 23.299px */

    letter-spacing: -0.577px;

  }

}



@media (max-width: 520px) {

  .benefits-section::after {

    bottom: -19%;



  }



  .statistics-section .mt-5 {

    margin-top: 10rem !important;

  }



  .section-badge-wrapper {

    overflow: hidden;

  }



  .badge-pill span {

    white-space: nowrap;

  }



  .why-card:nth-child(2) .card-icon-text,

  .why-card:nth-child(3) .card-icon-text {

    background-position: 0px -40px;

  }



  .line-decoration {

    max-width: 20%;

  }

}