.pbmit-element-timeline-style-1 .pbmit-timeline-year{ font-size: 20px; line-height: 26px; margin-bottom: 5px; letter-spacing: 1px; font-weight: 600; color: var(--pbmit-xhyre-global-color); } .pbmit-element-timeline-style-1 .pbmit-timeline-title{ font-size: 22px; line-height: 24px; margin-bottom: 15px; padding: 0 50px; text-transform: capitalize; } .pbmit-element-timeline-style-1 .pbmit-timeline-desc{ margin: 0; padding: 0 90px; line-height: 22px; } .pbmit-element-timeline-style-1 .pbmit-timeline-wrapper{ display: grid; width: 100%; height: auto; position: relative; justify-items: center; grid-template-rows: 1fr 1fr; text-align: center; grid-gap: 160px; } .pbmit-element-timeline-style-1 .pbmit-same-height.steps-content_wrap{ justify-content: flex-start; } .pbmit-element-timeline-style-1 .pbmit-slide-even .pbmit-same-height.steps-content_wrap{ justify-content: flex-end; } .pbmit-element-timeline-style-1 .steps-dot .dot{ background-color: var(--pbmit-xhyre-blackish-color); display: block; line-height: normal; font-size: 14px; margin: auto; width: 10px; height: 10px; transform: rotate(45deg); z-index: 2; position: relative; } .pbmit-element-timeline-style-1 .pbmit-timeline-wrapper .steps-dot{ position: absolute; z-index: 2; width: 100%; left: 0; bottom: 0; top: 0; right: 0; height: -moz-fit-content; height: fit-content; margin: auto !important; } .pbmit-element-timeline-style-1 .steps-dot .dot::after{ content: ""; position: absolute; left: -11px; right: 0; bottom: 0; width: 1px; height: 40px; margin: 0; background: rgb(var(--pbmit-xhyre-blackish-color-rgb), .90); transform: rotate(-45deg); } .rtl .pbmit-element-timeline-style-1 .steps-dot .dot::after{ left: 25px; right: 20px; } .pbmit-element-timeline-style-1 .pbmit-slide-even .steps-dot .dot::after{ left: 19px; top: 0; bottom: auto; } .rtl .pbmit-element-timeline-style-1 .pbmit-slide-even .steps-dot .dot::after{ left: -20px; right: -10px; } .pbmit-element-timeline-style-1 .steps-dot .steps-dot-line{ color: transparent; line-height: 10px; position: absolute; left: 0; right: 0; top: 0; bottom: 0; } .pbmit-element-timeline-style-1 .steps-dot .steps-dot-line::before, .pbmit-element-timeline-style-1 .steps-dot .steps-dot-line::after{ content: ""; width: calc(50% + 10px * 100); height: 1px; display: block; position: absolute; top: 0; bottom: 0; margin: auto; background-repeat: no-repeat; } .pbmit-element-timeline-style-1 .steps-dot .steps-dot-line::after{ left: 50%; background: linear-gradient(90deg, rgb(var(--pbmit-xhyre-blackish-color-rgb), 0.05), rgb(var(--pbmit-xhyre-blackish-color-rgb), 0.05)); } .pbmit-element-timeline-style-1 .steps-dot .steps-dot-line::before{ right: 50%; background: linear-gradient(90deg, rgb(var(--pbmit-xhyre-blackish-color-rgb), 0.05), rgb(var(--pbmit-xhyre-blackish-color-rgb), 0.05)); } .pbmit-element-timeline-style-1 .pbmit-same-height{ display: flex; flex-direction: column; justify-content: end; } .pbmit-element-timeline-style-1 .pbmit-slide-even.swiper-slide-duplicate:nth-last-child(2) .pbmit-feature-image{ order: 0; } .pbmit-element-timeline-style-1 .pbmit-slide-even .pbmit-feature-image{ order: 1; justify-content: start; transition: all 0.4s, opacity 0.4s 0.9s, transform 0.4s 0.9s; } .pbmit-element-timeline-style-1 .pbmit-timeline-wrapper:not(.pbmit-slide-even) .pbmit-feature-image{ transition: all 0.4s, opacity 0.4s 0.9s, transform 0.4s 0.9s; } .pbmit-element-timeline-style-1 .pbmit-feature-image img{ border-radius: 6px; } .pbmit-element-timeline-style-1 .steps-dot, .pbmit-element-timeline-style-1 .pbmit-feature-image, .pbmit-element-timeline-style-1 .steps-content_wrap{ opacity: 1; } .pbmit-element-timeline-style-1.pbmit-element-viewtype-carousel .pbmit-ele-header-area.container { padding: 0 12px; } /* Column Set */ .pbmit-element-column-six.pbmit-element-timeline-style-1 .pbmit-timeline-desc, .pbmit-element-column-five.pbmit-element-timeline-style-1 .pbmit-timeline-desc{ margin: 0; padding: 0 15px; } /* BG Color Set */ .pbmit-elementor-bg-color-gradient .pbmit-element-timeline-style-1 .pbmit-timeline-year, .pbmit-elementor-bg-color-globalcolor .pbmit-element-timeline-style-1 .pbmit-timeline-year { color: var(--pbmit-xhyre-blackish-color); } .pbmit-text-color-white .pbmit-element-timeline-style-1 .pbmit-timeline-title, .pbmit-elementor-bg-color-gradient .pbmit-element-timeline-style-1 .pbmit-timeline-title, .pbmit-elementor-bg-color-globalcolor .pbmit-element-timeline-style-1 .pbmit-timeline-title, .pbmit-elementor-bg-color-secondary .pbmit-element-timeline-style-1 .pbmit-timeline-title, .pbmit-elementor-bg-color-blackish .pbmit-element-timeline-style-1 .pbmit-timeline-title, .pbmit-text-color-white .pbmit-element-timeline-style-1, .pbmit-elementor-bg-color-gradient .pbmit-element-timeline-style-1, .pbmit-elementor-bg-color-globalcolor .pbmit-element-timeline-style-1, .pbmit-elementor-bg-color-secondary .pbmit-element-timeline-style-1, .pbmit-elementor-bg-color-blackish .pbmit-element-timeline-style-1 { color: var(--pbmit-xhyre-white-color); } .pbmit-text-color-white .pbmit-element-timeline-style-1 .steps-dot .steps-dot-line::after, .pbmit-elementor-bg-color-gradient .pbmit-element-timeline-style-1 .steps-dot .steps-dot-line::after, .pbmit-elementor-bg-color-globalcolor .pbmit-element-timeline-style-1 .steps-dot .steps-dot-line::after, .pbmit-elementor-bg-color-secondary .pbmit-element-timeline-style-1 .steps-dot .steps-dot-line::after, .pbmit-elementor-bg-color-blackish .pbmit-element-timeline-style-1 .steps-dot .steps-dot-line::after { background: linear-gradient(90deg, rgb(var(--pbmit-xhyre-white-color-rgb), .10), rgb(var(--pbmit-xhyre-white-color-rgb), .10)); } .pbmit-text-color-white .pbmit-element-timeline-style-1 .steps-dot .steps-dot-line::before, .pbmit-elementor-bg-color-gradient .pbmit-element-timeline-style-1 .steps-dot .steps-dot-line::before, .pbmit-elementor-bg-color-globalcolor .pbmit-element-timeline-style-1 .steps-dot .steps-dot-line::before, .pbmit-elementor-bg-color-secondary .pbmit-element-timeline-style-1 .steps-dot .steps-dot-line::before, .pbmit-elementor-bg-color-blackish .pbmit-element-timeline-style-1 .steps-dot .steps-dot-line::before { background: linear-gradient(90deg, rgb(var(--pbmit-xhyre-white-color-rgb), .10), rgb(var(--pbmit-xhyre-white-color-rgb), .10)); } .pbmit-text-color-white .pbmit-element-timeline-style-1 .steps-dot .dot, .pbmit-elementor-bg-color-gradient .pbmit-element-timeline-style-1 .steps-dot .dot, .pbmit-elementor-bg-color-globalcolor .pbmit-element-timeline-style-1 .steps-dot .dot, .pbmit-elementor-bg-color-secondary .pbmit-element-timeline-style-1 .steps-dot .dot, .pbmit-elementor-bg-color-blackish .pbmit-element-timeline-style-1 .steps-dot .dot { background-color: var(--pbmit-xhyre-white-color); } .pbmit-text-color-white .pbmit-element-timeline-style-1 .steps-dot .dot::after, .pbmit-elementor-bg-color-gradient .pbmit-element-timeline-style-1 .steps-dot .dot::after, .pbmit-elementor-bg-color-globalcolor .pbmit-element-timeline-style-1 .steps-dot .dot::after, .pbmit-elementor-bg-color-secondary .pbmit-element-timeline-style-1 .steps-dot .dot::after, .pbmit-elementor-bg-color-blackish .pbmit-element-timeline-style-1 .steps-dot .dot::after { background: rgb(var(--pbmit-xhyre-white-color-rgb), .40); } @media(max-width: 1600px){ .pbmit-element-timeline-style-1 .pbmit-timeline-desc{ padding: 0 30px; } .pbmit-element-timeline-style-1 .pbmit-timeline-wrapper{ grid-gap: 140px; } } @media(max-width: 1500px){ .pbmit-element-timeline-style-1 .pbmit-timeline-desc{ padding: 0; } .pbmit-element-timeline-style-1 .pbmit-timeline-wrapper{ grid-gap: 120px; } } @media(max-width: 1280px){ .pbmit-element-timeline-style-1 .pbmit-timeline-title{ padding: 0 15px; } }