.ect-highlighted-template-cont a{
    text-decoration: none !important;
}
.ect-highlighted-template-cont{
    box-sizing: border-box;
    margin: 0px 0px 50px 0;
}
.ect-highlighted-wrapper{
    display: flex;
    gap: 30px;
}


.ect-highlighted-accordion i.ect-icon-down-double::before,
.ect-highlighted-accordion i.ect-icon-up-double::before{
    position: absolute;
    top: 15px;
    right: 10px;
    cursor: pointer;
}
.ect-highlighted-wrapper .ectclassShow {
    display: block;
    height:auto;
    max-height: 300px; 
    opacity: 1;
    transition: max-height 2s ease, opacity 2s ease;
}
.ect-highlighted-wrapper .ectclassHide {
    display: none !important;
    max-height: 0;
    height: 0;
    opacity: 0;
    transition: max-height 2s ease, opacity 2s ease;
}
/* .ect-highlighted-wrapper .ect-selected{
    background-color: #1297FE;
    color: #fff!important; 
} */

.ect-highlighted-wrapper .ect-event-details .ect-highlighted-title{
    font-size: 18px;
    font-weight: 600;
    padding-right: 15px;
}
.ect-highlighted-wrapper .ect-event-details .ect-highlighted-venue{
    font-size: 14px;
}
.ect-highlighted-wrapper .ect-show-events{
    width: 49%;
    display: flex;
    gap: 30px;
    position: relative;
    flex-direction: column;
}
.ect-highlighted-wrapper .ect-highlighted-accordion:not(:first-child){
    margin-top: 15px;
}
.ect-highlighted-wrapper .ect-highlighted-accordion::before{
    content: '';
    position: absolute;
    background: #EFF8FF;
    width: 2px;
    top: 30px;
    height: 100%;
    /* z-index: -1; */
}
.ect-highlighted-wrapper .ect-event-details{
    margin-left: 45px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    border-bottom: 1px solid #C2C2C2;
    padding-top: 10px;
    padding-bottom: 15px;
}
.ect-highlighted-wrapper .ect-footer{
    gap: 15px;
    display: flex;
    flex-direction: column;
    height: 0;
    overflow: hidden;
    opacity: 0;
    transition: height 2s ease, opacity 2s ease;
}
/* .ect-highlighted-wrapper .ect-footer .ect-read-more{
    color: #1297FE;
} */
.ect-highlighted-wrapper .ect-right{
    width: 49%;
    background-color: #F6FBFF;
    border-radius: 5px;
    padding: 20px;
    max-height: 290px;
    height: 290px;
}
.ect-highlighted-wrapper .ect-right .ect-highlighted-img img{
    width: 100%;
    border-radius: 10px;
    height: 250px;
    max-height: 250px;
    object-fit: cover;
} 
/* CSS for filling up the vertical line */
/* Vertical line that fills with background color */
.ect-highlighted-wrapper .ect-highlighted-accordion::after {
    content: '';
    position: absolute;
    background: transparent; /* Initial background color */
    width: 2px;
    top: 30px;
    left: 0px;
    height: 0%; /* Start with 0% height */
    transition: height 5.2s linear; /* Transition height and color */
    z-index: 1;
}

.ect-highlighted-wrapper .ect-highlighted-accordion.active::after{
    height: 100%; 
    background: #1297FE ; 
}

/* Animation for the .ect-footer visibility */
.ect-highlighted-wrapper .ect-highlighted-accordion {
    position: relative;
    border-left: 2px solid transparent; 
}

/* When active, show the footer */
.ect-highlighted-wrapper .ect-highlighted-accordion.active .ect-footer{
    height: 100% !important;
    max-height: 100% !important; 
}

/* Initially hide all footers */
.ect-highlighted-wrapper .ect-footer {
    height: 0; 
    overflow: hidden;
    opacity: 0;
    transition: max-height 2s ease, opacity 2s ease; /* Smooth animation for the open-close effect */
}
/*STYLE 1 & 3 CSS*/
.ect-highlighted-wrapper.style-1{
    margin-left: 26px;
}

.ect-highlighted-wrapper.style-1 .ect-highlighted-date,
.ect-highlighted-wrapper.style-3 .ect-highlighted-date{
    border-radius: 50%;
    width: 60px;
    height: 60px;
    padding: 7px 15px;
    position: absolute;
    left: -28px;
    z-index: 2;
}

.ect-highlighted-wrapper.style-1 .ect-highlighted-date span,
.ect-highlighted-wrapper.style-3 .ect-highlighted-date span{
    justify-content: center;
    display: flex;
    align-items: center;
}
/*STYLE 2 CSS*/
.ect-highlighted-wrapper.style-2{
    margin-left: 26px;
}
.ect-highlighted-wrapper.style-2 .ect-show-events{
    width: 49%;
    display: flex;
    gap: 7px;
    position: relative;
    flex-direction: column;
}

.ect-highlighted-wrapper.style-2 .ect-highlighted-accordion:not(:first-child){
    margin-top: 15px;
}
.ect-highlighted-wrapper.style-2 .ect-highlighted-accordion::before{
    content: '';
    position: absolute;
    background: #EFF8FF;
    width: 2px;
    top: 30px;
    /* left: -30px; */
    height: 100%;
    /* z-index: -1; */
}
.ect-highlighted-wrapper.style-2 .ect-calendar {
    border-radius: 50%;
    width: 31px;
    height: 31px;
    padding: 4px 15px;
    position: absolute;
    left: -14px;
    z-index: 2;
}

