.seamless-main-container {
     display: flex;
     width: 100%;
     height: 100dvh;
 }

 .content-block {
     width: 50%;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: flex-start;
     padding: 60px;
     background-color: #F4C700;
     position: relative;
 }

 /* NEW: Image overlay styles */
 .coin-overlay {
     position: absolute;
     width: 60px;
     height: 60px;
     background-size: cover;
     background-position: center;
     background-repeat: no-repeat;
     opacity: 1;
     /* Adjust opacity as needed (0.1 = 10%, 0.2 = 20%, etc.) */
     z-index: 1;
     pointer-events: none;
     /* Prevents blocking clicks on content */
 }

 .coin-right {
     background-image: url('/Images/SeamlessIntegrations/coin-right.png');
 }

 .coin-left {
     background-image: url('/Images/SeamlessIntegrations/coin-left.png');
 }

 .coin-1 {
     top: 80px;
     left: 20px;
     transform: rotate(90deg);
 }

 .coin-2 {
     bottom: 120px;
     left: -25px;
     transform: rotate(360deg);
 }

 .coin-3 {
     top: 150px;
     right: 50px;
 }

 .coin-4 {
     bottom: 120px;
     left: 60%;
 }

 .next_box_padding {
     padding: 3rem;
 }

 .how_work_h1 {
     font-family: 'Whyte', sans-serif;
     font-weight: 700;
     font-size: 64px;
     line-height: 110%;
     text-align: left;
     color: #080808;
 }

 .how_work_p {
     font-family: OpenSauceOne;
     font-weight: 500;
     font-size: 15px;
     line-height: 150%;
     color: #080808;
 }

 .hero-title {
     font-size: 4rem;
     font-weight: 700;
     color: #000;
     line-height: 1.1;
     margin-bottom: 30px;
     text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 }

 .hero-subtitle {
     font-size: 1.5rem;
     font-weight: 500;
     color: #333;
     line-height: 1.4;
     max-width: 80%;
 }

 .marquee-block {
     width: 50%;
     position: relative;
     height: 100vh;
     height: 100dvh;
     overflow: hidden;
     background-color: #F4C700;
     padding: 60px 0;
     /* Added top and bottom padding */
 }

 .vertical-marquee-container {
     position: relative;
     width: 100%;
     height: 100%;
     display: flex;
     align-items: center;
     justify-content: end;
     overflow: hidden;
 }

 .marquee-grid {
     width: 90%;
     height: 100%;
     padding: 20px;
 }

 .marquee-column {
     position: relative;
     height: 100%;
     overflow: hidden;
     mask: linear-gradient(180deg, transparent, white 10%, white 90%, transparent);
     -webkit-mask: linear-gradient(180deg, transparent, white 10%, white 90%, transparent);
     left: 10%;
     align-items: center;
 }

 .column-track {
     display: flex;
     flex-direction: column;
     gap: 10px;
     /* Reduced gap */
     padding: 20px 0;
     animation: verticalFlow 125s linear infinite;
 }

 .marquee-item {
     display: flex;
     align-items: center;
     gap: 8px;
     padding: 8px 10px;
     transition: all 0.4s ease;
     cursor: pointer;
     position: relative;
     overflow: hidden;
     min-height: 40px;
     width: 300px;

     /* background: rgba(255, 255, 255, 0.15);
            backdrop-filter: blur(10px) saturate(180%);
            -webkit-backdrop-filter: blur(10px) saturate(180%);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 8px; */
     /* Reduced height */
     /* box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08); */
     /* Glass shadow */

 }

 .marquee-item::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background: linear-gradient(45deg, transparent, rgba(244, 199, 0, 0.2), transparent);
     opacity: 0;
     transition: opacity 0.3s ease;
 }

 .marquee-item:hover::before {
     opacity: 1;
 }

 .marquee-item:hover {
     transform: translateX(8px) scale(1.03);
     background: rgba(255, 255, 255, 0.25);
     box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15), 0 2px 6px rgba(0, 0, 0, 0.1);
     border-color: rgba(255, 255, 255, 0.3);
     border-radius: 20px;
 }

 .item-icon {
     /* Smaller icon */
     animation: iconPulse 4s ease-in-out infinite;
     filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
     flex-shrink: 0;
 }

 .item-icon img {
     height: 50px;
     /* Smaller icon image */
     width: 50px;
 }

 .item-content {
     display: flex;
     flex-direction: column;
     font-family: 'OpenSauceOne', sans-serif;
     gap: 2px;
     flex: 1;
 }

 .item-title {
     font-size: 24px;
     /* Smaller font */
     font-weight: 600;
     color: #000;
     letter-spacing: 0.3px;
     line-height: 1.2;
 }

 @keyframes verticalFlow {
     0% {
         transform: translateY(0);
     }

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

 @keyframes iconPulse {

     0%,
     100% {
         transform: scale(1);
     }

     50% {
         transform: scale(1.1);
     }
 }

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

     .hero-subtitle {
         font-size: 1.3rem;
     }

     .content-block {
         padding: 40px;
     }

     .marquee-block {
         padding: 40px 0;
         /* Adjusted padding for tablet */
     }
 }

 @media (max-width: 768px) {
     .main-container {
         flex-direction: column;
     }

     .content-block {
         width: 100%;
         height: 60vh;
         height: 60dvh;
         padding: 30px;
         text-align: center;
     }

     .marquee-block {
         width: 100%;
         height: 40vh;
         height: 40dvh;
         padding: 20px 0;
         /* Adjusted padding for mobile */
     }

     .hero-title {
         font-size: 2.5rem;
     }

     .hero-subtitle {
         font-size: 1.1rem;
         max-width: 100%;
     }

     .marquee-grid {
         grid-template-columns: 1fr;
         gap: 10px;
     }
 }

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

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

     .content-block {
         padding: 20px;
     }

     .marquee-block {
         padding: 15px 0;
         /* Adjusted padding for small mobile */
     }

     .marquee-item {
         padding: 6px 8px;
         /* Even smaller padding for mobile */
         min-height: 35px;
     }
 }

 .search-bar input {
     padding: 12px 20px;
     border-radius: 30px;
     border: none;
     width: 100%;
     box-shadow: 4px 4px 0 #000;
     font-size: 1rem;

     margin-top: 20px;
 }

 .how-we-work {
     background-color: #F4C700;
     color: #080808;
     border: none;
     padding: 8px 14px;
     border-radius: 6px;
     margin-bottom: 30px;
     font-family: OpenSauceOne;
     font-weight: 500;
     font-size: 18px;
     line-height: 22px;
     text-align: center;
     border: 1px solid #080808;
 }