/*=========================== 
    TimeLine Common Style 
===========================*/

    .wdt-timeline-holder .wdt-timeline-title > *:is(h1, h2, h3, h4, h5, h6) { margin: 0px; }
    .wdt-timeline-holder .wdt-timeline-content-group > div:not(:last-child) { margin-bottom: 16px; }

    .wdt-timeline-holder .wdt-timeline-wrapper .wdt-timeline-icon-wrapper { display: flex; }
    .wdt-timeline-holder .wdt-timeline-wrapper .wdt-timeline-icon-wrapper .wdt-timeline-icon { display: inline-flex; align-items: center; justify-content: center; }

/* Button Style */

    .wdt-timeline-button .wdt-button { font-size: 1rem; padding: var(--wdtPadding_Btn); font-family: var(--wdtFontTypo_Base); 
        font-weight: var(--wdtFontWeight_Base); text-transform: capitalize; 
        background-color: var(--wdtPrimaryColor);
        color: var(--wdtAccentTxtColor); }
    
    .wdt-timeline-button .wdt-button .wdt-timeline-button-text { z-index: 1; }

    /* .wdt-timeline-button .wdt-button:hover { background-color: var(--wdtAccentTxtColor); color: var(--wdtSecondaryColor); } */


/*===========================
    timeline sticky title 
===========================*/

    .wdt-timeline-sticky-title .wdt-timeline-wrapper .timeline-content-item { display: grid; grid-template-columns: 20% 10px auto; }

    .wdt-timeline-sticky-title .wdt-timeline-wrapper .timeline-content-item .wdt-timeline-container { 
        padding: clamp(1.25rem, 0.8173rem + 1.9231vw, 3.125rem) /* Min-20 & Max-50 */; position: relative; }

    .wdt-timeline-sticky-title .wdt-timeline-wrapper .timeline-content-item .timeline-title-item:before { content: ""; position: absolute; 
        width: clamp(0.625rem, 0.5096rem + 0.5128vw, 1.125rem) /* Min-10 & Max-18 */; height: clamp(0.625rem, 0.5096rem + 0.5128vw, 1.125rem) /* Min-10 & Max-18 */;
        background-color: var(--wdtPrimaryColor); border-radius: 50%; top: 50%; right: -0.5em; 
        -webkit-transform: translate(calc(50% + calc(11px / 2)), -50%); transform: translate(calc(50% + calc(11px / 2)), -50%); }

    .wdt-timeline-sticky-title .wdt-timeline-wrapper .timeline-content-item .timeline-title-item:after { 
        content: ''; position: absolute; width: clamp(1.125rem, 1.0096rem + 0.5128vw, 1.625rem) /* Min-18 & Max-26 */; 
        height: clamp(1.125rem, 1.0096rem + 0.5128vw, 1.625rem) /* Min-18 & Max-26 */; top: 50%; right: -0.5em; border: 1px solid transparent; 
        border-radius: var(--wdtRadius_Full); z-index: -1; -webkit-transition: var(--wdt-Ad-Transition); transition: var(--wdt-Ad-Transition); 
        -webkit-transform: translate(calc(50% + calc(11px / 2)), -50%) scale(1.4); transform: translate(calc(50% + calc(11px / 2)), -50%) scale(1.4);
        border-color: var(--wdtBorderColor); background-color: var(--wdtBodyBGColor); } 

    .wdt-timeline-sticky-title .wdt-timeline-wrapper .timeline-content-item .wdt-timeline-container,
    .wdt-timeline-sticky-title .wdt-timeline-wrapper .timeline-content-item .timeline-title-item { z-index: 2; }


/* Line Style */

    .wdt-timeline-sticky-title .wdt-timeline-wrapper .wdt-timeline__line { width: 100%; max-width: 1px; margin: 0 auto;
        background-color: var(--wdtBorderColor); position: relative; }

    .wdt-timeline-sticky-title .wdt-timeline-content-items:before, .wdt-timeline-sticky-title .wdt-timeline-content-items:after { 
        content: ""; position: absolute; left: 0; right: 0; height: 90px; width: 100%; z-index: 1; pointer-events: none; }
    .wdt-timeline-sticky-title .wdt-timeline-content-items:before { top: 0; 
        background-image: linear-gradient(180deg, var(--wdtBodyBGColor), transparent); }
    .wdt-timeline-sticky-title .wdt-timeline-content-items:after { bottom: 0; 
        background-image: linear-gradient(0deg, var(--wdtBodyBGColor), transparent); }

/* Title Style */

    .wdt-timeline-sticky-title .timeline-content-item .wdt-timeline-title h5 { font-size: clamp(1.375rem, 1.2596rem + 0.5128vw, 1.875rem); /* Min-22 & Max-30 */ }


