:root {
    /*-----------------
    Magic Number Alert:
    
    the 0.09719 is calculated by this formula:
    tan(11°) / 2
    11° is the current skewY value.
    ------------------*/
    --width: 100vw;
    --full-width: 100vw;
    --angle: -11deg;
    --magic-number: 0.09719;
    --skew-padding: calc(var(--width) * var(--magic-number));
    --clip-padding: calc(var(--full-width) * var(--magic-number));
    /* @media (min-width: 42em) {
      --width: 42rem;
    } */
  }

  .diagonal-box-reverse{
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
  }

  .diagonal-box {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    /* height: 100%; */
  }

  .diagonal-box-reverse::before {
    transform-origin: -150%;
    z-index: 1;
  }

  .content {
    position: relative;
    max-width: var(--width);
    width: fit-content;
    height: fit-content;
    bottom: -8%;
    margin: auto;
    z-index: 999;
  }


  .bg-one::before {
    background-color: white;
  }

  /* //////// hero  */

  .HeroSection {
  padding-left: 0;
  padding-right: 0;
  padding-top: 3.5rem; /* 14 * 0.25rem */
}


.animated-gradient {
    width: 100%;
    /* height: 100%; */
    background: linear-gradient(120deg, #ff6fd8, #915eff, #4eacff, #34e89e);
    /* background: black; */
    background-size: 300% 300%;
    animation: gradientAnimation 15s ease-in-out infinite;
    overflow: hidden;
}
.animated-gradient-GetStarted {
    width: 100%;
    /* background: linear-gradient(120deg, #ff6fd8, #915eff, #4eacff); */
    background: linear-gradient(135deg, #21bbd7 0%, #333da8 50%, #bf1cc1 100%);

    background-size: 300% 300%;
    animation: gradientAnimation 15s ease-in-out infinite;
    overflow: hidden;
}

@keyframes gradientAnimation {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}



  .badge {
    background: rgba( 255, 255, 255, 0.5 );
    box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
    backdrop-filter: blur( 4.5px );
    -webkit-backdrop-filter: blur( 4.5px );
    font-size: 14px;
    border-radius: 4px;
    padding: 4px 8px;
    width: fit-content;
  }

  .radius {
    border-radius: 5px;
    overflow: hidden;
  }

  .gradient-border-bg {
    border: 5px solid;
    border-image: linear-gradient(45deg, purple, orange) 1;
    padding: 1rem;
  }

  /* tailwind to css */
  .section-bg {
    background-color: white;
  }

  /* Hero */
  .px-0 {
    padding-left: 0;
    padding-right: 0;
  }

  .pt-14 {
    padding-top: 3.5rem;
  }
  .mx-auto {
    margin-left: auto;
    margin-right: auto;
  }
  .w-full {
    width: 100%;
  }

  .hero-container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: start;
    max-width: 97%;
    margin-left: auto;
    margin-right: auto;
  }

  .hero-left {
    display: flex;
    flex-direction: column;
    width: 100%;
    text-align: center;
    padding-top: 3.4rem;
  }

  .hero-badge {
    background-color: rgba(255, 255, 255, 0.30);
    width: fit-content;
    padding: 0.375rem 0.75rem;
    border-radius: 0.25rem; /* rounded */
  }
  .HeroSection-text {
  color: #ffffff; /* White color */
}
  .hero-badge > p {
    color: #ffffff;
  }

  .hero-badge > p > span {
    padding: 0.125rem 0.5rem;
    font-size: 0.875rem;
    border-radius: 0.25rem; /* rounded */
    background-color: rgb(59 130 246 / 0.9);
    margin-right: 0.5rem;
  }

  .hero-title {
     font-size: clamp(2rem, 15vw, 5rem);
    line-height: 1;
    font-weight: bold;
    width: min-content;
    background: -webkit-linear-gradient(white, gray);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
    /* text-shadow: 2px 1px 6px rgba(0,0,0,0.37); */
  }
.your-class {
  font-size: clamp(1rem, 2.5vw, 6rem);
}

  .hero-subtitle {
    margin-top: 1.5rem;
    font-size: 1.3rem;
    line-height: 1.8rem;
    font-weight: normal;
    color: #3a3a3a;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6);
    width: 60%;
    
  }

  .cards-container {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4rem;
  }
/* CSS for the button section */
.hero-button-container {
    margin-top: 2.5rem; /* equivalent to mt-10 */
    text-align: center; /* equivalent to text-center */
}

.hero-button {
    align-self: center; /* align-self-center */
    width: fit-content; /* equivalent to w-fit */
    background-color: rgba(59, 130, 246, 0.9); /* bg-blue-500/90 */
    color: #ffffff; /* text-white */
    padding: 0.625rem 2.5rem; /* px-10 py-2.5 */
    border-radius: 0.5rem; /* rounded-lg */
    font-size: 0.875rem; /* text-sm */
    border: none; /* Removing default border */
    cursor: pointer; /* Change cursor to pointer on hover */
}

.hero-button:hover {
    background-color: rgba(37, 99, 235, 0.9); /* hover:bg-blue-700/90 */
}

  .card {
    width: fit-content;
    display: flex;
    align-items: center;
    gap: 1rem;
    color: #000;
  }

  .card-image {
    display: inline-block;
    width: 3rem;
    height: 3rem;
    border-radius: 100px;
  }
  .card-price-up {
    color: #2db47f;
  }

  .card-price-down {
    color: #ec4e70;
  }

  .card-price-up > span,
  .card-price-down > span {
    display: inline-block;
  }

  .form-container {
    /* background-color: rgba(255, 255, 255, 0.5); */
    background: white;
    border-radius: 0.5rem; /* rounded-lg */
    color: #000;
    padding: 2rem;
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    backdrop-filter: blur(12px);
  }

  .form-container::before {
    content: '';
    position: absolute;
    z-index: -1;
    inset: 0;
    border-radius: 0.5rem;
    border-width: 2px;
    border-style: solid;
    border-color: transparent;
    /* background-image: linear-gradient(to top, #BF1CC1 30%, #21BBD7, #333DA8); */
    border-color: transparent;
    /* background-image: linear-gradient(to top, #000 30%, #000, #000); */
    mask:linear-gradient(#000 0 0) padding-box,linear-gradient(#000 0 0);
    mask-composite: exclude;
  }

  .form-grid {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 1rem;
  }

  .input-label {
    display: block;
    font-weight: 600;
  }

  .input {
    width: 100%;
    margin-top: 8px;
    padding: 0.5rem;
    border: 1px solid;
    border-radius: 8px;
    /* border-bottom-width: 1px; */
    border-color: rgb(156 163 175);
    background-color: transparent;
  }

  .phone-input {
    border-width: 1px;
    border-right-width: 0;
    border-color: rgb(209 213 219);
  }

  .textarea-input {
    width: 100%;
    margin-top: 0.5rem;
    padding: 0.5rem;
    border-width: 1px;
    border-color: rgb(209 213 219);
    border-radius: 0.5rem;
  }

  .input:focus {
    outline: none;
  }
  .PhoneInput-wrapper {
  display: flex;
  margin-top: 0.5rem; /* 2 spacing units (mt-2 in Tailwind) */
}

.PhoneInput-country {
  border: 1px solid #d1d5db; /* Light gray border */
  border-right: none; /* Remove the right border */
  padding: 0.5rem; /* Padding for input field */
  border-radius: 0.375rem 0 0 0.375rem; /* Rounded corners on the left */
  outline: none; /* Remove browser's default outline */
  flex-shrink: 0; /* Prevent shrinking */
}

.PhoneInput-country:focus {
  border-color: #3b82f6; /* Focus border color (blue) */
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5); /* Optional focus ring */
}

.PhoneInput-number {
  width: 100%; /* Take remaining space */
  border: 1px solid #d1d5db; /* Light gray border */
  border-left: none; /* Remove left border to connect with select */
  padding: 0.5rem; /* Padding for input field */
  border-radius: 0 0.375rem 0.375rem 0; /* Rounded corners on the right */
  outline: none; /* Remove browser's default outline */
}

.PhoneInput-number:focus {
  border-color: #3b82f6; /* Focus border color */
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5); /* Optional focus ring */
}


  .hero-right {
    width: 100%;
    margin-top: 2.5rem;
  }
  /* ///////////////////  */

  .form-title{
    font-weight: bold;
    margin: 0 0 20px 0;
  }
  .form-title h3{
    color: #000000;
    font-size: 20px;
  }
  .custom-about-container {
  padding-top: 4.5rem;
  padding-bottom: 4.5rem;
  max-width: 75%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
}
.about-btn {
  color: white; 
  background-color: #3b82f6; 
  border-radius: 0.375rem; 
    padding: 9px 18px;
  font-size: 0.875rem; 
  display: flex;
  align-items: center; 
  gap: 0.875rem;
  margin-bottom: 2rem; 
  transition: background-color 0.3s; 
}

