/* implementation.php */

@media (max-width: 992px) {
        .timeline-item {
            flex-direction: column !important;
            margin-bottom: 50px !important;
        }

        .timeline-item[style*="row-reverse"] {
            flex-direction: column !important;
        }

        .timeline-number {
            margin: 0 0 25px 0 !important;
            align-self: center;
            width: 70px !important;
            height: 70px !important;
            font-size: 20px !important;
        }

        .timeline-content {
            padding: 35px 25px !important;
        }

        .phase-header h3 {
            font-size: 22px !important;
        }
    }

    @media (max-width: 768px) {
        .implementation-process-section {
            padding: 80px 0 !important;
        }

        .section-header h2 {
            font-size: 36px !important;
            margin-bottom: 15px !important;
        }

        .section-header p {
            font-size: 16px !important;
        }

        .timeline-item {
            margin-bottom: 40px !important;
        }

        .timeline-number {
            width: 60px !important;
            height: 60px !important;
            font-size: 18px !important;
            margin-bottom: 20px !important;
        }

        .timeline-content {
            padding: 30px 20px !important;
        }

        .phase-header {
            flex-direction: column !important;
            text-align: center !important;
            align-items: center !important;
            margin-bottom: 25px !important;
        }

        .phase-icon {
            margin: 0 0 15px 0 !important;
        }

        .phase-header h3 {
            font-size: 20px !important;
            margin-bottom: 5px !important;
        }

        .timeline-content p {
            font-size: 15px !important;
            margin-bottom: 25px !important;
        }

        .deliverables h5 {
            font-size: 15px !important;
            margin-bottom: 12px !important;
        }

        .deliverables ul {
            font-size: 14px !important;
            padding-left: 18px !important;
        }
    }

    @media (max-width: 480px) {
        .implementation-process-section {
            padding: 60px 0 !important;
        }

        .section-header h2 {
            font-size: 28px !important;
        }

        .timeline-number {
            width: 50px !important;
            height: 50px !important;
            font-size: 16px !important;
            padding: 15px !important;
        }

        .timeline-content {
            padding: 25px 15px !important;
        }

        .phase-header h3 {
            font-size: 18px !important;
        }

        .phase-icon {
            padding: 12px !important;
            width: 40px !important;
            height: 40px !important;
        }

        .phase-icon i {
            font-size: 16px !important;
        }

        .timeline-content p {
            font-size: 14px !important;
        }

        .deliverables ul {
            font-size: 13px !important;
        }
    }