/* list Style */

    .wdt-timeline-sticky-title .timeline-title-item { margin: 2em 0.5em; padding: 0px; text-align: right; 
        padding-right: clamp(0.625rem, 0.3365rem + 1.2821vw, 1.875rem) /* Min-10 & Max-30 */; position: sticky; top: 80px; height: fit-content; }

    .wdt-timeline-sticky-title .timeline-title-item .wdt-timeline-main-title { font-family: var(--wdtFontTypo_Alt); 
        text-align: right; font-size: clamp(1.875rem, 1.4423rem + 1.9231vw, 3.75rem); /* Min-30 & Max-60 */ 
        font-weight: var(--wdtFontWeight_Alt); color: var(--wdtHeadAltColor); }


@media only screen and (max-width: 1024px) {

    .wdt-timeline-sticky-title .wdt-timeline-wrapper .timeline-content-item { grid-template-columns: 24% 10px auto; }

}

@media only screen and (max-width: 767px) {

    .wdt-timeline-sticky-title .wdt-timeline-wrapper .timeline-content-item { grid-template-columns: 70px 10px auto; }
    .wdt-timeline-sticky-title .timeline-title-item .wdt-timeline-main-title { writing-mode: vertical-lr; }
    .wdt-timeline-sticky-title .wdt-timeline-wrapper .timeline-content-item .wdt-timeline-container .wdt-timeline-content { margin-bottom: 25px; }

}

@media only screen and (max-width: 600px) {

    .wdt-timeline-sticky-title .wdt-timeline-wrapper .timeline-content-item { grid-template-columns: 1fr; }
    .wdt-timeline-sticky-title .timeline-title-item .wdt-timeline-main-title { writing-mode: unset;
        text-align: left; font-size: 17vw; -webkit-text-stroke-width: 1px; -webkit-text-fill-color: transparent; opacity: 0.2; }

    .wdt-timeline-sticky-title .wdt-timeline-wrapper .timeline-content-item { border: 1px solid var(--wdtBorderColor); }
    .wdt-timeline-sticky-title .wdt-timeline-wrapper .timeline-content-item:not(:last-child) { margin-bottom: 30px; }
    .wdt-timeline-sticky-title .wdt-timeline-wrapper .timeline-content-item .wdt-timeline-container { padding: 24px; }
    .wdt-timeline-sticky-title .wdt-timeline-wrapper .timeline-content-item .wdt-timeline-container,
    .wdt-timeline-sticky-title .wdt-timeline-wrapper .timeline-content-item .timeline-title-item { grid-area: 1/-1; }

    .wdt-timeline-sticky-title .wdt-timeline-wrapper .timeline-content-item .timeline-title-item { 
        margin: 0; padding: 0px 30px; text-align: right; position: sticky; top: 40px; height: fit-content; }

    .wdt-timeline-sticky-title .wdt-timeline-wrapper .timeline-content-item .timeline-title-item:before,
    .wdt-timeline-sticky-title .wdt-timeline-wrapper .timeline-content-item .timeline-title-item:after,
    .wdt-timeline-sticky-title .wdt-timeline-content-items:before, .wdt-timeline-sticky-title .wdt-timeline-content-items:after,
    .wdt-timeline-sticky-title .wdt-timeline-wrapper .wdt-timeline__line { display: none; }

}



/* -------------------------------------------------------------------------- */
/*                           Timeline Default Style                           */
/* -------------------------------------------------------------------------- */
.wdt-timeline-holder.wdt-timeline-default .wdt-timeline-wrapper{ overflow: hidden; }

.wdt-timeline-holder.wdt-timeline-default .wdt-timeline-content-items{ display: grid; grid-template-columns: repeat( auto-fit, minmax( clamp(14.375rem, 5.7856rem + 13.4078vw, 21.875rem), auto)); gap: 10px; 
    justify-content: space-between; margin-right: -1px; margin-bottom: -1px }

.wdt-timeline-holder.wdt-timeline-default .wdt-timeline-content-items .timeline-content-item:not(:last-child):before{ content: ''; position: absolute; width: 1px; 
    height:80%; background-color: var(--wdtBorderColor); top: 0; right: -6px; bottom: 0; margin: auto; }

.wdt-timeline-holder.wdt-timeline-default .wdt-timeline-content-items .timeline-content-item:after{ content: ''; position: absolute; width: 84%; height:1px; 
    background-color: var(--wdtBorderColor); left: 30px; bottom: 0; margin: auto; }

.wdt-timeline-holder.wdt-timeline-default .wdt-timeline-content-items .timeline-content-item{ position: relative; padding:30px; }

.wdt-timeline-holder.wdt-timeline-default .wdt-timeline-content-items .timeline-content-item .wdt-timeline-image{ position: absolute; width: 100px; height: 100px; 
    display: inline-grid; place-items: center; left: 0; right: 0; top: 0; bottom: 0; margin: auto; 
    opacity: 0; -webkit-transition:var(--wdtAltTransition); transition:var(--wdtAltTransition); transition-duration: 0.4s }

