/* --- Styles for the How It Works Page --- */

/* Page Title */
.page-title-section {
    padding: 60px 0;
    text-align: center;
    border-bottom: 1px solid #444;
}
.page-title-section h1 {
    font-size: 3rem;
    font-weight: 700;
    max-width: 800px;
    margin: 0 auto;
    line-height: 1.4;
}

/* Main Section */
.how-it-works-section {
    padding: 60px 0;
}

/* Intro Box */
.intro-box {
    background-color: #2c2929;
    padding: 40px;
    border-radius: 8px;
    text-align: center;
    max-width: 900px;
    margin: 0 auto 80px auto; /* Increased bottom margin */
    border: 1px solid #444;
}
.intro-box .logo { height: 80px; width: auto; margin-bottom: 25px; }
.intro-box h2 { margin-bottom: 15px; font-size: 2.2rem; }

/* --- Horizontal Timeline (Desktop First) --- */
.timeline-container {
    display: flex;
    justify-content: space-between;
    position: relative;
    max-width: 1000px;
    margin: 0 auto;
}

/* The main horizontal line */
.timeline-container::before {
    content: '';
    position: absolute;
    top: 35px; /* Vertically centers the line on the 70px number circle */
    left: 0;
    width: 100%;
    height: 4px;
    background-color: var(--primary-color);
    opacity: 0.3;
    z-index: 1;
}

.timeline-item {
    flex: 1;
    text-align: center;
    position: relative;
    padding: 90px 15px 0 15px; /* Top padding to make space for the number circle */
}

.timeline-step-number {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 70px;
    height: 70px;
    background-color: #221F1F;
    border: 4px solid var(--primary-color);
    border-radius: 50%;
    z-index: 2; /* Sits on top of the line */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: bold;
    color: var(--text-color);
}

.timeline-content {
    background-color: #2c2929;
    padding: 20px;
    border-radius: 8px;
    border-top: 4px solid var(--primary-color);
    text-align: left;
    height: 100%; /* Makes all content boxes the same height */
}
.timeline-content h3 {
    font-size: 1.5rem;
    margin-bottom: 10px;
    color: var(--text-color);
}
.timeline-content p {
    font-size: 0.95rem;
    color: #b0b0b0;
}

/* Final CTA Section */
.final-cta-section {
    background-color: #1a1818;
    padding: 60px 0;
    text-align: center;
    border-top: 1px solid #444;
}
.final-cta-section h2 { font-size: 2.2rem; margin-bottom: 15px; }
.final-cta-section p { margin-bottom: 30px; color: #b0b0b0; }
.final-cta-section .cta-buttons { display: flex; justify-content: center; gap: 20px; }
.btn-secondary { background-color: transparent; border: 2px solid var(--primary-color); }
.btn-secondary:hover { background-color: var(--primary-color); color: var(--text-color); }


/* --- Responsive: Vertical Timeline for smaller screens --- */
@media (max-width: 992px) {
    .page-title-section h1 { font-size: 2.5rem; }

    .timeline-container {
        flex-direction: column; /* Stacks items vertically */
    }

    /* Repurpose the line to be vertical */
    .timeline-container::before {
        left: 35px; /* Position line on the left */
        top: 0;
        bottom: 0;
        width: 4px;
        height: 100%;
    }

    .timeline-item {
        text-align: left;
        padding: 0 0 40px 90px; /* Space on the left for the number */
        width: 100%;
    }
    
    .timeline-step-number {
        left: 0;
        transform: none;
    }
    
    .timeline-content {
        height: auto; /* Allow height to be natural */
    }
}