/* How It Works Section */
.how-it-works-section {
    padding: 100px 0;
    background-color: #cecece;
    background-image: linear-gradient(to bottom, #fff 0%, #cecece 100%);
}

.how-it-works-header {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 60px;
}

.how-it-works-tagline {
    font-size: 14px;
    font-weight: 700;
    color: #666;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-transform: uppercase;
}

.how-it-works-tagline i {
    color: var(--primary-color);
}

.how-it-works-title {
    font-size: 3.5rem;
    line-height: 1.1;
    font-weight: 800;
    color: var(--secondary-color);
}

.how-it-works-title .highlight {
    color: var(--primary-color);
}

.steps-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}

.step-card {
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    transition: var(--transition);
    position: relative;
    display: flex;
    flex-direction: column;
}

.step-card:hover {
    transform: translateY(-10px);
}

.step-image {
    height: 180px;
    position: relative;
    overflow: hidden;
}

.step-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.step-card:hover .step-image img {
    transform: scale(1.05);
}

.step-number {
    position: absolute;
    bottom: 5px;
    left: 50%;
    /* Center horizontally if desired, or right? Image shows right or bottom */
    /* Looking at the user image description: "The image shows... number bubble (01, 02...) overlaying the bottom edge...". Position looks like bottom center or right. Let's do bottom right based on typical designs, or center. Looking at the provided image crop, it seems the number is at the bottom right of the IMAGE, overlapping onto the white part. */
    right: 20px;
    left: auto;
    width: 50px;
    height: 50px;
    background-color: var(--primary-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 16px;
    border: 4px solid #fff;
    z-index: 2;
}

.step-content {
    padding: 30px 20px 20px;
    text-align: left;
    flex: 1;
}

.step-content h3 {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 10px;
    color: var(--secondary-color);
}

.step-content p {
    font-size: 0.9rem;
    color: #666;
    line-height: 1.5;
}

@media (max-width: 1024px) {
    .steps-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

@media (max-width: 600px) {
    .steps-grid {
        grid-template-columns: 1fr;
    }

    .how-it-works-title {
        font-size: 2.5rem;
    }

    .how-it-works-section {
        padding: 60px 0;
    }
}