/* Modern How It Works Section */

.how-it-works {

    padding: 15px 0;

    background: white;

    position: relative;

    overflow: hidden;

}



.steps-container {

    position: relative;

    padding: 3rem 0;

}



.step-connector {

    position: absolute;

    top: 50%;

    left: 0;

    width: 100%;

    height: 2px;

    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));

    transform: translateY(-50%);

    z-index: 1;

}



.steps-grid {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 2rem;

    position: relative;

    z-index: 2;

}



.step-card {

    background: white;

    border-radius: 20px;

    padding: 2rem;

    text-align: center;

    box-shadow: 0 10px 30px 10px rgba(0, 0, 0, 0.05);

    transition: all 0.3s ease;

    position: relative;

}



.step-card:hover {

    transform: translateY(-10px);

    box-shadow: 0 15px 40px 15px rgba(0, 0, 0, 0.06);



}



.step-number {

    width: 40px;

    height: 40px;

    background: var(--primary-color);

    color: white;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    font-weight: bold;

    margin: -3rem auto 1.5rem;

}



.step-icon {

    width: 60px;

    height: 60px;

    background: var(--background-light-color);

    border-radius: 15px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin: 0 auto 1.5rem;

}



.step-icon i {

    font-size: 1.5rem;

    color: var(--primary-color);

}



.step-title {

    font-size: 1.25rem;

    color: var(--text-color);

    margin-bottom: 1rem;

}



.step-description {

    color: var(--text-light-color);

    line-height: 1.6;

}



.step-features {

    margin-top: 1.5rem;

    padding-top: 1.5rem;

    border-top: 1px solid rgba(0,0,0,0.1);

    text-align: left;

}



.step-feature {

    display: flex;

    align-items: center;

    gap: 0.5rem;

    margin-bottom: 0.5rem;

    color: var(--text-light-color);

    font-size: 0.9rem;

}



.step-feature i {

    color: var(--primary-color);

}



/* Responsive How It Works Section */



/* Tablet View */

@media (max-width: 1024px) {

    .steps-grid {

        grid-template-columns: repeat(2, 1fr);

        gap: 1.5rem;

        padding: 0 1.5rem;

    }



    .step-card {

        padding: 1.5rem;

    }



    .step-connector {

        display: none; /* Hide the connector line */

    }

    .step-number {

        width: 35px;

        height: 35px;

        margin: -2.5rem auto 1rem;

    }



    .step-icon {

        width: 50px;

        height: 50px;

        margin-bottom: 1rem;

    }



    .step-icon i {

        font-size: 1.25rem;

    }



    .step-title {

        font-size: 1.1rem;

    }



    .step-description {

        font-size: 0.95rem;

    }



    .step-features {

        margin-top: 1rem;

        padding-top: 1rem;

    }



    .step-feature {

        font-size: 0.85rem;

    }

}



/* Phone View */

@media (max-width: 768px) {

    .steps-grid {

        grid-template-columns: 1fr;

        gap: 1.5rem;

        padding: 0 1rem;

    }



    .step-card {

        padding: 1.25rem;

    }



    .step-connector {

        display: none; /* Hide the connector line */

    }

    

    .step-number {

        width: 30px;

        height: 30px;

        margin: -2rem auto 0.75rem;

        font-size: 0.9rem;

    }



    .step-icon {

        width: 45px;

        height: 45px;

        margin-bottom: 0.75rem;

    }



    .step-icon i {

        font-size: 1.1rem;

    }



    .step-title {

        font-size: 1rem;

        margin-bottom: 0.75rem;

    }



    .step-description {

        font-size: 0.9rem;

    }



    .step-features {

        margin-top: 0.75rem;

        padding-top: 0.75rem;

    }



    .step-feature {

        font-size: 0.8rem;

        gap: 0.4rem;

    }

}