/* --------------------------------------------------- 1. Common Styles 1.1 Site Loader 2. Lenis Smooth Scroll 3. Timeline Widget 4. Video Secuence Widget --------------------------------------------------- */ /** 1. Common Styles */ @import url('https://fonts.googleapis.com/css2?family=Oxanium:wght@200..800&display=swap'); /* Oxanium Font */ :root { --mt-e-transition: 375ms cubic-bezier(0.7, 0, 0.3, 1); --mt-e-title-font: "Oxanium", sans-serif; } body { overflow-x: hidden; overflow-y: visible; } body { opacity: 1; transition: all 1s ease-in-out 0.5s; } body.mt-fade { opacity: 0; transition: all 1s ease-in-out; } /** 1.1 Site Loader */ html:has(> body:not(.elementor-editor-active) > #site-loader:not(.is-hidden)) { overflow: hidden; } body.elementor-editor-active #site-loader { display: none; } #site-loader { position: fixed; inset: 0; background: #0f0f0f; z-index: 9999; display: flex; align-items: center; justify-content: center; transition: opacity 0.6s ease, visibility 0.6s ease; } #site-loader.is-hidden { opacity: 0; visibility: hidden; } .loader-inner { display: flex; gap: 10px; } .dot { width: 14px; height: 14px; background: #fff; border-radius: 50%; animation: bounce 1.2s infinite ease-in-out; } .dot:nth-child(2) { animation-delay: 0.15s; } .dot:nth-child(3) { animation-delay: 0.3s; } @keyframes bounce { 0%, 80%, 100% { transform: scale(0); opacity: 0.4; } 40% { transform: scale(1); opacity: 1; } } /** 2. Lenis Smooth Scroll */ html.lenis, html.lenis body { height: auto; } .lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; } .lenis [data-lenis-prevent], .lenis [data-lenis-prevent-wheel], .lenis [data-lenis-prevent-touch] { overscroll-behavior: contain; } .lenis.lenis-smooth iframe { pointer-events: none; } .lenis.lenis-autoToggle { transition-property: overflow; transition-duration: 1ms; transition-behavior: allow-discrete; } /* 3. Timeline Widget */ .mt-addon-timeline-wrapper { display: flex; flex-wrap: nowrap; gap: clamp(1.25rem, 0.9615rem + 1.2821vw, 2.5rem); font-family: var(--mt-e-title-font); } .mt-addon-timeline-wrapper .mt-addon-timeline-item { flex: 1 1 100%; padding: 40px 0px; height: 100vh; display: inline-flex; align-items: center; } .mt-addon-timeline-wrapper .mt-addon-timeline-item .mt-content { width: 100%; } .mt-count-wrapper { margin: clamp(1.25rem, 1.1058rem + 0.641vw, 1.875rem) 0px; } .mt-count-wrapper .mt-e-count-line { position: relative; } .mt-count-wrapper .mt-e-count-line:before { content: ""; position: absolute; top: 50%; left: 0; right: 0; width: calc(100% - clamp(2.5rem, 1.9231rem + 2.5641vw, 5rem)); height: 3px; background: #A29C9C; transform: translateY(-50%); opacity: 0.3; z-index: 1; transition: var(--mt-e-transition); margin: 0 auto; } .mt-count-wrapper .mt-e-count-line > .mt-count { width: clamp(2.5rem, 2.2115rem + 1.2821vw, 3.75rem); height: clamp(2.5rem, 2.2115rem + 1.2821vw, 3.75rem); border-radius: 50%; background: #A29C9C; border: 2px solid #A29C9C; display: flex; align-items: center; justify-content: center; position: relative; z-index: 2; transition: var(--mt-e-transition); font-size: clamp(1.125rem, 1.0385rem + 0.3846vw, 1.5rem); font-weight: 700; color: #FFF; } .mt-addon-timeline-wrapper .mt-addon-timeline-item:last-child .mt-count-wrapper .mt-e-count-line:before { display: none; } .mt-addon-timeline-wrapper .mt-addon-timeline-item .mt-e-cert-top, .mt-addon-timeline-wrapper .mt-addon-timeline-item .mt-e-timeline-title, .mt-addon-timeline-wrapper .mt-addon-timeline-item .mt-e-timeline-desc { transition: var(--mt-e-transition); } .mt-addon-timeline-wrapper .mt-addon-timeline-item .mt-e-cert-top { font-size: 11px; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; color: #666; line-height: 1.3; } .mt-addon-timeline-wrapper .mt-addon-timeline-item .mt-e-timeline-title { font-size: clamp(1.0625rem, 1.0192rem + 0.1923vw, 1.25rem); font-weight: 600; color: #666; line-height: 1.2; margin-bottom: 10px; } .mt-addon-timeline-wrapper .mt-addon-timeline-item .mt-e-timeline-desc { font-size: clamp(0.5625rem, 0.5192rem + 0.1923vw, 0.75rem); line-height: 1.6; color: #666; font-weight: 400; text-transform: uppercase; letter-spacing: 0.3px; } /* Active State Colors */ .mt-addon-timeline-wrapper .mt-addon-timeline-item.is-active .mt-e-cert-top, .mt-addon-timeline-wrapper .mt-addon-timeline-item.is-active .mt-e-timeline-title { color: #FFF; } .mt-addon-timeline-wrapper .mt-addon-timeline-item.is-active .mt-e-timeline-desc { color: #CCC; } .mt-addon-timeline-wrapper .mt-addon-timeline-item.is-active .mt-e-count-line > .mt-count { color: #000; } /* Color Variants */ .mt-addon-timeline-wrapper .mt-addon-timeline-item.mt-e-odd.is-active .mt-count-wrapper .mt-e-count-line > span { background: #95C624; border-color: #95C624; transform: scale(1.15); box-shadow: 0 0 25px rgba(149, 198, 36, 0.8); } .mt-addon-timeline-wrapper .mt-addon-timeline-item.mt-e-even.is-active .mt-count-wrapper .mt-e-count-line > span { background: #F4B502; border-color: #F4B502; transform: scale(1.15); box-shadow: 0 0 25px rgba(244, 181, 2, 0.8); } /* Connect Line Active Colors */ .mt-addon-timeline-wrapper .mt-addon-timeline-item.mt-e-odd.is-active .mt-count-wrapper .mt-e-count-line:before { background: #95C624; opacity: 1; box-shadow: 0 0 15px rgba(149, 198, 36, 0.8); } .mt-addon-timeline-wrapper .mt-addon-timeline-item.mt-e-even.is-active .mt-count-wrapper .mt-e-count-line:before { background: #F4B502; opacity: 1; box-shadow: 0 0 15px rgba(244, 181, 2, 0.8); } /* Responsive Styles */ @media only screen and (max-width: 767px) { .mt-addon-timeline-wrapper { flex-wrap: wrap; } .mt-addon-timeline-wrapper .mt-addon-timeline-item { height: auto; padding: 10px 20px; flex: 1 1 49%; } .mt-addon-timeline-wrapper .mt-addon-timeline-item .mt-content { display: flex; flex-wrap: wrap; gap: 12px 20px; } .mt-addon-timeline-wrapper .mt-addon-timeline-item .mt-e-cert-top { flex: 0 0 100%; padding-left: calc(clamp(2.5rem, 2.2115rem + 1.2821vw, 3.75rem) + 20px); } .mt-addon-timeline-wrapper .mt-addon-timeline-item .mt-count-wrapper { margin: 0; } .mt-count-wrapper .mt-e-count-line { height: 100%; } .mt-count-wrapper .mt-e-count-line:before { top: 0; left: 0; right: 0; width: 2px; height: calc(100% + 43px); transform: none; } .mt-addon-timeline-wrapper .mt-addon-timeline-item .mt-timeline-content { flex: 1 1 60%; } .mt-count-wrapper .mt-e-count-line > .mt-count { transform: translateY(-80%); transform-origin: bottom center; } } /** 4. Video Secuence Widget */ .mt-addon-video-secuence { background: #1d1d1d; position: relative; overflow: clip; } .mt-addon-video-secuence .secuence-content { width: 100%; max-width: 1920px; margin: 0 auto; padding: 50px clamp(1.875rem, 0.8654rem + 4.4872vw, 6.25rem); position: relative; z-index: 1; } .mt-addon-video-secuence .secuence-content .secuence-item { color: #FFF; position: relative; width: 100%; height: 100vh; padding: 10px 0; } .mt-addon-video-secuence .secuence-content .secuence-item .secuence-item-inner { position: sticky; top: 0; align-content: center; height: 100vh; } .mt-addon-video-secuence .secuence-content .secuence-item:nth-child(even) { max-width: 500px; margin-right: auto; } .mt-addon-video-secuence .secuence-content .secuence-item:nth-child(odd) { max-width: 500px; margin-left: auto; } .mt-scrolly-video { position: absolute; top: 0; right: 0; bottom: 0; left: 0; } .mt-scrolly-video canvas { position: sticky; top: 0; width: 100%; } .secuence-content .secuence-common-title { font-family: var(--mt-e-title-font); display: block; font-size: clamp(1.625rem, 1.0769rem + 2.4359vw, 4rem); text-transform: uppercase; text-wrap: balance; font-weight: 700; color: #FFF; text-align: start; margin-bottom: 0px; margin-top: 0; margin-bottom: clamp(1.25rem, 0.9615rem + 1.2821vw, 2.5rem); height: auto; } .mt-addon-video-secuence .secuence-content .secuence-item.secuence-item--first { position: sticky; top: 30px; height: 100vh !important; padding: 20px 0 !important; max-width: 100%; z-index: 5; } .mt-addon-video-secuence .secuence-content .secuence-item.secuence-item--first a:last-child { margin-right: 0px !important; } .mt-addon-video-secuence .secuence-content .secuence-item.secuence-item--first a.secuence-common-button { font-family: var(--mt-e-title-font); font-size: clamp(0.6875rem, 0.5577rem + 0.5769vw, 1.25rem); color: #fff; font-weight: 600; text-decoration: none; margin-right: 20px; overflow: hidden; display: inline-block; padding: clamp(0.5rem, 0.4423rem + 0.2564vw, 0.75rem) clamp(1.125rem, 1.0096rem + 0.5128vw, 1.625rem) clamp(0.5rem, 0.4423rem + 0.2564vw, 0.75rem) clamp(1.25rem, 0.9615rem + 1.2821vw, 2.5rem); border: 2px solid currentColor; border-radius: 30px; position: relative; transition: var(--mt-e-transition); margin-bottom: 0px; } .mt-addon-video-secuence .secuence-content .secuence-item:nth-child(even) .secuence-item-inner a.secuence-button:hover, .mt-addon-video-secuence .secuence-content .secuence-item:nth-child(even) .secuence-item-inner a.secuence-button:focus, .mt-addon-video-secuence .secuence-content .secuence-item.secuence-item--first a.secuence-common-button span:nth-child(odd) { color: #00D4FF; } .mt-addon-video-secuence .secuence-content .secuence-item:nth-child(odd) .secuence-item-inner a.secuence-button:hover, .mt-addon-video-secuence .secuence-content .secuence-item:nth-child(odd) .secuence-item-inner a.secuence-button:focus, .mt-addon-video-secuence .secuence-content .secuence-item.secuence-item--first a.secuence-common-button span:nth-child(even) { color: #9AFF00; } .mt-addon-video-secuence .secuence-content .secuence-item.secuence-item--first a.secuence-common-button:nth-child(odd):hover { border-color: #00D4FF; color: #000; } .mt-addon-video-secuence .secuence-content .secuence-item.secuence-item--first a.secuence-common-button:nth-child(even):hover { border-color: #9AFF00; color: #000; } .mt-addon-video-secuence .secuence-content .secuence-item.secuence-item--first a.secuence-common-button span:nth-child(odd):before { content: "\f1b3"; } .mt-addon-video-secuence .secuence-content .secuence-item.secuence-item--first a.secuence-common-button span:nth-child(even):before { content: "\f091"; } .mt-addon-video-secuence .secuence-content .secuence-item.secuence-item--first a.secuence-common-button span:before { font-family: 'Font Awesome 5 Free'; font-weight: 900; margin-right: 8px; font-size: 1.2em; display: inline-block; } .mt-addon-video-secuence .secuence-content .secuence-item.secuence-item--first a.secuence-common-button span:not(:last-child)::after { content: 'vs'; position: relative; display: inline-block; margin-left: clamp(0.75rem, 0.6346rem + 0.5128vw, 1.25rem); margin-right: clamp(0.75rem, 0.6346rem + 0.5128vw, 1.25rem); color: #fff; font-weight: normal; } /* .mt-addon-video-secuence .secuence-content .secuence-item.secuence-item--first a.secuence-common-button:after { content: ''; position: absolute; top: 50%; left: 50%; width: 0; height: 0; border-radius: 50%; transform: translate(-50%, -50%); transition: width 0.6s ease, height 0.6s ease; z-index: -1; } .mt-addon-video-secuence .secuence-content .secuence-item.secuence-item--first a.secuence-common-button:hover:after { width: 500px; height: 500px; } */ /* .mt-addon-video-secuence .secuence-content .secuence-item.secuence-item--first a.secuence-common-button:nth-child(odd):after { background: #00D4FF; } .mt-addon-video-secuence .secuence-content .secuence-item.secuence-item--first a.secuence-common-button:nth-child(even):after { background: #9AFF00; } */ .mt-addon-video-secuence .secuence-content .secuence-item .secuence-item-inner { z-index: 5; } .mt-addon-video-secuence .secuence-content .secuence-item .secuence-item-inner .secuence-title { font-family: var(--mt-e-title-font); font-size: clamp(1.375rem, 1.1731rem + 0.8974vw, 2.25rem); font-weight: 600; margin-bottom: 15px; margin-top: 0; background-clip: text; background-image: linear-gradient(45deg, #02def8 20%, #2f82cb 100%); display: inline-block; -webkit-text-fill-color: transparent; } .mt-addon-video-secuence .secuence-content .secuence-item:nth-child(odd) .secuence-item-inner .secuence-title { background-image: linear-gradient(45deg, #9AFF00 20%, #6bbf1a 100%); } .mt-addon-video-secuence .secuence-content .secuence-item .secuence-item-inner .secuence-description { font-family: var(--mt-e-title-font); font-size: clamp(0.875rem, 0.7885rem + 0.3846vw, 1.25rem); font-weight: 400; margin-bottom: 20px; margin-top: 0; color: #FFF; position: relative; } .mt-addon-video-secuence .secuence-content .secuence-item .secuence-item-inner .secuence-description:after { content: ""; position: absolute; bottom: -10px; left: 0; width: 50px; height: 2px; background: #ffffff; opacity: 0.4; } .mt-addon-video-secuence .secuence-content .secuence-item .secuence-item-inner .secuence-quotes { padding: 20px 0; margin-left: -10px; margin-right: -10px; list-style-type: none; } .mt-addon-video-secuence .secuence-content .secuence-item .secuence-item-inner .secuence-quotes > li { font-family: var(--mt-e-title-font); font-size: clamp(0.875rem, 0.7885rem + 0.3846vw, 1.25rem); line-height: 1.6; font-weight: 300; position: relative; padding-left: 10px; padding-right: 10px; opacity: 0; transform: scale(0) translateY(20px); transition: .1s ease; transform-origin: center left; } .mt-addon-video-secuence .secuence-content .secuence-item .secuence-item-inner .secuence-quotes > li:before { content: ""; display: inline-block; position: absolute; left: 0px; top: 1.4em; background-color: currentColor; font-size: 7px; width: 1em; height: 1em; transform: translateX(calc(-1 * clamp(0.375rem, 0.1731rem + 0.8974vw, 1.25rem))); border-radius: 50%; } .mt-addon-video-secuence .secuence-content .secuence-item:nth-child(odd) .secuence-item-inner .secuence-quotes > li:before { transform: translateX(clamp(0.375rem, 0.1731rem + 0.8974vw, 1.25rem)); left: auto; right: 0px; } .mt-addon-video-secuence .secuence-content .secuence-item .secuence-item-inner .secuence-quotes > li:not(:last-child) { margin-bottom: 14px; } .mt-addon-video-secuence .secuence-content .secuence-item .secuence-item-inner > .secuence-title, .mt-addon-video-secuence .secuence-content .secuence-item .secuence-item-inner > .secuence-description { opacity: 0; transform: scale(0) translateY(20px); transition: .1s ease; transform-origin: center left; } .mt-addon-video-secuence .secuence-content .secuence-item .secuence-item-inner > .secuence-title.is-active, .mt-addon-video-secuence .secuence-content .secuence-item .secuence-item-inner > .secuence-description.is-active, .mt-addon-video-secuence .secuence-content .secuence-item .secuence-item-inner .secuence-quotes > li.is-active { opacity: 1; transform: scale(1) translateY(0px); transition: var(--mt-e-transition); } .mt-addon-video-secuence .secuence-content .secuence-item:nth-child(odd), .mt-addon-video-secuence .secuence-content .secuence-item:nth-child(odd) .secuence-item-inner > .secuence-title, .mt-addon-video-secuence .secuence-content .secuence-item:nth-child(odd) .secuence-item-inner > .secuence-description, .mt-addon-video-secuence .secuence-content .secuence-item:nth-child(odd) .secuence-item-inner .secuence-quotes > li { transform-origin: center right; text-align: right; } .mt-addon-video-secuence .secuence-content .secuence-item.secuence-item--first, .mt-addon-video-secuence .secuence-content .secuence-item.secuence-item--first a.secuence-common-button { transform-origin: top left; text-align: start; } .mt-addon-video-secuence .secuence-content .secuence-item .secuence-quotes + .secuence-button { margin-top: clamp(0.75rem, 0.6346rem + 0.5128vw, 1.25rem); border-radius: 50px; font-family: var(--mt-e-title-font); font-size: clamp(0.6875rem, 0.5577rem + 0.5769vw, 1.25rem); font-weight: 600; text-decoration: none; overflow: hidden; display: inline-block; transform: scale(0); padding: clamp(0.5rem, 0.4423rem + 0.2564vw, 0.75rem) clamp(1.125rem, 1.0096rem + 0.5128vw, 1.625rem); z-index: 6; border: 2px solid currentColor; position: relative; transition: var(--mt-e-transition); margin-bottom: 0px; } .mt-addon-video-secuence .secuence-content .secuence-item .secuence-quotes:has(> li.is-active:last-child) + .secuence-button { opacity: 1; transform: scale(1); transition: var(--mt-e-transition); } .mt-addon-video-secuence .secuence-content .secuence-item.secuence-item--first, .mt-addon-video-secuence .secuence-content .secuence-item.secuence-item--first a.secuence-common-button { opacity: 1; transform: scale(1); transition: var(--mt-e-transition); } .mt-addon-video-secuence .secuence-content .secuence-item.secuence-item--first.is-active, .mt-addon-video-secuence .secuence-content .secuence-item.secuence-item--first a.secuence-common-button.is-active { opacity: 0; transform: scale(0); } .mt-addon-video-secuence .secuence-content .secuence-item:nth-child(odd) .secuence-item-inner .secuence-description:after { left: auto; right: 0; } .mt-addon-video-secuence .secuence-content .secuence-item.secuence-item--final { max-width: 100%; margin-left: auto; margin-right: 0; height: 50vh !important; padding: 0px; align-content: end; } .mt-addon-video-secuence .secuence-content .secuence-common-title.last { height: fit-content; padding: 0; margin: 0; text-align: right; font-size: clamp(1.875rem, 1.3558rem + 2.3077vw, 4.125rem); text-transform: uppercase; text-wrap: balance; position: static; } .mt-addon-video-secuence .secuence-content .secuence-item.secuence-item--final .secuence-item-inner { position: static; height: auto; padding: 30px 0; display: flex; flex-wrap: wrap; flex-direction: row; align-items: flex-end; gap: clamp(0.9375rem, 0.4327rem + 2.2436vw, 3.125rem); justify-content: flex-end; } .secuence-content-item-1 .secuence-sub-title { font-family: var(--mt-e-title-font); font-size: clamp(1.25rem, 1.0481rem + 0.8974vw, 2.125rem); font-weight: 600; margin-bottom: 10px; margin-top: 0; background-clip: text; background-image: linear-gradient(45deg, #00D4FF 20%, #2f82cb 100%); display: inline-block; -webkit-text-fill-color: transparent; } .secuence-content-item-2 .secuence-sub-title { font-family: var(--mt-e-title-font); font-size: clamp(1.25rem, 1.0481rem + 0.8974vw, 2.125rem); font-weight: 600; margin-bottom: 10px; margin-top: 0; background-clip: text; background-image: linear-gradient(45deg, #9AFF00 20%, #6bbf1a 100%); display: inline-block; -webkit-text-fill-color: transparent; } .secuence-content-item-1, .secuence-content-item-2 { display: flex; flex-direction: column; gap: clamp(0.4375rem, 0.3365rem + 0.4487vw, 0.875rem); } .mt-addon-video-secuence .secuence-content .secuence-item .secuence-button { width: fit-content; padding: clamp(0.5rem, 0.3558rem + 0.641vw, 1.125rem) clamp(1.25rem, 0.8173rem + 1.9231vw, 3.125rem); border: 1px solid currentColor; color: #fff; border-radius: 20px; box-sizing: content-box; display: inline-block; } .secuence-item .secuence-button { display: flex; align-items: center; justify-content: center; gap: 10px; border-radius: 50px; border: 2px solid; background: transparent; font-family: var(--mt-e-title-font); font-size: clamp(0.6875rem, 0.5865rem + 0.4487vw, 1.125rem); font-weight: 700; text-transform: capitalize; letter-spacing: normal; cursor: pointer; transition: var(--mt-e-transition); position: relative; overflow: hidden; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); } .secuence-item .secuence-button::before { content: ''; position: absolute; top: 50%; left: 50%; width: 0; height: 0; border-radius: 50%; transform: translate(-50%, -50%); transition: width 0.6s ease, height 0.6s ease; z-index: -1; } .secuence-item .secuence-button:hover::before { width: 500px; height: 500px; } .mt-addon-video-secuence .secuence-content .secuence-item--final .secuence-content-item-1 .secuence-button:hover, .mt-addon-video-secuence .secuence-content .secuence-item--final .secuence-content-item-1 .secuence-button:focus { color: #00D4FF; } .mt-addon-video-secuence .secuence-content .secuence-item--final .secuence-content-item-2 .secuence-button:hover, .mt-addon-video-secuence .secuence-content .secuence-item--final .secuence-content-item-2 .secuence-button:focus { color: #9AFF00; } .secuence-item-inner div[class*="secuence-content-item-"] .secuence-sub-title { display: flex; align-items: baseline; gap: clamp(0.625rem, 0.5385rem + 0.3846vw, 1rem); } @media only screen and (max-width: 767px) { .mt-addon-video-secuence .secuence-content .secuence-item:nth-child(even) { max-width: clamp(21.875rem, 19.7115rem + 9.6154vw, 31.25rem); margin-right: auto; } .mt-addon-video-secuence .secuence-content .secuence-item:nth-child(odd) { max-width: clamp(21.875rem, 19.7115rem + 9.6154vw, 31.25rem); margin-left: auto; } .mt-addon-video-secuence .secuence-content .secuence-item.secuence-item--first, .mt-addon-video-secuence .secuence-content .secuence-item.secuence-item--final { max-width: 100%; } } #mt-secuence-video video { width: 100%; height: 100%; object-fit: cover; } .mt-scrolly-video canvas { z-index: 1; } .mt-scrolly-video video { width: 100%; height: 100vh; object-fit: cover; object-position: center center; opacity: 1 !important; top: 0; left: 0 !important; } /* custom css */ @media only screen and (min-width: 768px) { .mt-sticky-heading { position: sticky; top: 0; } .mt-sticky-heading .elementor-heading-title { opacity: 0; transform: translatey(-30px); transition: var(--mt-e-transition); } .mt-sticky-heading.is-active .elementor-heading-title { opacity: 1; transform: translatey(0); } }