.engage-container {
    min-height: 100vh;
    padding-left: 10px;
    padding-right: 10px;
    position: relative;
}
.engage-title-sec {
    gap: 15px;
}
.shadow-btn {
    position: relative;
    
    
    font-size: 18px;
    color: black !important;
    
    cursor: pointer;
    margin: 0 4px 4px 0;
    line-height: 1;

    transition: transform 0.3s ease;
}
.shadow-btn>span {
    display: inline-flex;
    align-items: center;
    padding: 5px 16px;
    background-color: white;
    border: 2px solid black;
    border-radius: 10px;
    /* gap: 8px; */
}
/* shadow layer */
.shadow-btn::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 5px;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    border: 2px solid black;
    background: #000;
    z-index: -1;
}

.shadow-btn svg {
    width: 30px;
    height: 30px;
}

.shadow-btn:hover {
    transform: scale(1.05) ;
}
.engage-title-sec span {
    font-size: 22px;
}
.engage-detail-sec {
    gap: 50px
}
.engage-detail-card {
    border: 2px solid #000;
    padding: 25px 15px;
    border-radius: 15px;
    flex: 1;
    font-size: 18px;
    min-width: 250px;
}
.flow-card {
    box-shadow: -1px 1px 20px -7px rgba(0, 0, 0, 0.75);
    -webkit-box-shadow: -1px 1px 20px -7px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: -1px 1px 20px -7px rgba(0,0,0,0.75);
}
.flow-title {
    font-size: 20px;
}
.flow-card .shadow-btn {
    font-size: 16px;
}
.flow-btn {
    position: relative;
    display: inline-block;
    padding: 8px 30px;
    font-size: 16px;
    color: black !important;
    border: none;
    cursor: pointer;
    clip-path: polygon(
    0% 0%, 3% 2%, 0% 6%, 2% 12%, 0% 18%, 3% 24%, 0% 30%, 2% 36%, 0% 42%, 3% 48%,
    0% 54%, 2% 60%, 0% 66%, 3% 72%, 0% 78%, 2% 84%, 0% 90%, 3% 96%, 0% 100%,
    100% 100%, 97% 96%, 100% 92%, 98% 86%, 100% 80%, 97% 74%, 100% 68%, 98% 62%,
    100% 56%, 97% 50%, 100% 44%, 98% 38%, 100% 32%, 97% 26%, 100% 20%, 98% 14%,
    100% 8%, 97% 2%, 100% 0%
    );
    box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.75);
    -webkit-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.75);
    width: 170px;
}
.arrow svg {
    fill: #363363;
    height: 32px;
    width: 32px;
    padding: 3px;
    border: 2px solid #363363;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: bold;
    background: white;
    box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.2);
    margin: -4px auto 0 auto;
}
.arrow {

}
.flow-btn.beinge {
    background: #f3b79b;
}
.flow-btn.grey {
    background: #addeda;
}
.flow-btn.yellow {
    background: #fac046;
}
.flow-btn.green {
    background: #4fda81;
}
.proceed-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;

    padding: 14px 28px;
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    font-size: 16px;

    background: linear-gradient(135deg, #1e3cff, #1e90ff);
    border-radius: 12px;

    box-shadow:
        0 8px 0 #0b3ea8,        /* 3D base */
        0 15px 25px rgba(30, 60, 255, 0.4);

    transition: 
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

/* Hover – lift effect */
.proceed-btn:hover {
    transform: translateY(-3px);
    box-shadow:
        0 11px 0 #0b3ea8,
        0 20px 35px rgba(30, 60, 255, 0.55);
}

/* Active – press effect */
.proceed-btn:active {
    transform: translateY(4px);
    box-shadow:
        0 4px 0 #0b3ea8,
        0 8px 15px rgba(30, 60, 255, 0.35);
}

/* Optional arrow animation */
.proceed-btn::after {
    content: "➜";
    transition: transform 0.25s ease;
}

.proceed-btn:hover::after {
    transform: translateX(4px);
}
/* layout */
.tw-wrapper {
    /* display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh; */
}

.tw-group {
    position: relative;
}

/* button */
.tw-btn {
    position: relative;
    display: inline-block;
    padding: 1px;
    font-weight: 600;
    line-height: 1.5;
    color: #ffffff !important;
    background-color: #27272a; /* zinc-800 */
    border-radius: 0.75rem; /* rounded-xl */
    cursor: pointer;
    text-decoration: none;

    box-shadow:
        0 25px 50px -12px rgb(24 24 27); /* shadow-2xl + zinc-900 */

    transition: transform 0.3s ease-in-out;
}

.tw-btn:hover {
    transform: scale(1.05);
}

.tw-btn:active {
    transform: scale(0.95);
}

/* gradient border */
.tw-border {
    position: absolute;
    inset: 0;
    border-radius: 0.75rem;
    padding: 2px;
    background: linear-gradient(
        to right,
        #2dd4bf, /* teal-400 */
        #3b82f6, /* blue-500 */
        #a855f7  /* purple-500 */
    );
    opacity: 0;
    transition: opacity 0.5s ease;
}

.tw-group:hover .tw-border {
    opacity: 1;
}

/* inner dark layer */
.tw-inner {
    position: relative;
    z-index: 10;
    display: block;
    padding: 0.75rem 1.5rem; /* py-3 px-6 */
    background-color: #09090b; /* zinc-950 */
    border-radius: 0.75rem;
}

/* content */
.tw-content {
    position: relative;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* text animation */
.tw-text {
    transition: transform 0.5s ease;
}

.tw-group:hover .tw-text {
    transform: translateX(0.25rem);
}

/* icon */
.tw-icon {
    width: 1.5rem;
    height: 1.5rem;
    transition: transform 0.5s ease;
}

.tw-group:hover .tw-icon {
    transform: translateX(0.25rem);
}


.flow-wrap{}
.flow{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(18px,3.4vw,40px);
    padding: 40px 0 ;
    border-radius: 16px;
    background: #fff;
    outline: 1px solid var(--ring);
  }

  .step{
    color:#fff;

    padding: 10px 20px;
    border-radius: 14px;
    box-shadow: 0 2px 0 rgba(0,0,0,.08), 0 10px 24px rgba(0,0,0,.06);
    white-space: nowrap;
    position: relative;
    z-index: 1;
  }
  .step--review{ background: var(--red); }
  .step--select{ background: var(--orange); }
  .step--start { background: var(--green); }

  /* SVG overlay for connectors */
  .wires{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:0; }
  .wires path{
    fill:none;
    stroke:black;
    stroke-width:3;
    stroke-linecap:round;
    stroke-linejoin:round;
  }


.mobile-sec {
    display: none;
}

@media screen and (max-width: 1030px) {
    .mobile-sec {
        display: block;
    }
    .desktop-sec {
        display: none;
    }
    .engage-detail-sec {
        flex-direction: column;
        margin-top: 20px !important;
    }
    .res-flow-sec {
        flex: 1 !important;
    }
    .engage-title-sec {
        gap:10px;
        flex-direction: column;
    }
    .shadow-btn {
        font-size: 14px;
    }
    .engage-title-sec span {
        font-size: 16px;
    }
    .engage-detail-card {
        font-size: 16px;
    }
}