.timeline-wrapper {  
    position: relative;  
    padding-bottom: 40px;  
}  

.readmore {  
    position: absolute;  
    bottom: 0;  
    left: 50%;  
    transform: translateX(-50%);  
    font-size: 0.8rem;  
    padding: 0.25rem 1.25rem 0.25rem 0.75rem;  
    background: #fff;  
    font-family: 'Futura';  
    text-align: center;  
    opacity: 1;  
    pointer-events: initial;  
    color: #011CFA;  
    border-radius: 0.15rem;  
    transition: all ease-in-out 0.325s;  
    z-index: 10;  
    border: 1px solid #011CFA;  
    text-transform: uppercase;  
    cursor: pointer;  
    display: block !important;  
}  

.readmore::after {  
    content: "+";  
    font-size: 0.8rem;  
    color: #011CFA;  
    position: absolute;  
    top: 50%;  
    right: 0.5rem;  
    transform: translateY(-50%);  
}  

.timeline-wrapper.active .readmore::after {  
    content: "-";  
}  

.timeline-container {  
    position: relative;  
    transition: max-height 0.5s ease-in-out;  
    max-height: 190px;  
    overflow: visible !important;  
}  

.timeline-container ul {  
    overflow: visible !important;  
}  

.timeline-container li {  
    overflow: visible !important;  
}  

.timeline-expanded {  
    overflow: visible !important;  
}  

.timeline-journey,  
.timeline-education {  
    float: left;  
    width: 100%;  
    padding-bottom: 40px;  
    position: relative;  
    max-height: 190px;  
    overflow: hidden;  
    transition: all ease-in 0.5s;  
    padding-left: 20px;  
    margin-left: -20px;  
}  

.timeline-journey.active,  
.timeline-education.active {  
    max-height: 2000px;  
    overflow: visible;  
    transition: all ease-out 0.5s;  
}  

.timeline-journey ul,  
.timeline-education ul {  
    display: flex;  
    list-style-type: none;  
    border-left: 5px solid #011CFA;  
    padding: 0 5px 0 25px;  
    flex-direction: column;  
    position: relative;  
    width: 100%;  
    color: #000;  
    margin: 0;  
}  

.timeline-journey ul li,  
.timeline-education ul li {  
    padding: 10px 20px;  
    position: relative;  
    width: 100%;  
    display: flex;  
    flex-direction: column;  
}  

.timeline-journey ul li span,  
.timeline-education ul li span {  
    font-size: 15px;  
    text-align: center;  
}  

.timeline-journey ul li h3,  
.timeline-education ul li h3 {  
    color: #011CFA;  
    font-size: 14px;  
    padding: 0;  
    margin: 0;  
    font-weight: 600;  
}  

.timeline-journey ul li .content p,  
.timeline-education ul li .content p {  
    padding: 5px 0 15px 0;  
    font-size: 15px;  
}  

.timeline-journey ul li::before,  
.timeline-education ul li::before,  
.timeline-journey.active ul li::before,  
.timeline-education.active ul li::before {  
    content: '';  
    position: absolute;  
    left: -37px;  
    top: 15px;  
    width: 20px;  
    height: 20px;  
    border-radius: 50%;  
    background: #fff;  
    border: 3px solid #011CFA;  
    z-index: 1;  
    transition: all 0.3s ease;  
}  

.timeline-journey ul li:hover::before,  
.timeline-education ul li:hover::before,  
.timeline-journey.active ul li:hover::before,  
.timeline-education.active ul li:hover::before {  
    background: #011CFA;  
}  

.timeline-journey.active ul,  
.timeline-education.active ul {  
    height: auto;  
    max-height: 2000px;  
    transition: all ease-out 0.5s;  
    overflow-y: visible;  
}  

.grad {  
    position: absolute;  
    bottom: 0px;  
    left: 0;  
    width: 100%;  
    height: 100px;  
    background: linear-gradient(0deg, rgba(255,255,255,1) 20%, rgba(255,255,255,0) 100%);  
    pointer-events: none;  
    transition: all ease-in 0.5s;  
    z-index: 5;  
}  

