/* The rocket is position: sticky, which stops working under an `overflow: hidden` ancestor.
   `clip` still hides the sideways overflow but does not create a scroll container. */
   section:has(.template-9824) {
    overflow: visible !important;
    overflow-x: clip !important;
}

.template-9824 {
    position: relative;
    width: 100%;
    padding-bottom: 20px;
}

.template-9824 .rocket-container {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 10;
    pointer-events: none;
    height: auto;
    width: 0;
    overflow: visible;
    transform: none;
}

.template-9824 .rocket-container img.rocket-m-90-d-110 {
    max-width: 80px;
}

@media (max-width: 767px) {
    
    .template-9824 .rocket-container {
        padding-right: 15px;
        padding-left: 15px;
        right: calc(-8% + 1px);
        max-width: 16.666667%;
        width: 100%;
    }

    .template-9824 .rocket-container img.rocket-m-90-d-110 {
        max-width: 110px;
    }

    .template-9824:not(.style-1) #rocket {
        width: 70px;
        min-width: 70px;
        max-width: 70px;
    }
}

.template-9824 #rocket {
    position: sticky;
    top: calc(100vh / 1.5);
    top: calc(100svh / 1.5);
    left: auto;
    transition: transform 0.3s;
    transform: translateX(-50%);
    width: 100%;
    max-width: 100%;
    width: 100%;
    max-width: 80px;
}

@media (min-width: 767px) {
    
    .template-9824 {
        padding: 110px 0 30px;
    }

    .template-9824:before {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 2px;
        background: linear-gradient(to bottom, #6D3A93, #58A9E0);
        margin-left: -1px;
    }
    
    .template-9824 .rocket-container {
        left: calc(50% - 1px);
        transform: none;
        top: 0;
    }
    
    .template-9824 #rocket {
        width: 110px;
        max-width: 110px;
    }
}

.template-9824 .template__content {
    opacity: 0.25;
    transition: .2s opacity;
}

.template-9824 .template__content.is-active {
    opacity: 1;
}

.template-9824 .template__year h2 {
    display: inline-block;
    font-size: 60px;
    font-weight: bold;
    /* background: linear-gradient(to right, #6D3A93, #58A9E0); */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    user-select: none;
}

.template-9824 .template__dot:before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 20px;
    width: 20px;
    background: #6D3A93;
    border-radius: 50%;
}

@media ( max-width: 767px ) {
    
    .template-9824 .template__dot:after {
        content: '';
        position: absolute;
        left: 50%;
        top: 50%;
        height: 250%;
        width: 2px;
        transform: translate(-50%, -50%);
        background: var(--color-3);
    }
    
    .template-9824 .template__inner {
        overflow: hidden;
    }
}

.template-9824 .template__year .year-text {
    position: relative;
    display: inline-block;
    font-size: 23px;
    font-weight: bold;
    user-select: none;
    line-height: 1;
}

.template-9824 .year-outline {
    -webkit-text-stroke: 1px #6D3A93;
    color: #6D3A93;
    background: none;
    position: relative;
    z-index: 1;
    font-weight: 700;
    transition: opacity .8s ease-in-out;
}