.wdt-timeline-holder.wdt-timeline-default .wdt-timeline-content-items .timeline-content-item:hover .wdt-timeline-image{ opacity: 1; }

.wdt-timeline-holder.wdt-timeline-default .wdt-timeline-content-items .timeline-content-item .wdt-timeline-image:before{ content:''; position: absolute; width: 100%; 
    height: 100%; background-color: var(--wdtBorderColor); -webkit-border-radius: var(--wdtRadius_Full); border-radius: var(--wdtRadius_Full); 
    opacity: 0; -webkit-transform: scale(1.1); transform: scale(1.1); z-index: 0; -webkit-transition:var(--wdtAltTransition); transition:var(--wdtAltTransition); }

.wdt-timeline-holder.wdt-timeline-default .wdt-timeline-content-items .timeline-content-item:hover .wdt-timeline-image:before{ opacity: 1; -webkit-transform: scaleX(1); 
    transform: scaleX(1); }

.wdt-timeline-holder.wdt-timeline-default .wdt-timeline-content-items .timeline-content-item .wdt-timeline-image img{ width: 55%; z-index: 1; }

.wdt-timeline-holder.wdt-timeline-default .wdt-timeline-content-items .timeline-content-item .timeline-title-item .wdt-timeline-main-title{ 
    font-family: var(--wdtFontTypo_Alt); font-size: var(--wdtFontSize_Ext); text-transform: uppercase; position: relative; color: var(--wdtHeadAltColor);}
.wdt-dark-bg .wdt-timeline-holder.wdt-timeline-default .wdt-timeline-content-items .timeline-content-item .timeline-title-item .wdt-timeline-main-title{ color: #ffffff;}
.wdt-timeline-holder.wdt-timeline-default .wdt-timeline-content-items .timeline-content-item .timeline-title-item .wdt-timeline-main-title:before{ content:'' ; 
    position: relative; display: inline-block; width: 13px; height: 13px; background-color: var(--wdtPrimaryColor); 
    -webkit-border-radius: var(--wdtRadius_Full); border-radius: var(--wdtRadius_Full); top: 2px; margin-right: 10px; }

.wdt-timeline-holder.wdt-timeline-default .wdt-timeline-content-items .timeline-content-item .timeline-title-item{ margin-bottom: 10px; }

.wdt-timeline-holder.wdt-timeline-default .wdt-timeline-content-items .timeline-content-item .wdt-timeline-content-group .wdt-timeline-title h5{ 
    font-size: calc(var(--wdtFontSize_H6) + 2px); margin-bottom: 20px }

.wdt-timeline-holder.wdt-timeline-default .wdt-timeline-content-items .timeline-content-item .wdt-timeline-content-group .wdt-timeline-title-ar .wdt-timeline-subtitle h5{
     font-size: var(--wdtFontSize_Ext); font-weight: normal; margin: 0;}

.wdt-timeline-holder.wdt-timeline-default .wdt-timeline-content-items .timeline-content-item .wdt-timeline-content-group .wdt-timeline-content p{ margin-bottom: 0; }

@media(min-width:1025px){
    .wdt-timeline-holder.wdt-timeline-default .wdt-timeline-content-items .timeline-content-item .wdt-timeline-image { transform: scale(1.2) rotate(45deg); -webkit-transform: scale(1.2) rotate(45deg); }
    .wdt-timeline-holder.wdt-timeline-default .wdt-timeline-content-items .timeline-content-item:hover .wdt-timeline-image { transform: scale(1) rotate(0deg); -webkit-transform: scale(1) rotate(0deg); }
}

/* ----------------------- responsive timeline default ---------------------- */
@media only screen and (max-width:1024px){
    .wdt-timeline-holder.wdt-timeline-default .wdt-timeline-content-items{ grid-template-columns: repeat( auto-fit, minmax(320px, auto)); } 

    .wdt-timeline-holder.wdt-timeline-default .wdt-timeline-content-items .timeline-content-item .wdt-timeline-image{ position: relative; margin: 20px 0; opacity: 1;}
    
    .wdt-timeline-holder.wdt-timeline-default .wdt-timeline-content-items .timeline-content-item .wdt-timeline-image:before{ opacity: 1; }

    .wdt-timeline-holder.wdt-timeline-default .wdt-timeline-content-items .timeline-content-item .wdt-timeline-image{ width: 80px; height: 80px;}

    .wdt-timeline-holder.wdt-timeline-default .wdt-timeline-content-items .timeline-content-item .timeline-title-item{ margin: 0; }
}

@media only screen and (max-width:767px){
    .wdt-timeline-holder.wdt-timeline-default .wdt-timeline-content-items{ grid-template-columns: repeat( auto-fit, minmax(260px, auto)); }
}