/* Slider */ .slick-slider { position: relative; display: block; box-sizing: border-box; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; -khtml-user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent; } .slick-list { position: relative; display: block; overflow: hidden; margin: 0; padding: 0; } .slick-list:focus { outline: none; } .slick-list.dragging { cursor: pointer; cursor: hand; } .slick-slider .slick-track, .slick-slider .slick-list { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .slick-track { position: relative; top: 0; left: 0; display: block; margin-left: auto; margin-right: auto; } .slick-track:before, .slick-track:after { display: table; content: ''; } .slick-track:after { clear: both; } .slick-loading .slick-track { visibility: hidden; } .slick-slide { display: none; float: left; height: 100%; min-height: 1px; } [dir='rtl'] .slick-slide { float: right; } .slick-slide img { display: block; } .slick-slide.slick-loading img { display: none; } .slick-slide.dragging img { pointer-events: none; } .slick-initialized .slick-slide { display: block; } .slick-loading .slick-slide { visibility: hidden; } .slick-vertical .slick-slide { display: block; height: auto; border: 1px solid transparent; } .slick-arrow.slick-hidden { display: none; } /** * Swiper 8.4.5 * Most modern mobile touch slider and framework with hardware accelerated transitions * https://swiperjs.com * * Copyright 2014-2022 Vladimir Kharlampidi * * Released under the MIT License * * Released on: November 21, 2022 */ @font-face{font-family:swiper-icons;src:url('data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA');font-weight:400;font-style:normal}:root{--swiper-theme-color:#007aff}.swiper{margin-left:auto;margin-right:auto;position:relative;overflow:hidden;list-style:none;padding:0;z-index:1}.swiper-wrapper{position:relative;width:100%;height:100%;z-index:1;display:flex;transition-property:transform;box-sizing:content-box}.swiper-wrapper{transform:translate3d(0px,0,0)}.swiper-slide{flex-shrink:0;width:100%;height:100%;position:relative;transition-property:transform}.swiper-slide-invisible-blank{visibility:hidden}:root{--swiper-navigation-size:44px}.swiper-button-next,.swiper-button-prev{position:absolute;top:50%;width:calc(var(--swiper-navigation-size)/ 44 * 27);height:var(--swiper-navigation-size);margin-top:calc(0px - (var(--swiper-navigation-size)/ 2));z-index:10;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--swiper-navigation-color,var(--swiper-theme-color))}.swiper-button-next.swiper-button-disabled,.swiper-button-prev.swiper-button-disabled{opacity:.35;cursor:auto;pointer-events:none}.swiper-button-next.swiper-button-hidden,.swiper-button-prev.swiper-button-hidden{opacity:0;cursor:auto;pointer-events:none}.swiper-navigation-disabled .swiper-button-next,.swiper-navigation-disabled .swiper-button-prev{display:none!important}.swiper-button-next:after,.swiper-button-prev:after{font-family:swiper-icons;font-size:var(--swiper-navigation-size);text-transform:none!important;letter-spacing:0;font-variant:initial;line-height:1}.swiper-button-prev{left:10px;right:auto}.swiper-button-prev:after{content:'prev'}.swiper-button-next{right:10px;left:auto}.swiper-button-next:after{content:'next'}.swiper-button-lock{display:none}.swiper-pagination{position:absolute;text-align:center;transition:.3s opacity;transform:translate3d(0,0,0);z-index:10}.swiper-pagination-bullet{width:var(--swiper-pagination-bullet-width,var(--swiper-pagination-bullet-size,8px));height:var(--swiper-pagination-bullet-height,var(--swiper-pagination-bullet-size,8px));display:inline-block;border-radius:50%;background:var(--swiper-pagination-bullet-inactive-color,#000);opacity:var(--swiper-pagination-bullet-inactive-opacity, .2)}button.swiper-pagination-bullet{border:none;margin:0;padding:0;box-shadow:none;-webkit-appearance:none;appearance:none}.swiper-pagination-bullet:only-child{display:none!important}.swiper-pagination-bullet-active{opacity:var(--swiper-pagination-bullet-opacity, 1);background:var(--swiper-pagination-color,var(--swiper-theme-color))}.swiper-scrollbar{border-radius:10px;position:relative;-ms-touch-action:none;background:rgba(0,0,0,.1)}.swiper-scrollbar-disabled>.swiper-scrollbar,.swiper-scrollbar.swiper-scrollbar-disabled{display:none!important}.swiper-scrollbar.swiper-scrollbar-horizontal{position:absolute;left:1%;bottom:3px;z-index:50;height:5px;width:98%}.swiper-scrollbar.swiper-scrollbar-vertical{position:absolute;right:3px;top:1%;z-index:50;width:5px;height:98%}.swiper-scrollbar-drag{height:100%;width:100%;position:relative;background:rgba(0,0,0,.5);border-radius:10px;left:0;top:0}.swiper-scrollbar-lock{display:none}.swiper-zoom-container{width:100%;height:100%;display:flex;justify-content:center;align-items:center;text-align:center}.swiper-zoom-container>canvas,.swiper-zoom-container>img,.swiper-zoom-container>svg{max-width:100%;max-height:100%;object-fit:contain}.swiper-slide-zoomed{cursor:move}.swiper-lazy-preloader{width:42px;height:42px;position:absolute;left:50%;top:50%;margin-left:-21px;margin-top:-21px;z-index:10;transform-origin:50%;box-sizing:border-box;border:4px solid var(--swiper-preloader-color,var(--swiper-theme-color));border-radius:50%;border-top-color:transparent}.swiper:not(.swiper-watch-progress) .swiper-lazy-preloader{animation:swiper-preloader-spin 1s infinite linear}@keyframes swiper-preloader-spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.swiper .swiper-notification{position:absolute;left:0;top:0;pointer-events:none;opacity:0;z-index:-1000} /* Magnific Popup CSS */ .mfp-bg { top: 0; left: 0; width: 100%; height: 100%; z-index: 1042; overflow: hidden; position: fixed; background: #0b0b0b; opacity: 0.8; } .mfp-wrap { top: 0; left: 0; width: 100%; height: 100%; z-index: 99999; position: fixed; outline: none !important; -webkit-backface-visibility: hidden; } .mfp-container { text-align: center; position: absolute; width: 100%; height: 100%; left: 0; top: 0; padding: 0 8px; box-sizing: border-box; } .mfp-container:before { content: ''; display: inline-block; height: 100%; vertical-align: middle; } .mfp-align-top .mfp-container:before { display: none; } .mfp-ajax-cur { cursor: progress; } .mfp-zoom-out-cur { cursor: -moz-zoom-out; cursor: -webkit-zoom-out; cursor: zoom-out; } .mfp-close, .mfp-arrow, .mfp-counter { -webkit-user-select: none; -moz-user-select: none; user-select: none; } .mfp-loading.mfp-figure { display: none; } button.mfp-close, button.mfp-arrow { overflow: visible; cursor: pointer; background: transparent; border: 0; -webkit-appearance: none; display: block; outline: none; padding: 0; z-index: 1046; box-shadow: none; touch-action: manipulation; } button::-moz-focus-inner { padding: 0; border: 0; } .mfp-close { width: 44px; height: 44px; line-height: 44px; position: absolute; right: 0; top: 0; text-decoration: none; text-align: center; opacity: 0.65; padding: 0 0 18px 10px; color: #FFF; font-style: normal; font-size: 28px; font-family: Arial, Baskerville, monospace; } .mfp-close:hover, .mfp-close:focus { opacity: 1; } .mfp-close:active { top: 1px; } .mfp-close-btn-in .mfp-close { color: #333; } .mfp-counter { position: absolute; top: 0; right: 0; color: #CCC; font-size: 12px; line-height: 18px; white-space: nowrap; } .mfp-arrow { position: absolute; opacity: 0.65; margin: 0; top: 50%; margin-top: -55px; padding: 0; width: 90px; height: 110px; -webkit-tap-highlight-color: transparent; } .mfp-arrow:active { margin-top: -54px; } .mfp-arrow:hover, .mfp-arrow:focus { opacity: 1; } .mfp-arrow:before, .mfp-arrow:after { content: ''; display: block; width: 0; height: 0; position: absolute; left: 0; top: 0; margin-top: 35px; margin-left: 35px; border: medium inset transparent; } .mfp-arrow:after { border-top-width: 13px; border-bottom-width: 13px; top: 8px; } .mfp-arrow:before { border-top-width: 21px; border-bottom-width: 21px; opacity: 0.7; } .mfp-iframe-scaler { width: 100%; height: 0; overflow: hidden; padding-top: 56.25%; } .mfp-iframe-scaler iframe { position: absolute; display: block; top: 0; left: 0; width: 100%; height: 100%; box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); background: #000; } /* Main image in popup */ img.mfp-img { width: auto; max-width: 100%; height: auto; display: block; line-height: 0; box-sizing: border-box; padding: 40px 0 40px; margin: 0 auto; } /* The shadow behind the image */ .mfp-figure { line-height: 0; } .mfp-figure:after { content: ''; position: absolute; left: 0; top: 40px; bottom: 40px; display: block; right: 0; width: auto; height: auto; z-index: -1; box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); background: #444; } .mfp-figure small { color: #BDBDBD; display: block; font-size: 12px; line-height: 14px; } .mfp-figure figure { margin: 0; } .mfp-bottom-bar { margin-top: -36px; position: absolute; top: 100%; left: 0; width: 100%; cursor: auto; } .mfp-title { text-align: left; line-height: 18px; color: #F3F3F3; word-wrap: break-word; padding-right: 36px; } @media screen and (max-width: 800px) and (orientation: landscape), screen and (max-height: 300px) { /** * Remove all paddings around the image on small screen */ } @media all and (max-width: 900px) { .mfp-arrow { -webkit-transform: scale(0.75); transform: scale(0.75); } .mfp-container { padding-left: 6px; padding-right: 6px; } } /*----------------------------------------------------------------------------------- Template Name: Grit Pearl ----------------------------------------------------------------------------------- /************ TABLE OF CONTENTS *************** ----------------- 01. THEME CSS ----------------- 1.1 Theme Default 1.2 Common Classes ----------------- 02. COMPONENTS CSS ----------------- 2.1 Back to top 2.2 Buttons 2.3 Animations 2.4 Preloader 2.5 Background 2.6 Nice Select 2.7 Breadcrumb 2.8 Accordion 2.9 Section Title 2.10 Accordion 2.11 Search 2.12 Magic Cursor ----------------- 03. HEADER CSS ----------------- 3.1 Header Style --------------------------------- 04. MENU CSS --------------------------------- 4.1 Main Menu 4.2 Mobile Menu 4.3 offcanvas Menu --------------------------------- 05. BLOG CSS --------------------------------- 5.1 Postbox css 5.2 Recent Post css 5.3 Sidebar css 5.4 Blog css --------------------------------- 06. FOOTER CSS --------------------------------- 6.1 Footer Style 1 6.2 Footer Style 2 6.3 Footer Style 3 6.5 Footer Style 5 6.7 Footer Style 7 6.8 Footer Style 8 6.9 Footer Style 9 6.10 Footer Style 10 6.11 Footer Style 11 6.12 Footer Style 12 6.13 Footer Style 13 6.14 Footer Style 14 6.15 Footer Style 15 --------------------------------- 07. PAGES CSS --------------------------------- 7.1 Hero css 7.2 About Css 7.3 Banner Css 7.4 Text-slide Css 7.5 Service Css 7.6 Project Css 7.7 Funfact Css 7.8 Work Css 7.9 Testimonail Css 8.0 Award Css 8.1 Video Css 8.2 Brand Css 8.3 Team Css 8.4 Step Css 8.5 Choose Css 8.6 Price Css 8.7 Faq Css 8.8 Success Css 8.9 Instagram Css 9.0 Feature Css 9.1 Review Css 9.2 Stack Css 9.3 Benefits Css 9.4 Cta Css 9.5 Intaractive Css 9.6 Project Slider Css 9.7 Career Css 9.8 Contact Css 9.9 Portfolio css 10.0 Shop Css 10.1 Shop Details Css 10.2 Login Css 10.3 Checkout css 10.4 Cart css 10.5 Account css 10.6 Error Css 10.7 Dark Css Start 10.8 Light Css Start **********************************************/ /*----------------------------------------*/ /* 1.1 Theme Default /*----------------------------------------*/ @font-face { font-family: 'BebasNeuewebfont'; src: local('BebasNeuewebfont'), url('../fonts/BebasNeuewebfont.woff') format('woff'); } /* use this class to attach this font to any element i.e.

Text with this font applied

*/ @import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Besley:ital,wght@0,400..900;1,400..900&family=Space+Grotesk:wght@300..700&family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Satisfy&family=Teko:wght@300..700&family=Phudu:wght@300..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Onest:wght@100..900&display=swap"); @keyframes bannerAnimationTwo { 0% { transform: translate(0px, 0px); } 20% { transform: translate(20px, -5px); } 40% { transform: translate(50px, 20px); } 60% { transform: translate(20px, 50px); } 80% { transform: translate(-20px, 30px); } 100% { transform: translate(0px, 0px); } } .back-to-top-wrapper, a, button, p, input, select, textarea, li { -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } /* transform */ @font-face { font-family: "Platform"; src: url("../fonts/Platform-Light.eot"); src: local("Platform Light"), local("Platform-Light"), url("../fonts/Platform-Light.eot?#iefix") format("embedded-opentype"), url("../fonts/Platform-Light.woff2") format("woff2"), url("../fonts/Platform-Light.woff") format("woff"), url("../fonts/Platform-Light.ttf") format("truetype"); font-weight: 300; font-style: normal; } @font-face { font-family: "Platform"; src: url("../fonts/Platform-Regular.eot"); src: local("Platform Regular"), local("Platform-Regular"), url("../fonts/Platform-Regular.eot?#iefix") format("embedded-opentype"), url("../fonts/Platform-Regular.woff2") format("woff2"), url("../fonts/Platform-Regular.woff") format("woff"), url("../fonts/Platform-Regular.ttf") format("truetype"); font-weight: normal; font-style: normal; } @font-face { font-family: "Platform"; src: url("../fonts/Platform-Medium.eot"); src: local("Platform Medium"), local("Platform-Medium"), url("../fonts/Platform-Medium.eot?#iefix") format("embedded-opentype"), url("../fonts/Platform-Medium.woff2") format("woff2"), url("../fonts/Platform-Medium.woff") format("woff"), url("../fonts/Platform-Medium.ttf") format("truetype"); font-weight: 500; font-style: normal; } @font-face { font-family: "MangoGrotesque"; src: url("../fonts/MangoGrotesque-Bold.eot"); src: url("../fonts/MangoGrotesque-Bold.eot?#iefix") format("embedded-opentype"), url("../fonts/MangoGrotesque-Bold.woff") format("woff"), url("../fonts/MangoGrotesque-Bold.woff2") format("woff2"), url("../fonts/MangoGrotesque-Bold.ttf") format("truetype"); font-style: normal; font-weight: bold; text-rendering: optimizeLegibility; } @font-face { font-family: "MangoGrotesqueLight"; src: url("../fonts/MangoGrotesque-Light.eot"); src: url("../fonts/MangoGrotesque-Light.eot?#iefix") format("embedded-opentype"), url("../fonts/MangoGrotesque-Light.woff") format("woff"), url("../fonts/MangoGrotesque-Light.woff2") format("woff2"), url("../fonts/MangoGrotesque-Light.ttf") format("truetype"); font-style: normal; font-weight: normal; text-rendering: optimizeLegibility; } @font-face { font-family: "MangoGrotesqueMed"; src: url("../fonts/MangoGrotesque-Medium.eot"); src: url("../fonts/MangoGrotesque-Medium.eot?#iefix") format("embedded-opentype"), url("../fonts/MangoGrotesque-Medium.woff") format("woff"), url("../fonts/MangoGrotesque-Medium.woff2") format("woff2"), url("../fonts/MangoGrotesque-Medium.ttf") format("truetype"); font-style: normal; font-weight: normal; text-rendering: optimizeLegibility; } @font-face { font-family: "MangoGrotesqueSemBd"; src: url("../fonts/MangoGrotesque-SemiBold.eot"); src: url("../fonts/MangoGrotesque-SemiBold.eot?#iefix") format("embedded-opentype"), url("../fonts/MangoGrotesque-SemiBold.woff") format("woff"), url("../fonts/MangoGrotesque-SemiBold.woff2") format("woff2"), url("../fonts/MangoGrotesque-SemiBold.ttf") format("truetype"); font-style: normal; font-weight: normal; text-rendering: optimizeLegibility; } @font-face { font-family: "MangoGrotesque"; src: url("../fonts/MangoGrotesque-Regular.eot"); src: url("../fonts/MangoGrotesque-Regular.eot?#iefix") format("embedded-opentype"), url("../fonts/MangoGrotesque-Regular.woff") format("woff"), url("../fonts/MangoGrotesque-Regular.woff2") format("woff2"), url("../fonts/MangoGrotesque-Regular.ttf") format("truetype"); font-style: normal; font-weight: normal; text-rendering: optimizeLegibility; } @font-face { font-family: "MangoGrotesqueThin"; src: url("../fonts/MangoGrotesque-Thin.eot"); src: url("../fonts/MangoGrotesque-Thin.eot?#iefix") format("embedded-opentype"), url("../fonts/MangoGrotesque-Thin.woff") format("woff"), url("../fonts/MangoGrotesque-Thin.woff2") format("woff2"), url("../fonts/MangoGrotesque-Thin.ttf") format("truetype"); font-style: normal; font-weight: normal; text-rendering: optimizeLegibility; } @font-face { font-family: "dirtyline-36daysoftype-2022"; src: url("../fonts/dirtyline-36daysoftype-2022.otf"); font-style: normal; font-weight: normal; text-rendering: optimizeLegibility; } @font-face { font-family: "ClashDisplay-Light"; src: url("../fonts/ClashDisplay-Light.woff2") format("woff2"), url("../fonts/ClashDisplay-Light.woff") format("woff"), url("../fonts/ClashDisplay-Light.ttf") format("truetype"); font-weight: 300; font-display: swap; font-style: normal; } @font-face { font-family: "ClashDisplay-Regular"; src: url("../fonts/ClashDisplay-Regular.woff2") format("woff2"), url("../fonts/ClashDisplay-Regular.woff") format("woff"), url("../fonts/ClashDisplay-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; font-style: normal; } @font-face { font-family: "ClashDisplay-Medium"; src: url("../fonts/ClashDisplay-Medium.woff2") format("woff2"), url("../fonts/ClashDisplay-Medium.woff") format("woff"), url("../fonts/ClashDisplay-Medium.ttf") format("truetype"); font-weight: 500; font-display: swap; font-style: normal; } @font-face { font-family: "ClashDisplay-Semibold"; src: url("../fonts/ClashDisplay-Semibold.woff2") format("woff2"), url("../fonts/ClashDisplay-Semibold.woff") format("woff"), url("../fonts/ClashDisplay-Semibold.ttf") format("truetype"); font-weight: 600; font-display: swap; font-style: normal; } @font-face { font-family: "ClashDisplay-Bold"; src: url("../fonts/ClashDisplay-Bold.woff2") format("woff2"), url("../fonts/ClashDisplay-Bold.woff") format("woff"), url("../fonts/ClashDisplay-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; font-style: normal; } :root { /** @font family declaration */ --tp-ff-teko: 'BebasNeuewebfont', serif; --tp-ff-body: 'BebasNeuewebfont', sans-serif; --tp-ff-heading: 'BebasNeuewebfont', sans-serif; --tp-ff-inter: 'BebasNeuewebfont', sans-serif; --tp-ff-p: 'Georgia', sans-serif; --tp-ff-besley: 'Besley', serif; --tp-ff-mango-thin: 'MangoGrotesqueThin', serif; --tp-ff-mango-light: 'MangoGrotesqueLight', serif; --tp-ff-mango: 'MangoGrotesque', serif; --tp-ff-mango-medium: 'MangoGrotesqueMed', serif; --tp-ff-mango-semibold: 'MangoGrotesqueSemBd', serif; --tp-ff-mango-bold: 'MangoGrotesque', serif; --tp-ff-clash-light: 'ClashDisplay-Light', serif; --tp-ff-clash-regular: 'ClashDisplay-Regular', serif; --tp-ff-clash-medium: 'ClashDisplay-Medium', serif; --tp-ff-clash-semibold: 'ClashDisplay-Semibold', serif; --tp-ff-clash-bold: 'ClashDisplay-Bold', serif; --tp-ff-grotesk: 'Space Grotesk', serif; --tp-ff-platform: 'Platform', serif; --tp-ff-playfair: 'Playfair Display', serif; --tp-ff-satisfy: 'Satisfy', cursive; --tp-ff-dirtyline: 'dirtyline-36daysoftype-2022', serif; --tp-ff-phudu: 'Phudu', serif; --tp-ff-poppins: 'Poppins', serif; --tp-ff-onest: 'Onest', serif; --tp-ff-fontawesome: "Font Awesome 6 Pro"; /** @color declaration */ --tp-common-white: #ffffff; --tp-common-black: #212a37; --tp-common-black-2: #232323; --tp-common-black-3: #000; --tp-common-black-4: #0a0a0a; --tp-common-black-5: #121212; --tp-common-black-6: #212121; --tp-common-black-7: #0E0F11; --tp-common-black-8: #1a1b1e; --tp-common-black-9: #16302f; --tp-common-black-10: #21212D; --tp-common-cream: #f9f4e8; --tp-common-cream-2: #FFF6BF; --tp-common-cream-3: #ffffe6; --tp-common-yellow: #f5bd00; --tp-common-yellow-1: #FFF669; --tp-common-yellow-green: #E9FF48; --tp-common-green-light: #D0FF71; --tp-common-green-regular: #C1ED00; --tp-common-green-solid: #17312F; --tp-common-pink-light: #FDE1DA; --tp-common-paste: #43D4A0; --tp-common-paste-2: #0C5752; --tp-common-sky: #C5FCFC; --tp-common-red: #FF4851; --tp-common-red-2: #FF481F; --tp-common-red-3: #F5BD00; --tp-common-blue: #7463FF; --tp-common-brown: #453030; --tp-grey-1: #f8f8f8; --tp-grey-2: #f1f1f1; --tp-grey-3: #F8F8FB; --tp-grey-4: #F6F8EF; --tp-coffe-1: #653624; --tp-coffe-2: #552411; --tp-cream-1: #B7AB98; --tp-cream-2: #CFC292; --tp-text-body: #2e2d2d; --tp-theme-green: #A0FF27; --tp-theme-pink: #EC6FD5; --tp-theme-yellow: #FFB701; --tp-border-1: #EAEBED; --tp-border-2: #e7e7e7; } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } @media (min-width: 1400px) { .container { max-width: 1330px; } .container-1750 { max-width: 1750px; } .container-1580 { max-width: 1580px; } .container-1330 { max-width: 1330px; } .container-1320 { max-width: 1320px; } } /*--------------------------------- typography css start ---------------------------------*/ body { font-size: 14px; line-height: 26px; font-weight: normal; color: var(--tp-text-body); font-family: var(--tp-ff-body); } img { max-width: 100%; } a { text-decoration: none; } h1, h2, h3, h4, h5, h6 { margin-top: 0px; font-weight: 500; line-height: 1.2; -webkit-transition: color 0.3s ease-in-out; -moz-transition: color 0.3s ease-in-out; -ms-transition: color 0.3s ease-in-out; -o-transition: color 0.3s ease-in-out; transition: color 0.3s ease-in-out; color: var(--tp-common-black); font-family: var(--tp-ff-heading); } h1 { font-size: 40px; } h2 { font-size: 36px; } h3 { font-size: 28px; } h4 { font-size: 24px; } h5 { font-size: 20px; } h6 { font-size: 16px; } ul { margin: 0px; padding: 0px; } p { font-weight: 400; /* font-size: 22px; line-height: 1.56;*/ margin-bottom: 15px; letter-spacing: 0; font-family: var(--tp-ff-p); color: var(--tp-text-body); } a:not([href]):not([class]), a:not([href]):not([class]):hover { color: inherit; text-decoration: none; } a:focus, .button:focus { text-decoration: none; outline: none; } a:focus, a:hover { color: inherit; text-decoration: none; } a, button { color: inherit; outline: none; border: none; background: transparent; } button:hover { cursor: pointer; } button:focus { outline: 0; } input[type=text], input[type=email], input[type=tel], input[type=number], input[type=password], input[type=url], textarea { outline: none; height: 60px; width: 100%; line-height: 60px; font-size: 16px; padding-left: 26px; padding-right: 26px; border-radius: 8px; background: rgb(246, 246, 249); color: var(--tp-common-black); border: 1px solid rgb(246, 246, 249); } input[type=text]::-webkit-input-placeholder, input[type=email]::-webkit-input-placeholder, input[type=tel]::-webkit-input-placeholder, input[type=number]::-webkit-input-placeholder, input[type=password]::-webkit-input-placeholder, input[type=url]::-webkit-input-placeholder, textarea::-webkit-input-placeholder { /* Chrome/Opera/Safari */ color: var(--tp-common-black); } input[type=text]::-moz-placeholder, input[type=email]::-moz-placeholder, input[type=tel]::-moz-placeholder, input[type=number]::-moz-placeholder, input[type=password]::-moz-placeholder, input[type=url]::-moz-placeholder, textarea::-moz-placeholder { /* Firefox 19+ */ color: var(--tp-common-black); } input[type=text]:-moz-placeholder, input[type=email]:-moz-placeholder, input[type=tel]:-moz-placeholder, input[type=number]:-moz-placeholder, input[type=password]:-moz-placeholder, input[type=url]:-moz-placeholder, textarea:-moz-placeholder { /* Firefox 4-18 */ color: var(--tp-common-black); } input[type=text]:-ms-input-placeholder, input[type=email]:-ms-input-placeholder, input[type=tel]:-ms-input-placeholder, input[type=number]:-ms-input-placeholder, input[type=password]:-ms-input-placeholder, input[type=url]:-ms-input-placeholder, textarea:-ms-input-placeholder { /* IE 10+ Edge*/ color: var(--tp-common-black); } input[type=text]::placeholder, input[type=email]::placeholder, input[type=tel]::placeholder, input[type=number]::placeholder, input[type=password]::placeholder, input[type=url]::placeholder, textarea::placeholder { /* MODERN BROWSER */ color: var(--tp-common-black); } input[type=text]:focus, input[type=email]:focus, input[type=tel]:focus, input[type=number]:focus, input[type=password]:focus, input[type=url]:focus, textarea:focus { border-color: var(--tp-common-black); } input[type=text]:focus::placeholder, input[type=email]:focus::placeholder, input[type=tel]:focus::placeholder, input[type=number]:focus::placeholder, input[type=password]:focus::placeholder, input[type=url]:focus::placeholder, textarea:focus::placeholder { opacity: 0; } textarea { line-height: 1.4; padding-top: 17px; padding-bottom: 17px; } input[type=color] { appearance: none; -moz-appearance: none; -webkit-appearance: none; background: none; border: 0; cursor: pointer; height: 100%; width: 100%; padding: 0; border-radius: 50%; } *::-moz-selection { background: var(--tp-common-black); color: var(--tp-common-white); text-shadow: none; } ::-moz-selection { background: var(--tp-common-black); color: var(--tp-common-white); text-shadow: none; } ::selection { background: var(--tp-common-black); color: var(--tp-common-white); text-shadow: none; } *::-moz-placeholder { color: var(--tp-common-black); font-size: 14px; opacity: 1; } *::placeholder { color: var(--tp-common-black); font-size: 14px; opacity: 1; } .tp-line-black { display: inline; transition: all 0.3s linear; background-repeat: no-repeat; background-size: 0% 1px, 0 1px; background-position: 100% 100%, 0 100%; background-image: linear-gradient(#212a37, #212a37), linear-gradient(#212a37, #212a37); } .tp-line-black:hover { background-size: 0% 1px, 100% 1px; } .tp-line-white { display: inline; transition: all 0.3s linear; background-repeat: no-repeat; background-size: 0% 1px, 0 1px; background-position: 100% 100%, 0 100%; background-image: linear-gradient(#212a37, #212a37), linear-gradient(#212a37, #212a37); } .tp-line-white.green { background-position: 100% 100%, 0 75%; background-image: linear-gradient(#212a37, #212a37), linear-gradient(#212a37, #212a37); } .tp-line-white:hover { background-size: 0% 1px, 100% 1px; } .tp_img_reveal { visibility: hidden; overflow: hidden; } /*--------------------------------- 1.2 Common Classes ---------------------------------*/ .fix { overflow: hidden; } .clear { clear: both; } .z-index-1 { position: relative; z-index: 1; } .gx-40 { --bs-gutter-x: 40px; } .p-relative { position: relative; } /* dropcap */ /*----------------------------------------*/ /* 2.1 Back to top /*----------------------------------------*/ .back-to-top-wrapper { position: fixed; right: 50px; bottom: 0; height: 44px; width: 44px; cursor: pointer; display: block; border-radius: 50%; z-index: 99; opacity: 0; visibility: hidden; } @media (max-width: 767px) { .back-to-top-wrapper { right: 20px; bottom: 20px; } } .back-to-top-wrapper.back-to-top-btn-show { visibility: visible; opacity: 1; bottom: 50px; } .back-to-top-btn { display: inline-block; width: 44px; height: 44px; line-height: 44px; text-align: center; border-radius: 50%; color: var(--tp-common-black); -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; background: var(--tp-common-white); box-shadow: 0px 8px 16px rgba(3, 4, 28, 0.3); } .back-to-top-btn svg { -webkit-transform: translateY(-2px); -moz-transform: translateY(-2px); -ms-transform: translateY(-2px); -o-transform: translateY(-2px); transform: translateY(-2px); } .back-to-top-btn:hover { -webkit-transform: translateY(-4px); -moz-transform: translateY(-4px); -ms-transform: translateY(-4px); -o-transform: translateY(-4px); transform: translateY(-4px); } /*----------------------------------------*/ /* 2.2 Buttons /*----------------------------------------*/ .tp-btn-yellow-green { border-radius: 10px; padding: 16px 24px; font-weight: 600; font-size: 14px; line-height: 1; display: inline-block; letter-spacing: -0.01em; text-transform: uppercase; color: var(--tp-common-black-9); background-color: var(--tp-common-yellow-green); } .tp-btn-yellow-green span { position: relative; z-index: 1; overflow: hidden; display: inline-block; } .tp-btn-yellow-green span span.text-1 { position: relative; display: block; transition: 0.3s; } .tp-btn-yellow-green span span.text-2 { position: absolute; top: 100%; display: block; transition: 0.3s; } .tp-btn-yellow-green.lg { font-size: 16px; padding: 22px 28px; } @media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) { .tp-btn-yellow-green.lg { font-size: 14px; padding: 17px 20px; } } .tp-btn-yellow-green.green-solid { gap: 8px; line-height: 1; font-size: 16px; font-weight: 600; padding: 18px 24px; letter-spacing: -0.01em; text-transform: capitalize; color: var(--tp-common-black); display: inline-flex; align-items: center; justify-content: center; background-color: var(--tp-common-green-regular); } .tp-btn-yellow-green.green-solid span { position: relative; z-index: 1; overflow: hidden; display: inline-block; } .tp-btn-yellow-green.green-solid span span.text-1 { position: relative; display: block; transition: 0.3s; } .tp-btn-yellow-green.green-solid span span.text-2 { position: absolute; top: 100%; display: block; transition: 0.3s; } .tp-btn-yellow-green.green-solid.btn-60 { padding: 23px 24px; } .tp-btn-yellow-green.green-solid.btn-60 span { position: relative; z-index: 1; overflow: hidden; display: inline-block; } .tp-btn-yellow-green.green-solid.btn-60 span span.text-1 { position: relative; display: block; transition: 0.3s; } .tp-btn-yellow-green.green-solid.btn-60 span span.text-2 { position: absolute; top: 100%; display: block; transition: 0.3s; } .tp-btn-yellow-green.green-solid.btn-60 i { position: relative; overflow: hidden; width: 14px; height: 14px; display: inline-flex; margin-left: 4px; } .tp-btn-yellow-green.green-solid.btn-60 i svg { transform: translateY(-2px); position: absolute; bottom: -1px; left: 1px; transition: all 0.2s ease-out; } .tp-btn-yellow-green.green-solid.btn-60 i svg:last-child { left: -12px; bottom: -12px; transform: translate(0, 0); opacity: 0; } .tp-btn-yellow-green.green-solid.btn-60:hover { color: var(--tp-common-black); } .tp-btn-yellow-green.green-solid.btn-60:hover span span.text-1 { -webkit-transform: translateY(-150%); transform: translateY(-150%); } .tp-btn-yellow-green.green-solid.btn-60:hover span span.text-2 { top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .tp-btn-yellow-green.green-solid.btn-60:hover i svg:first-child { transform: translate(16px, -16px); } .tp-btn-yellow-green.green-solid.btn-60:hover i svg:last-child { opacity: 1; visibility: visible; transform: translate(13px, -13px); } .tp-btn-yellow-green.green-solid:hover { color: var(--tp-common-black); } .tp-btn-yellow-green.green-solid:hover span span.text-1 { -webkit-transform: translateY(-150%); transform: translateY(-150%); } .tp-btn-yellow-green.green-solid:hover span span.text-2 { top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .tp-btn-yellow-green.green-solid:focus { color: var(--tp-common-black); } .tp-btn-yellow-green:hover { color: var(--tp-common-black); } .tp-btn-yellow-green:hover span span.text-1 { -webkit-transform: translateY(-150%); transform: translateY(-150%); } .tp-btn-yellow-green:hover span span.text-2 { top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .tp-btn-yellow-green:focus { color: var(--tp-common-black); } /* Glow Border Animation */ /*----------------------------------------*/ /* 2.3 Animations /*----------------------------------------*/ @keyframes rotate2 { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes animationglob { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(-360deg); transform: rotate(-360deg); } } @keyframes lqdItiImgOut { 0% { transform: translateY(0) scale(1); } to { transform: translateY(100%) scale(1.15); } } @keyframes hero-circle-2 { 0% { -webkit-transform: translateX(1000px); -moz-transform: translateX(1000px); -ms-transform: translateX(1000px); -o-transform: translateX(1000px); transform: translateX(1000px); } 100% { -webkit-transform: translateX(0px); -moz-transform: translateX(0px); -ms-transform: translateX(0px); -o-transform: translateX(0px); transform: translateX(0px); } } @keyframes hero-circle-3 { 0% { -webkit-transform: translateX(500px); -moz-transform: translateX(500px); -ms-transform: translateX(500px); -o-transform: translateX(500px); transform: translateX(500px); } 100% { -webkit-transform: translateX(0px); -moz-transform: translateX(0px); -ms-transform: translateX(0px); -o-transform: translateX(0px); transform: translateX(0px); } } @keyframes move1 { 0% { bottom: -300px; left: -300px; } 30% { bottom: 100px; left: 300px; } 60% { bottom: 200px; left: 600px; } 100% { bottom: -300px; left: 1200px; } } @keyframes move1-reverse { 0% { bottom: -150px; left: 1400px; } 40% { bottom: 50px; left: 600px; } 70% { bottom: 200px; left: 300px; } 100% { bottom: -150px; left: -150px; } } @keyframes animate-pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.2), 0 0 0 0 rgba(255, 255, 255, 0.2); } 40% { box-shadow: 0 0 0 50px rgba(255, 109, 74, 0), 0 0 0 0 rgba(255, 255, 255, 0.2); } 80% { box-shadow: 0 0 0 50px rgba(255, 109, 74, 0), 0 0 0 30px rgba(255, 109, 74, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 109, 74, 0), 0 0 0 30px rgba(255, 109, 74, 0); } } @keyframes animate-pulse-2 { 0% { box-shadow: 0 0 0 0 rgba(255, 246, 105, 0.1), 0 0 0 0 rgba(255, 246, 105, 0.1); } 40% { box-shadow: 0 0 0 50px rgba(255, 109, 74, 0), 0 0 0 0 rgba(255, 246, 105, 0.1); } 80% { box-shadow: 0 0 0 50px rgba(255, 109, 74, 0), 0 0 0 30px rgba(255, 109, 74, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 109, 74, 0), 0 0 0 30px rgba(255, 109, 74, 0); } } @keyframes rotate { 100% { transform: translate(-50%, -50%) rotate(1turn); } } @keyframes marquee-horizontal { from { transform: translateX(0); } to { transform: translateX(-100%); } } @-webkit-keyframes video-border { 0% { transform: translate(-50%, -50%) scale(1); } 60% { opacity: 1; } 100% { transform: translate(-50%, -50%) scale(2); opacity: 0; } } @-moz-keyframes video-border { 0% { transform: translate(-50%, -50%) scale(1); } 60% { opacity: 1; } 100% { transform: translate(-50%, -50%) scale(2); opacity: 0; } } @-ms-keyframes video-border { 0% { transform: translate(-50%, -50%) scale(1); } 60% { opacity: 1; } 100% { transform: translate(-50%, -50%) scale(2); opacity: 0; } } @keyframes video-border { 0% { transform: translate(-50%, -50%) scale(1); } 60% { opacity: 1; } 100% { transform: translate(-50%, -50%) scale(2); opacity: 0; } } @keyframes scroll-up-down { 0% { -webkit-transform: translateZ(0); transform: translateZ(0); } } @keyframes scroll1 { 0% { top: 0px; } 100% { top: 100%; } } @keyframes scroll2 { 0% { top: 0px; } 100% { top: 100%; } } @keyframes transform { 0% { transform: scale(0.5); opacity: 0.8; } 50% { transform: scale(1); opacity: 1; } 100% { transform: scale(0.5); opacity: 0.8; } } @keyframes dash { 0% { stroke-dashoffset: 1000; } 100% { stroke-dashoffset: 0; } } @-webkit-keyframes tp_zoom_in_out { 0% { -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -ms-transform: scale(0.8); -o-transform: scale(0.8); transform: scale(0.8); } 50% { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } 100% { -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -ms-transform: scale(0.8); -o-transform: scale(0.8); transform: scale(0.8); } } @-moz-keyframes tp_zoom_in_out { 0% { -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -ms-transform: scale(0.8); -o-transform: scale(0.8); transform: scale(0.8); } 50% { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } 100% { -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -ms-transform: scale(0.8); -o-transform: scale(0.8); transform: scale(0.8); } } @-ms-keyframes tp_zoom_in_out { 0% { -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -ms-transform: scale(0.8); -o-transform: scale(0.8); transform: scale(0.8); } 50% { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } 100% { -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -ms-transform: scale(0.8); -o-transform: scale(0.8); transform: scale(0.8); } } @keyframes tp_zoom_in_out { 0% { -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -ms-transform: scale(0.8); -o-transform: scale(0.8); transform: scale(0.8); } 50% { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } 100% { -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -ms-transform: scale(0.8); -o-transform: scale(0.8); transform: scale(0.8); } } @keyframes scroll_anim { 0% { transform: translateY(0); } 50% { transform: translateY(10px); } 100% { transform: translateY(0); } } @keyframes loadingAnimation { to { transform: rotate(-360deg); } } @keyframes roteted { 0% { transform: rotate(0); } 100% { transform: rotate(360deg); } } @keyframes headerSlideDown { 0% { margin-top: -150px; } 100% { margin-top: 0; } } @keyframes bar_anim { 0%, 100% { -webkit-clip-path: inset(-2px 0); clip-path: inset(-2px 0); } 42% { -webkit-clip-path: inset(-2px 0 -2px 100%); clip-path: inset(-2px 0 -2px 100%); } 43% { -webkit-clip-path: inset(-2px 100% -2px 0); clip-path: inset(-2px 100% -2px 0); } } @keyframes scrollText { from { transform: translateX(0%); } to { transform: translateX(-50%); } } @keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translateY(20px); -ms-transform: translateY(20px); transform: translateY(20px); } 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } @-webkit-keyframes tpshake { 10% { transform: translateY(-10px); } 50% { transform: skew(15deg); } 80% { transform: rotate(10deg); } 100% { transform: translate(0); } } @-moz-keyframes tpshake { 10% { transform: translateY(-10px); } 50% { transform: skew(15deg); } 80% { transform: rotate(10deg); } 100% { transform: translate(0); } } @-ms-keyframes tpshake { 10% { transform: translateY(-10px); } 50% { transform: skew(15deg); } 80% { transform: rotate(10deg); } 100% { transform: translate(0); } } @keyframes tpshake { 10% { transform: translateY(-10px); } 50% { transform: skew(15deg); } 80% { transform: rotate(10deg); } 100% { transform: translate(0); } } /*----------------------------------------*/ /* 2.4 Preloader /*----------------------------------------*/ #preloader { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 1000; background-color: var(--tp-theme-green); } .preloader { width: 50px; height: 50px; display: inline-block; padding: 0px; text-align: left; box-sizing: border-box; position: absolute; top: 50%; left: 50%; margin-left: -25px; margin-top: -25px; } .preloader span { position: absolute; display: inline-block; width: 50px; height: 50px; border-radius: 100%; background: var(--tp-common-black); animation: preloader 1.3s linear infinite; -webkit-animation: preloader 1.3s linear infinite; } .preloader span:last-child { animation-delay: -0.9s; -webkit-animation-delay: -0.9s; } @keyframes preloader { 0% { transform: scale(0, 0); opacity: 0.5; } 100% { transform: scale(1, 1); opacity: 0; } } @-webkit-keyframes preloader { 0% { -webkit-transform: scale(0, 0); opacity: 0.5; } 100% { -webkit-transform: scale(1, 1); opacity: 0; } } /*--- end of preloader ---*/ /*----------------------------------------*/ /* 2.5 Background /*----------------------------------------*/ .grey-bg-2 { background-color: var(--tp-grey-4); } .black-bg { background-color: var(--tp-common-black); } /*----------------------------------------*/ /* 2.6 Nice Select /*----------------------------------------*/ /*----------------------------------------*/ /* 2.7 Breadcrumb /*----------------------------------------*/ /*----------------------------------------*/ /* 2.8 Accordion /*----------------------------------------*/ /*----------------------------------------*/ /* 2.9 Section Title /*----------------------------------------*/ .tp-section-subtitle { font-weight: 400; font-size: 18px; line-height: 1; display: inline-block; text-transform: uppercase; color: var(--tp-common-black); } .tp-section-subtitle.pre::before { content: ""; height: 8px; width: 8px; margin-right: 12px; border-radius: 4px; display: inline-block; transform: translateY(-2px); background-color: var(--tp-common-red-3); display:none; } .tp-section-subtitle.subtitle-black { font-weight: 400; font-size: 16px; line-height: 1.2; text-transform: capitalize; color: var(--tp-common-black); } .tp-section-subtitle.fs-17 { font-weight: 400; font-size: 17px; line-height: 1; text-transform: capitalize; color: var(--tp-common-white); } .tp-section-subtitle.fs-17.pre-circle::before { content: ""; height: 8px; width: 8px; margin-right: 12px; border-radius: 50%; display: inline-block; transform: translateY(-2px); background-color: var(--tp-common-white); display:none; } .tp-section-subtitle-teko { font-weight: 500; font-size: 30px; line-height: 1; display: inline-block; font-family: var(--tp-ff-teko); color: #000; } @media (max-width: 767px) { .tp-section-subtitle-teko { font-size: 25px; } } .tp-section-subtitle-teko i { font-style: normal; color: var(--tp-common-yellow-green); } .tp-section-subtitle.st { font-weight: 500; color: #494949; margin-bottom: 20px; } .tp-section-title { font-size: 80px; font-weight: 700; line-height: 1; letter-spacing: -0.08em; text-transform: uppercase; } @media only screen and (min-width: 1701px) and (max-width: 1800px) { .tp-section-title { font-size: 70px; } } @media only screen and (min-width: 1600px) and (max-width: 1700px) { .tp-section-title { font-size: 60px; } } @media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) { .tp-section-title { font-size: 50px; } } @media (max-width: 767px) { .tp-section-title { font-size: 42px; } } .tp-section-title.fs-64 { font-weight: normal; font-size: 64px; line-height: 1.1; letter-spacing: 0; text-transform: capitalize; color: var(--tp-common-white); padding-left: 0; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tp-section-title.fs-64 { font-size: 55px; } } @media (max-width: 767px) { .tp-section-title.fs-64 { font-size: 42px; } } .tp-section-title-grotesk { font-size: 60px; font-weight: 700; line-height: 1; letter-spacing: -0.03em; color: var(--tp-common-black); font-family: var(--tp-ff-grotesk); } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .tp-section-title-grotesk { font-size: 55px; } } @media (max-width: 767px) { .tp-section-title-grotesk { font-size: 50px; } } @media (max-width: 767px) { .tp-section-title-grotesk br { display: none; } } .tp-section-title-grotesk > span { display: inline-block; } .tp-section-title-teko { font-weight: 600; font-size: 72px; line-height: 0.9; letter-spacing: -0.01em; font-family: var(--tp-ff-teko); color: #000; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .tp-section-title-teko { font-size: 60px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tp-section-title-teko { font-size: 55px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .tp-section-title-teko { font-size: 60px; } } @media (max-width: 767px) { .tp-section-title-teko { font-size: 44px; } } .tp-section-title-teko span { color: var(--tp-common-yellow-green); } .tp-revel-line { overflow: hidden; } /*----------------------------------------*/ /* 2.11 Search /*----------------------------------------*/ .tp-search-area { position: fixed; left: 0; top: 0; width: 100%; opacity: 0; height: 300px; visibility: hidden; background: var(--tp-common-white); -webkit-transform: translateY(calc(-100% - 80px)); -moz-transform: translateY(calc(-100% - 80px)); -ms-transform: translateY(calc(-100% - 80px)); -o-transform: translateY(calc(-100% - 80px)); transform: translateY(calc(-100% - 80px)); transition: all 0.5s ease-in-out 0s, visibility 0.5s ease-in-out; animation: 0.95s ease 0s normal forwards 1 running headerSlideDown; z-index: 99999; overflow-y: scroll; overscroll-behavior-y: contain; scrollbar-width: none; } .tp-search-area::-webkit-scrollbar { display: none; /* for Chrome, Safari, and Opera */ } .tp-search-area.opened { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); visibility: visible; opacity: 1; } .tp-search-close-btn { position: relative; height: 50px; width: 50px; z-index: 2; line-height: 1; border-radius: 50%; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; background-color: transparent; color: var(--tp-common-black); border: 1px solid rgba(22, 22, 19, 0.1); } .tp-search-close-btn svg { height: 12px; width: 12px; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; -webkit-transform: translateY(-1px); -moz-transform: translateY(-1px); -ms-transform: translateY(-1px); -o-transform: translateY(-1px); transform: translateY(-1px); } .tp-search-close-btn:hover svg { -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); } /*----------------------------------------*/ /* 2.12 Magic Cursor /*----------------------------------------*/ body.tp-magic-cursor #magic-cursor { display: block; } #magic-cursor { position: absolute; display: none; width: 10px; height: 10px; pointer-events: none; z-index: 99999; opacity: 0; top: 0; left: 0; } #ball { position: fixed; display: flex; align-items: center; pointer-events: none; border-radius: 50%; color: transparent; justify-content: center; mix-blend-mode: difference; background-color: var(--tp-common-black); } .cursor-bg-red #ball { background-color: #FF535B !important; } .cursor-bg-red #ball .ball-view { color: var(--tp-common-white); } .cursor-bg-red-2 #ball { background-color: #FF481F !important; } .cursor-bg-red-2 #ball .ball-view { color: var(--tp-common-white); } .cursor-bg-yellow #ball { background-color: #FFF669 !important; } .cursor-bg-yellow #ball .ball-view { color: var(--tp-common-black); } .cursor-white-bg #ball .ball-view { color: var(--tp-common-black); } /* Ball view ============= */ #ball .ball-view { position: absolute; opacity: 0; visibility: hidden; padding: 0 5px; font-size: 15px; font-weight: 500; line-height: 1.3; text-align: center; transform: scale(0); color: var(--tp-common-black); } /* Ball drag ============= */ #ball.with-blur { -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } /* Ball close ============== */ .tp-magnetic-wrap { display: flex; align-items: center; justify-content: center; } /* HEADER CSS */ /*----------------------------------------*/ /* 3.1 Header Style /*----------------------------------------*/ .header-transparent { position: absolute; top: 0; left: 0; right: 0; z-index: 9; width: 100%; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) { .tp-header-ptb { padding: 10px 0; } } .tp-header-menu > nav > ul > li { margin: 0 20px; list-style-type: none; display: inline-block; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .tp-header-menu > nav > ul > li { margin: 0 15px; } } .tp-header-menu > nav > ul > li > a { padding: 35px 0; font-weight: 500; font-size: 32px; display: inline-block; letter-spacing: 3px; color: var(--tp-common-white); } @media only screen and (min-width: 1600px) and (max-width: 1700px), only screen and (min-width: 1400px) and (max-width: 1599px) { .tp-header-box { padding-right: 30px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .tp-header-box { padding-right: 0px; } } .tp-header-logo img { max-width: inherit; } @media only screen and (min-width: 1600px) and (max-width: 1700px) { .tp-header-logo { padding-left: 30px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .tp-header-logo { padding-right: 25px; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) { .tp-header-logo { padding: 10px 0; } } .tp-header-bar button { width: 30px; color: var(--tp-common-white); } .tp-header-bar button i { height: 2px; width: 14px; display: block; margin-left: 0; background-color: var(--tp-common-white); } .tp-header-bar button i:nth-child(2) { width: 24px; } .tp-header-bar button i:not(:last-of-type) { margin: 6px auto; } .tp-header-bar button:hover i { animation: bar_anim 0.8s cubic-bezier(0.44, 1.1, 0.53, 0.99) 1 forwards; } .tp-header-4-style .tp-header-menu nav ul li a { color: var(--tp-common-white); } .tp-header-4-style.header-4-light-style .tp-header-bar button { color: var(--tp-common-black); } .tp-header-4-style.header-4-light-style .tp-header-bar button i { background-color: var(--tp-common-black); } .header-lang-submenu { position: absolute; top: 110%; right: 0px; width: 120px; z-index: 9; opacity: 0; padding: 15px 20px; visibility: hidden; background: #4D3D30; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; box-shadow: 0 30px 70px 6px rgba(11, 6, 70, 0.08); } .header-lang-submenu li { list-style: none; } .header-lang-submenu li a { font-size: 13px; text-transform: capitalize; color: var(--tp-common-white); } .header-lang-submenu.open { top: 100%; opacity: 1; visibility: visible; } /*----------------------------------------*/ /* 4.1 Main Menu /*----------------------------------------*/ .header-sticky { position: fixed; top: 0; left: 0; right: 0; opacity: 1; width: 100%; z-index: 10; visibility: visible; background: rgba(38, 37, 40, 0.9); box-shadow: 0 2px 6px 0 rgba(19, 19, 22, 0.08); animation: 0.95s ease 0s normal forwards 1 running headerSlideDown; -webkit-animation: 0.95s ease 0s normal forwards 1 running headerSlideDown; } .header-sticky .tp-header-menu > nav > ul > li > a { padding: 22px 0; } .header-sticky.sticky-white-bg { background: rgba(255, 255, 255, 0.9); } .header-sticky.sticky-white-bg .tp-header-menu > nav > ul > li > a { color: var(--tp-common-black); } .header-sticky.sticky-white-bg .tp-header-dropdown nav ul li.has-dropdown::after { color: var(--tp-common-black); } .header-sticky.sticky-white-bg .logo-white { display: none; } .header-sticky.sticky-white-bg .logo-black { display: block !important; } .header-sticky.sticky-white-bg .tp-header-bar button i { background-color: var(--tp-common-black); } .header-sticky.tp-header-blur::after { position: absolute; content: ""; top: 0; left: 0; width: 100%; height: 100%; backdrop-filter: blur(40px); z-index: -1; } .header-sticky .tp-header-logo { padding: 0; } .tp-header-dropdown nav ul li { position: relative; list-style: none; } .tp-header-dropdown nav ul li.p-static { position: static; } .tp-header-dropdown nav ul li.has-dropdown::after { content: "\f107"; font-size: 16px; font-weight: 400; margin-left: 2px; display: inline-block; color: var(--tp-common-white); transition: all 0.3s 0s ease-out; font-family: var(--tp-ff-fontawesome); } .tp-header-dropdown nav ul li.has-dropdown:hover::after { transform: rotate(-180deg); } /*----------------------------------------*/ /* 4.2 Mobile Menu /*----------------------------------------*/ .tp-offcanvas-menu { margin-bottom: 80px; } .tp-offcanvas-menu ul { list-style: none; } .tp-offcanvas-menu ul li { position: relative; } .tp-offcanvas-menu ul li > a { padding: 10px 0; display: block; font-size: 20px; font-weight: 500; } .tp-offcanvas-menu ul li.active > a { color: var(--tp-common-red-3); } .tp-offcanvas-menu ul li.active > .tp-menu-close i { top: 10px; -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); -ms-transform: rotate(135deg); -o-transform: rotate(135deg); transform: rotate(135deg); } .tp-offcanvas-menu ul li .submenu { display: none; } .tp-offcanvas-menu ul li .submenu .submenu { margin-left: 30px; } .tp-offcanvas-menu .mega-menu { width: auto; opacity: 1; visibility: visible; transition: none; position: static; display: none; -webkit-transform: perspective(0) rotateX(0); -moz-transform: perspective(0) rotateX(0); -ms-transform: perspective(0) rotateX(0); -o-transform: perspective(0) rotateX(0); transform: perspective(0) rotateX(0); } .tp-menu-close { position: absolute; right: 7px; top: 12px; } .tp-menu-close i { transition: all 0.3s; font-size: 18px; font-weight: 500; } .menu-item-has-children .tp-menu-close { right: 14px; top: 9px; } /*----------------------------------------*/ /* 4.3 offcanvas Menu /*----------------------------------------*/ .body-overlay { position: fixed; top: 0; left: 0; z-index: 99; width: 100%; height: 100%; visibility: hidden; opacity: 0; transition: 0.45s ease-in-out; background: rgba(24, 24, 24, 0.4); } .body-overlay.opened { opacity: 1; visibility: visible; } .tp-offcanvas-wrapper { position: fixed; top: 0; right: 0; width: 450px; height: 100vh; z-index: 999; padding: 50px 50px; overflow-y: scroll; transition: all 0.3s; background: #FFF; overscroll-behavior-y: contain; -webkit-transform: translateX(calc(100% + 80px)); -moz-transform: translateX(calc(100% + 80px)); -ms-transform: translateX(calc(100% + 80px)); -o-transform: translateX(calc(100% + 80px)); transform: translateX(calc(100% + 80px)); } @media (max-width: 767px) { .tp-offcanvas-wrapper { width: 100%; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .tp-offcanvas-wrapper { width: 450px; } } .tp-offcanvas-wrapper .logo-2 { display: none; } .tp-offcanvas-area.opened .tp-offcanvas-wrapper { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } .tp-offcanvas-top { margin-bottom: 90px; } .tp-offcanvas-close-btn { color: black; } .tp-offcanvas-close-btn:hover { opacity: 1; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); } .tp-offcanvas-content { margin-bottom: 45px; } .tp-offcanvas-content p { font-size: 16px; font-weight: 400; line-height: 24px; color: #414144; } .tp-offcanvas-title { font-size: 40px; line-height: 1; letter-spacing: -0.8px; font-weight: 700; margin-bottom: 15px; color: var(--tp-common-black); } .tp-offcanvas-title.sm { font-size: 20px; font-weight: 700; margin-bottom: 15px; text-transform: uppercase; color: var(--tp-common-black); } .tp-offcanvas-gallery { margin-bottom: 65px; } .tp-offcanvas-gallery-img img { transition: 0.9s; } .tp-offcanvas-gallery-img:hover img { transform: scale(1.2) rotate(-2deg); } .tp-offcanvas-contact { margin-bottom: 55px; } .tp-offcanvas-contact ul li { list-style: none; } .tp-offcanvas-contact ul li:not(:last-child) { margin-bottom: 2px; } .tp-offcanvas-contact ul li a { display: inline-block; color: #414144; font-size: 16px; position: relative; } .tp-offcanvas-contact ul li a::after { position: absolute; bottom: 2px; right: 0; width: 0; height: 1px; content: ""; transition: 0.4s; background-color: #1e1e1e; } .tp-offcanvas-contact ul li a:hover { color: var(--tp-common-black); } .tp-offcanvas-contact ul li a:hover::after { width: 100%; right: auto; left: 0; } .tp-offcanvas-social ul { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; } .tp-offcanvas-social ul li { list-style: none; } .tp-offcanvas-social ul li:not(:last-child) { margin-right: 8px; } .tp-offcanvas-social ul li a { display: inline-block; text-align: center; width: 40px; height: 40px; line-height: 38px; border-radius: 40px; transition: all 0.3s; color: var(--tp-common-black); border: 1px solid rgba(2, 11, 24, 0.1); } .tp-offcanvas-social ul li a:hover { background-color: var(--tp-common-black); border-color: var(--tp-common-black); color: var(--tp-common-white); } .tp-offcanvas-social ul li a svg { -webkit-transform: translateY(-1px); -moz-transform: translateY(-1px); -ms-transform: translateY(-1px); -o-transform: translateY(-1px); transform: translateY(-1px); } .tp-offcanvas-2-area { position: relative; } .tp-offcanvas-2-area .tp-offcanvas-menu > nav > ul > li > a { font-weight: 700; font-size: 50px; line-height: 1; color: #717172; letter-spacing: -0.02em; } @media only screen and (min-width: 768px) and (max-width: 991px) { .tp-offcanvas-2-area .tp-offcanvas-menu > nav > ul > li > a { font-size: 35px; } } @media (max-width: 767px) { .tp-offcanvas-2-area .tp-offcanvas-menu > nav > ul > li > a { font-size: 30px; } } .tp-offcanvas-2-area .tp-offcanvas-menu > nav > ul > li > a::after { position: absolute; left: 0; top: 3px; font-weight: 500; font-size: 13px; content: "0" counter(count); counter-increment: count; color: rgba(113, 113, 114, 0.8); } .tp-offcanvas-2-area .tp-offcanvas-menu > nav > ul > li.is-active > a { color: var(--tp-common-white); } .tp-offcanvas-2-area .tp-offcanvas-menu > nav > ul > li.is-active .tp-menu-close i { color: var(--tp-common-white); } .tp-offcanvas-2-area .tp-offcanvas-menu > nav > ul > li > ul > li > a { font-weight: 600; font-size: 30px; line-height: 1; transition: 0.3s; color: #717172; letter-spacing: -0.02em; } @media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) { .tp-offcanvas-2-area .tp-offcanvas-menu > nav > ul > li > ul > li > a { font-size: 20px; } } .tp-offcanvas-2-area .tp-offcanvas-menu > nav > ul > li > ul > li > a:hover { transform: translateX(15px); color: var(--tp-common-white); } .tp-offcanvas-2-area .tp-offcanvas-menu ul li:not(:last-child) > a { border-bottom: 0; } .tp-offcanvas-2-area .tp-offcanvas-menu ul li > a { padding: 0; padding-left: 30px; } .tp-offcanvas-2-area .tp-offcanvas-menu ul > li:not(:last-child) { margin-bottom: 45px; } .tp-offcanvas-2-area .tp-offcanvas-menu ul li .submenu { padding-left: 20px; margin-top: 40px; margin-bottom: 56px; } @media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) { .tp-offcanvas-2-area .tp-offcanvas-menu ul li .submenu { padding-left: 0; } } .tp-offcanvas-2-area .tp-offcanvas-menu ul li .submenu li:not(:last-child) { margin-bottom: 30px; } .tp-offcanvas-2-close-btn { font-size: 14px; font-weight: 500; text-transform: uppercase; color: var(--tp-common-white); } .tp-offcanvas-2-close-btn .text { width: 60px; height: 20px; transition: 0.3s; overflow: hidden; display: inline-block; transform: translateY(4px); color: var(--tp-common-white); } .tp-offcanvas-2-close-btn .text span { transition: 0.3s; display: inline-block; -webkit-transform: translateX(120%); -moz-transform: translateX(120%); -ms-transform: translateX(120%); -o-transform: translateX(120%); transform: translateX(120%); } .tp-offcanvas-2-close-btn:hover .text span { transform: translateX(0%); } .tp-offcanvas-2-close-btn:hover span svg { -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); } /*----------------------------------------*/ /* 5.1 Postbox css /*----------------------------------------*/ .postbox-arrow-prev { position: absolute; top: 50%; left: 30px; z-index: 2; transform: translateY(-50%); } .postbox-arrow-next { position: absolute; top: 50%; right: 30px; z-index: 2; transform: translateY(-50%); } /*----------------------------------------*/ /* 5.2 Recent Post css /*----------------------------------------*/ /*----------------------------------------*/ /* 5.3 Sidebar css /*----------------------------------------*/ /*----------------------------------------*/ /* 5.4 Blog css /*----------------------------------------*/ /*----------------------------------------*/ /* 6.1 Footer Style 1 /*----------------------------------------*/ .tp-footer-widget-social a { height: 42px; width: 42px; line-height: 39px; text-align: center; border-radius: 50%; display: inline-block; color: var(--tp-common-black); background-color: var(--tp-grey-2); margin-bottom: 8px; } .tp-footer-widget-social a:not(:last-child) { margin-right: 3px; } .tp-footer-widget-social a:hover { color: var(--tp-common-white); background-color: var(--tp-common-red-3); } .text-scale-anim { white-space: pre-wrap; transform-origin: top left; } .tp-letter-span { display: inline-block; } .tp-word-span { display: inline-block; } /*----------------------------------------*/ /* 6.2 Footer Style 2 /*----------------------------------------*/ /*----------------------------------------*/ /* 6.3 Footer Style 3 /*----------------------------------------*/ /*----------------------------------------*/ /* 6.5 Footer Style 5 /*----------------------------------------*/ /*----------------------------------------*/ /* 6.7 Footer Style 7 /*----------------------------------------*/ /*----------------------------------------*/ /* 6.8 Footer Style 8 /*----------------------------------------*/ /*----------------------------------------*/ /* 6.9 Footer Style 9 /*----------------------------------------*/ /*----------------------------------------*/ /* 6.10 Footer Style 10 /*----------------------------------------*/ /*----------------------------------------*/ /* 6.11 Footer Style 11 /*----------------------------------------*/ /*----------------------------------------*/ /* 6.12 Footer Style 12 /*----------------------------------------*/ .st-footer-widget-content p { color: #494949; margin-bottom: 35px; } .st-footer-widget-menu ul li { list-style-type: none; } .st-footer-widget-menu ul li:not(:last-child) { margin-bottom: 10px; } .st-footer-widget-menu ul li a { font-size: 18px; font-weight: 500; line-height: 1; color: #494949; letter-spacing: -0.36px; } .st-footer-widget-info-title { margin-bottom: 10px; } .st-footer-widget-info-title a { font-size: 18px; font-weight: 500; color: #494949; letter-spacing: -0.36px; } .st-footer-widget-info-title a:hover { color: var(--tp-common-brown); } .st-footer-widget-social-title { font-size: 18px; font-weight: 500; margin-bottom: 35px; display: inline-block; color: var(--tp-common-brown); } .st-footer-widget-social .tp-footer-widget-social a { color: var(--tp-common-brown); background-color: var(--tp-common-white); } .st-footer-widget-social .tp-footer-widget-social a:hover { color: var(--tp-common-white); background-color: var(--tp-common-brown); } .st-footer-top-border { border-bottom: 1px solid rgba(69, 48, 48, 0.15); } .st-footer-top-icon { position: absolute; bottom: 0; left: 0; right: 0; text-align: center; } .st-footer-top-icon span { width: 170px; display: inline-block; border-bottom: 7px solid var(--tp-common-brown); } .st-footer-top-icon span svg { transform: translateY(4px); } @media (max-width: 767px) { .st-footer-col-3 { margin-bottom: 120px; } } .st-copyright-ptb { padding-top: 40px; padding-bottom: 60px; } .st-copyright-sub { font-size: 18px; font-weight: 500; line-height: 1; color: #494949; margin-bottom: 20px; display: inline-block; text-transform: uppercase; } .st-copyright-title { margin: 0; font-size: 140px; font-weight: 700; line-height: 0.7; position: relative; letter-spacing: -5.6px; color: var(--tp-common-brown); font-family: var(--tp-ff-poppins); } @media only screen and (min-width: 992px) and (max-width: 1199px) { .st-copyright-title { font-size: 100px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .st-copyright-title { font-size: 64px; letter-spacing: 0; } } @media (max-width: 767px) { .st-copyright-title { font-size: 60px; } } .st-copyright-title a { display: inline-block; line-height: 1; } .st-copyright-title a:hover span { transform: translateX(12); } .st-copyright-title span { position: absolute; top: -20px; right: 5%; display: grid; height: 60px; width: 60px; border-radius: 50%; place-content: center; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; color: var(--tp-common-white); background-color: var(--tp-common-brown); } /*----------------------------------------*/ /* 6.13 Footer Style 13 /*----------------------------------------*/ .cr-footer-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .cr-footer-bg img { height: 100%; } /*----------------------------------------*/ /* 6.14 Footer Style 14 /*----------------------------------------*/ /*----------------------------------------*/ /* 6.15 Footer Style 15 /*----------------------------------------*/ /*----------------------------------------*/ /* 7.1 Hero css /*----------------------------------------*/ @media (max-width: 767px) { .tp-hero-2-area { padding-bottom: 0; } } .design-hero-slide-active .slide-transtion { -webkit-transition-timing-function: linear; transition-timing-function: linear; } .design-hero-slide-active .swiper-slide { width: auto; } .content__img { width: 250px; aspect-ratio: 1.1; border-radius: 10px; position: absolute; top: 0; left: 0; 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; } .ai-hero-slider-2 { transform: scale(1, -1); } .ai-hero-slider-2 img { transform: scale(1, -1); } .box { display: inline-flex; } .box .eye { position: relative; width: 74px; height: 74px; display: block; background: var(--tp-common-yellow-green); margin: 0 5px; border-radius: 50%; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .box .eye { width: 64px; height: 64px; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) { .box .eye { width: 54px; height: 54px; } } .box .eye:before { content: ""; position: absolute; top: 50%; left: 22px; width: 30px; height: 30px; border-radius: 50%; background: #17312f; transform: translate(-50%, -50%); } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) { .box .eye:before { width: 25px; height: 25px; } } .tp-image-distortion { overflow: hidden; height: 100%; position: relative; } .tp-image-distortion canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; } /*----------------------------------------*/ /* 7.2 About Css /*----------------------------------------*/ .tp-about-funcact-item span { font-weight: 400; font-size: 70px; line-height: 1; margin-bottom: 17px; display: inline-block; letter-spacing: -0.04em; } .tp-about-funcact-item span i { font-style: normal; } .tp-about-funcact-item p { line-height: 1.33; margin-bottom: 0; font-size: 20px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .tp-about-funcact-item p { font-size: 16px; } .tp-about-funcact-item p br { display: none; } } .creative-brand-item { text-align: center; } @media only screen and (min-width: 768px) and (max-width: 991px) { .crp-about-area { padding-top: 80px; } } @media (max-width: 767px) { .crp-about-area { padding-top: 80px; padding-bottom: 80px; } } .crp-about-btn-box { flex: 0 0 auto; margin-right: 0; margin-top: 7px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .crp-about-btn-box { margin-right: 40px; } } @media (max-width: 767px) { .crp-about-btn-box { margin-right: 0; margin-bottom: 20px; } } .crp-about-right { padding-left: 80px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) { .crp-about-right { padding-left: 0; } } @media (max-width: 767px) { .crp-about-right .tp-section-title-teko { margin-bottom: 20px; } } .crp-about-shape { position: absolute; top: -16%; left: 13%; z-index: -1; } @media (max-width: 767px) { .crp-about-bottom-wrap { flex-wrap: wrap; } } @media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) { .crp-about-left .tp-section-subtitle-teko { margin-bottom: 20px; } } /*----------------------------------------*/ /* 7.3 Banner Css /*----------------------------------------*/ .ar-banner-shape img { max-width: inherit; } /*----------------------------------------*/ /* 7.4 Text-slide Css /*----------------------------------------*/ .tp-text-slide-active .swiper-slide { width: auto; } .des-text-item span { position: relative; padding-right: 80px; margin-right: 40px; font-weight: 600; font-size: 300px; line-height: 1; white-space: nowrap; text-transform: uppercase; color: var(--tp-common-cream); font-family: var(--tp-ff-mango); } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .des-text-item span { font-size: 240px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .des-text-item span { font-size: 235px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .des-text-item span { font-size: 200px; } } @media (max-width: 767px) { .des-text-item span { font-size: 100px; } } .des-text-item span::after { position: absolute; content: ""; top: 75px; right: 0; width: 40px; height: 40px; border-radius: 50%; background-color: #fb4566; } @media (max-width: 767px) { .des-text-item span::after { top: 24px; } } .des-text-item.sm { margin-bottom: 160px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) { .des-text-item.sm { margin-bottom: 80px; } } .des-text-item.sm span { font-weight: 300; font-size: 160px; line-height: 1; transition: 0.3s; text-transform: capitalize; color: rgba(249, 244, 232, 0.1); font-family: var(--tp-ff-mango-light); } @media (max-width: 767px) { .des-text-item.sm span { font-size: 115px; } } .des-text-item.sm span::after { top: 50px; opacity: 0.1; transition: 0.3s; } @media (max-width: 767px) { .des-text-item.sm span::after { top: 30px; } } .des-text-moving-top.active .des-text-item.sm span { color: var(--tp-common-cream); } .des-text-moving-top.active .des-text-item.sm span::after { opacity: 1; } .ai-text-slider-active { padding: 50px 0; } .ai-text-slider-active .slide-transtion { -webkit-transition-timing-function: linear; transition-timing-function: linear; } .ai-text-slider-active .swiper-slide { width: auto; } .crp-text-slider-active { padding-top: 160px; padding-bottom: 150px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .crp-text-slider-active { padding-top: 70px; } } @media (max-width: 767px) { .crp-text-slider-active { padding-top: 55px; padding-bottom: 60px; } } .crp-text-slider-active .swiper-slide { width: auto; } .crp-text-slider-active .slide-transtion { -webkit-transition-timing-function: linear; transition-timing-function: linear; } .slide-transtion { -webkit-transition-timing-function: linear; transition-timing-function: linear; } /*----------------------------------------*/ /* 7.5 Service Css /*----------------------------------------*/ .ar-service-item { height: 100%; width: 25%; cursor: pointer; } .ar-service-item:not(:last-child) { border-right: 1px solid rgba(255, 255, 255, 0.2); } @media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) { .inner-service-1-left { margin-bottom: 50px; } } .inner-service-1-left > span { font-weight: 500; font-size: 14px; line-height: 1; color: #f9f4e8; margin-bottom: 25px; display: inline-block; letter-spacing: 0.02em; text-transform: uppercase; font-family: var(--tp-ff-clash-semibold); } .inner-service-1-left ul li { list-style-type: none; } .inner-service-1-left ul li:not(:last-child) { margin-bottom: 12px; } .inner-service-1-left ul li span { font-weight: 600; font-size: 20px; line-height: 1; color: #ff535b; letter-spacing: 0.02em; text-transform: uppercase; font-family: var(--tp-ff-clash-semibold); } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) { .tp-inner-service-area { padding-top: 20px; padding-bottom: 0; } } .tp-service-4-dot .swiper-pagination-bullet { width: 12px; height: 12px; opacity: 1; transition: 0.3s; border-radius: 50%; display: inline-block; background: transparent; border: 1px solid #999; } .tp-service-4-dot .swiper-pagination-bullet.swiper-pagination-bullet-active { border-color: var(--tp-common-green-regular); background-color: var(--tp-common-green-regular); } /*----------------------------------------*/ /* 7.6 Project Css /*----------------------------------------*/ .des-portfolio-item img { width: 100%; border-radius: 20px; } .des-portfolio-thumb { position: relative; border-radius: 20px; } .des-portfolio-thumb::after { position: absolute; content: ""; top: 0; left: 0; width: 100%; height: 100%; border-radius: 20px; background:linear-gradient(180deg, rgba(20, 20, 20, 0) 0%, rgb(20 20 20 / 92%) 100%); z-index: 1; } .des-portfolio-category { position: absolute; top: 45px; left: 50px; z-index: 2; } @media (max-width: 767px) { .des-portfolio-category { top: 15px; left: 15px; } } .des-portfolio-category span { font-weight: 500; font-size: 14px; line-height: 1; border-radius: 20px; padding: 7px 12px; transition: 0.3s; letter-spacing: 0.4px; display: inline-block; text-transform: uppercase; color: var(--tp-common-white); border: 1px solid rgba(255, 255, 255, 0.2); } @media (max-width: 767px) { .des-portfolio-category span { font-size: 12px; padding: 7px 7px; } } .des-portfolio-category span:hover { color: var(--tp-common-black); border-color: var(--tp-common-white); background-color: var(--tp-common-white); } .des-portfolio-content { position: absolute; bottom: 50px; left: 0; right: 0; display: inline-block; text-align: center;z-index: 100; } @media (max-width: 767px) { .des-portfolio-content { bottom: 5px; } .des-portfolio-title { color: #000; } } .des-portfolio-title { font-weight: 500; font-size:64px; line-height: 1; margin-bottom: 0; display: inline-block; font-family: var(--tp-ff-mango); color:#fff; } .des-portfolio-content p{ color:#fff; font-size: 20px; padding:0 50px; line-height:30px; } .des-portfolio-thumb:after{ } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .des-portfolio-title { font-size: 64px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .des-portfolio-title { font-size: 64px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .des-portfolio-title { font-size: 50px; } } @media (max-width: 767px) { .des-portfolio-title { font-size:40px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .des-portfolio-area { padding-bottom: 120px; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) { .des-portfolio-area { padding-bottom: 110px; } } @media (max-width: 767px) { .des-portfolio-area { padding-bottom: 0px; } } .dgm-project-active { margin: 0px -460px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .dgm-project-active { margin: 0; } } @media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) { .dgm-project-active { margin: 0; margin: 0px 15px; } } @media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) { .creative-project-area { padding-bottom: 80px; } } .creative-project-thumb { overflow: hidden; border-radius: 20px; margin-bottom: 0; } .creative-project-thumb img { width: 100%; border-radius: 25px; transition: transform 500ms; transform-origin: center center; transform: perspective(0) rotateX(0) rotateY(0) scaleX(1) scaleY(1); } .creative-project-title-sm { font-weight: normal; font-size: 50px; letter-spacing: 0; color: var(--tp-common-white); line-height:55px; } .creative-project-category { position: absolute; top: -2px; right: 0; padding: 15px; padding-top: 7px; background-color: #0e0f11; border-radius: 0 0 0 20px; opacity: 0; visibility: hidden; transition: 0.4s; transform: translateY(-50px); } .creative-project-category span { border-radius: 20px; padding: 9px 18px; font-weight: 500; font-size: 15px; line-height: 1; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; display: inline-block; background-color: #242426; color: var(--tp-common-white); } .creative-project-category span:hover { color: var(--tp-common-black); background-color: var(--tp-common-green-light); } .creative-project-category::before { content: ""; position: absolute; background-color: transparent; bottom: -40px; right: 0; height: 40px; width: 20px; border-top-right-radius: 20px; box-shadow: 0px -17px 0 0 #0E0F11; } .creative-project-category::after { content: ""; position: absolute; background-color: transparent; top: 1px; left: -20px; height: 40px; width: 20px; border-top-right-radius: 20px; box-shadow: 0 -18px 0 0 #0E0F11; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) { .creative-project-item { padding-left: 0; } } @media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) { .creative-project-item { margin-bottom: 50px; } } .creative-project-item:hover .creative-project-category { opacity: 1; visibility: visible; transform: translateY(-1px); } .creative-project-item:hover .creative-project-thumb img { /* transform: perspective(400px) rotateX(0.09deg) rotateY(0) scaleX(1.1) scaleY(1.1);*/ } @media (max-width: 767px) { .design-project-item { margin-bottom: 60px; } } .design-project-thumb img { border-radius: 30px; will-change: transform; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) { .design-project-thumb img { margin-bottom: 60px; } } @media (max-width: 767px) { .design-project-thumb img { margin-bottom: 30px; } } .tp_text_invert > div { background-image: linear-gradient(to right, #212a37 50%, #e4e4e4 50%); background-size: 200% 100%; background-position: 100%; color: transparent; background-clip: text; -webkit-background-clip: text; } .tp_text_invert_2 > div { background-image: linear-gradient(to right, #e0eeee 50%, #383C3E 50%); padding: 10px 0; background-size: 200% 100%; background-position: 100%; -webkit-background-clip: text; background-clip: text; color: transparent; } .tp_text_invert_3 > div { background-image: linear-gradient(to right, #f9f4e8 50%, #383C3E 50%); padding: 10px 0; background-size: 200% 100%; background-position: 100%; -webkit-background-clip: text; background-clip: text; color: transparent; } .tp-text-right-scroll { display: inline-block; } .tp-reveal-line { overflow: hidden; } .studio-project-thumb { height: 630px; width: 1090px; margin-left: 90px; } @media only screen and (min-width: 1600px) and (max-width: 1700px), only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) { .studio-project-thumb { width: 100%; margin-left: 0; } } @media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) { .studio-project-thumb { height: 100%; width: 100%; margin-left: 0; } } .studio-project-thumb img { width: 100%; } .studio-showcase-wrap { height: 1700px; overflow: hidden; margin: 0px -370px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .studio-showcase-wrap { height: 1000px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .studio-showcase-wrap { height: 700px; } } @media (max-width: 767px) { .studio-showcase-wrap { height: 700px; margin: 0; } } .studio-showcase-main { gap: 30px; margin-top: -370px; } .studio-showcase-thumb img { width: 100%; } @media only screen and (min-width: 768px) and (max-width: 991px) { .studio-showcase-area { margin-bottom: 120px; } } @media (max-width: 767px) { .studio-showcase-area { margin-bottom: 80px; } } .ai-project-thumb img { transition: 0.9s; width: 100%; } .it-project-active { margin: 0 -260px; } @media (max-width: 767px) { .it-project-active { margin: 0; } } .it-project-dots { margin-top: -40px; } @media (max-width: 767px) { .it-project-dots { margin-top: 0; } } .it-project-dots .swiper-pagination-bullet { border-radius: 7px; width: 50px; height: 6px; opacity: 1; margin: 0 4px; transition: 0.3s; background: rgba(33, 33, 45, 0.1); } .it-project-dots .swiper-pagination-bullet.swiper-pagination-bullet-active { opacity: 1; background: #7463FF; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) { .st-portfolio-heading { margin-bottom: 50px; } } .tp-project-5-title-box { position: relative; padding: 32px 0; z-index: 1; border-bottom: 1px solid rgba(207, 194, 146, 0.2); } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tp-project-5-title-box { margin-bottom: 40px; } } .tp-project-5-title-box:last-child { margin-bottom: 0; } .tp-project-5-title-box span { font-size: 14px; font-weight: 500; line-height: 1; color: #846457; text-transform: uppercase; font-family: var(--tp-ff-poppins); transition: 0.3s; } .tp-project-5-title-box.active span { color: var(--tp-cream-2); } .tp-project-5-2-title { font-size: 326px; font-weight: 400; line-height: 1; letter-spacing: -19.56px; text-transform: uppercase; color: var(--tp-cream-2); font-family: var(--tp-ff-playfair); } @media only screen and (min-width: 1600px) and (max-width: 1700px) { .tp-project-5-2-title { font-size: 280px; } } @media only screen and (min-width: 1400px) and (max-width: 1599px) { .tp-project-5-2-title { font-size: 230px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .tp-project-5-2-title { font-size: 200px; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) { .tp-project-5-2-title { font-size: 160px; } } @media (max-width: 767px) { .tp-project-5-2-title { font-size: 60px; letter-spacing: -2.56px; } } .tp-portfolio-11-slider-active button { left: 40px; bottom: 60px; width: 55px; height: 56px; line-height: 53px; text-align: center; border-radius: 50%; position: absolute; color: var(--tp-common-white); border: 2px solid rgba(255, 255, 255, 0.2); transition: 0.3s; z-index: 99; } @media only screen and (min-width: 992px) { .tp-portfolio-11-slider-active button { display: none !important; } } @media (max-width: 767px) { .tp-portfolio-11-slider-active button { left: 15px; } } .tp-portfolio-11-slider-active button.slick-next { margin-left: 70px; } .tp-portfolio-11-slider-active button i { font-weight: 500; } .tp-portfolio-11-slider-active button:hover { color: var(--tp-common-black); border-color: var(--tp-common-white); background-color: var(--tp-common-white); } .tp-portfolio-11-slider-nav-item { cursor: pointer; } .tp-portfolio-11-slider-nav-active button { left: 0; width: 55px; bottom: -45px; height: 56px; line-height: 53px; text-align: center; border-radius: 50%; position: absolute; color: var(--tp-common-white); border: 2px solid rgba(255, 255, 255, 0.2); transition: 0.3s; } .tp-portfolio-11-slider-nav-active button.slick-next { margin-left: 70px; } .tp-portfolio-11-slider-nav-active button i { font-weight: 500; } .tp-portfolio-11-slider-nav-active button:hover { color: var(--tp-common-black); border-color: var(--tp-common-white); background-color: var(--tp-common-white); } .tp-portfolio-11-slider-nav-active .slick-list { padding: 50px 0; } .tp--hover-item { position: relative; } .tp--hover-img canvas { top: 0; left: 0; width: 100%; height: 100%; position: absolute; } /*----------------------------------------*/ /* 7.7 Funfact Css /*----------------------------------------*/ .tp-funfact-panel { width: 100%; height: 100%; will-change: transform; opacity: 1 !important; } .tp-funfact-panel-wrap { width: 300%; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: no-wrap; flex-wrap: no-wrap; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) { .tp-funfact-panel-wrap { width: 100%; height: 100%; flex-wrap: wrap; } } /*----------------------------------------*/ /* 7.8 Work Css /*----------------------------------------*/ /*----------------------------------------*/ /* 7.9 Testimonail Css /*----------------------------------------*/ .tp-testimonial-slider-active { padding-top: 180px; margin: 0px -100px; } @media (max-width: 767px) { .tp-testimonial-slider-active { padding-top: 60px; margin: 0; } } .dgm-testimonial-quote { margin-bottom: 15px; } .dgm-testimonial-quote span { color: var(--tp-common-black); } .dgm-testimonial-text { margin-bottom: 35px; } .dgm-testimonial-text p { font-weight: 400; font-size: 20px; line-height: 1.56; letter-spacing: 0; color: var(--tp-common-black); font-family: var(--tp-ff-grotesk); } .dgm-testimonial-slider-wrap { padding: 0px 170px; } @media only screen and (min-width: 1600px) and (max-width: 1700px) { .dgm-testimonial-slider-wrap { padding: 0px 80px; } } @media only screen and (min-width: 1400px) and (max-width: 1599px) { .dgm-testimonial-slider-wrap { padding: 0px 70px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) { .dgm-testimonial-slider-wrap { padding: 0px; } } .dgm-testimonial-dot .swiper-pagination-bullet { width: 12px; height: 12px; opacity: 1; transition: 0.3s; border-radius: 50%; display: inline-block; background: transparent; border: 1px solid rgba(20, 24, 32, 0.3); } .dgm-testimonial-dot .swiper-pagination-bullet.swiper-pagination-bullet-active { border-color: var(--tp-common-black); background-color: var(--tp-common-black); } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .dgm-testimonial-space { padding-top: 80px; padding-bottom: 80px; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) { .dgm-testimonial-space { padding-top: 0; } } .dgm-testimonial-bg { position: absolute; height: 100%; width: 100%; z-index: 0; background-repeat: no-repeat; background-position: right bottom; } .dgm-testimonial-thumb { position: absolute; top: 0; left: 0; height: 100%; width: 50%; overflow: hidden; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .dgm-testimonial-thumb { position: relative; width: 100%; height: 500px; margin-bottom: 60px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .dgm-testimonial-thumb { position: relative; width: 100%; height: 400px; margin-bottom: 60px; } } @media (max-width: 767px) { .dgm-testimonial-thumb { position: relative; width: 100%; height: 250px; margin-bottom: 60px; } } .dgm-testimonial-thumb img { width: 100%; height: 100%; object-fit: cover; } .dgm-testimonial-thumb .anim-zoomin-wrap { height: 100%; } .dgm-testimonial-radius { border-radius: 20px; overflow: hidden; background-size: cover; background-repeat: no-repeat; } .creative-testimonial-active { margin-right: -370px; } @media (max-width: 767px) { .creative-testimonial-active { margin: 0; } } .design-testimonial-active { margin: 0px -380px; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) { .design-testimonial-active { margin: 0; } } #paginations { position: absolute; bottom: -7px; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); z-index: 1; } .shop-slider-progress-bar { position: absolute; top: 50%; left: 50%; width: 200px; height: 1px; z-index: 11; background-color: #d9d9d9; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .it-testimonial-prev { position: absolute; top: 50%; left: -15%; transform: translateY(-50%); } .it-testimonial-next { position: absolute; top: 50%; right: -12%; transform: translateY(-50%); } /*----------------------------------------*/ /* 8.0 Award Css /*----------------------------------------*/ .design-award-item { position: relative; width: 70%; margin: 0 auto; padding-bottom: 35px; transition-duration: 0.3s; transition-property: opacity; transition-timing-function: cubic-bezier(0.4, 0, 1, 1); border-bottom: 1px solid rgba(224, 238, 238, 0.3); } @media only screen and (min-width: 768px) and (max-width: 991px) { .design-award-item { width: 690px; } } @media (max-width: 767px) { .design-award-item { width: 100%; } } .design-award-item::after { position: absolute; content: ""; bottom: 2px; right: 0; height: 1px; width: 8px; transform: rotate(40deg); background: rgba(224, 238, 238, 0.3); } .design-award-item::before { position: absolute; content: ""; bottom: -4px; right: 0; height: 1px; width: 8px; transform: rotate(-40deg); background: rgba(224, 238, 238, 0.3); } .design-award-item:hover { border-color: var(--tp-common-white); } .design-award-item:hover::after, .design-award-item:hover::before { background-color: var(--tp-common-white); } .design-award-wrap .row [class*=col]:not(:first-child) .design-award-item { padding-top: 40px; } .ar-award-item { padding: 26px 0; position: relative; border-bottom: 1px solid rgba(29, 33, 50, 0.08); } @media (max-width: 767px) { .ar-award-item { padding: 26px 10px; } } .ar-award-item:first-child { border-top: 1px solid rgba(29, 33, 50, 0.08); } .ar-award-item::after { position: absolute; content: ""; top: 0; left: 0; height: 0; width: 100%; transition: 0.3s ease-in-out; background-color: var(--tp-common-red-2); } .ar-award-item:hover::after { height: 100%; } .ar-award-item:hover span { color: var(--tp-common-white); } .ar-award-item:hover span svg { color: var(--tp-common-white); } .st-award-thumb-shape { position: absolute; width: 175px; height: 70px; bottom: 0; left: 0; border-radius: 5px; background-color: #FFCF27; -webkit-transform: rotate(-55deg) translate(-100%, 150%); transform: rotate(-55deg) translate(-100%, 150%); -webkit-transition: all 0.5s; transition: all 0.5s; z-index: 1; opacity: 0; } @media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) { .st-award-thumb-shape { display: none; } } #st-award-thumb img { transform-origin: bottom left; } /*----------------------------------------*/ /* 8.1 Video Css /*----------------------------------------*/ .tp-video-thumb-wrap { transform-origin: top center; display: flex; flex-wrap: wrap; justify-content: space-between; } /*----------------------------------------*/ /* 8.2 Brand Css /*----------------------------------------*/ .des-brand-item-inner { height: 220px; min-width: 380px; display: grid; padding: 40px; margin: 0px 5px; border-radius: 20px; place-content: center; background-color: #F6F6F9; } @media (max-width: 767px) { .des-brand-item-inner { height: 120px; min-width: 250px; } } .tp-brand-active .swiper-slide { width: auto; } @media (max-width: 767px) { .tp-brand-inner-item { margin-bottom: 20px; } } .tp-brand-inner-item img { width: 100%; } .dgm-brand-active { margin: 0px -20px; } @media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) { .creative-brand-area { padding-bottom: 80px; } } .ai-brand-slider-active .slide-transtion { -webkit-transition-timing-function: linear; transition-timing-function: linear; } .ai-brand-slider-active .swiper-slide { width: auto; } .ar-brand-active .slide-transtion { -webkit-transition-timing-function: linear; transition-timing-function: linear; } .ar-brand-active .swiper-slide { width: auto; } .ar-brand-active .swiper-wrapper { align-items: center; } .app-brand-active .swiper-slide { width: auto; } .st-brand-active { margin-right: -90px; margin-left: 80px; } @media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) { .st-brand-active { margin-right: 0; margin-left: 0; } } .st-brand-active .swiper-slide { width: auto; } .slide-transtion { -webkit-transition-timing-function: linear; transition-timing-function: linear; } /*----------------------------------------*/ /* 8.3 Team Css /*----------------------------------------*/ .des-team-item-box { padding: 0 120px; padding-top: 40px; padding-bottom: 15px; border-bottom: 1px solid rgba(159, 156, 149, 0.2); } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .des-team-item-box { padding: 30px 40px; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) { .des-team-item-box { padding: 0; padding-top: 40px; padding-bottom: 15px; } } @media (max-width: 767px) { .des-team-item-box { padding: 0; padding-top: 40px; padding-bottom: 40px; } } .des-team-item-box span { font-weight: 600; font-size: 16px; line-height: 1; transition: 0.3s; color: rgba(249, 244, 232, 0.1); } .des-team-item-box.active span { color: var(--tp-common-cream); } @media (max-width: 767px) { .des-team-item-box.active span { display: block; } } .dgm-team-title-sm { font-weight: 700; font-size: 40px; line-height: 51px; margin-bottom: 13px; margin-bottom: 0; letter-spacing:0; color: var(--tp-common-black); font-family: var(--tp-ff-grotesk); } .dgm-team-content span { font-weight: 400; font-size: 22px; line-height: 1; color: #4d5051; display: inline-block; margin-bottom: 15px; letter-spacing: -0.01em; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .dgm-team-thumb { margin-bottom: 15px; } .dgm-team-thumb img { width: 100%; } .dgm-team-social a { height: 30px; width: 30px; line-height: 25px; text-align: center; border-radius: 50%; display: inline-block; border: 1px solid rgba(20, 20, 20, 0.1); } .dgm-team-social a:hover { color: var(--tp-common-black); border-color: var(--tp-common-green-regular); background-color: var(--tp-common-green-regular); } @media (max-width: 767px) { .dgm-team-title-box { margin-bottom: 30px; } } .studio-team-title-box p { font-weight: 500; font-size: 20px; margin-bottom: 0; line-height: 1.4; letter-spacing: -0.02em; color: rgba(249, 244, 232, 0.8); } @media (max-width: 767px) { .studio-team-title-box p { font-size: 18px; } .studio-team-title-box p br { display: none; } } .dgm-team-thumb .tp--hover-img canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .tp-team-slider-active { margin: 0 -65px; } @media (max-width: 767px) { .tp-team-slider-active { margin: 0; } } /*----------------------------------------*/ /* 8.4 Step Css /*----------------------------------------*/ .studio-step-slider-active { margin: 0 -200px; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) { .studio-step-slider-active { margin: 0; } } /*----------------------------------------*/ /* 8.5 Choose Css /*----------------------------------------*/ /*----------------------------------------*/ /* 8.6 Price Css /*----------------------------------------*/ #lineMarker { position: absolute; top: 5px; height: 36px; z-index: -1; transition: 0.4s; border-radius: 6px; display: inline-block; background: var(--tp-common-white); } /*----------------------------------------*/ /* 8.7 Faq Css /*----------------------------------------*/ .it-faq-accordion .faq-active { position: relative; } .it-faq-accordion .faq-active::before { content: ""; position: absolute; top: 0; left: 0; width: 8px; height: 0; transition: 0.5s; background: #ffd743; border-radius: 20px; } .it-faq-accordion .accordion-items.faq-active::before { top: auto; bottom: 0; height: 100%; transition: 0.5s; } /*----------------------------------------*/ /* 8.8 Success Css /*----------------------------------------*/ /*----------------------------------------*/ /* 8.9 Instagram Css /*----------------------------------------*/ .pp-social-item { display: block; text-align: center; padding: 45px 0 20px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .pp-social-item:last-child { border: none; } /*----------------------------------------*/ /* 9.0 Feature Css /*----------------------------------------*/ /*----------------------------------------*/ /* 9.1 Review Css /*----------------------------------------*/ /*----------------------------------------*/ /* 9.2 Stack Css /*----------------------------------------*/ /*----------------------------------------*/ /* 9.3 Benefits Css /*----------------------------------------*/ .tp-gsap-bg { position: absolute; top: 0; left: 0; right: 0; width: 100%; margin: 0 auto; height: 100%; text-align: center; background-color: var(--tp-common-black); z-index: -1; } /*----------------------------------------*/ /* 9.4 Cta Css /*----------------------------------------*/ .st-cta-bg-circle { position: absolute; top: 0; left: -3.5%; height: 1000px; width: 107%; display: inline-block; right: 0; margin: 0 auto; text-align: center; } /*----------------------------------------*/ /* 9.5 Intaractive Css /*----------------------------------------*/ .tp-porfolio-10-title-wrap ul li { list-style-type: none; display: inline-block; padding-right: 30px; padding-bottom: 25px; transition: 0.4s; } @media (max-width: 767px) { .tp-porfolio-10-title-wrap ul li { padding: 16px; } } .tp-porfolio-10-title-wrap ul li.active { transition: 0.4s; } .tp-port-slider-title { font-size: 180px; font-weight: 600; line-height: 1; letter-spacing: 5px; text-transform: uppercase; color: transparent; color: transparent; transition: 0.3s; cursor: pointer; display: block; background-size: 0% 100%; background-repeat: no-repeat; -webkit-background-clip: text; font-family: var(--tp-ff-mango-bold); -webkit-text-fill-color: transparent; -webkit-text-stroke: 2px rgba(255, 255, 255, 0.4); transition: background-size 0.6s cubic-bezier(0.32, 0.55, 0.58, 0.76) 0s, 0.6s -webkit-clip-path cubic-bezier(0.32, 0.55, 0.58, 0.76) 0s; background-image: linear-gradient(90deg, #fff 0%, #fff 50%, transparent 50.1%); mix-blend-mode: luminosity; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) { .tp-port-slider-title { font-size: 120px; } } @media (max-width: 767px) { .tp-port-slider-title { font-size: 70px; } } .tp-port-slider-title:hover { background-size: 200% 100%; color: var(--tp-common-white); } /*----------------------------------------*/ /* 9.6 Project Slider Css /*----------------------------------------*/ /* ============ creative Slider ================= */ .tp-portfolio-slider__item { grid-area: 1/1/-1/-1; position: relative; width: 100%; height: 100%; overflow: hidden; display: grid; place-items: center; opacity: 0; pointer-events: none; } .tp-portfolio-slider__item.current { opacity: 1; z-index: 50; pointer-events: auto; } .tp-portfolio-slider__item-inner { position: relative; width: 120%; height: 120%; display: grid; place-items: center; grid-area: 1/1/-1/-1; background-size: cover; background-position: 50% 50%; } .tp-portfolio-slider-type { grid-area: main; display: grid; place-items: center; z-index: 9; position: absolute; bottom: 6%; left: 50%; transform: translateX(-50%); } @media (max-width: 767px) { .tp-portfolio-slider-type { bottom: 20%; width: 100%; } } .type__item { grid-area: 1/1/-1/-1; opacity: 0; } .type__item--current { opacity: 1; } .char-wrap { display: inline-block; position: relative; overflow: hidden; display: inline-flex; } .slider--bg { z-index: 1; } .slider--bg .tp-portfolio-slider__item-inner { position: relative; } .slider--bg .tp-portfolio-slider__item-inner::after { position: absolute; content: ""; top: 0; left: 0; width: 100%; height: 100%; background: rgba(2, 2, 1, 0.2); } .slider--fg { position: absolute; width: 20vw; min-width: 200px; aspect-ratio: 0.75; height: auto; z-index: 2; top: 50%; left: 50%; transform: translate(-50%, -50%); } .slider-nav { position: fixed; width: 100%; line-height: 1; bottom: 0; right: 0; z-index: 2; display: flex; justify-content: space-between; } .slider-nav__item--prev { grid-area: prev; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) { .slider-nav__item--prev { margin-left: 45px; } } @media (max-width: 767px) { .slider-nav__item--prev { margin-left: 30px; } } .slider-nav__item--next { grid-area: next; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) { .slider-nav__item--next { margin-right: 45px; } } @media (max-width: 767px) { .slider-nav__item--next { margin-right: 30px; } } /* ============ creative Slider ================= */ /* ============ Showcase Slider ================= */ .tp-showcase-slider-bg { display: flex; align-items: center; position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: center; background-repeat: no-repeat; } .tp-showcase-slider-bg::after { opacity: 0.3; background: #1d1d1d; content: ""; position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 1; pointer-events: none; } .tp-showcase-slider-main .swiper-pagination { bottom: 40px; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); width: auto; } @media (max-width: 767px) { .tp-showcase-slider-main .swiper-pagination { display: none; } } .tp-showcase-slider-main .swiper-pagination-bullet { background: transparent; margin: 0 10px !important; } .tp-showcase-slider-main .path { display: none; } .tp-showcase-slider-main .swiper-pagination-bullet-active .path { display: inline-block !important; stroke-dasharray: 1000; stroke-dashoffset: 0; -webkit-animation: dash linear 10s; animation: dash linear 10s; -webkit-animation-iteration-count: unset; animation-iteration-count: unset; } /* ============ Showcase Slider ================= */ /* ============ parallax Slider ================= */ .parallax-sliders { position: absolute; top: 0; left: 0; width: 3800px; height: 100%; } .parallax-img { position: absolute; height: 100%; width: 800px; background-size: cover; background-position: center; margin-left: -100px; } .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); } /* ============ parallax Slider ================= */ /* ============ showcase Slider ================= */ #canvas-slider { width: 100%; height: 100%; position: fixed; top: 0; right: 0; overflow: hidden; -webkit-transition: width 0.5s ease-in-out 0; transition: width 0.5s ease-in-out 0s; z-index: 1; } #showcase-slider-holder { width: 100%; height: 100vh; position: relative; overflow: hidden; opacity: 1; z-index: 2; } .parallax-slider-active .swiper-slide { position: relative; overflow: hidden; width: 100%; height: 100vh; } .parallax-slider-active .swiper-container { width: 100%; height: 100vh; } /* ============ showcase Slider ================= */ .slide { width: 100%; height: 100%; grid-area: 1/1/-1/-1; pointer-events: none; opacity: 0; overflow: hidden; position: relative; display: grid; place-items: center; will-change: transform, opacity; } .slide--current { pointer-events: auto; opacity: 1; } .slide__img { width: 100%; height: 100%; background-size: cover; background-position: 50% 50%; background-repeat: no-repeat; will-change: transform, opacity, filter; } .skew-slider-wrap { width: 100%; height: 100vh; display: grid; overflow: hidden; place-items: center; grid-template-rows: 100%; grid-template-columns: 100%; } .slides-numbers { position: absolute; top: 50%; right: 100px; transform: translateY(-50%); } @media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) { .slides-numbers-wrap { display: none; } } .slides-numbers span { font-size: 14px; font-weight: 600; display: block; line-height: 1; color: var(--tp-common-white); } .slides-numbers span.text-1 { transform: translateX(-5px); } .slides-numbers span.text-2 { margin-left: 10px; transform: rotate(25deg); transform-origin: left bottom; } .slides-numbers::after, .slides-numbers::before { content: ""; width: 2px; height: 130px; display: inline-block; transform: translateX(13px); background-color: var(--tp-common-white); } .slides-numbers::before { margin-bottom: 30px; } .slides-numbers::after { margin-top: 40px; } .coverflow-slider-active { padding: 100px 0; } .coverflow-slider-text-active { height: 100px; } .coverflow-slider-prev svg { margin-right: 8px; } .coverflow-slider-next svg { margin-left: 8px; } .tp-portfolio-slicer-wrap { margin-bottom: 220px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .tp-portfolio-slicer-wrap { margin-bottom: 130px; } } @media (max-width: 767px) { .tp-portfolio-slicer-wrap { margin-bottom: 100px; } } /* SLIDER */ .tp-perspective-slider { width: 100%; overflow: hidden; padding: 2vw 3vw 0; box-sizing: border-box; margin-bottom: 80px; } .tp-perspective-slider .tp-perspective-inner { width: 100%; height: 90vh; position: relative; display: inline-block; } .tp-perspective-slider .tp-perspective-inner .tp-perspective-image { width: 100%; height: 100%; background-size: cover; position: relative; display: inline-block; } .tp-perspective-slider .tp-perspective-inner .tp-perspective-image:before { content: ""; width: 40px; height: 103%; position: absolute; left: -20px; top: -1.5%; z-index: 10; border-radius: 100%; -webkit-border-radius: 100%; -moz-border-radius: 100%; -ms-border-radius: 100%; -o-border-radius: 100%; background: #000; } @media (max-width: 767px) { .tp-perspective-slider .tp-perspective-inner .tp-perspective-image:before { content: none; } } .tp-perspective-slider .tp-perspective-inner .tp-perspective-image:after { content: ""; width: 40px; height: 103%; position: absolute; right: -20px; top: -1.5%; z-index: 10; border-radius: 100%; -webkit-border-radius: 100%; -moz-border-radius: 100%; -ms-border-radius: 100%; -o-border-radius: 100%; background: #000; } @media (max-width: 767px) { .tp-perspective-slider .tp-perspective-inner .tp-perspective-image:after { content: none; } } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) { .tp-pd-3-portfolio-item { margin-bottom: 0; } } @media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) { .tp-pd-3-portfolio-item-wrap { padding-top: 0; } } .tp-pd-6-hero-slider-active .slick-dots { text-align: center; } .tp-pd-6-hero-slider-active .slick-dots li { font-size: 0; height: 12px; width: 12px; margin: 0 5px; border-radius: 50%; cursor: pointer; display: inline-block; border: 2px solid rgba(20, 24, 32, 0.3); } .tp-pd-6-hero-slider-active .slick-dots li.slick-active { border-color: var(--tp-common-black); background-color: var(--tp-common-black); } /*----------------------------------------*/ /* 9.7 Career Css /*----------------------------------------*/ @media (max-width: 767px) { .tp-career-details-ptb { padding-top: 100px; } } .tp-career-details-wrapper { padding-right: 105px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .tp-career-details-wrapper { padding-right: 50px; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) { .tp-career-details-wrapper { padding-right: 0; } } /*----------------------------------------*/ /* 9.8 Contact Css /*----------------------------------------*/ .tp-contact-category-btn { font-size: 18px; font-weight: 600; line-height: 1; cursor: pointer; border-radius: 12px; padding: 20px 43px; margin-bottom: 10px; margin-right: 10px; display: inline-block; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; color: var(--tp-common-white); border: 1px solid rgba(255, 255, 255, 0.08); } .tp-contact-category-btn:hover, .tp-contact-category-btn.active { background-color: #FFF669; color: var(--tp-common-black-7); } @media (max-width: 767px) { .tp-contact-category-btn { font-size: 16px; padding: 16px 36px; } } /*----------------------------------------*/ /* 9.9 Portfolio css /*----------------------------------------*/ .tp-pd-2-dot .swiper-pagination-bullet { width: 6px; height: 6px; opacity: 1; transition: 0.3s; border-radius: 50%; display: inline-block; background: rgba(0, 0, 0, 0.3); } .tp-pd-2-dot .swiper-pagination-bullet.swiper-pagination-bullet-active { width: 24px; border-radius: 10px; background-color: #212a37; } .tp-pd-5-hero-black-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 1; z-index: 1; background-color: #000; transition: opacity 0.2s ease; } .tp-pd-5-hero-white-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 1; z-index: 1; background-color: #fff; transition: opacity 0.4s ease; } .project-details-video { margin-bottom: 60px; /* Fallback stuff */ /* WebKit styles */ /* Firefox styles */ } .project-details-video video { height: 800px; width: 100% !important; object-fit: cover; overflow: hidden; } @media (max-width: 767px) { .project-details-video video { height: 400px; } } .project-details-video figcaption { align-items: center; display: grid; grid-gap: 1rem; grid-template-columns: 50px auto 115px; padding: 0.5rem; } .project-details-video button { border: 0; display: inline; color: white; order: 1; padding: 0.5rem; transition: opacity 0.25s ease-out; width: 100%; font-size: 24px; } .project-details-video button:hover { cursor: pointer; opacity: 0.8; } .project-details-video label { font-size: 20px; text-align: center; color: var(--tp-common-white); transform: translateY(35px); } .project-details-video progress[value] { position: relative; appearance: none; border: none; display: inline; height: 3px; order: 1; width: 100%; background: rgba(255, 255, 255, 0.2); } .project-details-video progress[value]::-webkit-progress-bar { background-color: whiteSmoke; box-shadow: 0 2px 3px rgba(0, 0, 0, 0.25) inset; } .project-details-video progress[value]::-webkit-progress-value { background-color: var(--tp-common-white); position: relative; transition: width 1s linear; } .project-details-video progress[value]::-moz-progress-bar { background-color: var(--tp-common-white); position: relative; transition: width 1s linear; } /*----------------------------------------*/ /* 10.0 Shop Css /*----------------------------------------*/ .tp-hero-shop-dot { position: absolute; bottom: 60px !important; } .tp-hero-shop-dot .swiper-pagination-bullet { width: 16px; height: 16px; opacity: 1; transition: 0.3s; border-radius: 50%; display: inline-block; background: transparent; border: 1px solid #F4F0EA; } .tp-hero-shop-dot .swiper-pagination-bullet.swiper-pagination-bullet-active { border-color: var(--tp-common-white); background-color: var(--tp-common-white); } .shop-text-slider-active { border-bottom: 1px solid rgba(77, 61, 48, 0.12); } .shop-text-slider-active .swiper-slide { width: 100%; } .subscribe-popup { position: fixed; left: 0; top: 0; right: 0; width: 100%; height: 100%; z-index: 1099; background-color: rgba(0, 0, 0, 0.5); visibility: hidden; opacity: 0; transition: all 0.3s; margin: 0 auto; text-align: center; } .subscribe-popup.show { visibility: visible; opacity: 1; } .subscribe-popup .close i { position: absolute; right: 20px; top: 20px; font-size: 20px; cursor: pointer; font-weight: 400; color: var(--tp-common-black); transition: 0.3s; } .subscribe-popup .close:hover i { transform: rotate(180deg); } @keyframes zoomInOut { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) { .tp-shop-product-banner { margin-bottom: 15px; } } /*----------------------------------------*/ /* 10.1 Shop Details Css /*----------------------------------------*/ .modal .modal-dialog { width: 100%; max-width: 100%; margin-top: 0; margin-bottom: 0; } .modal { overflow-y: scroll; overflow-x: hidden; --bs-modal-border-width: 0; --bs-modal-border-radius: 0; } .modal-body { padding: 0; } /*----------------------------------------*/ /* 10.2 Login Css /*----------------------------------------*/ /*----------------------------------------*/ /* 10.3 Checkout css /*----------------------------------------*/ /*----------------------------------------*/ /* 10.4 Cart css /*----------------------------------------*/ .cartmini__area { position: fixed; right: 0; top: 0; width: 320px; height: 100%; -webkit-transform: translateX(calc(100% + 80px)); -moz-transform: translateX(calc(100% + 80px)); -ms-transform: translateX(calc(100% + 80px)); -o-transform: translateX(calc(100% + 80px)); transform: translateX(calc(100% + 80px)); background: var(--tp-common-white) none repeat scroll 0 0; z-index: 99999; scrollbar-width: none; transition: 0.3s; } .cartmini__area::-webkit-scrollbar { display: none; } .cartmini__area.cartmini-opened { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } /*----------------------------------------*/ /* 10.5 Account css /*----------------------------------------*/ /*----------------------------------------*/ /* 10.6 Error Css /*----------------------------------------*/ /*----------------------------------------*/ /* 10.7 Dark Css Start /*----------------------------------------*/ /*----------------------------------------*/ /* 10.8 Light Css Start /*----------------------------------------*/ .agntix-light .des-text-item.sm span { color: rgba(0, 0, 0, 0.1); } .agntix-light .tp_text_invert_3 > div { background-image: linear-gradient(to right, #000 50%, #e4e4e4 50%); } .agntix-light .des-text-moving-top.active .des-text-item.sm span { color: var(--tp-common-black); } .agntix-light .tp-section-subtitle { color: var(--tp-common-black); } .agntix-light .tp-header-4-style .tp-header-menu nav ul li a { color: var(--tp-common-black); } .agntix-light .tp-header-4-style .tp-header-dropdown nav ul li.has-dropdown::after { color: var(--tp-common-black); } .agntix-light .tp-section-subtitle.fs-17.pre-circle::before { background-color: var(--tp-common-black); } .agntix-light .creative-brand-item img { filter: invert(1); } .agntix-light .tp-section-title.fs-64 { color: var(--tp-common-black); } .agntix-light .creative-project-title-sm { color: var(--tp-common-black); } .agntix-light .creative-project-category { background-color: var(--tp-common-white); } .agntix-light .creative-project-category::before { box-shadow: 0px -17px 0 0 #FFF; } .agntix-light .creative-project-category::after { box-shadow: 0px -17px 0 0 #FFF; } .agntix-light .tp_text_invert_2 > div { background-size: 200% 100%; background-position: 100%; -webkit-background-clip: text; background-clip: text; color: transparent; background-image: linear-gradient(to right, #212a37 50%, #e4e4e4 50%); } .agntix-light .design-award-item { border-bottom: 1px solid rgba(0, 0, 0, 0.3); } .agntix-light .design-award-item:hover { border-color: var(--tp-common-black-7); } .agntix-light .design-award-item::before { background: rgba(0, 0, 0, 0.3); } .agntix-light .design-award-item::after { background: rgba(0, 0, 0, 0.3); } .agntix-light .design-award-item:hover::before, .agntix-light .design-award-item:hover::after { background: var(--tp-common-black-7); } .agntix-light .des-team-item-box span { color: #ECECEC; } .agntix-light .des-team-item-box.active span { color: #212a37; } .agntix-light .studio-team-title-box p { color: rgba(0, 0, 0, 0.8); } .agntix-light #lineMarker { background: var(--tp-common-black); } .agntix-light .tp-section-subtitle-teko { color: #2A4C3A; } .agntix-light .tp-section-subtitle-teko i { color: #2A4C3A; } .agntix-light .tp-section-title-teko { color: #2A4C3A; } .agntix-light .tp-section-title-teko span { color: #2A4C3A; } .agntix-light .crp-about-btn-box .tp-btn-yellow-green { color: #fff; background-color: #2A4C3A; } .agntix-light .tp-project-5-title-box span { color: rgba(47, 46, 43, 0.3); } .agntix-light .tp-project-5-title-box.active span { color: var(--tp-common-black-8); } .agntix-light .tp-project-5-2-title { color: var(--tp-common-black-8); } .agntix-light .pp-social-item { border-bottom: 1px solid rgba(0, 0, 0, 0.08); } @keyframes animate-pulse-2 { 0% { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.1), 0 0 0 0 rgba(0, 0, 0, 0.1); } 40% { box-shadow: 0 0 0 50px rgba(0, 0, 74, 0), 0 0 0 0 rgba(0, 0, 0, 0.1); } 80% { box-shadow: 0 0 0 50px rgba(0, 0, 74, 0), 0 0 0 30px rgba(0, 0, 74, 0); } 100% { box-shadow: 0 0 0 0 rgba(0, 0, 74, 0), 0 0 0 30px rgba(0, 0, 74, 0); } } .agntix-light .tp-perspective-slider .tp-perspective-inner .tp-perspective-image::before { background: #fff; } .agntix-light .tp-perspective-slider .tp-perspective-inner .tp-perspective-image::after { background: #fff; } .agntix-light .inner-service-1-left > span { color: var(--tp-common-black); } .agntix-light .tp-contact-category-btn { border: 1px solid rgba(0, 0, 0, 0.08); color: var(--tp-common-black); } .agntix-light .des-portfolio-title { color: var(--tp-common-white); } .agntix-light .tp-pd-2-dot .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.3); } .agntix-light .tp-pd-2-dot .swiper-pagination-bullet.swiper-pagination-bullet-active { background-color: var(--tp-common-black); } .tp-header-menu > nav > ul > li > a { font-size: 27px; } #preloader { background-color: var(--tp-common-cream-3); } .tp-section-title { letter-spacing: 1px; } .tp-header-menu > nav > ul > li > a { font-weight: 400; font-size: 32px; letter-spacing: 3px; } .tp-header-menu > nav > ul > li > a:hover{ color: var(--tp-common-yellow); } .tp-hero-area video{ background: #2a2a2a; } .tp-section-title-grotesk { font-family: var(--tp-ff-heading); } .tp-revel-line { padding: 3px 0 0; } h5{ letter-spacing: 1px; } .tp-section-title-grotesk { font-size: 80px; } .agntix-light .tp-header-4-style .tp-header-menu nav ul li a { color: var(--tp-common-white); } .agntix-light .creative-brand-item img { filter: invert(0); } .agntix-light .tp-section-title-teko { color: #000; font-family: var(--tp-ff-p); font-weight: 600; font-size: 48px; line-height: 1.1; } .tp-btn-yellow-green.lg { font-size: 20px; padding: 17px 28px 12px 28px; letter-spacing: 2px; font-weight: normal; color: #000 !important; background-color: var(--tp-common-yellow) !important; border:2px solid #fff; } .tp-btn-yellow-green.lg:hover { color: #fff !important; } .agntix-light .tp-section-subtitle-teko { color: #000; } .agntix-light .tp-section-subtitle-teko i { color: #000; } .des-portfolio-title { font-family: var(--tp-ff-teko); } .tp-section-title-grotesk { font-size: 64px; font-weight: normal; line-height: 1; letter-spacing: 1px; font-family: var(--tp-ff-teko); } .dgm-testimonial-text p { font-family: var(--tp-ff-p); } .tp-btn-yellow-green.green-solid { background-color: var(--tp-common-yellow); } .dgm-team-social a:hover { color: var(--tp-common-black); border-color: var(--tp-common-yellow); background-color: var(--tp-common-yellow); } .dgm-team-social a { line-height: 29px; } .st-copyright-title { margin: 0; font-size: 140px; font-weight: 700; line-height: 0.7; position: relative; letter-spacing:1px; color: var(--tp-common-black); font-family: var(--tp-ff-teko); } .st-copyright-title span{ background-color: var(--tp-common-black); } .st-footer-top-icon span { border-bottom: 7px solid var(--tp-common-black); } .st-footer-widget-info-title a { font-size: 18px; font-weight: 500; color: var(--tp-common-black); letter-spacing: -0.36px; font-family: var(--tp-ff-p); } .st-footer-widget-menu ul li a{ color: var(--tp-common-black); font-family: var(--tp-ff-p); } .st-footer-widget-social-title { margin-bottom: 12px; display: inline-block; color: var(--tp-common-black); margin-bottom: 0; } .st-footer-widget-social .tp-footer-widget-social a { color: var(--tp-common-black); background-color: var(--tp-common-white); } .agntix-light .header-sticky.tp-header-4-style .tp-header-menu nav ul li a { color: var(--tp-common-black); } .agntix-light .tp-header-4-style .tp-header-menu nav ul li a { color: var(--tp-common-black); } .tp-header-menu > nav > ul > li > a { letter-spacing: 1px; } .parallax { background-image: url('../img/banner.jpg'); background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; height: 100vh; position: relative; } .agntix-light .tp-section-title-teko { font-size: 56px; line-height: 68px; font-weight: normal; } .tp-section-subtitle { font-weight: 400; font-size: 40px; } .tp-btn-yellow-green.green-solid{ letter-spacing: 1px; } .tp-section-subtitle-teko { font-size: 64px; } .grey-bg-2 { background-color: #f3f3f3; } .tp-footer-widget-social a { line-height: 43px; } .bordertop{ border-top: 1px solid var(--tp-border-2); padding-top: 50px; } .st-copyright-sub { font-size: 50px; } .st-copyright-title a { display: inline-block; line-height: 0.8; } .st-copyright-title a:hover span { transform: translateX(12%); } .tp-hero-area{ height: 100%; left: 0; position: absolute; top: 0; width: 100%; } .tp-hero-area video { height: 100%; left: 50%; object-fit: cover; pointer-events: none; position: absolute; top: 50%; transform: translate(-50%, -50%); width: 100%; z-index: 1; } .header-transparent { background-color: #22222200; } .front-hero-content { align-items: center; display: flex; flex-direction: column; gap: 2rem; justify-content: end; max-height: 950px; min-height:80vh; overflow: hidden; padding: 1rem; position: relative; height: 100vh; max-height: 1000px; } @media (max-width: 767px) { .tp-hero-area video{ height:295px; } } .tp-section-subtitle{ font-family: var(--tp-ff-teko); } .ar-about-us-4-hero-ptb { padding-top: 0; padding-bottom: 0; } .ar-about-us-4-title-box .tp-section-subtitle { margin-right: 15px; } .tp-career-title { font-size: 64px; font-weight: normal; line-height: 1; color: #212a36; letter-spacing: 0; } .tp-career-title .shape-1 { margin-left: 4px; display: inline-block; } .tp-career-title .shape-1 { -webkit-transform: translateY(-3px); -moz-transform: translateY(-3px); -ms-transform: translateY(-3px); -o-transform: translateY(-3px); transform: translateY(-3px); } .tp-career-title .shape-2 { margin-right: 10px; } .teamMemberTitle{ font-size: 30px; font-weight: normal; } .caseStudyContentTop{ position:relative; z-index:1000; } .caseStudyContentTop h2, .caseStudyContentTop p{ } /* .caseStudyImage::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255,255,255,0.9); pointer-events: none; }*/ .caseStudyImage .container{ display: flex; justify-content: center; height: 80vh; align-items: center; } .casestudyVideo video{ width:100%; height:auto; } .challengeOuter{ background: #212a36; padding-top:130px; padding-bottom:130px; } .caseStudyTitle{ min-height: 275px; display: flex; align-items: center; justify-content: center; padding-bottom:0; background-image: url('../img/casestudy-bg.jpg'); background-size: cover; } .challengeOuter .tp_text_invert > div { background-image: linear-gradient(to right, #fff 50%, #e4e4e4 50%); background-size: 200% 100%; background-position: 100%; color: transparent; background-clip: text; -webkit-background-clip: text; } .blogListing{ padding-top:100px; padding-bottom:100px; } .desktop{ display:block; } .mobile{display:none;} /* Responsive Fix for Mobile Screens */ @media only screen and (max-width: 767px) { .creative-brand-area { overflow: hidden; padding: 20px 0; /* add space for mobile */ } .pb-100 { padding-bottom:40px; } .pt-80 { padding-top: 30px; } /* Fix swiper slides on mobile */ .creative-brand-area .swiper-slide { /* width: 120px !important; */ /* smaller logo size */ margin: 0 10px; /* spacing between logos */ text-align: center; } /* Scale logos to fit mobile */ .creative-brand-area img { max-width: 100%; height: auto; display: inline-block; } /* Center the whole slider */ .creative-brand-wrapper { justify-content: center; } } /* Full portfolio section responsive fix */ @media only screen and (max-width: 991px) { /* Force single column */ .des-portfolio-wrap .row, .des-portfolio-wrap .des-portfolio-item { display: block !important; width: 100% !important; max-width: 100% !important; margin: 0; } .des-portfolio-wrap .row > div { display: block !important; width: 100% !important; max-width: 100% !important; } /* Text adjustments */ .des-portfolio-content { padding: 15px 0 !important; text-align: center !important; } .des-portfolio-content p { padding: 0 5px !important; margin-bottom: 1px !important; word-break: break-word !important; /* prevents overflow */ } .des-portfolio-title h2 { font-size: 18px !important; line-height: 1.3 !important; margin-bottom: 10px !important; } /* Fix image/cards */ .des-portfolio-thumb img { width: 100% !important; height: auto !important; display: block; } .des-portfolio-item { margin-bottom: 25px !important; } } .tp-section-title.fs-44 { font-weight: normal; font-size: 44px; } @media (min-width: 992px) { .creative-project-area .tp-section-title.fs-64 { padding-left: 110px; } } @media (max-width: 767px) { .video-section video { width: 100%; height: 34vh; object-fit: cover; display: block; } .tp-section-subtitle-teko { font-size: 40px; } .tp-about-funcact-item span { font-size: 40px; } .readMoreBtn{ display:none; } .desktop{ display:none; } .mobile{display:block;} }