* {
          margin: 0;
          padding: 0;
          box-sizing: border-box;
      }


      body {
          font-family: 'DM Sans', sans-serif;
          overflow-x: hidden;
          margin: 0;
          padding: 0;
      }


      /* Navbar  */


      /* Navbar Styles */
      .navbar {
          padding: 1.5rem 0;
          transition: all 0.3s ease;
          position: fixed;
          width: 100%;
          top: 0;
          border-bottom: 1px solid rgba(202, 202, 202, 0.1);
          z-index: 1000;
          background: transparent;
      }

      .navbar.scrolled {
          background: rgba(11, 61, 46, 0.95) !important;
          backdrop-filter: blur(10px);
          padding: 1rem 0;
          box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
      }

      .navbar-brand {
          font-size: 1.5rem;
          font-weight: 700;
          color: #fff !important;
          display: flex;
          align-items: center;
          gap: 0.5rem;
      }



      .navbar-nav .nav-link {
          color: rgba(255, 255, 255, 0.9) !important;
          margin: 0 1rem;
          font-weight: 200;
          transition: color 0.3s ease;
          font-size: 0.95rem;
      }

      .navbar-nav .nav-link:hover {
          color: #5FFFA6 !important;
      }

      .connect-btn {
          background: transparent;
          border: 1px solid #5FFFA6;
          color: #5FFFA6 !important;
          padding: 0.6rem 1.8rem;
          border-radius: 8px;
          font-weight: 600;
          transition: all 0.3s ease;
          text-decoration: none;
          display: inline-block;
      }

      .connect-btn:hover {
          background: #5FFFA6;
          color: #0B3D2E !important;
          transform: translateY(-2px);
          box-shadow: 0 5px 15px rgba(95, 255, 166, 0.3);
      }

      .navbar-toggler {
          border: none;
          padding: 0.5rem;
          background: transparent;
          position: relative;
          width: 30px;
          height: 30px;
      }

      .navbar-toggler:focus {
          box-shadow: none;
      }

      .navbar-toggler-icon {
          width: 25px;
          height: 2px;
          background-color: #fff;
          display: block;
          transition: all 0.3s ease;
          position: relative;
      }

      .navbar-toggler-icon::before,
      .navbar-toggler-icon::after {
          content: '';
          position: absolute;
          width: 25px;
          height: 2px;
          background-color: #fff;
          transition: all 0.3s ease;
          left: 0;
      }

      .navbar-toggler-icon::before {
          top: -8px;
      }

      .navbar-toggler-icon::after {
          top: 8px;
      }

      .navbar-toggler.active .navbar-toggler-icon {
          background-color: transparent;
      }

      .navbar-toggler.active .navbar-toggler-icon::before {
          top: 0;
          transform: rotate(45deg);
      }

      .navbar-toggler.active .navbar-toggler-icon::after {
          top: 0;
          transform: rotate(-45deg);
      }

      /* Hero Section */
      .hero-section {
          min-height: 100vh;
          background: linear-gradient(135deg, #0B3D2E 0%, #1A5D4A 50%, #0B3D2E 100%);
          position: relative;
          overflow: hidden;
          display: flex;
          align-items: center;
          padding-top: 100px;
          padding-bottom: 50px;
      }

      .particles-bg {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background-image: url('./images/banner/banner_particles.png');
          background-size: cover;
          background-position: center;
          background-repeat: no-repeat;
          opacity: 0.5;
          pointer-events: none;
          z-index: 1;
      }

      .circular-bg {
          position: absolute;
          display: none;
          width: 700px;
          height: 700px;
          border: 2px solid rgba(95, 255, 166, 0.15);
          border-radius: 50%;
          top: 50%;
          right: -250px;
          transform: translateY(-50%);
          animation: pulse 4s ease-in-out infinite;
          z-index: 1;
      }

      @keyframes pulse {

          0%,
          100% {
              transform: translateY(-50%) scale(1);
              opacity: 0.3;
          }

          50% {
              transform: translateY(-50%) scale(1.05);
              opacity: 0.5;
          }
      }

      .hero-content {
          z-index: 2;
          position: relative;
          animation: fadeInUp 1s ease;
      }

      @keyframes fadeInUp {
          from {
              opacity: 0;
              transform: translateY(30px);
          }

          to {
              opacity: 1;
              transform: translateY(0);
          }
      }

      .tag {
          display: inline-block;
          background: rgba(95, 255, 166, 0.15);
          color: #5FFFA6;
          padding: 0.5rem 1.2rem;
          border-radius: 20px;
          font-size: 1rem;
          margin-bottom: 1.5rem;
          border: 1px solid rgba(95, 255, 166, 0.3);
      }

      /* Letter Style */
      .usdir-tag .letter {
          color: white;
          font-size: 1.2rem;
          font-weight: 600;
      }

      /* Word Underline */
      .usdir-tag .word {
          display: inline-block;
          text-decoration: underline;
          text-decoration-color: white;
          text-underline-offset: 4px;
          color: #5FFFA6;
          font-size: 1rem;
      }

      /* Gap spacing */
      .usdir-tag .gap {
          display: inline-block;

      }

      /* Tablet & Mobile Responsive */
      @media (max-width: 768px) {
          .usdir-tag {
              display: flex;
              flex-wrap: wrap;
              gap: 8px 14px;
              padding: 0.7rem;
              /* font-size: 0.9rem; */
          }

          .usdir-tag .letter {
              font-size: 1.1rem;
          }

          .usdir-tag .word {
              font-size: 0.95rem;
          }
      }

      /* Extra Small Screens */
      @media (max-width: 480px) {
          .usdir-tag {
              flex-direction: row;
              align-items: flex-start;
              gap: 7px;
          }

          .usdir-tag .gap {
              display: none;
          }
      }

      .hero-title {
          font-size: 3.5rem;
          font-weight: 500;
          color: #fff;
          margin-bottom: 1.5rem;
          line-height: 1.2;
      }

      .hero-description {
          font-size: 1.1rem;
          color: white;
          margin-bottom: 2rem;
          max-width: 500px;
          line-height: 1.6;
      }

      .explore-btn {
          background: #5FFFA6;
          color: #0B3D2E;
          padding: 0.9rem 2.2rem;
          border-radius: 8px;
          font-weight: 600;
          border: none;
          display: inline-flex;
          align-items: center;
          gap: 0.7rem;
          transition: all 0.3s ease;
          text-decoration: none;
          font-size: 1rem;
      }

      .explore-btn:hover {
          transform: translateY(-3px);
          box-shadow: 0 10px 30px rgba(95, 255, 166, 0.4);
          color: #0B3D2E;
      }

      /* Mobile Mockup */
      .mobile-mockup {
          position: relative;
          z-index: 2;
          animation: floatMobile 4s ease-in-out infinite;
      }

      @keyframes floatMobile {

          0%,
          100% {
              transform: translateY(0);
          }

          50% {
              transform: translateY(-20px);
          }
      }

      .phone-frame {
          width: 100%;
          max-width: 450px;
          margin: 0 auto;
          position: relative;
      }

      .phone-frame img {
          width: 100%;
          height: auto;
          display: block;
          filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.3));
      }

      /* Responsive Styles */
      @media (max-width: 991px) {
          .hero-title {
              font-size: 2.8rem;
          }

          .navbar-collapse {
              background: rgba(11, 61, 46, 0.98);
              padding: 1.5rem;
              border-radius: 10px;
              margin-top: 1rem;
          }

          .navbar-nav .nav-link {
              margin: 0.5rem 0;
              padding: 0.5rem 0;
          }

          .connect-btn {
              margin-top: 1rem;
              width: 100%;
              text-align: center;
              justify-content: center;
          }

          .mobile-mockup {
              margin-top: 3rem;
          }

          .phone-frame {
              max-width: 350px;
          }

          .circular-bg {
              width: 500px;
              height: 500px;
              right: -200px;
          }
      }

      @media (max-width: 768px) {
          .hero-title {
              font-size: 2.2rem;
          }

          .banner-top-new {
              margin-top: 10px;
          }

          .hero-description {
              font-size: 1rem;
          }

          .hero-section {
              padding-top: 100px;
              min-height: auto;
          }

          .phone-frame {
              max-width: 300px;
          }

          .circular-bg {
              width: 400px;
              height: 400px;
              right: -150px;
          }



          .explore-btn {
              padding: 0.8rem 1.8rem;
              font-size: 0.95rem;
          }
      }

      @media (max-width: 576px) {
          .hero-title {
              font-size: 1.8rem;
          }

          .banner-top-new {
              margin-top: 10px;
          }

          .hero-description {
              font-size: 0.95rem;
          }

          .navbar {
              padding: 1rem 0;
          }

          .navbar-brand {
              font-size: 1.3rem;
          }



          .phone-frame {
              max-width: 250px;
          }

          .circular-bg {
              width: 300px;
              height: 300px;
              right: -100px;
          }

          .particles-bg {
              opacity: 0.3;
          }
      }

      /* Additional smooth animations */
      .hero-content>* {
          animation: fadeInUp 0.8s ease forwards;
          opacity: 0;
      }

      .hero-content .tag {
          animation-delay: 0.2s;
      }

      .hero-content .hero-title {
          animation-delay: 0.4s;
      }

      .hero-content .hero-description {
          animation-delay: 0.6s;
      }

      .hero-content .explore-btn {
          animation-delay: 0.8s;
      }

      .mobile-mockup {
          animation: floatMobile 4s ease-in-out infinite, fadeInUp 1s ease forwards;
          animation-delay: 0, 1s;
      }

      .banner-top-new {
          margin-top: 50px;
      }

      /* Spinner Animation */
      .spinner-wrap {
          position: absolute;
          width: 100%;
          height: 100%;
          top: 0;
          left: 0;
          pointer-events: none;
      }

      .spinner-item {
          border: 2px solid #5FFFA6;
          border-radius: 50%;
          height: 100%;
          width: 100%;
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
          opacity: 0;
          animation: zoom 2s linear 0.75s infinite;
      }

      .spinner-item--2 {
          animation-delay: 1.25s;
      }

      .spinner-item--3 {
          animation-delay: 1.75s;
      }

      @keyframes zoom {
          0% {
              transform: translate(-50%, -50%) scale(0.2);
              opacity: 0;
          }

          50% {
              opacity: 0.9;
          }

          100% {
              transform: translate(-50%, -50%) scale(1);
              opacity: 0;
          }
      }



      /* hero section */

      /* coin details */
      /* .coin-detail-section {
        margin-bottom: 70px;
      } */
      .btn-trade {
          background: transparent;
          color: #1F2937;
          border: 2px solid #1F2937;
          padding: 12px 35px;
          border-radius: 8px;
          font-size: 1rem;
          font-weight: 600;
          cursor: pointer;
          transition: all 0.3s ease;
          text-decoration: none;
          display: inline-block;
      }

      .btn-trade:hover {
          background: #1F2937;
          color: #ffffff;
          transform: translateY(-2px);
          box-shadow: 0 8px 20px rgba(31, 41, 55, 0.2);
      }

      /* Grid System */
      .parent {
          display: grid;
          grid-template-columns: repeat(5, 1fr);
          grid-template-rows: repeat(5, 1fr);
          gap: 20px;
          min-height: 400px;
      }

      .div1 {
          grid-column: span 2 / span 2;
          grid-row: span 4 / span 4;
      }

      .div2 {
          grid-column: span 2 / span 2;
          grid-row: span 2 / span 2;
          grid-column-start: 3;

      }

      .div3 {
          grid-column: span 2 / span 2;
          grid-row: span 2 / span 2;
          grid-column-start: 3;
          grid-row-start: 3;
      }

      .div4 {
          grid-row: span 4 / span 4;
          grid-column-start: 5;
          grid-row-start: 1;
      }

      .grid-item {
          border-radius: 20px;
          overflow: hidden;
          position: relative;
          transition: all 0.3s ease;
          box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
      }

      .grid-item:hover {
          transform: translateY(-5px);
          box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
      }

      .grid-item img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          display: block;
      }

      /* Responsive Design */
      @media (max-width: 992px) {
          .parent {
              grid-template-columns: repeat(2, 1fr);
              grid-template-rows: auto;
              gap: 15px;
              min-height: auto;
          }

          .div1 {
              grid-column: span 2;
              grid-row: auto;
              min-height: 350px;
          }

          .div2 {
              grid-column: span 1;
              grid-row: auto;
              grid-column-start: auto;
              min-height: 250px;
          }

          .div3 {
              grid-column: span 1;
              grid-row: auto;
              grid-column-start: auto;
              grid-row-start: auto;
              min-height: 250px;
          }

          .div4 {
              grid-column: span 2;
              grid-row: auto;
              grid-column-start: auto;
              grid-row-start: auto;
              min-height: 300px;
          }

      }

      @media (max-width: 768px) {
          .parent {
              grid-template-columns: 1fr;
              gap: 15px;
          }

          .div1,
          .div2,
          .div3,
          .div4 {
              grid-column: span 1;
              min-height: 280px;
          }

          .btn-trade {
              padding: 10px 30px;
              font-size: 0.95rem;
          }
      }

      @media (max-width: 576px) {
          .parent {
              gap: 12px;
          }

          .div1,
          .div2,
          .div3,
          .div4 {
              min-height: 250px;
          }

          .grid-item {
              border-radius: 15px;
          }
      }

      @media (min-width: 350px) and (max-width: 992px) {
          .coin-detail-section {
              margin-bottom: 70px;
          }
      }

      /* coin details */


      /* about */
      .how-to-section {
          padding: 80px 0;
      }


      .section-title .highlight {
          color: #1F2937;
      }


      .steps-container {
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          gap: 25px;
      }

      .step-card {
          background: linear-gradient(135deg, #2D9B7B 0%, #1F7A5F 100%);
          border-radius: 20px;
          padding: 40px 30px;
          color: #ffffff;
          box-shadow: 0 10px 30px rgba(45, 155, 123, 0.3);
          transition: all 0.3s ease;
          position: relative;
          overflow: hidden;
      }

      .step-card::before {
          content: '';
          position: absolute;
          top: -50%;
          right: -50%;
          width: 200%;
          height: 200%;
          background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
          transition: transform 0.5s ease;
      }

      .step-card:hover {
          transform: translateY(-8px);
          box-shadow: 0 15px 40px rgba(45, 155, 123, 0.4);
      }

      .step-card:hover::before {
          transform: translate(-20%, -20%);
      }

      .step-number {
          font-size: 3.5rem;
          font-weight: 500;
          color: rgba(255, 255, 255, 0.3);
          margin-bottom: 40px;
          line-height: 1;
      }

      .step-title {
          font-size: 1.75rem;
          font-weight: 500;
          color: #ffffff;
          text-align: center;
          margin-bottom: 15px;
          position: relative;
          z-index: 1;
      }

      .step-description {
          font-size: 0.95rem;
          color: rgba(255, 255, 255, 0.9);
          line-height: 1.7;
          text-align: center;
          position: relative;
          z-index: 1;
      }

      @media (max-width: 1200px) {
          .steps-container {
              grid-template-columns: repeat(2, 1fr);
              gap: 20px;
          }

          .section-title {
              font-size: 3rem;
          }
      }

      @media (max-width: 768px) {

          .steps-container {
              grid-template-columns: 1fr;
              gap: 0px !important;
          }

          .step-card {
              padding: 35px 25px;
              margin: 12px;
          }

          .how-to-section {
              margin-top: 55px;
              padding: 39px 0px;
          }

          .step-number {
              font-size: 3rem;
          }

          .step-title {
              font-size: 1.5rem;
          }

          .step-description {
              font-size: 0.9rem;
          }
      }

      @media (max-width: 576px) {

          .steps-container {
              gap: 0px !important;
          }

          .step-card {
              padding: 30px 20px;
          }

          .step-number {
              font-size: 2.5rem;
              margin-bottom: 15px;
          }

          .step-title {
              font-size: 1.35rem;
              margin-bottom: 12px;
          }

          .step-description {
              font-size: 0.85rem;
          }
      }

      /* about */

      /* slide */
      .slider-section {
          background: linear-gradient(135deg, #2D9B7B 0%, #1F7A5F 100%);
          padding: 30px 0;
          overflow: hidden;
          position: relative;
          margin-top: 30px;
          margin-bottom: 80px;
      }

      .slider-container {
          width: 100%;
          overflow: hidden;
          position: relative;
      }

      .slider-track {
          display: flex;
          animation: scroll 20s linear infinite;
          width: fit-content;
      }

      .slider-track:hover {
          animation-play-state: paused;
      }

      @keyframes scroll {
          0% {
              transform: translateX(0);
          }

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

      .logo-item {
          display: flex;
          align-items: center;
          gap: 15px;
          padding: 20px 40px;
          white-space: nowrap;
          flex-shrink: 0;
      }

      .logo-item img {
          object-fit: contain;
          height: 60px;
          width: auto;
      }


      /* Duplicate the content for seamless loop */
      .slider-track::after {
          content: '';
      }

      @media (max-width: 768px) {
          .slider-track {
              animation-duration: 15s;
          }

          .logo-item {
              padding: 15px 30px;
          }

          .logo-item img {
              object-fit: contain;
              height: 30px;
              width: auto;
          }

      }

      @media (max-width: 576px) {
          .slider-section {
              padding: 30px 0;
          }

          .slider-track {
              animation-duration: 12s;
          }

          .logo-item {
              padding: 12px 25px;
              gap: 12px;
          }

          .logo-item img {
              object-fit: contain;
              height: 25px;
              width: auto;
          }

      }

      /* slide */

      /* faq */
      .faq-conatiner {
          background: linear-gradient(135deg, #0E442A 0%, #0E442A 50%, #1A5C4A 100%);
          min-height: 100vh;
          margin-bottom: 80px;
          padding: 80px 0;
      }

      .faq-section {
          /* max-width: 900px; */
          margin: 0 auto;
          padding: 0 20px;
      }

      .faq-header {
          text-align: center;
          margin-bottom: 60px;
      }

      .faq-subtitle {
          font-size: 0.95rem;
          color: rgba(255, 255, 255, 0.8);
          margin-bottom: 15px;
          font-weight: 400;
      }

      .faq-title {
          font-size: 4rem;
          font-weight: 500;
          color: #ffffff;
          margin-bottom: 20px;
          letter-spacing: -1px;
      }

      .faq-description {
          font-size: 1.1rem;
          color: rgba(255, 255, 255, 0.7);
          line-height: 1.6;
      }

      .accordion {
          --bs-accordion-bg: transparent !important;
          --bs-accordion-border-color: transparent !important;
      }

      .accordion-item {
          background: rgba(255, 255, 255, 0.05) !important;
          border: none;
          border-radius: 12px !important;
          margin-bottom: 15px;
          overflow: hidden;
          transition: all 0.3s ease;
      }

      .accordion-item:hover {
          background: rgba(255, 255, 255, 0.08);
      }

      .accordion-button {
          background: transparent;
          color: #ffffff !important;
          font-size: 1.1rem;
          font-weight: 500;
          padding: 25px 30px;
          border: none;
          box-shadow: none;
          transition: all 0.3s ease;
      }

      .accordion-button:not(.collapsed) {
          background: rgba(255, 255, 255, 0.1) !important;
          color: #ffffff !important;
          box-shadow: none;
      }

      .accordion-button:focus {
          box-shadow: none;
          border: none;
      }

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

      .accordion-button .icon-wrapper {
          width: 28px;
          height: 28px;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-left: auto;
          transition: transform 0.3s ease;
      }

      .accordion-button .icon-wrapper i {
          font-size: 1.2rem;
          color: #99E39E;
          transition: transform 0.3s ease;
      }

      .accordion-button:not(.collapsed) .icon-wrapper i {
          transform: rotate(45deg);
      }

      .accordion-body {
          padding: 0 30px 25px 30px;
          color: rgba(255, 255, 255, 0.8);
          font-size: 1rem;
          line-height: 1.8;
      }

      .accordion-collapse {
          transition: height 0.3s ease;
      }

      @media (max-width: 992px) {
          .faq-title {
              font-size: 3.25rem;
          }

          .faq-description {
              font-size: 1rem;
          }

          .accordion-button {
              font-size: 1.05rem;
              padding: 22px 25px;
          }

          .accordion-body {
              padding: 0 25px 22px 25px;
              font-size: 0.95rem;
          }
      }

      @media (max-width: 768px) {
          .faq-section {
              margin-top: 30px;

          }

          .faq-header {
              margin-bottom: 40px;
          }

          .faq-title {
              font-size: 2.75rem;
          }

          .faq-description {
              font-size: 0.95rem;
          }

          .accordion-button {
              font-size: 1rem;
              padding: 20px 20px;
          }

          .accordion-body {
              padding: 0 20px 20px 20px;
              font-size: 0.9rem;
          }

          .accordion-item {
              margin-bottom: 12px;
          }
      }

      @media (max-width: 576px) {


          .faq-title {
              font-size: 2.25rem;
          }

          .faq-subtitle {
              font-size: 0.9rem;
          }

          .faq-description {
              font-size: 0.9rem;
          }

          .accordion-button {
              font-size: 0.95rem;
              padding: 18px 18px;
          }

          .accordion-body {
              padding: 0 18px 18px 18px;
              font-size: 0.85rem;
          }
      }

      /* faq */

      /* blog */
      .news-section {
          margin-bottom: 70px;
          ;
      }

      .section-header {
          text-align: center;
          margin-bottom: 60px;
      }

      .section-title {
          font-size: 3.5rem;
          font-weight: 500;
          color: #1F2937;
          margin-bottom: 25px;
          line-height: 1.2;
      }

      .section-description {
          font-size: 1.1rem;
          color: #10B981;
          line-height: 1.8;

          margin: 0 auto;
      }

      .section-description .highlight {
          color: #10B981;
          font-weight: 500;
      }

      .highlight {
          font-weight: 700 !important;
      }

      .blog-card {
          background: #ffffff;

          overflow: hidden;
          box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
          transition: all 0.3s ease;
          height: 100%;
          display: flex;
          flex-direction: column;
      }

      .blog-card:hover {
          transform: translateY(-8px);
          box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
      }

      .blog-image {
          width: 100%;
          padding: 15px;
          height: 260px;
          object-fit: cover;
      }

      .blog-content {
          padding: 30px;
          flex-grow: 1;
          display: flex;
          flex-direction: column;
      }

      .blog-category {
          display: inline-block;
          font-size: 0.85rem;
          font-weight: 600;
          color: #0b3d2ef2;
          text-transform: uppercase;
          margin-bottom: 15px;
          letter-spacing: 0.5px;
      }

      .blog-title-wrapper {
          display: flex;
          align-items: flex-start;
          justify-content: space-between;
          gap: 15px;
          margin-bottom: 15px;
      }

      .blog-title {
          font-size: 1.5rem;
          font-weight: 700;
          color: #1F2937;
          margin: 0;
          line-height: 1.4;
          flex: 1;
      }

      .blog-arrow {
          width: 32px;
          height: 32px;

          border-radius: 8px;
          display: flex;
          align-items: center;
          justify-content: center;
          color: #1F2937;
          font-size: 1rem;
          transition: all 0.3s ease;
          flex-shrink: 0;

          transform: rotate(-45deg);
      }

      .blog-card:hover .blog-arrow {
          background: #0b3d2ef2;
          color: #ffffff;
          transform: translate(3px, -3px);
      }

      .blog-description {
          color: #6B7280;
          font-size: 0.95rem;
          line-height: 1.7;
          margin-bottom: 25px;
          flex-grow: 1;
      }

      .blog-footer {
          display: flex;
          align-items: center;
          gap: 12px;
          padding-top: 20px;
          border-top: 1px solid #E5E7EB;
      }

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

      .author-info {
          display: flex;
          flex-direction: column;
          line-height: 1.3;
      }

      .author-name {
          font-size: 0.95rem;
          font-weight: 600;
          color: #1F2937;
      }

      .blog-date {
          font-size: 0.85rem;
          color: #9CA3AF;
      }

      .trade-button-wrapper {
          text-align: center;
          margin-top: 60px;
      }

      .btn-trade {
          background: transparent;
          color: #1F2937;
          border: 2px solid #1F2937;
          padding: 14px 40px;
          border-radius: 8px;
          font-size: 1rem;
          font-weight: 600;
          cursor: pointer;
          transition: all 0.3s ease;
          text-decoration: none;
          display: inline-block;
      }

      .btn-trade:hover {
          background: #1F2937;
          color: #ffffff;
          transform: translateY(-2px);
          box-shadow: 0 8px 20px rgba(31, 41, 55, 0.2);
      }

      @media (max-width: 992px) {
          .section-title {
              font-size: 2.75rem;
          }

          .section-description {
              font-size: 1rem;
          }

          .blog-image {
              height: 220px;
          }
      }

      @media (max-width: 768px) {


          .section-header {
              margin-bottom: 40px;
          }

          .section-title {
              font-size: 2.25rem;
          }

          .section-description {
              font-size: 0.95rem;
              padding: 0 15px;
          }

          .blog-content {
              padding: 25px;
          }

          .blog-title {
              font-size: 1.35rem;
          }

          .blog-image {
              height: 200px;
          }

          .trade-button-wrapper {
              margin-top: 40px;
          }
      }

      @media (max-width: 576px) {


          .section-title {
              font-size: 1.85rem;
          }

          .section-description {
              font-size: 0.9rem;
          }

          .blog-content {
              padding: 20px;
          }

          .blog-title {
              font-size: 1.25rem;
          }

          .blog-description {
              font-size: 0.9rem;
          }

          .btn-trade {
              padding: 12px 30px;
              font-size: 0.95rem;
          }
      }

      /* blog */

      /* footer */


      .footer-section {
          background: linear-gradient(135deg, #0F4C3A 0%, #0E442A 50%, #0D3D2E 100%);
          color: #ffffff;
          padding: 60px 0 30px;
      }

      .footer-main {
          padding-bottom: 40px;
          border-bottom: 1px solid rgba(255, 255, 255, 0.15);
      }

      .footer-brand {
          display: flex;
          align-items: center;
          gap: 12px;
          margin-bottom: 20px;
      }

      .brand-logo {
          width: 45px;
          height: 45px;
          background: #ffffff;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          font-weight: 700;
          color: #0F4C3A;
          font-size: 1.1rem;
      }

      .brand-name {
          font-size: 1.75rem;
          font-weight: 700;
          color: #ffffff;
          margin: 0;
      }

      .footer-description {
          color: rgba(255, 255, 255, 0.8);
          font-size: 0.95rem;
          line-height: 1.7;
          margin-bottom: 25px;
          max-width: 400px;
      }

      .social-links {
          display: flex;
          gap: 15px;
      }

      .social-icon {
          width: 40px;
          height: 40px;
          background: rgba(255, 255, 255, 0.1);
          border-radius: 25px;
          display: flex;
          align-items: center;
          justify-content: center;
          color: #ffffff;
          text-decoration: none;
          transition: all 0.3s ease;
          font-size: 1.1rem;
      }

      .social-icon:hover {
          background: rgba(255, 255, 255, 0.2);
          transform: translateY(-3px);
          color: #ffffff;
      }

      .footer-column-title {
          font-size: 1.1rem;
          font-weight: 700;
          color: #ffffff;
          margin-bottom: 20px;
      }

      .footer-links {
          list-style: none;
          padding: 0;
          margin: 0;
      }

      .footer-links li {
          margin-bottom: 12px;
      }

      .footer-links a {
          color: rgba(255, 255, 255, 0.8);
          text-decoration: none;
          font-size: 0.95rem;
          transition: all 0.3s ease;
          display: inline-block;
      }

      .footer-links a:hover {
          color: #ffffff;
          transform: translateX(5px);
      }

      .download-buttons {
          display: flex;
          flex-direction: column;
          gap: 12px;
      }

      .app-download-btn {
          background: rgba(255, 255, 255, 0.1);
          border: 1px solid rgba(255, 255, 255, 0.2);
          border-radius: 8px;
          padding: 12px 20px;
          display: flex;
          align-items: center;
          gap: 12px;
          text-decoration: none;
          transition: all 0.3s ease;
          max-width: 200px;
      }

      .app-download-btn:hover {
          background: rgba(255, 255, 255, 0.15);
          border-color: rgba(255, 255, 255, 0.3);
          transform: translateY(-2px);
          box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
      }

      .app-icon {
          font-size: 1.75rem;
          color: #ffffff;
      }

      .app-icon.google-play {
          color: #34A853;
      }

      .app-icon.apple {
          color: #ffffff;
      }

      .app-text {
          display: flex;
          flex-direction: column;
          line-height: 1.3;
      }

      .app-text-small {
          font-size: 0.75rem;
          color: rgba(255, 255, 255, 0.7);
          text-transform: uppercase;
      }

      .app-text-large {
          font-size: 1rem;
          font-weight: 600;
          color: #ffffff;
      }

      .footer-bottom {
          padding-top: 25px;
          text-align: center;
      }

      .copyright-text {
          color: rgba(255, 255, 255, 0.6);
          font-size: 0.9rem;
          margin: 0;
      }

      @media (max-width: 992px) {
          .footer-section {
              padding: 50px 0 25px;
          }

          .footer-main {
              padding-bottom: 30px;
          }

          .footer-column-title {
              margin-top: 30px;
          }

          .footer-description {
              max-width: 100%;
          }
      }

      @media (max-width: 768px) {
          .footer-section {
              padding: 40px 0 20px;
          }

          .brand-name {
              font-size: 1.5rem;
          }

          .footer-description {
              font-size: 0.9rem;
          }

          .footer-column-title {
              font-size: 1rem;
              margin-top: 25px;
          }

          .footer-links a {
              font-size: 0.9rem;
          }

          .social-links {
              margin-bottom: 20px;
          }
      }

      @media (max-width: 576px) {
          .footer-section {
              padding: 30px 0 20px;
          }

          .brand-logo {
              width: 40px;
              height: 40px;
              font-size: 1rem;
          }

          .brand-name {
              font-size: 1.35rem;
          }

          .footer-description {
              font-size: 0.85rem;
          }

          .app-download-btn {
              max-width: 100%;
          }

          .copyright-text {
              font-size: 0.85rem;
          }
      }

      /* footer */

      /* coin new */
      .usdir-section {
          margin-bottom: 90px;
      }

      .content-wrapper {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 40px;
          margin-bottom: 40px;
      }

      /* Left Side - About Us */
      .about-section {
          background: #E8F4F0;
          border-radius: 20px;
          padding: 40px;
      }

      .about-badge {
          display: inline-block;
          background: rgba(255, 255, 255, 0.7);
          color: #1F2937;
          font-size: 0.75rem;
          font-weight: 700;
          text-transform: uppercase;
          letter-spacing: 1px;
          padding: 8px 20px;
          border-radius: 20px;
          margin-bottom: 25px;
      }

      /* .about-title {
         
      } */

      .about-title-1 {
 font-size: 1.5rem;
          font-weight: 500;
          color: #1F2937;
          line-height: 1.5;
          margin-bottom: 0;
      }

      /* Right Side - Unique Project */
      .project-section {
          background: #FFFFFF;
          border-radius: 20px;
          padding: 40px;
          border: 1px solid #E5E7EB;
      }

      .project-subtitle {
          font-size: 0.9rem;
          color: #6B7280;
          margin-bottom: 15px;
      }

      .project-description {
          font-size: 0.95rem;
          color: #4B5563;
          line-height: 1.7;
          margin-bottom: 20px;
      }

      .learn-more-btn {
          background: #1F2937;
          color: #ffffff;
          border: none;
          padding: 10px 25px;
          border-radius: 25px;
          font-size: 0.9rem;
          font-weight: 600;
          cursor: pointer;
          transition: all 0.3s ease;
          display: inline-flex;
          align-items: center;
          gap: 10px;
          text-decoration: none;
      }

      .learn-more-btn:hover {
          background: #374151;
          transform: translateX(5px);
          color: #ffffff;
      }

      .learn-more-btn i {
          font-size: 0.75rem;
      }

      /* Cards Grid */
      .cards-grid {
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          gap: 20px;
      }

      .feature-card {
          background-size: cover;
          background-position: center;
          border-radius: 20px;
          padding: 30px 25px;
          min-height: 280px;
          position: relative;
          overflow: hidden;
          transition: all 0.3s ease;
          display: flex;
          flex-direction: column;
          justify-content: flex-end;
      }

      .feature-card::before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background: linear-gradient(180deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.7) 100%);
          z-index: 1;
      }

      .feature-card:hover {
          transform: translateY(-5px);
          box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
      }

      .card-content {
          position: relative;
          z-index: 2;
      }

      .card-title {
          font-size: 1.5rem;
          font-weight: 700;
          color: #ffffff;
          margin-bottom: 10px;
          text-transform: uppercase;
          letter-spacing: 0.5px;
      }

      .card-description {
          font-size: 0.85rem;
          color: rgba(255, 255, 255, 0.9);
          line-height: 1.6;
          margin-bottom: 0;
      }

      /* Bottom Button */
      .bottom-section {
          text-align: center;
          margin-top: 40px;
      }

      .request-btn {
          background: transparent;
          color: #1F2937;
          border: 2px solid #1F2937;
          padding: 12px 35px;
          border-radius: 25px;
          font-size: 0.95rem;
          font-weight: 600;
          cursor: pointer;
          transition: all 0.3s ease;
          display: inline-flex;
          align-items: center;
          gap: 10px;
          text-decoration: none;
      }

      .request-btn:hover {
          background: #1F2937;
          color: #ffffff;
          transform: translateX(5px);
      }

      .request-btn i {
          font-size: 0.75rem;
      }

      /* Responsive Design */
      @media (max-width: 992px) {
          .content-wrapper {
              grid-template-columns: 1fr;
              gap: 30px;
          }

          .cards-grid {
              grid-template-columns: repeat(2, 1fr);
              gap: 15px;
          }

          .about-section,
          .project-section {
              padding: 35px;
          }

          .feature-card {
              min-height: 300px;
          }
      }

      @media (max-width: 768px) {

          .about-section,
          .project-section {
              padding: 30px 25px;
          }

          .about-title {
              font-size: 1.3rem;
          }

          .cards-grid {
              grid-template-columns: 1fr;
              gap: 15px;
          }

          .feature-card {
              min-height: 280px;
              padding: 25px 20px;
          }

          .card-title {
              font-size: 1.3rem;
          }
      }

      @media (max-width: 576px) {


          .about-section,
          .project-section {
              padding: 25px 20px;
          }

          .about-badge {
              font-size: 0.7rem;
              padding: 6px 16px;
          }

          .about-title {
              font-size: 1.15rem;
          }

          .project-description {
              font-size: 0.9rem;
          }

          .feature-card {
              min-height: 270px;
          }

          .card-title {
              font-size: 1.2rem;
          }

          .card-description {
              font-size: 0.8rem;
          }

          .learn-more-btn,
          .request-btn {
              font-size: 0.85rem;
              padding: 10px 20px;
          }
      }

      /* coin new */