@charset "UTF-8"; html { font-size: 16px} body { font-family: "Funnel Display", sans-serif; font-size: 16px; line-height: 1.2; font-weight: 400; background: #161616; color: #fff; -moz-osx-font-smoothing: grayscale; word-break: break-word; -webkit-font-smoothing: antialiased; overflow-x: hidden !important} body.modern-agency .section-padding { padding: 80px 40px} body.home-main, body.design-studio { font-family: "Mona Sans", sans-serif} body.home-personal .container { max-width: 1320px} body .sub-bg { background: #1C1C1C} body .sub-bg2 { background: #3d3d3d} body .blur-bg { background: rgba(45, 45, 45, 0.1); backdrop-filter: blur(10px)} body .lines { position: fixed; top: 0; height: 100%; width: 90%; left: 5%; border-right: 1px solid rgba(255, 255, 255, 0.1); border-left: 1px solid rgba(255, 255, 255, 0.1); opacity: 0.3} body .lines:after, body .lines:before { content: ""; position: absolute; top: 0; left: 20%; width: 20%; height: 100%; border-right: 1px solid rgba(255, 255, 255, 0.1); border-left: 1px solid rgba(255, 255, 255, 0.1); z-index: -1; pointer-events: none} body .lines:before { left: auto; right: 20%} body .blur-div { backdrop-filter: blur(10px); bottom: 0; flex: none; height: 100px; left: 0; mask: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 100%) add; overflow: visible; position: fixed; right: 0; pointer-events: none; z-index: 999} .mozilla-font { font-family: "Mozilla Text", sans-serif} .handjet-font { font-family: "Handjet", sans-serif} .bg-light { background: #fff !important; color: #1f1f1f} .bg-light p { color: #4e4b4b} .bg-light .butn-more .arrow-icon { background: #ccc} .bg-dark { background: #0a0a0a !important} .main-color { color: #DDF160 !important} .main-colorbg { background-color: #DDF160 !important} .main-color2 { color: #9F8BE7 !important} .main-colorbg2 { background-color: #9F8BE7 !important} section { padding-top: 40px; padding-bottom: 160px} section.half-section { padding-top: 20px; padding-bottom: 20px} section.big-section { padding-top: 40px; padding-bottom: 40px} section.extra-big-section { padding-top: 60px; padding-bottom: 60px} img { max-width: 100%; height: auto} ul li { list-style: none} ul.rest { margin: 0; padding: 0} video { background-size: cover; display: table-cell; vertical-align: middle; width: 100%} video.bgvid { height: 100%; object-fit: cover; object-position: center} .accordion, .accordion-item { color: inherit !important} :focus-visible { outline: none} .form-control.is-invalid, .was-validated .form-control:invalid { border-color: #dc3545 !important} .g-recaptcha.is-invalid iframe { border: 1px solid #dc3545 !important} @media (min-width: 1400px) { .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl { max-width: 1200px} } .social-icon-circle a:hover { background: #fff; color: #171717} .plink { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 5} .shape-top-left { position: absolute; top: 150px; left: -100px; z-index: -1} .shape-top-right { position: absolute; top: 150px; right: -100px; z-index: -1} .shape-bottom-left { position: absolute; bottom: 100px; left: -100px; z-index: -1} .shape-bottom-right { position: absolute; bottom: 100px; right: -100px; z-index: -1} .shape-top-center { position: absolute; top: -100px; left: 50%; transform: translateX(-50%); z-index: -1} .shape-bottom-center { position: absolute; bottom: -100px; left: 50%; transform: translateX(-50%); z-index: -1} .shape-center { position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); z-index: -1} @media (hover: none) and (pointer: coarse) { * { cursor: none !important; -webkit-tap-highlight-color: transparent !important; tap-highlight-color: transparent !important} a, button, input, select, textarea, [role=button], [onclick] { -webkit-tap-highlight-color: transparent !important; tap-highlight-color: transparent !important} } .p-5px { padding: 5px !important} .p-10px { padding: 10px !important} .p-15px { padding: 15px !important} .p-20px { padding: 20px !important} .p-25px { padding: 25px !important} .p-30px { padding: 30px !important} .p-35px { padding: 35px !important} .p-40px { padding: 40px !important} .p-45px { padding: 45px !important} .p-50px { padding: 50px !important} .p-55px { padding: 55px !important} .p-60px { padding: 60px !important} .p-65px { padding: 65px !important} .p-70px { padding: 70px !important} .p-75px { padding: 75px !important} .p-80px { padding: 80px !important} .p-1 { padding: 1% !important} .p-2 { padding: 2% !important} .p-3 { padding: 3% !important} .p-4 { padding: 4% !important} .p-5 { padding: 5% !important} .p-6 { padding: 6% !important} .p-7 { padding: 7% !important} .p-8 { padding: 8% !important} .p-9 { padding: 9% !important} .p-10 { padding: 10% !important} .p-11 { padding: 11% !important} .p-12 { padding: 12% !important} .p-13 { padding: 13% !important} .p-14 { padding: 14% !important} .p-15 { padding: 15% !important} .p-16 { padding: 16% !important} .p-17 { padding: 17% !important} .p-18 { padding: 18% !important} .p-19 { padding: 19% !important} .p-20 { padding: 20% !important} .p-21 { padding: 21% !important} .p-22 { padding: 22% !important} .p-23 { padding: 23% !important} .p-24 { padding: 24% !important} .p-25 { padding: 25% !important} .p-26 { padding: 26% !important} .p-27 { padding: 27% !important} .p-28 { padding: 28% !important} .p-29 { padding: 29% !important} .p-30 { padding: 30% !important} .pt-5px { padding-top: 5px !important} .pt-10px { padding-top: 10px !important} .pt-15px { padding-top: 15px !important} .pt-20px { padding-top: 20px !important} .pt-25px { padding-top: 25px !important} .pt-30px { padding-top: 30px !important} .pt-35px { padding-top: 35px !important} .pt-40px { padding-top: 40px !important} .pt-45px { padding-top: 45px !important} .pt-50px { padding-top: 50px !important} .pt-55px { padding-top: 55px !important} .pt-60px { padding-top: 60px !important} .pt-65px { padding-top: 65px !important} .pt-70px { padding-top: 70px !important} .pt-75px { padding-top: 75px !important} .pt-80px { padding-top: 80px !important} .pt-1 { padding-top: 1% !important} .pt-2 { padding-top: 2% !important} .pt-3 { padding-top: 3% !important} .pt-4 { padding-top: 4% !important} .pt-5 { padding-top: 5% !important} .pt-6 { padding-top: 6% !important} .pt-7 { padding-top: 7% !important} .pt-8 { padding-top: 8% !important} .pt-9 { padding-top: 9% !important} .pt-10 { padding-top: 10% !important} .pt-11 { padding-top: 11% !important} .pt-12 { padding-top: 12% !important} .pt-13 { padding-top: 13% !important} .pt-14 { padding-top: 14% !important} .pt-15 { padding-top: 15% !important} .pt-16 { padding-top: 16% !important} .pt-17 { padding-top: 17% !important} .pt-18 { padding-top: 18% !important} .pt-19 { padding-top: 19% !important} .pt-20 { padding-top: 20% !important} .pt-21 { padding-top: 21% !important} .pt-22 { padding-top: 22% !important} .pt-23 { padding-top: 23% !important} .pt-24 { padding-top: 24% !important} .pt-25 { padding-top: 25% !important} .pt-26 { padding-top: 26% !important} .pt-27 { padding-top: 27% !important} .pt-28 { padding-top: 28% !important} .pt-29 { padding-top: 29% !important} .pt-30 { padding-top: 30% !important} .pr-5px { padding-right: 5px !important} .pr-10px { padding-right: 10px !important} .pr-15px { padding-right: 15px !important} .pr-20px { padding-right: 20px !important} .pr-25px { padding-right: 25px !important} .pr-30px { padding-right: 30px !important} .pr-35px { padding-right: 35px !important} .pr-40px { padding-right: 40px !important} .pr-45px { padding-right: 45px !important} .pr-50px { padding-right: 50px !important} .pr-55px { padding-right: 55px !important} .pr-60px { padding-right: 60px !important} .pr-65px { padding-right: 65px !important} .pr-70px { padding-right: 70px !important} .pr-75px { padding-right: 75px !important} .pr-80px { padding-right: 80px !important} .pr-1 { padding-right: 1% !important} .pr-2 { padding-right: 2% !important} .pr-3 { padding-right: 3% !important} .pr-4 { padding-right: 4% !important} .pr-5 { padding-right: 5% !important} .pr-6 { padding-right: 6% !important} .pr-7 { padding-right: 7% !important} .pr-8 { padding-right: 8% !important} .pr-9 { padding-right: 9% !important} .pr-10 { padding-right: 10% !important} .pr-11 { padding-right: 11% !important} .pr-12 { padding-right: 12% !important} .pr-13 { padding-right: 13% !important} .pr-14 { padding-right: 14% !important} .pr-15 { padding-right: 15% !important} .pr-16 { padding-right: 16% !important} .pr-17 { padding-right: 17% !important} .pr-18 { padding-right: 18% !important} .pr-19 { padding-right: 19% !important} .pr-20 { padding-right: 20% !important} .pr-21 { padding-right: 21% !important} .pr-22 { padding-right: 22% !important} .pr-23 { padding-right: 23% !important} .pr-24 { padding-right: 24% !important} .pr-25 { padding-right: 25% !important} .pr-26 { padding-right: 26% !important} .pr-27 { padding-right: 27% !important} .pr-28 { padding-right: 28% !important} .pr-29 { padding-right: 29% !important} .pr-30 { padding-right: 30% !important} .pb-5px { padding-bottom: 5px !important} .pb-10px { padding-bottom: 10px !important} .pb-15px { padding-bottom: 15px !important} .pb-20px { padding-bottom: 20px !important} .pb-25px { padding-bottom: 25px !important} .pb-30px { padding-bottom: 30px !important} .pb-35px { padding-bottom: 35px !important} .pb-40px { padding-bottom: 40px !important} .pb-45px { padding-bottom: 45px !important} .pb-50px { padding-bottom: 50px !important} .pb-55px { padding-bottom: 55px !important} .pb-60px { padding-bottom: 60px !important} .pb-65px { padding-bottom: 65px !important} .pb-70px { padding-bottom: 70px !important} .pb-75px { padding-bottom: 75px !important} .pb-80px { padding-bottom: 80px !important} .pb-1 { padding-bottom: 1% !important} .pb-2 { padding-bottom: 2% !important} .pb-3 { padding-bottom: 3% !important} .pb-4 { padding-bottom: 4% !important} .pb-5 { padding-bottom: 5% !important} .pb-6 { padding-bottom: 6% !important} .pb-7 { padding-bottom: 7% !important} .pb-8 { padding-bottom: 8% !important} .pb-9 { padding-bottom: 9% !important} .pb-10 { padding-bottom: 10% !important} .pb-11 { padding-bottom: 11% !important} .pb-12 { padding-bottom: 12% !important} .pb-13 { padding-bottom: 13% !important} .pb-14 { padding-bottom: 14% !important} .pb-15 { padding-bottom: 15% !important} .pb-16 { padding-bottom: 16% !important} .pb-17 { padding-bottom: 17% !important} .pb-18 { padding-bottom: 18% !important} .pb-19 { padding-bottom: 19% !important} .pb-20 { padding-bottom: 20% !important} .pb-21 { padding-bottom: 21% !important} .pb-22 { padding-bottom: 22% !important} .pb-23 { padding-bottom: 23% !important} .pb-24 { padding-bottom: 24% !important} .pb-25 { padding-bottom: 25% !important} .pb-26 { padding-bottom: 26% !important} .pb-27 { padding-bottom: 27% !important} .pb-28 { padding-bottom: 28% !important} .pb-29 { padding-bottom: 29% !important} .pb-30 { padding-bottom: 30% !important} .pl-5px { padding-left: 5px !important} .pl-10px { padding-left: 10px !important} .pl-15px { padding-left: 15px !important} .pl-20px { padding-left: 20px !important} .pl-25px { padding-left: 25px !important} .pl-30px { padding-left: 30px !important} .pl-35px { padding-left: 35px !important} .pl-40px { padding-left: 40px !important} .pl-45px { padding-left: 45px !important} .pl-50px { padding-left: 50px !important} .pl-55px { padding-left: 55px !important} .pl-60px { padding-left: 60px !important} .pl-65px { padding-left: 65px !important} .pl-70px { padding-left: 70px !important} .pl-75px { padding-left: 75px !important} .pl-80px { padding-left: 80px !important} .pl-1 { padding-left: 1% !important} .pl-2 { padding-left: 2% !important} .pl-3 { padding-left: 3% !important} .pl-4 { padding-left: 4% !important} .pl-5 { padding-left: 5% !important} .pl-6 { padding-left: 6% !important} .pl-7 { padding-left: 7% !important} .pl-8 { padding-left: 8% !important} .pl-9 { padding-left: 9% !important} .pl-10 { padding-left: 10% !important} .pl-11 { padding-left: 11% !important} .pl-12 { padding-left: 12% !important} .pl-13 { padding-left: 13% !important} .pl-14 { padding-left: 14% !important} .pl-15 { padding-left: 15% !important} .pl-16 { padding-left: 16% !important} .pl-17 { padding-left: 17% !important} .pl-18 { padding-left: 18% !important} .pl-19 { padding-left: 19% !important} .pl-20 { padding-left: 20% !important} .pl-21 { padding-left: 21% !important} .pl-22 { padding-left: 22% !important} .pl-23 { padding-left: 23% !important} .pl-24 { padding-left: 24% !important} .pl-25 { padding-left: 25% !important} .pl-26 { padding-left: 26% !important} .pl-27 { padding-left: 27% !important} .pl-28 { padding-left: 28% !important} .pl-29 { padding-left: 29% !important} .pl-30 { padding-left: 30% !important} .m-5px { margin: 5px !important} .m-10px { margin: 10px !important} .m-15px { margin: 15px !important} .m-20px { margin: 20px !important} .m-25px { margin: 25px !important} .m-30px { margin: 30px !important} .m-35px { margin: 35px !important} .m-40px { margin: 40px !important} .m-45px { margin: 45px !important} .m-50px { margin: 50px !important} .m-55px { margin: 55px !important} .m-60px { margin: 60px !important} .m-65px { margin: 65px !important} .m-70px { margin: 70px !important} .m-75px { margin: 75px !important} .m-80px { margin: 80px !important} .m-1 { margin: 1% !important} .m-2 { margin: 2% !important} .m-3 { margin: 3% !important} .m-4 { margin: 4% !important} .m-5 { margin: 5% !important} .m-6 { margin: 6% !important} .m-7 { margin: 7% !important} .m-8 { margin: 8% !important} .m-9 { margin: 9% !important} .m-10 { margin: 10% !important} .m-11 { margin: 11% !important} .m-12 { margin: 12% !important} .m-13 { margin: 13% !important} .m-14 { margin: 14% !important} .m-15 { margin: 15% !important} .m-16 { margin: 16% !important} .m-17 { margin: 17% !important} .m-18 { margin: 18% !important} .m-19 { margin: 19% !important} .m-20 { margin: 20% !important} .m-21 { margin: 21% !important} .m-22 { margin: 22% !important} .m-23 { margin: 23% !important} .m-24 { margin: 24% !important} .m-25 { margin: 25% !important} .m-26 { margin: 26% !important} .m-27 { margin: 27% !important} .m-28 { margin: 28% !important} .m-29 { margin: 29% !important} .m-30 { margin: 30% !important} .mt-5px { margin-top: 5px !important} .mt-10px { margin-top: 10px !important} .mt-15px { margin-top: 15px !important} .mt-20px { margin-top: 20px !important} .mt-25px { margin-top: 25px !important} .mt-30px { margin-top: 30px !important} .mt-35px { margin-top: 35px !important} .mt-40px { margin-top: 40px !important} .mt-45px { margin-top: 45px !important} .mt-50px { margin-top: 50px !important} .mt-55px { margin-top: 55px !important} .mt-60px { margin-top: 60px !important} .mt-65px { margin-top: 65px !important} .mt-70px { margin-top: 70px !important} .mt-75px { margin-top: 75px !important} .mt-80px { margin-top: 80px !important} .mt-1 { margin-top: 1% !important} .mt-2 { margin-top: 2% !important} .mt-3 { margin-top: 3% !important} .mt-4 { margin-top: 4% !important} .mt-5 { margin-top: 5% !important} .mt-6 { margin-top: 6% !important} .mt-7 { margin-top: 7% !important} .mt-8 { margin-top: 8% !important} .mt-9 { margin-top: 9% !important} .mt-10 { margin-top: 10% !important} .mt-11 { margin-top: 11% !important} .mt-12 { margin-top: 12% !important} .mt-13 { margin-top: 13% !important} .mt-14 { margin-top: 14% !important} .mt-15 { margin-top: 15% !important} .mt-16 { margin-top: 16% !important} .mt-17 { margin-top: 17% !important} .mt-18 { margin-top: 18% !important} .mt-19 { margin-top: 19% !important} .mt-20 { margin-top: 20% !important} .mt-21 { margin-top: 21% !important} .mt-22 { margin-top: 22% !important} .mt-23 { margin-top: 23% !important} .mt-24 { margin-top: 24% !important} .mt-25 { margin-top: 25% !important} .mt-26 { margin-top: 26% !important} .mt-27 { margin-top: 27% !important} .mt-28 { margin-top: 28% !important} .mt-29 { margin-top: 29% !important} .mt-30 { margin-top: 30% !important} .mr-5px { margin-right: 5px !important} .mr-10px { margin-right: 10px !important} .mr-15px { margin-right: 15px !important} .mr-20px { margin-right: 20px !important} .mr-25px { margin-right: 25px !important} .mr-30px { margin-right: 30px !important} .mr-35px { margin-right: 35px !important} .mr-40px { margin-right: 40px !important} .mr-45px { margin-right: 45px !important} .mr-50px { margin-right: 50px !important} .mr-55px { margin-right: 55px !important} .mr-60px { margin-right: 60px !important} .mr-65px { margin-right: 65px !important} .mr-70px { margin-right: 70px !important} .mr-75px { margin-right: 75px !important} .mr-80px { margin-right: 80px !important} .mr-1 { margin-right: 1% !important} .mr-2 { margin-right: 2% !important} .mr-3 { margin-right: 3% !important} .mr-4 { margin-right: 4% !important} .mr-5 { margin-right: 5% !important} .mr-6 { margin-right: 6% !important} .mr-7 { margin-right: 7% !important} .mr-8 { margin-right: 8% !important} .mr-9 { margin-right: 9% !important} .mr-10 { margin-right: 10% !important} .mr-11 { margin-right: 11% !important} .mr-12 { margin-right: 12% !important} .mr-13 { margin-right: 13% !important} .mr-14 { margin-right: 14% !important} .mr-15 { margin-right: 15% !important} .mr-16 { margin-right: 16% !important} .mr-17 { margin-right: 17% !important} .mr-18 { margin-right: 18% !important} .mr-19 { margin-right: 19% !important} .mr-20 { margin-right: 20% !important} .mr-21 { margin-right: 21% !important} .mr-22 { margin-right: 22% !important} .mr-23 { margin-right: 23% !important} .mr-24 { margin-right: 24% !important} .mr-25 { margin-right: 25% !important} .mr-26 { margin-right: 26% !important} .mr-27 { margin-right: 27% !important} .mr-28 { margin-right: 28% !important} .mr-29 { margin-right: 29% !important} .mr-30 { margin-right: 30% !important} .mb-5px { margin-bottom: 5px !important} .mb-10px { margin-bottom: 10px !important} .mb-15px { margin-bottom: 15px !important} .mb-20px { margin-bottom: 20px !important} .mb-25px { margin-bottom: 25px !important} .mb-30px { margin-bottom: 30px !important} .mb-35px { margin-bottom: 35px !important} .mb-40px { margin-bottom: 40px !important} .mb-45px { margin-bottom: 45px !important} .mb-50px { margin-bottom: 50px !important} .mb-55px { margin-bottom: 55px !important} .mb-60px { margin-bottom: 60px !important} .mb-65px { margin-bottom: 65px !important} .mb-70px { margin-bottom: 70px !important} .mb-75px { margin-bottom: 75px !important} .mb-80px { margin-bottom: 80px !important} .mb-1 { margin-bottom: 1% !important} .mb-2 { margin-bottom: 2% !important} .mb-3 { margin-bottom: 3% !important} .mb-4 { margin-bottom: 4% !important} .mb-5 { margin-bottom: 5% !important} .mb-6 { margin-bottom: 6% !important} .mb-7 { margin-bottom: 7% !important} .mb-8 { margin-bottom: 8% !important} .mb-9 { margin-bottom: 9% !important} .mb-10 { margin-bottom: 10% !important} .mb-11 { margin-bottom: 11% !important} .mb-12 { margin-bottom: 12% !important} .mb-13 { margin-bottom: 13% !important} .mb-14 { margin-bottom: 14% !important} .mb-15 { margin-bottom: 15% !important} .mb-16 { margin-bottom: 16% !important} .mb-17 { margin-bottom: 17% !important} .mb-18 { margin-bottom: 18% !important} .mb-19 { margin-bottom: 19% !important} .mb-20 { margin-bottom: 20% !important} .mb-21 { margin-bottom: 21% !important} .mb-22 { margin-bottom: 22% !important} .mb-23 { margin-bottom: 23% !important} .mb-24 { margin-bottom: 24% !important} .mb-25 { margin-bottom: 25% !important} .mb-26 { margin-bottom: 26% !important} .mb-27 { margin-bottom: 27% !important} .mb-28 { margin-bottom: 28% !important} .mb-29 { margin-bottom: 29% !important} .mb-30 { margin-bottom: 30% !important} .ml-5px { margin-left: 5px !important} .ml-10px { margin-left: 10px !important} .ml-15px { margin-left: 15px !important} .ml-20px { margin-left: 20px !important} .ml-25px { margin-left: 25px !important} .ml-30px { margin-left: 30px !important} .ml-35px { margin-left: 35px !important} .ml-40px { margin-left: 40px !important} .ml-45px { margin-left: 45px !important} .ml-50px { margin-left: 50px !important} .ml-55px { margin-left: 55px !important} .ml-60px { margin-left: 60px !important} .ml-65px { margin-left: 65px !important} .ml-70px { margin-left: 70px !important} .ml-75px { margin-left: 75px !important} .ml-80px { margin-left: 80px !important} .ml-1 { margin-left: 1% !important} .ml-2 { margin-left: 2% !important} .ml-3 { margin-left: 3% !important} .ml-4 { margin-left: 4% !important} .ml-5 { margin-left: 5% !important} .ml-6 { margin-left: 6% !important} .ml-7 { margin-left: 7% !important} .ml-8 { margin-left: 8% !important} .ml-9 { margin-left: 9% !important} .ml-10 { margin-left: 10% !important} .ml-11 { margin-left: 11% !important} .ml-12 { margin-left: 12% !important} .ml-13 { margin-left: 13% !important} .ml-14 { margin-left: 14% !important} .ml-15 { margin-left: 15% !important} .ml-16 { margin-left: 16% !important} .ml-17 { margin-left: 17% !important} .ml-18 { margin-left: 18% !important} .ml-19 { margin-left: 19% !important} .ml-20 { margin-left: 20% !important} .ml-21 { margin-left: 21% !important} .ml-22 { margin-left: 22% !important} .ml-23 { margin-left: 23% !important} .ml-24 { margin-left: 24% !important} .ml-25 { margin-left: 25% !important} .ml-26 { margin-left: 26% !important} .ml-27 { margin-left: 27% !important} .ml-28 { margin-left: 28% !important} .ml-29 { margin-left: 29% !important} .ml-30 { margin-left: 30% !important} .top-0px { top: 0px} .top-1px { top: 1px} .top-2px { top: 2px} .top-3px { top: 3px} .top-4px { top: 4px} .top-5px { top: 5px} .top-6px { top: 6px} .top-7px { top: 7px} .top-8px { top: 8px} .top-9px { top: 9px} .top-10px { top: 10px} .top-11px { top: 11px} .top-12px { top: 12px} .top-13px { top: 13px} .top-14px { top: 14px} .top-15px { top: 15px} .top-16px { top: 16px} .top-17px { top: 17px} .top-18px { top: 18px} .top-19px { top: 19px} .top-20px { top: 20px} .top-21px { top: 21px} .top-22px { top: 22px} .top-23px { top: 23px} .top-24px { top: 24px} .top-25px { top: 25px} .top-26px { top: 26px} .top-27px { top: 27px} .top-28px { top: 28px} .top-29px { top: 29px} .top-30px { top: 30px} .top-40px { top: 40px} .top-50px { top: 50px} .top-60px { top: 60px} .top-70px { top: 70px} .top-80px { top: 80px} .top-90px { top: 90px} .top-100px { top: 100px} .top-110px { top: 110px} .top-120px { top: 120px} .top-130px { top: 130px} .top-140px { top: 140px} .top-150px { top: 150px} .right-0px { right: 0px} .right-1px { right: 1px} .right-2px { right: 2px} .right-3px { right: 3px} .right-4px { right: 4px} .right-5px { right: 5px} .right-6px { right: 6px} .right-7px { right: 7px} .right-8px { right: 8px} .right-9px { right: 9px} .right-10px { right: 10px} .right-11px { right: 11px} .right-12px { right: 12px} .right-13px { right: 13px} .right-14px { right: 14px} .right-15px { right: 15px} .right-16px { right: 16px} .right-17px { right: 17px} .right-18px { right: 18px} .right-19px { right: 19px} .right-20px { right: 20px} .right-21px { right: 21px} .right-22px { right: 22px} .right-23px { right: 23px} .right-24px { right: 24px} .right-25px { right: 25px} .right-26px { right: 26px} .right-27px { right: 27px} .right-28px { right: 28px} .right-29px { right: 29px} .right-30px { right: 30px} .right-40px { right: 40px} .right-50px { right: 50px} .right-60px { right: 60px} .right-70px { right: 70px} .right-80px { right: 80px} .right-90px { right: 90px} .right-100px { right: 100px} .right-110px { right: 110px} .right-120px { right: 120px} .right-130px { right: 130px} .right-140px { right: 140px} .right-150px { right: 150px} .bottom-0px { bottom: 0px} .bottom-1px { bottom: 1px} .bottom-2px { bottom: 2px} .bottom-3px { bottom: 3px} .bottom-4px { bottom: 4px} .bottom-5px { bottom: 5px} .bottom-6px { bottom: 6px} .bottom-7px { bottom: 7px} .bottom-8px { bottom: 8px} .bottom-9px { bottom: 9px} .bottom-10px { bottom: 10px} .bottom-11px { bottom: 11px} .bottom-12px { bottom: 12px} .bottom-13px { bottom: 13px} .bottom-14px { bottom: 14px} .bottom-15px { bottom: 15px} .bottom-16px { bottom: 16px} .bottom-17px { bottom: 17px} .bottom-18px { bottom: 18px} .bottom-19px { bottom: 19px} .bottom-20px { bottom: 20px} .bottom-21px { bottom: 21px} .bottom-22px { bottom: 22px} .bottom-23px { bottom: 23px} .bottom-24px { bottom: 24px} .bottom-25px { bottom: 25px} .bottom-26px { bottom: 26px} .bottom-27px { bottom: 27px} .bottom-28px { bottom: 28px} .bottom-29px { bottom: 29px} .bottom-30px { bottom: 30px} .bottom-40px { bottom: 40px} .bottom-50px { bottom: 50px} .bottom-60px { bottom: 60px} .bottom-70px { bottom: 70px} .bottom-80px { bottom: 80px} .bottom-90px { bottom: 90px} .bottom-100px { bottom: 100px} .bottom-110px { bottom: 110px} .bottom-120px { bottom: 120px} .bottom-130px { bottom: 130px} .bottom-140px { bottom: 140px} .bottom-150px { bottom: 150px} .left-0px { left: 0px} .left-1px { left: 1px} .left-2px { left: 2px} .left-3px { left: 3px} .left-4px { left: 4px} .left-5px { left: 5px} .left-6px { left: 6px} .left-7px { left: 7px} .left-8px { left: 8px} .left-9px { left: 9px} .left-10px { left: 10px} .left-11px { left: 11px} .left-12px { left: 12px} .left-13px { left: 13px} .left-14px { left: 14px} .left-15px { left: 15px} .left-16px { left: 16px} .left-17px { left: 17px} .left-18px { left: 18px} .left-19px { left: 19px} .left-20px { left: 20px} .left-21px { left: 21px} .left-22px { left: 22px} .left-23px { left: 23px} .left-24px { left: 24px} .left-25px { left: 25px} .left-26px { left: 26px} .left-27px { left: 27px} .left-28px { left: 28px} .left-29px { left: 29px} .left-30px { left: 30px} .left-40px { left: 40px} .left-50px { left: 50px} .left-60px { left: 60px} .left-70px { left: 70px} .left-80px { left: 80px} .left-90px { left: 90px} .left-100px { left: 100px} .left-110px { left: 110px} .left-120px { left: 120px} .left-130px { left: 130px} .left-140px { left: 140px} .left-150px { left: 150px} .top-minus-0px { top: -0px} .top-minus-1px { top: -1px} .top-minus-2px { top: -2px} .top-minus-3px { top: -3px} .top-minus-4px { top: -4px} .top-minus-5px { top: -5px} .top-minus-6px { top: -6px} .top-minus-7px { top: -7px} .top-minus-8px { top: -8px} .top-minus-9px { top: -9px} .top-minus-10px { top: -10px} .top-minus-11px { top: -11px} .top-minus-12px { top: -12px} .top-minus-13px { top: -13px} .top-minus-14px { top: -14px} .top-minus-15px { top: -15px} .top-minus-16px { top: -16px} .top-minus-17px { top: -17px} .top-minus-18px { top: -18px} .top-minus-19px { top: -19px} .top-minus-20px { top: -20px} .top-minus-21px { top: -21px} .top-minus-22px { top: -22px} .top-minus-23px { top: -23px} .top-minus-24px { top: -24px} .top-minus-25px { top: -25px} .top-minus-26px { top: -26px} .top-minus-27px { top: -27px} .top-minus-28px { top: -28px} .top-minus-29px { top: -29px} .top-minus-30px { top: -30px} .top-minus-40px { top: -40px} .top-minus-50px { top: -50px} .top-minus-60px { top: -60px} .top-minus-70px { top: -70px} .top-minus-80px { top: -80px} .top-minus-90px { top: -90px} .top-minus-100px { top: -100px} .top-minus-110px { top: -110px} .top-minus-120px { top: -120px} .top-minus-130px { top: -130px} .top-minus-140px { top: -140px} .top-minus-150px { top: -150px} .right-minus-0px { right: -0px} .right-minus-1px { right: -1px} .right-minus-2px { right: -2px} .right-minus-3px { right: -3px} .right-minus-4px { right: -4px} .right-minus-5px { right: -5px} .right-minus-6px { right: -6px} .right-minus-7px { right: -7px} .right-minus-8px { right: -8px} .right-minus-9px { right: -9px} .right-minus-10px { right: -10px} .right-minus-11px { right: -11px} .right-minus-12px { right: -12px} .right-minus-13px { right: -13px} .right-minus-14px { right: -14px} .right-minus-15px { right: -15px} .right-minus-16px { right: -16px} .right-minus-17px { right: -17px} .right-minus-18px { right: -18px} .right-minus-19px { right: -19px} .right-minus-20px { right: -20px} .right-minus-21px { right: -21px} .right-minus-22px { right: -22px} .right-minus-23px { right: -23px} .right-minus-24px { right: -24px} .right-minus-25px { right: -25px} .right-minus-26px { right: -26px} .right-minus-27px { right: -27px} .right-minus-28px { right: -28px} .right-minus-29px { right: -29px} .right-minus-30px { right: -30px} .right-minus-40px { right: -40px} .right-minus-50px { right: -50px} .right-minus-60px { right: -60px} .right-minus-70px { right: -70px} .right-minus-80px { right: -80px} .right-minus-90px { right: -90px} .right-minus-100px { right: -100px} .right-minus-110px { right: -110px} .right-minus-120px { right: -120px} .right-minus-130px { right: -130px} .right-minus-140px { right: -140px} .right-minus-150px { right: -150px} .bottom-minus-0px { bottom: -0px} .bottom-minus-1px { bottom: -1px} .bottom-minus-2px { bottom: -2px} .bottom-minus-3px { bottom: -3px} .bottom-minus-4px { bottom: -4px} .bottom-minus-5px { bottom: -5px} .bottom-minus-6px { bottom: -6px} .bottom-minus-7px { bottom: -7px} .bottom-minus-8px { bottom: -8px} .bottom-minus-9px { bottom: -9px} .bottom-minus-10px { bottom: -10px} .bottom-minus-11px { bottom: -11px} .bottom-minus-12px { bottom: -12px} .bottom-minus-13px { bottom: -13px} .bottom-minus-14px { bottom: -14px} .bottom-minus-15px { bottom: -15px} .bottom-minus-16px { bottom: -16px} .bottom-minus-17px { bottom: -17px} .bottom-minus-18px { bottom: -18px} .bottom-minus-19px { bottom: -19px} .bottom-minus-20px { bottom: -20px} .bottom-minus-21px { bottom: -21px} .bottom-minus-22px { bottom: -22px} .bottom-minus-23px { bottom: -23px} .bottom-minus-24px { bottom: -24px} .bottom-minus-25px { bottom: -25px} .bottom-minus-26px { bottom: -26px} .bottom-minus-27px { bottom: -27px} .bottom-minus-28px { bottom: -28px} .bottom-minus-29px { bottom: -29px} .bottom-minus-30px { bottom: -30px} .bottom-minus-40px { bottom: -40px} .bottom-minus-50px { bottom: -50px} .bottom-minus-60px { bottom: -60px} .bottom-minus-70px { bottom: -70px} .bottom-minus-80px { bottom: -80px} .bottom-minus-90px { bottom: -90px} .bottom-minus-100px { bottom: -100px} .bottom-minus-110px { bottom: -110px} .bottom-minus-120px { bottom: -120px} .bottom-minus-130px { bottom: -130px} .bottom-minus-140px { bottom: -140px} .bottom-minus-150px { bottom: -150px} .left-minus-0px { left: -0px} .left-minus-1px { left: -1px} .left-minus-2px { left: -2px} .left-minus-3px { left: -3px} .left-minus-4px { left: -4px} .left-minus-5px { left: -5px} .left-minus-6px { left: -6px} .left-minus-7px { left: -7px} .left-minus-8px { left: -8px} .left-minus-9px { left: -9px} .left-minus-10px { left: -10px} .left-minus-11px { left: -11px} .left-minus-12px { left: -12px} .left-minus-13px { left: -13px} .left-minus-14px { left: -14px} .left-minus-15px { left: -15px} .left-minus-16px { left: -16px} .left-minus-17px { left: -17px} .left-minus-18px { left: -18px} .left-minus-19px { left: -19px} .left-minus-20px { left: -20px} .left-minus-21px { left: -21px} .left-minus-22px { left: -22px} .left-minus-23px { left: -23px} .left-minus-24px { left: -24px} .left-minus-25px { left: -25px} .left-minus-26px { left: -26px} .left-minus-27px { left: -27px} .left-minus-28px { left: -28px} .left-minus-29px { left: -29px} .left-minus-30px { left: -30px} .left-minus-40px { left: -40px} .left-minus-50px { left: -50px} .left-minus-60px { left: -60px} .left-minus-70px { left: -70px} .left-minus-80px { left: -80px} .left-minus-90px { left: -90px} .left-minus-100px { left: -100px} .left-minus-110px { left: -110px} .left-minus-120px { left: -120px} .left-minus-130px { left: -130px} .left-minus-140px { left: -140px} .left-minus-150px { left: -150px} .fw-100 { font-weight: 100 !important} .fw-200 { font-weight: 200 !important} .fw-300 { font-weight: 300 !important} .fw-400 { font-weight: 400 !important} .fw-500 { font-weight: 500 !important} .fw-600 { font-weight: 600 !important} .fw-700 { font-weight: 700 !important} .fw-800 { font-weight: 800 !important} .fw-900 { font-weight: 900 !important} .min-h-100px { min-height: 100px !important} .min-h-150px { min-height: 150px !important} .min-h-200px { min-height: 200px !important} .min-h-250px { min-height: 250px !important} .min-h-300px { min-height: 300px !important} .min-h-350px { min-height: 350px !important} .min-h-400px { min-height: 400px !important} .min-h-450px { min-height: 450px !important} .min-h-500px { min-height: 500px !important} .min-h-550px { min-height: 550px !important} .min-h-600px { min-height: 600px !important} .min-h-650px { min-height: 650px !important} .min-h-700px { min-height: 700px !important} .min-h-750px { min-height: 750px !important} .min-h-800px { min-height: 800px !important} .min-h-850px { min-height: 850px !important} .min-h-900px { min-height: 900px !important} .min-h-950px { min-height: 950px !important} .opacity-0 { opacity: .0} .opacity-1 { opacity: .1} .opacity-2 { opacity: .2} .opacity-3 { opacity: .3} .opacity-4 { opacity: .4} .opacity-5 { opacity: .5} .opacity-6 { opacity: .6} .opacity-7 { opacity: .7} .opacity-8 { opacity: .8} .opacity-9 { opacity: .9} .z-index-0 { z-index: 0} .z-index-1 { z-index: 1} .z-index-2 { z-index: 2} .z-index-3 { z-index: 3} .z-index-4 { z-index: 4} .z-index-5 { z-index: 5} .z-index-6 { z-index: 6} .z-index-7 { z-index: 7} .z-index-8 { z-index: 8} .z-index-9 { z-index: 9} .z-index-minus-1 { z-index: -1} .z-index-minus-2 { z-index: -2} .rotate-circle { animation-name: rotateCircle; animation-duration: 20s; animation-iteration-count: infinite; animation-timing-function: linear} @keyframes rotateCircle { 0% { transform: rotate(0deg)} 100% { transform: rotate(360deg)} } .text-light { color: #fff} .text-light p { color: #c2c2c2} .line-top { border-top: 1px solid} .line-bottom { border-bottom: 1px solid} .line-right { border-right: 1px solid} .line-left { border-left: 1px solid} .separator-line-1px { height: 1px} .separator-line-2px { height: 2px} .separator-line-3px { height: 3px} .separator-line-4px { height: 4px} .separator-line-5px { height: 5px} .separator-line-small { width: 35px; height: 1px; display: inline-block; margin-right: 7px} .separator-line-extra-small { width: 18px; height: 1px; display: inline-block; margin-right: 8px; vertical-align: middle} .separator-line-very-small { width: 12px; height: 1px; display: inline-block; margin-right: 9px; vertical-align: middle} .opacity-full-dark, .opacity-full, .opacity-medium, .opacity-extra-medium, .opacity-light, .opacity-very-light { position: absolute; height: 100%; width: 100%; top: 0; left: 0} .opacity-very-light { opacity: 0.2} .opacity-light { opacity: 0.3} .opacity-extra-medium { opacity: 0.5} .opacity-medium { opacity: 0.75} .opacity-full { opacity: 0.8} .opacity-full-dark { opacity: 0.9} .social-icon-circle a { width: 40px; height: 40px; line-height: 40px; text-align: center; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 50%; font-size: 12px} .social-icon-circle.border-dark a { border-color: rgba(0, 0, 0, 0.1)} .social-icon-circle.vertical { writing-mode: vertical-rl; text-orientation: mixed} .social-icon-circle.vertical span { font-size: 12px; text-transform: uppercase; margin-top: 15px} .social-icon-square a { width: 40px; height: 40px; line-height: 40px; text-align: center; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 2px; font-size: 12px} .social-icon-square.border-dark a { border-color: rgba(0, 0, 0, 0.1)} .lines-top { position: absolute; top: 0; left: 0; width: 100%; transform: translateY(-100%)} .lines-top.bottom { transform: translateY(100%) rotate(180deg); top: auto; bottom: 0} .lines-top span { width: 100%; display: block; height: 2px; margin-bottom: 10px; background: #0f130f} .lines-top span:nth-of-type(2) { height: 4px; margin-bottom: 8px} .lines-top span:nth-of-type(3) { height: 6px; margin-bottom: 6px} .lines-top span:nth-of-type(4) { height: 8px; margin-bottom: 4px} .lines-top span:nth-of-type(5) { height: 10px; margin-bottom: 2px} .tab-content { display: none} .tab-content.current { display: block} .accordion-item { border: 0; border-radius: 0} .accordion-button, .accordion-button:not(.collapsed) { color: inherit; background: transparent; box-shadow: none; width: 100%; padding: 0; border: 0; border-radius: 0} .accordion-button .row, .accordion-button:not(.collapsed) .row { width: 100%} .accordion-button:after, .accordion-button:not(.collapsed):after { display: none} .main-marq.standerd { position: relative} .main-marq.standerd:after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to right, #fff, transparent, #fff)} .main-marq.standerd .item-marq { padding: 0 50px} .main-marq.standerd .item-marq h2 { font-size: 100px} .list-dot { margin: 0; padding: 0} .list-dot li { position: relative} .list-dot li:before { content: ""; position: relative; width: 5px; height: 5px; background: #0f130f; border-radius: 50%; margin-right: 10px; display: inline-block} .list-dot.dark-style li:before { background: #fff} .nowrap { white-space: nowrap} .text-indent { text-indent: 15%} .o-hidden { overflow: hidden} .d-block { display: block} .d-inline { display: inline-block} .d-flex { display: flex} .ml-auto { margin-left: auto} .invert-icon { filter: invert(1)} .skrollr-parallax { position: relative; background-size: cover; background-attachment: fixed; transition-timing-function: none; -webkit-transition-timing-function: none; transition-duration: 0s; -webkit-transition-duration: 0s} .skrollr-zoom { transition: none} .blur-box { backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(3px)} .transform-origin-right { transform-origin: right} .transform-origin-left { transform-origin: left} .transition { transition: all 400ms cubic-bezier(0.37, 0, 0.63, 1)} .transition-inner-all * { transition: all 400ms cubic-bezier(0.37, 0, 0.63, 1)} .no-transition { transition: 0s} .pointer-events-none { pointer-events: none} .pointer-events-all { pointer-events: all} .underline { text-decoration: underline} .users-style1 .fit-img { width: 40px; height: 40px; border-radius: 50%; overflow: hidden; margin-left: -15px} .users-style1 .fit-img:first-of-type { margin-left: 0} .users-style1 h6 { font-size: 12px; text-transform: uppercase; padding: 12px 25px; border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(10px); border-radius: 30px; margin-left: 15px} .users-style2 span, .users-style2 .fit-img { width: 40px; height: 40px !important; border-radius: 50%; overflow: hidden; margin-left: -15px; display: inline-block; border: 1px solid rgba(251, 251, 251, 0.5)} .users-style2 span:first-of-type, .users-style2 .fit-img:first-of-type { margin-left: 0} .users-style2 span:last-of-type, .users-style2 .fit-img:last-of-type { color: #000; background: #fff; line-height: 40px; text-align: center; position: relative; z-index: 3} .users-style3 .users .fit-img, .users-style3 .users span { width: 40px; height: 40px; line-height: 40px; text-align: center; border-radius: 5px; border: 1px solid #fff; overflow: hidden; margin-left: -25px} .users-style3 .users .fit-img:first-of-type, .users-style3 .users span:first-of-type { margin-left: 0} .users-style3 .users .text { background: #141414; color: #fff; font-size: 12px} .progress-style1 .skill-progress { height: 8px; border-radius: 10px; background: rgba(111, 111, 111, 0.1)} .progress-style1 .skill-progress .progres { border-radius: 10px} .progress-style1 .skill-progress .progres:after { padding: 5px 15px; border-radius: 30px; background: #141414; color: #fff; top: -40px; right: -20px} .accordion-style1 .accordion-item { border-bottom: 1px solid rgba(0, 0, 0, 0.2); padding: 30px 0; background: transparent} .accordion-style1 .accordion-item .icon-arrow { width: 40px; height: 40px; line-height: 40px; border: 1px solid transparent; border-radius: 50%; padding: 10px} .accordion-style1 .accordion-item .accordion-button:not(.collapsed) .icon-arrow { border-color: rgba(0, 0, 0, 0.2)} .accordion-style1 .accordion-header .tags a { padding: 10px 20px; border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 30px; margin: 0 -5px} .accordion-style1.bord-style2 .accordion-item { border-color: rgba(255, 255, 255, 0.1)} .accordion-style1.bord-style2 .accordion-item .accordion-button:not(.collapsed) .arrow { transform: rotate(90deg)} .accordion-style1.bord-style2 .accordion-body { padding: 0} .accordion-style2 .accordion-item { padding: 25px; background: rgba(255, 255, 255, 0.5); backdrop-filter: blur(10px); border-radius: 15px; box-shadow: 0px 10px 50px rgba(0, 0, 0, 0.03); border: 0} .accordion-style2 .accordion-item .accordion-button:not(.collapsed) .arrow { transform: rotate(90deg)} .accordion-style2 .accordion-item.active h6 { font-weight: 600} .accordion-style2 .accordion-item .accordion-body { padding: 15px 0 0} .overflow-visible { overflow: visible} .overflow-x-hidden { overflow-x: hidden} .overflow-y-hidden { overflow-y: hidden} .overlap-section { position: relative} .overlap-height { transition: 0.3s height} .tags-style1 { font-size: 14px} .tags-style1 span, .tags-style1 a { padding: 12px 25px; background: rgba(255, 255, 255, 0.05); border-radius: 30px; margin-top: 5px} .lines-bg { background-image: linear-gradient(135deg, transparent 45%, rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0.1) 55%, transparent 0); background-size: 5px 5px} .v-align-between { display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between} .filter-mix-100 { filter: grayscale(100%) invert(100%)} .filter-grayscale-100 { filter: grayscale(100%)} input, select, textarea, .form-control, .form-select { padding: 12px 25px; width: 100%; max-width: 100%; resize: none; outline: none; font-size: 16px; border: 1px solid #e4e4e4; color: var(--medium-gray); line-height: inherit; word-break: normal} .form-select { color: var(--medium-gray)} .form-select:focus { border-color: #dfdfdf} input:focus, select:focus, textarea:focus, .form-control:focus { border: 1px solid #c2c2c2; box-shadow: none; color: var(--medium-gray)} .search-error { border-color: var(--red)} .select { position: relative} .select:after { content: "\e842"; font-family: feather !important; right: 20px; top: 50%; height: 34px; position: absolute; pointer-events: none; font-size: 22px; margin-top: -15px} .input-small, .textarea-small, .select-small { padding: 7px 15px; font-size: 12px} .input-medium, .textarea-medium, .select-medium { padding: 14px 28px} .input-large { padding: 16px 32px} .form-control.is-invalid:focus { box-shadow: none} .main-marq { position: relative; padding: 0; overflow: hidden !important} .main-marq .box h2, .main-marq .box h3, .main-marq .box h4, .main-marq .box h5 { white-space: nowrap} .main-marq .slide-har { display: flex} .main-marq .box { display: flex} .slide-har { position: relative} .slide-har.st1 .box { position: relative; animation: slide-har 80s linear infinite} .slide-har.st2 .box { position: relative; animation: slide-har-revers 80s linear infinite} @keyframes slide-har { 0% { transform: translateX(0%)} 100% { transform: translateX(-100%)} } @keyframes slide-har-revers { 100% { transform: translateX(0%)} 0% { transform: translateX(-100%)} } .stroke-light { -webkit-text-fill-color: transparent; -webkit-text-stroke-width: 0.5px; -webkit-text-stroke-color: #fff} .stroke { -webkit-text-fill-color: transparent; -webkit-text-stroke-width: 0.5px; -webkit-text-stroke-color: #000} .swiper-contr-style1 { position: relative; width: max-content; display: inline-block; padding: 5px 15px; border-radius: 40px; background: rgba(0, 0, 0, 0.02); backdrop-filter: blur(10px)} .swiper-contr-style1 .swiper-pagination { position: static; margin: -4px 15px 0} .swiper-contr-style1 .swiper-pagination span { margin: 0 8px; width: 6px; height: 6px; border-radius: 50%} .swiper-contr-style1 .swiper-pagination .swiper-pagination-bullet-active { background: #111} .swiper-contr-style1 .swiper-button-prev, .swiper-contr-style1 .swiper-button-next { position: static; margin: 0; width: auto; height: auto; display: inline-block; color: inherit} .swiper-contr-style1 .swiper-button-prev:after, .swiper-contr-style1 .swiper-button-next:after { font-size: 13px} .swiper-contr-style2 { position: relative; width: max-content; display: inline-block; padding: 8px 15px; border-radius: 40px; border: 1px solid rgba(0, 0, 0, 0.2)} .swiper-contr-style2 .swiper-pagination { position: static; margin: 0px 15px 0; font-size: 14px} .swiper-contr-style2 .swiper-pagination span { margin: 0 8px; width: 6px; height: 6px; border-radius: 50%} .swiper-contr-style2 .swiper-pagination .swiper-pagination-bullet-active { background: #111} .swiper-contr-style2 .swiper-pagination .swiper-pagination-current { position: relative; padding-right: 30px} .swiper-contr-style2 .swiper-pagination .swiper-pagination-current:after { content: "/"; position: absolute; right: 0; top: -1px} .swiper-contr-style2 .swiper-button-prev, .swiper-contr-style2 .swiper-button-next { position: static; margin: 0; width: auto; height: auto; display: inline-block; color: inherit} .swiper-contr-style2 .swiper-button-prev:after, .swiper-contr-style2 .swiper-button-next:after { font-size: 13px} .swiper-contr-style3 { position: relative} .swiper-contr-style3 .swiper-pagination { position: static; margin: -4px 15px 0} .swiper-contr-style3 .swiper-pagination span { margin: 0 8px; width: 6px; height: 6px; border-radius: 50%} .swiper-contr-style3 .swiper-pagination .swiper-pagination-bullet-active { background: #111} .swiper-contr-style3 .swiper-button-prev, .swiper-contr-style3 .swiper-button-next { position: static; margin: 0; width: 50px; height: 50px; line-height: 50px; text-align: center; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.1); display: inline-block; color: inherit} .swiper-contr-style3 .swiper-button-prev:after, .swiper-contr-style3 .swiper-button-next:after { font-size: 13px} .swiper-contr-style3 .swiper-button-prev:hover, .swiper-contr-style3 .swiper-button-next:hover { background: #fff; color: #0f130f} .swiper-width-auto .swiper-slide { width: auto} .full-screen { height: 100vh} .full-screen.top-space-margin { height: calc(100vh - 96px)} .pattern-overlay { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; pointer-events: none} .will-change-transform * { will-change: transform} .will-change-inherit * { will-change: inherit} .animation-rotation { -webkit-animation: rotation 8s infinite linear} @-webkit-keyframes rotation { from { -webkit-transform: rotate(0deg)} to { -webkit-transform: rotate(359deg)} } .animation-float { animation: float 2000ms linear 500ms infinite alternate both} @keyframes float { 0% { transform: translateY(0px)} 50% { transform: translateY(15px)} 100% { transform: translateY(30px)} } .animation-float-small { animation: float 2000ms linear 500ms infinite alternate both} @keyframes float { 0% { transform: translateY(0px)} 50% { transform: translateY(5px)} 100% { transform: translateY(10px)} } .animation-zoom { animation: zoom-in-zoom-out 2000ms linear 500ms infinite alternate both} @keyframes zoom-in-zoom-out { 0% { transform: scale(1, 1)} 50% { transform: scale(1.2, 1.2)} 100% { transform: scale(1, 1)} } .bg-base-color { background-color: var(--base-color)} .bg-dark-gray, .bg-dark-gray:focus { background-color: var(--dark-gray)} .bg-black { background-color: var(--black); color: #fff} .bg-alt-black { background-color: var(--alt-black); color: #fff} .bg-medium-gray { background-color: var(--medium-gray)} .bg-light-medium-gray { background-color: var(--light-medium-gray)} .bg-extra-medium-gray { background-color: var(--extra-medium-gray)} .bg-light-gray { background-color: var(--light-gray)} .bg-very-light-gray { background-color: var(--very-light-gray)} .bg-red { background-color: var(--red)} .bg-light-red { background-color: var(--light-red)} .bg-light-yellow { background-color: var(--light-yellow)} .bg-light-green { background-color: var(--light-green)} .bg-green { background-color: var(--green)} .bg-crusoe-green { background-color: var(--crusoe-green)} .bg-yellow { background-color: var(--yellow)} .bg-charcoal-blue { background-color: var(--charcoal-blue)} .bg-slate-blue { background-color: var(--slate-blue)} .bg-medium-slate-blue { background-color: var(--medium-slate-blue)} .bg-extra-medium-slate-blue { background-color: var(--extra-medium-slate-blue)} .bg-dark-slate-blue { background-color: var(--dark-slate-blue)} .bg-extra-dark-slate-blue { background-color: var(--extra-dark-slate-blue)} .bg-extra-very-slate-blue { background-color: var(--extra-very-slate-blue); color: #fff} .bg-tussock-yellow { background-color: var(--tussock-yellow)} .bg-solitude-blue { background-color: var(--solitude-blue)} .bg-aluminium-grey { background-color: var(--aluminium-grey)} .bg-selago { background-color: var(--selago)} .bg-white-ice { background-color: var(--white-ice)} .bg-golden-yellow { background-color: var(--golden-yellow)} .bg-jade { background-color: var(--jade)} .bg-orange { background-color: var(--orange)} .bg-light-majorelle-blue { background-color: var(--light-majorelle-blue)} .bg-majorelle-blue { background-color: var(--majorelle-blue)} .bg-spring-wood { background-color: var(--spring-wood)} .bg-tropical-blue { background-color: var(--tropical-blue)} .bg-cornflower-blue { background-color: var(--cornflower-blue)} .bg-camarone { background-color: var(--camarone)} .bg-seal-brown { background-color: var(--seal-brown)} .bg-Wasabi { background-color: var(--Wasabi)} .bg-dark-gray-transparent { background-color: rgba(35, 35, 35, 0.8)} .bg-dark-gray-transparent-light { background-color: rgba(35, 35, 35, 0.2)} .bg-dark-gray-transparent-medium { background-color: rgba(35, 35, 35, 0.4)} .bg-medium-gray-transparent { background-color: rgba(111, 111, 111, 0.1)} .bg-light-gray-transparent { background-color: rgb(251, 251, 251)} .bg-medium-gray-transparent { background-color: rgba(136, 136, 136, 0.3)} .bg-black-transparent-light { background-color: rgba(0, 0, 0, 0.2)} .bg-black-transparent-medium { background-color: rgba(0, 0, 0, 0.5)} .bg-black-transparent { background-color: rgba(0, 0, 0, 0.8)} .bg-white-transparent-extra-light, .bg-white-transparent-extra-light:focus { background-color: rgba(255, 255, 255, 0.1)} .bg-white-transparent-very-light { background-color: rgba(255, 255, 255, 0.2)} .bg-white-transparent-light { background-color: rgba(255, 255, 255, 0.4)} .bg-white-transparent { background-color: rgba(255, 255, 255, 0.7)} .bg-img { background-size: cover !important} .contain-background { background-size: contain !important} .cover-background { background-repeat: no-repeat; background-size: cover; overflow: hidden; background-position: center center} .fix-background { position: relative; background-size: cover; background-position: center center; background-repeat: no-repeat; background-attachment: fixed} .fit-img img { width: 100%; height: 100%; object-fit: cover; object-position: center; vertical-align: inherit} .background-size-inherit { background-size: inherit} .background-attachment-inherit { background-attachment: inherit} .background-position-left { background-position: left center} .background-position-left-bottom { background-position: left bottom} .background-position-left-center { background-position: left center} .background-position-right { background-position: right center} .background-position-right-top { background-position: right top} .background-position-center-top { background-position: center top} .background-position-left-top { background-position: left top} .background-position-right-bottom { background-position: right bottom} .background-position-center-bottom { background-position: center bottom} .background-repeat { background-repeat: repeat} .background-no-repeat { background-repeat: no-repeat} .background-no-repeat-y { background-repeat-y: no-repeat} .background-position-center { background-position: center} .background-size-100 { background-size: 100%} .background-size-auto-100 { background-size: auto 100%} .border-dotted { border-style: dotted} .border-dashed { border-style: dashed} .border-solid { border-style: solid} .border-double { border-style: double} .border-groove { border-style: groove} .border-ridge { border-style: ridge} .border-inset { border-style: inset} .border-outset { border-style: outset} .border-none { border-style: none} .border-hidden { border-style: hidden} .border-color-transparent-dark-very-light { border-color: rgba(35, 35, 35, 0.1)} .border-color-transparent-dark-light { border-color: rgba(35, 35, 35, 0.2)} .border-color-transparent-white-very-light { border-color: rgba(255, 255, 255, 0.05)} .border-color-transparent-white-light { border-color: rgba(255, 255, 255, 0.1)} .border-color-transparent-white { border-color: rgba(255, 255, 255, 0.3)} .border-color-transparent { border-color: transparent} .border-color-transparent-on-hover:hover { border-color: transparent} .border-radius-0px { border-radius: 0} .border-radius-1px { border-radius: 1px} .border-radius-2px { border-radius: 2px} .border-radius-3px { border-radius: 3px} .border-radius-4px { border-radius: 4px} .border-radius-5px { border-radius: 5px} .border-radius-6px { border-radius: 6px} .border-radius-7px { border-radius: 7px} .border-radius-8px { border-radius: 8px} .border-radius-9px { border-radius: 9px} .border-radius-10px { border-radius: 10px} .border-radius-15px { border-radius: 15px} .border-radius-18px { border-radius: 18px} .border-radius-20px { border-radius: 20px} .border-radius-22px { border-radius: 22px} .border-radius-24px { border-radius: 24px} .border-radius-26px { border-radius: 26px} .border-radius-30px { border-radius: 30px} .border-radius-40px { border-radius: 40px} .border-radius-50px { border-radius: 50px} .border-radius-80px { border-radius: 80px} .border-radius-100px { border-radius: 100px} .border-radius-50 { border-radius: 50%} .border-radius-100 { border-radius: 100%} .no-border-radius { border-radius: 0} .border-radius-top-left { border-radius: 10px 0 0 10px} .parallax { position: relative; background-size: cover; overflow: hidden; background-attachment: fixed; transition-timing-function: none; -webkit-transition-timing-function: none; transition-duration: 0s; -webkit-transition-duration: 0s} .w-1px { width: 1px} .w-2px { width: 2px} .w-3px { width: 3px} .w-4px { width: 4px} .w-5px { width: 5px} .w-6px { width: 6px} .w-7px { width: 7px} .w-8px { width: 8px} .w-9px { width: 9px} .w-10px { width: 10px} .w-15px { width: 15px} .w-20px { width: 20px} .w-25px { width: 25px} .w-30px { width: 30px} .w-35px { width: 35px} .w-40px { width: 40px} .w-45px { width: 45px} .w-50px { width: 50px} .w-55px { width: 55px} .w-60px { width: 60px} .w-65px { width: 65px} .w-70px { width: 70px} .w-75px { width: 75px} .w-80px { width: 80px} .w-85px { width: 85px} .w-90px { width: 90px} .w-95px { width: 95px} .w-100px { width: 100px} .w-110px { width: 110px} .w-120px { width: 120px} .w-130px { width: 130px} .w-140px { width: 140px} .w-150px { width: 150px} .w-160px { width: 160px} .w-170px { width: 170px} .w-180px { width: 180px} .w-190px { width: 190px} .w-200px { width: 200px} .w-210px { width: 210px} .w-220px { width: 220px} .w-230px { width: 230px} .w-240px { width: 240px} .w-250px { width: 250px} .w-260px { width: 260px} .w-270px { width: 270px} .w-280px { width: 280px} .w-290px { width: 290px} .w-300px { width: 300px} .w-310px { width: 310px} .w-320px { width: 320px} .w-330px { width: 330px} .w-340px { width: 340px} .w-350px { width: 350px} .w-360px { width: 360px} .w-370px { width: 370px} .w-380px { width: 380px} .w-390px { width: 390px} .w-400px { width: 400px} .w-450px { width: 450px} .w-500px { width: 500px} .w-550px { width: 550px} .w-600px { width: 600px} .w-650px { width: 650px} .w-700px { width: 700px} .w-750px { width: 750px} .w-800px { width: 800px} .w-850px { width: 850px} .w-900px { width: 900px} .w-950px { width: 950px} .w-1000px { width: 1000px} .w-10 { width: 10%} .w-15 { width: 15%} .w-20 { width: 20%} .w-25 { width: 25%} .w-30 { width: 30%} .w-35 { width: 35%} .w-40 { width: 40%} .w-45 { width: 45%} .w-50 { width: 50%} .w-55 { width: 55%} .w-60 { width: 60%} .w-65 { width: 65%} .w-70 { width: 70%} .w-75 { width: 75%} .w-80 { width: 80%} .w-85 { width: 85%} .w-90 { width: 90%} .w-95 { width: 95%} .w-100 { width: 100%} .w-auto { width: auto} .h-1px { height: 1px} .h-2px { height: 2px} .h-3px { height: 3px} .h-4px { height: 4px} .h-5px { height: 5px} .h-6px { height: 6px} .h-7px { height: 7px} .h-8px { height: 8px} .h-9px { height: 9px} .h-10px { height: 10px} .h-11px { height: 11px} .h-12px { height: 12px} .h-13px { height: 13px} .h-14px { height: 14px} .h-15px { height: 15px} .h-20px { height: 20px} .h-25px { height: 25px} .h-30px { height: 30px} .h-35px { height: 35px} .h-40px { height: 40px} .h-42px { height: 42px} .h-45px { height: 45px} .h-50px { height: 50px} .h-55px { height: 55px} .h-60px { height: 60px} .h-65px { height: 65px} .h-70px { height: 70px} .h-75px { height: 75px} .h-80px { height: 80px} .h-85px { height: 85px} .h-90px { height: 90px} .h-95px { height: 95px} .h-100px { height: 100px} .h-110px { height: 110px} .h-120px { height: 120px} .h-130px { height: 130px} .h-140px { height: 140px} .h-150px { height: 150px} .h-160px { height: 160px} .h-170px { height: 170px} .h-180px { height: 180px} .h-190px { height: 190px} .h-200px { height: 200px} .h-210px { height: 210px} .h-220px { height: 220px} .h-230px { height: 230px} .h-240px { height: 240px} .h-250px { height: 250px !important} .h-260px { height: 260px !important} .h-270px { height: 270px !important} .h-280px { height: 280px !important} .h-290px { height: 290px !important} .h-300px { height: 300px !important} .h-350px { height: 350px !important} .h-400px { height: 400px !important} .h-450px { height: 450px !important} .h-480px { height: 480px !important} .h-500px { height: 500px !important} .h-550px { height: 550px !important} .h-580px { height: 580px !important} .h-600px { height: 600px !important} .h-620px { height: 620px !important} .h-650px { height: 650px !important} .h-700px { height: 700px !important} .h-750px { height: 750px !important} .h-800px { height: 800px !important} .h-850px { height: 850px !important} .h-1000px { height: 1000px !important} .h-auto { height: auto} .extra-very-small-screen { height: 250px} .extra-small-screen { height: 300px} .small-screen { height: 400px} .one-half-screen { height: 600px} .one-third-screen { height: 700px} .one-fourth-screen { height: 800px} .one-fifth-screen { height: 900px} .one-sixth-screen { height: 1000px} .one-seventh-screen { height: 1200px} @media (prefers-reduced-motion: no-preference) { :root { scroll-behavior: auto} } [data-overlay-dark], [data-overlay-light] { position: relative} [data-overlay-dark] .container, [data-overlay-dark] .container-xxl, [data-overlay-light] .container-xxl, [data-overlay-light] .container { position: relative; z-index: 7} [data-overlay-dark]:before, [data-overlay-light]:before { content: ""; position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 1; pointer-events: none} [data-overlay-dark]:before { background: #141414} [data-overlay-light]:before { background: #fff} [data-overlay-dark], [data-overlay-dark] h1, [data-overlay-dark] h2, [data-overlay-dark] h3, [data-overlay-dark] h4, [data-overlay-dark] h5, [data-overlay-dark] h6, [data-overlay-dark] span, .bg-dark h1, .bg-dark h2, .bg-dark h3, .bg-dark h4, .bg-dark h5, .bg-dark h6, .bg-dark span, .bg-color h1, .bg-color h2, .bg-color h3, .bg-color h4, .bg-color h5, .bg-color h6, .bg-color span { color: #fff} [data-overlay-dark="0"]:before, [data-overlay-light="0"]:before { opacity: 0} [data-overlay-dark="1"]:before, [data-overlay-light="1"]:before { opacity: 0.1} [data-overlay-dark="2"]:before, [data-overlay-light="2"]:before { opacity: 0.2} [data-overlay-dark="3"]:before, [data-overlay-light="3"]:before { opacity: 0.3} [data-overlay-dark="4"]:before, [data-overlay-light="4"]:before { opacity: 0.4} [data-overlay-dark="5"]:before, [data-overlay-light="5"]:before { opacity: 0.5} [data-overlay-dark="6"]:before, [data-overlay-light="6"]:before { opacity: 0.6} [data-overlay-dark="7"]:before, [data-overlay-light="7"]:before { opacity: 0.7} [data-overlay-dark="8"]:before, [data-overlay-light="8"]:before { opacity: 0.8} [data-overlay-dark="9"]:before, [data-overlay-light="9"]:before, [data-overlay-color="9"]:before { opacity: 0.9} [data-overlay-dark="10"]:before, [data-overlay-light="10"]:before { opacity: 1} .row.sm-marg { margin-left: -5px; margin-right: -5px} .row.sm-marg > * { padding-left: 5px; padding-right: 5px} .row.stand-marg { margin-left: -20px; margin-right: -20px} .row.stand-marg > * { padding-left: 20px; padding-right: 20px} .row.md-marg { margin-left: -25px; margin-right: -25px} .row.md-marg > * { padding-left: 25px; padding-right: 25px} .row.lg-marg { margin-left: -40px; margin-right: -40px} .row.lg-marg > * { padding-left: 40px; padding-right: 40px} .row.xlg-marg { margin-left: -50px; margin-right: -50px} .row.xlg-marg > * { padding-left: 50px; padding-right: 50px} .row.xxlg-marg { margin-left: -80px; margin-right: -80px} .row.xxlg-marg > * { padding-left: 80px; padding-right: 80px} .container-xxl { max-width: 1600px} .container { max-width: 1400px} h1, .h1 { font-size: 64px} h2, .h2 { font-size: 48px} h3, .h3 { font-size: 36px} h4 { font-size: 32px} h5 { font-size: 28px} h6 { font-size: 22px} h6.regular { font-size: 18px} .lg-text { font-size: 96px} .md-text { font-size: 54px} .sm-text { font-size: 20px} .h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 { margin-top: 0; margin-bottom: 0; line-height: 1.1; font-weight: 500; word-break: normal; overflow-wrap: break-word; hyphens: auto} h5, h6 { line-height: 1.2} p { color: #d2d1d1; font-size: 17px; line-height: 1.6; margin-bottom: 0} span, a { display: inline-block} a { text-decoration: none; color: inherit} a:hover, a:focus, a:active { color: inherit} .font-style-italic { font-style: italic} .hover-text { display: none} b, strong { font-weight: 700} .text-white-space-nowrap { white-space: nowrap} .text-white-space-normal { white-space: normal} .text-transform-none { text-transform: none !important} .text-uppercase-inherit { text-transform: inherit !important} .text-uppercase { text-transform: uppercase} .word-break-normal { word-break: normal} .vertical-align-top { vertical-align: top} .text-align-left { text-align: left} .text-align-right { text-align: right} .text-align-center { text-align: center} .fs-0 { font-size: 0 !important} .fs-9 { font-size: 9px !important} .fs-10 { font-size: 10px !important} .fs-11 { font-size: 11px !important} .fs-12 { font-size: 12px !important} .fs-13 { font-size: 13px !important} .fs-14 { font-size: 14px !important} .fs-15 { font-size: 15px !important} .fs-16 { font-size: 16px !important} .fs-17 { font-size: 17px !important} .fs-18 { font-size: 18px !important} .fs-19 { font-size: 19px !important} .fs-20 { font-size: 20px !important} .fs-22 { font-size: 22px !important} .fs-24 { font-size: 24px !important; line-height: 32px} .fs-26 { font-size: 26px !important} .fs-28 { font-size: 28px !important} .fs-30 { font-size: 30px !important} .fs-32 { font-size: 32px !important} .fs-40 { font-size: 40px !important} .fs-45 { font-size: 45px !important} .fs-50 { font-size: 50px !important} .fs-55 { font-size: 55px !important} .fs-60 { font-size: 60px !important} .fs-65 { font-size: 65px !important} .fs-70 { font-size: 70px !important} .fs-75 { font-size: 75px !important} .fs-80 { font-size: 80px !important} .fs-85 { font-size: 85px !important} .fs-90 { font-size: 90px !important} .fs-95 { font-size: 95px !important} .fs-100 { font-size: 100px !important} .fs-110 { font-size: 6.875rem} .fs-120 { font-size: 7.5rem} .fs-130 { font-size: 8.125rem} .fs-140 { font-size: 8.75rem} .fs-150 { font-size: 9.375rem} .fs-160 { font-size: 10rem} .fs-170 { font-size: 10.625rem} .fs-180 { font-size: 11.25rem} .fs-190 { font-size: 11.875rem} .fs-200 { font-size: 12.5rem} .fs-225 { font-size: 14.063rem} .fs-250 { font-size: 15.625rem} .fs-275 { font-size: 17.188rem} .fs-300 { font-size: 18.75rem} .fs-350 { font-size: 21.875rem} .fs-400 { font-size: 25rem} .lh-0px { line-height: 0px} .lh-10 { line-height: 10px} .lh-11 { line-height: 11px} .lh-12 { line-height: 12px} .lh-13 { line-height: 13px} .lh-14 { line-height: 14px} .lh-15 { line-height: 15px} .lh-16 { line-height: 16px} .lh-18 { line-height: 18px} .lh-19 { line-height: 19px} .lh-20 { line-height: 20px} .lh-22 { line-height: 22px} .lh-24 { line-height: 24px} .lh-26 { line-height: 26px} .lh-28 { line-height: 28px} .lh-30 { line-height: 30px} .lh-32 { line-height: 2rem} .lh-34 { line-height: 2.125rem} .lh-36 { line-height: 2.25rem} .lh-38 { line-height: 2.375rem} .lh-40 { line-height: 2.5rem} .lh-42 { line-height: 2.625rem} .lh-44 { line-height: 2.75rem} .lh-46 { line-height: 2.875rem} .lh-48 { line-height: 3rem} .lh-50 { line-height: 3.125rem} .lh-55 { line-height: 3.438rem} .lh-60 { line-height: 3.75rem} .lh-65 { line-height: 4.063rem} .lh-70 { line-height: 4.375rem} .lh-75 { line-height: 4.688rem} .lh-80 { line-height: 5rem} .lh-85 { line-height: 5.313rem} .lh-90 { line-height: 5.625rem} .lh-95 { line-height: 5.938rem} .lh-100 { line-height: 6.25rem} .lh-105 { line-height: 6.563rem} .lh-110 { line-height: 6.875rem} .lh-115 { line-height: 7.188rem} .lh-120 { line-height: 7.5rem} .lh-0 { line-height: 0} .lh-normal { line-height: normal} .lh-initial { line-height: initial} .lh-inherit { line-height: inherit} .text-outline-width-1px { -webkit-text-stroke-width: 1px} .text-outline-width-2px { -webkit-text-stroke-width: 2px} .text-outline-width-3px { -webkit-text-stroke-width: 3px} .text-outline-width-4px { -webkit-text-stroke-width: 4px} .text-outline-width-5px { -webkit-text-stroke-width: 5px} .ls-0px { letter-spacing: 0px !important} .ls-05px { letter-spacing: 0.5px !important} .ls-1px { letter-spacing: 1px !important} .ls-2px { letter-spacing: 2px !important} .ls-3px { letter-spacing: 3px !important} .ls-4px { letter-spacing: 4px !important} .ls-5px { letter-spacing: 5px !important} .ls-6px { letter-spacing: 6px !important} .ls-7px { letter-spacing: 7px !important} .ls-8px { letter-spacing: 8px !important} .ls-9px { letter-spacing: 9px !important} .ls-10px { letter-spacing: 10px !important} .ls-minus-05px { letter-spacing: -0.5px !important} .ls-minus-1px { letter-spacing: -1px !important} .ls-minus-2px { letter-spacing: -2px !important} .ls-minus-3px { letter-spacing: -3px !important} .ls-minus-4px { letter-spacing: -4px !important} .ls-minus-5px { letter-spacing: -5px !important} .ls-minus-6px { letter-spacing: -6px !important} .ls-minus-7px { letter-spacing: -7px !important} .ls-minus-8px { letter-spacing: -8px !important} .ls-minus-9px { letter-spacing: -9px !important} .ls-minus-10px { letter-spacing: -10px !important} .icon-extra-double-large { font-size: 80px} .icon-double-large { font-size: 60px} .icon-extra-large { font-size: 50px} .icon-large { font-size: 42px} .icon-medium { font-size: 34px} .icon-very-medium { font-size: 28px} .icon-extra-medium { font-size: 24px} .icon-small { font-size: 18px} .icon-very-small { font-size: 14px} .butn { transition: all 0.4s} .butn.butn-md { padding: 15px 35px} .butn.butn-lg { padding: 18px 40px} .butn.butn-full { padding: 14px 30px; width: 100%; text-align: center} .butn.bg-light { background: #fff; border: 1px solid transparent; color: #000} .butn.bg-light:hover { background: transparent !important; border-color: rgba(255, 255, 255, 0.5); color: inherit} .butn.butn-line-light { padding: 0 0 10px; border-bottom: 1px solid #fff; width: 100%} .butn.butn-line-dark { padding: 0 0 10px; border-bottom: 1px solid #666; width: 100%} .butn.butn-line-dark img { filter: invert(1)} .butn.butn-line { padding: 0 0 10px; border-bottom: 1px solid #000; width: 100%} .butn.butn-circle-md { width: 70px; height: 70px; border-radius: 50%; line-height: 70px; text-align: center} .butn.butn-circle-md img { width: 20px} .butn.bord-light { border: 1px solid #fff} .butn.bord-gray { border: 1px solid #999 !important} .butn.hover-light:hover { background: #fff; border-color: #fff; color: #1d1d1d} .butn.hover-light2:hover { background: #eee; border-color: #eee; color: #1d1d1d} .butn.hover-dark:hover { background: #1d1d1d; border-color: #1d1d1d; color: #fff} .butn.butn-blur { color: #fff; background: rgba(0, 0, 0, 0.03); backdrop-filter: blur(10px); padding: 10px 15px; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 30px; transition: all 0.4s} .butn.butn-blur:hover { background: #fff; color: #1d1d1d} .butn.butn-blur:hover span { color: #1d1d1d} .butn.butn-blur:hover img { filter: invert(1)} .butn.bord-icon { border: 1px solid rgba(0, 0, 0, 0.1); padding: 7px 10px 7px 20px; border-radius: 30px} .butn.bord-icon .icon { padding: 8px 10px; border-radius: 5px; background: rgba(0, 0, 0, 0.03); margin-left: 10px} .butn.bord-icon.light-bord { border-color: rgba(255, 255, 255, 0.1)} .butn.bord-icon.light-bord .icon { background: rgba(255, 255, 255, 0.05)} .butn.butn-cirle-lg-icon > div { display: inline-block; width: 160px; height: 160px; line-height: 170px; text-align: center; border: 1px solid #1d1d1d; border-radius: 50%; margin: 0 -10px; font-size: 22px; text-transform: uppercase; transition: all 0.4s} .butn.butn-cirle-lg-icon > div span { line-height: 1.2} .butn.butn-cirle-lg-icon > div:last-of-type { background: #1d1d1d} .butn.butn-cirle-lg-icon:hover > div { transform: translateX(100%); margin: 0 10px} .butn.butn-cirle-lg-icon:hover > div:last-of-type { transform: translateX(-100%)} .butn.butn-arrow { padding: 10px 20px; background: #1d1d1d; border-radius: 30px; color: #fff} .butn.butn-arrow span { margin: 0 3px} .butn.butn-arrow img { width: 15px} .butn.butn-arrow.bord { background: transparent; border: 1px solid rgba(0, 0, 0, 0.5); color: inherit} .butn.standerd { padding: 14px 30px} .butn-arrow { padding: 7px 7px 7px 20px; border-radius: 10px; background: #fff; backdrop-filter: blur(10px); color: #111012; display: flex; align-items: center; justify-content: space-between; width: max-content; transition: all 0.4s} .butn-arrow.butn-full { width: 100% !important} .butn-arrow.butn-rounded { border-radius: 40px} .butn-arrow.butn-rounded .arrow-icon { border-radius: 50%} .butn-arrow.butn-blur { padding: 10px 10px 10px 20px; background: rgba(0, 0, 0, 0.15); backdrop-filter: blur(10px); color: #fff} .butn-arrow.butn-blur .arrow-icon { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1)} .butn-arrow.butn-blur:hover { background: rgba(0, 0, 0, 0.15)} .butn-arrow .arrow-icon { width: 38px; height: 38px; line-height: 38px; text-align: center; border-radius: 5px; background: #111012; margin-left: 20px; color: #fff; position: relative; overflow: hidden} .butn-arrow .arrow-icon svg { stroke: #fff; width: 32px; transition: all 0.4s} .butn-arrow .arrow-icon svg:first-of-type { position: absolute; top: 0; height: 100%; transform: translateY(-40px)} .butn-arrow:hover { background: rgba(255, 255, 255, 0.05) !important; color: #fff} .butn-arrow:hover .arrow-icon svg:first-of-type { transform: translateY(0)} .butn-arrow:hover .arrow-icon svg:last-of-type { transform: translateY(40px)} .butn-more .arrow-icon { width: 38px; height: 38px; line-height: 38px; text-align: center; border-radius: 50%; background: #fff; margin-left: 15px; color: #1f1f1f; position: relative; overflow: hidden} .butn-more .arrow-icon svg { stroke: #1f1f1f; width: 32px; transition: all 0.4s} .butn-more .arrow-icon svg:first-of-type { position: absolute; top: 0; height: 100%; transform: translateY(-40px)} .butn-more:hover .arrow-icon svg:first-of-type { transform: translateY(0)} .butn-more:hover .arrow-icon svg:last-of-type { transform: translateY(40px)} .butn-bord-sm { padding: 10px 20px; border: 1px solid rgba(255, 255, 255, 0.5); border-radius: 30px; position: relative} .butn-bord-sm:before { content: ""; position: relative; display: inline-block; width: 5px; height: 5px; background: #fff; border-radius: 50%; margin-right: 15px; transform: translateY(-2px)} .circle-button { position: relative; display: inline-block} .circle-button .icon { position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%)} .circle-button .textcircle { width: 250px; fill: #fff} .bg-light .butn-bord-sm { border-color: rgba(0, 0, 0, 0.5)} .bg-light .butn-bord-sm:before { background: #000} .hover-this .hover-anim { pointer-events: none; transition: transform 0.2s linear} .cursor { display: none !important; pointer-events: none; position: fixed; padding: 0.3rem; background-color: #fff; border-radius: 50%; mix-blend-mode: difference; transition: transform 0.3s ease, opacity 0.4s ease; z-index: 99999} .cursor-active { transform: translate(-50%, -50%) scale(8); opacity: 0.1} .cursor-pointer { cursor: pointer} .rolling-text { display: inline-block; overflow: hidden; line-height: 50px; height: 50px} .rolling-text.butn { padding: 0 35px} .social-text .rolling-text { line-height: 30px; height: 30px} .rolling-text:hover .letter, .rolling-text.play .letter { transform: translateY(-100%)} .rolling-text .letter { display: inline-block; transition: transform 0.5s cubic-bezier(0.76, 0, 0.24, 1)} .letter:nth-child(1) { transition-delay: 0s} .letter:nth-child(2) { transition-delay: 0.015s} .letter:nth-child(3) { transition-delay: 0.03s} .letter:nth-child(4) { transition-delay: 0.045s} .letter:nth-child(5) { transition-delay: 0.06s} .letter:nth-child(6) { transition-delay: 0.075s} .letter:nth-child(7) { transition-delay: 0.09s} .letter:nth-child(8) { transition-delay: 0.105s} .letter:nth-child(9) { transition-delay: 0.12s} .letter:nth-child(10) { transition-delay: 0.135s} .letter:nth-child(11) { transition-delay: 0.15s} .letter:nth-child(12) { transition-delay: 0.165s} .letter:nth-child(13) { transition-delay: 0.18s} .letter:nth-child(14) { transition-delay: 0.195s} .letter:nth-child(15) { transition-delay: 0.21s} .letter:nth-child(16) { transition-delay: 0.225s} .letter:nth-child(17) { transition-delay: 0.24s} .letter:nth-child(18) { transition-delay: 0.255s} .letter:nth-child(19) { transition-delay: 0.27s} .letter:nth-child(20) { transition-delay: 0.285s} .letter:nth-child(21) { transition-delay: 0.3s} .progress-wrap { position: fixed; bottom: 30px; right: 30px; height: 44px; width: 44px; cursor: pointer; display: block; border-radius: 50px; z-index: 100; opacity: 0; visibility: hidden; transform: translateY(20px); transition: all 400ms linear; mix-blend-mode: difference} .progress-wrap.active-progress { opacity: 1; visibility: visible; transform: translateY(0)} .progress-wrap::after { position: absolute; font-family: "Font Awesome 5 Free"; content: "\f077"; text-align: center; line-height: 44px; font-size: 13px; font-weight: 900; color: #ccc; left: 0; top: 0; height: 44px; width: 44px; cursor: pointer; display: block; z-index: 1; transition: all 400ms linear} .progress-wrap svg path { fill: none} .progress-wrap svg.progress-circle path { stroke: #ccc; stroke-width: 4; box-sizing: border-box; transition: all 400ms linear} .d-rotate { perspective: 1000px} .d-rotate .rotate-text { display: block; transform-style: preserve-3d; transition: all 0.8s; transform-origin: 50% 0%; transform: translate3d(0px, 50px, -50px) rotateX(-45deg) scale(0.95); opacity: 0; transition-delay: 0.5s} .d-rotate.animated .rotate-text { transform: translate3d(0px, 0px, 0px) rotateX(0deg) scale(1); opacity: 1} .d-slideup .sideup-text { overflow: hidden; display: block} .d-slideup .sideup-text:first-of-type .up-text { transition-delay: 0.2s} .d-slideup .sideup-text:nth-of-type(2) .up-text { transition-delay: 0.6s} .d-slideup .sideup-text:nth-of-type(3) .up-text { transition-delay: 1s} .d-slideup .sideup-text:nth-of-type(4) .up-text { transition-delay: 1.4s} .d-slideup .sideup-text:nth-of-type(5) .up-text { transition-delay: 1.8s} .d-slideup .sideup-text .up-text { transform: translateY(100%); transition: all 0.8s} .d-slideup.animated .up-text { transform: translateY(0)} .main-marq { position: relative; padding: 0} .main-marq:after { position: absolute; top: -30px; bottom: -30px; left: -5px; right: -5px; pointer-events: none; background: linear-gradient(to left, #161616, rgba(255, 255, 255, 0) 250px, rgba(255, 255, 255, 0) calc(100% - 250px), #161616)} .main-marq.with-shad:after { content: ""} .main-marq.md-text .box .item h4 { font-size: 40px} .main-marq.lrg .box .item h4 { font-size: 5vw} .main-marq.xlrg .box .item { padding: 0 30px} .main-marq.xlrg .box .item h4 { font-size: 10vw} .main-marq .slide-har { display: flex} .main-marq .strok .item h4 { color: transparent !important; -webkit-text-stroke: 0.5px #fff} .main-marq .strok .item h4 a { color: transparent !important; -webkit-text-stroke: 0.5px #fff} .main-marq .non-strok .item h4 { color: #fff !important; -webkit-text-stroke: 0 !important} .main-marq .non-strok .item h4 a { color: #fff !important; -webkit-text-stroke: 0 !important} .main-marq .box { display: flex} .main-marq .box .item { padding: 0 30px} .main-marq .box .item h4 { white-space: nowrap; margin: 0; line-height: 1.2} .main-marq .box .item h4 .icon { margin-bottom: -15px} .main-marq .box .item h2 { margin: 0} .main-marq .box .item:nth-of-type(even) h4 { color: transparent; -webkit-text-stroke: 0.5px #fff} .main-marq .box .item:nth-of-type(even) h4 a { color: transparent; -webkit-text-stroke: 0.5px #fff} .main-marq .box:last-of-type .item:nth-of-type(even) h4 { color: #fff; -webkit-text-stroke: 0} .main-marq .box:last-of-type .item:nth-of-type(even) h4 a { color: #fff; -webkit-text-stroke: 0} .main-marq .box:last-of-type .item:nth-of-type(odd) h4 { color: transparent; -webkit-text-stroke: 1px #fff} .main-marq .box:last-of-type .item:nth-of-type(odd) h4 a { color: transparent; -webkit-text-stroke: 1px #fff} .main-marq.sm-pad .box .item { padding: 0 15px} .slide-har { position: relative} .slide-har.st1 .box { position: relative; animation: slide-har 70s linear infinite} .slide-har.st2 .box { position: relative; animation: slide-har-revers 70s linear infinite} @keyframes slide-har { 0% { transform: translateX(0%)} 100% { transform: translateX(-100%)} } @keyframes slide-har-revers { 100% { transform: translateX(0%)} 0% { transform: translateX(-100%)} } .imago { clip-path: polygon(0 0, 0% 0, 0% 100%, 0 100%); transform: scale(1.2); filter: blur(5px); transition: clip-path 0.8s ease-in-out 0.3s, transform 0.8s ease-in-out 1.1s, filter 0.5s ease-in-out 1.1s; position: relative} .imago.animated { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); transform: scale(1); filter: blur(0px)} .imago.simpl { transform: scale(1); filter: blur(0px)} .scrolling-marq { overflow: hidden; width: 100%; display: flex; align-items: center} .scrolling-marq .marq-box { display: flex} body.loaded { overflow: hidden !important; height: 100% !important} .loader-wrap { position: fixed; z-index: 10; height: 100vh; width: 100%; left: 0; top: 0; display: flex; overflow: hidden; align-items: center; justify-content: center; background: transparent; z-index: 99999999999999} .loader-wrap svg { position: absolute; top: 0; width: 100vw; height: 110vh; fill: #1d1d1d} .loader-wrap .loader-wrap-heading .load-text { font-size: 60px; font-weight: 200; letter-spacing: 5px; text-transform: uppercase; z-index: 20} .load-text span { animation: loading 1s infinite alternate} .load-text span:nth-child(1) { animation-delay: 0s} .load-text span:nth-child(2) { animation-delay: 0.1s} .load-text span:nth-child(3) { animation-delay: 0.2s} .load-text span:nth-child(4) { animation-delay: 0.3s} .load-text span:nth-child(5) { animation-delay: 0.4s} .load-text span:nth-child(6) { animation-delay: 0.5s} .load-text span:nth-child(7) { animation-delay: 0.6s} @keyframes loading { 0% { opacity: 1} 100% { opacity: 0} } [data-overlay-dark], [data-overlay-light] { position: relative} [data-overlay-dark] .container, [data-overlay-dark] .container-xxl, [data-overlay-light] .container-xxl, [data-overlay-light] .container { position: relative; z-index: 7} [data-overlay-dark]:before, [data-overlay-light]:before { content: ""; position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 1; pointer-events: none} [data-overlay-dark]:before { background: #161616} [data-overlay-light]:before { background: #fff} [data-overlay-dark], [data-overlay-dark] h1, [data-overlay-dark] h2, [data-overlay-dark] h3, [data-overlay-dark] h4, [data-overlay-dark] h5, [data-overlay-dark] h6, [data-overlay-dark] span, .bg-dark h1, .bg-dark h2, .bg-dark h3, .bg-dark h4, .bg-dark h5, .bg-dark h6, .bg-dark span, .bg-color h1, .bg-color h2, .bg-color h3, .bg-color h4, .bg-color h5, .bg-color h6, .bg-color span { color: #fff} [data-overlay-dark="0"]:before, [data-overlay-light="0"]:before { opacity: 0} [data-overlay-dark="1"]:before, [data-overlay-light="1"]:before { opacity: 0.1} [data-overlay-dark="2"]:before, [data-overlay-light="2"]:before { opacity: 0.2} [data-overlay-dark="3"]:before, [data-overlay-light="3"]:before { opacity: 0.3} [data-overlay-dark="4"]:before, [data-overlay-light="4"]:before { opacity: 0.4} [data-overlay-dark="5"]:before, [data-overlay-light="5"]:before { opacity: 0.5} [data-overlay-dark="6"]:before, [data-overlay-light="6"]:before { opacity: 0.6} [data-overlay-dark="7"]:before, [data-overlay-light="7"]:before { opacity: 0.7} [data-overlay-dark="8"]:before, [data-overlay-light="8"]:before { opacity: 0.8} [data-overlay-dark="9"]:before, [data-overlay-light="9"]:before, [data-overlay-color="9"]:before { opacity: 0.9} [data-overlay-dark="10"]:before, [data-overlay-light="10"]:before { opacity: 1} .navbar { position: absolute; left: 0; top: 0; padding: 0; margin: 0; width: 100%; background: transparent; border-bottom: 2px solid transparent; z-index: 99} .navbar.static { position: relative} .navbar.nav-scroll { padding: 0; position: fixed; top: -80px; transition: transform 0.8s; transform: translateY(80px)} .navbar .icon-bar { color: #fff} .navbar .theme-icon { width: 40px; height: 40px; border-radius: 50%; background: rgba(40, 40, 40, 0.4); backdrop-filter: blur(6rem); border: 1px solid rgba(200, 200, 200, 0.2); font-size: 15px; color: #fff; display: flex; justify-content: center; align-items: center; cursor: pointer} .navbar .navbar-nav { margin-top: 10px; background: rgba(40, 40, 40, 0.4); backdrop-filter: blur(6rem); border-radius: 15px} .navbar .navbar-nav .nav-link { text-transform: uppercase; letter-spacing: 1px; font-size: 14px; font-weight: 500; color: #fff; padding: 18px 10px 14px 10px; margin: 0 15px} .navbar .navbar-nav .nav-link .rolling-text { height: 30px; line-height: 30px} .navbar .dropdown-menu { display: block; position: absolute; top: 70px; opacity: 0; visibility: hidden; padding: 10px 5px; color: #fff; background: #151515; border: 1px solid #2d2d2d; border-radius: 10px; min-width: 255px; transform: translateY(20px); transition: all 0.4s} .navbar .dropdown-menu.show { opacity: 1; visibility: visible; transform: translateY(0)} .navbar .dropdown-menu.show-left .dropdown-item .dropdown-side { left: auto; right: 248px} .navbar .dropdown-menu .dropdown-item { font-size: 14px; color: #fff; transition: all 0.4s; padding: 10px 25px; position: relative} .navbar .dropdown-menu .dropdown-item .dropdown-side { position: absolute; left: 248px; top: -15px; display: block; opacity: 0; visibility: hidden; border: 1px solid #393939; border-radius: 5px; background: #252424; width: 240px; padding: 20px 0px; transform: translateY(20px); transition: all 0.4s} .navbar .dropdown-menu .dropdown-item .dropdown-side.show { opacity: 1; visibility: visible; transform: translateY(0)} .navbar .dropdown-menu .dropdown-item .icon-arrow { position: absolute; right: 15px} .navbar .dropdown-menu .dropdown-item:after { content: ""; width: 0px; height: 1px; background: #fff; position: absolute; left: 10px; top: 18px; transition: all 0.4s} .navbar .dropdown-menu .dropdown-item:hover { padding-left: 30px; background: transparent} .navbar .dropdown-menu .dropdown-item:hover:after { width: 10px} .navbar .no-relative { position: static} .navbar .mega-menu { width: 100%; position: absolute; left: 0; top: 75px; overflow: hidden; padding: 0 !important; border: 0 !important; background: transparent} .navbar .mega-menu .container { padding: 40px !important; border: 1px solid #393939; background: #252424; border-radius: 5px} .navbar .mega-menu .title { margin-bottom: 20px} .navbar .mega-menu .title .sub-title { font-weight: 600} .navbar .mega-menu .item-img .img { border-radius: 5px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.05)} .navbar .logo { position: relative} .navbar .menu-icon { padding: 25px 30px; background: rgba(22, 22, 22, 0); color: #fff; border: none} .navbar .menu-icon .icon, .navbar .menu-icon .icon.ti-align-right { color: #fff !important} .navbar .menu-icon .icon.ti-align-right:before { color: #fff !important} .navbar .dropdown-toggle:after { margin-left: 5px; vertical-align: 12px} .hamenu { position: fixed; top: calc(-100% - 15px); left: 15px; width: calc(100% - 30px); height: calc(100vh - 150px); transform: translateY(15px); background: #1d1d1d; border-radius: 50px; overflow: hidden; z-index: 99999999999; transition: all 0.7s cubic-bezier(1, 0, 0.55, 1)} .hamenu .close-menu { position: absolute; top: 30px; right: 40px; width: 50px; height: 50px; line-height: 50px; border: 1px solid rgba(255, 255, 255, 0.5); border-radius: 50%; text-align: center; cursor: pointer; z-index: 4; color: #1d1d1d !important; background: rgba(255, 255, 255, 0.9) !important; transform: translateY(-100px); opacity: 0; transition: all 0.4s} .hamenu .close-menu.ti-close:before { color: #1d1d1d !important} .hamenu.open .close-menu { transform: translateY(0); opacity: 1; transition-delay: 1s} .hamenu.open .menu-links .main-menu > li .link { transform: translateY(0); opacity: 1; transition-delay: 1s} .hamenu.open .cont-info { transform: translateX(0)} .hamenu.open .cont-info .trans { transform: translateY(0); opacity: 1; transition-delay: 1.4s} .hamenu .menu-links { color: #fff; height: calc(100vh - 60px); margin-top: 10px; padding-top: 80px; padding-left: 80px; padding-right: 80px; overflow: auto; width: 100%; border-right: 1px solid rgba(255, 255, 255, 0.2)} .hamenu .menu-links::-webkit-scrollbar { width: 5px} .hamenu .menu-links::-webkit-scrollbar-track { background: #1d1d1d} .hamenu .menu-links::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.2); border-radius: 5px} .hamenu .menu-links .main-menu { position: relative; z-index: 2} .hamenu .menu-links .main-menu ul { margin: 0; padding: 0} .hamenu .menu-links .main-menu > li { transition: all 0.5s} .hamenu .menu-links .main-menu > li .link { font-size: 70px; font-weight: 500; line-height: 1.2; text-transform: uppercase; padding: 0; width: 100%; position: relative; display: block; transform: translateY(100px); opacity: 0; transition: all 0.7s} .hamenu .menu-links .main-menu > li .link i { position: absolute; width: 90px; top: 0; right: 0; bottom: 0} .hamenu .menu-links .main-menu > li .link i:before { content: ""; width: 1px; height: 16px; position: absolute; top: 50%; left: 50%; background: #fff} .hamenu .menu-links .main-menu > li .link i:after { content: ""; width: 16px; height: 1px; position: absolute; top: calc(50% + 8px); left: calc(50% - 8px); background: #fff} .hamenu .menu-links .main-menu > li .link.dopen i:before { opacity: 0} .hamenu .menu-links .main-menu > li .link .fill-text { position: relative; color: rgba(255, 255, 255, 0.4)} .hamenu .menu-links .main-menu > li .link .fill-text:after { content: attr(data-text); position: absolute; top: 0; left: 0; color: #fff; width: 100%; overflow: hidden; white-space: nowrap; transition: width 0.75s cubic-bezier(0.63, 0.03, 0.21, 1)} .hamenu .menu-links .main-menu > li.hoverd .link .fill-text:after { width: 0} .hamenu .menu-links .main-menu > li .sub-dmenu { font-size: 30px; font-weight: 400; padding-left: 80px; text-transform: capitalize; letter-spacing: normal} .hamenu .menu-links .main-menu .sub-menu { display: none; padding: 0px 0px 15px 0px} .hamenu .menu-links .main-menu .sub-menu.no-bord { border-top: 0; padding: 0} .hamenu .menu-links .main-menu .sub-menu li { padding: 0; margin: 0; line-height: 1; font-size: 22px; font-weight: 400} .hamenu .menu-links .main-menu .sub-menu li a { padding: 10px 10px 10px 40px; transition: all 0.4s} .hamenu .menu-links .main-menu .sub-menu li a:hover { color: #DDF160} .hamenu .menu-links .main-menu .sub-menu2 { display: none; padding: 10px 0 20px} .hamenu .menu-links .main-menu .sub-menu2 li { padding: 0; margin: 0; line-height: 1; font-size: 22px; font-weight: 400} .hamenu .menu-links .main-menu .sub-menu2 li a { padding: 12px 12px 12px 70px; opacity: 0.6; transition: all 0.4s} .hamenu .menu-links .main-menu .sub-menu2 li a:hover { opacity: 1} .hamenu .cont-info { padding: 120px 30px 30px; width: 100%; color: #fff} .hamenu .cont-info .trans { transform: translateY(50px); transition: all 0.4s; opacity: 0} .hamenu .cont-info .trans h6 { font-size: 18px; font-weight: 400; letter-spacing: normal; line-height: 1.5} .blur-menubg { position: relative; z-index: 3} .blur-menubg:after { content: ""; position: fixed; width: 100vw; height: 100vh; backdrop-filter: blur(30px); top: 0; left: 0; pointer-events: none; opacity: 0; visibility: hidden; transition: all 0.4s; transition-delay: 0.5s; z-index: 2} .blur-menubg.active:after { opacity: 1; visibility: visible} body:not(.light) .theme-icon .sun { display: none} body:not(.light) .theme-icon .moon { display: inline-block} body.light .theme-icon .sun { display: inline-block; line-height: 0} body.light .theme-icon .moon { display: none; line-height: 0} @media (max-width: 991px) { .breadcrumb-nav-header { display: none !important} .theme-icon { display: none !important} } .sec-head.bord { padding-top: 30px; border-top: 1px solid rgba(255, 255, 255, 0.2)} .sec-head h6 { font-size: 16px} .sec-head h6:before { content: ""; position: relative; display: inline-block; width: 5px; height: 5px; background: #fff; border-radius: 50%; margin-right: 15px} .sec-head-stand h5 { position: relative} .sec-head-stand h5:before { content: ""; display: inline-block; width: 5px; height: 5px; border-radius: 50%; margin-right: 15px; background-color: #fff} .bg-light .sec-head.bord { border-bottom: 1px solid rgba(0, 0, 0, 0.2)} .bg-light .sec-head h6:before { background: #000000} .modern-agency .sec-head.bord { border-top: 0; padding-bottom: 30px; border-bottom: 1px solid rgba(255, 255, 255, 0.2)} .modern-agency .bg-light .sec-head.bord { border-bottom: 1px solid rgba(0, 0, 0, 0.2); padding-bottom: 30px} .modern-agency .bg-light .sec-head h6:before { background: #000000} .about-md .main-box { color: #fff; height: 870px; padding: 40px; background-image: url(../imgs/team/3.png); background-size: cover; border-radius: 15px; overflow: hidden; position: relative} .about-md .main-box .caption h1 { font-size: 100px; line-height: 1.1; font-weight: 600} .about-md .main-box .text { position: relative; z-index: 3; margin-top: 60px} .about-md .main-box .text h6 { font-size: 20px} .about-md .main-box .states { position: absolute; bottom: 40px; left: 40px; z-index: 3} .about-md .main-box .states span { font-size: 14px; text-transform: uppercase; margin-top: 15px} .about-md .right-column { display: flex; flex-direction: column; justify-content: space-between} .about-md .team { position: relative; border-radius: 15px; background: #fff; color: #1f1f1f; overflow: hidden} .about-md .team .team-swiper { padding: 50px 30px 30px} .about-md .team .img { width: 190px; height: 190px; border-radius: 50%; overflow: hidden; background-image: linear-gradient(to bottom, #5B5B5B, #DDDDDD); margin: auto; margin-bottom: 15px} .about-md .team .cont h6 { font-size: 22px} .about-md .team .cont span { font-size: 14px; margin-top: 5px} .about-md .team .cont .social-icon { margin-top: 30px} .about-md .team .cont .social-icon a { width: 40px; height: 40px; line-height: 40px; border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 50%; font-size: 14px} .about-md .team .botom { margin-top: 40px} .about-md .team .title { font-weight: 500} .about-md .team .controls { position: static; display: flex; align-items: center} .about-md .team .controls .swiper-button-next, .about-md .team .controls .swiper-button-prev { position: static; width: 30px; height: 30px; line-height: 30px; text-align: center; font-size: 12px; color: #151515; background: #D6D8E8; border-radius: 50%; margin: 0 2px} .about-md .team .controls .swiper-button-next:hover, .about-md .team .controls .swiper-button-prev:hover { background: #151515; color: #fff} .about-md .team .controls .swiper-button-next:after, .about-md .team .controls .swiper-button-prev:after { display: none} .about-md .join { background: #9F8BE7; color: #fff; border-radius: 15px; overflow: hidden; height: 100%; padding: 30px 20px; position: relative; z-index: 2} .about-md .join:after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url(../../assets/imgs/symbol.svg); background-size: cover; pointer-events: none; opacity: 0.05; z-index: -1} .about-md .join .ontop { display: flex; flex-direction: column; justify-content: space-between; height: 100%} .about-md .join .jon-link span { font-size: 16px; font-weight: 500; line-height: 1.5} .about-md .join .jon-link .icon { width: 40px; height: 40px; line-height: 40px; text-align: center; border-radius: 50%; background: #fff} .about-md .join .jon-link .icon img { width: 15px} .about-md .join .cont span { font-size: 14px; margin-top: 10px} .intro-style1 .fit-vid { width: 200px; height: 200px; overflow: hidden} .intro-style1 .fit-vid video { width: 100%; height: 100%; object-fit: cover; object-position: center} .intro-style1 .box-bord { width: 200px; height: 200px; border: 1px solid rgba(255, 255, 255, 0.1); padding: 15px; text-align: center} .intro-style1 .box-bord img { margin-left: auto; margin-right: auto} .intro-style2 .item-numb { padding: 40px 15px; background: rgba(255, 255, 255, 0.05); border-radius: 100px} .intro-style2 .item-numb.bord { background: transparent; border: 1px solid rgba(255, 255, 255, 0.3)} .intro-style2 li { position: relative; opacity: 0.7} .intro-style2 li:hover { opacity: 1} .intro-style2 li:before { content: ""; position: relative; display: inline-block; width: 3px; height: 3px; background: #fff; border-radius: 50%; margin-right: 15px} .intro-style3 .bord { border: 1px solid rgba(255, 255, 255, 0.5)} .intro-style3 .box-bgimg1 { position: relative; padding: 40px; z-index: 3} .intro-style3 .box-bgimg1:after { content: ""; position: absolute; top: -30px; left: -30px; width: 75%; height: 75%; background-image: url(../imgs/intro/mshap1.png); background-size: contain; background-repeat: no-repeat; pointer-events: none; z-index: -1} .intro-style3 .box-bgimg { position: relative; padding: 40px; z-index: 3} .intro-style3 .box-bgimg:after { content: ""; position: absolute; bottom: 0; right: 0; width: 50%; height: 100%; background-image: url(../imgs/intro/p1.png); background-size: cover; pointer-events: none; z-index: -1} .numbers .item { border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 15px; padding: 15px; position: relative} .numbers .item span { position: relative} .numbers .item span:before { content: ""; display: inline-block; margin-right: 15px; background: rgba(255, 255, 255, 0.1); width: 5px; height: 5px; border-radius: 50%} .numbers .item:after, .numbers .item:before { content: ""; position: absolute; top: 20px; right: 20px; background: rgba(255, 255, 255, 0.1); width: 5px; height: 5px; border-radius: 50%} .numbers .item:after { top: auto; bottom: 20px} .numbers-md { padding: 100px 40px 80px; background: #9F8BE7; color: #fff; margin-top: -40px; border-radius: 0 0 15px 15px; position: relative; z-index: -1} .numbers-md .item h2 { margin-bottom: 30px} .numbers-md .item span { font-size: 14px; line-height: 1.5; text-transform: uppercase} .skills .item-skill { padding: 80px 15px; border-radius: 150px} .skills .item-skill h2 { font-family: "Mozilla Text", sans-serif} .scrolling-marq .marq-box .item { margin: 0 10px} .scrolling-marq .marq-box .item .text { padding: 50px; display: flex} .scrolling-marq .marq-box .item .fit-img, .scrolling-marq .marq-box .item .text { height: 400px; width: 500px !important} .blog-style1 .item { position: relative} .blog-style1 .item:hover .date { opacity: 0} .blog-style1 .item:hover .icon span { opacity: 1; transform: scale(1)} .blog-style1 .item .fit-img { position: relative} .blog-style1 .item .date { position: absolute; bottom: -6px; right: -6px; width: 90px; height: 90px; padding: 15px; color: #fff; z-index: 4; transition: all 0.4s} .blog-style1 .item .date div { width: 60px; height: 60px; text-align: center; background: rgba(255, 255, 255, 0.05); border-radius: 50%; font-size: 12px} .blog-style1 .item .date div i { display: block; font-size: 18px; font-weight: 500} .blog-style1 .item .icon { position: absolute; bottom: -6px; right: -6px; width: 90px; height: 90px; background: #171717; border-top-left-radius: 50%; padding: 15px} .blog-style1 .item .icon:before { position: absolute; content: ""; bottom: 6px; left: -20px; background: transparent; width: 20px; height: 20px; border-bottom-right-radius: 20px; box-shadow: 6px 6px 0 6px #171717} .blog-style1 .item .icon:after { position: absolute; content: ""; top: -20px; right: 6px; background: transparent; width: 20px; height: 20px; border-bottom-right-radius: 20px; box-shadow: 6px 6px 0 6px #171717} .blog-style1 .item .icon span { width: 60px; height: 60px; line-height: 60px; text-align: center; background: #fff; border-radius: 50%; opacity: 0; transform: scale(0); transition: all 0.4s} .blog-style1 .item .icon span svg { width: 15px; fill: #000} .blog-style1 .item .icon:hover span { background: rgba(255, 255, 255, 0.2)} .blog-style1 .item .icon:hover span svg { fill: #5fff66} .blog-style1 .item .text { padding: 30px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.1)} .blog-style1 .item .date-show { position: absolute; top: 20px; right: 20px; background: #fff; color: #171717; text-align: center; padding: 15px 10px; border-radius: 5px} .blog-style1 .item .date-show span { font-size: 30px; font-weight: 500; display: block} .blog-md .row-bord { position: relative} .blog-md .row-bord:after { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; border-left: 1px solid rgba(0, 0, 0, 0.1)} .blog-md .mitem .info .author-img { width: 40px; height: 40px; border-radius: 50%; overflow: hidden} .blog-md .mitem .info .author-info, .blog-md .mitem .info .date { font-size: 13px; text-transform: uppercase} .blog-md .mitem .info .author-info span, .blog-md .mitem .info .date span { display: block; line-height: 22px} .blog-md .mitem .img { border-radius: 15px; height: 285px; overflow: hidden} .blog-md .item .date { font-size: 13px; text-transform: uppercase; margin-bottom: 15px} .blog-md .item h6 { text-wrap: pretty} .blog-md .item:hover { border-color: rgba(0, 0, 0, 0.5)} .sidebar .search-box { position: relative} .sidebar .search-box input { color: #fff; padding: 15px; border: 1px solid rgba(255, 255, 255, 0.4); border-radius: 5px; width: 100%; background: transparent} .sidebar .search-box input:focus { border-color: #fff} .sidebar .search-box .icon { position: absolute; top: 50%; right: 15px; transform: translateY(-50%)} .sidebar .widget { margin-bottom: 30px; padding: 30px; border: 1px solid rgba(255, 255, 255, 0.05)} .sidebar .widget .title-widget { margin-bottom: 30px; text-transform: uppercase; letter-spacing: 1px; font-size: 17px} .sidebar .widget.catogry li { display: flex; font-size: 15px; padding: 10px 20px; border-radius: 30px} .sidebar .widget.catogry li:last-of-type { margin-bottom: 0} .sidebar .widget.catogry li:hover { background: rgba(255, 255, 255, 0.02)} .sidebar .widget.last-post-thum .item { display: flex; margin-bottom: 30px} .sidebar .widget.last-post-thum .item:last-of-type { margin-bottom: 0} .sidebar .widget.last-post-thum .item:hover .img a .date { opacity: 1} .sidebar .widget.last-post-thum .item .img { width: 90px; height: 100px; border-radius: 5px; overflow: hidden} .sidebar .widget.last-post-thum .item .img a { width: 100%; height: 100%; position: relative} .sidebar .widget.last-post-thum .item .img a .date { position: absolute; top: 50%; left: 50%; font-size: 12px; width: 60px; height: 60px; text-align: center; background: rgba(0, 0, 0, 0.1); backdrop-filter: blur(10px); border-radius: 50%; transform: translateX(-50%) translateY(-50%); z-index: 3; opacity: 0; transition: all 0.4s} .sidebar .widget.last-post-thum .item .img a .date span { position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); line-height: 1} .sidebar .widget.last-post-thum .item .img img { width: 100%; height: 100%; object-fit: cover} .sidebar .widget.last-post-thum .item .cont { padding-left: 25px} .sidebar .widget.last-post-thum .item .cont h6 { font-size: 17px} .sidebar .widget.last-post-thum .item .cont .tag { font-size: 12px; padding: 5px 15px; border-radius: 30px; background: rgba(255, 255, 255, 0.03); margin-bottom: 10px} .sidebar .widget.tags a { padding: 8px 15px; border-radius: 5px; background: rgba(255, 255, 255, 0.02); margin: 2px 0; transition: all 0.4s} .sidebar .widget.tags a:hover { background: #9F8BE7} .blog-main .item .content { margin-top: 40px} .blog-main .item .content .post-date { padding: 7px 15px; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 30px; font-size: 12px; color: #ddd; text-transform: uppercase; margin-right: 15px} .blog-header .tag a { padding: 8px 20px; background: #6250EB; border-radius: 30px} .blog-header .background { height: 400px} .main-post .spec-letter { font-size: 60px; line-height: 50px; padding-right: 10px; float: left} .main-post .post-qoute { position: relative; padding: 40px; padding-left: 120px; border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 30px} .main-post .post-qoute h6 { position: relative} .main-post .post-qoute h6:before { content: "“"; position: absolute; top: 80px; left: -100px; font-size: 180px; font-family: Poppins; line-height: 0} .main-post .iner-img { height: 400px} .main-post .iner-img img { width: 100%; height: 100%; object-fit: cover; object-position: center} .main-post .unorder-list li, .main-post .order-list li { margin-top: 10px; opacity: 0.7; padding-left: 15px; position: relative} .main-post .unorder-list li:before, .main-post .order-list li:before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: #ccc; position: absolute; left: 0; top: 10px} .main-post .order-list li { padding-left: 0} .main-post .order-list li:before { display: none} .main-post .order-list li span { font-size: 13px} .main-post .info-area { border-top: 1px solid rgba(255, 255, 255, 0.1)} .main-post .info-area > div:first-child { flex: 1; min-width: 0} .main-post .info-area > div:last-child { flex-shrink: 0} .main-post .info-area .tags span, .main-post .info-area .share-icon span { font-size: 14px; margin-right: 5px; opacity: 0.7; white-space: nowrap} .main-post .info-area .tags a, .main-post .info-area .share-icon a { padding: 7px 20px; font-size: 13px; background: rgba(255, 255, 255, 0.02); border-radius: 30px; margin-right: 5px; transition: all 0.4s} .main-post .info-area .tags a:hover, .main-post .info-area .share-icon a:hover { background: #DDF160 !important; color: #171717} .main-post .info-area .share-icon { gap: 10px; flex-shrink: 0; white-space: nowrap} .main-post .info-area .share-icon > div:first-child { margin-right: 10px; flex-shrink: 0} .main-post .info-area .share-icon > div:first-child span { white-space: nowrap} .main-post .info-area .share-icon > div:last-child { display: flex; gap: 10px; flex-shrink: 0} .main-post .info-area .share-icon a { width: 40px; height: 40px; line-height: 40px; font-size: 12px; text-align: center; padding: 0; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.1); margin-right: 0; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0} .main-post .author-area { padding: 40px; background: rgba(255, 255, 255, 0.02); border-radius: 30px} .main-post .author-area .author-img .img { width: 100px; height: 100px; border-radius: 50%; overflow: hidden} .main-post .next-prv-post .thumb-post { width: 100%; padding: 40px; position: relative; overflow: hidden; z-index: 2} .main-post .next-prv-post .thumb-post:after { content: ""; background: #161616; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border: 1px solid rgba(255, 255, 255, 0.1); z-index: -1; opacity: 0.7; transition: all 0.4s} .main-post .next-prv-post .thumb-post:first-of-type { margin-right: 15px} .main-post .next-prv-post .thumb-post:last-of-type { margin-left: 15px} .comments-post .item-box { position: relative} .comments-post .item-box p { font-size: 14px; width: 80%} .comments-post .item-box.replayed { margin-left: 30px} .comments-post .item-box .replay-butn { position: absolute; top: 15px; right: 15px} .comments-post .item-box .replay-butn a { font-size: 13px; padding: 8px 20px; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 30px; transition: all 0.4s} .comments-post .item-box .replay-butn a:hover { background: #DDF160; color: #1d1d1d} .marq-brand .item { padding: 0 10px !important; text-align: center} .marq-brand .item a { width: 220px; height: 180px; line-height: 180px; background: #1C1C1C; border: 1px solid transparent; border-radius: 50px; transition: all 0.4s} .marq-brand .item a img { vertical-align: middle; max-width: 120px; opacity: 0.5; transition: all 0.5s} .marq-brand .item a:hover { background: transparent; border-color: rgba(255, 255, 255, 0.1)} .marq-brand .item a:hover img { opacity: 1} .marq-brand a:hover img { opacity: 1} .marq-brand a img { vertical-align: middle; max-width: 100px; opacity: 0.5; transition: all 0.5s} .brand-style1 .item { height: 180px; line-height: 180px; text-align: center; border: 1px solid rgba(255, 255, 255, 0.2); backdrop-filter: blur(5px); border-radius: 50px; margin: 15px 0} .brand-style1 .item img { max-width: 100px} .brand-style1 .item.bg-img { background-size: 30px !important; background-repeat: repeat; backdrop-filter: none; overflow: hidden; opacity: 0.05} .brand-style1 .item:hover { background: #fff} .brand-style1 .item:hover img { filter: invert(1)} .call-action1 .box-cont { position: absolute; bottom: 0; left: 0; width: 100%; height: 100%} .call-action1 .box-cont .cont { background: #fff; padding: 40px} .contact input, .contact textarea { width: 100%; border: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.2); background: transparent; color: #fff; padding: 15px 0; transition: all 0.4s} .contact input:focus, .contact textarea:focus { border-color: #fff} .contact textarea { min-height: 300px} .contact button { border-radius: 30px; border: 0; transition: all 0.4s} .contact button:hover { background: #DDF160} .contact .info-box { padding: 80px 40px; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 30px; position: relative; overflow: hidden} .contact .info-box:after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url(../imgs/map.png); background-size: cover; opacity: 0.3; z-index: -1} .contact .info-box .phone { color: #FF6A3A} .contact .form2 input, .contact .form2 textarea { padding: 20px 30px; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 30px} .contact .form2 input:focus, .contact .form2 textarea:focus { border-color: #fff} .contact-style1 { color: #fff} .contact-style1 p { color: #b1b1b1} .contact-style1 .contact-form label { font-size: 14px; margin-bottom: 5px} .contact-style1 .contact-form label .star { color: red; padding-left: 5px} .contact-style1 .contact-form input, .contact-style1 .contact-form textarea { color: #fff; background: transparent; width: 100%; padding: 0 0 10px; border: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.2); font-size: 18px} .contact-style1 .contact-form button { border: 0} .contact-style1 .box { padding: 80px 50px; background: rgba(45, 45, 45, 0.2); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 50px} .google-map { height: 450px; width: 100%; position: relative; filter: grayscale(100%)} .google-map iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%} .price-style1 .item { padding: 40px; border: 1px solid rgba(255, 255, 255, 0.1)} .price-style1 .item .info { padding-bottom: 40px; margin-bottom: 40px; border-bottom: 1px solid rgba(255, 255, 255, 0.1)} .price-style1 .item .info span { opacity: 0.7} .price-style1 .item ul { padding: 0} .price-style1 .item li { position: relative; margin: 15px 0; padding-left: 30px} .price-style1 .item li:before { content: ""; position: absolute; top: 40%; left: 0; width: 5px; height: 5px; background: #fff; border-radius: 50%} .price-style1 .butn { background: #fff; border: 1px solid rgba(255, 255, 255, 0.2); color: #000; transition: all 0.4s} .price-style1 .butn.active { background: #DDF160} .price-style1 .butn:hover { background: transparent; color: #fff} .footer-style1 .fo-box-left, .footer-style1 .fo-box-right { background: #1C1C1C; border-radius: 15px; overflow: hidden; min-height: 500px; height: 100%; padding: 40px} .footer-style1 .fo-box-left { position: relative; z-index: 2} .footer-style1 .fo-box-left:after { content: ""; position: absolute; top: -5%; right: -5%; width: 100%; height: 100%; background-image: url(../imgs/map-global.png); background-size: 50%; background-position: top right; background-repeat: no-repeat; pointer-events: none; z-index: -1} .footer-style1 .fo-box-left .tags a { font-size: 14px; padding: 12px 25px; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 30px; margin: 4px 0} .footer-style1 .fo-box-left .tags a:hover { border-color: #fff} .footer-style1 .fo-box-right .social-icon-circle a:hover { background: #fff; color: #000} .footer-style1 .fo-box-right .subscribe input { font-size: 14px; border-radius: 60px} .footer-style1.contact-footer .contact textarea { min-height: 220px} .footer-style1.contact-footer .contact .form2 input, .footer-style1.contact-footer .contact .form2 textarea { border-radius: 15px; backdrop-filter: blur(10px)} footer .subscribe input { background: rgba(255, 255, 255, 0.05); border-radius: 5px; border: 0; padding: 15px; color: #fff} footer .subscribe button { background: transparent; border: 0; position: absolute; top: calc(50% - 15px); right: 5px} footer .subscribe p a { color: #fff} .footer-style4 { position: relative; padding: 0 15px 15px} .footer-style4 .eml .sub-title { margin-bottom: 15px} .footer-style4 .column li { display: inline-block; margin-right: 30px} .footer-style4 .column li:last-of-type { margin-right: 0} .footer-style4 .bord .links li { display: inline-block; margin-right: 30px} .footer-style4 .bord .links li:last-of-type { margin-right: 0} .footer-style4 .logo img { max-width: 100px} .footer-style4.contact-footer .contact textarea { min-height: 220px} .hero-style1 { position: relative; padding: 200px 0 120px; z-index: 10} .hero-style1 .bg-img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1} .hero-style1:after { content: ""; position: absolute; left: 0; bottom: -5px; height: 100%; width: 100%; background: linear-gradient(transparent, #161616)} .hero-style1 h1 { line-height: 1} .hero-style1 .tags a { width: max-content; padding: 10px 20px; border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 30px; font-size: 14px; margin: 3px 0; transition: all 0.4s} .hero-style1 .tags a:hover { background: #fff; color: #000} .hero-style1 .circle-button { margin-top: -30px} .hero-style1 .circle-button svg { fill: #fff} .hero-style2 .main-box { color: #fff; height: 870px; padding: 60px 40px; background-image: linear-gradient(30deg, #303030, #1C1C1C); overflow: hidden; position: relative} .hero-style2 .main-box .bg-img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0.4; pointer-events: none} .hero-style2 .main-box:after { content: ""; position: absolute; bottom: -30%; right: 0; width: 100%; height: 100%; background-image: url(../imgs/hero/md.png); background-size: cover; pointer-events: none} .hero-style2 .caption h1 { font-size: 65px; line-height: 1} .hero-style2 .caption h1 .main-marq { display: inline-block; width: 280px; padding: 15px 0; border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 50px; margin-bottom: -15px; overflow: hidden} .hero-style2 .caption h1 .main-marq .box { animation: slide-har 30s linear infinite} .hero-style2 .caption h1 .main-marq .box .item { padding: 0 15px} .hero-style2 .caption h1 .main-marq .box .item h5 { font-size: 42px} .hero-style2 .caption h1 .main-marq .box .w-30px { line-height: 1; display: flex; align-items: center} .hero-style2 .caption h1 p { display: inline-block; width: 250px; padding-right: 15px; text-align: right; line-height: 1.4} .hero-style2 .gl-rate { position: absolute; bottom: 40px; left: 40px; width: max-content; background: rgba(0, 0, 0, 0.08); backdrop-filter: blur(10px); border-radius: 60px; padding: 10px 20px; z-index: 3} .hero-style2 .gl-rate .icon { width: 35px} .hero-style2 .gl-rate .cont { padding-left: 30px} .hero-style2 .gl-rate .cont h6 { line-height: 1; font-weight: 600; font-size: 18px} .hero-style2 .gl-rate .cont .stars { font-size: 13px; color: #FFA826; margin-left: 10px} .hero-style2 .gl-rate .cont p { color: #eee; font-size: 12px; margin-top: 2px} .hero-style2 .right-column { display: flex; flex-direction: column; justify-content: space-between} .hero-style2 .serv { background: #fff; color: #1f1f1f; border-radius: 15px; padding: 20px; overflow: hidden} .hero-style2 .serv .content { position: relative; height: 300px} .hero-style2 .serv .content .item { position: absolute; top: 0; left: 0; width: max-content; display: inline-block; user-select: none; pointer-events: auto; transition: none} .hero-style2 .serv .content .item span { font-size: 16px; padding: 8px 24px; background: #EFF0FA; color: #1f1f1f; border-radius: 30px} .hero-style2 .serv .content .item span.bdark { background: #9F8BE7; color: #fff} .hero-style2 .serv .content .item span.bred { background: #DDF160; color: #1f1f1f} .hero-style2 .serv .content .item img { width: 50px} .hero-style2 .serv .content .item .icon1 img { width: 70px} .hero-style2 .awards { background: #9F8BE7; border-radius: 15px; overflow: hidden; height: 100%; padding: 0 30px 30px 30px; position: relative} .hero-style2 .awards .awards-swiper { height: 100%} .hero-style2 .awards .awards-swiper .swiper-slide { display: flex; align-items: center} .hero-style2 .awards .item { width: 100%} .hero-style2 .awards .item .img { width: 140px; margin: auto} .hero-style2 .awards .item span { font-size: 14px; line-height: 1.4; position: absolute; left: 0; bottom: 0} .hero-style2 .awards .controls { position: absolute; bottom: 0; right: 0; display: flex; align-items: center} .hero-style2 .awards .controls .swiper-button-next, .hero-style2 .awards .controls .swiper-button-prev { position: static; width: 30px; height: 30px; line-height: 30px; text-align: center; font-size: 12px; color: #fff; border: 1px solid #fff; border-radius: 50%; margin: 0 2px} .hero-style2 .awards .controls .swiper-button-next:hover, .hero-style2 .awards .controls .swiper-button-prev:hover { background: #fff; color: #1f1f1f} .hero-style2 .awards .controls .swiper-button-next:after, .hero-style2 .awards .controls .swiper-button-prev:after { display: none} .hero-style3 { padding: 220px 0 120px; position: relative} .hero-style3:after { content: ""; position: absolute; left: 0; bottom: -5px; height: 100%; width: 100%; background: linear-gradient(transparent, #161616)} .hero-style3 .main-marq h4 { font-weight: 200; line-height: 1.2} .hero-style4 { padding: 220px 0 60px; position: relative} .hero-style4 .container { position: relative; z-index: 9999999} .hero-style4 h1 { font-size: 17.5vw} .hero-style4 .tags a { padding: 10px 20px; border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 30px; font-size: 14px; margin: 5px 5px 5px 0; transition: all 0.4s} .hero-style4 .tags a:hover { background: #fff; color: #000} .hero-style5 .snap-slide .img, .hero-style5 .snap-slide .hero-video-wrapper { height: 100%} .hero-style5 .snap-slide .main-img .numb { font-size: 120px; font-weight: 300} .hero-style5 .snap-slider-thumbs-wrapper { width: 350px; height: 480px; border-radius: 250px; box-shadow: none} .hero-style5 .snap-slide-caption { padding: 10px 0} .hero-style5 .snap-slider-captions { position: absolute; top: 0; z-index: 99; box-sizing: border-box; width: 100%; height: 100vh; overflow: hidden; display: flex; justify-content: center; align-items: center} .hero-style5 .snap-slider-captions h1 { font-size: 64px} .hero-style5 .snap-slider-captions span { font-size: 18px} .hero-style5 .snap-slider-captions .tag { font-size: 14px; padding: 9px 20px; border: 1px solid rgba(255, 255, 255, 0.8); background: rgba(187, 187, 187, 0.08); backdrop-filter: blur(10px); border-radius: 30px} .hero-style5 .snap-slider-captions-wrapper { width: 100%; height: 90px; display: block; position: relative; overflow: hidden} .hero-style5.shwocase .snap-slider-captions { align-items: end; height: 90vh} .hero-style5.shwocase .snap-slider-thumbs-wrapper { width: 320px; height: 350px; border-radius: 100px; box-shadow: none} .hero-style6 h1 { font-size: 22vw; font-weight: 700; line-height: 1; margin-bottom: -80px; z-index: -1} .hero-style7 { padding: 180px 0 0; position: relative; background-position: bottom} .hero-style7 .img:after { content: ""; position: absolute; top: -15px; right: -15px; left: 0; bottom: 0; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 300px; z-index: -1} .hero-style7 .exp { padding: 20px; border-radius: 15px; background: rgba(45, 45, 45, 0.2); backdrop-filter: blur(10px); position: absolute; bottom: 20%; right: 0; transform: translateX(60%); box-shadow: 4px 4px 4px rgba(255, 255, 255, 0.5)} .hero-style7 .fit-img { border-radius: 300px} .content__img { width: 225px; height: 170px; border-radius: 10px; position: absolute; top: 170px; left: 0px; opacity: 0; overflow: hidden; will-change: transform, filter} .content__img-inner { background-position: 50% 50%; width: calc(100% + 20px); height: calc(100% + 20px); background-size: cover; position: absolute; top: -10px; left: -10px} .left-side { height: 100vh; width: 350px !important; padding: 20px 40px 40px 40px; display: flex; flex-direction: column; justify-content: space-between} .left-side .info .circle-text { width: 220px; height: 220px; border: 1px solid rgba(255, 255, 255, 0.1); padding: 15px; border-radius: 50%; position: relative; margin: auto} .left-side .info .circle-text .icon { position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); width: 40px} .left-side .info .cont li { font-size: 18px} .left-side .info .cont span { color: #808080; font-size: 14px} .left-side .info .cont .social-icon a { font-size: 14px; width: 50px; height: 50px; line-height: 50px; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 50%; margin: 0 2px; transition: all 0.4s} .left-side .info .cont .social-icon a:hover { background: #fff; color: #1f1f1f} .left-side .butn { text-align: center; width: 100%} .left-side .butn.butn-bord { border: 1px solid rgba(255, 255, 255, 0.3); padding: 10px} .left-side .butn.butn-bord:hover { background: #fff; color: #1d1d1d} .left-side .butn.butn-bord:hover span { color: #1d1d1d} .left-side .butn.butn-bord:hover .icon { color: #1d1d1d} .left-side .butn > div { margin: auto; width: max-content} .right-side { width: calc(100% - 350px) !important} .pg-hero { padding: 200px 0 0} .faq-style1 .accordion-item { background: transparent; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 15px; padding: 30px 50px} .faq-style1 .accordion-item h6 { font-weight: 300} .faq-style1 .accordion-item .arrow { filter: invert(1)} .faq-style1 .accordion-item.active { background: rgba(255, 255, 255, 0.02)} .faq-style1 .accordion-item.active h6 { font-weight: 500} .snap-slide { width: 100%; height: 100vh; position: relative; overflow: hidden; display: flex; justify-content: center; align-items: center} .snap-slide .main-img { width: 100%; height: 100%; display: block; position: relative; top: 0; left: 0} .snap-slide .main-img .cont { position: absolute; top: 50%; left: 0; width: 100%; transform: translateY(-50%); z-index: 99999} .snap-slide .main-img .cont .tags a { font-size: 14px; padding: 10px 20px; border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 30px; margin: 0 5px} .snap-slide .main-img .numb { position: absolute; bottom: 0; right: 5%; line-height: 1; font-size: 10vw; font-weight: 100; opacity: 0.2; z-index: 9999} .rounded-borders .snap-slide .main-img { border-radius: 0} .snap-slide .img { -webkit-transform: scale(1.03); transform: scale(1.03); height: 100%} .snap-slide .img img, .snap-slide .img .hero-video-wrapper { width: 100%; height: 100%; position: relative; display: block; z-index: 100; object-position: center; object-fit: cover} .snap-slider-thumbs { position: absolute; top: 0; z-index: 5; box-sizing: border-box; width: 100%; height: 100vh; overflow: hidden; display: flex; justify-content: center; align-items: center} .snap-slider-thumbs-wrapper::before { float: left; padding-top: 70%; content: ""} .snap-slider-thumbs-wrapper { width: 20vw; height: 20vw; border-radius: 50%; display: block; position: relative; overflow: hidden; box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.2)} .rounded-borders .snap-slider-thumbs-wrapper { border-radius: 6px} .thumb-slide { position: relative; width: 100%; height: 100%; overflow: hidden; cursor: pointer} .show-loader .thumb-slide { pointer-events: none} .thumb-slide-img { position: relative; width: 100%; height: 100%; overflow: hidden} .hr-sec .hr-container { width: max-content; display: flex; flex-wrap: nowrap} .hr-sec .item-panel { width: 750px; height: 100%; padding: 0 15px} .hr-sec .item-panel .see-more { position: absolute; top: 0; left: calc(100% + 15px); width: calc(100% - 15px); height: 100%} .hr-sec .fit-img { height: 70vh; min-height: 480px; border-radius: 30px; overflow: hidden; position: relative} .hr-sec .fit-img .cont { position: absolute; bottom: 30px; left: 30px} .hr-sec .fit-img .cont .tags { overflow: hidden} .hr-sec .fit-img .cont .tags span { width: max-content; display: block; padding: 12px 20px; background: #fff; color: #0f0f0f; border-radius: 10px; margin: 5px 0; transform: translateY(50px); opacity: 0; transition: all 0.4s} .hr-sec .fit-img:hover .cont .tags span { opacity: 1; transform: translateY(0)} .hr-sec .fit-img:hover .cont .tags span:nth-of-type(2) { transition-delay: 0.1s} .hr-sec .fit-img:hover .cont .tags span:nth-of-type(3) { transition-delay: 0.2s} .hr-sec .fit-img:hover .cont .tags span:nth-of-type(4) { transition-delay: 0.3s} .portfolio-style1 .item { position: relative} .portfolio-style1 .item .img { position: relative; border-radius: 10px; height: 400px; overflow: hidden} .portfolio-style1 .item .img img { height: 500px} .portfolio-style1 .item .img .tags { position: absolute; right: 15px; top: 15px; z-index: 7} .portfolio-style1 .item .img .tags a { color: #fff; font-size: 13px; padding: 7px 15px; border-radius: 30px; background: rgba(0, 0, 0, 0.2); backdrop-filter: blur(5px); transition: all 0.4s} .portfolio-style1 .item .img .tags a:hover { background: #DDF160; color: #1f1f1f} .portfolio-style1 .item .img:after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to top, #1f1f1f, transparent); opacity: 0.7} .portfolio-style1 .item h6 { position: absolute; bottom: 20px; left: 20px; color: #fff; z-index: 3} .portfolio-style2 { padding-top: 140px !important} .portfolio-style2 .item .fit-img { position: relative} .portfolio-style2 .item .fit-img .tag { padding: 10px 20px; background: rgba(0, 0, 0, 0.3); backdrop-filter: blur(10px); border-radius: 30px; font-size: 14px; position: absolute; top: 15px; right: 15px; opacity: 0; transition: all 0.4s} .portfolio-style2 .item:hover .fit-img .tag { opacity: 1} .portfolio-style2.overlay .item { position: relative} .portfolio-style2.overlay .item h6 { font-size: 30px; position: absolute; bottom: 30px; left: 30px; opacity: 0; transform: translateY(30px); transition: all 0.4s; z-index: 3} .portfolio-style2.overlay .item .tag { z-index: 3} .portfolio-style2.overlay .item:after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to top, #161616, transparent); border-radius: 30px; opacity: 0; transition: all 0.4s} .portfolio-style2.overlay .item:hover .tag, .portfolio-style2.overlay .item:hover h6 { opacity: 1; transform: translate(0)} .portfolio-style2.overlay .item:hover:after { opacity: 0.5} .portfolio-style2 .portfolio-vertical { padding: 40px; position: relative} .portfolio-style2 .portfolio-vertical:after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(#1C1C1C, transparent, #1C1C1C); z-index: 5; pointer-events: none} .portfolio-style2 .portfolio-vertical .swiper-container { width: 100%; height: 100%} .portfolio-style2 .portfolio-vertical .swiper-wrapper { flex-direction: column} .portfolio-style2 .portfolio-vertical .swiper-slide { font-size: 40px; font-weight: 500; display: flex; align-items: center; opacity: 0.5; transition: opacity 0.4s} .portfolio-style2 .portfolio-vertical .swiper-slide.swiper-slide-active { opacity: 1} .portfolio-style3 .lg-text h2 { font-size: 22vw} .portfolio-style3 .item { position: relative} .portfolio-style3 .item::after { position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; content: ""; background: linear-gradient(to top, rgba(0, 0, 0, 0.3), transparent)} .portfolio-style3 .item .tags { position: absolute; top: 30px; right: 30px; z-index: 2} .portfolio-style3 .item .tags span { padding: 10px 20px; background: rgba(40, 40, 40, 0.3); backdrop-filter: blur(10px); border-radius: 30px; font-size: 14px} .portfolio-style3 .item .text { position: absolute; bottom: 50px; left: 50px; z-index: 2} .portfolio-style3 .item .text.w-100 { left: 0} .portfolio-crev .work-boxs { display: flex} .portfolio-crev .item { width: 33.333%; max-height: 90vh; height: 600px; margin: 0 4px; display: flex; cursor: pointer; transition: all 0.4s} .portfolio-crev .item .bg-img { width: 100%; height: 100%; background-size: cover; background-position: center center; position: relative; border-radius: 10px; overflow: hidden} .portfolio-crev .item .bg-img .cont { position: absolute; left: 30px; bottom: 30px; right: 30px; padding: 20px; border-radius: 10px; background: #fff; color: #0f0f0f; opacity: 0; visibility: hidden; transition: all 0.4s} .portfolio-crev .item .bg-img .cont.dark-st h5, .portfolio-crev .item .bg-img .cont.dark-st span { background: #0f0f0f} .portfolio-crev .item .bg-img .cont h5, .portfolio-crev .item .bg-img .cont span { transform: translateY(15px); opacity: 0; transition: all 0.4s; transition-delay: 0} .portfolio-crev .item .bg-img .cont h5 { text-decoration: underline; margin-bottom: 10px} .portfolio-crev .item .bg-img .cont span { color: #494949} .portfolio-crev .item.active { width: calc(100vw - 420px)} .portfolio-crev .item.active .bg-img .cont { opacity: 1; visibility: visible} .portfolio-crev .item.active .bg-img .cont h5, .portfolio-crev .item.active .bg-img .cont span { transform: none; opacity: 1} .portfolio-crev .item.active .bg-img .cont h5 { transition-delay: 0.3s} .portfolio-crev .item.active .bg-img .cont span { transition-delay: 0.6s} .portfolio-elegant .work-boxs { display: flex} .portfolio-elegant .item { width: 25%; margin: 0 5px; display: flex; cursor: pointer; transition: all 0.7s} .portfolio-elegant .item .bg-img { width: 100%; height: 550px; background-size: cover; background-position: center center; position: relative; overflow: hidden} .portfolio-elegant .item .cont { padding: 0 15px; transition: all 0.4s} .portfolio-elegant .item .cont h6 { font-size: 18px} .portfolio-elegant .item .cont span { opacity: 0; transition: all 0.4s; color: #ccc} .portfolio-elegant .item .cont.hide { opacity: 0; visibility: hidden} .portfolio-elegant .item.active { width: calc(100vw - 420px)} .portfolio-elegant .item.active .cont { opacity: 1 !important; visibility: visible} .portfolio-elegant .item.active .cont span { opacity: 1} .parallax-slider-wrapper { position: fixed; top: 0; left: 0; width: 100%; height: 100vh} .parallax-slider-wrapper .parallax-sliders { position: absolute; top: 0; left: 0; width: 3800px; height: 100%} .parallax-slider-wrapper .parallax-slider-inner { position: absolute; top: 50%; transform: translateY(-50%); height: 80%; width: 100%; display: flex; gap: 30px; left: 70px; margin-top: 15px} .parallax-slider-wrapper .parallax-item { position: relative; width: 500px; height: 100%; border-radius: 50px; overflow: hidden} .parallax-slider-wrapper .parallax-item:hover .parallax-content { bottom: 0; opacity: 1; visibility: visible} .parallax-slider-wrapper .parallax-item:hover .parallax-img::after { opacity: 1; height: 100%; visibility: visible} .parallax-slider-wrapper .parallax-content { color: #fff; position: absolute; bottom: -100px; left: 0; z-index: 55; overflow: hidden; opacity: 0; visibility: hidden; margin: 40px 40px 30px 35px; transition: 0.4s} .parallax-slider-wrapper .parallax-content span { font-size: 18px; text-transform: uppercase; line-height: 1; display: block; margin-bottom: 10px} .parallax-slider-wrapper .parallax-content h4 { font-size: 40px; line-height: 1; padding-bottom: 10px; letter-spacing: -2px} .parallax-slider-wrapper .parallax-img { position: absolute; top: 0; left: 0; height: 100%; width: 800px; background-size: cover; background-position: center; margin-left: -100px} .parallax-slider-wrapper .parallax-img::after { position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; content: ""; opacity: 0; visibility: hidden; transition: 0.4s; background-color: rgba(0, 0, 0, 0.3)} .showcase-full { position: relative} .showcase-full .parallax-slider-full .caption { position: relative} .showcase-full .parallax-slider-full .caption h1 { font-size: 110px; position: relative; line-height: 1.2} .showcase-full .parallax-slider-full .swiper-slide-active .caption .discover { opacity: 1; transition: all 0.7s} .showcase-full .swiper-slide { position: relative; overflow: hidden; width: 100%; min-height: 100vh; padding: 80px 0} .showcase-full .swiper-slide .bg-img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-size: cover; background-position: center center} .showcase-full .caption h6 { font-size: 20px; font-weight: 400} .showcase-full .slider-contro { position: absolute; bottom: 60px; left: 80px; width: calc(100% - 160px)} .showcase-full .slider-contro i { margin: 0 10px; color: #fff} .showcase-full .slider-contro span { color: #fff; white-space: nowrap} .showcase-full .dots { bottom: 50px; z-index: 1} .showcase-full .dots span { background: #fff; width: 5px; height: 5px; margin: 0 7px !important; border-radius: 50% !important} .showcase-full .dots span.swiper-pagination-bullet-active { position: relative} .showcase-full .dots span.swiper-pagination-bullet-active:after { content: ""; position: absolute; top: -5px; left: -5px; right: -5px; bottom: -5px; border: 1px solid #fff; border-radius: 50%} .showcase-full .swiper-button-next:after, .showcase-full .swiper-button-prev:after { display: none} .hero-style5-showcase .snap-slide .img, .hero-style5-showcase .snap-slide .hero-video-wrapper { height: 100%} .hero-style5-showcase .snap-slide .main-img .numb { font-size: 120px; font-weight: 300} .hero-style5-showcase .snap-slider-thumbs-wrapper { width: 320px; height: 350px; border-radius: 100px; box-shadow: none} .hero-style5-showcase .snap-slide-caption { padding: 10px 0} .hero-style5-showcase .snap-slider-captions { position: absolute; top: 0; z-index: 99; box-sizing: border-box; width: 100%; height: 100vh; padding-bottom: 50px; overflow: hidden; display: flex; align-items: flex-end} .hero-style5-showcase .snap-slider-captions h1 { font-size: 64px} .hero-style5-showcase .snap-slider-captions span { font-size: 18px} .hero-style5-showcase .snap-slider-captions .tag { font-size: 14px; padding: 9px 20px; border: 1px solid rgba(255, 255, 255, 0.8); background: rgba(187, 187, 187, 0.08); backdrop-filter: blur(10px); border-radius: 30px} .hero-style5-showcase .snap-slider-captions-wrapper { width: 100%; height: 90px; display: block; position: relative; overflow: hidden} .inter-links-center { position: relative; min-height: 100vh; padding: 120px 0; overflow: auto} .inter-links-center::-webkit-scrollbar { width: 0} .inter-links-center::-webkit-scrollbar-track { background: transparent} .inter-links-center::-webkit-scrollbar-thumb { background: #999; border-radius: 10px} .inter-links-center::-webkit-scrollbar-thumb:hover { background: #555} .inter-links-center .links-text li { padding: 30px 0; width: max-content; position: relative; z-index: 9} .inter-links-center .links-text li .text { transition: all 0.4s; -webkit-text-stroke: 1px transparent} .inter-links-center .links-text li.no-active { opacity: 0.3} .inter-links-center .links-text li.no-active .text { color: transparent; -webkit-text-stroke: 1px #fff} .inter-links-center .links-text li h2 { text-transform: uppercase} .inter-links-center .links-text li h2 a .tag { font-size: 14px; display: block; font-weight: 400} .inter-links-center .links-text li h2 a .text { font-weight: 800; font-size: 80px; letter-spacing: -4px} .inter-links-center .links-text li h2 .num { font-size: 14px; font-weight: 600; opacity: 0.7; margin-right: 15px} .inter-links-center .links-img { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; overflow: hidden} .inter-links-center .links-img:after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.1)} .inter-links-center .links-img .img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transform: scale(1.1, 1.1); transition: all 0.7s} .inter-links-center .links-img .img.current { transform: scale(1); opacity: 1} .inter-links-center .links-img .img img { width: 100%; height: 100%; object-fit: cover} .link-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%} .interactive-sec .cluom { padding: 20px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.05); position: relative; cursor: pointer} .interactive-sec .cluom:first-of-type { padding-top: 0} .interactive-sec .cluom:after { content: ""; position: absolute; bottom: 0; left: 0; width: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.7); transition: all 0.4s} .interactive-sec .cluom h3 { opacity: 0.5; transition: all 0.4s} .interactive-sec .cluom.current h3 { opacity: 1} .interactive-sec .cluom.current:after { width: 100%} .interactive-sec .glry-img { width: 100%; height: 100%; position: relative} .interactive-sec .glry-img .tab-img { position: absolute; top: 15px; left: 0; padding: 10px; border-radius: 15px; background: rgba(255, 255, 255, 0.05); transform: translateY(30px); max-width: 350px; opacity: 0; visibility: hidden; transition: all 0.7s} .interactive-sec .glry-img .tab-img.current { opacity: 1; visibility: visible; transform: translateY(0)} .interactive-sec .glry-img .tab-img:nth-of-type(2) { top: 40px} .interactive-sec .glry-img .tab-img:nth-of-type(3) { top: 65px} .interactive-sec .glry-img .tab-img:nth-of-type(4) { top: 90px} .interactive-sec .glry-img .tab-img:nth-of-type(5) { top: 115px} .interactive-sec .glry-img .tab-img .img.fit-img { height: 400px !important; min-height: 400px; margin-bottom: 0} .interactive-sec .glry-img .tab-img .img.fit-img img { object-fit: cover; object-position: center; width: 100%; height: 100%} .interactive-sec .glry-img .tab-img .cont { margin-top: 0; padding-top: 15px} .interactive-sec .blog-style2 .swiper-container .swiper-wrapper .swiper-slide .item { margin-bottom: 0 !important} .serv-style1 .accordion > .row { border-top: 1px dashed rgba(255, 255, 255, 0.5); margin: 0} .serv-style1 .accordion > .row:last-of-type { border-bottom: 1px dashed rgba(255, 255, 255, 0.5)} .serv-style1 .accordion-item { padding: 20px 0; background: transparent; border-radius: 0} .serv-style1 .accordion-item .icon-arrow { width: 40px; height: 40px; line-height: 40px; text-align: center; border: 1px solid transparent; border-radius: 50%} .serv-style1 .accordion-item.active .icon-arrow { border-color: rgba(255, 255, 255, 0.5)} .serv-style1 .accordion-collapse { border-radius: 0} .serv-style1 .accordion-body { padding: 0} .serv-style1 .tags a { margin-top: 10px; width: max-content; padding: 10px 20px; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 30px; font-size: 12px} .serv-style2 .item { min-height: 580px} .serv-style2 .item .cont { padding: 60px} .serv-style2 .item .cont .tags span { padding: 10px 20px; border: 1px solid rgba(255, 255, 255, 0.5); border-radius: 30px; font-size: 14px; margin: 4px 2px; transition: all 0.4s} .serv-style2 .item .cont .tags span:hover { background: #fff; color: #1f1f1f} .serv-style2 .item.bg-light .cont .tags span { border-color: rgba(0, 0, 0, 0.5)} .serv-style2 .item.bg-light .cont .tags span:hover { background: #1f1f1f; color: #fff} .serv-style2 .item .fit-img { position: relative} .serv-style2 .item .fit-img img, .serv-style2 .item .fit-img video { position: absolute; top: 0; left: 0; object-position: left} .serv-style3 .item { position: relative; padding: 60px 40px; border-radius: 30px; background: #1C1C1C; min-height: 520px; overflow: hidden; z-index: 2} .serv-style3 .item .img { position: absolute; bottom: -40px; right: -40px; height: 55%; filter: grayscale(1); mix-blend-mode: multiply; opacity: 0.4; z-index: -1} .serv-style3 .item .img img { width: auto; height: 100%} .serv-style4 .item { position: relative; padding: 60px 40px; border-radius: 30px; border: 1px solid rgba(255, 255, 255, 0.3); min-height: 520px; overflow: hidden; transition: all 0.4s; z-index: 2} .serv-style4 .item .img { position: absolute; bottom: -40px; right: -40px; height: 50%; opacity: 0.7; transition: all 0.4s; z-index: -1} .serv-style4 .item .img img { width: auto; height: 100%} .serv-style4 .item:hover { background: #DDF160 !important; color: #1f1f1f} .serv-style4 .item:hover .img { filter: grayscale(1); mix-blend-mode: multiply} .serv-style4 .item:hover p { color: #4e4b4b} .serv-style4 .item:hover .butn-more .arrow-icon { background: #ccc} .serv-style6 .item { transition: all 0.4s; margin-bottom: 15px} .serv-style6 .item h3 { font-weight: 600} .serv-style6 .item .imgs .fit-img { transition: all 0.4s; opacity: 0} .serv-style6 .item .imgs .fit-img:nth-of-type(1) { transform: translateX(-30px)} .serv-style6 .item .imgs .fit-img:nth-of-type(2) { transform: translateX(-15px)} .serv-style6 .item:hover .fit-img { opacity: 1; transform: translateX(0) !important} .services-reval .item-row > .row { position: relative; z-index: 9999999999} .services-reval .item-row .arrow-icon { width: 45px; height: 45px; line-height: 45px; text-align: center; border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 50%} .services-reval .item-row .arrow-icon svg { width: 30px; stroke: #fff} .services-reval .item-row:hover .arrow-icon { background: #fff} .services-reval .item-row:hover .arrow-icon svg { stroke: #000} .features .stack-title h2 { font-size: 15vw} .features .item { padding: 40px 30px; border: 1px solid rgba(255, 255, 255, 0.05); border-radius: 30px; background: #1C1C1C; position: relative; z-index: 4} .approach .item { transition: all 0.4s; overflow: hidden; border-color: rgba(255, 255, 255, 0.5); padding: 20px 0} .approach .item:hover { padding: 20px 10px; border-color: #fff} .approach .item .o-hidden { transform: translateY(40px)} .approach .item .o-hidden h2 { line-height: 1; font-size: 96px} .approach-style1 .item { padding: 40px; border-radius: 30px} .approach-style1 .item h2 { font-size: 140px; font-weight: 100; line-height: 1; opacity: 0.1} .process-style2 .img { max-width: 350px; margin: auto} .process-style2 .accordion-item { background: transparent; border: 0; border-top: 1px solid rgba(0, 0, 0, 0.2); border-radius: 0} .process-style2 .accordion-item.active { border-color: #1f1f1f} .process-style2 .accordion-item .accordion-header { background: transparent} .process-style2 .accordion-item .accordion-header button { background: transparent; color: inherit; font-size: 20px; font-weight: 500; line-height: 28px; padding: 20px 0; box-shadow: none} .process-style2 .accordion-item .accordion-header button span { font-size: 14px; margin-right: 80px} .process-style2 .accordion-item .accordion-header button:after { background-image: url(../imgs/plus-solid.svg); filter: invert(1)} .process-style2 .accordion-item .accordion-header button:not(.collapsed):after { background-image: url(../imgs/minus-solid.svg)} .process-style2 .accordion-item .accordion-body { padding: 0 0 15px 90px} .process-style2 .accordion-item .accordion-body p { font-size: 14px} .team-style1 .item { border: 1px solid rgba(255, 255, 255, 0.1); transition: all 0.4s} .team-style1 .item:hover { border-color: #fff} .team-style1 .item .social-icon-circle { position: absolute; bottom: 15px; left: 15px} .team-style1 .item .social-icon-circle a { background: rgba(41, 41, 41, 0.02); backdrop-filter: blur(10px); width: 50px; height: 50px; line-height: 50px} .team-style1 .item .social-icon-circle a:hover { background: #fff} .team-style1 .item .info span:before { content: ""; display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: #fff; margin-right: 10px} .team-intro .item { height: 100%; min-height: 440px} .team-intro .item.main-colorbg, .team-intro .item.main-colorbg2, .team-intro .item.bg-light { color: #111012} .team-intro.style2 .item { min-height: 600px} .team-reval .item-row { border-color: rgba(255, 255, 255, 0.5); transition: all 0.4s; cursor: pointer} .team-reval .item-row > .row { position: relative; z-index: 9999999999} .team-reval .item-row span { text-transform: uppercase; opacity: 0.7} .team-reval .item-row .social-icon { text-align: right} .team-reval .item-row .social-icon a { width: 45px; height: 45px; line-height: 45px; text-align: center; border-radius: 5px; background: rgba(255, 255, 255, 0.02); backdrop-filter: blur(5px); color: rgba(255, 255, 255, 0.7)} .team-reval .item-row .social-icon a:hover { background: #fff; color: #1f1f1f} .team-reval .hover-reveal-item .award-reveal-img { width: 240px; height: 280px; border-radius: 30px} .user-imgs .fit-img { width: 45px; height: 45px; border-radius: 50%; overflow: hidden; margin: 0 -10px} .user-imgs .fit-img:last-of-type { line-height: 45px; text-align: center; background: #1f1f1f; font-size: 14px} .user-imgs.style1 .fit-img { width: 60px; height: 60px} .testim-cards .stackCard, .testim-cards .item { border-radius: 30px; position: relative; width: 100%; padding: 60px 35px; transform-origin: 50% -160%; background: #1C1C1C} .testim-cards .stackCard.revs, .testim-cards .item.revs { background: #3d3d3d} .testim-style1 { position: relative; border-radius: 0 0 80px 80px; overflow: hidden} .testim-style1 .testim-sliders { position: relative} .testim-style1 .testim-sliders .main-slider { position: relative; overflow: hidden} .testim-style1 .testim-sliders .main-slider .swiper-pagination { position: absolute; bottom: 0; right: 0; left: auto; width: auto; font-size: 14px} .testim-style1 .testim-sliders .main-slider .swiper-pagination span { margin: 0 8px; width: 6px; height: 6px; border-radius: 50%} .testim-style1 .testim-sliders .main-slider .swiper-pagination .swiper-pagination-bullet-active { background: #111} .testim-style1 .testim-sliders .thumb-slider { position: relative; overflow: hidden} .testim-style1 .thumb-side { text-align: center} .testim-style1 .thumb-side .swiper-button-prev, .testim-style1 .thumb-side .swiper-button-next { position: static; margin: 0 5px; display: inline-block; color: inherit; width: 50px; height: 50px; line-height: 50px; text-align: center; border: 1px solid rgba(255, 255, 255, 0.5); border-radius: 50%} .testim-style1 .thumb-side .swiper-button-prev:after, .testim-style1 .thumb-side .swiper-button-next:after { font-size: 13px} .testim-style1 .thumb-side .swiper-button-prev:hover, .testim-style1 .thumb-side .swiper-button-next:hover { background: #fff; color: #000} .testim-style1.sub-bg { background: linear-gradient(to bottom, transparent, #1C1C1C)} .testim-style2 .item { border-radius: 30px; position: relative; width: 100%; padding: 60px 40px; background: #3d3d3d; height: 100%} .testim-style2 .item h4 { font-size: 30px} .testim-style2 .team-intro .item { min-height: auto} .testim-style3 { position: relative; z-index: 1; min-height: 400px} .testim-style3 .tobotm { margin-bottom: -30px; position: relative; z-index: 1} .testim-style3 .tobotm h2 { line-height: 1} .testim-style3 .item { padding: 60px 40px; background: rgba(255, 255, 255, 0.02); backdrop-filter: blur(5px) !important} .awards-reval .item-row { padding: 35px 30px; border-radius: 100px; border: 1px solid rgba(255, 255, 255, 0.2); margin: 15px 0; transition: 0.4s; position: relative; cursor: pointer} .awards-reval .item-row:hover { background: #fff; color: #1f1f1f} .awards-reval .item-row .row { position: relative; z-index: 5} .awards-reval .item-row .award-year { font-weight: 300; font-size: 16px; min-width: 170px} .awards-reval .item-row .award-text { font-weight: 500; font-size: 20px} .awards-reval .item-row .award-position { font-weight: 300; font-size: 18px; opacity: 0.7} .hover-reveal-item .award-reveal-img { position: absolute; top: 0; left: 0; width: 210px; height: 250px; opacity: 0; z-index: 9; overflow: hidden; pointer-events: none; border-radius: 10px; margin: -150px 0 0 -150px; -webkit-transition: opacity 0.3s, transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1); -moz-transition: opacity 0.3s, transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1); -ms-transition: opacity 0.3s, transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1); -o-transition: opacity 0.3s, transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1); transition: opacity 0.3s, transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1); transform: scale(0.4); background-repeat: no-repeat; background-size: cover} .hover-reveal-item:hover .award-reveal-img { opacity: 1} body:not(.light) .theme-icon .sun { display: none} body:not(.light) .theme-icon .moon { display: inline-block} body.light .theme-icon .sun { display: inline-block; line-height: 0} body.light .theme-icon .moon { display: none; line-height: 0} body.light { background: #fff; color: #161616} body.light p { color: #585858} body.light .loader-wrap .loader-wrap-heading .load-text { color: #fff} body.light .sub-bg { background: #eaeaea} body.light .sub-bg2 { background: #d2d1d1} body.light .bg-light { background: #1f1f1f !important; color: #fff !important} body.light .bg-light p { color: #d2d1d1} body.light .bg-light .butn-more .arrow-icon { background: #ccc} body.light .bg-light.main-colorbg { background: #DDF160 !important; color: #161616 !important} body.light .bg-light.main-colorbg p { color: #585858} body.light .bg-light.main-colorbg2 { background: #9F8BE7 !important} body.light .butn-arrow.main-colorbg { background: #9F8BE7 !important} body.light .border-color-transparent-white-light { border-color: rgba(0, 0, 0, 0.1)} body.light .cls-1 { fill: #696969 !important} body.light .invert-icon { filter: invert(0)} body.light .main-marq .box:last-of-type .item:nth-of-type(odd) h4 { color: inherit; -webkit-text-stroke: 1px inherit} body.light .main-marq:after { background: linear-gradient(to left, #ffffff, rgba(255, 255, 255, 0) 250px, rgba(255, 255, 255, 0) calc(100% - 250px), #ffffff)} body.light .user-imgs .fit-img:last-of-type { background: #eaeaea} body.light .butn-arrow { background: #111012; color: #fff; border: 1px solid rgba(17, 16, 18, 0.3)} body.light .butn-arrow .arrow-icon { background: #ededed; color: #111012} body.light .butn-arrow .arrow-icon svg { stroke: #111012} body.light .butn-arrow:hover { color: #111012} body.light .butn-arrow.main-colorbg { border: 0; color: #111012; backdrop-filter: none} body.light .butn-arrow.main-colorbg:hover { background: #111012 !important; color: #fff} body.light .butn-more .arrow-icon { background: #111012} body.light .butn-more .arrow-icon svg { stroke: #fff} body.light .butn-bord-sm { border-color: rgba(0, 0, 0, 0.5)} body.light .butn-bord-sm:before { background: #111012} body.light .circle-button .textcircle { fill: #111012} body.light .social-icon-circle a { border-color: rgba(0, 0, 0, 0.1)} body.light .social-icon-circle a:hover { background: #111012 !important; color: #fff !important} body.light .sec-head.bord, body.light .intro-style2 .item-numb.bord { border-color: rgba(0, 0, 0, 0.2); background: transparent !important} body.light .sec-head h6::before, body.light .intro-style2 li:before, body.light .list-dot.dark-style li:before { background: #111012} body.light .hero-style1 .circle-button svg { fill: #111012} body.light .hero-style1:after { background: linear-gradient(transparent, #fff)} body.light .hero-style1 .tags a, body.light .hero-style4 .tags a { border-color: rgba(0, 0, 0, 0.3)} body.light .hero-style1 .tags a:hover, body.light .hero-style4 .tags a:hover { background: #111012; color: #fff} body.light .hero-style5 { background: #161616; color: #fff} body.light .hero-style3 p { color: #d2d1d1} body.light .hero-style7 .exp { box-shadow: 4px 4px 4px rgba(185, 185, 185, 0.5)} body.light .hr-sec .item-panel .butn-arrow { background: #fff; color: #111012; border-color: rgba(255, 255, 255, 0.5)} body.light .hr-sec .item-panel .butn-arrow .arrow-icon { background: #111012; color: #fff} body.light .hr-sec .item-panel .butn-arrow .arrow-icon svg { stroke: #fff} body.light .hr-sec .item-panel .butn-arrow:hover { color: #fff} body.light .serv-style4 .item { border-color: rgba(0, 0, 0, 0.3)} body.light .interactive-sec .cluom, body.light .hero-style7 .img:after { border-color: rgba(0, 0, 0, 0.1)} body.light .interactive-sec .cluom:after { border-color: rgba(0, 0, 0, 0.7)} body.light .serv-style2 .item.bg-light .cont .tags span { border-color: rgba(255, 255, 255, 0.5)} body.light .serv-style2 .item.main-colorbg .cont .tags span, body.light .serv-style2 .item.sub-bg .cont .tags span, body.light .intro-style3 .bord { border-color: rgba(0, 0, 0, 0.5)} body.light .serv-style4 .item:hover { color: #111012 !important} body.light .services-reval .item-row .w-50px { filter: invert(1)} body.light .numbers .item { border-color: rgba(0, 0, 0, 0.3)} body.light .numbers .item:before, body.light .numbers .item:after, body.light .numbers .item span:before { background: rgba(0, 0, 0, 0.1)} body.light .features .item, body.light .intro-style2 .item-numb, body.light .interactive-sec .glry-img .tab-img { background: #eaeaea} body.light .intro-style2 .main-color { color: #9F8BE7 !important} body.light .intro-style1 { padding-top: 140px !important} body.light .intro-style1 .box-bord { border-color: rgba(0, 0, 0, 0.2)} body.light .user-imgs.style1 .bg-light img { filter: invert(1)} body.light .portfolio-style2 .portfolio-vertical:after { background: linear-gradient(#eaeaea, transparent, #eaeaea)} body.light .portfolio-style2.overlay .item h6, body.light .portfolio-style2.overlay .item .tag, body.light .portfolio-style2 .item .fit-img .tag, body.light .portfolio-style3 .item .text, body.light .portfolio-style3 .item .tags { color: #fff} body.light .portfolio-elegant.showcase .item .cont span { color: #585858} body.light .testim-style1 .thumb-side .swiper-button-prev, body.light .testim-style1 .thumb-side .swiper-button-next { border-color: rgba(0, 0, 0, 0.2)} body.light .testim-style1 .thumb-side .swiper-button-prev:hover, body.light .testim-style1 .thumb-side .swiper-button-next:hover { background: #111012; color: #fff} body.light .testim-style1.sub-bg { background: linear-gradient(to bottom, transparent, #eaeaea)} body.light .testim-cards .stackCard, body.light .testim-cards .item { background: #eaeaea} body.light .testim-cards .stackCard.revs, body.light .testim-cards .item.revs { background: #d2d1d1} body.light .testim-style3 .item { background: rgba(0, 0, 0, 0.1)} body.light .team-intro .item.bg-light { background: #eaeaea !important; color: #111012 !important} body.light .team-reval .item-row { border-color: rgba(0, 0, 0, 0.3)} body.light .team-reval .item-row .social-icon a { background: rgba(0, 0, 0, 0.05); color: #111012} body.light .team-style1 .item, body.light .faq-style1 .accordion-item, body.light .price-style1 .item { border-color: rgba(0, 0, 0, 0.1)} body.light .team-style1 .item .social-icon-circle a, body.light .faq-style1 .accordion-item .social-icon-circle a, body.light .price-style1 .item .social-icon-circle a { color: #fff; border-color: transparent} body.light .brand-style1 .item { border-color: rgba(0, 0, 0, 0.3)} body.light .brand-style1 .item img { filter: invert(1)} body.light .brand-style1 .item:hover { background: #111012} body.light .brand-style1 .item:hover img { filter: invert(0)} body.light .marq-brand .item a { background: #eaeaea} body.light .marq-brand .item a img { filter: invert(1)} body.light .awards-reval .item-row { border-color: rgba(0, 0, 0, 0.2)} body.light .contact-style1 { color: inherit} body.light .contact-style1 .contact-form input, body.light .contact-style1 .contact-form textarea { color: inherit; border-color: rgba(0, 0, 0, 0.2)} body.light .contact-style1 .contact-form input:focus, body.light .contact-style1 .contact-form textarea:focus { border-color: #111012} body.light .contact .form2 input, body.light .contact .form2 textarea { border-color: rgba(0, 0, 0, 0.2); color: inherit} body.light .blog-style1 .item .text, body.light .sidebar .widget, body.light .main-post .post-qoute { border-color: rgba(0, 0, 0, 0.1)} body.light .sidebar .search-box input { border-color: rgba(0, 0, 0, 0.5); color: #111012} body.light .sidebar .widget.catogry li:hover, body.light .sidebar .widget.last-post-thum .item .cont .tag, body.light .sidebar .widget.tags a, body.light .main-post .info-area .tags a, body.light .main-post .info-area .share-icon a, body.light .main-post .author-area { background: rgba(0, 0, 0, 0.05)} body.light .sidebar .widget.last-post-thum .item .img a .date { color: #fff} body.light .footer-style1 .fo-box-left, body.light .footer-style1 .fo-box-right { background: #eaeaea} body.light .footer-style1 .fo-box-left .tags a { border-color: rgba(0, 0, 0, 0.2)} body.light .footer-style1 .fo-box-left .tags a:hover { border-color: #111012} body.light footer .subscribe input { background: rgba(0, 0, 0, 0.05); color: #111012} body.light .footer-style1 .fo-box-right .subscribe img { filter: invert(1)} body.light footer .subscribe p a { color: #111012} body.light footer .main-color { color: #9F8BE7 !important} .navbar .home-nav-mobile { display: none} @media screen and (max-width: 992px) { .md-mb10 { margin-bottom: 10px} .md-mb15 { margin-bottom: 15px} .md-mb20 { margin-bottom: 20px} .md-mb30 { margin-bottom: 30px} .md-mb40 { margin-bottom: 40px} .md-mb50 { margin-bottom: 50px !important} .md-mb80 { margin-bottom: 80px} .md-no-mrg { margin: 0 !important} .md-pb10 { padding-bottom: 10px} .md-pb20 { padding-bottom: 20px} .md-pb30 { padding-bottom: 30px} .md-pb40 { padding-bottom: 40px} .md-pb50 { padding-bottom: 50px} .md-pb60 { padding-bottom: 60px} .md-pb70 { padding-bottom: 70px} .md-pb80 { padding-bottom: 80px} .md-pt80 { padding-top: 80px !important} .md-no-pad { padding: 0 !important} .md-center { text-align: center !important} .md-order-1 { order: 1 !important} .md-order-2 { order: 2 !important} .md-order-3 { order: 3 !important} .md-order-4 { order: 4 !important} .md-hide { display: none} .justify-end { justify-content: flex-start !important} .justify-end .vew-all { margin-left: 25px; margin-top: 25px} .justify-end .swiper-controls { margin-top: 30px} .justify-end .ml-auto { margin-left: 0; margin-top: 30px} .row.sm-marg { margin-left: -15px; margin-right: -15px} .row.sm-marg > * { padding-left: 15px; padding-right: 15px} .row.stand-marg { margin-left: -15px; margin-right: -15px} .row.stand-marg > * { padding-left: 15px; padding-right: 15px} .row.md-marg { margin-left: -15px; margin-right: -15px} .row.md-marg > * { padding-left: 15px; padding-right: 15px} .row.lg-marg { margin-left: -15px; margin-right: -15px} .row.lg-marg > * { padding-left: 15px; padding-right: 15px} .row.xlg-marg { margin-left: -15px; margin-right: -15px} .row.xlg-marg > * { padding-left: 15px; padding-right: 15px} .row.xxlg-marg { margin-left: -15px; margin-right: -15px} .row.xxlg-marg > * { padding-left: 15px; padding-right: 15px} h1 { font-size: 50px; word-break: normal; overflow-wrap: break-word; hyphens: auto} h2 { font-size: 40px} h3 { font-size: 30px} h4 { font-size: 28px} h5 { font-size: 23px} h6 { font-size: 20px} .fz-120 { font-size: 90px !important} .fz-80 { font-size: 60px !important} .fz-70 { font-size: 50px !important} .border-radius-100px { border-radius: 50px !important} .navbar .logo:after { display: none} .navbar .contact-button { display: none} .navbar .mega-menu .item-img .img { display: none} .navbar { padding-top: 15px; padding-bottom: 15px} .navbar .navbar-collapse { max-height: 440px; overflow: auto} .navbar .navbar-collapse::-webkit-scrollbar { display: none} .navbar.nav-scroll { padding-top: 15px; padding-bottom: 15px} .navbar .container { padding: 0; width: 100%; max-width: 100%; display: flex !important; justify-content: space-between !important; align-items: center !important} .navbar .navbar .home-logo-desktop { display: none !important} .navbar .navbar .home-menu-desktop, .navbar .navbar .topnav.home-menu-desktop, .navbar .navbar .topnav.home-menu-desktop .menu-icon { display: none !important} .navbar .navbar .home-nav-mobile { display: flex !important; justify-content: space-between !important; align-items: center !important; width: 100% !important} .navbar .navbar .home-nav-mobile .navbar-toggler { margin-left: auto !important; order: 2} .navbar .navbar .home-nav-mobile .logo { order: 1} .navbar .mega-menu .container { padding: 20px 10px !important} .navbar .logo { max-width: 80px !important; margin-left: 30px; order: 1} .navbar .navbar-collapse { border-top: 1px solid rgba(255, 255, 255, 0.1); margin-top: 15px; order: 3; width: 100%} .navbar .navbar-toggler { font-size: 20px; border-radius: 0; padding: 0; margin-right: 30px; margin-left: auto !important; order: 2} .navbar .navbar-toggler:focus { box-shadow: none; border: 0; outline: none} .navbar .dropdown-menu { display: none} .navbar .dropdown-menu.show { display: block; position: static} .navbar .dropdown-menu .dropdown-item .dropdown-side { display: none; position: static; width: 100%; margin-top: 15px} .navbar .dropdown-menu .dropdown-item .dropdown-side.show { display: block} .navbar .navbar-nav .nav-link { padding: 15px 30px 10px; margin: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.1)} .navbar .navbar-nav .nav-item:last-of-type .nav-link { padding-bottom: 0; border-bottom: 0} .navbar .navbar-nav .mega-menu { width: auto; position: static; padding: 0} .navbar .navbar-nav .mega-menu .item-img { font-size: 14px; color: #fff; transition: all 0.4s; padding: 10px 25px; position: relative} .navbar .navbar-nav .mega-menu .item-img .mt-15 { margin-top: 0 !important} .navbar .navbar-nav .mega-menu .item-img:after { content: ""; width: 0px; height: 1px; background: #fff; position: absolute; left: 10px; top: 18px; transition: all 0.4s} .navbar .navbar-nav .mega-menu .item-img:hover { padding-left: 30px; background: transparent} .navbar .navbar-nav .mega-menu .item-img:hover:after { width: 10px} .navbar .dark-mode-icon { display: none} .navbar .navbar-nav { background: #282828; border-radius: 5px} .navbar .dropdown-menu { border-radius: 0; background: #0c0c0c} .hamenu .menu-links .main-menu > li .link { margin-bottom: 15px} .blur-div { display: none} .butn-arrow .arrow-icon { width: 32px; height: 32px; line-height: 32px} .butn-arrow .arrow-icon svg { width: 25px} .sec-head h6 { margin-bottom: 30px} .sec-head h2 { font-size: 40px !important} .sec-head .justify-content-end { display: block !important} .sec-head .butn-more { margin-top: 30px} div[data-lag="0"] { transform: translate(0) !important} img[data-lag="0"] { transform: translate(0) !important} .hero-style1 { padding-bottom: 80px} .hero-style1 h1 { font-size: 60px !important; word-break: normal; overflow-wrap: break-word; hyphens: auto} .hr-sec .hr-container { flex-wrap: wrap; width: 100%} .hr-sec .hr-container .item-panel { height: auto; width: 50%} .hr-sec .hr-container .item-panel .fit-img { height: 480px} .hero-style3 { padding-top: 140px; text-align: center} .hero-style3 .text-indent { text-indent: 0} .main-container { position: relative} .left-side { position: absolute; top: 0; left: 0; width: 100% !important; height: auto; display: block !important; padding: 30px !important; z-index: 9999} .right-side { width: 100% !important} .hero-style2 .main-box { padding-top: 90px} .hero-style2 .main-box .caption h1 { font-size: 85px; word-break: normal; overflow-wrap: break-word; hyphens: auto} .hero-style2 .serv { margin-top: 10px; text-align: center} .hero-style2 .serv h6 { text-align: center} .hero-style2 .serv .content { margin: 0 auto; max-width: 100%; overflow: visible} .hero-style2 .awards .awards-swiper { height: 300px} .hero-style5 .snap-slider-captions-wrapper, .hero-style5-showcase .snap-slider-captions-wrapper { height: 60px} .hero-style5 .snap-slider-captions h1, .hero-style5-showcase .snap-slider-captions h1 { font-size: 40px; text-align: center; word-break: normal; overflow-wrap: break-word; hyphens: auto} .hero-style5 .snap-slider-captions, .hero-style5-showcase .snap-slider-captions { align-items: flex-end; padding-bottom: 100px} .hero-style5 .mdtop { position: static !important} .hero-style8 h1 { font-size: 74px !important; word-break: normal; overflow-wrap: break-word; hyphens: auto} .hero-style7 .caption { width: 100%; text-align: center; margin-bottom: 50px} .hero-style7 .caption .butn-arrow { margin: auto} .hero-style7 .exp { right: auto} .hero-style7 .img { max-width: 440px; margin: auto} .hero-style7 .text-align-right { text-align: center !important} .hero-style7 ul { width: 100%; display: flex; justify-content: space-around} .hero-style6 h1 { margin-bottom: 50px} .pg-hero { padding-top: 120px} .pg-hero .fs-80 { font-size: 64px !important} .pg-hero .text-align-right.md-mb80 { text-align: left !important} .pg-hero ul li { display: inline-block; margin-right: 30px} .intro-style6 h1 { margin-bottom: 50px} .intro-style6 .justify-content-end { justify-content: center !important; text-align: center} .intro-style6 .text-align-right { text-align: center !important; margin-top: 15px} .intro-style6 ul li { display: inline-block; margin: 5px 10px} .portfolio-style2 { padding-top: 100px !important} .portfolio-style2 .item { margin-bottom: 50px !important} .portfolio-style2 .item .fit-img { height: 450px !important} .testimonials-ca .sec-head .gl-rate { margin-left: 0} .serv-style4 .item { min-height: 420px} .features .item { margin-top: 0 !important; margin-bottom: 30px !important} .interactive-sec .glry-img .tab-img { max-width: 100%; top: 0 !important} .interactive-sec .glry-img .tab-img:first-of-type { position: static; margin-bottom: 50px} .serv-style2 .item { margin: 0} .serv-style2 .item .cont { padding: 60px 30px !important} .serv-style2 .item .fs-60 { font-size: 40px !important} .features.pt-0 { padding-top: 140px !important} .intro-style1 .box-bord, .intro-style1 .fit-vid { display: inline-block; margin: 0 30px 30px 0 !important; float: left} .snap-slide .main-img .cont { top: auto; bottom: 20%; transform: translate(0); text-align: center} .snap-slide .main-img .cont .d-flex { justify-content: center !important} .snap-slide .main-img .cont h2 { margin-bottom: 30px} .testim-cards .sec-head.bord { margin-bottom: 30px !important} .awards-reval .item-row .award-position { margin-top: 5px} .footer-style1 .fo-box-left { margin-bottom: 30px} .portfolio-elegant .work-boxs, .portfolio-crev .work-boxs { display: block !important; text-align: center} .portfolio-elegant .item, .portfolio-elegant .item.active, .portfolio-crev .item, .portfolio-crev .item.active { width: 49%; height: 400px; min-height: 400px; display: inline-block; padding: 0 10px} .portfolio-elegant .item, .portfolio-elegant .item.active { height: auto; min-height: auto; margin: 0 0 30px !important} .portfolio-elegant .item .bg-img, .portfolio-elegant .item.active .bg-img { height: 400px} .testim-style3 .swiper-controls { top: auto; bottom: -30px; transform: none} .testim-style3 .swiper-container { overflow: visible !important; touch-action: auto !important} .testim-style3 .swiper-wrapper { display: flex !important; flex-direction: column !important; transform: none !important; width: 100% !important} .testim-style3 .swiper-slide { width: 100% !important; margin-right: 0 !important; margin-bottom: 30px !important} .testim-style3 .swiper-slide:last-child { margin-bottom: 0 !important} .testim-style3 .tobotm { margin-bottom: 80px} .blog-style1 .swiper-container, .blog-style2 .swiper-container { overflow: visible !important; touch-action: auto !important} .blog-style1 .swiper-wrapper, .blog-style2 .swiper-wrapper { display: flex !important; flex-direction: column !important; transform: none !important; width: 100% !important} .blog-style1 .swiper-slide, .blog-style2 .swiper-slide { width: 100% !important; margin-right: 0 !important; margin-bottom: 30px !important} .blog-style1 .swiper-slide:last-child, .blog-style2 .swiper-slide:last-child { margin-bottom: 0 !important} .blog-md .row-bord:after { display: none} .showcase-full .parallax-slider-full .caption h1 { font-size: 80px; word-break: normal; overflow-wrap: break-word; hyphens: auto} .parallax-slider-wrapper .parallax-slider-inner { left: 40px} .slider .parallax-slider-full .swiper-slide .bg-img { background-position: center center !important} .inter-links-center .links-text li h2 a .text { font-size: 64px; letter-spacing: -2px} .portfolio-style2 .item { margin-top: 0 !important} .footer-style4 .logo { margin-bottom: 25px} .footer-style4 .column { margin: 25px 0} .footer-style4 .links, .footer-style4 .copyright { text-align: center; display: block !important} .footer-style4 .links .d-flex, .footer-style4 .copyright .d-flex { justify-content: center; margin-bottom: 15px} } @media screen and (max-width: 768px) { .navbar .home-logo-desktop, .navbar .home-menu-desktop, .navbar .topnav.home-menu-desktop { display: none !important} .sm-mb10 { margin-bottom: 10px} .sm-mb15 { margin-bottom: 15px} .sm-mb20 { margin-bottom: 20px} .sm-mb30 { margin-bottom: 30px} .sm-mb40 { margin-bottom: 40px} .sm-mb50 { margin-bottom: 50px} .sm-mb80 { margin-bottom: 80px} .sm-pb10 { padding-bottom: 10px} .sm-pb20 { padding-bottom: 20px} .sm-pb30 { padding-bottom: 30px} .sm-pb40 { padding-bottom: 40px} .sm-pb50 { padding-bottom: 50px} .sm-pb60 { padding-bottom: 60px} .sm-pb70 { padding-bottom: 70px} .sm-pb80 { padding-bottom: 80px} .sm-order-1 { order: 1 !important} .sm-order-2 { order: 2 !important} .sm-order-3 { order: 3 !important} .sm-order-4 { order: 4 !important} .sm-hide { display: none !important} .fs-70 { font-size: 40px !important} .fs-40 { font-size: 25px !important} h1 { font-size: 46px; word-break: normal; overflow-wrap: break-word; hyphens: auto} h2 { font-size: 30px} h3 { font-size: 24px} h4 { font-size: 22px} h5 { font-size: 20px} h6 { font-size: 18px} .fs-100 { font-size: 70px !important} .progress-wrap { display: none} .loader-wrap .loader-wrap-heading .load-text { font-size: 20px} .hamenu .logo { left: 25px} .hamenu .close-menu { top: 25px; right: 25px} .hamenu .menu-links { padding: 80px 20px 40px} .hamenu .menu-links .main-menu > li .link { font-size: 30px; display: flex; align-items: center; justify-content: space-between} .hamenu .menu-links .main-menu > li .link i { width: 20px; height: 20px; position: relative !important; top: auto !important; right: auto !important; bottom: auto !important; display: flex; align-items: center; justify-content: center; margin-left: 10px} .hamenu .menu-links .main-menu > li .link i:before { display: none} .hamenu .menu-links .main-menu > li .link i:after { content: ""; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 6px solid #fff; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: none; transition: transform 0.3s ease} .hamenu .menu-links .main-menu > li .link.dopen i:after { transform: translate(-50%, -50%) rotate(180deg)} .hamenu .menu-links .main-menu > li .sub-dmenu { font-size: 24px} .hamenu .menu-links .main-menu .sub-menu li, .hamenu .menu-links .main-menu .sub-menu2 li { font-size: 20px} section { padding-top: 20px; padding-bottom: 160px} .sec-head h2 { font-size: 30px !important} .shape-top-right.w-300px { width: 200px} .h-700px { height: 550px !important} .h-700px .h-800px { height: 650px !important} .h-600px { height: 450px !important} .hero-style1 h1 { font-size: 40px !important; word-break: normal; overflow-wrap: break-word; hyphens: auto} .hr-sec .hr-container .item-panel { width: 100%} .hr-sec .hr-container .item-panel .fit-img { height: 400px; min-height: 400px} .hero-style4 h1, .hero-style4 h2 { font-size: 50px !important; font-weight: 600 !important} .hero-style4 { padding-bottom: 20px} .hero-style4 .justify-content-end { display: block !important} .hero-style3 h1 { font-size: 35px !important} .hero-style3 h1 img { width: 25px; word-break: normal; overflow-wrap: break-word; hyphens: auto} .hero-style2 .main-box .caption h1, .about-md .main-box .caption h1 { font-size: 30px; line-height: 40px; word-break: normal; overflow-wrap: break-word; hyphens: auto} .hero-style2 .main-box, .about-md .main-box { height: 700px} .hero-style2 .right-column { display: flex; justify-content: center; align-items: center} .hero-style2 .right-column > div { width: 100%; max-width: 100%} .hero-style2 .serv { text-align: center; margin: 0 auto; display: flex; flex-direction: column; align-items: center} .hero-style2 .serv h6 { text-align: center !important} .hero-style2 .serv .content { margin: 0 auto; max-width: 280px; position: relative; overflow: visible; display: block; width: 280px; min-height: 200px; left: 50% !important; transform: translateX(-50%) !important} } @media screen and (max-width: 768px) and (max-width: 768px) { .hero-style2 .serv .content { left: 40% !important} body.modern-agency .fs-14 { font-size: 16px !important; width: 200px} } @media screen and (max-width: 768px) { .hero-style8 h1 { font-size: 40px !important; word-break: normal; overflow-wrap: break-word; hyphens: auto} .hero-style7 .fit-img { height: 550px !important} body.modern-agency .section-padding { padding: 60px 20px !important} body.modern-agency .right-side, body.modern-agency .main-container { padding: 0 !important} .hero-style5 .snap-slider-thumbs-wrapper { width: 250px; height: 320px} .hero-style5 .snap-slider-captions .col-sm-3, .hero-style5-showcase .snap-slider-captions .col-sm-3 { text-align: center; margin-bottom: 10px} .hero-style5 .snap-slider-captions-wrapper, .hero-style5-showcase .snap-slider-captions-wrapper { height: 120px} .hero-style5 .snap-slider-captions, .hero-style5-showcase .snap-slider-captions { padding-bottom: 50px} .pg-hero .fs-80 { font-size: 32px !important} .interactive-sec .cluom h3 { font-size: 40px !important} .portfolio-elegant .item, .portfolio-elegant .item.active, .portfolio-crev .item, .portfolio-crev .item.active { width: 100%; padding: 0} .portfolio-style2 .item .fit-img { height: 400px !important} .portfolio-style3 .item { height: 450px !important} .portfolio-style3 .item .text { left: 30px; bottom: 30px} .intro-style3 .box-bgimg1:after { width: 50%; height: 50%; top: auto; bottom: 30px} .serv-style6 .item h3 { font-size: 34px !important} .serv-style6 .item .imgs { display: none} .team-intro.style2 .item { min-height: 450px} .team-reval .item-row .text-align-center, .team-reval .item-row .social-icon { text-align: left; margin-top: 15px} .testim-style1 .swiper-controls { text-align: right} .testim-style1 .info-text { display: block !important} .testim-cards .stackCard, .testim-cards .item { padding: 50px 15px} .testim-cards .stackCard > .d-flex, .testim-cards .item > .d-flex { display: block !important} .testim-cards .stackCard .info, .testim-cards .item .info { margin-bottom: 50px} .testim-cards .stackCard .line-left, .testim-cards .item .line-left { border: 0; padding: 0 !important; margin: 0 !important} .awards-reval .item-row .award-year { margin-bottom: 10px} .awards-reval .item-row { border-radius: 30px} .showcase-full .parallax-slider-full .caption h1 { font-size: 45px; word-break: normal; overflow-wrap: break-word; hyphens: auto} .showcase-full .dots { display: none} .parallax-slider-wrapper .parallax-slider-inner { left: 20px} .inter-links-center .links-text li h2 a .text { font-size: 30px; letter-spacing: -1px} .pg-hero .info { display: block !important} .pg-hero .date { margin-left: 30px !important} .pg-hero .right-info { margin: 30px 0 0} .main-post .fz-60 { display: none} .main-post .post-qoute { padding: 30px 15px} .main-post .post-qoute h6:before { position: relative; left: 0} .main-post .info-area { display: block !important} .main-post .info-area .tags { margin-bottom: 30px} .main-post .author-area .flex { display: block} .main-post .author-area .author-img { margin: 0 0 30px 0} .main-post .author-area .author-img .img { width: 80px; height: 80px} .main-post .next-prv-post { display: block} .main-post .next-prv-post .thumb-post { margin: 0 !important} .main-post .next-prv-post .text-right { text-align: left; margin-top: 30px !important} .main-post .author-area { padding: 40px 20px} .comments-post .item-box .flex { display: block} .comments-post .item-box .user-img { margin: 0 0 15px 0} .comments-post .item-box .replay-post { margin: 15px 0 0 0} .comments-post .item-box.replayed { margin-left: 0} .main-post .post-qoute h6:before { top: 70px} .pg-project .fs-60 { font-size: 28px !important} .contact-style1 .box { padding: 60px 25px} footer .fo-box-left .d-flex { display: block !important} footer .fo-box-left .butn-arrow { margin-top: 30px} footer .fo-box-left .text-align-right { text-align: left !important; margin-top: 30px} .footer-style1 .fo-box-left, .footer-style1 .fo-box-right { padding: 40px 20px} .footer-style1 .fo-box-left .line-bottom, .footer-style1 .fo-box-right .line-bottom { margin-bottom: 40px !important; padding-bottom: 40px !important} } @media (hover: none) and (pointer: coarse) { * { cursor: none !important; -webkit-tap-highlight-color: transparent !important; tap-highlight-color: transparent !important} a, button, input, select, textarea, [role=button], [onclick] { -webkit-tap-highlight-color: transparent !important; tap-highlight-color: transparent !important} }