.timeline ul {
    background: #456990;
    padding: 50px 0;
}

    .timeline ul li {
        list-style-type: none;
        position: relative;
        width: 6px;
        margin: 0 auto;
        padding-top: 5px;
        background: #fff;
    }

        .timeline ul li::after {
            content: "";
            position: absolute;
            left: 50%;
            bottom: 0;
            transform: translateX(-50%);
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background: inherit;
            z-index: 1;
        }

  
        .timeline ul li div {
            position: relative;
            bottom: 0;
            width: 400px;
            padding: 15px;
            background: #f45b69;
        }

            .timeline ul li div::before {
                content: "";
                position: absolute;
                bottom: 7px;
                width: 0;
                height: 0;
                border-style: solid;
            }

        .timeline ul li:nth-child(odd) div {
            left: 45px;
        }

            .timeline ul li:nth-child(odd) div::before {
                left: -15px;
                border-width: 8px 16px 8px 0;
                border-color: transparent #f45b69 transparent transparent;
            }

        .timeline ul li:nth-child(even) div {
            left: -439px;
        }

            .timeline ul li:nth-child(even) div::before {
                right: -15px;
                border-width: 8px 0 8px 16px;
                border-color: transparent transparent transparent #f45b69;
            }

time {
    display: block;
    font-size: 1.2rem;
    font-weight: bold;
    margin-bottom: 8px;
    COLOR: WHITE;
}


/* EFFECTS
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.timeline ul li::after {
    transition: background 0.5s ease-in-out;
}

.timeline ul li.in-view::after {
    background: #f45b69;
}

.timeline ul li div {
    visibility: hidden;
    opacity: 0;
    transition: all 0.5s ease-in-out;
}

.timeline ul li:nth-child(odd) div {
    transform: translate3d(200px, 0, 0);
}

.timeline ul li:nth-child(even) div {
    transform: translate3d(-200px, 0, 0);
}

.timeline ul li.in-view div {
    transform: none;
    visibility: visible;
    opacity: 1;
}


/* GENERAL MEDIA QUERIES
–––––––––––––––––––––––––––––––––––––––––––––––––– */

@media screen and (max-width: 992px) {
    .timeline ul li div {
        width: 250px;
    }

    .timeline ul li:nth-child(even) div {
        left: -289px;
        /*250+45-6*/
    }
}

@media screen and (max-width: 768px) {
    .timeline ul li div {
        width: 200px;
    }

    .timeline ul li:nth-child(even) div {
        left: -239px;
        /*250+45-6*/
    }
}

@media screen and (max-width: 576px) {
    .timeline ul li {
        margin-left: 20px;
    }

        .timeline ul li div {
            width: calc(65vw - 91px);
        }

        .timeline ul li:nth-child(even) div {
            left: 45px;
        }

            .timeline ul li:nth-child(even) div::before {
                left: -15px;
                border-width: 8px 16px 8px 0;
                border-color: transparent #f45b69 transparent transparent;
            }
}




/* EXTRA/CLIP PATH STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.timeline-clippy ul li::after {
    width: 40px;
    height: 40px;
    border-radius: 0;
}

.timeline-rhombus ul li::after {
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

.timeline-rhombus ul li div::before {
    bottom: 12px;
}

.timeline-star ul li::after {
    clip-path: polygon( 50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35% );
}

.timeline-heptagon ul li::after {
    clip-path: polygon( 50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 0% 60%, 10% 20% );
}

.timeline-infinite ul li::after {
    animation: scaleAnimation 2s infinite;
}

@keyframes scaleAnimation {
    0% {
        transform: translateX(-50%) scale(1);
    }

    50% {
        transform: translateX(-50%) scale(1.25);
    }

    100% {
        transform: translateX(-50%) scale(1);
    }
}

/* Anchor button style */
.open-popup {
           display: inline-block;
           padding: 10px 16px;
           margin: 5px;
           background: linear-gradient(45deg, #ff6b6b, #f06595);
           color: white;
           text-decoration: none;
           border-radius: 6px;
           font-weight: bold;
           transition: transform 0.2s ease, box-shadow 0.2s ease;
       }

           .open-popup:hover {
               transform: scale(1.05);
               box-shadow: 0 4px 12px rgba(0,0,0,0.2);
           }

       /* Popup overlay */
       .popup-overlay {
           position: fixed;
           top: 0;
           left: 0;
           width: 80%;
           height: 90%;
           background: rgba(0,0,0,0.7);
           display: none;
           justify-content: center;
           align-items: center;
           z-index: 1000;
           padding: 10px;
       }

       /* Popup box */
       .popup-box {
           background: white;
           border-radius: 10px;
           max-width: 90%;
           width: 100%;
           height: 100%;
           display: flex;
           flex-direction: column;
           overflow: hidden;
           animation: popupFade 0.3s ease;
       }

           /* PDF iframe */
           .popup-box iframe {
               flex: 1;
               border: none;
               width: 100%;
           }

       /* Close button1 */
       .close-btn1 {
           background: #ff6b6b;
           color: white;
           border: none;
           padding: 8px 14px;
           border-radius: 5px;
           cursor: pointer;
           margin: 8px;
           align-self: flex-end;
           transition: background 0.2s ease;
       }

           .close-btn1:hover {
               background: #e63946;
           }



       /* Animation */
       @keyframes popupFade {
           from {
               transform: scale(0.8);
               opacity: 0;
           }

           to {
               transform: scale(1);
               opacity: 1;
           }
       }