body,
  html {
      height: 100%;
      margin: 0;

      color: white;
      overflow: auto;
      padding: 5px;
      ;
      background-color: rgba(0, 0, 0, 1) !important;
  }




  h2,
  h3,
  h4,
  h5,
  h6 {
      margin-top: 0;
      margin-bottom: .5rem;
      font-family: "Open Sans", sans-serif !important;
      font-weight: 400;
      font-size: 35px;
      line-height: 21.78px;
      letter-spacing: 0%;
      /* text-align: center; */
      line-height: 1.2;
      color: var(--bs-heading-color);
  }



  .text-muted {
      color: rgba(134, 134, 139, 1) !important;
      font-family: Arial;
  }

  .navbar-brand span {
      color: #0cf;
  }

  .hero-section {
      position: relative;
      height: 100vh;
      overflow: hidden;
      background: linear-gradient(180deg, #000000 0%, #40C7FE 100%);
      display: flex;
      align-items: center;
      backdrop-filter: blur(115.0999984741211px);
      justify-content: center;
      text-align: center;
      padding-top: 80px;
  }

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

  /* Video overlay */
  .video-overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      backdrop-filter: blur(15.0999984741211px);
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5);
      /* Black with 50% opacity */
      z-index: 0;
  }

  .hero-content {
      z-index: 2;
      padding: 20px;

      border-radius: 10px;
  }

  .features ul {
      padding-left: 0;
  }

  .features li {
      list-style: none;
  }

  .btn-light {
      margin-right: 10px;
  }

  @import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

  .display-5 {
      font-weight: 400 !important;
      font-size: 60px;
      line-height: 70px;


  }

  .crypto-section {
      background: url('../images/1.jpg') no-repeat center center;
      background-size: auto;
      padding: 150px 20px;
      height: 900px;
      box-shadow: inset 20px 16px 20px 8px black;
      text-align: center;
      position: relative;
      z-index: 1;
  }

  .crypto-section::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      box-shadow: -1px -20px 16px 7px black;
      background: rgba(0, 0, 0, 0.85);
      /* Dark overlay */
      z-index: -1;
  }

  .crypto-section h1 {
      font-size: 40px;
      font-family: "Open Sans", sans-serif !important;
      margin-bottom: 20px;
  }

  .crypto-section p {
      max-width: 600px;
      margin: 0 auto 40px;
      font-size: 1rem;
      color: #ccc;
  }

  .feature-list {
      list-style: none;
      padding: 0;
      margin: 0 auto;
      max-width: 500px;
  }

  .feature-list li {
      padding: 15px;
      border-bottom: 1px solid #444;
      font-size: 1rem;
  }

  .feature-list li:last-child {
      border-bottom: none;
  }

  .bg-gradient {
      background: linear-gradient(178.81deg, #20E7FE 38.67%, #4DABFB 62.03%) !important;
  }

  .btn-light1 {
      background-color: rgba(19, 19, 19, 1);
      color: #fff;
  }

  .card-dark {
      background-color: #111;
      border: none;
      border-radius: 15px;
      padding: 2rem;
      max-width: 800px;
      margin: auto;

      text-align: center;
  }

  .price {
      font-size: 3rem;

  }

  .subtext {
      font-size: 0.9rem;
      color: #bbb;
  }

  .highlight {
      font-weight: 500;
      margin: 1.5rem 0;
      background: linear-gradient(178.81deg, #20E7FE 38.67%, #4DABFB 62.03%);
      -webkit-background-clip: text;
      font-size: 20px;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      text-fill-color: transparent;
  }

  .feature {
      margin: 0.8rem 0;
  }

  .btn-light {
      background-color: #fff;
      color: #000;
      border: none;
      /* padding: 0.7rem 2rem; */
      font-weight: 600;
      /* border-radius: 10px; */
  }

  .btn-light:hover {
      background-color: #ddd;
  }

  .hero {
      text-align: center;
      padding: 6rem 1rem 4rem;
  }

  .hero h1 {
      font-size: 60px;
      font-weight: 500;
      line-height: 1.3;
      font-family: "Open Sans", sans-serif !important;
  }

  .btn-custom-light {
      background-color: #fff;
      color: #000;
      padding: 0.6rem 1.5rem;
      font-weight: 600;
      border-radius: 6px;
      margin-right: 0.5rem;
  }

  .btn-custom-dark {
      background-color: #1c1c1c;
      color: #fff;
      padding: 0.6rem 1.2rem;
      border: none;
      border-radius: 6px;
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
  }

  .btn-custom-dark img {
      width: 24px;
      height: 24px;
      border-radius: 50%;
  }

  .fx-divider {
      margin-top: 4rem;
      display: flex;
      align-items: center;
      width: 800px;
      margin-inline: auto;
      position: relative;
  }

  .fx-divider::before,
  .fx-divider::after {
      content: "";
      flex: 1;
      height: 1px;
      background: #333;
  }

  .fx-divider span {
      margin: 0 1rem;
      color: #00ccff;

  }

  .fx-divider .avatar {
      width: 32px;
      height: 32px;
      border-radius: 50%;
  }

  .fx-divider .left-avatar {
      position: absolute;
      left: 0;
  }

  .fx-divider .right-avatar {
      position: absolute;
      right: 0;
  }

  .hero-section2 {
      background: url('../images/4.jpg') no-repeat center center;
      background-size: cover;
      padding: 40px 20px;
      text-align: center;
      position: relative;
      height: 700px;
      z-index: 1;
  }

  .hero-section2::before {
      content: "";
      position: absolute;
      top: 0;
      height: 700px;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.824);
      z-index: -1;
  }

  .hero-section2 h2 {
      font-size: 2.5rem;

  }

  .hero-section2 p {
      max-width: 700px;
      margin: 20px auto;
      font-size: 1rem;
      color: #ddd !important;
  }

  .card {
      position: relative;
      overflow: hidden;
      border: none;
  }

  .card img {
      width: 100%;
      height: auto;
      object-fit: fill;
  }

  .card-overlay {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      padding: 20px;
      background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
      color: #fff;
  }

  .carousel-control-prev-icon,
  .carousel-control-next-icon {
      background-color: #000;
      border-radius: 50%;
  }

  .card-overlay {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      padding: 20px;
      background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgb(0 0 0 / 83%) 80%);
      color: #fff;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      height: 100%;
      transition: background 0.3s ease;
  }

  .card:hover .card-overlay {
      background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgb(0 0 0 / 83%) 80%);
  }

  .testimonial-section {
      padding: 60px 0;
  }

  .testimonial-card {
      /* background-color: #1a1a1a; */
      border-radius: 12px;
      padding: 24px;
      height: 100%;
      transition: border 0.3s ease;
      border: 1px solid #2c2c2c;
  }

  .testimonial-card.active {
      border: 1px solid #00ffff;
  }

  .testimonial-avatar {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      object-fit: cover;
  }

  .author {
      display: flex;
      align-items: center;
      margin-top: 20px;
  }

  .author-info {
      margin-left: 12px;
  }

  .author-info small {
      color: #bbb;
  }

  .trusted-row {
      margin-bottom: 40px;
  }

  .trusted-row img {
      width: 40px;
      height: 40px;
      object-fit: cover;
      border-radius: 50%;
      margin: 0 6px;
      transition: transform 0.2s ease;
  }

  .trusted-row img:hover {
      transform: scale(1.1);
      border: 2px solid #00ffff;
  }


  .testimonial-card {
      /* background-color: #111; */
      border: 1px solid #333;
      border-radius: 12px;
      position: relative;
      overflow: hidden;
      padding: 20px;
      height: 100%;
  }

  .testimonial-overlay {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 60%;
      background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.95) 80%);
      pointer-events: none;
  }

  .avatar-row img {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      object-fit: cover;
      margin: 0 5px;
      border: 2px solid #222;
  }

  .carousel-item .row>div {
      padding: 15px;
  }

  .carousel-control-prev-icon,
  .carousel-control-next-icon {
      background-color: #000;
      border-radius: 50%;
  }

  .hero {
      text-align: center;
      padding: 80px 20px 60px;
  }

  .hero .btn {
      margin-top: 20px;
  }

  .avatar-stack {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      margin-top: 10px;
  }

  .avatar-stack img {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      border: 2px solid #111;
  }

  .testimonial-card {
      /* background-color: #111; */
      border: 1px solid #333;
      border-radius: 12px;
      position: relative;
      overflow: hidden;
      padding: 20px;
      height: 100%;
  }

  .testimonial-overlay {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 60%;
      background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgb(18 18 18 / 2%) 80%);
      pointer-events: none;
  }

  .avatar-row img {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      object-fit: cover;
      margin: 0 5px;
      border: 2px solid #222;
  }

  .carousel-item .row>div {
      padding: 15px;
  }

  .carousel-control-prev-icon,
  .carousel-control-next-icon {
      background-color: #000;
      border-radius: 50%;
  }

  .foot h6 {
      font-size: 15px;
  }

  .form-control {
      background: none !important;
      border-bottom: 2px solid rgb(107, 107, 107) !important;
      border: none;
  }

  ::placeholder {
      color: #fff !important;
  }

  @media screen and (max-width: 768px) {
      .display-5 {
          font-size: 36px !important;
          line-height: 40px !important;
      }
      .card-1{
        top: 30px;
        position: relative;
      }

      .features ul {
          padding-left: 0;
          top: 80px;
          position: relative;
      }

      .one2 {
          display: block !important;
          justify-content: space-between;
      }

      .foot1 {
          bottom: 0 !important;
          left: 0;
          opacity: 0.05;
          font-size: 80px !important;
          pointer-events: none;
      }

      h1,
      h2,
      h3,
      h4,
      h5,
      h6 {

          font-size: 30px !important;

      }

      .fx-divider {
          margin-top: 4rem;
          display: flex;
          align-items: center;
          width: 100% !important;
          margin-inline: auto;
          position: relative;
      }

      .foot h6 {
          font-size: 15px !important;
      }
  }

  .foot1 {
      bottom: -100px;
      left: 0;
      opacity: 0.07;
      font-size: 300px;
      pointer-events: none;
  }

  .first {
      width: auto !important;
      height: auto !important;
  }

  .slide-card {
      position: relative;
      background-size: cover;
      background-position: center;
      height: 350px;
      border-radius: 10px;
      overflow: hidden;
      color: white;
  }

  .slide-overlay {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      /* background: rgba(0, 0, 0, 0.5); */

      box-shadow: inset -20px -100px 70px 10px #000000;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: start;
      padding: 1rem;
  }

  .slide-overlay h5 {
      text-align: start;
      font-size: 25px !important;
  }

  @media (max-width: 768px) {
      .col-md-4 {
          flex: 0 0 100%;
          max-width: 100%;
      }

      .hider {
          display: none;
      }

      .foot .row {
          display: flex;
          justify-content: space-around;
      }
  }

  @media (max-width: 820px) {
      .one2 {
          display: block !important;

      }
  }

  .carousel-item {
      position: relative;
      display: none;
      float: left;
      width: 100%;
      margin-right: -100%;
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
      transition: transform .6s ease-in-out !important;
  }




  html,
  body {
      overflow-x: hidden;
  }

  @media (max-width: 767px) {
      .marquee-content {
          flex-wrap: nowrap;
          /* overflow-x: auto; */
          scroll-behavior: smooth;
      }

      .testimonial-card {
          min-width: 280px;
          flex: 0 0 auto;
      }

      .hero-section {
          position: relative;
          height: 800px;
          overflow: hidden;
          background: linear-gradient(180deg, #000000 0%, #40C7FE 100%);
          display: flex;
          align-items: center;
          backdrop-filter: blur(115.0999984741211px);
          justify-content: center;
          text-align: center;
          padding-top: 200px;
      }

      .one2 video {
          height: 200px;
          position: relative;
      }

      .testimonial-card {
          background: #111;
          color: white;
          border-radius: 10px;
          padding: 15px 20px;
          width: 100%;
          text-align: center;
          font-size: 1rem;
          border: 1px solid rgba(255, 255, 255, 0.1);
          transition: transform 0.3s ease-in-out;
      }
  }

  .btn:hover {
      color: var(--bs-btn-hover-color);
      background-color: var(--bs-btn-hover-bg);
      border-color: #ffffff;
  }

  .one2 video {
      height: 300px;
      position: relative;
  }

  /* Marquee Wrapper */
  .marquee-wrapper {
      overflow: hidden;
      white-space: nowrap;
      position: relative;
      width: 100%;
      padding: 10px 0;
  }

  /* Marquee Content */
  .marquee-content {
      display: flex;
      gap: 20px;
      /* Space between cards */
  }

  /* Individual Testimonial Card */
  .testimonial-card {
      background: #111;
      color: white;
      border-radius: 10px;
      padding: 15px 20px;
      min-width: 280px;
      text-align: center;
      font-size: 1rem;
      border: 1px solid rgba(255, 255, 255, 0.1);
      transition: transform 0.3s ease-in-out;
  }


  /* Marquee Animation - Moves Left */
  @keyframes marqueeLeft {
      from {
          transform: translateX(0%);
      }

      to {
          transform: translateX(-50%);
      }
  }

  /* Marquee Animation - Moves Right */
  @keyframes marqueeRight {
      from {
          transform: translateX(-50%);
      }

      to {
          transform: translateX(0%);
      }
  }

  /* Apply Animations */
  .marquee-left {
      animation: marqueeLeft 15s linear infinite;
  }

  .marquee-right {
      animation: marqueeRight 20s linear infinite;
      /* Slightly slower */
  }

  /* Responsive */
  @media (max-width: 768px) {
      .marquee-left {
          animation: marqueeLeft 10s linear infinite;
      }


      .marquee-right {
          animation: marqueeRight 12s linear infinite;
      }

      .two {
          left: 0 !important;

      }
  }

  .two {
      left: 30%;
      position: relative;
  }

  /* <---------------------- // ------------------------------------> */

  .card {
      background-color: #111;
      border: none;
      border-radius: 15px;
      padding: 20px;
      color: #fff;
  }

  .recommended {
      position: relative;
  }

  .recommended {
      /* content: "Recommended"; */
      position: relative;
      top: -30px;
      left: 50%;
      transform: translateX(-50%);
      background: linear-gradient(187.98deg, #20E7FE 6.47%, #4DABFB 94.23%);
      color: #000;
      font-size: 15px;
      font-weight: bold;
      padding: 4px;
      border-radius: 10px 10px 0px 0px;

  }

  .price {
      font-size: 32px;
      font-weight: bold;
  }

  .feature-list1 {
      list-style: none;
      margin: 0 !important;
      padding-left: 0;
  }

  .feature-list1 li {
      margin: 10px 0;
      border: none !important;
      padding: 5px !important;
      display: flex;
      align-items: center;
  }

  .feature-list1 i {
      margin-right: 10px;
  }
  .feature-list1 .disabled i{
        color: #DA6B6B !important;
  }

  .disabled {
      color: #777;
  }

  .btn-buy {
      width: 100%;
      font-weight: bold;
  }

  .card-img-top {
      border-radius: 10px;
  }

  .cardd {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
  }

  .price {
      font-size: 2.5rem;
      font-weight: bold;
  }

  .price del {
      color: #aaa;
      margin-left: 10px;
      font-size: 1.5rem;
  }

  .card-img {
      max-width: 300px;
      margin: 30px auto;
      position: relative;
  }

  .profit-share {
      position: absolute;
      bottom: 10px;
      left: 10px;
      background-color: rgba(0, 0, 0, 0.6);
      padding: 5px 10px;
      border-radius: 5px;
      font-size: 0.9rem;
  }

  .info-text {
      margin: 10px 0;
      font-size: 1rem;
  }

  .buy-btn {
      margin-top: 30px;
      background: linear-gradient(to right, #00c6ff, #0072ff);
      border: none;
      padding: 12px 30px;
      font-size: 1rem;
      border-radius: 6px;
      color: white;
  }

  .buy-btn:hover {
      opacity: 0.9;
  }

  .info-section {
      max-width: 600px;
      margin: 0px auto;
      text-align: center;
      top: -130px;
      z-index: 999999;
      position: relative;
  }

  .info-box {
     
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      padding: 16px;
      font-size: 1rem;
  }

  .highlight {
      font-weight: bold;
  }

     .gradient-overlay {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 100%;
      background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000000 100%);
    }