/* How It Works - Desktop + Mobile */

.hiw-section {
    position: relative;
}

.hiw-step {
    position: relative;
    text-align: center;
}

/* How It Works - Bubble */

.hiw-step .elementor-icon-box-icon {
    position: relative;

    width: 120px;
    height: 120px;

    margin: 0 auto 24px;

    border-radius: 50%;
    background: #fdecef;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* How It Works - Elementor icon wrapper */

.hiw-step .elementor-icon-box-icon .elementor-icon {
    width: 100%;
    height: 100%;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    line-height: 1;
}

/* How It Works - Font icons */

.hiw-step .elementor-icon {
    color: #17253b;
    font-size: 46px;
}

/* How It Works - SVG icons */

.hiw-step .elementor-icon svg {
    width: 46px;
    height: 46px;

    display: block;
}

/* How It Works - Step number */

.hiw-step::before {
    content: attr(data-step);

    position: absolute;

    top: 8px;
    left: calc(50% - 62px);

    width: 36px;
    height: 36px;

    border-radius: 50%;

    background: #e8506b;
    color: #fff;

    font-size: 16px;
    font-weight: 700;

    line-height: 36px;
    text-align: center;

    z-index: 5;
}

/* How It Works - Chevron */

.hiw-step:not(:last-child)::after {
    content: "›";

    position: absolute;

    top: 44px;
    right: -18px;

    color: #c8cdd5;

    font-size: 42px;
    font-weight: 300;
}

/* How It Works - Heading */

.hiw-step .elementor-icon-box-title {
    margin-bottom: 8px;
}

.hiw-step .elementor-icon-box-title,
.hiw-step .elementor-icon-box-title a {
    color: #17253b;
    font-weight: 700;
}

/* How It Works - Mobile */

@media (max-width: 767px) {

    .hiw-step {
        text-align: left;
    }

    .hiw-step .elementor-icon-box-icon {
        width: 96px;
        height: 96px;

        margin: 0;
    }

    .hiw-step .elementor-icon svg {
        width: 38px;
        height: 38px;
    }

    .hiw-step::before {
        left: 72px !important;
        top: 10px !important;

        width: 30px;
        height: 30px;

        line-height: 30px;
        font-size: 14px;

        transform: none !important;
    }

    .hiw-step::after {
        display: none !important;
    }
}
/* Homepage - Popular devices containter */
.popular-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 16px;
}

.popular-header h2 {
    margin: 0;
    line-height: 1.1;
}

.popular-header .cta {
    white-space: nowrap;
    flex-shrink: 0;
}