.about-sticky-element {
    display: grid;
    grid-template-columns: repeat(2, 1fr); 
    gap: 0px; 
    /* position: sticky; */
    inset: 0;
    z-index: 1;
    transition: opacity 0.5s ease-in-out;
    /* opacity: 0; */
    margin-left: auto;
    margin-right: auto;
}


.about-btn:hover {
  background-color: #1d4ed8; 
}
.about-heading {
   font-size: clamp(2rem, 15vw, 5rem);
  font-weight: 900;
  line-height: 1.2;
  width: fit-content;
  color: #3a3a3a;
  margin-bottom: 3rem;
}
.about-paragraph {
  text-align: left;
  font-size: 1.1rem;
  color: #3a3a3a;
  width: 83.333333%; /* Equivalent to w-5/6 */
}
/* CSS for hero-input-text section */
.hero-input-text-container {
    margin-top: 1rem; /* equivalent to mt-10 */
}

.hero-input-text-label {
    display: block; /* To ensure the label is on its own line */
    margin-bottom: 0.5rem; /* Space between label and textarea */
    font-weight: bold; /* Style as needed */
}

.hero-input-text-textarea {
    width: 100%; /* Full width of the container */
    padding: 0.75rem; /* Padding inside the textarea */
    border-radius: 0.375rem; /* Rounded corners */
    border: 1px solid #ccc; /* Border color */
    font-size: 1rem; /* Font size */
    resize: vertical; 
    height: 50px;
}

