/* ============================================================
   HOW IT WORKS — Custom card grid replacing Elementor's broken layout
   ============================================================ */

/* ── Section background ── */
.elementor-133 .elementor-element-d2452e7 {
    background-color: #FFFFFF !important;
}

/* ── Section heading ── */
.elementor-133 .elementor-element-be41dd6 .elementor-heading-title {
    color:          #000000 !important;
    letter-spacing: 3px !important;
}

/* ── Custom card grid ── */
.hiw-custom-grid {
    display:    flex;
    gap:        24px;
    max-width:  1100px;
    margin:     0 auto;
    padding:    32px 24px 48px;
    box-sizing: border-box;
}

/* ── Individual card ── */
.hiw-card {
    flex:             1;
    position:         relative;
    background:       #1d191a;
    border:           1px solid rgba(201, 14, 14, 0.45);
    border-radius:    16px;
    box-shadow:       0 2px 16px rgba(0, 0, 0, 0.35);
    padding:          48px 24px 32px;
    display:          flex;
    flex-direction:   column;
    align-items:      center;
    text-align:       center;
    transition:       transform 0.3s ease,
                      box-shadow 0.3s ease,
                      border-color 0.3s ease;
}

.hiw-card:hover {
    transform:    translateY(-6px);
    border-color: #C90E0E;
    box-shadow:   0 8px 28px rgba(0, 0, 0, 0.5),
                  0 0 20px rgba(201, 14, 14, 0.45);
}

/* ── Step badge ── */
.hiw-badge {
    position:    absolute;
    top:         -16px;
    left:        50%;
    transform:   translateX(-50%);
    background:  #C90E0E;
    color:       #fff;
    font-family: 'Roboto', sans-serif;
    font-size:   13px;
    font-weight: 900;
    letter-spacing: 1px;
    padding:     5px 22px;
    border-radius: 20px;
    white-space: nowrap;
}

/* ── Icon ── */
.hiw-icon {
    width:         56px;
    height:        auto;
    display:       block;
    margin-bottom: 16px;
}

/* ── Title ── */
.hiw-title {
    font-family: 'Poppins', sans-serif;
    font-size:   20px;
    font-weight: 700;
    color:       #FFFFFF;
    margin:      0 0 12px;
    line-height: 1.3;
}

/* ── Description ── */
.hiw-desc {
    font-family: 'Poppins', sans-serif;
    font-size:   15px;
    line-height: 1.75;
    color:       #B8B4B5;
    margin:      0;
}

/* ── Arrow between cards ── */
.hiw-arrow {
    display:     flex;
    align-items: center;
    flex-shrink: 0;
    color:       #C90E0E;
    font-size:   32px;
    line-height: 1;
    align-self:  center;
    padding:     0 4px;
}

/* ── Scroll-in animation (frontend only — isEditor skips hiw-animate class) ── */
.hiw-animate {
    opacity:    0;
    transform:  translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.hiw-animate.hiw-visible {
    opacity:   1;
    transform: translateY(0);
}

.hiw-animate:nth-child(2) { transition-delay: 0.12s; }
.hiw-animate:nth-child(3) { transition-delay: 0.24s; }

/* ── Mobile ── */
@media (max-width: 767px) {
    .hiw-custom-grid {
        flex-direction: column;
        padding:        24px 16px 40px;
    }
    .hiw-arrow {
        transform: rotate(90deg);
    }
}