.error-message {
            color: red;
            font-size: 12px;
            margin-top: 5px;
        }

        .error {
            border: 1px solid red;
        }

        #timeline {
            width: 100%;
            float: left;
        }

        .timeline-section {
            width: 100%;
            padding: 80px 0;
            background: #ffffff;
            float: left;
            /* background:#f7f7f7; */
        }

        .timeline {
            width: 80%;
            margin: auto;

        }

        /* center vertical line */
        .timeline::before {
            content: "";
            position: absolute;
            left: 50%;
            width: 3px;
            height: 545px;
            background: #222;
            transform: translateX(-50%);
        }

        /* row */
        .timeline-row {
            width: 100%;
            position: relative;
            padding: 20px 0;
            display: flex;
            align-items: center;
        }

        /* left/right positioning */
        .timeline-row.left {
            justify-content: flex-start;
        }

        .timeline-row.right {
            justify-content: flex-end;
        }

        /* content box */
        .timeline-content {
            width: 40%;
            display: flex;
            align-items: center;
            gap: 15px;
        }

        .timeline-row.left .timeline-content {
            text-align: right;
            flex-direction: row-reverse;
        }

        .timeline-content img {
            width: 55px;
        }

        /* text */
        .timeline-content h3 {
            margin: 0;
            font-size: 22px;
            font-weight: 700;
        }

        /* colors */
        .timeline-row.blue h3 {
            color: #4fa6ad;
        }

        .timeline-row.yellow h3 {
            color: #f2b233;
        }

        /* connector line */
        .timeline-row::before {
            content: "";
            position: absolute;
            top: 50%;
            width: 89px;
            height: 3px;
        }

        .timeline-row.right::before {
            left: 50%;
            background: #4fa6ad;
        }

        .timeline-row.left::before {
            right: 50%;
            background: #f2b233;
        }


        /* center circle */
        .timeline-dot {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            width: 20px;
            height: 20px;
            border-radius: 50%;
            z-index: 2;
        }

        /* inner color */
        .timeline-row.blue .timeline-dot {
            background: #4fa6ad;
            box-shadow: 0 0 0 8px rgba(79, 166, 173, 0.25);
        }

        .timeline-row.yellow .timeline-dot {
            background: #f2b233;
            box-shadow: 0 0 0 8px rgba(242, 178, 51, 0.25);
        }

        @media only screen and (min-width: 0px) and (max-width: 600px) {
            .timeline-section {
                width: 100%;
                padding: 79px 46px;
            }

            .timeline-content h3 {
                margin: 0;
                font-size: 11px;
            }

            .timeline-row::before {
                content: "";
                position: absolute;
                top: 50%;
                width: 57px;
            }

            .timeline::before {
                content: "";
                position: absolute;
                left: 50%;
                width: 3px;
                height: 73%;
            }

            .timeline-row.blue .timeline-dot {
                background: #4fa6ad;
                box-shadow: 0 0 0 5px rgba(79, 166, 173, 0.25);
            }

            .timeline-dot {
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
                width: 15px;
                height: 15px;
            }

            .timeline-content {
                width: 40%;
                display: flex;
                align-items: center;
                gap: 15px;
                flex-direction: column;
            }

            .timeline-content img {
                width: 30px;
            }

            .yellow-content img {
                width: 30px;
                position: relative;
                top: -32px;
            }

        }


        @media only screen and (min-width: 601px) and (max-width: 991px) {
            .timeline-row::before {
                content: "";
                position: absolute;
                top: 50%;
                width: 57px;
                height: 3px;
            }

            .timeline::before {
                content: "";
                position: absolute;
                left: 50%;
                width: 3px;
                height: 70%;
                background: #222;
                transform: translateX(-50%);
            }
        }

        .project03 {
            padding: 5rem 0;
            background: url(../images/bg-fixed-last.jpg) !important;
            width: 100%;
            float: left;
        }