/* Optional: Add focus styles */
.hero-input-text-textarea:focus {
    border-color: #007BFF; /* Border color on focus */
    outline: none; /* Remove default outline */
}

.about-image {
  aspect-ratio: 1 / 1;
  object-fit: contain;
  margin-left: auto;
  margin-right: auto;
  display: block;
}


.trade-container {
  padding-top: 4.5rem;
  padding-bottom: 4.5rem;
  max-width: 75%;
  margin-left: auto;
  margin-right: auto;
  display: grid;
  grid-template-columns: 1fr; /* Single column by default */
}


.trade-sticky-element {
  display: grid;
  grid-template-columns: repeat(2, 1fr); 
  gap: 0px; 
  /* position: sticky; */
  inset: 0;
  z-index: 1;
  transition: opacity 0.5s ease-in-out;
  /* opacity: 0; */
  margin-left: auto;
  margin-right: auto;
}


.trade-heading {
   font-size: clamp(2rem, 15vw, 5rem);
  font-weight: 900; /* Equivalent to font-black */
  line-height: 1.2; /* Equivalent to leading-none */
  width: fit-content; /* Equivalent to w-fit */
  color: #3a3a3a; /* Equivalent to text-black */
  margin-bottom: 3rem; /* Equivalent to mb-12 */
}

.Select-hero {
  width: 100%; /* Full width */
  margin-top: 0.5rem; /* Top margin (2 * 0.25rem) */
  padding: 0.5rem; /* Padding all around (2 * 0.25rem) */
  border: 1px solid #d1d5db; /* Light gray border */
  border-radius: 0.5rem; /* Rounded corners (lg) */
  outline: none; /* Remove default focus outline */
}
.RoleSelect {
  width: 100%; /* Full width of the container */
  margin-top: 0.5rem; /* Margin-top for spacing */
  padding: 0.5rem; /* Padding inside the select box */
  border: 1px solid #d1d5db; /* Light gray border */
  border-radius: 0.375rem; /* Rounded corners */
  outline: none; /* Remove default outline */
  background-color: white; /* Background color for the select box */
}

.RoleSelect:focus {
  border-color: #3b82f6; /* Focus border color (blue) */
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5); /* Focus ring */
}

.Select-hero:focus {
  border-color: #3b82f6; /* Change border color on focus (e.g., Tailwind's blue-500) */
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5); /* Optional focus ring */
}


.trade-paragraph {
  text-align: left; /* Equivalent to text-left */
  font-size: 1.1rem; /* Equivalent to text-2xl */
  color: #3a3a3a; /* Equivalent to text-black */
  width: 83.333333%; /* Equivalent to w-5/6 */
}

/* CSS for UnlockedByNumbers section */


