
/*=========================== 
    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: 10px;}

.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(--wdtSecondaryColor, var(--wdtDarkSecondaryColor));
    color: var(--wdtAccentTxtColor, var(--wdtDarkAccentTxtColor)); }

.wdt-timeline-button .wdt-button:hover { background-color: var(--wdtPrimaryColor, var(--wdtDarkPrimaryColor)); }


/*===========================
timeline sticky title 
===========================*/

.wdt-timeline-sticky-title .wdt-timeline-wrapper .timeline-content-item { display: grid; grid-template-columns: 47% 10px 47%; }

.wdt-timeline-sticky-title .wdt-timeline-wrapper .timeline-content-item:nth-child(even) { grid-template-columns: 47% 10px 47%; }

.wdt-timeline-sticky-title .wdt-timeline-wrapper .timeline-content-item:nth-child(even) .timeline-title-item { order: 1; text-align:left; padding-left:clamp(0.625rem, 0.3365rem + 1.2821vw, 1.875rem); padding-right:0;}
.wdt-timeline-sticky-title .wdt-timeline-wrapper .timeline-content-item:nth-child(even) .wdt-timeline-container { order: -1; padding: 10px clamp(0.625rem, 0.3365rem + 1.2821vw, 1.875rem) 10px 0; text-align: right;}

.wdt-timeline-sticky-title .wdt-timeline-wrapper .timeline-content-item .wdt-timeline-container {
    padding: 10px 0 10px clamp(0.625rem, 0.3365rem + 1.2821vw, 1.875rem);
    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);
    height: clamp(0.625rem, 0.5096rem + 0.5128vw, 1.125rem) /* Min-10 & Max-18 */;
    background:var(--wdtBodyBGColor);
    border: 3px solid var(--wdtHeadAltColor);
    border-radius: 50%;
    top: 50%;
    right: 1px;
    -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:nth-child(even) .timeline-title-item:before{
    right:auto;
    left: -29px;
}

.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, var(--wdtDarkBorderColor));
    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, var(--wdtDarkBodyBGColor)), transparent); }
.wdt-timeline-sticky-title .wdt-timeline-content-items:after { bottom: 0; 
    background-image: linear-gradient(0deg, var(--wdtBodyBGColor, var(--wdtDarkBodyBGColor)), transparent); }

/* Title Style */

.wdt-timeline-sticky-title .timeline-content-item .wdt-timeline-title h5 {font-size: var(--wdtFontSize_H4);}


/* list Style */

.wdt-timeline-sticky-title .timeline-title-item {
    margin: 5px 0;
    padding: 0px;
    text-align: right;
    padding-right: clamp(0.625rem, 0.3365rem + 1.2821vw, 1.875rem);
    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.5rem, 1.3328rem + 0.7643vw, 2.25rem); /*24-36px*/
    font-weight: var(--wdtFontWeight_Alt);
    color: var(--wdtPrimaryColor);
    }


@media only screen and (max-width: 1024px) {

.wdt-timeline-sticky-title .wdt-timeline-wrapper .timeline-content-item,
.wdt-timeline-sticky-title .wdt-timeline-wrapper .timeline-content-item:nth-child(even){ grid-template-columns: 24% 10px auto; }
.wdt-timeline-sticky-title .wdt-timeline-wrapper .timeline-content-item:nth-child(even) .timeline-title-item {order: 0;text-align:right;padding-right:clamp(0.625rem, 0.3365rem + 1.2821vw, 1.875rem);padding-left:0;}
.wdt-timeline-sticky-title .wdt-timeline-wrapper .timeline-content-item:nth-child(even) .wdt-timeline-container { order: 0; text-align: left; padding: 10px 0 10px clamp(0.625rem, 0.3365rem + 1.2821vw, 1.875rem);} .wdt-timeline-sticky-title .wdt-timeline-wrapper .timeline-content-item:nth-child(even) .timeline-title-item:before{ right:0px; left: auto; }
}

@media only screen and (max-width: 767px) {

.wdt-timeline-sticky-title .wdt-timeline-wrapper .timeline-content-item,
.wdt-timeline-sticky-title .wdt-timeline-wrapper .timeline-content-item:nth-child(even){ 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,

.wdt-timeline-sticky-title .wdt-timeline-wrapper .timeline-content-item:nth-child(even){ grid-template-columns: 1fr; }
.wdt-timeline-sticky-title .timeline-title-item .wdt-timeline-main-title { writing-mode: unset;
    text-align: left; font-size: 10vw; -webkit-text-stroke-width: 1px; -webkit-text-fill-color: transparent; opacity: 0.45; }

.wdt-timeline-sticky-title .wdt-timeline-wrapper .timeline-content-item { border: 1px solid var(--wdtBorderColor, var(--wdtDarkBorderColor)); }
.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,
.wdt-timeline-sticky-title .wdt-timeline-wrapper .timeline-content-item:nth-child(even) .timeline-title-item{ 
    margin: 0; padding: 0px 20px; 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; }

.wdt-timeline-sticky-title .wdt-timeline-wrapper .timeline-content-item .wdt-timeline-container .wdt-timeline-content,
.wdt-timeline-sticky-title .wdt-timeline-wrapper .timeline-content-item .wdt-timeline-container .wdt-timeline-content p{ margin-bottom:0;}

}



/* -------------------------------------------------------------------------- */
/*                           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,var(--wdtDarkBorderColor)); top: 0; right: -3px; 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,var(--wdtDarkBorderColor)); 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,var(--wdtDarkBorderColor)); -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,var(--wdtDarkHeadAltColor));}
.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,var(--wdtDarkPrimaryColor)); 
-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; }


/* ----------------------- 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)); }
}
