/* ------------------------------------------------------------- * * General /* ------------------------------------------------------------- */ * { box-sizing: border-box; } html, body { padding: 0; margin: 0; } body { position: relative; line-height: 1.7; font-size: 19px; font-weight: normal; -webkit-font-smoothing: antialiased; color: #FFF; overflow-x: hidden; } p { margin: 0 0 30px; } a { color: currentColor; text-decoration: none; outline: none } a:hover, a:focus { color: currentColor; } p a { color: currentColor; opacity: .7; font-style: italic; border-bottom: 1px solid; } p a:hover, p a:focus { color: currentColor; opacity: .6; } img { max-width: 100%; height: auto; } b, strong { font-weight: bold; font-weight: 700; } section { position: relative; } button {} button:focus { outline: none; } .small, small { font-size: 80%; } hr { width: 100%; height: 0; border: none; border-bottom: 1px solid rgb(144 144 144 / 30%); } .anim-image-parallax { transform: scale(1.2); transform-origin: 50% 100%; } /* Selection */ ::selection { color: #fff; text-shadow: none; background: #4c2122; } ::-moz-selection { color: #fff; text-shadow: none; background: #4c2122; /* Firefox */ } ::-webkit-selection { color: #fff; text-shadow: none; background: #4c2122; /* Safari */ } /* Disable scroll */ .tt-no-scroll { overflow-y: hidden !important; } /* ------------------------------------------------------------- * * Fonts /* ------------------------------------------------------------- */ /* Body font ============= */ body { font-family: 'SF Pro Display', sans-serif; } /* ------------------------------------------------------------- * * Page transitions /* ------------------------------------------------------------- */ #page-transition { display: none; } body.tt-transition #page-transition { position: relative; display: block; z-index: 99999; } /* Transition overlay */ body.tt-transition .ptr-overlay { position: fixed; display: block; top: 0; left: 0; width: 100%; height: 100vh; background-color: #111; z-index: 1; } /* Transition preloader */ body.tt-transition .ptr-preloader { position: fixed; top: 50%; left: 50%; z-index: 2; transform: translate(-50%, -50%); } body.tt-transition .ptr-prel-content { margin-top: 10px; text-align: center; text-transform: uppercase; font-size: 15px; font-weight: bold; color: #af1212; } .ptr-prel-image { max-height: 96px; /* You may need to change the img height to match your logo type! */ opacity: .2; /* You may need to change the opacity as well! */ } /* ----------------------------------------------------------------------------------------- * * Page boxed layout * Note: Class "boxed" in tag is connected with class "tt-wrap" in several places! /* ----------------------------------------------------------------------------------------- */ body.tt-boxed .tt-wrap { max-width: 1282px; margin-left: auto; margin-right: auto; padding-left: 15px; padding-right: 15px; } body.tt-boxed .tt-wrap .tt-wrap { max-width: 100%; padding-left: 0; padding-right: 0; } /* ------------------------------------------------------------- * * Body inner /* ------------------------------------------------------------- */ #body-inner { position: relative; overflow: hidden; height: 100%; min-height: 100vh; } /* ------------------------------------------------------------- * * Content wrap /* ------------------------------------------------------------- */ #content-wrap { position: relative; overflow: hidden; } /* ------------------------------------------------------------- * * Custom scrollbar style /* ------------------------------------------------------------- */ .tt-custom-scrollbar { overflow-y: auto; } /* Works on Firefox */ .tt-custom-scrollbar, .tt-sliding-sidebar-inner, .tt-sidebar { scrollbar-width: thin; scrollbar-color: #555 #2a2a2a; } select { scrollbar-width: thin; scrollbar-color: #666 #2a2a2a; } /* Works on Chrome, Edge, and Safari */ .tt-custom-scrollbar::-webkit-scrollbar, .tt-sliding-sidebar-inner::-webkit-scrollbar, .tt-sidebar::-webkit-scrollbar { width: 8px; height: 8px; } select::-webkit-scrollbar { width: 10px; } .tt-custom-scrollbar::-webkit-scrollbar-track, .tt-sliding-sidebar-inner::-webkit-scrollbar-track, .tt-sidebar::-webkit-scrollbar-track, select::-webkit-scrollbar-track { background: #2a2a2a; } .tt-custom-scrollbar::-webkit-scrollbar-thumb, .tt-sliding-sidebar-inner::-webkit-scrollbar-thumb, .tt-sidebar::-webkit-scrollbar-thumb { background-color: #555; border-radius: 50px; } select::-webkit-scrollbar-thumb { background-color: #666; border-radius: 50px; } /* ------------------------------------------------------------- * * Smooth Scrollbar * Source: https://github.com/idiotWu/smooth-scrollbar/ /* ------------------------------------------------------------- */ /* Hide default scrollbar */ body:not(.is-mobile).tt-smooth-scroll { overflow: hidden; } /* Scroll content (added if contain class "tt-smooth-scroll". Disabled on mobile devices!) */ body:not(.is-mobile).tt-smooth-scroll #scroll-container { width: auto; height: 100vh; overflow: auto; margin: 0; } /* Styling scrollbar */ .scrollbar-track { background: transparent !important; z-index: 99999 !important; } .scrollbar-track:hover { /*background: rgba(222, 222, 222, 0.1) !important;*/ } .scrollbar-thumb { background: #DDD !important; opacity: .25; transition: opacity 0.2s ease-in-out; } .scrollbar-track:hover .scrollbar-thumb { opacity: .5; } /* ------------------------------------------------------------- * * Headings /* ------------------------------------------------------------- */ .h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 { font-weight: bold; font-weight: 500; color: inherit; } .h1, .h2, .h3, h1, h2, h3 { line-height: 1.4; margin-top: 0px; margin-bottom: 30px; } .h4, .h5, .h6, h4, h5, h6 { line-height: 1.4; margin-top: 10px; margin-bottom: 30px; } .h1, h1 { font-size: 46px; } .h2, h2 { font-size: 42px; } .h3, h3 { font-size: 38px; } .h4, h4 { font-size: 34px; } .h5, h5 { font-size: 30px; } .h6, h6 { font-size: 26px; } /* ------------------------------------------------------------- * * tt-Accordion /* ------------------------------------------------------------- */ .tt-accordion { position: relative; } .tt-accordion-item { position: relative; } /* Accordion heading ===================== */ .tt-accordion-heading { position: relative; padding: 20px 13% 20px 0; cursor: pointer; } .tt-accordion-item:first-child .tt-accordion-heading { padding-top: 0; } .tt-ac-head-title { margin: 0; font-size: 32px; line-height: 1.2; } @media (max-width: 991px) { .tt-ac-head-title { font-size: 28px; } } /* Accordion heading subtext */ .tt-accordion-subtext { margin-top: 10px; font-size: 19px; font-weight: normal; color: #999; } /* Accordion heading caret */ .tt-accordion-caret-wrap { position: absolute; top: 50%; right: 0; transform: translate3d(0, -50%, 0); } .tt-accordion-caret { position: relative; width: 33px; height: 33px; display: flex; align-items: center; justify-content: center; font-size: 21px; color: #FFF; cursor: pointer; z-index: 2; opacity: 1; transition: opacity 0.3s; } .tt-accordion-caret::before, .tt-accordion-caret::after { position: absolute; display: block; content: ""; background-color: #000; border:3px solid #000; } .tt-accordion-caret::before { width: 7px; height: 100%; transition: height 0.3s; } .tt-accordion-caret::after { width: 100%; height: 7px; } .tt-accordion-item.active .tt-accordion-caret::after { transform: rotate(45deg); border-color: #000; } .tt-accordion-item.active .tt-accordion-caret::before { transform: rotate(45deg); border-color: #000; } /* Accordion content ===================== */ .tt-accordion-content { padding-bottom: 40px; color: #e0e0e0; } .tt-accordion-content:not(.is-open) { display: none; } .tt-accordion-content p:last-child { margin-bottom: 0; } /* Accordion styles ==================== */ /* borders */ .tt-accordion.tt-ac-borders .tt-accordion-heading { padding-top: 30px; padding-bottom: 30px; border-top: 1px solid #000; } .tt-accordion.tt-ac-borders .tt-accordion-item:last-child { border-bottom: 1px solid #000; } /* Accordion sizes =================== */ .tt-accordion.tt-ac-sm .tt-ac-head-title { font-size: calc(24px + 0.1vw); } .tt-accordion.tt-ac-lg .tt-ac-head-title { font-size: calc(24px + 1vw); } .tt-accordion.tt-ac-xlg .tt-accordion-heading { padding-top: 45px; padding-bottom: 45px; } .tt-accordion.tt-ac-xlg .tt-ac-head-title { font-size: calc(24px + 1.5vw); } .tt-accordion.tt-ac-xxlg .tt-accordion-heading { padding-top: 60px; padding-bottom: 60px; } .tt-accordion.tt-ac-xxlg .tt-ac-head-title { font-size: calc(24px + 2vw); } /* ------------------------------------------------------------- * * Table /* ------------------------------------------------------------- */ table { width: 100%; empty-cells: show; word-wrap: break-word; margin: 0 0 30px 0; text-align: left; font-size: 16px; border-spacing: 0; border-collapse: collapse; border: none; } th { font-weight: bold; font-weight: 600; } th, td { padding: 8px 5px; font-size: 16px; vertical-align: middle; } /* tt-Table (styled table) ============ */ table.tt-table th, table.tt-table td { border: 1px solid rgb(120 120 120 / 25%); } table.tt-table tbody tr:nth-of-type(odd) { background-color: rgb(133 133 133 / 5%); } /* thead */ table.tt-table thead { background-color: rgb(133 133 133 / 15%); } table.tt-table thead th, table.tt-table thead td { padding: 16px 20px; } /* tbody */ table.tt-table tbody th, table.tt-table tbody td { padding: 12px 20px; } /* tfoot */ table.tt-table tfoot { background-color: rgb(133 133 133 / 15%); } table.tt-table tfoot th, table.tt-table tfoot td { padding: 16px 20px; } /* ------------------------------------------------------------- * * Figure /* ------------------------------------------------------------- */ figure { position: relative; margin: 0; } /* figure image */ figure img { width: 100%; height: auto; } /* figure caption */ figcaption { position: relative; max-width: 600px; padding: 15px; font-size: 14px; font-style: italic; color: #FFF; z-index: 9; opacity: .8; } @media (min-width: 1025px) { figcaption { position: absolute; right: 5%; bottom: 5%; background-color: rgba(0, 0, 0, 0.7); } } figcaption a { border-bottom: 1px dotted; } figcaption a:hover { opacity: .9; } .main-content{ z-index: 2; flex-flow: column; justify-content: flex-start; align-items: center; width: 100%; display: flex; position: relative; } .hero{ z-index: 3; flex-flow: column; justify-content: flex-start; align-items: center; width: 100%; height: 350vh; display: flex; position: relative; background: #000; } .hero .hero-outer{ width: 100%; height: 100vh; position: sticky; top: 0; overflow: hidden; } .hero .hero-inner{ width: 100%; height: 100%; position: relative; overflow: hidden; } .hero .hero-layer-1{ z-index: 2; flex-flow: column; justify-content: center; align-items: center; width: 100%; height: 100%; display: flex; position: relative; } .hero .hero-layer-2{ z-index: 1; justify-content: center; align-items: flex-end; width: 100vw; height: 100%; display: flex; position: absolute; inset: 0%; overflow: hidden; } .hero .hero-lottie { width: 100%; height: 100%; } .hero .hero-layer-1 img{ max-width: 100%; } .hero-intro { flex-flow: column; justify-content: center; align-items: center; display: flex; z-index: 1; position: absolute; } .hero-intro .hero-logo{ max-width: 200px; opacity: 0; } .hero-intro .hero-dna { max-width: 500px; opacity: 0; } .hero-text{ opacity: 0; z-index: 1; position: absolute; max-width: 1300px; margin: 0 auto; color: #6F6F6F; font-size: 120px; font-weight: 700; line-height: 130px; text-align: center; } .hero-text strong, .hero-text span{ display: inline; } .hero-text .colors, .hero-text .degrade{ display: inline-block; position: relative; } .hero-text .degrade strong:first-child{ position: absolute; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-image: linear-gradient(90deg, #EFA391 0%, #A971F5 41.63%); width: 0; z-index: 2; left: 0; display: inline; overflow: hidden; } .hero-text .colors span:first-child{ position: absolute; width: 0; z-index: 2; left: 0; display: inline-flex; color: #fff; overflow: hidden; } .section{ width: 100%; height: 100vh; background-color: #fff; } .section-second{ width: 100%; height: 100%; flex-flow: column; justify-content: center; align-items: center; display: flex; position: relative; overflow: hidden; gap: 100px; padding: 2% 0; } .section-second h2{ max-width: 1300px; margin: 0 auto; color: #000; font-size: 80px; font-style: italic; font-weight: 200; line-height: 95.47px; text-align: center; } .section-second p{ white-space: nowrap; font-size: 200px; font-weight: 900; letter-spacing: ls(120); line-height: 1em; -webkit-text-stroke-width: 1px; -webkit-text-stroke-color: black; } .section-second .scrolling-text{ display: flex; align-items: center; transform: skew(0.02turn, -4deg); } .section-third .section-third-wrapper{ max-width: 1440px; margin: 0 auto; } .section-third .section-third-wrapper .box{ height: 600px; background: #FAFAFA; border-radius: 24px; width: 100%; display: flex; align-items: center; justify-content: space-between; color: #000; font-size: 20px; padding: 45px 90px; } .section-third .section-third-wrapper .box .text{ flex-basis: 60%; } .section-third .section-third-wrapper .box strong{ display: block; font-size: 60px; font-weight: 400; line-height: 73px; text-align: left; margin-bottom: 20px; } .section-third .section-third-wrapper .box span{ display: block; font-size: 30px; font-weight: 400; line-height: 46px; text-align: left; color: #5A585A; } .section-fourth{ background: #A3F77D; z-index: 3; position: relative; width: 100%; height: 100%; color:#000; overflow: hidden; } .section-fourth .section-fourth-wrapper{ max-width: 1440px; height: 100%; margin: 0 auto; justify-content: space-between; align-items: center; display: flex; padding: 2%; } .section-fourth .text{ flex-basis: 50%; z-index: 2; position: relative; } .section-fourth .text h3{ font-size: 50px; font-style: italic; font-weight: 300; line-height: 75px; text-align: left; } .section-fourth .text p{ font-size: 50px; font-style: italic; font-weight: 200; line-height: 75px; text-align: left; } .section-fourth .accordion{ flex-basis: 40%; } .section-fourth .accordion p{ font-size: 24px; font-weight: 400; line-height: 32px; text-align: left; color: #5A585A; } .section-fourth .bg{ width: 596px; height: 596px; background-image: url(../img/Ellipse.png); background-repeat: no-repeat; background-size: cover; position: absolute; bottom: 0; left: 0; z-index: 1; transform: translate(-50%, 50%); transform-origin: bottom; } .section-fifth{ background: #B09EF8; position: relative; width: 100%; height: 100%; overflow: hidden; } .section-fifth-wrapper{ height: 100%; max-width: 1300px; margin: 0 auto; display: flex; align-items: center; justify-content: center; color:#fff; font-size: 80px; font-weight: 700; line-height: 95px; text-align: center; } .section-fifth-wrapper .text{ position: relative; z-index: 2; } .section-fifth-animation{ position: absolute; top: 0; left: 0; z-index: 1; width: 130%; height: 100%; opacity: .4; } .section-fifth .fifth-lottie{ height: 100%; } .section-sixty{ position: relative; width: 100%; overflow: hidden; z-index: 1; background: #fff; padding: 2% 0; } .section-sixty .text{ max-width: 1200px; margin: 0 auto; font-size: 60px; font-style: italic; font-weight: 200; line-height: 90px; text-align: center; color:#000; padding: 5% 0 3% 0; } .section-sixty .section-sixty-wrapper{ display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; flex-direction: column; } .section-sixty .boxes-inner{ display: flex; justify-content: space-between; width: 100%; gap: 50px; padding: 0 5%; } .section-sixty .box-wrap{ min-height: 655px; flex-basis: 33.3%; } .section-sixty .box-wrap:first-child .box{ background: #BAD7F9; transform: translateY(100px); } .section-sixty .box-wrap:last-child .box{ background: #FCEA59; transform: translateY(-50px); } .section-sixty .box-wrap strong{ color: #000; font-size: 35px; font-style: italic; font-weight: 300; line-height: 50px; text-align: center; } .section-sixty .box-wrap strong span{ font-weight: bold; } .section-sixty .box-wrap .box{ height: 100%; display: flex; flex-direction: column; justify-content: space-between; background: #FFCFE2; border-radius: 24px; padding: 90px 50px 60px 50px; transform: translateY(300px); position: relative; } .section-sixty .box-wrap .box .flag{ padding: 10px 20px; border-radius: 10px; background: #BAD7F9; display: inline-block; position: absolute; top: 8px; left: -27px; transform: rotate(-14deg); font-size: 30px; font-style: italic; font-weight: 200; line-height: 36px; text-align: center; color: #000; } .section-sixty .box-wrap:first-child .box .flag{ background: #FC7CAF; color: #fff; } .section-sixty .box-wrap:last-child .box .flag{ background: #000; color: #fff; } .section-sixty .box-wrap .box .flag b{ font-weight: 600; } .section-seventy{ background: #000 url(../img/katman_1.png) no-repeat top center; background-size: cover; position: relative; width: 100%; height: 100%; overflow: hidden; padding: 2%; } .section-seventy-wrapper{ display: flex; align-items: center; justify-content: center; height: 100%; font-size: 80px; font-style: italic; font-weight: 200; line-height: 100px; text-align: center; } .section-seventy strong{ -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; text-fill-color: transparent; background-size: 200% auto; animation: textShine 1s ease-in-out infinite alternate; padding: 0 5px; } .section-seventy strong.deg1{ background-image: linear-gradient(90deg, #C8E987 36.39%, #D6AA76 63%); } .section-seventy strong.deg2{ background-image: linear-gradient(90deg, #D6A976 7.91%, #E36864 44.04%); position: relative; z-index: 3; } .section-seventy strong.deg3{ background-image: linear-gradient(90deg, #E48D96 0%, #655CDD 100%); } .rocket-wrapper{ position: relative; display: inline-block; width: 80px; } .section-seventy .trail-wrapper { position: absolute; transform: none; transform-origin: top center; z-index: 0; bottom: 0; left: 0; } .section-seventy .trail { width: 27px; height: auto; transform: translateZ(0); animation: jet 0.02s ease alternate infinite; transform-origin: top center; } .section-seventy .rocket { z-index: 1; position: relative; display: inline-block; } .section-eighty{ background: #FC957E; position: relative; width: 100%; height: 100%; overflow: hidden; padding: 2%; } .section-eighty-wrapper{ display: flex; height: 100%; align-items: center; justify-content: center; flex-direction: column; } .section-eighty a { display: inline-block; color: #FC957E; font-size: 40px; font-weight: 700; line-height: 55px; padding: 12px 38px; border-radius: 80px; background: #000; margin-top: 100px; } .section-eighty .cursor { width: 103px; height: 122px; position: absolute; top: 0; left: 0; pointer-events: none; background: url(../img/cursor.svg) no-repeat top left; background-size: contain; } @keyframes textShine { 0% { background-position: 0% 50%; } 100% { background-position: 100% 50%; } } @keyframes jet { 0% { transform: scale(0.9); } 100% { transform: scale(1.2); } } @media (max-width: 768px) { .hero-intro{ max-width: 60%; } .hero-text{ font-size: 50px; line-height: normal; } .section-second h2{ font-size: 40px; line-height: normal; } .section-second p{ font-size: 80px; letter-spacing: ls(60); line-height: 1em; } .section-third .section-third-wrapper .box{ flex-direction: column-reverse; padding: 25px; } .section-third .section-third-wrapper .box strong{ font-size: 40px; line-height: normal; margin-bottom: 10px; } .section-third .section-third-wrapper .box span{ font-size: 25px; line-height: 40px; } .section-fourth { height: auto; } .section-fourth .section-fourth-wrapper{ flex-direction: column; padding: 5%; } .section-fourth .accordion{ flex-basis: 100%; z-index: 2; width: 100%; } .section-fourth .text h3{ font-size: 30px; line-height: normal; margin-bottom: 10px; } .section-fourth .text p{ font-size: 30px; line-height: normal; } .section-fifth { height: auto; } .section-fifth .section-fifth-wrapper{ font-size: 40px; line-height: normal; padding: 5% 3%; } .section-sixty .text{ font-size: 30px; line-height: normal; } .section-sixty .boxes-row .boxes-inner{ flex-direction: column; } .section-sixty .box-wrap{ min-height: auto; } .section-seventy .section-seventy-wrapper{ font-size: 40px; line-height: normal; } .rocket-wrapper{ width: 40px; } .section-eighty a{ margin-top: 50px; } .section-eighty .cursor { display: none; } } @media only screen and (min-device-width: 769px) and (max-device-width: 1024px) { .hero-intro{ max-width: 60%; } .hero-text{ font-size: 60px; line-height: normal; } .section-second h2{ font-size: 50px; line-height: normal; } .section-second p{ font-size: 80px; letter-spacing: ls(60); line-height: 1em; } .section-third .section-third-wrapper .box{ padding: 25px; } .section-third .section-third-wrapper .box strong{ } .section-third .section-third-wrapper .box span{ } .section-fourth { height: auto; } .section-fourth .section-fourth-wrapper{ flex-direction: column; padding: 5%; } .section-fourth .accordion{ flex-basis: 100%; z-index: 2; width: 100%; } .section-fifth .section-fifth-wrapper{ font-size: 50px; line-height: 60px; padding: 5% 3%; } .section-sixty .text{ font-size: 50px; line-height: 60px; } .section-sixty .boxes-row .boxes-inner{ flex-direction: column; } .section-sixty .box-wrap{ min-height: auto; } .section-seventy .section-seventy-wrapper{ font-size: 60px; line-height: 80px; } .rocket-wrapper{ width: 60px; } .section-eighty a{ margin-top: 50px; } .section-eighty .cursor { display: none; } }