.template-9824 .year-fill {
    position: absolute;
    top: 1px;
    left: 0;
    width: 100%;
    background: linear-gradient(to right, #6D3A93, #58A9E0);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    white-space: nowrap;
    opacity: 0;
    transition: opacity .8s ease-in-out;
    z-index: 2;
    font-weight: 700;
}

.template-9824 .year-fill small,
.template-9824 .year-outline small {
    font-weight: 700;
}

@media (min-width: 767px) {
    
    .template-9824 .template__content {
        transition: .6s opacity;
    }
    
    .template-9824 .template__year .year-text {
        font-size: 40px;
    }
    
    .template-9824 .year-outline {
        -webkit-text-stroke: 1.5px #6D3A93;
    }
    
    .template-9824 .year-fill {
        top: 1px;
    }
}

@media (min-width: 991.92px) {
    
    .template-9824 .template__year .year-text {
        font-size: 60px;
    }
    
    .template-9824 .year-fill {
        top: 2px;
    }
}

.template-9824 .year-text.animated .year-fill {
    opacity: 1;
}

.template-9824 .year-text.animated .year-outline {
    opacity: 0;
}

@media (max-width: 767px) {
    
    .template__year {
        order: 1;
    }
    
    .template__content {
        order: 2;
    }
    
    .template__dot {
        order: 3;
    }
}

/* style-1 */

.template-9824.style-1 {
    color: #fff;
    padding: 25px 0;
    font-size: 17px;
    font-weight: 500;
}

.template-9824.style-1 p {
    font-size: 14px;
    font-weight: 400;
    margin-top: 5px;
}

@media ( min-width: 767px ) {

    .template-9824.style-1 {
        padding: 25px 0 45px;
        font-size: 23px;
        font-weight: 700;
    }

    .template-9824.style-1 p {
        font-size: 16px;
        margin-top: 12px;
    }   
}

.template-9824.style-1:before {
    display: none;
}

.template-9824.style-1 .template-line {
    position: absolute;
    top: 0;
    background: var(--color-3);
    width: 1px;
    z-index: 3;
    bottom: auto;
    height: 93.5%;
    /* max-height: 100%; */
    left: 10px;
    transform: translateX(-50%);
    max-height: 96%;
}

.template-9824.style-1:after {
    content: '';
    background: #fff;
    width: 4px;
    position: absolute;
    top: -3px;
    bottom: 57px;
    border-radius: 20px;
    z-index: 0;
    left: 8px;
}

@media (min-width: 499px) {
    
    .template-9824.style-1 .template-line {
        left: 30px;
    }
    
    .template-9824.style-1:after {
        left: 28px;
    }
}

@media ( min-width: 767px ) {
    
    .template-9824.style-1 .template-line {
        width: 2px;
        left: 50%;
        transform: translateX(-50%);
    }
    
    .template-9824.style-1:after {
        width: 6px;
        left: 50%;
        transform: translateX(-50%);
    }
}

.template-9824.style-1 .template__dot:before {
    background: #5e8bcb;
    transition: background .4s, border .4s;
    border: 1px solid #fff;
}

.template-9824.style-1 .template__dot.is-active:before {
    border-color: var(--color-3);
}

.template-9824.style-1 .template__dot:before {
    z-index: 4;
    background: #fff;
}

.template-9824.style-1 .template__dot:before {
    height: 12px;
    width: 12px;
    left: 25px;
}

.template-9824.style-1 .template__dot:after {
    content: '';
    position: absolute;
    top: 50%;
    left: 25px;
    /*transform: translate(-50%, -50%);*/
    height: 16px;
    width: 16px;
    border-radius: 50%;
    z-index: 2;
    background: #fff;
}

@media (min-width: 499px) {
    
    .template-9824.style-1 .template__dot:before,
    .template-9824.style-1 .template__dot:after {
        left: 45px;   
    }
}

@media (min-width: 767px) {
    
    .template-9824.style-1 .template__dot:after {
        height: 24px;
        width: 24px;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    
    .template-9824.style-1 .template__dot:before {
        height: 20px;
        width: 20px;
        left: 50%;
    }
}


.template-9824.style-1 .template__inner {
    padding: 5px 0 !important;
}

.template-9824.style-1 .rocket-container {
    right: auto;
    transform: none;
    width: 0;
    max-width: none;
    padding: 0;
    left: calc(100% + 13vw);
}

.template-9824.style-1 #rocket {
    width: 65px;
    max-width: 65px;
}

@media ( min-width: 767px ) {
    
    .template-9824.style-1 .flex-style-md-1-row-reverse {
        flex-direction: row-reverse !important;
    }

    .template-9824.style-1 .template__inner {
        padding: 10px 0 !important;
    }

    .template-9824.style-1 .rocket-container {
        left: 118.5%;
        transform: none;
    }
    
    .template-9824.style-1 #rocket {
        width: 90px;
        max-width: 90px;
        
    }
}

@media ( min-width: 991.92px ) {

    .template-9824.style-1 .rocket-container {
        left: calc(120% + 1px);
        transform: none;
    }
    
    .template-9824.style-1 #rocket {
        width: 115px;
        max-width: 115px;
        
    }

    .template-9824 #rocket {
        top: 50vh;
        top: 50svh;
    }

    .template-9824.style-1 .template-line {
        height: 0;
        /* max-height: 100%; */
    }

    .template-9824.style-1:after {
        bottom: 3.5%;
    }
}

@media (max-width: 991.92px) {
    
    .template-9824.style-1.style-1--alt {
        padding: 10px 0 25px !important;
    }
    
    .template-9824.style-1.style-1--alt .template__inner {
        padding: 10px 0 !important;
    }
    
    .template-9824.style-1.style-1--alt .template-line {
        top: 16px;
        max-height: calc(100% - 60px) !important;
    }
    
    .template-9824.style-1.style-1--alt:after {
        top: 12px;
        bottom: 42px;
    }
}

@media (max-width: 400px) {
    
    .template-9824.style-1 .rocket-container {
        left: calc(100% + 13vw - 2px);
    }
}

@media (max-width: 400px) {
    
    .template-9824.style-1 .rocket-container {
        left: calc(100% + 13vw - 1px);
    }
}