.background-video {
  position: absolute;
    background-color: transparent;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;

}
.background-video-globe {
  position: absolute;
    background-color: transparent;
    top: 118px;
    /* left: 336px; */
    right: -216px;
    width: 75%;
    height: 100%;
    object-fit: cover;
    z-index: 1;

}


.unlockedbynumbers-section {
    background: linear-gradient(
        to right,
        rgba(59, 130, 246, 1) 10%,
        rgba(168, 85, 247, 1) 75%,
        rgba(168, 85, 247, 1) 90%
    );
    overflow: hidden;
    position: relative;
}

.unlockedbynumbers-diagonal-box-reverse {
    background-color: #1c3a74; /* This is an approximate value for bg-one */
    padding: 24px 0;
    position: relative;
}

.unlockedbynumbers-image {
    position: absolute;
    right: 0;
    object-fit: contain;
    height: 100%;
    width: 50%;
    margin-left: auto;
    transform: translateX(175px) scale(1.2);
    aspect-ratio: 1 / 1;
}

.unlockedbynumbers-content {
    position: relative;
    z-index: 1;
}

.unlockedbynumbers-grid {
    max-width: 75%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}



.unlockedbynumbers-title {
  font-size: clamp(2rem, 8vw, 3.5rem);
    font-weight: bold;
    color: #ffffff;
    /* color: #3a3a3a; */
    margin-bottom: 1rem;
    text-shadow: -3px -3px 10px rgba(0, 0, 0, 0.37);
}

.unlockedbynumbers-description {
    text-align: left;
    font-size: 1rem;
    margin-bottom: 1.5rem;
    color: white;
    width: 83.333333%;
}

.unlockedbynumbers-info-grid {
    max-width: 75%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 16px;
}

