/* // STYLING */
.timeline {
    ul {
        li {
            list-style-type: none;
            position: relative;
            width: 6px;
            margin: 0 auto;
            padding-top: 50px;
            background: #000000;

            &::after {
                content: "";
                position: absolute;
                left: 50%;
                bottom: 0;
                transform: translateX(-50%) rotate(45deg);
                width: 20px;
                height: 20px;
                z-index: 2;
                background: #eee;
            }

            div {
                position: relative;
                bottom: 0;
                width: 400px;
                padding: 20px;
                background: primary-color;
                box-shadow: 4px 13px 30px 1px rgb(252 56 56 / 36%);
                border-radius: 5px;
                display: flex;
                align-items: center;
                border: 1px solid;

                time {
                    position: absolute;
                    background: #f5af19;
                    width: 80px;
                    height: 30px;
                    top: -15px;
                    border-radius: 5px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    letter-spacing: 2px;
                }

                div {
                    height: 100px;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;

                    p {
                        text-align: center;
                    }
                }

                .discovery {
                    margin-right: 10px;
                }

                .scientist {
                }
            }

            &:nth-of-type(odd) {
                > div {
                    left: 45px;
                }
            }

            &:nth-of-type(even) {
                > div {
                    left: -439px;
                }
            }
        }
    }
}

/* // ANIMATION */
.timeline {
    ul {
        li {
            div {
                visibility: hidden;
                opacity: 0;
                transition: all 0.5s ease-in-out;
            }

            &:nth-of-type(odd) {
                div {
                    transform: translate3d(100px, -10px, 0) rotate(10deg);
                }
            }

            &:nth-of-type(even) {
                div {
                    transform: translate3d(-100px, -10px, 0) rotate(10deg);
                }
            }

            &.in-view {
                div {
                    transform: none;
                    visibility: visible;
                    opacity: 1;
                }
            }
        }
    }
}

@media screen and (max-width: 900px) {
    .timeline {
        ul {
            li {
                div {
                    width: 250px;
                    flex-direction: column;

                    div {
                        width: 80%;
                        margin: 10px;
                    }
                }

                &:nth-of-type(even) {
                    > div {
                        left: -289px;
                    }
                }
            }
        }
    }
}

@media screen and (max-width: 600px) {
    html,
    body {
        overflow-x: hidden;
    }

    .timeline {
        ul {
            li {
                margin-left: 0;

                div {
                    width: 90vw; /* use percentage instead of calc */
                    left: 0 !important; /* override left positioning */
                    margin-left: 20px; /* safe padding */
                }
            }
        }
    }
}

@media only screen and (min-width: 768px) and (max-width: 1024px) {
    .collection-section2-img2::after {
        right: 0;
        /* background: url(../images/service.png) no-repeat center; */
        background-size: 105%, 53%;
        background-position-y: 20%;
    }
    .navbar-main-sec .navbar-light .navbar-nav .nav-link {
        margin-right: 33px;
        color: rgb(255, 255, 255);
        font-family: cursive;
        font-size: 19px;
    }
}
@media only screen and (max-width: 576px) {
    .collection-box h4 {
        margin-bottom: 13px;
        letter-spacing: -1px;
        text-align: center;
    }
    .blog-posts {
        padding: 20px !important;
    }
}
@media only screen and (min-width: 768px) and (max-width: 1023px) {
    html, body{
        overflow-x: hidden;
    }
    .swiper-slide{
        height: 38vh;
    }

}
@media only screen and (min-width: 300px) and (max-width: 379px){
    .swiper-slide {
        height: 187px;
    }
}
.archana {
    transition: all 0.4s ease-in-out;
    transform-style: preserve-3d;
    perspective: 1000px;
    border-radius: 10px;
}

.archana:hover {
    box-shadow: 15px 20px 20px rgba(133, 133, 133, 0.4);
    transform: rotateX(10deg) scale(1.03);
}
