/* CookieByte Timeline Widget - DESKTOP & TABLET (Version 3.0.0) */

.cb-timeline-widget {
    display: flex !important;
    flex-direction: row !important;
    width: 100% !important;
    gap: 20px !important;
    align-items: center !important;
    justify-content: center !important;
}

.cb-timeline-container {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    background-color: #C0DFEC !important;
    border-radius: 999px !important;
    padding: 10px 0 !important;
    flex-shrink: 0 !important;
    position: relative !important;
    overflow: hidden !important;
    align-self: center !important;
    margin: auto !important;
    min-height: 300px !important;
    width: 30px !important;
}

/* Floating Pill */
.cb-floating-pill {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: 55px !important;
    background-color: #009BD2 !important;
    border-radius: 999px !important;
    z-index: 1 !important;
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

/* Timeline Items */
.cb-timeline-item {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    position: relative !important;
    z-index: 2 !important;
    aspect-ratio: 1 / 1 !important;
    width: 100% !important;
}

.cb-timeline-item:not(:last-child) {
    margin-bottom: 25px !important;
}

.cb-timeline-point {
    width: 8px !important;
    height: 8px !important;
    background-color: #009BD2 !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: auto !important;
    transition: all 0.3s ease !important;
}

.cb-timeline-point i,
.cb-timeline-point svg,
.cb-timeline-point img {
    display: none;
}

.cb-timeline-item.active .cb-timeline-point {
    background-color: transparent !important;
    width: 100% !important;
    height: 100% !important;
}

.cb-timeline-item.active .cb-timeline-point i,
.cb-timeline-item.active .cb-timeline-point svg,
.cb-timeline-item.active .cb-timeline-point img {
    display: block !important;
    color: #ffffff !important;
    font-size: 15px !important;
}

.cb-timeline-point img {
    object-fit: cover !important;
    border-radius: 50% !important;
}

/* Content Area */
.cb-content-display-area {
    flex: 1 !important;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
}

.cb-content-item {
    display: none !important;
    width: 100% !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 50px !important;
}

.cb-content-item.active {
    display: flex !important;
}

/* Animations */
.cb-anim-slide-up {
    animation: cbSlideUp 0.8s ease-in forwards !important;
}

@keyframes cbSlideUp {
    0% { opacity: 0; transform: translateY(40px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* Desktop Wrappers */
.cb-box2-wrap {
    flex: 0 0 auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
}

.cb-box2-wrap img {
    width: 350px !important;
    max-width: 350px !important;
    height: auto !important;
    display: block !important;
}

.cb-box3-wrap {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    text-align: left !important;
}

.cb-box3-title {
    margin: 0 0 10px 0 !important;
}

.cb-box3-description {
    font-size: 24px !important;
}

.cb-box3-description p {
    margin: 0 !important;
}