@media (min-width: 768px) {
    .unlockedbynumbers-grid,
    .unlockedbynumbers-info-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .unlockedbynumbers-info-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.unlockedbynumbers-info-heading {
    border-left: 2px solid #ffffff;
    padding-left: 0.5rem;
    font-weight: 600;
    font-size: 1.5rem;
    color: #ffffff;
    margin-bottom: 1rem;
}

.unlockedbynumbers-info-text {
    color: white;
    font-weight: 400;
    font-size: 1.125rem;
}


  /* Get Started */
  .get-starter-container {
    padding: 6rem 0;
    text-align: center;
  }

  .get-started-header {
    color: #ffffff;
    margin-bottom: 3rem;
    font-size: clamp(2rem, 15vw, 5rem);
    font-weight: bold;
  }

  .get-started-sub-header {
    margin-bottom: 4rem;
    color: #ffffff;
    font-size: 1.875rem;
    line-height: 1.75rem;
    max-width: 80%;
    margin: auto;
    margin-bottom: 3rem;
  }

  .button-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
  }

  .button-container > a {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    color: #ffffff;
    padding: 0.625rem 1.5rem;
    font-weight: 500;

    border-radius: 0.5rem;
    background-color: rgb(229 231 235);
    color: #000000;
  }

  .button-container > a:hover {
    text-decoration: none;
    color: #000000;
  }

  .button-container > a:last-child {
    border-radius: 0.5rem;
    background-color: rgb(229 231 235);
    color: #000000;
  }
  .button-container > a:last-child:hover {
    background-color: rgb(209 213 219 / 0.8);
  }

  /* Testimonials */
  .testimonials-container {
    padding: 6rem 0;
    height: fit-content;
  }
  .testimonial-header {
    margin-bottom: 3rem;
    text-align: center;
    font-weight: bold;
    font-size: clamp(2rem, 9vw, 5rem);
  }
  .swiper-wrapper {
    padding-top: 2rem;
    padding-bottom: 2rem;
    height: fit-content !important;
  }
  .swiper{
    width: 90%;
  }

  .testimonial-button-prev,
  .testimonial-button-next {
    display: inline-block;
    position: absolute;
    top: 45%;
    z-index: 9;
    transform: translateY(-50%) rotate(180deg);
  }

  .testimonial-button-next {
    transform: translateY(-50%);
    right: 0;
  }

  .testimonial-button-prev::before,
  .testimonial-button-next::before {
    content: unset;
  }

  .testimonial-btn {
    position: relative;
    display: inline-block;
    cursor: pointer;
    outline: none;
    border: 0;
    vertical-align: middle;
    text-decoration: none;
    background: transparent;
    padding: 0;
    font-size: inherit;
    font-family: inherit;
  }
  
  .testimonial-btn.btn-swiper-custom {
    width: 4.4rem;
    height: auto;
  }
  
  .testimonial-btn.btn-swiper-custom .circle {
    transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
    position: relative;
    display: block;
    margin: 0;
    width: 3rem;
    height: 3rem;
    background: linear-gradient(135deg, #21bbd7 0%, #333da8 50%, #bf1cc1 100%);
    border-radius: 1.625rem;
  }
  
  .testimonial-btn.btn-swiper-custom .circle .icon {
    transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    background: #fff;
  }
  
  .testimonial-btn.btn-swiper-custom .circle .icon.arrow {
    transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
    left: 0.625rem;
    width: 1.125rem;
    height: 0.125rem;
    background: none;
  }
  
  .testimonial-btn.btn-swiper-custom .circle .icon.arrow::before {
    position: absolute;
    content: "";
    top: -0.29rem;
    right: 0.0625rem;
    width: 0.625rem;
    height: 0.625rem;
    border-top: 0.125rem solid #fff;
    border-right: 0.125rem solid #fff;
    transform: rotate(45deg);
  }
  
  .testimonial-btn:hover .circle {
    width: 100%;
  }
  
  .testimonial-btn:hover .circle .icon.arrow {
    background: #fff;
    transform: translate(1rem, 0);
  }

  .testimonial-container {
    display: flex;
    /* max-width: 56%; */
    gap: 3rem;
    align-items: start;
    margin: auto;
    background-color: rgba(255, 255, 255, 0.5);
    outline-style: solid;
    outline-width: 1rem;
    outline-color: #F4F4F4;
    border-radius: 0.5rem;
    color: #000000;
    padding: 3rem;
    backdrop-filter: blur(12px);

  }
  .testimonial-container::before {
    content: '';
    z-index: -1;
    position: absolute;
    inset: 0;
    border-radius: 0.5rem;
    border: 2px;
    border-style: solid;
    border-color: transparent;
    background-origin: border-box;
    background-image: linear-gradient(to top, #BF1CC1 30%, #21BBD7, #333DA8);
    mask:linear-gradient(#000 0 0) padding-box,linear-gradient(#000 0 0);
    mask-composite: exclude;
  }

  .user-image-container {
    border-radius: 100px;
    width: 120px;
    height: 120px;
    overflow: hidden;
  }
  .user-image-container > span {
    color: #000000;
  }

  .user-image-container > img {
    height: 100%;
    width: 100%;
    object-fit: cover;
  }

  .user-details-container {
    flex: 1;
    text-align: start;
  }

  .user-details-container > div {
    margin-bottom: 2rem;
  }

  .user-details-container > div h3 {
    font-size: 1.3rem;
    font-weight: bolder;
    line-height: 1;
  }

  .user-details-container > div p {
    font-size: 1.3rem;
    font-weight: 400;
  }

  .user-details-container > p {

    -webkit-box-orient: vertical;

    font-size: 1rem;
    font-weight: 400;
    text-align: left;
    margin-bottom: 1rem;
  }
  .user-details-container > a {
    font-size: 1.3rem;
    font-weight: bolder;
  }

  .diagonal-box-reverse{
      display: flex;
   position: relative;
    }
    
  /* lg viewport */
  @media (min-width: 1024px) {
  }

  /* md viewport */
  @media (min-width: 768px) {
    .hero-left {
      width: 60%;
      text-align: left;
    }

    .hero-right {
      width: 35%;
      margin-top: 0;
    }
    .hero-container {
      flex-direction: row;
    }
    .form-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    /* ////// / */

    .custom-about-container {
    grid-template-columns: 1fr 1fr; /* For two columns on medium screens and up */
  }
  .trade-container {
    grid-template-columns: 1fr 1fr; /* Two columns on medium screens and up */
  }


  }

  .diagonal-box::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    transform: skewy(var(--angle, -11deg));
    transform-origin: 150%;
    outline: 1px solid transparent;
    backface-visibility: hidden;
    background: white;
}


  .video-background {
  position: relative;
  width: 100%;
  /* height: fit-content; */
  overflow: hidden;
  padding: 55px 0 0 0;

}

.video-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* Ensures the video covers the entire area */
  z-index: -1; /* Places the video behind the content */
}

.diagonal-box {
  position: relative;
  z-index: 1; /* Ensures the content appears above the video */
}

.full-text {
  display: none;
}

@media (max-width: 1199px) {
     .hero-container {
        max-width: 100%;
        margin: 0 14px;
    }

    .get-starter-container {
        text-align: start;
        margin: 0 0 3rem 15px;
    }
    .get-started-sub-header{
      max-width: 70%;
      margin: 0 0 3rem 15px;
    }
    .diagonal-box-reverse::before,
    .diagonal-box::before {
      transform-origin: 285%;

    }

    .video-content{
      height: 100% !important;

    }

    .hero-left{
      text-align: start;
      gap: 1.5rem;
      padding-top: 0;
    }

    
  }


@media (max-width: 1200px) {

      .diagonal-box-reverse{
        /* padding: 10px 0 30px 0; */
      }
  }



  .role-text{
color: rgba(37, 99, 235, 1);
  }

  .read-more{
    color: #333DA8;
  }

  .swiper-3d .swiper-slide-shadow-right,
  .swiper-3d .swiper-slide-shadow-left {
    background-image: none !important; 
}




.section-gradient {
    position: relative;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.content-globe-section {
  position: relative;
    z-index: 2;
    padding: 20px;
    height: 100%;
    /* overflow-y: auto; */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}


@media (max-width: 1200px) {
    .section-gradient {
        height: auto;
    }

}
@media (max-width: 768px) {

    .content-globe-section {
        height: auto;
    }
}




.our-partners-box{
      margin: auto;
      max-width: 85%;
      padding: 2rem 0;
}

.desktopfx {
    display: block; 
}

.mobilefx {
    display: none; 
}


@media (max-width: 900px) {
    .diagonal-box::before {
          transform-origin: 700%;
      }

    .h6-hero{
      color: white;
    }

      .testimonial-container {
        max-width: 100%;
        margin: 0 75px 0 30px;
        flex-direction: column;
        width: 80%;
      }


      .our-partners-box{
      padding:  0;
      }

    .cards-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 0;
    }
  .card-price-info{
    font-size: 15px;
  }

  .card {
    gap: 0.5rem;
  }
    .cards-container .card img {
      width: 40px;
      height: 40px;
    }
    .trade-paragraph,
    .about-paragraph{
      width: 95%;
      text-align: justify;
      color: gray;
      text-shadow: none;
    }

    .hero-subtitle{
      color: white;
    }

    .card-price-up {
        font-size: 12px;
    }
  
    .card-price-down {
       font-size: 12px;
    }

  .hero-title {
      background: white;
      -webkit-background-clip: text;
      -webkit-text-fill-color: none;
      text-shadow: none;
      color: white;
  }


    .get-started-sub-header{
      max-width: 95%;
        margin: 0 auto 30px auto;
        font-size: 20px;
    }
    .button-container,
    .get-starter-container{
      text-align: center;
    }
    .get-started-header{
      margin-bottom: 20px;
    }
    .get-starter-container{
      margin: 0;
    }
    .get-starter-container {
      padding: 3rem 0;
    }
    .get-started-header,
    .trade-heading,
    .about-heading,
    .hero-title {
    font-size: clamp(2rem, 10vw, 5rem);
    width: 100%;
    }

    .desktopfx {
        display: none !important; 
    }

    .mobilefx {
        display: block; 
    }

  .about-image{
    width: 50px;
  }
  .about-sticky-element{
    margin-bottom: 35px;
    grid-template-columns: repeat(4, 1fr); 
  }


  .trade-sticky-element img{
    width: 50px;
  }
  .trade-sticky-element{
    margin-bottom: 35px;
    grid-template-columns: repeat(4, 1fr); 
  }



  .unlockedbynumbers-info-text{
    text-align: justify;
    width: 93%;
  }

  .custom-about-container,
  .trade-container{
    padding-bottom: 1.5rem;
    padding-top: 1.5rem;
  }


  .unlockedbynumbers-info-grid,
  .our-partners-box,
  .custom-about-container,
  .trade-container{
    max-width: 80%
  }

  .unlockedbynumbers-grid,
  .unlockedbynumbers-info-grid{
    max-width: 93%
  }
  .diagonal-box-reverse::before {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      transform: skewy(var(--angle, -11deg));
      transform-origin: 150%;
      outline: 1px solid transparent;
      backface-visibility: hidden;
      background: black;
  }
  .trade-paragraph,
    .about-paragraph,
    .unlockedbynumbers-description,
    .unlockedbynumbers-info-text {
    font-weight: 400;
    }
  .content-globe-section{
    padding: 140px 20px 40px 20px;
  }

  .mobile-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    margin: 20px 0 0;
        }



  }