/* ============================================
           DESKTOP STYLES - KEEP AS IS
           ============================================ */
 #sec .flow-container {
     max-width: 1000px;
     margin: 0 auto;
     position: relative;
 }

 /* Entity Boxes */
 #sec .entity-box {
     background: #1e293b;
     border: 1px solid #334155;
     border-radius: 8px;
     padding: 15px 25px;
     color: #e2e8f0;
     text-align: center;
     min-height: 80px;
     position: relative;
     z-index: 10;
 }

 #sec .entity-box h3 {
     font-size: 14px;
     font-weight: 600;
     margin: 0;
     line-height: 1.5;
 }

 #sec .card-subtitle-text {
     font-size: 11px;
     opacity: 0.7;
     text-transform: uppercase;
     letter-spacing: 0.5px;
     display: block;
     margin-bottom: 5px;
 }

 /* TradeInAI Central Box */
 #sec .tradeinai-box {
     background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%);
     border: 2px solid #60a5fa;
     border-radius: 12px;
     padding: 25px 20px 20px 20px;
     color: white;
     text-align: center;
     box-shadow: 0 0 30px rgba(59, 130, 246, 0.3);
     position: relative;
     z-index: 10;
 }

 #sec .tradeinai-box h2 {
     font-size: 1rem;
     font-weight: 700;
     margin: 0 0 5px 0;
 }

 #sec .ai-middle-module {
     /* background: rgba(255, 255, 255, 0.2);
     border-radius: 6px;
     padding: 8px; */
 }

 #sec .ai-label {
     font-size: 12px;
     font-weight: 600;
 }

 #sec .f-14 {
     font-size: 14px;
 }

 #sec .f-18 {
     font-size: 18px;
 }

 #sec .text-branding {
     color: #3b82f6;
 }

 /* SVG Connections */
 #sec .connection-svg {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     pointer-events: none;
     z-index: 1;
 }

 #sec .arrow-path {
     fill: none;
     stroke: #3b82f6;
     stroke-width: 2;
 }

 #sec .arrow-marker {
     fill: #3b82f6;
 }

 #sec .flow-dot {
     fill: #60a5fa;
 }

 #sec .flow-label {
     fill: #e8eef5;
     font-size: 14px;
     font-weight: 500;
 }

 #sec .entity-box.delay-1 {
     border: 2px solid var(--purple);
     background: rgba(155, 89, 182, 0.15);
 }

 #sec .entity-box.delay-2 {
     border: 2px solid var(--orange);
     background: rgba(230, 126, 34, 0.15);
 }

 #sec .entity-box.delay-3 {
     border: 2px solid var(--green);
     background: rgba(0, 168, 107, 0.15);
 }

 /* Path dot colors */
 #sec .path1-dot {
     fill: #aa7fbd !important;
 }

 #sec .path2-dot {
     fill: #00ff88 !important;
 }

 #sec .path3-dot {
     fill: #ed7979 !important;
 }

 #sec .path4-dot {
     fill: #cfed8e !important;
 }

 #sec .path5-dot {
     fill: #ff9f43 !important;
 }

 #sec .path6-dot {
     fill: #54a0ff !important;
 }

 /* Layout Grid */
 #sec .flow-row {
     /* margin-bottom: 30px; */
 }

 /* Hide mobile connectors on desktop */
 #sec .flow-connector {
     display: none;
 }

 /* Mobile reordering container - hidden on desktop */
 #sec .mobile-flow-order {
     display: none;
 }

 /* ============================================
           TABLET & MOBILE RESPONSIVENESS
           ============================================ */

 /* TABLET & MOBILE (1024px and below) */
 @media (max-width: 1024px) {

     /* Hide desktop layout */
     #sec .desktop-flow {
         display: none !important;
     }

     /* Show mobile layout */
     #sec .mobile-flow-order {
         display: block !important;
     }

     /* Hide SVG on tablets/mobile */
     #sec .connection-svg {
         display: none !important;
     }

     /* Show flow connectors */
     #sec .flow-connector {
         display: block;
         text-align: center;
         padding: 15px 0;
     }

     #sec .flow-connector .arrow {
         font-size: 28px;
         color: #3b82f6;
         display: block;
         animation: sec-bounce 2s infinite;
         line-height: 1;
     }

     #sec .flow-connector .label {
         font-size: 12px;
         color: #3b82f6;
         margin-top: 5px;
         text-transform: uppercase;
         letter-spacing: 0.5px;
         font-weight: 600;
     }

     @keyframes sec-bounce {

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

         50% {
             transform: translateY(8px);
         }
     }

     /* Adjust box styles */
     #sec .entity-box {
         padding: 18px 20px;
         min-height: 85px;
     }

     #sec .entity-box h3 {
         font-size: 1rem;
     }

     #sec .tradeinai-box h2 {
         font-size: 1.3rem;
     }

     #sec .tradeinai-box {
         padding: 22px 20px;
     }
 }

 /* TABLET SPECIFIC (769px - 1024px) */
 @media (min-width: 769px) and (max-width: 1024px) {
     #sec .entity-box {
         padding: 20px 22px;
         min-height: 90px;
     }

     #sec .entity-box h3 {
         font-size: 1.1rem;
     }

     #sec .tradeinai-box {
         padding: 26px 24px;
     }

     #sec .tradeinai-box h2 {
         font-size: 1.4rem;
     }

     #sec .flow-connector .arrow {
         font-size: 30px;
     }

     #sec .flow-connector .label {
         font-size: 13px;
     }
 }

 /* MOBILE (600px and below) */
 @media (max-width: 600px) {
     #sec .flow-container {
         padding: 15px 10px;
     }

     #sec .entity-box {
         padding: 20px 16px;
         min-height: 90px;
     }

     #sec .entity-box h3 {
         font-size: 16px;
     }

     #sec .tradeinai-box {
         padding: 24px 18px;
     }

     #sec .tradeinai-box h2 {
         font-size: 1.2rem;
     }

     #sec .f-14 {
         font-size: 14px;
     }
 }

 /* SMALL MOBILE (360px and below) */
 @media (max-width: 360px) {
     #sec .flow-container {
         padding: 10px 8px;
     }

     #sec .entity-box {
         padding: 18px 14px;
         min-height: 85px;
     }

     #sec .entity-box h3 {
         font-size: 15px;
     }

     #sec .tradeinai-box {
         padding: 20px 16px;
     }

     #sec .tradeinai-box h2 {
         font-size: 1.1rem;
     }

     #sec .flow-connector .arrow {
         font-size: 24px;
     }

     #sec .flow-connector .label {
         font-size: 11px;
     }

     #sec .f-14 {
         font-size: 13px;
     }
 }