/**
 * Language Timeline Frontend CSS
 *
 * @package LanguageTimeline
 */

.lt-timeline {
    position: relative;
    width: 100%;
}

.lt-timeline-item {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 70px;
    padding-bottom: 25px;
}

.lt-timeline-item:last-child {
    padding-bottom: 0;
}

/* Left Timeline Column */

.lt-timeline-left {
    position: relative;
    top: 8px;
    display: flex;
    justify-content: center;
    z-index: 5;
}



/* Gradient Circle */

.lt-circle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    flex-shrink: 0;
    background: linear-gradient(145deg, rgb(220 30 100 / 40%) 0%, rgb(128 77 151 / 40%) 50%, rgb(44 31 87 / 40%) 100%);
}

/* White Center Dot */


.lt-timeline-item:after {
    content: '';
    position: absolute;
    top: 17px;
    left: 17px;
    width: 10px;
    height: 100%;
    border-left: 3px solid transparent;
    z-index: 2;
    border-image: repeating-linear-gradient(to top, #313333 0px, #313333 10px, transparent 10px, #00000000 18px) 1;
}

.lt-timeline-item:last-child:after {
    display: none;
}


.lt-circle::before {
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: linear-gradient(145deg, #DC1E64 0%, #804D97 50%, #2C1F57 100%);
}

/* Right Content */

.lt-timeline-content {
    flex: 1;
    min-width: 0;
}

.lt-title {
    color: #fff;
    font-size: 40px;
    line-height: 52px;
    font-weight: 800 !important;
    margin-bottom: 15px;
    margin-top: 0px;
}

.lt-description {
    font-size: 22px;
    line-height: 30px;
    font-weight: 400;
    color: #C5C5C5;
}

/* Laptop */

@media (max-width: 1320px) {

.lt-title {font-size: 35px; line-height: 45px;}
.lt-description { font-size: 20px; line-height: 30px;}
.lt-timeline-item { gap: 50px; }
}

@media (max-width: 1024px) {

.lt-title { font-size: 28px; line-height: 38px; }
.lt-description { font-size: 18px; line-height: 28px; }
.lt-timeline-left {  top: 2px;}
.lt-timeline-item { gap: 40px; }	
}

/* Tablet */

@media (max-width: 991px) {

.lt-timeline-item { padding-bottom: 38px; } 
.lt-title { font-size: 22px; } 

}


/* Mobile */

@media (max-width: 767px) {

.lt-timeline-item { gap: 25px; padding-bottom: 30px; } 

}