:root {
    --yellow-color-logo-timeline: rgba(243, 209, 49, 0.8);
}
#cd-timeline {
    & .header {
        height: 500px;
        text-align: center;
        background: linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.8)), url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSwzzY9fjzAm7fIXKNZSmoU4LH-GoZOj7scpVvJm3w15M2nreWOHg");
        background-position: 50% 50%;
        background-color: light-grey;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        font-family: Droid Sans;
    }

    & .header h1 {
        font-size: 3rem;
        color: #000000;
        /*        font-family: "Yatra One", cursive;*/
    }

    & .number_contact {
        font-weight: 900;
        font-family: Droid Sans;
    }

    & .header p {
        font-family: "Yatra One", cursive;
        font-size: 1.5rem;
    }

    & .timeline {
        padding: 50px;
    }

    & .timeline ul {
        padding: 0;
    }

    & .timeline .default-line {
        content: "";
        position: absolute;
        left: 50%;
        width: 4px;
        background: #bdc3c7;
        height: 4000px;
        z-index: 994;
    }

    & .timeline .draw-line {
        width: 4px;
        height: 0;
        position: absolute;
        left: 50%;
        background: #2ecc71;
        z-index: 997;
    }

    & .timeline ul li {
        list-style-type: none;
        position: relative;
        /*        width: 2px;*/
        /*        margin: 0 auto;*/
        height: 400px;
        /*        background: transparent;*/
        overflow: clip;
    }

    & .timeline ul li.in-view {
        transition: 0.125s ease-in-out, background-color 0.2s ease-out, color 0.1s ease-out, border 0.1s ease-out;
    }

    & .timeline ul li.in-view::before {
        content: "";
        position: absolute;
        left: 50%;
        top: 0;
        transform: translateX(-50%);
        width: 42px;
        height: 42px;
        border-radius: 50%;
        background-color: #2ecc71;
        background-size: 20px 20px;
        background-repeat: no-repeat;
        background-position: center;
        transition: 0.125s ease-in-out, background-color 0.2s ease-out, color 0.1s ease-out, border 0.1s ease-out;
    }

    & .timeline ul li::before {
        content: "";
        position: absolute;
        left: 50%;
        top: 0;
        transform: translateX(-50%);
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background: inherit;
        background: #bdc3c7;
        transition: all 0.4s ease-in-out;
    }

    .timeline {
        &:last-child {
            &::before {
                /* Style for the circle of the last <li> tag */
                width: 42px;
                height: 42px;
                background-size: 20px 20px;
                background-color: $color-green;
                /* Assuming $color-green is defined elsewhere in your SCSS */
            }
        }
    }

    & .timeline li {
        overflow: clip;
        /*        margin: 0 1em 1em 1em;*/
        background-color: var(--blue-color-logo);
        margin: 0 0 5vh 0;
        /*        padding: 0 2.5vw;*/
        border-radius: 2em;
        box-shadow: 0 10px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    }

    & .icon_timeline img {
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 20px;
        padding-top: 10px;
        position: relative;
        z-index: 1000;
    }

    & .icon_timeline {
        position: relative;
        z-index: 1000;
    }

    & .cd_image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        min-width: 100%;
        /* Ensure image covers the div */
        min-height: 100%;
        /* Ensure image covers the div */
    }

    & .cd_image {
        max-width: 30vw;
        width: 100%;
        overflow: hidden;
        /* Hide overflowing content */
        border-top-left-radius: 6em;
        border-bottom-right-radius: 6em;
        box-shadow: 0 10px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    }

    & .flex_timeline {
        display: flex;
        justify-content: space-between;
        height: 85%;
        width: 90%;
        margin: 0 5vw;
        /*        padding-bottom: 5vh;*/
    }

    & .text_timeline {
        display: flex;
        flex-direction: column;
        align-self: center;
        width: 35vw;
        color: #ffffff;
        font-family: "Brown", Arial, sans-serif;  

        & h1 {
            font-family: haha, regular;
            font-weight: 500;
            color: var(--yellow-color-logo);
        }
    }

    & .btn {
        color: var(--yellow-color-logo-timeline);
        font-size: 2.5rem;
    }

    & .social_timeline {
        display: flex;
        gap: 2rem;
    }

    & .btn i {
        line-height: 70px;
        font-size: 40px;
        transition: transform 0.325s linear;
    }

    & .btn:hover i {
        transform: scale(1.3);
        color: #f1f1f1;

    }

    & .btn::before {
        content: "";
        position: absolute;
        background-color: #3498db;
        transform: rotate(45deg);
    }

    & .btn:hover::before {
        animation: get_in_touch 0.7s 1;
    }

    & .facebook:hover::before {
        background: #3b5999;
    }

    & .location:hover::before {
        background: #e4405f;
    }

    & .whatsapp:hover::before {
        background:
            linear-gradient(#25d366, #25d366) 14% 84%/16% 16% no-repeat,
            radial-gradient(#25d366 58%, transparent 0);
    }

    & .instagram:hover::before {
        background: #d6249f;
        background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
    }

    & .number_contact {
        color: orange;
    }
}

@media (max-width:700px) {
    #cd-timeline {
        & .timeline {
            padding-left: 0;
        }

        & .timeline .default-line {
            left: 10px;
        }

        & .timeline .draw-line {
            left: 10px;
        }

        & .timeline ul li.in-view::before {
            left: 10px;
        }

        & .timeline ul li::before {
            left: 10px;
        }

        & .timeline .first_li {
            border-top-left-radius: 0;

            & .flex_timeline {
                padding-top: 5vh;
            }
        }

        & .flex_timeline {
            justify-content: flex-start;
            flex-direction: column;
            gap: 5vw;
            height: 85%;
            width: 90%;
            margin: 0 5vw;
            /*        padding-bottom: 5vh;*/
        }

        & .cd_image {
            max-width: 90vw;
        }

        & .text_timeline {
            width: auto;
        }
    }
}