.ect-highlighted-wrapper.style-2 .ect-calendar span{
    display: flex;
    justify-content: center;
    align-items: center;
}
.ect-highlighted-wrapper.style-2 .ect-highlighted-date {
    margin-top: 5px;
}
.ect-highlighted-wrapper.style-2 .ect-highlighted-date .ect-date-area{
    display: inline-block;
    /* border: 1px solid #000; */
    border-radius: 20px;
    padding:2px 10px;   
    font-size: 12px;
}

.ect-highlighted-wrapper.style-2 .ect-event-details{
    margin-left: 45px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    border-bottom: 1px solid #C2C2C2;
    padding-bottom: 15px;
}
.ect-highlighted-wrapper.style-2 .ect-footer{
    gap: 15px;
    display: flex;
    flex-direction: column;
    height: 0;
    overflow: hidden;
    opacity: 0;
    transition: height 2s ease, opacity 2s ease;
}
/* .style-2 .ect-event-details .ect-highlighted-title{
    font-size: 22px;
    font-weight: 600;
} */
/* .ect-highlighted-wrapper.style-2 .ect-footer .ect-read-more{
    color: #1297FE;
} */
.ect-highlighted-wrapper.style-2 .ect-right{
    width: 49%;
    border-radius: 5px;
    padding: 20px;
    max-height: 290px;
    height: 290px;
}
.ect-highlighted-wrapper.style-2 .ect-right .ect-highlighted-img img{
    width: 100%;
    border-radius: 10px;
    height: 250px;
    max-height: 250px;
    object-fit: cover;
} 
/* CSS for filling up the vertical line */
/* Vertical line that fills with background color */
.ect-highlighted-wrapper.style-2 .ect-highlighted-accordion::after {
    content: '';
    position: absolute;
    background: transparent; /* Initial background color */
    width: 2px;
    top: 30px;
    left: 0px;
    height: 0%; /* Start with 0% height */
    transition: height 5.2s linear; /* Transition height and color */
    z-index: 1;
}

.ect-highlighted-wrapper.style-2 .ect-highlighted-accordion.active::after {
    height: 100%; 
    background: #1297FE; 
}

/* Animation for the .ect-footer visibility */
.ect-highlighted-wrapper.style-2 .ect-highlighted-accordion {
    list-style: none;
    position: relative;
    border-left: 2px solid transparent; 
}

/* When active, show the footer */
.ect-highlighted-wrapper.style-2 .ect-highlighted-accordion.active .ect-footer {
    height: 100% !important;
    max-height: 100% !important; /* Adjust as needed for content size */
}

/* Initially hide all footers */
.ect-highlighted-wrapper .ect-footer {
    height: 0; 
    overflow: hidden;
    opacity: 0;
    transition: max-height 2s ease, opacity 2s ease; 
}

/* Start Category CSS*/
ul.ect-categories {
    display: inline-block;
    padding: 0;
    margin: 0;
    width: calc(100% - 24px);
    margin-bottom: 10px;
}

ul.ect-categories li {
    display: inline-block;
    padding: 5px 10px;
    border: 1px solid;
    cursor: pointer;
    margin-left: 0;
    margin-right: 10px;
    font-size: 14px;
    border-radius: 3px;
    margin-bottom: 10px;
}

/* End Category CSS*/

/* STYLE 3 CSS*/

.ect-highlighted-wrapper.style-3{
    flex-direction: row-reverse;
    gap: 50px;
}

.ect-highlighted-wrapper .ect-footer .ect-highlighted-img{
    display:none;
}
/*Image show and hide*/
.ect-right.ect-img-show{
    display: block;
}
.ect-right.ect-img-hide{
    display: none;
}

/* STYLE 4 CSS*/
.ect-highlighted-wrapper.style-4{
    margin-left: 26px;
}
.ect-highlighted-wrapper.style-4 .ect-show-events{
    width: 100%;
    gap: 25px;
}
.ect-highlighted-wrapper.style-4 .ect-event-details{
    padding-top: 0;
}
.ect-highlighted-wrapper.style-4 .ect-highlighted-accordion::before,
.ect-highlighted-wrapper.style-4 .ect-highlighted-accordion::after{
    top: 25px;
}
.ect-highlighted-wrapper.style-4 .ect-show-events .ect-highlighted-accordion .ect-highlighted-date{
    display: flex;
    width: fit-content;
    font-size: 12px;
    border-radius: 5px;
    padding: 3px 8px;
}
.ect-highlighted-wrapper.style-4 .ect-calendar {
    border-radius: 50%;
    width: 25px;
    height: 25px;
    /* padding: 4px 15px; */
    position: absolute;
    left: -11px;
    z-index: 2;
}

@media only screen and (max-width: 767px) {
    .ect-highlighted-wrapper.style-2 .ect-highlighted-event{
        flex-direction: column;
    }
    .ect-highlighted-wrapper .ect-show-events{
        width: 100% !important;
    }
    .ect-highlighted-wrapper .ect-footer .ect-highlighted-img{
        display:block;
    }
    .ect-highlighted-wrapper .ect-right{
        display:none;
    }
    .ect-highlighted-wrapper .ect-highlighted-accordion i.ect-icon-down-double::before,
    .ect-highlighted-wrapper .ect-highlighted-accordion i.ect-icon-up-double::before{
        right: -5px;
        top: 15px;
    }
    .ect-highlighted-template-cont{
        width: 100%;
        padding: 0 30px;
    }
    .ect-highlighted-wrapper.style-4{
        margin-left: 0;
    }
}