/*==================================================
    HIT AUCTION - HOW IT WORKS - FINAL - 0 TOP SPACE
==================================================*/
html, body { background: #fff!important; overflow-x: hidden!important; }

/* REMOVE ALL SPACE BEFORE TITLE */
.upcoming-section{ padding-bottom:0!important; margin-bottom:0!important; }
.section-divider{
    display:flex; align-items:center; justify-content:center; gap:14px;
    padding:0!important; margin:0!important; height:24px!important;
    background:#fff!important;
    overflow:hidden!important;
}
.section-divider .divider-line{
    height:2px; flex:1; max-width:380px;
    background: linear-gradient(90deg, transparent, #3b82f6 20%, #8b5cf6 50%, #06b6d4 80%, transparent);
    opacity:0.35; border-radius:10px;
}
.section-divider .divider-icon{
    width:36px; height:36px;
    background: linear-gradient(135deg,#3b82f6,#8b5cf6);
    border-radius:50%; display:flex; align-items:center; justify-content:center;
    font-size:16px; color:#fff; box-shadow:0 6px 16px rgba(59,130,246,0.3);
}

.how-works-section {
    position: relative;
    padding: 0px 30px 0px 30px!important;
    margin-top:0!important;
    margin-bottom:0!important;
    overflow: hidden!important;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%)!important;
    border: none!important;
}
.how-works-section::before, .how-works-section::after { display: none!important; }
.how-works-section .container {
    max-width: 1420px;
    margin: 0 auto!important;
    overflow: visible!important;
    padding-top: 0px!important;
    padding-bottom:0!important;
}
.how-works-section .section-title {
    text-align: center;
    margin-top: -50px!important;
    padding-top: 0 !important;
    margin-bottom: 40px!important;
    overflow: visible!important;
}
.how-works-section .section-title h2 {
    font-size: clamp(30px, 4vw, 42px);
    font-weight: 900;
    color: #172033;
    margin: 0!important;
    padding-top:0!important;
}
.how-works-section .section-title h2 i { color: #f59e0b; margin-right: 6px; }
.how-works-section .section-title p { color: #5f6b7d; font-size: 17px; margin-top: 8px!important; font-weight: 500; }
.how-works-section .timeline-wrapper {
    position: relative;
    min-height: 460px!important;
    display: flex;
    justify-content: space-between;
    align-items: flex-start!important;
    padding: 30px 10px 0px 10px!important;
    overflow: visible!important;
    z-index: 2;
    margin-bottom:0!important;
}
.how-works-section .timeline-wave {
    position: absolute;
    top: 0!important;
    left: 0;
    width: 100%;
    height: 400px!important;
    z-index: 1;
    pointer-events: none;
    overflow: visible!important;
}
@keyframes waveFlow { to { stroke-dashoffset: -68; } }
.how-works-section .timeline-step {
    position: relative;
    z-index: 5;
    width: 13.5%;
    min-height: 380px!important;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start!important;
    text-align: center;
    flex-shrink: 0;
    transition: transform 0.35s;
    overflow: visible!important;
    padding-top: 10px;
}
.how-works-section .timeline-step.top { transform: translateY(-20px); }
.how-works-section .timeline-step.bottom { transform: translateY(80px); }
.how-works-section .step-number {
    position: absolute!important;
    top: 0px!important;
    left: 50%!important;
    transform: translateX(-50%)!important;
    width: 38px!important;
    height: 38px!important;
    border-radius: 50%!important;
    background: #ffffff!important;
    border: 3px solid!important;
    display: flex!important;
    align-items: center!important;
    justify-content: center!important;
    font-size: 15px!important;
    font-weight: 900!important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.15)!important;
    z-index: 50!important;
}
.how-works-section .timeline-step:nth-child(2) .step-number { border-color: #3b82f6!important; color: #3b82f6!important; }
.how-works-section .timeline-step:nth-child(3) .step-number { border-color: #8b5cf6!important; color: #8b5cf6!important; }
.how-works-section .timeline-step:nth-child(4) .step-number { border-color: #ec4899!important; color: #ec4899!important; }
.how-works-section .timeline-step:nth-child(5) .step-number { border-color: #f97316!important; color: #f97316!important; }
.how-works-section .timeline-step:nth-child(6) .step-number { border-color: #eab308!important; color: #eab308!important; }
.how-works-section .timeline-step:nth-child(7) .step-number { border-color: #16a34a!important; color: #16a34a!important; }
.how-works-section .timeline-step:nth-child(8) .step-number { border-color: #06b6d4!important; color: #06b6d4!important; }
.how-works-section .step-circle {
    width: 98px!important;
    height: 98px!important;
    border-radius: 50%!important;
    display: flex!important;
    align-items: center!important;
    justify-content: center!important;
    border: 5px solid #fff!important;
    box-shadow: 0 14px 32px rgba(0,0,0,0.18)!important;
    z-index: 6!important;
    flex-shrink: 0!important;
    margin-top: 45px!important;
}
.how-works-section .step-circle svg { width: 38px!important; height: 38px!important; fill: #fff!important; display: block!important; }
.how-works-section .timeline-step:nth-child(2) .step-circle { background: linear-gradient(135deg,#3b82f6,#1e40af)!important; }
.how-works-section .timeline-step:nth-child(3) .step-circle { background: linear-gradient(135deg,#8b5cf6,#5b21b6)!important; }
.how-works-section .timeline-step:nth-child(4) .step-circle { background: linear-gradient(135deg,#ec4899,#9d174d)!important; }
.how-works-section .timeline-step:nth-child(5) .step-circle { background: linear-gradient(135deg,#f97316,#9a3412)!important; }
.how-works-section .timeline-step:nth-child(6) .step-circle { background: linear-gradient(135deg,#eab308,#854d0e)!important; }
.how-works-section .timeline-step:nth-child(7) .step-circle { background: linear-gradient(135deg,#22c55e,#14532d)!important; }
.how-works-section .timeline-step:nth-child(8) .step-circle { background: linear-gradient(135deg,#06b6d4,#164e63)!important; }
.how-works-section .step-content {
    width: 205px;
    margin-top: 24px;
    padding: 18px 14px;
    border-radius: 16px;
    background: #fff;
    border: 1px solid #eef2f7;
    box-shadow: 0 12px 32px rgba(15,23,42,0.09);
}
.how-works-section .step-content h4 { margin: 0 0 8px; color: #0f172a; font-size: 16.5px; font-weight: 800; }
.how-works-section .step-content p { margin: 0; color: #475569; font-size: 13.5px; line-height: 1.6; }
button:empty, .modal-dialog.modal-fullscreen{display:none!important;}

/* TABLET */
@media (max-width: 991px) {
    .how-works-section { padding: 5px 15px 10px 15px!important; }
    .how-works-section .timeline-wrapper {
        overflow-x: auto!important; overflow-y: visible!important; justify-content: flex-start!important; gap: 24px!important; padding: 30px 15px 10px 15px!important; scroll-snap-type: x mandatory!important; -webkit-overflow-scrolling: touch!important;
        min-height:auto!important;
    }
    .how-works-section .timeline-wrapper::-webkit-scrollbar { height: 8px; }
    .how-works-section .timeline-wrapper::-webkit-scrollbar-thumb { background: #3b82f6; border-radius: 10px; }
    .how-works-section .timeline-step { width: 180px!important; min-width: 180px!important; scroll-snap-align: center!important; }
    .how-works-section .timeline-wave { display: none!important; }
}

/* MOBILE */
@media (max-width: 767px) {
    .section-divider{ height:24px!important; }
    .how-works-section { padding: 0px 15px 10px 15px!important; }
    .how-works-section .section-title h2 { font-size: 26px!important; }
    .how-works-section .section-title p { font-size: 14px!important; }
    .how-works-section .timeline-wrapper { display: flex!important; flex-direction: column!important; min-height: auto!important; gap: 0!important; padding: 10px 0 0 0!important; overflow: visible!important; }
    .how-works-section .timeline-wave { display: none!important; }
    .how-works-section .timeline-step,
    .how-works-section .timeline-step.top,
    .how-works-section .timeline-step.bottom {
        width: 100%!important; min-height: auto!important; transform: none!important; flex-direction: row!important; align-items: flex-start!important; gap: 16px!important; padding: 16px!important; margin-bottom: 16px!important; background: #fff!important; border-radius: 18px!important; border: 1px solid #e8eef4!important; box-shadow: 0 8px 24px rgba(0,0,0,0.06)!important; text-align: left!important;
    }
    .how-works-section .step-number { position: relative!important; top: auto!important; left: auto!important; transform: none!important; width: 32px!important; height: 32px!important; min-width: 32px!important; font-size: 13px!important; order: 2!important; }
    .how-works-section .step-circle { width: 60px!important; height: 60px!important; min-width: 60px!important; margin-top: 0!important; order: 1!important; }
    .how-works-section .step-circle svg { width: 26px!important; height: 26px!important; }
    .how-works-section .step-content { width: auto!important; flex: 1!important; margin-top: 0!important; padding: 0!important; background: transparent!important; border: none!important; box-shadow: none!important; order: 3!important; }
}

/* FIX GAP TO NEXT POSTER - 0 SPACE */
.free-banner{ margin:0!important; padding:0 15px 20px 15px!important; }
.free-banner-box{ margin-top:0!important; }





/* LAPTOP 1366px FIX - ONLY FOR THIS SCREEN */
@media (max-width: 1400px) and (min-width: 1200px){
  .how-works-section{ padding:0 10px 0 10px!important; }
  .how-works-section .timeline-wrapper{
    min-height: 420px!important;
    padding: 20px 5px 0 5px!important;
    gap: 8px!important;
  }
  .how-works-section .timeline-step{ width: 13.8%!important; }
  .how-works-section .step-circle{
    width: 82px!important; height: 82px!important;
    margin-top: 32px!important;
  }
  .how-works-section .step-circle svg{ width: 28px!important; height: 28px!important; }
  .how-works-section .step-number{
    width: 30px!important; height: 30px!important; font-size: 12px!important;
  }
  .how-works-section .step-content{
    width: 168px!important;
    padding: 12px 8px!important;
  }
  .how-works-section .step-content h4{ font-size: 13px!important; }
  .how-works-section .step-content p{ font-size: 11px!important; }
  .how-works-section .timeline-step.top{ transform: translateY(-40px)!important; }
  .how-works-section .timeline-step.bottom{ transform: translateY(60px)!important; }
}
@media (max-width: 1366px) and (min-width: 1024px){
  .how-works-section .container{ max-width: 1280px!important; }
}