.hidden-grad {  
    display: none;  
}  

/* Pagination styles */  
/* Updated Pagination styles */  
.customPagination,  
.trainingcustomPagination {  
    display: inline-block;  
    margin: 0 5px;  
    cursor: pointer;  
    padding: 5px 10px;  
    font-family: 'Futura';  
    font-size: 12px;  
    color: #000;  
    border-radius: 50%;  
    min-width: 30px;  
    height: 30px;  
    display: flex;  
    align-items: center;  
    justify-content: center;  
    transition: all 0.3s ease;  
    background: #fafafa;  
}  

.paginacaoCursor,  
.trainingCursor {  
    cursor: pointer;  
    margin: 0 5px;  
    padding: 5px 10px;  
    background: none;  
    border: none;  
    font-family: 'Futura';  
    font-size: 12px;  
    color: #000;  
    border-radius: 50%;  
    min-width: 20px;  
    height: 33px;  
    display: flex;  
    align-items: center;  
    justify-content: center;  
    transition: all 0.3s ease;  
}  

.paginacaoCursor:hover,  
.trainingCursor:hover,  
.customPagination:hover,  
.trainingcustomPagination:hover {  
    background: rgba(1, 28, 250, 0.1);  
}  

.activePagination, .customPagination.activePagination, .trainingcustomPagination.activePagination {  
    background: #011CFA !important;
    color: #fff !important;  
}  

.paginacaoCursor img, .trainingCursor img {
		width: 10px;
	}

/* Container for pagination to ensure proper alignment */  
#pagination-container,  
#training-pagination-container {  
    display: flex;  
    align-items: center;  
    justify-content: center;  
    gap: 5px;  
    margin-top: 20px;  
    position: relative;  
    padding-bottom: 40px;  
}  
/* Additional styles */  
.desc {  
    font-size: 12px !important;  
}  

.desc a {  
    color: #011CFA;  
}  

.together {  
    display: flex;  
    gap: 10px;  
    font-size: 15px;  
}  

.together a {  
    color: #000;  
}  

.rm {  
    width: auto;  
    float: left;  
    color: #011CFA;  
    background: #ffffff;  
    padding: 2px 10px;  
    font-size: 12px;  
    border-radius: 3px;  
    text-transform: uppercase;  
    border: 1px solid #011CFA;  
}  

/* Read more button styles */  
.readmore {  
    position: absolute;  
    bottom: 0;  
    left: 50%;  
    transform: translateX(-50%);  
    font-size: 0.8rem;  
    padding: 0.25rem 1.25rem 0.25rem 0.75rem;  
    background: #fff;  
    font-family: 'Futura';  
    text-align: center;  
    opacity: 1;  
    pointer-events: initial;  
    color: #011CFA;  
    border-radius: 0.15rem;  
    transition: all ease-in-out 0.325s;  
    z-index: 10;  
    border: 1px solid #011CFA;  
    text-transform: uppercase;  
    cursor: pointer;  
    display: block !important;  
}  

.readmore::after {  
    content: "+";  
    font-size: 0.8rem;  
    color: #011CFA;  
    position: absolute;  
    top: 50%;  
    right: 0.5rem;  
    transform: translateY(-50%);  
}  

.timeline-journey.active .readmore::before,  
.timeline-education.active .readmore::before {  
    /*content: 'Mostra meno';*/
}  

.timeline-journey.active .readmore::after,  
.timeline-education.active .readmore::after {  
    content: "-";  
}  

@media (max-width: 300px) {  
    .timeline-journey,  
    .timeline-education {  
        width: 100%;  
        padding: 30px 5px 30px 10px;  
    }  
    
    .timeline-journey ul li .content h3,  
    .timeline-education ul li .content h3 {  
        color: #34ace0;  
        font-size: 15px;  
    }  
}