.custom-arrow-box, .custom-arrow-box-last {
    position: relative; /* Container for absolute positioning */
    width: 90%;
    margin: 50px auto; /* Provides vertical space for the arrow */
}

/* 1. The STEM (Rectangle) */
.custom-arrow-box::before {
    content: '';
    position: absolute;
    bottom: -25px; /* Position the stem below the box. Adjust the negative value for stem length. */
    left: 50%;
    transform: translateX(-50%); /* Center horizontally */
    width: 100px; /* Width of the stem */
    height: 25px; /* Length of the stem */
    background-color: #0dcaf0; /* Color must match the box background (Bootstrap .bg-info color) */
}

/* 2. The HEAD (Triangle) */
.custom-arrow-box::after {
    content: '';
    position: absolute;
    bottom: -50px; /* Position below the stem (Stem height + border-width/size of head) */
    left: 50%;
    transform: translateX(-50%); /* Center horizontally */
    width: 0;
    height: 0;
    /* Create a triangle using borders */
    border-left: 70px solid transparent; /* Half the width of the head */
    border-right: 70px solid transparent; /* Half the width of the head */
    border-top: 30px solid #0dcaf0; /* Color must match the box background (Bootstrap .bg-info color) */
}

.pipeline {
    background-color: #0dcaf0;
}