/************ TABLE OF CONTENTS *************** ----------------- 01. THEME CSS ----------------- 1.1 Common Classes 1.2 init style 1.3 Default Spacing ----------------- 02. COMPONENTS css ----------------- 2.1 Animations 2.2 Background.tp-main-menu nav > ul > li 2.3 scrollToTop 2.4 Breadcrumb 2.5 Buttons 2.6 Magic Cursor css start 2.7 Nice Select 2.8 offcanvas 2.9 Preloader 2.10 Search css start 2.11 Section Title ----------------- 03. HEADER CSS ----------------- 3.1 Header Style --------------------------------- 04. MENU CSS --------------------------------- 4.1 Main menu css 4.2 Mobilemenu css --------------------------------- 05. BLOG CSS --------------------------------- 5.1 blog css 5.2 Postbox css 5.3 Sidebar css --------------------------------- 06. FOOTER CSS --------------------------------- 6.1 Footer Style --------------------------------- 07. PAGES CSS --------------------------------- 7.1 about css start 7.2 awards css start 7.3 banner css start 7.4 brand 7.5 Cart css 7.6 Checkout css 7.7 contact css start 7.8 counter css start 7.9 cta css start 7.10 dark css start 7.11 Error Css 7.12 faq css start 7.13 feature css start 7.14 Funfact Css 7.15 gallery css start 7.16 Hero css start 7.17 intaractive 7.18 light css start 7.19 Login Css 7.20 map 7.21 portfolio css start 7.22 pricing css start 7.23 process css start 7.24 product css start 7.25 profile css start 7.26 service 7.27 skill css start 7.28 skill css start 7.29 team css start 7.29 techonolgy css start 7.30 testimonial css start 7.31 text css start 7.32 video css start **********************************************/ /*----------------------------------------*/ /* 1.1 Theme Default /*----------------------------------------*/ @import url('https://fonts.googleapis.com/css2?family=Funnel+Display:wght@300..800&family=Kanit: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=Space+Grotesk:wght@300..700&family=Teko:wght@300..700&family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Playfair+Display:ital,wght@0,400..900;1,400..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=Sora:wght@100..800&family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&family=Familjen+Grotesk:ital,wght@0,400..700;1,400..700&display=swap" rel="stylesheet'); a, button, p, input, select, textarea, li, .transition-3 { -webkit-transition: all 0.3s 0s ease-out; -moz-transition: all 0.3s 0s ease-out; -ms-transition: all 0.3s 0s ease-out; -o-transition: all 0.3s 0s ease-out; transition: all 0.3s 0s ease-out; } .tp-product-details-views > span svg { -webkit-transform: translateY(-1px); -moz-transform: translateY(-1px); -ms-transform: translateY(-1px); -o-transform: translateY(-1px); transform: translateY(-1px); } .al-hero-pg-social a svg, .tp-product-details-action-sm-btn svg, .tp-product-details-wishlist-btn svg, .tp-perspective-social-info span svg { -webkit-transform: translateY(-2px); -moz-transform: translateY(-2px); -ms-transform: translateY(-2px); -o-transform: translateY(-2px); transform: translateY(-2px); } /* transform */ .al-banner-shop-thumb { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } @font-face { font-family: "Morganite-Bold"; src: url("../fonts/Morganite-ExtraBold.html") format("woff2"), url("../fonts/Morganite-ExtraBold-2.html") format("woff"), url("../fonts/Morganite-ExtraBold-3.html") format("truetype"); font-weight: 800; font-display: swap; font-style: normal; } @font-face { font-family: "Morganite-SemiBold"; src: url("../fonts/Morganite-SemiBold.woff2") format("woff2"), url("../fonts/Morganite-SemiBold.html") format("woff"), url("../fonts/Morganite-SemiBold-2.html") format("truetype"); font-weight: 600; font-display: swap; font-style: normal; } :root { /** @font family declaration */ --tp-ff-body: 'Kanit', sans-serif; --tp-ff-heading: 'Space Grotesk', sans-serif; --tp-ff-p: 'Kanit', sans-serif; --tp-ff-teko: 'Teko', sans-serif; --tp-ff-funnel: 'Funnel Display', sans-serif; --tp-ff-sora: 'Sora', sans-serif; --tp-ff-dm: 'DM Sans', sans-serif; --tp-ff-inter: 'Inter', sans-serif; --tp-ff-poppins: 'Poppins', sans-serif; --tp-ff-playfair: 'Playfair Display', serif; --tp-ff-jakarta: 'Plus Jakarta Sans', sans-serif; --tp-ff-familjen: 'Familjen Grotesk', sans-serif; --tp-ff-morganite-bold: 'Morganite-Bold', sans-serif; --tp-ff-morganite-semibold: 'Morganite-SemiBold', sans-serif; --tp-ff-fontawesome: "Font Awesome 6 Pro"; /** @color declaration */ --tp-common-white: #fff; --tp-common-white-2: #f0f0f0; --tp-common-black: #030303; --tp-common-black-1: #10302a; --tp-common-black-2: #0d0d0d; --tp-common-black-3: #000; --tp-common-black-4: #405955; --tp-common-black-5: #111112; --tp-common-black-6: #333333; --tp-common-black-7: #121314; --tp-common-yellow: #fff112; --tp-common-yellow-2: #FFD500; --tp-common-green: #00dd80; --tp-common-green-2: #b4e717; --tp-common-green-3: #d5ffdd; --tp-common-blue: #5956e9; --tp-common-nights: #7D5DFF; --tp-common-meteor: #E62415; --tp-common-angry: #f14f44; --tp-common-sugar : #FFFBF5; --tp-common-cream : #b7ab98; --tp-common-pink : #eb5939; --tp-grey-1: #525252; --tp-grey-2: #999; --tp-grey-3: #f8f8f8; --tp-grey-4: #aaa; --tp-grey-5: #f3f1f2; --tp-grey-6: #AFB7B6; --tp-grey-7: #5c5c5c; --tp-grey-8: #101010; --tp-theme-primary: #28d3ad; --tp-theme-secondary: #591646; --tp-theme-1: #0752c5; --tp-border-1: #bdbdbd; --tp-border-2: rgba(51, 51, 51, 0.8); --tp-border-3: rgba(255, 255, 255, 0.1); } * { margin: 0; padding: 0; box-sizing: border-box; } /*--------------------------------- typography css start ---------------------------------*/ body { font-family: var(--tp-ff-body); font-size: 16px; font-weight: normal; color: var(--tp-common-black); line-height: 26px; background-color: #edf0f5; } a { text-decoration: none; } h1, h2, h3, h4, h5, h6 { font-family: var(--tp-ff-heading); color: var(--tp-common-black); margin-top: 0px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; -webkit-transition: color 0.3s 0s ease-out; -moz-transition: color 0.3s 0s ease-out; -ms-transition: color 0.3s 0s ease-out; -o-transition: color 0.3s 0s ease-out; transition: color 0.3s 0s ease-out; } h1 { font-size: 70px; } h2 { font-size: 50px; } h3 { font-size: 36px; } h4 { font-size: 26px; } h5 { font-size: 20px; } h6 { font-size: 16px; } ul { margin: 0px; padding: 0px; } p { font-family: var(--tp-ff-p); color: var(--tp-grey-1); font-weight: 400; font-size: 16px; line-height: 26px; margin-bottom: 15px; } img { max-width: 100%; } 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; } .uppercase { text-transform: uppercase; } .capitalize { text-transform: capitalize; } input[type=text], input[type=email], input[type=tel], input[type=number], input[type=password], input[type=url], textarea { outline: none; background-color: var(--tp-common-white); height: 52px; width: 100%; line-height: 52px; font-size: 16px; color: var(--tp-theme-primary); padding-left: 25px; padding-right: 25px; border-radius: 4px; border: 1px solid var(--tp-common-white); } 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-grey-2); } 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-grey-2); } 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-grey-2); } 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-grey-2); } 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-grey-2); } [dir=rtl] input[type=text], [dir=rtl] input[type=email], [dir=rtl] input[type=tel], [dir=rtl] input[type=number], [dir=rtl] input[type=password], [dir=rtl] input[type=url], [dir=rtl] textarea { text-align: right; } 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-theme-primary); } 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-theme-primary); font-size: 14px; opacity: 1; } *::placeholder { color: var(--tp-theme-primary); font-size: 14px; opacity: 1; } .z-index { z-index: 1; } .z-index-2 { z-index: 2; } .z-index-3 { z-index: 3; } .z-index-4 { z-index: 4; } .z-index-5 { z-index: 5; } .z-index-6 { z-index: 6; } .z-index-7 { z-index: 7; } .z-index-8 { z-index: 8; } .gx-10 { --bs-gutter-x: 10px; } .gx-12 { --bs-gutter-x: 12px; } .gx-15 { --bs-gutter-x: 15px; } .gx-20 { --bs-gutter-x: 20px; } .gx-23 { --bs-gutter-x: 23px; } .gx-25 { --bs-gutter-x: 25px; } .gx-30 { --bs-gutter-x: 30px; } .gx-35 { --bs-gutter-x: 35px; } .gx-40 { --bs-gutter-x: 40px; } .gx-45 { --bs-gutter-x: 45px; } .gx-50 { --bs-gutter-x: 50px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .gx-50 { --bs-gutter-x: 15px; } } .gx-60 { --bs-gutter-x: 60px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .gx-60 { --bs-gutter-x: 30px; } } .gx-90 { --bs-gutter-x: 90px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .gx-90 { --bs-gutter-x: 50px; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .gx-90 { --bs-gutter-x: 30px; } } /*--------------------------------- 1.1 Common Classes ---------------------------------*/ .w-img img { width: 100%; } .m-img img { max-width: 100%; } .hover-text-white:hover { color: var(--tp-common-white); } .hover-text-black:hover { color: var(--tp-common-black); } .hover-text-primary:hover { color: var(--tp-theme-primary); } .hover-text-grey:hover { color: var(--tp-grey-2); } .section-m-spacing { margin-top: -1px; } .text-italic { font-style: italic; } .fix { overflow: hidden; } .clear { clear: both; } .z-index-1 { z-index: 1; } .z-index-2 { z-index: 2; } .z-index-3 { z-index: 3; } .z-index-4 { z-index: 4; } .z-index-5 { z-index: 5; } .z-index-6 { z-index: 6; } .z-index-7 { z-index: 7; } .z-index-8 { z-index: 8; } .z-index-9 { z-index: 9; } .z-index-10 { z-index: 10; } .z-index-m-1 { z-index: -1; } .z-index-m-1 { z-index: -1; } .overflow-y-visible { overflow-x: hidden; overflow-y: visible; } .p-relative { position: relative; } .p-absolute { position: absolute; } .p-inherit { position: inherit !important; } .bg-position { background-position: center; background-size: cover; background-repeat: no-repeat; } /* transfrom */ .tp-transfrom { transform: translateY(-1px) !important; } .tp-transfrom-2 { transform: translateY(-2px); } .tp-transfrom-3 { transform: translateY(-3px); } .tp-transfrom-4 { transform: translateY(-4px); } .tp-round-4 { border-radius: 4px; } .tp-round-8 { border-radius: 8px; } .tp-round-10 { border-radius: 10px; } .tp-round-20 { border-radius: 20px; } .tp-round-24 { border-radius: 24px; } .tp-round-26 { border-radius: 26px; } .tp-round-32 { border-radius: 32px; } .tp-round-36 { border-radius: 36px; } .lh-0 { line-height: 0; } .lh-22 { line-height: 22px; } .lh-24 { line-height: 24px; } .lh-28 { line-height: 28px; } .lh-30 { line-height: 30px; } .lh-32 { line-height: 32px; } .lh-34 { line-height: 34px; } .lh-36 { line-height: 36px; } .lh-38 { line-height: 38px; } .lh-110-per { line-height: 1.1; } .lh-120-per { line-height: 1.2; } .lh-130-per { line-height: 1.3; } .lh-140-per { line-height: 1.4; } .lh-150-per { line-height: 1.5; } .lh-160-per { line-height: 1.6; } .lh-180-per { line-height: 1.8; } .ls-0 { letter-spacing: 0; } .ls-1 { letter-spacing: 0.01em; } .ls-m-1 { letter-spacing: -0.01em; } .ls-m-2 { letter-spacing: -0.02em; } .ls-m-3 { letter-spacing: -0.03em; } .ls-m-4 { letter-spacing: -0.04em; } .ls-m-5 { letter-spacing: -0.05em; } .ls-m-6 { letter-spacing: -0.06em; } .opacity-8 { opacity: 0.8; } .hover-opacity-1:hover { opacity: 1; } .underline-black { background-image: linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor); background-size: 0 1px, 0 1px; background-position: 100% 100%, 0 100%; background-repeat: no-repeat; transition: background-size 0.3s linear; -webkit-transition: all 0.4s ease 0.3s 0s ease-out; -moz-transition: all 0.4s ease 0.3s 0s ease-out; -ms-transition: all 0.4s ease 0.3s 0s ease-out; -o-transition: all 0.4s ease 0.3s 0s ease-out; transition: all 0.4s ease 0.3s 0s ease-out; } .underline-black:hover { background-image: linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor); background-size: 0 1px, 100% 1px; background-position: 100% 100%, 0 100%; background-repeat: no-repeat; transition: background-size 0.3s linear; -webkit-transition: all 0.4s ease 0.3s 0s ease-out; -moz-transition: all 0.4s ease 0.3s 0s ease-out; -ms-transition: all 0.4s ease 0.3s 0s ease-out; -o-transition: all 0.4s ease 0.3s 0s ease-out; transition: all 0.4s ease 0.3s 0s ease-out; } .underline-white { background-image: linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor); background-size: 0 1px, 0 1px; background-position: 100% 100%, 0 100%; background-repeat: no-repeat; transition: background-size 0.3s linear; -webkit-transition: all 0.4s ease 0.3s 0s ease-out; -moz-transition: all 0.4s ease 0.3s 0s ease-out; -ms-transition: all 0.4s ease 0.3s 0s ease-out; -o-transition: all 0.4s ease 0.3s 0s ease-out; transition: all 0.4s ease 0.3s 0s ease-out; } .underline-white:hover { background-image: linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor); background-size: 0 1px, 100% 1px; background-position: 100% 100%, 0 100%; background-repeat: no-repeat; transition: background-size 0.3s linear; -webkit-transition: all 0.4s ease 0.3s 0s ease-out; -moz-transition: all 0.4s ease 0.3s 0s ease-out; -ms-transition: all 0.4s ease 0.3s 0s ease-out; -o-transition: all 0.4s ease 0.3s 0s ease-out; transition: all 0.4s ease 0.3s 0s ease-out; } .tp-transparent { position: absolute; top: 0; left: 0; right: 0; width: 100%; z-index: 3; } @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), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .br br { display: none; } } .slide-transtion { -webkit-transition-timing-function: linear; transition-timing-function: linear; } .text-uppercase { text-transform: uppercase; } .img-cover { width: 100%; height: 100%; object-fit: cover; } .counter-row { counter-reset: count; } .p-inherit { position: inherit; } /*--------------------------------- 1.3 Default Spacing ---------------------------------*/ @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), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .pt-170 { padding-top: 115px; } } @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), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .pt-165 { padding-top: 110px; } } @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), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .pt-160 { padding-top: 100px; } } @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), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .pt-155 { padding-top: 100px; } } @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), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .pt-150 { padding-top: 100px; } } @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), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .pt-145 { padding-top: 100px; } } @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), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .pt-140 { padding-top: 100px; } } @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), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .pt-135 { padding-top: 95px; } } @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), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .pt-130 { padding-top: 90px; } } @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), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .pt-125 { padding-top: 85px; } } @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), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .pt-120 { padding-top: 80px; } } @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), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .pt-115 { padding-top: 75px; } } @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), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .pt-110 { padding-top: 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), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .pt-105 { padding-top: 65px; } } @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), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .pt-100 { padding-top: 60px; } } @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), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .pb-170 { padding-bottom: 100px; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .pt-180 { padding-top: 100px; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .pt-190 { padding-top: 110px; } } @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), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .pb-165 { padding-bottom: 100px; } } @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), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .pb-160 { padding-bottom: 100px; } } @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), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .pb-155 { padding-bottom: 100px; } } @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), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .pb-150 { padding-bottom: 100px; } } @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), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .pb-145 { padding-bottom: 100px; } } @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), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .pb-140 { padding-bottom: 100px; } } @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), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .pb-135 { padding-bottom: 95px; } } @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), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .pb-130 { padding-bottom: 90px; } } @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), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .pb-125 { padding-bottom: 85px; } } @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), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .pb-120 { padding-bottom: 80px; } } @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), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .pb-115 { padding-bottom: 75px; } } @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), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .pb-110 { padding-bottom: 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), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .pb-105 { padding-bottom: 65px; } } @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), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .pb-100 { padding-bottom: 60px; } } @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), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .pb-95 { padding-bottom: 55px; } } @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), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .pb-90 { padding-bottom: 50px; } } /*--------------------------------- 1.2 init style ---------------------------------*/ @media (min-width: 1400px) { .container-1800 { max-width: 1800px; } } @media (min-width: 1400px) { .container-1524 { max-width: 1524px; } } @media (min-width: 1400px) { .container-1646 { max-width: 1646px; } } @media (min-width: 1400px) { .container-1824 { max-width: 1824px; } } @media (min-width: 1400px) { .container-1750 { max-width: 1750px; } } @media (min-width: 1400px) { .container-1380 { max-width: 1380px; } } @media (min-width: 1400px) { .container-1230 { max-width: 1230px; } } @media (min-width: 1400px) { .container-1320 { max-width: 1320px; } } /* Font weight */ .fw-100 { font-weight: 100; } .fw-200 { font-weight: 200; } .fw-300 { font-weight: 300; } .fw-400 { font-weight: 400; } .fw-500 { font-weight: 500; } .fw-600 { font-weight: 600; } .fw-700 { font-weight: 700; } .fw-800 { font-weight: 800; } .fw-900 { font-weight: 900; } /* Font size */ .fs-12 { font-size: 12px; } .fs-13 { font-size: 13px; } .fs-14 { font-size: 14px; } .fs-15 { font-size: 15px; } .fs-16 { font-size: 16px; } .fs-17 { font-size: 17px; } .fs-18 { font-size: 18px; } .fs-19 { font-size: 19px; } .fs-20 { font-size: 20px; } .fs-21 { font-size: 21px; } .fs-22 { font-size: 22px; } .fs-23 { font-size: 23px; } .fs-24 { font-size: 24px; } .fs-25 { font-size: 25px; } .fs-26 { font-size: 26px; } .fs-27 { font-size: 27px; } .fs-28 { font-size: 28px; } .fs-29 { font-size: 29px; } .fs-30 { font-size: 30px; } .fs-31 { font-size: 31px; } .fs-32 { font-size: 32px; } .fs-33 { font-size: 33px; } .fs-34 { font-size: 34px; } .fs-35 { font-size: 35px; } .fs-36 { font-size: 36px; } .fs-37 { font-size: 37px; } .fs-38 { font-size: 38px; } .fs-39 { font-size: 39px; } .fs-40 { font-size: 40px; } .fs-41 { font-size: 41px; } .fs-42 { font-size: 42px; } .fs-43 { font-size: 43px; } .fs-44 { font-size: 44px; } .fs-45 { font-size: 45px; } .fs-46 { font-size: 46px; } .fs-47 { font-size: 47px; } .fs-48 { font-size: 48px; } .fs-49 { font-size: 49px; } .fs-50 { font-size: 50px; } .fs-51 { font-size: 51px; } .fs-52 { font-size: 52px; } .fs-53 { font-size: 53px; } .fs-54 { font-size: 54px; } .fs-55 { font-size: 55px; } .fs-56 { font-size: 56px; } .fs-57 { font-size: 57px; } .fs-58 { font-size: 58px; } .fs-59 { font-size: 59px; } .fs-60 { font-size: 60px; } .fs-61 { font-size: 61px; } .fs-62 { font-size: 62px; } .fs-63 { font-size: 63px; } .fs-64 { font-size: 64px; } .fs-65 { font-size: 65px; } .fs-66 { font-size: 66px; } .fs-67 { font-size: 67px; } .fs-68 { font-size: 68px; } .fs-69 { font-size: 69px; } .fs-70 { font-size: 70px; } .fs-71 { font-size: 71px; } .fs-72 { font-size: 72px; } .fs-73 { font-size: 73px; } .fs-74 { font-size: 74px; } .fs-75 { font-size: 75px; } .fs-76 { font-size: 76px; } .fs-77 { font-size: 77px; } .fs-78 { font-size: 78px; } .fs-79 { font-size: 79px; } .fs-80 { font-size: 80px; } .fs-81 { font-size: 81px; } .fs-82 { font-size: 82px; } .fs-83 { font-size: 83px; } .fs-84 { font-size: 84px; } .fs-85 { font-size: 85px; } .fs-86 { font-size: 86px; } .fs-87 { font-size: 87px; } .fs-88 { font-size: 88px; } .fs-89 { font-size: 89px; } .fs-90 { font-size: 90px; } .fs-91 { font-size: 91px; } .fs-92 { font-size: 92px; } .fs-93 { font-size: 93px; } .fs-94 { font-size: 94px; } .fs-95 { font-size: 95px; } .fs-96 { font-size: 96px; } .fs-97 { font-size: 97px; } .fs-98 { font-size: 98px; } .fs-99 { font-size: 99px; } .fs-100 { font-size: 100px; } /* Font size media query */ @media (max-width: 1399.98px) { .fs-xl-12 { font-size: 12px; } .fs-xl-13 { font-size: 13px; } .fs-xl-14 { font-size: 14px; } .fs-xl-15 { font-size: 15px; } .fs-xl-16 { font-size: 16px; } .fs-xl-17 { font-size: 17px; } .fs-xl-18 { font-size: 18px; } .fs-xl-19 { font-size: 19px; } .fs-xl-20 { font-size: 20px; } .fs-xl-21 { font-size: 21px; } .fs-xl-22 { font-size: 22px; } .fs-xl-23 { font-size: 23px; } .fs-xl-24 { font-size: 24px; } .fs-xl-25 { font-size: 25px; } .fs-xl-26 { font-size: 26px; } .fs-xl-27 { font-size: 27px; } .fs-xl-28 { font-size: 28px; } .fs-xl-29 { font-size: 29px; } .fs-xl-30 { font-size: 30px; } .fs-xl-31 { font-size: 31px; } .fs-xl-32 { font-size: 32px; } .fs-xl-33 { font-size: 33px; } .fs-xl-34 { font-size: 34px; } .fs-xl-35 { font-size: 35px; } .fs-xl-36 { font-size: 36px; } .fs-xl-37 { font-size: 37px; } .fs-xl-38 { font-size: 38px; } .fs-xl-39 { font-size: 39px; } .fs-xl-40 { font-size: 40px; } .fs-xl-41 { font-size: 41px; } .fs-xl-42 { font-size: 42px; } .fs-xl-43 { font-size: 43px; } .fs-xl-44 { font-size: 44px; } .fs-xl-45 { font-size: 45px; } .fs-xl-46 { font-size: 46px; } .fs-xl-47 { font-size: 47px; } .fs-xl-48 { font-size: 48px; } .fs-xl-49 { font-size: 49px; } .fs-xl-50 { font-size: 50px; } .fs-xl-51 { font-size: 51px; } .fs-xl-52 { font-size: 52px; } .fs-xl-53 { font-size: 53px; } .fs-xl-54 { font-size: 54px; } .fs-xl-55 { font-size: 55px; } .fs-xl-56 { font-size: 56px; } .fs-xl-57 { font-size: 57px; } .fs-xl-58 { font-size: 58px; } .fs-xl-59 { font-size: 59px; } .fs-xl-60 { font-size: 60px; } .fs-xl-61 { font-size: 61px; } .fs-xl-62 { font-size: 62px; } .fs-xl-63 { font-size: 63px; } .fs-xl-64 { font-size: 64px; } .fs-xl-65 { font-size: 65px; } .fs-xl-66 { font-size: 66px; } .fs-xl-67 { font-size: 67px; } .fs-xl-68 { font-size: 68px; } .fs-xl-69 { font-size: 69px; } .fs-xl-70 { font-size: 70px; } .fs-xl-71 { font-size: 71px; } .fs-xl-72 { font-size: 72px; } .fs-xl-73 { font-size: 73px; } .fs-xl-74 { font-size: 74px; } .fs-xl-75 { font-size: 75px; } .fs-xl-76 { font-size: 76px; } .fs-xl-77 { font-size: 77px; } .fs-xl-78 { font-size: 78px; } .fs-xl-79 { font-size: 79px; } .fs-xl-80 { font-size: 80px; } .fs-xl-81 { font-size: 81px; } .fs-xl-82 { font-size: 82px; } .fs-xl-83 { font-size: 83px; } .fs-xl-84 { font-size: 84px; } .fs-xl-85 { font-size: 85px; } .fs-xl-86 { font-size: 86px; } .fs-xl-87 { font-size: 87px; } .fs-xl-88 { font-size: 88px; } .fs-xl-89 { font-size: 89px; } .fs-xl-90 { font-size: 90px; } .fs-xl-91 { font-size: 91px; } .fs-xl-92 { font-size: 92px; } .fs-xl-93 { font-size: 93px; } .fs-xl-94 { font-size: 94px; } .fs-xl-95 { font-size: 95px; } .fs-xl-96 { font-size: 96px; } .fs-xl-97 { font-size: 97px; } .fs-xl-98 { font-size: 98px; } .fs-xl-99 { font-size: 99px; } .fs-xl-100 { font-size: 100px; } } /* Font size media query */ @media (max-width: 1199.98px) { .fs-lg-12 { font-size: 12px; } .fs-lg-13 { font-size: 13px; } .fs-lg-14 { font-size: 14px; } .fs-lg-15 { font-size: 15px; } .fs-lg-16 { font-size: 16px; } .fs-lg-17 { font-size: 17px; } .fs-lg-18 { font-size: 18px; } .fs-lg-19 { font-size: 19px; } .fs-lg-20 { font-size: 20px; } .fs-lg-21 { font-size: 21px; } .fs-lg-22 { font-size: 22px; } .fs-lg-23 { font-size: 23px; } .fs-lg-24 { font-size: 24px; } .fs-lg-25 { font-size: 25px; } .fs-lg-26 { font-size: 26px; } .fs-lg-27 { font-size: 27px; } .fs-lg-28 { font-size: 28px; } .fs-lg-29 { font-size: 29px; } .fs-lg-30 { font-size: 30px; } .fs-lg-31 { font-size: 31px; } .fs-lg-32 { font-size: 32px; } .fs-lg-33 { font-size: 33px; } .fs-lg-34 { font-size: 34px; } .fs-lg-35 { font-size: 35px; } .fs-lg-36 { font-size: 36px; } .fs-lg-37 { font-size: 37px; } .fs-lg-38 { font-size: 38px; } .fs-lg-39 { font-size: 39px; } .fs-lg-40 { font-size: 40px; } .fs-lg-41 { font-size: 41px; } .fs-lg-42 { font-size: 42px; } .fs-lg-43 { font-size: 43px; } .fs-lg-44 { font-size: 44px; } .fs-lg-45 { font-size: 45px; } .fs-lg-46 { font-size: 46px; } .fs-lg-47 { font-size: 47px; } .fs-lg-48 { font-size: 48px; } .fs-lg-49 { font-size: 49px; } .fs-lg-50 { font-size: 50px; } .fs-lg-51 { font-size: 51px; } .fs-lg-52 { font-size: 52px; } .fs-lg-53 { font-size: 53px; } .fs-lg-54 { font-size: 54px; } .fs-lg-55 { font-size: 55px; } .fs-lg-56 { font-size: 56px; } .fs-lg-57 { font-size: 57px; } .fs-lg-58 { font-size: 58px; } .fs-lg-59 { font-size: 59px; } .fs-lg-60 { font-size: 60px; } .fs-lg-61 { font-size: 61px; } .fs-lg-62 { font-size: 62px; } .fs-lg-63 { font-size: 63px; } .fs-lg-64 { font-size: 64px; } .fs-lg-65 { font-size: 65px; } .fs-lg-66 { font-size: 66px; } .fs-lg-67 { font-size: 67px; } .fs-lg-68 { font-size: 68px; } .fs-lg-69 { font-size: 69px; } .fs-lg-70 { font-size: 70px; } .fs-lg-71 { font-size: 71px; } .fs-lg-72 { font-size: 72px; } .fs-lg-73 { font-size: 73px; } .fs-lg-74 { font-size: 74px; } .fs-lg-75 { font-size: 75px; } .fs-lg-76 { font-size: 76px; } .fs-lg-77 { font-size: 77px; } .fs-lg-78 { font-size: 78px; } .fs-lg-79 { font-size: 79px; } .fs-lg-80 { font-size: 80px; } .fs-lg-81 { font-size: 81px; } .fs-lg-82 { font-size: 82px; } .fs-lg-83 { font-size: 83px; } .fs-lg-84 { font-size: 84px; } .fs-lg-85 { font-size: 85px; } .fs-lg-86 { font-size: 86px; } .fs-lg-87 { font-size: 87px; } .fs-lg-88 { font-size: 88px; } .fs-lg-89 { font-size: 89px; } .fs-lg-90 { font-size: 90px; } .fs-lg-91 { font-size: 91px; } .fs-lg-92 { font-size: 92px; } .fs-lg-93 { font-size: 93px; } .fs-lg-94 { font-size: 94px; } .fs-lg-95 { font-size: 95px; } .fs-lg-96 { font-size: 96px; } .fs-lg-97 { font-size: 97px; } .fs-lg-98 { font-size: 98px; } .fs-lg-99 { font-size: 99px; } .fs-lg-100 { font-size: 100px; } } @media (max-width: 991.98px) { .fs-md-12 { font-size: 12px; } .fs-md-13 { font-size: 13px; } .fs-md-14 { font-size: 14px; } .fs-md-15 { font-size: 15px; } .fs-md-16 { font-size: 16px; } .fs-md-17 { font-size: 17px; } .fs-md-18 { font-size: 18px; } .fs-md-19 { font-size: 19px; } .fs-md-20 { font-size: 20px; } .fs-md-21 { font-size: 21px; } .fs-md-22 { font-size: 22px; } .fs-md-23 { font-size: 23px; } .fs-md-24 { font-size: 24px; } .fs-md-25 { font-size: 25px; } .fs-md-26 { font-size: 26px; } .fs-md-27 { font-size: 27px; } .fs-md-28 { font-size: 28px; } .fs-md-29 { font-size: 29px; } .fs-md-30 { font-size: 30px; } .fs-md-31 { font-size: 31px; } .fs-md-32 { font-size: 32px; } .fs-md-33 { font-size: 33px; } .fs-md-34 { font-size: 34px; } .fs-md-35 { font-size: 35px; } .fs-md-36 { font-size: 36px; } .fs-md-37 { font-size: 37px; } .fs-md-38 { font-size: 38px; } .fs-md-39 { font-size: 39px; } .fs-md-40 { font-size: 40px; } .fs-md-41 { font-size: 41px; } .fs-md-42 { font-size: 42px; } .fs-md-43 { font-size: 43px; } .fs-md-44 { font-size: 44px; } .fs-md-45 { font-size: 45px; } .fs-md-46 { font-size: 46px; } .fs-md-47 { font-size: 47px; } .fs-md-48 { font-size: 48px; } .fs-md-49 { font-size: 49px; } .fs-md-50 { font-size: 50px; } .fs-md-51 { font-size: 51px; } .fs-md-52 { font-size: 52px; } .fs-md-53 { font-size: 53px; } .fs-md-54 { font-size: 54px; } .fs-md-55 { font-size: 55px; } .fs-md-56 { font-size: 56px; } .fs-md-57 { font-size: 57px; } .fs-md-58 { font-size: 58px; } .fs-md-59 { font-size: 59px; } .fs-md-60 { font-size: 60px; } .fs-md-61 { font-size: 61px; } .fs-md-62 { font-size: 62px; } .fs-md-63 { font-size: 63px; } .fs-md-64 { font-size: 64px; } .fs-md-65 { font-size: 65px; } .fs-md-66 { font-size: 66px; } .fs-md-67 { font-size: 67px; } .fs-md-68 { font-size: 68px; } .fs-md-69 { font-size: 69px; } .fs-md-70 { font-size: 70px; } .fs-md-71 { font-size: 71px; } .fs-md-72 { font-size: 72px; } .fs-md-73 { font-size: 73px; } .fs-md-74 { font-size: 74px; } .fs-md-75 { font-size: 75px; } .fs-md-76 { font-size: 76px; } .fs-md-77 { font-size: 77px; } .fs-md-78 { font-size: 78px; } .fs-md-79 { font-size: 79px; } .fs-md-80 { font-size: 80px; } .fs-md-81 { font-size: 81px; } .fs-md-82 { font-size: 82px; } .fs-md-83 { font-size: 83px; } .fs-md-84 { font-size: 84px; } .fs-md-85 { font-size: 85px; } .fs-md-86 { font-size: 86px; } .fs-md-87 { font-size: 87px; } .fs-md-88 { font-size: 88px; } .fs-md-89 { font-size: 89px; } .fs-md-90 { font-size: 90px; } .fs-md-91 { font-size: 91px; } .fs-md-92 { font-size: 92px; } .fs-md-93 { font-size: 93px; } .fs-md-94 { font-size: 94px; } .fs-md-95 { font-size: 95px; } .fs-md-96 { font-size: 96px; } .fs-md-97 { font-size: 97px; } .fs-md-98 { font-size: 98px; } .fs-md-99 { font-size: 99px; } .fs-md-100 { font-size: 100px; } } @media (max-width: 767.98px) { .fs-sm-12 { font-size: 12px; } .fs-sm-13 { font-size: 13px; } .fs-sm-14 { font-size: 14px; } .fs-sm-15 { font-size: 15px; } .fs-sm-16 { font-size: 16px; } .fs-sm-17 { font-size: 17px; } .fs-sm-18 { font-size: 18px; } .fs-sm-19 { font-size: 19px; } .fs-sm-20 { font-size: 20px; } .fs-sm-21 { font-size: 21px; } .fs-sm-22 { font-size: 22px; } .fs-sm-23 { font-size: 23px; } .fs-sm-24 { font-size: 24px; } .fs-sm-25 { font-size: 25px; } .fs-sm-26 { font-size: 26px; } .fs-sm-27 { font-size: 27px; } .fs-sm-28 { font-size: 28px; } .fs-sm-29 { font-size: 29px; } .fs-sm-30 { font-size: 30px; } .fs-sm-31 { font-size: 31px; } .fs-sm-32 { font-size: 32px; } .fs-sm-33 { font-size: 33px; } .fs-sm-34 { font-size: 34px; } .fs-sm-35 { font-size: 35px; } .fs-sm-36 { font-size: 36px; } .fs-sm-37 { font-size: 37px; } .fs-sm-38 { font-size: 38px; } .fs-sm-39 { font-size: 39px; } .fs-sm-40 { font-size: 40px; } .fs-sm-41 { font-size: 41px; } .fs-sm-42 { font-size: 42px; } .fs-sm-43 { font-size: 43px; } .fs-sm-44 { font-size: 44px; } .fs-sm-45 { font-size: 45px; } .fs-sm-46 { font-size: 46px; } .fs-sm-47 { font-size: 47px; } .fs-sm-48 { font-size: 48px; } .fs-sm-49 { font-size: 49px; } .fs-sm-50 { font-size: 50px; } .fs-sm-51 { font-size: 51px; } .fs-sm-52 { font-size: 52px; } .fs-sm-53 { font-size: 53px; } .fs-sm-54 { font-size: 54px; } .fs-sm-55 { font-size: 55px; } .fs-sm-56 { font-size: 56px; } .fs-sm-57 { font-size: 57px; } .fs-sm-58 { font-size: 58px; } .fs-sm-59 { font-size: 59px; } .fs-sm-60 { font-size: 60px; } .fs-sm-61 { font-size: 61px; } .fs-sm-62 { font-size: 62px; } .fs-sm-63 { font-size: 63px; } .fs-sm-64 { font-size: 64px; } .fs-sm-65 { font-size: 65px; } .fs-sm-66 { font-size: 66px; } .fs-sm-67 { font-size: 67px; } .fs-sm-68 { font-size: 68px; } .fs-sm-69 { font-size: 69px; } .fs-sm-70 { font-size: 70px; } .fs-sm-71 { font-size: 71px; } .fs-sm-72 { font-size: 72px; } .fs-sm-73 { font-size: 73px; } .fs-sm-74 { font-size: 74px; } .fs-sm-75 { font-size: 75px; } .fs-sm-76 { font-size: 76px; } .fs-sm-77 { font-size: 77px; } .fs-sm-78 { font-size: 78px; } .fs-sm-79 { font-size: 79px; } .fs-sm-80 { font-size: 80px; } .fs-sm-81 { font-size: 81px; } .fs-sm-82 { font-size: 82px; } .fs-sm-83 { font-size: 83px; } .fs-sm-84 { font-size: 84px; } .fs-sm-85 { font-size: 85px; } .fs-sm-86 { font-size: 86px; } .fs-sm-87 { font-size: 87px; } .fs-sm-88 { font-size: 88px; } .fs-sm-89 { font-size: 89px; } .fs-sm-90 { font-size: 90px; } .fs-sm-91 { font-size: 91px; } .fs-sm-92 { font-size: 92px; } .fs-sm-93 { font-size: 93px; } .fs-sm-94 { font-size: 94px; } .fs-sm-95 { font-size: 95px; } .fs-sm-96 { font-size: 96px; } .fs-sm-97 { font-size: 97px; } .fs-sm-98 { font-size: 98px; } .fs-sm-99 { font-size: 99px; } .fs-sm-100 { font-size: 100px; } } @media (max-width: 575.98px) { .fs-xs-12 { font-size: 12px; } .fs-xs-13 { font-size: 13px; } .fs-xs-14 { font-size: 14px; } .fs-xs-15 { font-size: 15px; } .fs-xs-16 { font-size: 16px; } .fs-xs-17 { font-size: 17px; } .fs-xs-18 { font-size: 18px; } .fs-xs-19 { font-size: 19px; } .fs-xs-20 { font-size: 20px; } .fs-xs-21 { font-size: 21px; } .fs-xs-22 { font-size: 22px; } .fs-xs-23 { font-size: 23px; } .fs-xs-24 { font-size: 24px; } .fs-xs-25 { font-size: 25px; } .fs-xs-26 { font-size: 26px; } .fs-xs-27 { font-size: 27px; } .fs-xs-28 { font-size: 28px; } .fs-xs-29 { font-size: 29px; } .fs-xs-30 { font-size: 30px; } .fs-xs-31 { font-size: 31px; } .fs-xs-32 { font-size: 32px; } .fs-xs-33 { font-size: 33px; } .fs-xs-34 { font-size: 34px; } .fs-xs-35 { font-size: 35px; } .fs-xs-36 { font-size: 36px; } .fs-xs-37 { font-size: 37px; } .fs-xs-38 { font-size: 38px; } .fs-xs-39 { font-size: 39px; } .fs-xs-40 { font-size: 40px; } .fs-xs-41 { font-size: 41px; } .fs-xs-42 { font-size: 42px; } .fs-xs-43 { font-size: 43px; } .fs-xs-44 { font-size: 44px; } .fs-xs-45 { font-size: 45px; } .fs-xs-46 { font-size: 46px; } .fs-xs-47 { font-size: 47px; } .fs-xs-48 { font-size: 48px; } .fs-xs-49 { font-size: 49px; } .fs-xs-50 { font-size: 50px; } .fs-xs-51 { font-size: 51px; } .fs-xs-52 { font-size: 52px; } .fs-xs-53 { font-size: 53px; } .fs-xs-54 { font-size: 54px; } .fs-xs-55 { font-size: 55px; } .fs-xs-56 { font-size: 56px; } .fs-xs-57 { font-size: 57px; } .fs-xs-58 { font-size: 58px; } .fs-xs-59 { font-size: 59px; } .fs-xs-60 { font-size: 60px; } .fs-xs-61 { font-size: 61px; } .fs-xs-62 { font-size: 62px; } .fs-xs-63 { font-size: 63px; } .fs-xs-64 { font-size: 64px; } .fs-xs-65 { font-size: 65px; } .fs-xs-66 { font-size: 66px; } .fs-xs-67 { font-size: 67px; } .fs-xs-68 { font-size: 68px; } .fs-xs-69 { font-size: 69px; } .fs-xs-70 { font-size: 70px; } .fs-xs-71 { font-size: 71px; } .fs-xs-72 { font-size: 72px; } .fs-xs-73 { font-size: 73px; } .fs-xs-74 { font-size: 74px; } .fs-xs-75 { font-size: 75px; } .fs-xs-76 { font-size: 76px; } .fs-xs-77 { font-size: 77px; } .fs-xs-78 { font-size: 78px; } .fs-xs-79 { font-size: 79px; } .fs-xs-80 { font-size: 80px; } .fs-xs-81 { font-size: 81px; } .fs-xs-82 { font-size: 82px; } .fs-xs-83 { font-size: 83px; } .fs-xs-84 { font-size: 84px; } .fs-xs-85 { font-size: 85px; } .fs-xs-86 { font-size: 86px; } .fs-xs-87 { font-size: 87px; } .fs-xs-88 { font-size: 88px; } .fs-xs-89 { font-size: 89px; } .fs-xs-90 { font-size: 90px; } .fs-xs-91 { font-size: 91px; } .fs-xs-92 { font-size: 92px; } .fs-xs-93 { font-size: 93px; } .fs-xs-94 { font-size: 94px; } .fs-xs-95 { font-size: 95px; } .fs-xs-96 { font-size: 96px; } .fs-xs-97 { font-size: 97px; } .fs-xs-98 { font-size: 98px; } .fs-xs-99 { font-size: 99px; } .fs-xs-100 { font-size: 100px; } } .tp-text-common-white { color: var(--tp-common-white); } .tp-bg-common-white { background-color: var(--tp-common-white); } .tp-text-common-white-2 { color: var(--tp-common-white-2); } .tp-bg-common-white-2 { background-color: var(--tp-common-white-2); } .tp-text-common-black { color: var(--tp-common-black); } .tp-bg-common-black { background-color: var(--tp-common-black); } .tp-text-common-black-1 { color: var(--tp-common-black-1); } .tp-bg-common-black-1 { background-color: var(--tp-common-black-1); } .tp-text-common-black-2 { color: var(--tp-common-black-2); } .tp-bg-common-black-2 { background-color: var(--tp-common-black-2); } .tp-text-common-black-3 { color: var(--tp-common-black-3); } .tp-bg-common-black-3 { background-color: var(--tp-common-black-3); } .tp-text-common-black-4 { color: var(--tp-common-black-4); } .tp-bg-common-black-4 { background-color: var(--tp-common-black-4); } .tp-text-common-black-5 { color: var(--tp-common-black-5); } .tp-bg-common-black-5 { background-color: var(--tp-common-black-5); } .tp-text-common-black-6 { color: var(--tp-common-black-6); } .tp-bg-common-black-6 { background-color: var(--tp-common-black-6); } .tp-text-common-black-7 { color: var(--tp-common-black-7); } .tp-bg-common-black-7 { background-color: var(--tp-common-black-7); } .tp-text-common-yellow { color: var(--tp-common-yellow); } .tp-bg-common-yellow { background-color: var(--tp-common-yellow); } .tp-text-common-yellow-2 { color: var(--tp-common-yellow-2); } .tp-bg-common-yellow-2 { background-color: var(--tp-common-yellow-2); } .tp-text-common-green { color: var(--tp-common-green); } .tp-bg-common-green { background-color: var(--tp-common-green); } .tp-text-common-green-2 { color: var(--tp-common-green-2); } .tp-bg-common-green-2 { background-color: var(--tp-common-green-2); } .tp-text-common-green-3 { color: var(--tp-common-green-3); } .tp-bg-common-green-3 { background-color: var(--tp-common-green-3); } .tp-text-common-blue { color: var(--tp-common-blue); } .tp-bg-common-blue { background-color: var(--tp-common-blue); } .tp-text-common-nights { color: var(--tp-common-nights); } .tp-bg-common-nights { background-color: var(--tp-common-nights); } .tp-text-common-meteor { color: var(--tp-common-meteor); } .tp-bg-common-meteor { background-color: var(--tp-common-meteor); } .tp-text-common-angry { color: var(--tp-common-angry); } .tp-bg-common-angry { background-color: var(--tp-common-angry); } .tp-text-common-sugar { color: var(--tp-common-sugar ); } .tp-bg-common-sugar { background-color: var(--tp-common-sugar ); } .tp-text-common-cream { color: var(--tp-common-cream ); } .tp-bg-common-cream { background-color: var(--tp-common-cream ); } .tp-text-common-pink { color: var(--tp-common-pink ); } .tp-bg-common-pink { background-color: var(--tp-common-pink ); } .tp-text-grey-1 { color: var(--tp-grey-1); } .tp-bg-grey-1 { background-color: var(--tp-grey-1); } .tp-text-grey-2 { color: var(--tp-grey-2); } .tp-bg-grey-2 { background-color: var(--tp-grey-2); } .tp-text-grey-3 { color: var(--tp-grey-3); } .tp-bg-grey-3 { background-color: var(--tp-grey-3); } .tp-text-grey-4 { color: var(--tp-grey-4); } .tp-bg-grey-4 { background-color: var(--tp-grey-4); } .tp-text-grey-5 { color: var(--tp-grey-5); } .tp-bg-grey-5 { background-color: var(--tp-grey-5); } .tp-text-grey-6 { color: var(--tp-grey-6); } .tp-bg-grey-6 { background-color: var(--tp-grey-6); } .tp-text-grey-7 { color: var(--tp-grey-7); } .tp-bg-grey-7 { background-color: var(--tp-grey-7); } .tp-text-grey-8 { color: var(--tp-grey-8); } .tp-bg-grey-8 { background-color: var(--tp-grey-8); } .tp-text-theme-primary { color: var(--tp-theme-primary); } .tp-bg-theme-primary { background-color: var(--tp-theme-primary); } .tp-text-theme-secondary { color: var(--tp-theme-secondary); } .tp-bg-theme-secondary { background-color: var(--tp-theme-secondary); } .tp-text-theme-1 { color: var(--tp-theme-1); } .tp-bg-theme-1 { background-color: var(--tp-theme-1); } .tp-text-border-1 { color: var(--tp-border-1); } .tp-bg-border-1 { background-color: var(--tp-border-1); } .tp-text-border-2 { color: var(--tp-border-2); } .tp-bg-border-2 { background-color: var(--tp-border-2); } .tp-text-border-3 { color: var(--tp-border-3); } .tp-bg-border-3 { background-color: var(--tp-border-3); } .tp-ff-body { font-family: var(--tp-ff-body); } .tp-ff-heading { font-family: var(--tp-ff-heading); } .tp-ff-p { font-family: var(--tp-ff-p); } .tp-ff-teko { font-family: var(--tp-ff-teko); } .tp-ff-funnel { font-family: var(--tp-ff-funnel); } .tp-ff-sora { font-family: var(--tp-ff-sora); } .tp-ff-dm { font-family: var(--tp-ff-dm); } .tp-ff-inter { font-family: var(--tp-ff-inter); } .tp-ff-poppins { font-family: var(--tp-ff-poppins); } .tp-ff-playfair { font-family: var(--tp-ff-playfair); } .tp-ff-jakarta { font-family: var(--tp-ff-jakarta); } .tp-ff-familjen { font-family: var(--tp-ff-familjen); } .tp-ff-morganite-bold { font-family: var(--tp-ff-morganite-bold); } .tp-ff-morganite-semibold { font-family: var(--tp-ff-morganite-semibold); } .tp-ff-fontawesome { font-family: var(--tp-ff-fontawesome); } /*----------------------------------------*/ /* 2.3 scrollToTop /*----------------------------------------*/ .scrollToTop { display: none !important; height: 55px; width: 55px; position: fixed; bottom: 20px; right: 20px; background-color: #cbc6c6; border-radius: 50%; overflow: hidden; cursor: pointer; z-index: 999; transition: 0.5s ease all; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .scrollToTop { height: 40px; width: 40px; } } .scrollToTop.active-progress { display: block !important; } .scrollToTop:hover { transform: translateY(-15%); } .scrollToTop .arrowUp { position: absolute; left: 0; top: 0; z-index: 3; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--tp-common-black); font-size: 24px; } .scrollToTop .arrowUp i { font-size: 19px; } .scrollToTop .water { position: absolute; left: 0; top: 0; z-index: 2; width: 100%; height: 100%; transform: translateY(100%); background-color: var(--tp-theme-primary); transition: all 0.3s; border: 1px solid var(--tp-theme-primary); } .scrollToTop .water svg use { margin-bottom: -1px; position: relative; bottom: -1px; fill: var(--tp-theme-primary) !important; } .scrollToTop-2 .water { background-color: var(--tp-theme-secondary); border: 1px solid var(--tp-theme-secondary); } .scrollToTop-2 .water svg use { fill: var(--tp-theme-secondary) !important; } .scrollToTop-3 .water { background-color: var(--tp-common-angry); border: 1px solid var(--tp-common-angry); } .scrollToTop-3 .water svg use { fill: var(--tp-common-angry) !important; } .scrollToTop-4 .water { background-color: var(--tp-theme-1); border: 1px solid var(--tp-theme-1); } .scrollToTop-4 .water svg use { fill: var(--tp-theme-1) !important; } .scrollToTop .water_wave { width: 200%; position: absolute; bottom: 100%; } .scrollToTop .water_wave_back { right: 0; fill: var(--tp-theme-primary); animation: wave-back 1.4s infinite linear; } .scrollToTop .water_wave_front { left: 0; fill: #7A259EE0; margin-bottom: -1px; animation: wave-front 0.7s infinite linear; } @keyframes wave-front { 100% { transform: translateX(-50%); } } @keyframes wave-back { 100% { transform: translateX(50%); } } /*----------------------------------------*/ /* 2.5 Buttons /*----------------------------------------*/ .tp-btn-lg { padding: 19px 21px; } .tp-btn-md { padding: 15px 15px; } .tp-btn-xl { padding: 23px 28px; } .tp-btn-sm { padding: 15px 36px; } .tp-btn-cst { padding: 18px 30px; } .tp-btn-switch-animation { -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .tp-btn-switch-animation .btn-text { margin-right: -23px; position: relative; z-index: 3; transition: transform 0.6s 125ms cubic-bezier(0.1, 0.75, 0.25, 1); } .tp-btn-switch-animation .btn-icon { margin-right: 6px; position: relative; transition: opacity 0.4s 0.25s, transform 0.6s 0.25s; transition-timing-function: cubic-bezier(0.1, 0.75, 0.25, 1); line-height: 0; z-index: 3; opacity: 0; transform: translateX(0); } .tp-btn-switch-animation .btn-icon + .btn-icon { order: -2; opacity: 1; margin-left: 0; } .tp-btn-switch-animation:hover .btn-text { transition-delay: 0.05s; transform: translateX(-23px); } .tp-btn-switch-animation:hover .btn-icon { transition-delay: 200ms; opacity: 1; -webkit-transform: translateX(5px); transform: translateX(5px); } .tp-btn-switch-animation:hover .btn-icon + .btn-icon { opacity: 0; transition-delay: 0s; } .tp-btn-switch-text > span { display: inline-flex; align-items: center; position: relative; overflow: hidden; } .tp-btn-switch-text.btn-lg > span { padding: 15px 31px; } .tp-btn-switch-text .btn-double-text { transition: opacity 0.65s, transform 0.85s; transition-timing-function: cubic-bezier(0.15, 0.85, 0.31, 1); position: relative; } .tp-btn-switch-text .btn-double-text::before { content: attr(data-text); display: inline-block; position: absolute; white-space: nowrap; top: 50%; opacity: 0; left: 50%; transform: translate(-50%, 100%); transition: opacity 0.5s, transform 0.8s; transition-timing-function: cubic-bezier(0.15, 0.85, 0.31, 1); } .tp-btn-switch-text:hover.bg-hover-black { background: var(--tp-common-black-4); } .tp-btn-switch-text:hover.bg-hover-theme-1 { background: var(--tp-theme-1); } .tp-btn-switch-text:hover .btn-double-text { transform: translateY(-200%); } .tp-btn-switch-text:hover .btn-double-text::before { transform: translate(-50%, 150%); opacity: 1; } .tp-btn-switch-2-animation { -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .tp-btn-switch-2-animation .btn-text { margin-left: -18px; position: relative; z-index: 3; transition: transform 0.6s 125ms cubic-bezier(0.1, 0.75, 0.25, 1); } .tp-btn-switch-2-animation .btn-icon { margin-left: 6px; position: relative; transition: opacity 0.4s 0.25s, transform 0.6s 0.25s; transition-timing-function: cubic-bezier(0.1, 0.75, 0.25, 1); line-height: 0; z-index: 3; } .tp-btn-switch-2-animation .btn-icon + .btn-icon { order: -2; opacity: 0; transition-delay: 0s; margin-left: 0; -webkit-transform: translateX(-10px); transform: translateX(-10px); } .tp-btn-switch-2-animation:hover .btn-text { transition-delay: 0.1s; transform: translateX(23px); } .tp-btn-switch-2-animation:hover .btn-icon { transition-delay: 0s; transform: translateX(10px); opacity: 0; } .tp-btn-switch-2-animation:hover .btn-icon + .btn-icon { opacity: 1; transform: translateX(0); transition-delay: 225ms; } .tp-btn-switch-2-animation-text > span { display: inline-flex; align-items: center; position: relative; overflow: hidden; } .tp-btn-switch-2-animation-text.btn-lg > span { padding: 15px 31px; } .tp-btn-switch-2-animation-text .btn-double-text { transition: opacity 0.65s, transform 0.85s; transition-timing-function: cubic-bezier(0.15, 0.85, 0.31, 1); position: relative; } .tp-btn-switch-2-animation-text .btn-double-text::before { content: attr(data-text); display: inline-block; position: absolute; white-space: nowrap; top: 50%; opacity: 0; left: 50%; transform: translate(-50%, 100%); transition: opacity 0.5s, transform 0.8s; transition-timing-function: cubic-bezier(0.15, 0.85, 0.31, 1); } .tp-btn-switch-2-animation-text:hover.bg-hover-black { background: var(--tp-common-black-4); } .tp-btn-switch-2-animation-text:hover.bg-hover-theme-1 { background: var(--tp-theme-1); } .tp-btn-switch-2-animation-text:hover .btn-double-text { transform: translateY(-200%); } .tp-btn-switch-2-animation-text:hover .btn-double-text::before { transform: translate(-50%, 150%); opacity: 1; } .tp-btn-2 { text-transform: uppercase; color: var(--tp-common-black); border-radius: 30px; padding: 16px 24px; line-height: 1; background: var(--tp-common-white); position: relative; z-index: 1; font-weight: 500; font-size: 15px; } .tp-btn-border { border: 1px solid var(--tp-border-1); } .tp-btn-border:hover { background: var(--tp-theme-primary); border-color: var(--tp-theme-primary); } .tp-btn-border-white { border: 1px solid #252525; } .tp-btn-border-white:hover { background: var(--tp-theme-primary); border-color: var(--tp-theme-primary); } .tp-btn-white { background: var(--tp-common-white); color: var(--tp-common-black); } .tp-btn-white:hover { color: var(--tp-common-black); } .tp-btn-gradian { backdrop-filter: blur(80px); background: radial-gradient(170.08% 129.04% at 0% 10.42%, #10302a 0%, rgba(16, 48, 42, 0.1) 62.47%, rgba(180, 231, 23, 0.1) 100%); } .tp-btn-it-lg { padding: 17px 31px; } .tp-btn-it-lg .btn-icon { margin-right: 9px; } .tp-btn-it-lg:hover .btn-icon { -webkit-transform: translateX(10px); transform: translateX(10px); } .tp-btn-it-xl { padding: 22px 57px; } .tp-btn-it-xl:hover { background: var(--tp-common-green-2); box-shadow: inset 0 4px 16px 1px var(--tp-common-green-2); color: var(--tp-common-black-1); } .tp-btn-pb-spacing { padding: 15px 31px 17px 31px; } .tp-btn-pb-cart { border: 1px solid transparent; } .tp-btn-pb-cart.pb-border { border: 1px solid rgba(129, 129, 129, 0.2); } .tp-btn-pb-cart:hover.pb-border { background: var(--tp-theme-secondary); border-color: var(--tp-theme-secondary); } .tp-btn-pb-cart:hover.no-border { background: transparent; border-color: rgba(129, 129, 129, 0.2); } .tp-btn-ai { padding: 14px 32px; border-radius: 100px; z-index: 1; transition: all 0.4s ease; } .tp-btn-ai::after { content: ""; position: absolute; top: -2px; bottom: -2px; left: -2px; right: -2px; z-index: -2; border-radius: 101px; background-image: -webkit-linear-gradient(90deg, #201b17 0%, #f96501 50%, #201b17 100%); background-image: -moz-linear-gradient(90deg, #201b17 0%, #f96501 50%, #201b17 100%); background-image: -ms-linear-gradient(90deg, #201b17 0%, #f96501 50%, #201b17 100%); background-image: -o-linear-gradient(90deg, #201b17 0%, #f96501 50%, #201b17 100%); background-image: linear-gradient(90deg, #201b17 0%, #f96501 50%, #201b17 100%); -moz-animation: sliderTitle3 2s ease-in-out 1s forwards infinite alternate; -webkit-animation: sliderTitle3 2s ease-in-out 1s forwards infinite alternate; animation: sliderTitle3 2s ease-in-out 1s forwards infinite alternate; background-size: 150% 150%; } .tp-btn-ai::before { position: absolute; content: ""; top: 0; left: 0; width: 100%; height: 100%; background: var(--tp-common-white); z-index: -1; border-radius: 100px; transition: all 0.4s ease; } .tp-btn-ai:hover { background-color: transparent; } .tp-btn-ai:hover::before { background: transparent; } .tp-btn-ai-transparent::before { background: #ebe1b3; } .tp-btn-ai-transparent-2::before { background: transparent; } .tp-btn-ai-black::before { background: var(--tp-common-black-5); } .tp-btn-ai-xl { padding: 17px 20px; } .tp-btn-ai-xxl { padding: 32px 41px; border-radius: 50px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-btn-ai-xxl { padding: 20px 35px; } } .tp-btn-circle-dot { position: absolute; bottom: 0; left: 32px; width: 0px; height: 0px; -webkit-transition: all 0.6s ease-out; -moz-transition: all 0.6s ease-out; -ms-transition: all 0.6s ease-out; -o-transition: all 0.6s ease-out; transition: all 0.6s ease-out; line-height: 20px; border-radius: 50%; background-color: var(--tp-theme-primary); -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); border: 1px solid transparent; z-index: -1; } .tp-btn-rounded { position: relative; z-index: 1; overflow: hidden; } .tp-btn-rounded:hover .tp-btn-circle-dot { width: 420px; height: 420px; } .tp-btn-group { display: flex; width: fit-content; } .tp-btn-group > *:nth-child(1) { transform: scale3d(0.5, 0.5, 1); margin-inline-end: -52px; } .tp-btn-group > *:nth-child(2) { transform: scale3d(1, 1, 1); } .tp-btn-group > *:nth-child(3) { transform: scale3d(1, 1, 1); margin-inline-start: 0; } .tp-btn-group:hover > *:nth-child(1) { transform: scale3d(1, 1, 1); margin-inline-end: 0; background: var(--tp-theme-primary); } .tp-btn-group:hover > *:nth-child(2) { transform: scale3d(1, 1, 1); background: var(--tp-theme-primary); } .tp-btn-group:hover > *:nth-child(3) { transform: scale3d(0.5, 0.5, 1); margin-inline-start: -52px; background: var(--tp-theme-primary); } .tp-btn-group .tp-btn-circle { text-align: center; width: 48px; height: 48px; font-weight: 500; font-size: 16px; line-height: 1.5; border-radius: 100%; display: flex; gap: 10px; align-items: center; justify-content: center; background-color: var(--tp-common-white); color: var(--tp-common-black); } .tp-btn-group .tp-btn-circle i { transform: rotate(-45deg); } .tp-btn-md { padding: 22px 33px; border-radius: 100px; z-index: 1; transition: all 0.4s ease; } .tp-btn-md-header { padding: 12px 16px; } .tp-btn-md-border { border: 1px solid rgba(17, 17, 18, 0.1); } .tp-btn-vp-group .tp-btn-circle { background: transparent; border: 1px solid rgba(17, 17, 18, 0.1); width: 60px; height: 60px; line-height: 60px; } .tp-btn-vp-group .tp-btn-2 { background: #E9E9E9; font-weight: 700; font-size: 16px; font-family: var(--tp-ff-inter); color: var(--tp-common-black-5); border: 1px solid rgba(17, 17, 18, 0.1); padding: 21px 29px; } .tp-btn-vp-group:hover > *:nth-child(1) { background: var(--tp-common-black-5); color: var(--tp-common-white); } .tp-btn-vp-group:hover > *:nth-child(2) { background: var(--tp-common-black-5); color: var(--tp-common-white); } .tp-btn-vp-group:hover > *:nth-child(3) { background: var(--tp-common-black-5); color: var(--tp-common-white); } .tp-btn-vp-group-primary .tp-btn-circle { background: var(--tp-theme-primary); } .tp-btn-vp-group-primary .tp-btn-2 { background: var(--tp-theme-primary); } .tp-btn-vp-group-primary:hover > *:nth-child(1) { background: var(--tp-common-white); color: var(--tp-common-black-5); } .tp-btn-vp-group-primary:hover > *:nth-child(2) { background: var(--tp-common-white); color: var(--tp-common-black-5); } .tp-btn-vp-group-primary:hover > *:nth-child(3) { background: var(--tp-common-white); color: var(--tp-common-black-5); } .tp-arrow-angle { --qode-hover-move-x: 110%; --qode-hover-move-y: 100%; } .tp-arrow-angle path { transition: transform 0.38s cubic-bezier(0.37, 0.08, 0.02, 0.93), opacity 0.18s ease-out; } .tp-arrow-angle path:nth-of-type(1) { transform: translateX(0) translateY(0); opacity: 1; transition-delay: 0.15s, 0.15s; } .tp-arrow-angle path:nth-of-type(2) { transform: translateX(calc(-1 * var(--qode-hover-move-x))) translateY(var(--qode-hover-move-y)); opacity: 0.5; transition-delay: 0s, 0s; } .tp-arrow-angle-pb path:nth-of-type(2) { transform: translateX(calc(1 * var(--qode-hover-move-x))) translateY(var(--qode-hover-move-y)); } .tp-arrow-svg-top-right { fill: currentColor; stroke: none; } .tp-left-right .td-text { transform: translateY(1px); } .tp-left-right:hover .tp-arrow-angle path:nth-of-type(2) { transform: translateX(0) translateY(0); opacity: 1; transition-delay: 0.15s, 0.15s; } .tp-left-right:hover .tp-arrow-angle path:nth-of-type(1) { transform: translateX(var(--qode-hover-move-x)) translateY(calc(-1 * var(--qode-hover-move-y))); opacity: 0; transition-delay: 0s, 0s; } .tp-left-right-pb:hover .tp-arrow-angle-pb path:nth-of-type(2) { transform: translateY(0) translateX(0); } .tp-left-right-pb:hover .tp-arrow-angle-pb path:nth-of-type(1) { transform: translateX(var(--qode-hover-move-x)) translateY(calc(1 * var(--qode-hover-move-y))); } .tp-rounded-btn-wrap a { width: 160px; height: 160px; font-weight: 500; font-size: 18px; line-height: 1; color: #000; font-family: var(--tp-ff-heading); border: 0px solid var(--tp-border-1); background: #fff; border-radius: 50%; display: inline-block; text-transform: uppercase; text-align: center; line-height: 20px; padding-top: 40px; } .tp-rounded-btn-wd a { font-family: var(--tp-ff-body); font-size: 15px; text-transform: uppercase; } /*----------------------------------------*/ /* 2.1 Animations /*----------------------------------------*/ @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); } } .uncover { display: flex; flex-direction: row; position: absolute; top: 0; left: 0; height: 100%; width: 100%; } .uncover_slice { height: 100%; flex-grow: 1; background: #edf0f5; } .box { position: relative; overflow: hidden; } .line-1 { stroke-dasharray: 1300; stroke-dashoffset: 2500; animation: dash 5s linear forwards infinite; } .line-2 { stroke-dasharray: 1000; stroke-dashoffset: 2000; animation: dash 5s linear forwards infinite; } @keyframes dash { to { stroke-dashoffset: 0px; stroke-dasharray: 1000; } } @keyframes dash-2 { to { stroke-dashoffset: 0px; stroke-dasharray: 3000; } } @-webkit-keyframes tpSwing { 0% { -webkit-transform: rotate(6deg); -moz-transform: rotate(6deg); -ms-transform: rotate(6deg); -o-transform: rotate(6deg); transform: rotate(6deg); } 100% { -webkit-transform: rotate(-6deg); -moz-transform: rotate(-6deg); -ms-transform: rotate(-6deg); -o-transform: rotate(-6deg); transform: rotate(-6deg); } } @-moz-keyframes tpSwing { 0% { -webkit-transform: rotate(6deg); -moz-transform: rotate(6deg); -ms-transform: rotate(6deg); -o-transform: rotate(6deg); transform: rotate(6deg); } 100% { -webkit-transform: rotate(-6deg); -moz-transform: rotate(-6deg); -ms-transform: rotate(-6deg); -o-transform: rotate(-6deg); transform: rotate(-6deg); } } @-ms-keyframes tpSwing { 0% { -webkit-transform: rotate(6deg); -moz-transform: rotate(6deg); -ms-transform: rotate(6deg); -o-transform: rotate(6deg); transform: rotate(6deg); } 100% { -webkit-transform: rotate(-6deg); -moz-transform: rotate(-6deg); -ms-transform: rotate(-6deg); -o-transform: rotate(-6deg); transform: rotate(-6deg); } } @keyframes tpSwing { 0% { -webkit-transform: rotate(6deg); -moz-transform: rotate(6deg); -ms-transform: rotate(6deg); -o-transform: rotate(6deg); transform: rotate(6deg); } 100% { -webkit-transform: rotate(-6deg); -moz-transform: rotate(-6deg); -ms-transform: rotate(-6deg); -o-transform: rotate(-6deg); transform: rotate(-6deg); } } .tpswing { animation: tpSwing 2s linear infinite alternate; } @keyframes tp_animation_spin { from { transform: rotate(0); } to { transform: rotate(360deg); } } .tp-live-anim-spin { animation: tp_animation_spin 6s linear infinite; } @keyframes tdfadeUp { 0% { opacity: 0; -webkit-transform: translateY(50px); -ms-transform: translateY(50px); transform: translateY(50px); } 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } @keyframes mymove { 0% { transform: scale(0.9); } 50% { transform: scale(1); } 100% { transform: scale(0.9); } } @keyframes levitate-lg { 0% { -webkit-transform: translateY(0) scale(1); transform: translateY(0) scale(1); } 50% { -webkit-transform: translateY(30px) scale(1.01); transform: translateY(30px) scale(1.01); } 100% { -webkit-transform: translateY(0) scale(1); transform: translateY(0) scale(1); } } @keyframes popups { 0% { -webkit-transform: scale(1); transform: scale(1); } 50% { -webkit-transform: scale(1.4); transform: scale(1.4); } 100% { -webkit-transform: scale(1); transform: scale(1); } } @keyframes color-change { 0% { opacity: 0.7; } 50% { opacity: 1; } 100% { opacity: 0.7; } } @-webkit-keyframes sliderTitle3 { 0% { background-position: 0%; } 100% { background-position: 100%; } } @-moz-keyframes sliderTitle3 { 0% { background-position: 0%; } 100% { background-position: 100%; } } @-ms-keyframes sliderTitle3 { 0% { background-position: 0%; } 100% { background-position: 100%; } } @keyframes sliderTitle3 { 0% { background-position: 0%; } 100% { background-position: 100%; } } .title-slide-gradient { background-image: -webkit-linear-gradient(90deg, #201b17 0%, #f96501 50%, #201b17 100%); background-image: -moz-linear-gradient(90deg, #201b17 0%, #f96501 50%, #201b17 100%); background-image: -ms-linear-gradient(90deg, #201b17 0%, #f96501 50%, #201b17 100%); background-image: -o-linear-gradient(90deg, #201b17 0%, #f96501 50%, #201b17 100%); background-image: linear-gradient(90deg, #201b17 0%, #f96501 50%, #201b17 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-fill-color: transparent; -moz-animation: sliderTitle3 2s ease-in-out 1s forwards infinite alternate; -webkit-animation: sliderTitle3 2s ease-in-out 1s forwards infinite alternate; animation: sliderTitle3 2s ease-in-out 1s forwards infinite alternate; background-size: 150% 150%; } @-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); } } .tpshake { transition: all 0.4s ease; } .tpshake-wrap:hover .tpshake { animation-name: tpshake; animation-timing-function: ease-in-out; animation-duration: 0.4s; animation-iteration-count: 1; } @-webkit-keyframes ripple-red { 0% { -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.3), 0 0 0 10px rgba(255, 255, 255, 0.3), 0 0 0 20px rgba(255, 255, 255, 0.3); box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.3), 0 0 0 10px rgba(255, 255, 255, 0.3), 0 0 0 20px rgba(255, 255, 255, 0.3); } 100% { -webkit-box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.3), 0 0 0 20px rgba(255, 255, 255, 0.3), 0 0 0 30px rgba(255, 255, 255, 0); box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.3), 0 0 0 20px rgba(255, 255, 255, 0.3), 0 0 0 30px rgba(255, 42, 2, 0); } } @-moz-keyframes ripple-red { 0% { -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.3), 0 0 0 10px rgba(255, 255, 255, 0.3), 0 0 0 20px rgba(255, 255, 255, 0.3); box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.3), 0 0 0 10px rgba(255, 255, 255, 0.3), 0 0 0 20px rgba(255, 255, 255, 0.3); } 100% { -webkit-box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.3), 0 0 0 20px rgba(255, 255, 255, 0.3), 0 0 0 30px rgba(255, 255, 255, 0); box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.3), 0 0 0 20px rgba(255, 255, 255, 0.3), 0 0 0 30px rgba(255, 42, 2, 0); } } @-ms-keyframes ripple-red { 0% { -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.3), 0 0 0 10px rgba(255, 255, 255, 0.3), 0 0 0 20px rgba(255, 255, 255, 0.3); box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.3), 0 0 0 10px rgba(255, 255, 255, 0.3), 0 0 0 20px rgba(255, 255, 255, 0.3); } 100% { -webkit-box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.3), 0 0 0 20px rgba(255, 255, 255, 0.3), 0 0 0 30px rgba(255, 255, 255, 0); box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.3), 0 0 0 20px rgba(255, 255, 255, 0.3), 0 0 0 30px rgba(255, 42, 2, 0); } } @keyframes ripple-red { 0% { -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.3), 0 0 0 10px rgba(255, 255, 255, 0.3), 0 0 0 20px rgba(255, 255, 255, 0.3); box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.3), 0 0 0 10px rgba(255, 255, 255, 0.3), 0 0 0 20px rgba(255, 255, 255, 0.3); } 100% { -webkit-box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.3), 0 0 0 20px rgba(255, 255, 255, 0.3), 0 0 0 30px rgba(255, 255, 255, 0); box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.3), 0 0 0 20px rgba(255, 255, 255, 0.3), 0 0 0 30px rgba(255, 42, 2, 0); } } .video-animetion { -webkit-transition: 0.5s -webkit-animation ripple-red 1s linear infinite; animation: ripple-red 1s linear infinite; -webkit-transition: 0.5s; } @keyframes upslide { 0%, 20%, 50%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-20px); } 60% { transform: translateY(-10px); } } .upslide { animation: upslide 4s linear forwards infinite alternate; } @keyframes upslide-1 { 0%, 20%, 50%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-8px); } 60% { transform: translateY(-4px); } } .upslide-1 { animation: upslide-1 4s linear forwards infinite alternate; } @keyframes arrowLineRotation { to { transform: rotate(180deg); } } @keyframes arrowLineRotationRev { to { transform: rotate(-180deg); } } @keyframes dash { 0% { stroke-dashoffset: 1000; } 100% { stroke-dashoffset: 0; } } /*----------------------------------------*/ /* 2.9 Preloader /*----------------------------------------*/ body.loaded { overflow: hidden !important; height: 100% !important; } .loader-wrap { position: fixed; z-index: 10; height: 100vh; width: 100%; left: 0; top: 0; display: -webkit-box; display: -ms-flexbox; display: flex; overflow: hidden; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; background: transparent; z-index: 99999999999999; } .loader-wrap svg { position: absolute; top: 0; width: 100%; height: 110vh; fill: #121212; } .loader-wrap .loader-wrap-heading .load-text { font-size: 62px; font-weight: 500; letter-spacing: 0px; text-transform: uppercase; z-index: 20; font-family: var(--tp-ff-heading); color: var(--tp-common-white); } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) { .loader-wrap .loader-wrap-heading .load-text { font-size: 40px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .loader-wrap .loader-wrap-heading .load-text { font-size: 20px; } } .load-text span { -webkit-animation: loading 1s infinite alternate; animation: loading 1s infinite alternate; } .load-text span:nth-child(1) { -webkit-animation-delay: 0s; animation-delay: 0s; } .load-text span:nth-child(2) { -webkit-animation-delay: 0.1s; animation-delay: 0.1s; } .load-text span:nth-child(3) { -webkit-animation-delay: 0.2s; animation-delay: 0.2s; } .load-text span:nth-child(4) { -webkit-animation-delay: 0.3s; animation-delay: 0.3s; } .load-text span:nth-child(5) { -webkit-animation-delay: 0.4s; animation-delay: 0.4s; } .load-text span:nth-child(6) { -webkit-animation-delay: 0.5s; animation-delay: 0.5s; } .load-text span:nth-child(7) { -webkit-animation-delay: 0.6s; animation-delay: 0.6s; } .load-text span:nth-child(8) { -webkit-animation-delay: 0.7s; animation-delay: 0.7s; } .load-text span:nth-child(9) { -webkit-animation-delay: 0.8s; animation-delay: 0.8s; } .load-text span:nth-child(10) { -webkit-animation-delay: 0.9s; animation-delay: 0.9s; } .load-text span:nth-child(11) { -webkit-animation-delay: 0.10s; animation-delay: 0.10s; } .load-text span:nth-child(12) { -webkit-animation-delay: 0.11s; animation-delay: 0.11s; } .load-text span:nth-child(13) { -webkit-animation-delay: 0.12s; animation-delay: 0.12s; } .load-text span:nth-child(14) { -webkit-animation-delay: 0.13s; animation-delay: 0.13s; } .load-text span:nth-child(15) { -webkit-animation-delay: 0.14s; animation-delay: 0.14s; } @-webkit-keyframes loading { 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes loading { 0% { opacity: 1; } 100% { opacity: 0; } } .containers { position: inherit; } /*----------------------------------------*/ /* 2.2 Background /*----------------------------------------*/ .tp-bg-grey { background: #F8F9F9; } .tp-bg-grey-2 { background: #FBFBFB; } .plumbing-bg { background: #fffbf5; } .video-production-bg { background: #E9E9E9; } .pricing-bg { background: #EDEFEF; } /*----------------------------------------*/ /* 2.8 offcanvas /*----------------------------------------*/ .body-overlay { position: fixed; top: 0; left: 0; z-index: 995; width: 100%; height: 100%; background: rgba(24, 24, 24, 0.5); visibility: hidden; opacity: 0; transition: 0.45s ease-in-out; } .body-overlay.apply { opacity: 1; visibility: visible; } .body-overlay:hover { cursor: url(../img/cross-icon/cross-out.html), pointer; } .tp-offcanvas { background-position: center; background-size: cover; background-repeat: no-repeat; position: fixed; top: 0; right: -100%; width: 450px; bottom: 0; box-shadow: 0 16px -32px 0 rgba(0, 0, 0, 0.8); background-color: var(--tp-common-white); z-index: 997; padding: 50px; scrollbar-width: none; opacity: 0; visibility: hidden; transition: 0.45s ease-in-out; overflow-y: scroll; } @media (max-width: 574.98px) { .tp-offcanvas { width: 100%; padding: 40px 35px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .tp-offcanvas { width: 400px; padding: 40px; } } .tp-offcanvas.opened { opacity: 1; visibility: visible; right: 0; -webkit-transition: all 0.4s cubic-bezier(0.785, 0.135, 0.15, 0.86); -moz-transition: all 0.4s cubic-bezier(0.785, 0.135, 0.15, 0.86); transition: all 0.4s cubic-bezier(0.785, 0.135, 0.15, 0.86); transition-duration: 0.6s; } .tp-offcanvas-top { margin-bottom: 90px; } .tp-offcanvas-close-btn button { color: black; } .tp-offcanvas-close-btn button:hover { opacity: 1; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); } .tp-offcanvas-menu ul li .tp-submenu .homemenu { position: relative; } .tp-offcanvas-menu ul li .tp-submenu .homemenu.comeing-soon .homemenu-thumb { position: relative; } .tp-offcanvas-menu ul li .tp-submenu .homemenu.comeing-soon .homemenu-thumb::before { position: absolute; z-index: 22; top: 0; left: 0; width: 100%; height: 100%; content: ""; backdrop-filter: blur(6px); background-color: rgba(0, 0, 0, 0.2); border-radius: 6px; } .tp-offcanvas-menu ul li .tp-submenu .homemenu:hover .homemenu-btn { opacity: 1; visibility: visible; top: 50%; } .tp-offcanvas-menu ul li .tp-submenu .homemenu-btn { position: absolute; top: 55%; transform: translateY(-50%); left: 0; right: 0; text-align: center; opacity: 0; visibility: hidden; transition: all 0.4s ease; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-offcanvas-menu ul li .tp-submenu .homemenu-btn .tp-btn-lg { padding: 12px 17px; font-size: 14px; } } .tp-offcanvas-social { margin-top: 30px; } .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-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-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; font-family: var(--tp-ff-inter); } .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-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-content { margin-bottom: 45px; } .tp-offcanvas-content p { font-size: 16px; font-weight: 400; line-height: 24px; color: #414144; font-family: var(--tp-ff-inter); } .tp-offcanvas-2-area { position: relative; } .tp-offcanvas-2-area.opened .animated-text > nav > ul > li a::after { visibility: visible; opacity: 1; bottom: 35px; } .tp-offcanvas-2-area.opened .animated-text > nav > ul > li a::before { width: 100%; } .tp-offcanvas-2-area.opened .animated-text > nav > ul > li a .tp-text-hover-effect-word .single-char span { -webkit-transform: translateZ(0.1px); -moz-transform: translateZ(0.1px); -ms-transform: translateZ(0.1px); -o-transform: translateZ(0.1px); transform: translateZ(0.1px); } .tp-offcanvas-2-area.opened .tp-offcanvas-2-left, .tp-offcanvas-2-area.opened .tp-offcanvas-2-right { visibility: visible; opacity: 1; } .tp-offcanvas-2-area.opened .tp-offcanvas-2-wrapper { visibility: visible; opacity: 1; } .tp-offcanvas-2-area.opened .tp-offcanvas-2-bg.is-left, .tp-offcanvas-2-area.opened .tp-offcanvas-2-bg.is-right { -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -o-transform: scale(1, 1); transform: scale(1, 1); transition-delay: 0s; } .tp-offcanvas-2-area.opened .tp-offcanvas-2-menu { transition-delay: 0s; } .tp-offcanvas-2-area.opened .tp-offcanvas-2-close { visibility: visible; opacity: 1; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); transition-delay: 0.9s; } .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: 574.98px) { .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: 574.98px) { .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 .tp-submenu li a:hover { background-color: initial; 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: 574.98px) { .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-area.offcanvas-2-white-bg .tp-offcanvas-2-bg.is-left { background: var(--tp-common-white); } .tp-offcanvas-2-area.offcanvas-2-white-bg .tp-offcanvas-2-logo .logo-1 { display: none; } .tp-offcanvas-2-area.offcanvas-2-white-bg .tp-offcanvas-menu > nav > ul > li.is-active > a { color: var(--tp-common-black); } .tp-offcanvas-2-area.offcanvas-2-white-bg .tp-offcanvas-menu > nav > ul > li.is-active .tp-menu-close i { color: var(--tp-common-black); } .tp-offcanvas-2-area.offcanvas-2-white-bg .tp-offcanvas-menu > nav > ul > li > a { color: #D5D5D5; } .tp-offcanvas-2-area.offcanvas-2-white-bg .tp-offcanvas-menu > nav > ul > li > ul > li > a { color: var(--tp-common-black); } .tp-offcanvas-2-area.offcanvas-2-white-bg .tp-offcanvas-menu .tp-submenu li a:hover { background-color: initial; color: var(--tp-common-black); } .tp-offcanvas-2-area.offcanvas-2-white-bg .tp-offcanvas-2-bg.is-right { background-color: #F6F6F9; } .tp-offcanvas-2-area.offcanvas-2-white-bg .tp-offcanvas-2-right-info-title { color: var(--tp-common-black); } .tp-offcanvas-2-area.offcanvas-2-white-bg .tp-offcanvas-2-right-info-item > a { color: var(--tp-common-black); } .tp-offcanvas-2-area.offcanvas-2-white-bg .tp-offcanvas-2-right-social a { color: var(--tp-common-black); border: 1px solid rgba(0, 0, 0, 0.1); } .tp-offcanvas-2-area.offcanvas-2-white-bg .tp-offcanvas-2-right-social a:hover { color: var(--tp-common-white); border-color: var(--tp-common-black); background-color: var(--tp-common-black); } .tp-offcanvas-2-area.offcanvas-2-white-bg .tp-offcanvas-2-close-btn .text { color: var(--tp-common-black); } .tp-offcanvas-2-area.offcanvas-2-white-bg .tp-offcanvas-2-close-btn { color: var(--tp-common-black); } .tp-offcanvas-2-area.offcanvas-2-white-bg .tp-offcanvas-2-close-btn .texts { color: var(--tp-common-black); } .tp-offcanvas-2-area.offcanvas-2-black-bg .tp-offcanvas-2-logo .logo-2 { display: none !important; } .tp-offcanvas-2-bg.left-box { position: fixed; top: 0; height: 100%; width: 60%; -webkit-transition: all 1s cubic-bezier(0.77, 0, 0.175, 1); -moz-transition: all 1s cubic-bezier(0.77, 0, 0.175, 1); -ms-transition: all 1s cubic-bezier(0.77, 0, 0.175, 1); -o-transition: all 1s cubic-bezier(0.77, 0, 0.175, 1); transition: all 1s cubic-bezier(0.77, 0, 0.175, 1); z-index: 1111; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-offcanvas-2-bg.left-box { width: 100%; } } .tp-offcanvas-2-bg.right-box { position: fixed; top: 0; height: 100%; width: 40%; -webkit-transition: all 1s cubic-bezier(0.77, 0, 0.175, 1); -moz-transition: all 1s cubic-bezier(0.77, 0, 0.175, 1); -ms-transition: all 1s cubic-bezier(0.77, 0, 0.175, 1); -o-transition: all 1s cubic-bezier(0.77, 0, 0.175, 1); transition: all 1s cubic-bezier(0.77, 0, 0.175, 1); z-index: 1111; } @media (max-width: 574.98px) { .tp-offcanvas-2-bg.right-box { width: 100%; } } .tp-offcanvas-2-bg.is-left { left: 0; -webkit-transform: scale(1, 0); -moz-transform: scale(1, 0); -ms-transform: scale(1, 0); -o-transform: scale(1, 0); transform: scale(1, 0); transform-origin: top center; background: var(--tp-common-black); transition-delay: 1s; } .tp-offcanvas-2-bg.is-right { right: 0; transform-origin: bottom center; -webkit-transform: scale(1, 0); -moz-transform: scale(1, 0); -ms-transform: scale(1, 0); -o-transform: scale(1, 0); transform: scale(1, 0); background-color: #1C1D20; transition-delay: 1s; } .tp-offcanvas-2-wrapper .left-box { position: fixed; top: 0; width: 60%; height: 100vh; z-index: 9999; overflow-y: scroll; pointer-events: auto; scrollbar-width: none; padding: 40px 80px 50px 80px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .tp-offcanvas-2-wrapper .left-box { padding: 40px 40px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-offcanvas-2-wrapper .left-box { width: 100%; padding: 40px 40px; } } .tp-offcanvas-2-wrapper .left-box .tp-offcanvas-menu { padding: 0px 125px; } @media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px) { .tp-offcanvas-2-wrapper .left-box .tp-offcanvas-menu { padding: 0 70px; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) { .tp-offcanvas-2-wrapper .left-box .tp-offcanvas-menu { padding: 0 20px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-offcanvas-2-wrapper .left-box .tp-offcanvas-menu { padding: 0; } } .tp-offcanvas-2-wrapper .right-box { position: fixed; top: 0; width: 40%; height: 100vh; z-index: 9999; padding: 50px 100px 50px 0; scrollbar-width: none; overscroll-behavior-y: contain; } @media only screen and (min-width: 768px) and (max-width: 991px) { .tp-offcanvas-2-wrapper .right-box { padding-right: 40px; } } .tp-offcanvas-2-wrapper .right-box::-webkit-scrollbar { display: none; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-offcanvas-2-wrapper .right-box { width: 100%; } } .tp-offcanvas-2-wrapper .tp-menu-close { top: 10px; height: 0; width: 0; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-offcanvas-2-wrapper .tp-menu-close { top: 0; right: 20px; } } .tp-offcanvas-2-wrapper .tp-menu-close i { font-size: 20px; color: #717172; } .tp-offcanvas-2-left { visibility: hidden; opacity: 0; left: 0; transition: 0.3s; transition-delay: 0.8s; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-offcanvas-2-left-wrap { margin-bottom: 80px; } } .tp-offcanvas-2-right { visibility: hidden; opacity: 0; right: 0; transition: 0.3s; transition-delay: 0.8s; } .tp-offcanvas-2-right-inner { height: 100%; padding: 100px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .tp-offcanvas-2-right-inner { padding-left: 50px; padding-right: 50px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tp-offcanvas-2-right-inner { padding: 50px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .tp-offcanvas-2-right-inner { padding: 30px; } } .tp-offcanvas-2-right-info-box { padding: 0 200px; } @media only screen and (min-width: 1700px) and (max-width: 1800px) { .tp-offcanvas-2-right-info-box { padding-right: 100px; } } @media only screen and (min-width: 1600px) and (max-width: 1700px), only screen and (min-width: 1400px) and (max-width: 1599px) { .tp-offcanvas-2-right-info-box { padding: 0 100px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .tp-offcanvas-2-right-info-box { padding: 0 100px; padding-right: 0; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tp-offcanvas-2-right-info-box { padding: 0 70px; padding-right: 0; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .tp-offcanvas-2-right-info-box { padding: 0 60px; padding-right: 0; margin-top: 130px; } } .tp-offcanvas-2-right-info-title { font-weight: 700; font-size: 30px; line-height: 1; margin-bottom: 35px; color: var(--tp-common-white); } .tp-offcanvas-2-right-info-item { margin-bottom: 30px; } .tp-offcanvas-2-right-info-item label { font-weight: 500; font-size: 15px; line-height: 1; display: block; color: #717172; font-family: var(--tp-ff-inter); } .tp-offcanvas-2-right-info-item > a { font-weight: 600; font-size: 16px; line-height: 1; letter-spacing: -0.01em; color: var(--tp-common-white); font-family: var(--tp-ff-inter); } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-offcanvas-2-right-info-item > a br { display: none; } } .tp-offcanvas-2-right-social a { height: 40px; width: 40px; transition: 0.3s; line-height: 35px; text-align: center; border-radius: 50%; display: inline-block; color: var(--tp-common-white); border: 1px solid rgba(255, 255, 255, 0.1); } .tp-offcanvas-2-right-social a:hover { color: var(--tp-common-black); border-color: var(--tp-common-white); background-color: var(--tp-common-white); } .tp-offcanvas-2-close { visibility: hidden; opacity: 0; transition: 0.3s; transition-delay: 0.5s; -webkit-transform: translateY(20px); -moz-transform: translateY(20px); -ms-transform: translateY(20px); -o-transform: translateY(20px); transform: translateY(20px); } @media only screen and (min-width: 768px) and (max-width: 991px) { .tp-offcanvas-2-close { padding-right: 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 .texts { 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 .texts span { transition: 0.3s; display: inline-block; -webkit-transform: translateX(130%); -moz-transform: translateX(130%); -ms-transform: translateX(130%); -o-transform: translateX(130%); transform: translateX(130%); } .tp-offcanvas-2-close-btn:hover .texts 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); } .tp-offcanvas-2-text { right: 0; bottom: 0; position: absolute; transform: rotate(-90deg) translateY(100%); } .tp-offcanvas-2-text span { font-size: 320px; font-weight: 700; color: rgba(33, 35, 41, 0.3); } .tp-offcanvas-2-logo { margin-bottom: 105px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-offcanvas-2-logo { margin-bottom: 0; } } .tp-offcanvas-2-logo .logo-2 { display: block !important; } .offcanvas-black-bg { background: #1C1D20; } .offcanvas-black-bg .tp-offcanvas-close-btn button { color: var(--tp-common-white); } .offcanvas-black-bg .tp-offcanvas-menu ul li > a { color: var(--tp-common-white); } .offcanvas-black-bg .tp-offcanvas-menu ul li.active > a { color: var(--tp-grey-2); } .offcanvas-black-bg .tp-offcanvas-menu .tp-submenu li a:hover { background-color: #2c2b2e; color: var(--tp-common-white); } .offcanvas-black-bg .tp-menu-close { border-color: var(--tp-border-3); color: var(--tp-common-white); } .offcanvas-black-bg .tp-megamenu-wrapper.megamenu-black-bg { backdrop-filter: initial; background: transparent; box-shadow: none; } .offcanvas-black-bg .tp-offcanvas-title.sm { color: var(--tp-common-white); } .offcanvas-black-bg .tp-offcanvas-contact ul li a { color: rgba(255, 255, 255, 0.8); } .offcanvas-black-bg .tp-offcanvas-contact ul li a:hover { color: var(--tp-common-white); } .offcanvas-black-bg .tp-offcanvas-contact ul li a::after { background-color: var(--tp-common-white); } .offcanvas-black-bg .tp-offcanvas-social ul li a { color: var(--tp-common-white); border: 1px solid rgba(255, 255, 255, 0.1); } .offcanvas-black-bg .tp-offcanvas-social ul li a:hover { color: var(--tp-common-black); border-color: var(--tp-common-white); background-color: var(--tp-common-white); } .offcanvas-black-bg .tp-offcanvas-title { color: var(--tp-common-white); } .offcanvas-black-bg .tp-offcanvas-content p { color: rgba(255, 255, 255, 0.8); } .offcanvas-black-bg .tp-offcanvas-menu ul li.active > .tp-menu-close { background-color: var(--tp-common-white); color: var(--tp-common-black); border-color: var(--tp-border-3); } .offcanvas-black-bg .tp-offcanvas-menu ul li.active > .tp-menu-close i { color: var(--tp-common-black); } /*----------------------------------------*/ /* 2.4 Breadcrumb /*----------------------------------------*/ .tp-breadcrumb-wrap { /* border-top: 1px solid #eee; */ padding: 18px 0px; background: var(--tp-theme-primary); position: relative; } .tp-breadcrumb-wrap > div{ position: relative; z-index: 5; } .tp-breadcrumb-list ul { display: flex; } .tp-breadcrumb-list ul li { font-family: var(--tp-ff-heading); font-weight: 500; font-size: 16px; color: var(--tp-common-black-3); list-style: none; } .tp-breadcrumb-list ul li span { width: 8px; height: 8px; display: inline-block; background: #000000; border-radius: 40px; margin: 0 10px; } .tp-breadcrumb-list ul li a { color: #000000; transition: background-size 0.3s linear; -webkit-transition: all 0.4s ease 0.3s 0s ease-out; -moz-transition: all 0.4s ease 0.3s 0s ease-out; -ms-transition: all 0.4s ease 0.3s 0s ease-out; -o-transition: all 0.4s ease 0.3s 0s ease-out; transition: all 0.4s ease 0.3s 0s ease-out; text-decoration: underline; } .tp-breadcrumb-list ul li a:hover { background-image: linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor); background-size: 0 1px, 100% 1px; background-position: 100% 100%, 0 100%; background-repeat: no-repeat; transition: background-size 0.3s linear; -webkit-transition: all 0.4s ease 0.3s 0s ease-out; -moz-transition: all 0.4s ease 0.3s 0s ease-out; -ms-transition: all 0.4s ease 0.3s 0s ease-out; -o-transition: all 0.4s ease 0.3s 0s ease-out; transition: all 0.4s ease 0.3s 0s ease-out; } .tp-breadcrumb-2-spacing { padding-top: 96px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-breadcrumb-2-spacing { padding-top: 80px; } } .tp-breadcrumb-2-list ul li { font-family: var(--tp-ff-dm); color: var(--tp-common-black-5); } .tp-breadcrumb-2-list ul li a { color: var(--tp-common-black-5); } .tp-breadcrumb-banner-list span svg { transform: translateY(6px); margin-right: 8px; } .tp-breadcrumb-banner-content { padding: 26px 0px 16px 0px; } .tp-breadcrumb-banner-spacing { padding-top: 540px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) { .tp-breadcrumb-banner-spacing { padding-top: 400px; } } @media (max-width: 574.98px) { .tp-breadcrumb-banner-spacing { padding-top: 250px; } } .tp-breadcrumb-banner-2-spacing { padding-top: 460px; padding-bottom: 42px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) { .tp-breadcrumb-banner-2-spacing { padding-top: 400px; } } @media (max-width: 574.98px) { .tp-breadcrumb-banner-2-spacing { padding-top: 250px; } } .tp-breadcrumb-3-border { border-top: 1px solid rgba(17, 17, 18, 0.1); } .tp-breadcrumb-3-white { border-top: 1px solid rgba(243, 241, 242, 0.1); } .tp-breadcrumb-3-white ul li { color: var(--tp-grey-5); } .tp-breadcrumb-3-white ul li a { color: var(--tp-grey-5); } .tp-breadcrumb-3-white ul li span { background: var(--tp-grey-5); } .tp-breadcrumb-4-spacing { padding-top: 225px; padding-bottom: 510px; } @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) { .tp-breadcrumb-4-spacing { padding-bottom: 310px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) { .tp-breadcrumb-4-spacing { padding-bottom: 210px; } } @media (max-width: 574.98px) { .tp-breadcrumb-4-spacing { padding-bottom: 170px; padding-top: 150px; } } .tp-breadcrumb-4-spacing .tp-breadcrumb-3-white { border-top: none; padding-top: 0; } .tp-breadcrumb-4-shape { padding-left: 255px; } /*----------------------------------------*/ /* 2.11 Section Title /*----------------------------------------*/ .tp-section-subtitle { border: 1px solid var(--tp-border-1); border-radius: 50px; padding: 6px 18px; display: inline-block; } .tp-section-subtitle .borders { width: 10px; height: 10px; background: #28d3ad; border-radius: 30px; margin-right: 8px; } .tp-section-subtitle-white { border: 1px solid rgba(255, 255, 255, 0.1); } .tp-section-subtitle-white .borders { background: var(--tp-common-white); } .tp-section-subtitle-cst .borders { background: var(--tp-common-black-1); } .tp-section-pp-subtitle { /* border: 1px solid rgba(255, 255, 255, 0.1); */ border-radius: 100px; background: #000; padding: 5px 24px; } .tp-section-pp-white-subtitle { border: 1px solid #eee; background: transparent; } .tp-section-cst-subtitle { border: none; padding: 0; } .tp-section-it-subtitle { border: 1px solid #E4EAE7; border-radius: 50px; padding: 2px 32px; } .tp-section-it-subtitle-white { border: 1px solid rgba(243, 241, 242, 0.1); } @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), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-section-it-para br { display: 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), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-section-ai-para br { display: 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), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-section-ai-title br { display: none; } } @media only screen and (min-width: 1400px) and (max-width: 1599px) { .tp-section-md-title { font-size: 55px; } } @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), only screen and (min-width: 576px) and (max-width: 767px) { .tp-section-md-title { font-size: 50px; } } @media (max-width: 574.98px) { .tp-section-md-title { font-size: 40px; } } @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), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-section-3-para br { display: none; } } /*----------------------------------------*/ /* 2.10 Search css start /*----------------------------------------*/ .tp-search-form-toggle { position: fixed; top: 0; left: 0; width: 100%; background-color: var(--tp-common-white); z-index: 100; padding-top: 70px; padding-bottom: 100px; opacity: 0; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); -webkit-transform: translateY(calc(-100% - 80px)); -ms-transform: translateY(calc(-100% - 80px)); transform: translateY(calc(-100% - 80px)); -webkit-transition: opacity 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out; transition: opacity 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out; transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out; transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out; -webkit-transition-delay: 0.5s; transition-delay: 0.5s; z-index: 9999; } .tp-search-form-toggle.active { opacity: 1; -webkit-transform: translateY(0%); -ms-transform: translateY(0%); transform: translateY(0%); -webkit-transition-delay: 0s; transition-delay: 0s; } .tp-search-form-toggle.active .tp-search-form-input { transform: translateY(0px); opacity: 1; transition-delay: 0.3s; } .tp-search-form-icon { position: absolute; top: 50%; right: 0; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); font-size: 22px; color: var(--tp-common-black); } .tp-search-form-input { position: relative; height: 52px; transform: translateY(-40px); transition: all 0.3s ease-in-out; transition-delay: 0.5s; opacity: 0; } .tp-search-form-input input { width: 100%; height: 100%; background-color: transparent; border: 0; outline: 0; font-size: 24px; font-weight: 400; color: var(--tp-common-black); border-bottom: 1px solid var(--tp-border-1); font-family: var(--tp-ff-inter); padding: 0; padding-right: 30px; } .tp-search-form-input input::-webkit-input-placeholder { /* Chrome/Opera/Safari */ font-size: 24px; color: var(--tp-grey-1); } .tp-search-form-input input::-moz-placeholder { /* Firefox 19+ */ font-size: 24px; color: var(--tp-grey-1); } .tp-search-form-input input:-moz-placeholder { /* Firefox 4-18 */ font-size: 24px; color: var(--tp-grey-1); } .tp-search-form-input input:-ms-input-placeholder { /* IE 10+ Edge*/ font-size: 24px; color: var(--tp-grey-1); } .tp-search-form-input input::placeholder { /* MODERN BROWSER */ font-size: 24px; color: var(--tp-grey-1); } .tp-search-form-input input ~ .tp-search-focus-border { position: absolute; bottom: 0; left: auto; right: 0; width: 0; height: 1px; background-color: var(--tp-common-black); transition: all 0.5s; } .tp-search-form-input input:focus { border-color: transparent; } .tp-search-form-input input:focus ~ .tp-search-focus-border { width: 100%; left: 0; right: auto; transition: all 0.8s; } .tp-search-close { color: var(--tp-common-black); font-size: 40px; transition: all 0.3s ease; } .tp-search-close:hover { color: var(--tp-grey-1); transform: rotate(180deg); } .tp-search-body-overlay { position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: rgba(24, 24, 24, 0.5); z-index: 99; cursor: -webkit-zoom-out; cursor: zoom-out; -webkit-transform: translateY(calc(-100% - 80px)); -ms-transform: translateY(calc(-100% - 80px)); transform: translateY(calc(-100% - 80px)); -webkit-transition: all 0.5s ease-in-out 0s; transition: all 0.5s ease-in-out 0s; -webkit-transition-delay: 0.3s; transition-delay: 0.3s; } .tp-search-body-overlay.active { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } .tp-search-dark { background-color: var(--tp-common-black); } .tp-search-dark .tp-search-form-input input { color: var(--tp-common-white); border-bottom: 1px solid var(--tp-border-3); } .tp-search-dark .tp-search-form-input input ~ .tp-search-focus-border { background-color: var(--tp-common-white); } .tp-search-dark .tp-search-close { color: var(--tp-common-white); } .tp-search-dark .tp-search-close:hover { color: var(--tp-grey-2); } .tp-search-dark .tp-search-form-icon { color: var(--tp-common-white); } /*----------------------------------------*/ /* 2.6 Magic Cursor css start /*----------------------------------------*/ 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: var(--tp-theme-secondary) !important; } .cursor-bg-red #ball .ball-view { color: var(--tp-common-white); } .cursor-white-bg #ball { background-color: var(--tp-common-white) !important; } .cursor-white-bg #ball .ball-view { color: var(--tp-common-black); } .cursor-black-bg #ball { background-color: var(--tp-common-black) !important; } .cursor-black-bg #ball .ball-view { color: var(--tp-common-white); } .cursor-bg-green #ball { background-color: var(--tp-theme-1) !important; } .cursor-bg-green #ball .ball-view { color: var(--tp-common-white); } /* Ball view ============= */ #ball .ball-view { position: absolute; opacity: 0; visibility: hidden; padding: 0 5px; font-size: 16px; font-weight: 600; line-height: 1.1; text-align: center; transform: scale(0); font-family: var(--tp-ff-dm); color: var(--tp-common-black); } /* Ball drag ============= */ #ball .ball-drag { position: absolute; display: block; width: 100%; padding: 0 5px; font-size: 16px; font-weight: 600; line-height: 1.2; text-align: center; transition: all 0.3s; font-family: var(--tp-ff-dm); color: var(--tp-common-black); } #ball .ball-drag::before, #ball .ball-drag::after { position: absolute; top: 50%; margin-top: -5px; font-size: 19px; height: 10px; line-height: 10px; font-weight: 900; display: inline-block; font-style: normal; font-variant: normal; text-rendering: auto; color: var(--tp-common-white); font-family: "Font Awesome 6 Pro"; -webkit-font-smoothing: antialiased; } #ball .ball-drag::before { content: "\f104"; /* Font Awesome */ left: 0; transform: translate3d(-30px, 0, 0); transition: all 0.25s; } #ball .ball-drag::after { content: "\f105"; /* Font Awesome */ right: 0; transform: translate3d(30px, 0, 0); transition: all 0.25s; } #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 ============== */ #ball.ball-close-enabled { opacity: 1 !important; } #ball .ball-close { position: absolute; padding: 0 5px; font-size: 14px; font-weight: 600; line-height: 1; text-align: center; color: var(--tp-common-black); } .tp-magnetic-wrap { display: flex; align-items: center; justify-content: center; } /*----------------------------------------*/ /* 3.1 Header Style /*----------------------------------------*/ .tp-header-search-btn { width: 48px; height: 48px; display: inline-block; color: var(--tp-common-black); border: 1px solid var(--tp-border-1); text-align: center; line-height: 48px; border-radius: 100%; line-height: 9px; } .tp-header-search-btn:hover { background: var(--tp-common-black); color: var(--tp-common-white); border-color: var(--tp-common-black); } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) { .tp-header-lg-spacing { padding: 15px 0px; } } @media (max-width: 574.98px) { .tp-header-lg-spacing { padding: 8px 0px; } } .tp-header-sidebar-btn span { height: 2px; width: 25px; display: block; margin: 6px auto; background: var(--tp-common-black); } .tp-header-sidebar-btn:hover span { animation: bar_anim 0.8s cubic-bezier(0.44, 1.1, 0.53, 0.99) 1 forwards; } .tp-header-sidebar-btn:hover span:nth-child(2) { animation-delay: 0.1s; } .tp-header-2-country { margin-left: 190px; } @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), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-header-2-country { margin-left: 70px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-header-2-country { display: none; } } .tp-header-2-menu-btn { border-radius: 100%; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.1); backdrop-filter: blur(104px); width: 48px; height: 48px; padding-right: 14px; } .tp-header-2-menu-btn span { background: var(--tp-theme-primary); width: 11px; margin: 4px 0 4px auto; border-radius: 10px; height: 2px; } .tp-header-2-menu-btn span:nth-child(2) { width: 20px; } .tp-header-2-spacing { padding: 18px 0px; } @media (max-width: 574.98px) { .tp-header-2-right .tp-btn-group { display: none; } } .tp-header-wd-wrap { border-bottom: 1px solid var(--tp-border-1); } @media (max-width: 574.98px) { .tp-header-sa-logo { margin-right: 0; } } .tp-header-sa-search-btn { border: 1px solid #00000024; } .tp-header-pp-menu-btn { border: 1px solid #ebebeb; background: var(--tp-common-white); } .tp-header-pp-menu-btn span { background: var(--tp-common-black); } .tp-header-pp-email { border: 1px solid var(--tp-border-1); border-radius: 100px; display: inline-block; padding: 4px 18px; margin-left: 125px; } .tp-header-pp-email:hover { color: var(--tp-grey-1); } .tp-header-cst-wrap { border-bottom: 1px solid rgba(16, 48, 42, 0.1); } .tp-header-cst-menu-btn { background: var(--tp-grey-5); } .tp-header-cst-menu-btn span { background: var(--tp-common-black-1); } .tp-header-it-bg { border-radius: 60px; border: 1px solid rgba(0, 0, 0, 0.05); background: #fcfffc; padding: 0px 40px 0px 40px; margin-top: 20px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-header-it-bg { margin-top: 0; padding: 10px 33px 10px 33px; } } @media (max-width: 574.98px) { .tp-header-it-bg { padding: 0; border: none; } .tp-header-it-bg .tp-menu-bar { padding-right: 0; width: auto; } } .tp-header-it-btn { padding: 12px 26px; box-shadow: inset 0 4px 16px 1px #0c211b; } .tp-header-it-btn:hover { background: var(--tp-common-green-2); box-shadow: inset 0 4px 16px 1px var(--tp-common-green-2); } .tp-header-it-menu-btn { background: none; padding: 0; width: auto; border: none; } .tp-header-it-menu-btn span { background: var(--tp-common-black-1); margin: 4px auto 4px 0; border-radius: 30px; } .tp-header-it-menu-btn span:first-child { width: 15px; } .tp-header-pb-contact ul { display: flex; align-items: center; } .tp-header-pb-contact ul li { font-family: var(--tp-ff-inter); letter-spacing: -0.04em; text-transform: capitalize; color: var(--tp-common-black-1); list-style: none; opacity: 0.8; } .tp-header-pb-contact ul li:first-child { margin-right: 40px; padding-right: 40px; position: relative; } .tp-header-pb-contact ul li:first-child::before { position: absolute; content: ""; right: 0; top: 0; background: var(--tp-common-black-1); opacity: 0.1; width: 1px; height: 27px; } .tp-header-pb-social ul { display: flex; align-items: center; justify-content: end; gap: 12px; } .tp-header-pb-social ul li { list-style: none; } .tp-header-pb-social ul li a { font-size: 20px; } .tp-header-pb-social ul li a:hover { color: var(--tp-theme-secondary); } .tp-header-pb-social ul li a svg { transform: translateY(-2px); } .tp-header-pb-top { padding: 15px 0px; } .tp-header-pb-logobg { position: absolute; top: 0; left: 0; width: 285px; height: 100%; background: var(--tp-theme-secondary); clip-path: polygon(0 0, 87% 0, 100% 100%, 0% 100%); z-index: -1; } @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), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-header-pb-logobg { clip-path: polygon(0 0, 82% 0, 100% 100%, 0% 100%); width: 220px; } } .tp-header-pb-bottom { border-top: 1px solid #E7E7E1; border-bottom: 1px solid #E7E7E1; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-header-pb-bottom { border-top: none; } } .tp-header-pb-helpline { position: relative; } .tp-header-pb-helpline::before { position: absolute; content: ""; height: 76px; width: 1px; background: #E7E7E1; top: -18px; left: 0; } .tp-header-pb-helpline-icon { border-radius: 100%; background: var(--tp-theme-secondary); box-shadow: -2px -4px 6px -5px rgba(255, 109, 0, 0.5); width: 40px; height: 40px; display: flex; justify-content: center; align-items: center; position: relative; } .tp-header-pb-helpline-icon::before { position: absolute; content: ""; width: 48px; height: 48px; background: var(--tp-theme-secondary); z-index: -1; opacity: 0.2; border-radius: 50%; } .tp-header-pb-cart-count { width: 22px; height: 22px; background: var(--tp-theme-secondary); display: flex; justify-content: center; align-items: center; border-radius: 50%; position: absolute; top: -7px; right: -12px; } .tp-header-pb-sidebar { width: 76px; height: 76px; background: var(--tp-theme-secondary); margin-right: -12px; } @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), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-header-pb-sidebar { margin-left: 20px; } } .tp-header-pb-sidebar span { background: var(--tp-grey-5); border-radius: 10px; height: 2px; width: 30px; margin: 5px auto 5px 24px; } .tp-header-pb-sidebar span:first-child { width: 22px; } .tp-header-pb-sidebar span:nth-child(3) { width: 16px; } @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), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-header-pb-logo { padding-left: 0; } } .tp-header-ai-bg { margin-top: 21px; border-radius: 20px; box-shadow: 0 4px 59px 2px rgba(0, 0, 0, 0.05); background: var(--tp-common-white); padding: 0px 32px 0px 32px; } @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), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-header-ai-bg { padding: 10px 20px 10px 20px; } } .tp-header-ai-menu-btn { background: var(--tp-grey-5); } .tp-header-ai-menu-btn span { background: var(--tp-common-black-6); } .tp-header-md-social ul { display: flex; align-items: center; gap: 16px; } .tp-header-md-social ul li { list-style: none; } .tp-header-md-social ul li a { font-size: 18px; color: var(--tp-common-white); } .tp-header-md-social ul li a:hover { color: var(--tp-theme-1); } .tp-header-md-social ul li a svg { transform: translateY(-3px); } .tp-header-md-contact ul { display: flex; justify-content: end; gap: 20px; } .tp-header-md-contact ul li { list-style: none; font-family: var(--tp-ff-dm); font-weight: 500; font-size: 14px; color: var(--tp-grey-5); display: flex; align-items: center; } .tp-header-md-contact ul li a { margin-left: 3px; } .tp-header-md-contact ul li a:hover { color: var(--tp-theme-1); } .tp-header-md-contact ul li svg { margin-right: 8px; } .tp-header-md-top { padding: 7px 0px; } .tp-header-md-search-btn { width: 40px; height: 40px; border: 2px solid rgba(17, 17, 18, 0.1); color: var(--tp-common-black-5); } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-header-md-main { padding: 15px 0px; } } .tp-header-vp-spacing { padding: 14px 0px; } .tp-header-slider-wrapper { padding: 18px 0; } .tp-header-slider-bar { transition: 0.3s; padding: 8px 17px; border-radius: 24px; display: inline-block; border: 1px solid rgba(255, 255, 255, 0.1); color: var(--tp-common-white); text-transform: uppercase; } .tp-header-slider-bar:hover { color: var(--tp-common-black); background: var(--tp-common-white); border-color: var(--tp-common-white); } .tp-header-slider-bar span svg { margin-right: 7px; } .tp-header-slider-info a { font-size: 15px; font-weight: 600; color: var(--tp-common-white); font-family: var(--tp-ff-inter); } .tp-header-slider-right.right-white .tp-header-slider-info a { color: var(--tp-common-black); } .tp-header-slider-right.right-white .tp-header-slider-bar { border: 1px solid rgba(0, 0, 0, 0.1); color: var(--tp-common-black); } .tp-header-slider-right.right-white .tp-header-slider-bar:hover { background: var(--tp-common-black); color: var(--tp-common-white); } .header-transparent { position: absolute; top: 0; left: 0; right: 0; z-index: 9; width: 100%; } .header-fixed { position: fixed; top: 0; left: 0; right: 0; z-index: 55; } /* HEADER CSS */ /*----------------------------------------*/ /* 4.1 Main menu css /*----------------------------------------*/ .tp-main-menu nav > ul > li { list-style: none; display: inline-block; margin: 0 15px; position: relative; } @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: 574.98px) { .tp-main-menu nav > ul > li { margin: 0 12px; } } .tp-main-menu nav > ul > li > a { font-family: var(--tp-ff-heading); font-weight: 700; font-size: 15px; text-transform: uppercase; color: var(--tp-common-black); display: inline-block; padding: 28px 0; } .tp-main-menu nav > ul > li > a > span { color: var(--tp-grey-2); display: inline-block; margin-left: 2px; transition: all 0.4s ease; } .tp-main-menu nav > ul > li .submenu { position: absolute; top: 100%; left: 0; width: 260px; z-index: 99; opacity: 0; padding: 12px 0; transition: 0.5s; text-align: start; visibility: hidden; border-radius: 14px; transform-origin: 0 0; transform: scale(1, 0); backdrop-filter: blur(40px); background: rgba(38, 37, 40, 0.9); box-shadow: 0 20px 30px -8px rgba(19, 19, 22, 0.1); } .tp-main-menu nav > ul > li .submenu li { width: 100%; padding: 0 12px; border-radius: 8px; margin: 0; } .tp-main-menu nav > ul > li .submenu li a { position: relative; border-radius: 8px; font-weight: 500; font-size: 16px; line-height: 1; color: #bfbfc0; padding: 12px 18px; display: inline-block; letter-spacing: -0.01em; text-align: start; width: 100%; font-family: var(--tp-ff-inter); } @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) { .tp-main-menu nav > ul > li .submenu li a { font-size: 14px; } } .tp-main-menu nav > ul > li .submenu li .submenu { top: 0; left: 100%; } .tp-main-menu nav > ul > li .submenu li:hover > a { background-color: #2c2b2e; color: var(--tp-common-white); } .tp-main-menu nav ul li { position: relative; } .tp-main-menu nav ul li:hover > .submenu { visibility: visible; opacity: 1; transform: scale(1); } .tp-main-menu nav ul li:hover.has-dropdown > a > span { color: var(--tp-common-black); } .tp-main-menu-wd > nav > ul > li > a { /* font-family: var(--tp-ff-teko); */ font-weight: 500; /* font-size: 20px; */ } .tp-main-menu-cst > nav > ul > li > a { font-family: var(--tp-ff-dm); color: var(--tp-common-black-1); padding: 35px 0px; } .tp-main-menu-it > nav > ul > li > a { font-family: var(--tp-ff-inter); color: var(--tp-common-black-1); padding: 27px 0px; } @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), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-main-menu-pb { margin-left: 0; } } @media only screen and (min-width: 1400px) and (max-width: 1599px) { .tp-main-menu-pb > nav > ul > li { margin: 0 20px; } } @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), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-main-menu-pb > nav > ul > li { margin: 0 14px; } } .tp-main-menu-pb > nav > ul > li > a { font-family: var(--tp-ff-sora); color: var(--tp-common-black-1); padding: 25px 0px; } .tp-main-menu-ai > nav > ul > li { margin: 0; padding: 25px 0px; } .tp-main-menu-ai > nav > ul > li:hover > a { background: var(--tp-common-black-6); color: var(--tp-common-white); } .tp-main-menu-ai > nav > ul > li:hover.has-dropdown > a > span { color: var(--tp-common-white); } .tp-main-menu-ai > nav > ul > li > a { font-family: var(--tp-ff-dm); color: var(--tp-common-black-5); padding: 7px 25px; border-radius: 50px; } .tp-main-menu-ai > nav > ul > li > a > span { transition: all 0.4s ease; margin-left: 4px; transform: translateY(-1px); display: inline-block; color: var(--tp-common-black); } .tp-main-menu-md { margin-left: -23px; } .tp-main-menu-md > nav > ul > li { padding: 29px 0px; } .tp-main-menu-vp > nav > ul > li > a { font-family: var(--tp-ff-sora); letter-spacing: -0.02em; color: var(--tp-common-black-5); } .header-sticky { position: fixed; top: 0; left: 0; right: 0; opacity: 1; width: 100%; z-index: 10; visibility: visible; background: rgba(255, 255, 255, 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-black-bg { background: rgba(38, 37, 40, 0.9); } .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-ai-wrap { background: none; box-shadow: none; } .header-sticky.tp-header-ai-wrap .tp-header-ai-bg { position: relative; background: rgba(255, 255, 255, 0.9); border-radius: 20px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .header-sticky.tp-header-ai-wrap .tp-header-ai-bg { margin-top: 5px; } } .header-sticky.tp-header-ai-wrap .tp-header-ai-bg::after { position: absolute; content: ""; top: 0; left: 0; width: 100%; height: 100%; backdrop-filter: blur(40px); z-index: -1; border-radius: 20px; } .header-sticky.tp-header-vp-spacing { padding: 0; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .header-sticky.tp-header-vp-spacing { padding: 15px 0px; } } .header-sticky .tp-btn-vp-group .tp-btn-2 { background: #fff; } .header-sticky .tp-btn-vp-group:hover > *:nth-child(2) { background: var(--tp-common-black-5); color: var(--tp-common-white); } .header-sticky .tp-main-menu-cst > nav > ul > li > a { padding: 21px 0px; } .header-sticky.tp-header-cst-wrap { border-bottom: none; } .header-sticky .tp-header-it-bg { border-radius: 0; border: none; background: none; padding: 0; margin-top: 0; } .header-sticky .tp-main-menu-it > nav > ul > li > a { padding: 21px 0px; } .header-sticky .tp-header-pb-top { display: none !important; } .header-sticky .tp-header-pb-bottom { border-top: none; border-bottom: none; } .header-sticky .tp-header-md-top { display: none !important; } .header-sticky .tp-main-menu-md > nav > ul > li { padding: 15px 0px; } .tp-header-dropdown nav ul li { list-style: none; } .tp-header-dropdown nav ul li:hover > .tp-megamenu-wrapper { visibility: visible; opacity: 1; transition-duration: 0.2s; -webkit-transform: perspective(300px) rotateX(0deg); -moz-transform: perspective(300px) rotateX(0deg); -ms-transform: perspective(300px) rotateX(0deg); -o-transform: perspective(300px) rotateX(0deg); transform: perspective(300px) rotateX(0deg); } .sticky-white-bg .tp-megamenu-list ul li a span { font-weight: 700; } .sticky-white-bg .tp-megamenu-list ul li a span.new { color: #b64ade; background: rgba(182, 74, 222, 0.08); } .sticky-white-bg .tp-megamenu-list ul li a span.pop { color: #0db50e; background-color: rgba(13, 181, 14, 0.08); } .tp-megamenu-wrapper { position: absolute; transition: 0.3s; opacity: 0; visibility: hidden; padding-top: 45px; top: 100%; left: 0; right: 0; max-width: 1760px; margin: 0 auto; overflow: hidden; border-radius: 14px; transform-origin: top; transition-duration: 0.1s; -webkit-transform: perspective(300px) rotateX(-18deg); -moz-transform: perspective(300px) rotateX(-18deg); -ms-transform: perspective(300px) rotateX(-18deg); -o-transform: perspective(300px) rotateX(-18deg); transform: perspective(300px) rotateX(-18deg); } @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) { .tp-megamenu-wrapper { max-width: calc(100% - 40px); } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-megamenu-wrapper { padding-top: 25px; } } .tp-megamenu-wrapper.megamenu-black-bg { backdrop-filter: blur(40px); background: rgba(38, 37, 40, 0.9); box-shadow: 0 20px 30px -8px rgba(19, 19, 22, 0.1); } .tp-megamenu-wrapper.megamenu-white-bg { backdrop-filter: blur(40px); background: rgba(255, 255, 255, 0.9); box-shadow: 0 2px 6px 0 rgba(19, 19, 22, 0.12); } .tp-megamenu-wrapper.megamenu-white-bg .tp-megamenu-title { color: #111013; border-bottom: 1px solid #F3F3F6; } .tp-megamenu-wrapper.megamenu-white-bg .tp-megamenu-list ul::after { background-color: #F3F3F6; } .tp-megamenu-wrapper.megamenu-white-bg .tp-megamenu-list ul li a { color: #636368; } .tp-megamenu-wrapper.megamenu-white-bg .tp-megamenu-list ul li a:hover { background-color: #f8f8fb; color: var(--tp-common-black); } .tp-megamenu-title { font-weight: 600; font-size: 13px; line-height: 1; margin-bottom: 0; padding-left: 40px; padding-bottom: 25px; text-align: start; text-transform: uppercase; color: var(--tp-common-white); border-bottom: 1px solid rgba(255, 255, 255, 0.06); font-family: var(--tp-ff-inter); } @media only screen and (min-width: 1400px) and (max-width: 1599px) { .tp-megamenu-title { padding-left: 23px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .tp-megamenu-title { padding-left: 20px; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-megamenu-title { padding-left: 20px; } } .tp-megamenu-list { height: 100%; } .tp-megamenu-list ul { position: relative; height: 100%; padding-top: 18px; padding-bottom: 50px; } .tp-megamenu-list ul::after { position: absolute; content: ""; top: 0; left: 0; width: 1px; height: 100%; background-color: rgba(255, 255, 255, 0.06); } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-megamenu-list ul::after { display: none; } } .tp-megamenu-list ul li { padding: 0px 20px; } @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) { .tp-megamenu-list ul li { padding: 0px 10px; } } .tp-megamenu-list ul li:not(:last-child) { margin-bottom: 10px; } .tp-megamenu-list ul li a { position: relative; width: 100%; font-weight: 600; font-size: 16px; line-height: 1; color: #bfbfc0; padding: 12px 18px; border-radius: 8px; display: inline-block; letter-spacing: -0.01em; text-align: start; font-family: var(--tp-ff-inter); } @media only screen and (min-width: 1700px) and (max-width: 1800px), only screen and (min-width: 1600px) and (max-width: 1700px) { .tp-megamenu-list ul li a { font-size: 14px; } } @media only screen and (min-width: 1400px) and (max-width: 1599px) { .tp-megamenu-list ul li a { font-size: 14px; padding: 12px 12px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .tp-megamenu-list ul li a { font-size: 14px; padding: 12px 8px; } } .tp-megamenu-list ul li a span { font-size: 13px; line-height: 1; font-weight: 800; padding: 6px 8px; border-radius: 20px; display: inline-block; margin-left: 3px; text-transform: capitalize; letter-spacing: 0.7px; font-family: var(--tp-ff-inter); } @media only screen and (min-width: 1400px) and (max-width: 1599px) { .tp-megamenu-list ul li a span { font-size: 8px; padding: 5px 6px; } } @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), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-megamenu-list ul li a span { display: none; } } .tp-megamenu-list ul li a span.hot { color: #FF535B; background-color: rgba(255, 83, 91, 0.08); } .tp-megamenu-list ul li a span.new { color: #fff669; background-color: rgba(255, 246, 105, 0.08); } .tp-megamenu-list ul li a span.pop { color: #19e41a; background-color: rgba(25, 228, 26, 0.08); } .tp-megamenu-list ul li a:hover { background-color: #2c2b2e; color: var(--tp-common-white); } .tp-megamenu-thumb { height: 100%; position: absolute; top: 0; right: 0; width: 17%; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-megamenu-thumb { display: none; } } .tp-megamenu-thumb img { height: 100%; object-fit: cover; width: 100%; overflow: hidden; } .dropdown-white-bg nav ul li .tp-submenu { background: rgba(255, 255, 255, 0.9); } .dropdown-white-bg nav ul li .tp-submenu li a { color: #636368; } .dropdown-white-bg nav ul li .tp-submenu li:hover > a { background-color: #F8F8FB; color: var(--tp-common-black); } .dropdown-white-bg nav ul li .tp-submenu li.menu-item-has-children > a::after { color: #636368; } .dropdown-white-bg nav ul li .tp-submenu li.menu-item-has-children:hover > a::after { color: var(--tp-common-black); } /*----------------------------------------*/ /* 4.2 Mobilemenu css /*----------------------------------------*/ .tp-offcanvas-menu { margin-bottom: 40px; } .tp-offcanvas-menu ul { list-style: none; } .tp-offcanvas-menu ul li { position: relative !important; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-offcanvas-menu ul li.has-dropdown span { display: none; } } .tp-offcanvas-menu ul li > a { padding: 8px 0; display: block; font-size: 18px; font-weight: 500; font-family: var(--tp-ff-inter); } .tp-offcanvas-menu ul li.active > a { color: var(--tp-common-black); } .tp-offcanvas-menu ul li.active > .tp-menu-close { background-color: var(--tp-common-black); color: var(--tp-common-white); border-color: var(--tp-common-black); } .tp-offcanvas-menu ul li.active > .tp-menu-close i { -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); color: var(--tp-common-white); } .tp-offcanvas-menu ul li .tp-submenu { display: none; } .tp-offcanvas-menu ul li .tp-submenu.submenu { padding-left: 20px; } .tp-offcanvas-menu .tp-megamenu-wrapper.megamenu-white-bg { backdrop-filter: none; background: transparent; box-shadow: none; } .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-offcanvas-menu .tp-megamenu-list ul li { padding: 0; } .tp-offcanvas-menu .tp-megamenu-list ul li a { padding: 8px 20px; font-size: 17px; } .tp-offcanvas-menu .tp-submenu li a { padding: 8px 20px; border-radius: 10px; font-size: 17px; } .tp-offcanvas-menu .tp-submenu li a:hover { background-color: #f8f8fb; color: var(--tp-common-black); } .tp-menu-close { position: absolute; right: 0; top: 6px; height: 30px; width: 30px; font-size: 12px; line-height: 29px; text-align: center; border: 1px solid rgba(1, 15, 28, 0.12); } .tp-menu-close i { transition: all 0.3s; } /*----------------------------------------*/ /* 5.2 Postbox css /*----------------------------------------*/ .tp-postbox-title { font-size: 35px; line-height: 129%; } @media (max-width: 574.98px) { .tp-postbox-title { font-size: 25px; } } .tp-postbox-text { font-size: 18px; line-height: 144%; color: var(--tp-grey-1); } .tp-postbox-slider-arrow-wrap button { height: 50px; width: 50px; line-height: 50px; text-align: center; font-size: 18px; border-radius: 50%; color: var(--tp-common-white); border: 1px solid var(--tp-common-white); transition: 0.3s; } .tp-postbox-slider-arrow-wrap button:hover { background-color: var(--tp-common-white); color: var(--tp-common-black); } .tp-postbox-slider-arrow-wrap .tp-postbox-arrow-prev { position: absolute; top: 50%; transform: translateY(-50%); left: 30px; z-index: 9; } .tp-postbox-slider-arrow-wrap .tp-postbox-arrow-next { position: absolute; top: 50%; transform: translateY(-50%); right: 30px; z-index: 9; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .tp-postbox-wrapper { margin-right: 40px; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-postbox-wrapper { margin-right: 0; } } .tp-postbox-video-btn { position: absolute; top: 50%; transform: translateY(-50%); left: 0; right: 0; margin: 0 auto; } .tp-postbox-details-form { background: var(--tp-common-white-2); padding: 55px 50px 60px 50px; } @media (max-width: 574.98px) { .tp-postbox-details-form { padding: 25px 20px 20px 20px; } } .tp-postbox-details-input .tp-input, .tp-postbox-details-input .tp-textarea, .tp-postbox-details-input .tp-select { width: 100%; height: 56px; font-family: var(--tp-ff-p); font-weight: 400; font-size: 16px; color: var(--tp-common-black); border-radius: 0; background: var(--tp-common-white); } .tp-postbox-details-input .tp-input::placeholder, .tp-postbox-details-input .tp-textarea::placeholder, .tp-postbox-details-input .tp-select::placeholder { color: #999; font-weight: 400; font-size: 16px; } .tp-postbox-details-input .tp-input:focus, .tp-postbox-details-input .tp-textarea:focus, .tp-postbox-details-input .tp-select:focus { background: transparent; border-color: var(--tp-common-black); } .tp-postbox-details-input .tp-textarea { height: 121px; } .tp-postbox-details-remember { display: flex; } .tp-postbox-details-remember label { font-family: var(--tp-ff-p); font-weight: 300; font-size: 16px; color: var(--tp-grey-1); cursor: pointer; } .tp-postbox-details-remember .tp-checkbox { margin: 0; appearance: none; -moz-appearance: none; display: block; width: 18px; height: 18px; outline: none; flex: 0 0 auto; background: var(--tp-common-white); -webkit-transform: translateY(-2.5px); -moz-transform: translateY(-2.5px); -ms-transform: translateY(-2.5px); -o-transform: translateY(-2.5px); transform: translateY(-2.5px); padding: 0; margin-right: 10px; transform: translateY(4px); border-radius: 0; } .tp-postbox-details-remember .tp-checkbox:checked { position: relative; background-color: var(--tp-theme-primary); border-color: transparent; } .tp-postbox-details-remember .tp-checkbox:checked::after { box-sizing: border-box; position: absolute; content: "\f00c"; font-weight: 700; font-family: var(--tp-ff-fontawesome); font-size: 14px; color: var(--tp-common-black); top: 49%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .tp-postbox-details-remember .tp-checkbox:hover { cursor: pointer; } .tp-postbox-2-wrapper .tp-service-details-content ul li b { font-family: var(--tp-ff-dm); } .tp-postbox-2-wrapper .tp-service-details-content ul li p { font-weight: 400; font-family: var(--tp-ff-dm); } .tp-postbox-2-wrapper .tp-service-details-content ul li { margin-bottom: 22px; } .tp-postbox-2-wrapper .tp-blog-details-tag ul li a { font-family: var(--tp-ff-dm); color: var(--tp-common-black); } .tp-postbox-2-wrapper .postbox__comment-name h5 { font-family: var(--tp-ff-dm); } .tp-postbox-2-wrapper .postbox__comment-text p { color: var(--tp-common-black-5); opacity: 0.8; font-family: var(--tp-ff-dm); } .tp-postbox-2-wrapper .postbox__comment-name span { color: var(--tp-common-black-5); font-family: var(--tp-ff-dm); } .tp-postbox-2-wrapper .postbox__comment-reply a { font-family: var(--tp-ff-dm); color: var(--tp-common-black-5); } .tp-postbox-2-wrapper .tp-postbox-details-input .tp-input, .tp-postbox-2-wrapper .tp-postbox-details-input .tp-textarea, .tp-postbox-2-wrapper .tp-postbox-details-input .tp-select { font-family: var(--tp-ff-dm); } .tp-postbox-2-wrapper .tp-postbox-details-input .tp-input::-webkit-input-placeholder, .tp-postbox-2-wrapper .tp-postbox-details-input .tp-textarea::-webkit-input-placeholder, .tp-postbox-2-wrapper .tp-postbox-details-input .tp-select::-webkit-input-placeholder { /* Chrome/Opera/Safari */ font-family: var(--tp-ff-dm); } .tp-postbox-2-wrapper .tp-postbox-details-input .tp-input::-moz-placeholder, .tp-postbox-2-wrapper .tp-postbox-details-input .tp-textarea::-moz-placeholder, .tp-postbox-2-wrapper .tp-postbox-details-input .tp-select::-moz-placeholder { /* Firefox 19+ */ font-family: var(--tp-ff-dm); } .tp-postbox-2-wrapper .tp-postbox-details-input .tp-input:-moz-placeholder, .tp-postbox-2-wrapper .tp-postbox-details-input .tp-textarea:-moz-placeholder, .tp-postbox-2-wrapper .tp-postbox-details-input .tp-select:-moz-placeholder { /* Firefox 4-18 */ font-family: var(--tp-ff-dm); } .tp-postbox-2-wrapper .tp-postbox-details-input .tp-input:-ms-input-placeholder, .tp-postbox-2-wrapper .tp-postbox-details-input .tp-textarea:-ms-input-placeholder, .tp-postbox-2-wrapper .tp-postbox-details-input .tp-select:-ms-input-placeholder { /* IE 10+ Edge*/ font-family: var(--tp-ff-dm); } .tp-postbox-2-wrapper .tp-postbox-details-input .tp-input::placeholder, .tp-postbox-2-wrapper .tp-postbox-details-input .tp-textarea::placeholder, .tp-postbox-2-wrapper .tp-postbox-details-input .tp-select::placeholder { /* MODERN BROWSER */ font-family: var(--tp-ff-dm); } .tp-postbox-2-wrapper .tp-postbox-details-remember label { font-family: var(--tp-ff-dm); } @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), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-postbox-2-wrapper .tp-blog-details-content { margin-left: 0; margin-right: 0; } } @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), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-postbox-2-wrapper .tp-blog-comment-form { margin-left: 0; margin-right: 0; } } .postbox__comment ul li { margin-bottom: 45px; list-style: none; } .postbox__comment ul li.children { margin-left: 65px; } @media (max-width: 574.98px) { .postbox__comment ul li.children { margin-left: 0; } } .postbox__comment-box { padding-top: 20px; } @media (max-width: 574.98px) { .postbox__comment-box { flex-wrap: wrap; } } .postbox__comment-info { flex: 0 0 auto; } @media (max-width: 574.98px) { .postbox__comment-avater { margin-right: 0; } } .postbox__comment-avater img { width: 90px; height: 90px; border-radius: 50%; } @media (max-width: 574.98px) { .postbox__comment-avater img { margin-bottom: 30px; } } .postbox__comment-name { margin-bottom: 17px; } .postbox__comment-name h5 { font-size: 20px; font-weight: 700; line-height: 1; letter-spacing: -0.4px; color: var(--tp-common-black); margin-bottom: 0; } .postbox__comment-name span { color: #414144; font-size: 17px; font-weight: 400; line-height: 1; } .postbox__comment-text p { color: #5D5D63; font-size: 17px; line-height: 26px; } .postbox__comment-reply a { color: #19191A; font-size: 15px; font-weight: 400; line-height: 1; padding: 5px 20px; border: 1px solid #E0E2E3; border-radius: 30px; } .postbox__comment-reply a:hover { background-color: var(--tp-common-black); color: var(--tp-common-white); border-color: var(--tp-common-black); } /*----------------------------------------*/ /* 5.3 Sidebar css /*----------------------------------------*/ .tp-sidebar-search-input { position: relative; } .tp-sidebar-search-input input { width: 100%; height: 60px; font-family: var(--tp-ff-heading); line-height: 70px; padding: 0 25px; outline: none; font-size: 16px; border: none; padding-right: 50px; background: var(--tp-common-white-2); color: var(--tp-common-black); border: 1px solid transparent; border-radius: 0; } .tp-sidebar-search-input input::-webkit-input-placeholder { /* Chrome/Opera/Safari */ color: var(--tp-grey-1); font-size: 16px; font-weight: 400; border-color: #D9D9D9; } .tp-sidebar-search-input input::-moz-placeholder { /* Firefox 19+ */ color: var(--tp-grey-1); font-size: 16px; font-weight: 400; border-color: #D9D9D9; } .tp-sidebar-search-input input:-moz-placeholder { /* Firefox 4-18 */ color: var(--tp-grey-1); font-size: 16px; font-weight: 400; border-color: #D9D9D9; } .tp-sidebar-search-input input:-ms-input-placeholder { /* IE 10+ Edge*/ color: var(--tp-grey-1); font-size: 16px; font-weight: 400; border-color: #D9D9D9; } .tp-sidebar-search-input input::placeholder { /* MODERN BROWSER */ color: var(--tp-grey-1); font-size: 16px; font-weight: 400; border-color: #D9D9D9; } .tp-sidebar-search-input input:focus { background: transparent; } .tp-sidebar-search-input button { position: absolute; top: 0; right: 25px; height: 100%; line-height: 60px; color: var(--tp-common-black); } .tp-sidebar-widget { border: 1px solid var(--tp-border-1); padding: 45px 30px 5px 30px; } .tp-sidebar-widget-title { font-family: var(--tp-ff-heading); font-weight: 700; font-size: 25px; color: var(--tp-common-black); } .tp-sidebar-widget-content ul li { list-style: none; margin-bottom: 17px; } .tp-sidebar-widget-content ul li a { font-family: var(--tp-ff-heading); font-weight: 500; font-size: 18px; color: var(--tp-grey-1); display: flex; justify-content: space-between; } .tp-sidebar-widget-content ul li a:hover { color: var(--tp-common-black); } .tp-sidebar-widget-content ul li a span { display: inline-block; margin-left: 10px; } .tp-sidebar-rc-post-tag { font-family: var(--tp-ff-p); font-weight: 400; font-size: 14px; color: var(--tp-grey-1); border: 1px solid var(--tp-border-1); border-radius: 100px; display: inline-block; padding: 5px 16px; line-height: 1; } .tp-sidebar-rc-post-tag:hover { background: var(--tp-common-black); color: var(--tp-common-white); border-color: var(--tp-common-black); } .tp-sidebar-rc-post-title { font-size: 18px; line-height: 111%; color: var(--tp-common-black); } .tp-sidebar-rc-post-dates { font-weight: 400; font-size: 14px; color: var(--tp-grey-1); } .tp-sidebar-rc-tag ul { display: flex; gap: 15px; flex-wrap: wrap; } @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), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-sidebar-rc-tag ul { gap: 10px; } } .tp-sidebar-rc-tag ul li { list-style: none; } .tp-sidebar-rc-tag ul li a { font-family: var(--tp-ff-heading); font-weight: 500; font-size: 16px; color: var(--tp-grey-1); border-radius: 100px; background: var(--tp-common-white-2); line-height: 1; padding: 2px 14px; } @media only screen and (min-width: 1200px) and (max-width: 1399px), (max-width: 574.98px) { .tp-sidebar-rc-tag ul li a { padding: 2px 6px; } } .tp-sidebar-rc-tag ul li a:hover { background: var(--tp-theme-primary); color: var(--tp-common-black); } .tp-sidebar-details-wrap { background: var(--tp-common-white-2); } .tp-sidebar-banner { padding: 50px 30px 50px 30px; } /*----------------------------------------*/ /* 6.1 Footer Style /*----------------------------------------*/ /*----------------------------------------*/ /* 5.4 footer css /*----------------------------------------*/ .tp-footer-top-title { font-size: 145px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) { .tp-footer-top-title { font-size: 120px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .tp-footer-top-title { font-size: 80px; } } @media (max-width: 574.98px) { .tp-footer-top-title { font-size: 60px; } } .tp-footer-social ul { display: flex; flex-wrap: wrap; } .tp-footer-social ul li { margin-right: 20px; margin-bottom: 10px; list-style: none; } .tp-footer-social ul li a { font-family: var(--tp-ff-heading); font-weight: 500; font-size: 16px; text-transform: uppercase; color: var(--tp-grey-2); background: #1a1a1ad4; display: inline-block; padding: 5px 20px; border-radius: 100px; } .tp-footer-social ul li a:hover { color: var(--tp-theme-primary); } .tp-footer-social ul li a i { margin-right: 5px; } .tp-footer-btn a { background: #1a1a1ad4; border-color: #0d0d0d; color: var(--tp-common-white); } .tp-footer-btn a:hover { color: var(--tp-common-black); } .tp-footer-btn .tp-btn-circle-dot { background: var(--tp-theme-primary); } .tp-footer-main { border-top: 1px solid rgba(153, 153, 153, 0.1); } .tp-footer-widget-form .tp-input { background: #1a1a1ad4; border-radius: 10px; width: 100%; height: 70px; border: 1px solid transparent; font-weight: 500; font-size: 16px; color: var(--tp-common-white); padding: 5px 30px; padding-right: 80px; } .tp-footer-widget-form .tp-input::placeholder { font-weight: 500; font-size: 16px; color: var(--tp-grey-2); } .tp-footer-widget-form .tp-button { position: absolute; right: 30px; top: 50%; transform: translateY(-50%); } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-footer-widget p br { display: none; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-footer-widget a br { display: none; } } .tp-footer-copyright p span { transform: translateY(-2px); display: inline-block; } .tp-footer-bottom { border-top: 1px solid rgba(153, 153, 153, 0.1); padding: 22px 0px 20px 0px; } .tp-footer-bottom-white { border-top: 1px solid var(--tp-border-1); } .tp-footer-bottom-white .tp-footer-menu ul li a { color: var(--tp-grey-1); } .tp-footer-bottom-white .tp-footer-menu ul li a:hover { color: var(--tp-common-black); } .tp-footer-shape { position: absolute; bottom: 0; left: 0; z-index: -1; } .tp-footer-menu ul { display: flex; align-items: center; justify-content: end; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-footer-menu ul { justify-content: flex-start; margin-top: 10px; } } .tp-footer-menu ul li { margin-left: 50px; margin-bottom: 5px; list-style: none; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-footer-menu ul li { margin-left: 0; margin-right: 30px; } } .tp-footer-menu ul li a { font-weight: 500; font-size: 15px; text-transform: uppercase; color: var(--tp-common-white); } .tp-footer-menu ul li a:hover { color: var(--tp-theme-primary); } .tp-footer-2-btn a { font-size: 15px; font-family: var(--tp-ff-p); width: 200px; height: 200px; padding-top: 60px; } .tp-footer-2-social ul li a:hover { color: var(--tp-common-yellow); } .tp-footer-wd-desk { border: 1px solid rgba(153, 153, 153, 0.6); border-radius: 10px; padding: 14px 20px; display: inline-block; display: flex; align-items: center; } .tp-footer-wd-desk span { border-radius: 1000px; width: 40px; height: 40px; background: var(--tp-common-blue); border-radius: 50px; text-align: center; line-height: 37px; display: inline-block; margin-right: 10px; flex: 0 0 auto; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-footer-wd-widget { margin-left: 0; } } .tp-footer-wd-widget ul li { list-style: none; margin-bottom: 15px; } .tp-footer-wd-widget ul li span { font-weight: 500; font-size: 14px; color: var(--tp-common-black); background: var(--tp-theme-primary); display: inline-block; padding: 2px 8px; border-radius: 100px; line-height: 1; margin-left: 5px; } .tp-footer-wd-widget ul li a { font-weight: 400; font-size: 18px; color: var(--tp-grey-1); display: inline-block; background-image: linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor); background-size: 0 1px, 0 1px; background-position: 100% 100%, 0 100%; background-repeat: no-repeat; transition: background-size 0.3s linear; -webkit-transition: all 0.4s ease 0.3s 0s ease-out; -moz-transition: all 0.4s ease 0.3s 0s ease-out; -ms-transition: all 0.4s ease 0.3s 0s ease-out; -o-transition: all 0.4s ease 0.3s 0s ease-out; transition: all 0.4s ease 0.3s 0s ease-out; } .tp-footer-wd-widget ul li a:hover { background-image: linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor); background-size: 0 1px, 100% 1px; background-position: 100% 100%, 0 100%; background-repeat: no-repeat; transition: background-size 0.3s linear; -webkit-transition: all 0.4s ease 0.3s 0s ease-out; -moz-transition: all 0.4s ease 0.3s 0s ease-out; -ms-transition: all 0.4s ease 0.3s 0s ease-out; -o-transition: all 0.4s ease 0.3s 0s ease-out; transition: all 0.4s ease 0.3s 0s ease-out; } .tp-footer-wd-widget-form .tp-input { background: transparent; border: 1px solid rgba(153, 153, 153, 0.6); color: var(--tp-common-black); font-weight: 400; } .tp-footer-wd-widget-form .tp-input::placeholder { font-weight: 400; font-size: 16px; line-height: 162%; color: var(--tp-grey-2); } .tp-footer-wd-social a { width: 36px; height: 36px; display: inline-block; border: 1px solid rgba(153, 153, 153, 0.6); border-radius: 100px; text-align: center; line-height: 36px; color: var(--tp-grey-1); margin-right: 9px; flex: 0 0 auto; } .tp-footer-wd-social a:hover { color: var(--tp-common-black); background: var(--tp-theme-primary); border-color: var(--tp-theme-primary); } .tp-footer-wd-bottom { border-color: var(--tp-border-1); } .tp-footer-sa-widget ul li span { background: var(--tp-common-nights); color: var(--tp-common-white); } .tp-footer-sa-widget ul li a { color: var(--tp-grey-2); } .tp-footer-sa-widget ul li a:hover { color: var(--tp-common-white); } .tp-footer-sa-widget .tp-input { background: #0d0d0d; border: transparent; color: var(--tp-common-white); } .tp-footer-sa-widget .tp-footer-wd-social a { border: 1px solid rgba(255, 255, 255, 0.1); color: #525252; } .tp-footer-sa-widget .tp-footer-wd-social a:hover { background: var(--tp-common-nights); color: var(--tp-common-white); } .tp-footer-sa-widget .tp-footer-wd-desk { background: #0d0d0d; border-color: #0d0d0d; } .tp-footer-sa-widget .tp-footer-wd-desk:hover { color: var(--tp-grey-2); } .tp-footer-sa-bottom { border-color: rgba(153, 153, 153, 0.1); } .tp-footer-pp-social ul { justify-content: center; } @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), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-footer-pp-widget { margin-left: 0; } } .tp-footer-pp-widget ul li { list-style: none; } .tp-footer-pp-widget ul li a { font-weight: 500; font-size: 18px; color: var(--tp-grey-2); padding: 6px 0px; display: inline-block; } .tp-footer-pp-widget ul li a:hover { color: var(--tp-common-white); } .tp-footer-pp-link a { font-weight: 500; font-size: 25px; color: var(--tp-grey-2); background: #1a1a1ad4; border-radius: 100px; display: inline-block; padding: 15px 41px; display: inline-block; margin-bottom: 10px; } @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), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-footer-pp-link a { padding: 10px 20px; } } .tp-footer-pp-link a:hover { color: var(--tp-common-white); } .tp-footer-pp-shape { position: absolute; top: 0; right: 0; width: 20%; } @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), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-footer-pp-shape { width: 10%; height: 10%; } } .tp-footer-pp-shape-2 { position: absolute; top: 0; left: 0; width: 20%; } @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), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-footer-pp-shape-2 { width: 10%; height: 10%; } } .tp-footer-cst-dec { color: #C6CACA; } .tp-footer-cst-widget ul li a { font-family: var(--tp-ff-dm); color: #C6CACA; } .tp-footer-cst-widget ul li span { font-family: var(--tp-ff-dm); font-size: 12px; color: var(--tp-common-black-1); } .tp-footer-cst-widget .tp-footer-wd-desk span { background: var(--tp-common-green-2); } .tp-footer-cst-widget .tp-footer-wd-desk { border: 1px solid #27433E; padding: 9px 20px; padding-right: 38px; display: inline-block; } .tp-footer-cst-widget-form { margin-left: -30px; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-footer-cst-widget-form { margin-left: 0; } } .tp-footer-cst-widget-form .tp-input { height: 60px; border: 1px solid #27433E; font-family: var(--tp-ff-dm); color: var(--tp-grey-5); } .tp-footer-cst-widget-form .tp-input::placeholder { color: #C6CACA; font-family: var(--tp-ff-dm); } .tp-footer-cst-widget-form .tp-footer-wd-social a { width: 40px; height: 40px; border: 1px solid #27433E; line-height: 40px; color: var(--tp-grey-5); } .tp-footer-cst-widget-form .tp-footer-wd-social a:hover { color: var(--tp-common-black-1); background: var(--tp-common-green-2); border-color: var(--tp-common-green-2); } .tp-footer-cst-menu-wrap { border-top: 1px solid #27433E; border-bottom: 1px solid #27433E; padding: 36px 0px; } .tp-footer-cst-menu ul { display: flex; flex-wrap: wrap; justify-content: center; } @media (max-width: 574.98px) { .tp-footer-cst-menu ul { justify-content: flex-start; } } .tp-footer-cst-menu ul li { list-style: none; margin: 0 25px; padding: 5px 0px; } @media only screen and (min-width: 576px) and (max-width: 767px) { .tp-footer-cst-menu ul li { margin: 0 17px; } } @media (max-width: 574.98px) { .tp-footer-cst-menu ul li { margin-left: 0; } } .tp-footer-cst-menu ul li a { font-family: var(--tp-ff-dm); font-weight: 700; font-size: 15px; text-transform: uppercase; color: var(--tp-grey-5); display: inline-block; background-image: linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor); background-size: 0 1px, 0 1px; background-position: 100% 100%, 0 100%; background-repeat: no-repeat; transition: background-size 0.3s linear; -webkit-transition: all 0.4s ease 0.3s 0s ease-out; -moz-transition: all 0.4s ease 0.3s 0s ease-out; -ms-transition: all 0.4s ease 0.3s 0s ease-out; -o-transition: all 0.4s ease 0.3s 0s ease-out; transition: all 0.4s ease 0.3s 0s ease-out; } .tp-footer-cst-menu ul li a:hover { background-image: linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor); background-size: 0 1px, 100% 1px; background-position: 100% 100%, 0 100%; background-repeat: no-repeat; transition: background-size 0.3s linear; -webkit-transition: all 0.4s ease 0.3s 0s ease-out; -moz-transition: all 0.4s ease 0.3s 0s ease-out; -ms-transition: all 0.4s ease 0.3s 0s ease-out; -o-transition: all 0.4s ease 0.3s 0s ease-out; transition: all 0.4s ease 0.3s 0s ease-out; } .tp-footer-cst-bottom { padding-top: 26px; padding-bottom: 14px; } .tp-footer-cst-btp { width: 80px; height: 80px; display: flex; justify-content: center; align-items: center; background: var(--tp-common-green-2); border-radius: 50%; } .tp-footer-cst-btp:hover { transform: scale(1.1); } .tp-footer-cst-banner { padding: 110px 0 90px 0; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-footer-cst-banner { padding: 60px 0 50px 0; } } .tp-footer-cst-banner-shape { position: absolute; bottom: 5px; left: 0; width: 100%; z-index: -1; } .tp-footer-it-dec { opacity: 0.8; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .tp-footer-it-widget { margin-left: 40px; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-footer-it-widget { margin-left: 0; } } .tp-footer-it-widget ul li a { font-family: var(--tp-ff-inter); color: var(--tp-grey-5); opacity: 0.8; } .tp-footer-it-widget ul li a:hover { opacity: 1; } .tp-footer-it-widget ul li span { font-family: var(--tp-ff-inter); } .tp-footer-it-widget-form { width: 344px; margin-left: 0; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-footer-it-widget-form { width: 100%; } } .tp-footer-it-widget-form .tp-input { border: 1px solid rgba(243, 241, 242, 0.1); background: transparent; font-family: var(--tp-ff-inter); } .tp-footer-it-widget-form .tp-input::placeholder { font-family: var(--tp-ff-inter); opacity: 0.8; color: var(--tp-grey-5); } .tp-footer-it-copyright { color: rgba(243, 241, 242, 0.8); font-size: 11px; } .tp-footer-it-copyright a { color: #f3f1f2; } .tp-footer-it-bottom { border-top: 1px solid rgba(243, 241, 242, 0.1); } .tp-footer-it-bigtext { font-size: 600px; line-height: 0.68; color: #999; margin-bottom: -10px; margin-top: 25px; letter-spacing: 0; } @media only screen and (min-width: 1400px) and (max-width: 1599px) { .tp-footer-it-bigtext { font-size: 500px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .tp-footer-it-bigtext { font-size: 400px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tp-footer-it-bigtext { font-size: 375px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .tp-footer-it-bigtext { font-size: 275px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .tp-footer-it-bigtext { font-size: 200px; } } @media (max-width: 574.98px) { .tp-footer-it-bigtext { font-size: 100px; } } .tp-footer-pb-widget .tp-footer-wd-social a { color: var(--tp-common-white); margin-right: 7px; border-color: rgba(243, 241, 242, 0.1); width: 40px; height: 40px; line-height: 40px; } .tp-footer-pb-widget .tp-footer-wd-social a:hover { background: var(--tp-theme-secondary); border-color: var(--tp-theme-secondary); } @media only screen and (min-width: 1600px) and (max-width: 1700px), only screen and (min-width: 1400px) and (max-width: 1599px) { .tp-footer-pb-widget.ml-180 { margin-left: 100px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .tp-footer-pb-widget.ml-180 { margin-left: 50px; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-footer-pb-widget.ml-180 { margin-left: 0; } } @media only screen and (min-width: 1400px) and (max-width: 1599px) { .tp-footer-pb-widget.ml-85 { margin-left: 40px; } } @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), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-footer-pb-widget.ml-85 { margin-left: 0; } } @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), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-footer-pb-widget.ml-20 { margin-left: 0; } } .tp-footer-pb-bottom { border-top: 1px solid rgba(153, 153, 153, 0.1); padding: 18px 0px 3px 0px; } .tp-footer-pb-shape-wrapper { position: absolute; z-index: -2; height: 100%; left: 0; top: 0; } .tp-footer-pb-shape-wrapper .tp-techonolgy-capsule-item { width: auto; height: auto; background: transparent; border-radius: 0; padding: 0; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-footer-pb-shape-wrapper .tp-techonolgy-capsule-item { width: 150px; height: 150px; } } .tp-footer-pb-capsule-wrapper { z-index: 1; height: auto !important; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-footer-ai-widget a br { display: none; } } .tp-footer-ai-widget.widget-2 { margin-left: -30px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-footer-ai-widget.widget-2 { margin-left: 0; } } .tp-footer-ai-menu ul { column-count: 2; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-footer-ai-menu ul { column-count: 1; } } .tp-footer-ai-menu ul li { list-style: none; } .tp-footer-ai-menu ul li a { font-family: var(--tp-ff-dm); font-weight: 700; font-size: 15px; text-transform: uppercase; color: var(--tp-common-black-5); border-radius: 50px; padding: 7px 32px; display: inline-block; } .tp-footer-ai-menu ul li a:hover { background: var(--tp-common-black-5); color: var(--tp-common-white); } .tp-footer-ai-social { gap: 8px; } .tp-footer-ai-social a { color: var(--tp-common-black-5); border-color: rgba(17, 17, 18, 0.1); margin: 0; } .tp-footer-ai-social a:hover { background: var(--tp-common-angry); border-color: var(--tp-common-angry); } .tp-footer-ai-bigtitle { font-size: 422px; } @media only screen and (min-width: 1400px) and (max-width: 1599px) { .tp-footer-ai-bigtitle { font-size: 370px; } } @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), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-footer-ai-bigtitle { font-size: 330px; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-footer-ai-bigtitle { font-size: 267px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .tp-footer-ai-bigtitle { font-size: 200px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-footer-ai-bigtitle { font-size: 150px; } } @media (max-width: 574.98px) { .tp-footer-ai-bigtitle { font-size: 92px; } } .tp-footer-ai-copyright-border { border-top: 1px solid rgba(17, 17, 18, 0.1); padding: 18px 0px 0 0px; } .tp-footer-ai-copyright p span { transform: translateY(-1px); display: inline-block; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-footer-ai-title-wrap { padding-top: 0; padding-bottom: 40px; } } .tp-footer-md-rounded { border-radius: 35px 35px 0px 0px; } .tp-footer-md-apoinment { border-bottom: 1px solid rgba(243, 241, 242, 0.1); } .tp-footer-md-apoinment-btn svg { transform: translateY(-2px); } .tp-footer-md-apoinment-btn:hover { background: var(--tp-common-white); } .tp-footer-md-apoinment-form { backdrop-filter: blur(5px); box-shadow: 5px 6px 99px 5px rgba(16, 48, 42, 0.3); border-radius: 24px; background: radial-gradient(229.59% 96.04% at 36% 3.96%, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.15) 100%); padding: 60px 60px 60px 60px; } @media only screen and (min-width: 992px) and (max-width: 1199px), (max-width: 574.98px) { .tp-footer-md-apoinment-form { padding: 30px 30px 30px 30px; } } .tp-footer-md-apoinment-form .tp-remember-input input[type=checkbox], .tp-footer-md-apoinment-form .tp-remember-input input[type=radio] { display: none; } .tp-footer-md-apoinment-form .tp-remember-input input[type=checkbox]:checked ~ label::after, .tp-footer-md-apoinment-form .tp-remember-input input[type=radio]:checked ~ label::after { background-color: transparent; border-color: var(--tp-theme-1); } .tp-footer-md-apoinment-form .tp-remember-input input[type=checkbox]:checked ~ label::before, .tp-footer-md-apoinment-form .tp-remember-input input[type=radio]:checked ~ label::before { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } .tp-footer-md-apoinment-form .tp-remember { font-family: var(--tp-ff-dm); font-weight: 500; font-size: 16px; letter-spacing: -0.04em; color: var(--tp-grey-5); position: relative; padding-left: 30px; } .tp-footer-md-apoinment-form .tp-remember::after, .tp-footer-md-apoinment-form .tp-remember::before { position: absolute; content: ""; left: 0; top: 5px; width: 16px; height: 16px; background-color: transparent; border: 1px solid rgba(243, 241, 242, 0.1); border-radius: 50px; -webkit-transition: 0.2s 0.3s 0s ease-out; -moz-transition: 0.2s 0.3s 0s ease-out; -ms-transition: 0.2s 0.3s 0s ease-out; -o-transition: 0.2s 0.3s 0s ease-out; transition: 0.2s 0.3s 0s ease-out; } .tp-footer-md-apoinment-form .tp-remember::before { width: 10px; height: 10px; background-color: var(--tp-theme-1); left: 3px; top: 8px; right: 3px; bottom: 3px; -webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); transform: scale(0); } .tp-footer-md-apoinment-form .tp-remember:hover { cursor: pointer; } .tp-footer-md-apoinment-form .tp-input { background: transparent; border: 1px solid rgba(243, 241, 242, 0.1); border-radius: 8px; height: 54px; font-family: var(--tp-ff-dm); font-size: 18px; letter-spacing: -0.02em; padding: 20px; color: var(--tp-grey-5); } .tp-footer-md-apoinment-form .tp-input:focus { border-color: var(--tp-theme-1); } .tp-footer-md-apoinment-form .tp-input::-webkit-input-placeholder { /* Chrome/Opera/Safari */ font-family: var(--tp-ff-dm); font-weight: 400; font-size: 18px; letter-spacing: -0.02em; color: rgba(243, 241, 242, 0.6); } .tp-footer-md-apoinment-form .tp-input::-moz-placeholder { /* Firefox 19+ */ font-family: var(--tp-ff-dm); font-weight: 400; font-size: 18px; letter-spacing: -0.02em; color: rgba(243, 241, 242, 0.6); } .tp-footer-md-apoinment-form .tp-input:-moz-placeholder { /* Firefox 4-18 */ font-family: var(--tp-ff-dm); font-weight: 400; font-size: 18px; letter-spacing: -0.02em; color: rgba(243, 241, 242, 0.6); } .tp-footer-md-apoinment-form .tp-input:-ms-input-placeholder { /* IE 10+ Edge*/ font-family: var(--tp-ff-dm); font-weight: 400; font-size: 18px; letter-spacing: -0.02em; color: rgba(243, 241, 242, 0.6); } .tp-footer-md-apoinment-form .tp-input::placeholder { /* MODERN BROWSER */ font-family: var(--tp-ff-dm); font-weight: 400; font-size: 18px; letter-spacing: -0.02em; color: rgba(243, 241, 242, 0.6); } .tp-footer-md-apoinment-form .tp-textarea { height: 162px; resize: none; } .tp-footer-md-apoinment-title { color: rgba(243, 241, 242, 0.6); } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-footer-md-apoinment-content .tp-section-md-title { margin-bottom: 40px; } } .tp-footer-md-widget { position: relative; z-index: 1; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-footer-md-widget { margin-left: 0; } } .tp-footer-md-widget p { color: rgba(243, 241, 242, 0.8); } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-footer-md-widget p br { display: none; } } .tp-footer-md-widget ul li { list-style: none; font-family: var(--tp-ff-dm); font-weight: 400; font-size: 18px; line-height: 144%; letter-spacing: -0.02em; color: var(--tp-grey-5); opacity: 0.8; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tp-footer-md-widget ul li { font-size: 17px; } } .tp-footer-md-widget ul li:not(:last-child) { margin-bottom: 18px; } .tp-footer-md-widget ul li a:hover { color: var(--tp-common-white); } .tp-footer-md-social a { color: var(--tp-common-white); border-color: rgba(243, 241, 242, 0.1); width: 40px; height: 40px; line-height: 40px; } .tp-footer-md-social a:hover { background: var(--tp-common-white); color: var(--tp-common-black); border-color: var(--tp-common-white); } .tp-footer-md-bigtitle { font-size: 730px; line-height: 0.8; } @media only screen and (min-width: 1700px) and (max-width: 1800px) { .tp-footer-md-bigtitle { font-size: 710px; } } @media only screen and (min-width: 1600px) and (max-width: 1700px) { .tp-footer-md-bigtitle { font-size: 660px; } } @media only screen and (min-width: 1400px) and (max-width: 1599px) { .tp-footer-md-bigtitle { font-size: 580px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .tp-footer-md-bigtitle { font-size: 500px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tp-footer-md-bigtitle { font-size: 410px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .tp-footer-md-bigtitle { font-size: 315px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .tp-footer-md-bigtitle { font-size: 225px; } } @media (max-width: 574.98px) { .tp-footer-md-bigtitle { font-size: 140px; } } .tp-footer-md-title-wrap { margin-bottom: -160px; } @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), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-footer-md-title-wrap { margin-bottom: -100px; } } .tp-footer-md-bottom { border-top: 1px solid rgba(243, 241, 242, 0.1); } .tp-footer-md-bottom .tp-footer-it-copyright svg { margin-bottom: -2px; } .tp-footer-md-copyright-menu a:not(:last-child) { margin-right: 30px; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-footer-md-copyright-menu a:not(:last-child) { margin-right: 10px; } } .tp-footer-md-shape { position: absolute; top: 0; left: 0; width: 13%; } .tp-footer-md-shape-2 { position: absolute; top: 20px; right: 135px; width: 6%; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-footer-vp-widget { margin-left: 0; } } .tp-footer-vp-widget span { color: rgba(251, 252, 238, 0.6); } .tp-footer-vp-widget ul li { list-style: none; } .tp-footer-vp-widget ul li:not(:last-child) { margin-bottom: 15px; } .tp-footer-vp-widget ul li a { font-family: var(--tp-ff-inter); font-weight: 400; font-size: 20px; letter-spacing: -0.02em; color: #fbfcee; background-image: linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor); background-size: 0 1px, 0 1px; background-position: 100% 100%, 0 100%; background-repeat: no-repeat; transition: background-size 0.3s linear; -webkit-transition: all 0.4s ease 0.3s 0s ease-out; -moz-transition: all 0.4s ease 0.3s 0s ease-out; -ms-transition: all 0.4s ease 0.3s 0s ease-out; -o-transition: all 0.4s ease 0.3s 0s ease-out; transition: all 0.4s ease 0.3s 0s ease-out; } .tp-footer-vp-widget ul li a:hover { background-image: linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor); background-size: 0 1px, 100% 1px; background-position: 100% 100%, 0 100%; background-repeat: no-repeat; transition: background-size 0.3s linear; -webkit-transition: all 0.4s ease 0.3s 0s ease-out; -moz-transition: all 0.4s ease 0.3s 0s ease-out; -ms-transition: all 0.4s ease 0.3s 0s ease-out; -o-transition: all 0.4s ease 0.3s 0s ease-out; transition: all 0.4s ease 0.3s 0s ease-out; } .tp-footer-vp-widget ul li a svg { margin-left: 3px; } .tp-footer-vp-bigtext { font-weight: 600; font-size: 320px; line-height: 73%; } @media only screen and (min-width: 1400px) and (max-width: 1599px) { .tp-footer-vp-bigtext { font-size: 280px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .tp-footer-vp-bigtext { font-size: 250px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tp-footer-vp-bigtext { font-size: 200px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .tp-footer-vp-bigtext { font-size: 160px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .tp-footer-vp-bigtext { font-size: 120px; } } @media (max-width: 574.98px) { .tp-footer-vp-bigtext { font-size: 70px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-footer-vp-bigtext-wrap { margin-top: 60px; } } .text-scale-anim { white-space: pre-wrap; transform-origin: top left; } .tp-letter-span { background: linear-gradient(0deg, #111112 4%, #ffffff 50%, #111112 97%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; display: inline-block; } .tp-word-span { display: inline-block; } /*----------------------------------------*/ /* 7.16 Hero css start /*----------------------------------------*/ .tp-hero-spacing { padding-top: 200px; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-hero-spacing { padding-top: 150px; } } .tp-hero-title { font-weight: 700; font-size: 100px; line-height: 105%; text-transform: uppercase; } @media only screen and (min-width: 1400px) and (max-width: 1599px) { .tp-hero-title { font-size: 80px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .tp-hero-title { font-size: 70px; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) { .tp-hero-title { font-size: 60px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-hero-title { font-size: 50px; } } .tp-hero-title-sm { font-weight: 700; padding: 11px 39px; font-size: 25px; line-height: 70%; text-transform: uppercase; border-radius: 100px; width: 151px; height: 65px; background: var(--tp-theme-primary); text-align: center; transform: translateY(-13px); } @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), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-hero-title-sm { font-size: 20px; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-hero-title-sm { height: 55px; transform: translateY(-1px); } } @media (max-width: 574.98px) { .tp-hero-title-sm { margin-bottom: 10px; } } .tp-hero-title-sm span { display: block; line-height: 1; } @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), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-hero-content { margin-left: 0; } } .tp-hero-bottom-content { margin-top: -35px; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-hero-bottom-content { margin-top: 20px; } } .tp-hero-bottom-shape { position: absolute; top: 0; left: 0; } .tp-hero-bottom-border { width: 100%; display: block; } .tp-hero-bottom-border svg { width: 100%; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) { .tp-hero-bottom-border svg { width: auto; } } .tp-hero-bottom-box { padding: 70px 60px 50px 60px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .tp-hero-bottom-box { padding: 40px 60px 40px 60px; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-hero-bottom-box { padding: 20px 20px 20px 20px; } } .tp-hero-bottom-line { width: 100%; height: 10px; background: var(--tp-theme-primary); } @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: 768px) and (max-width: 991px), (max-width: 574.98px) { .tp-hero-bottom-line { margin-top: 30px; } } .tp-hero-bottom-right { margin-left: -40px; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-hero-bottom-right { margin-left: 0; } } .tp-hero-bottom-height { height: 548px; width: 100%; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-hero-bottom-height { height: 348px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-hero-bottom-thumb { margin-right: 0; } } .tp-hero-video-btn { width: 70px; height: 70px; display: inline-block; background: var(--tp-common-black); text-align: center; display: flex; justify-content: center; align-items: center; border-radius: 50px; color: var(--tp-common-white); } .tp-hero-video-btn:hover { background: var(--tp-theme-primary); color: var(--tp-common-black); } .tp-hero-video-btn span { line-height: 0; } .tp-hero-customer-text { margin-left: 20px; margin-right: 58px; } @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), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-hero-customer-text { margin-right: 0; margin-left: 0; } } .tp-hero-customer-shape { position: absolute; top: 0; left: 0; width: 100%; height: 100% !important; z-index: -1; object-fit: cover; opacity: 0.2; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-hero-right-shape { padding-top: 0; } } .tp-hero-right-shape .shape-1 { transform: translateY(-7px); display: inline-block; } @media only screen and (min-width: 1700px) and (max-width: 1800px), 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), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-hero-right-content { margin-left: 0; } } .tp-hero-right-content .svg { width: 100%; } .tp-hero-social { writing-mode: vertical-rl; gap: 15px; } .tp-hero-social span { font-family: var(--tp-ff-heading); font-weight: 700; font-size: 18px; color: var(--tp-common-black); } .tp-hero-social a { width: 36px; height: 36px; border: 1px solid #eee; border-radius: 100px; transition: all 0.4s ease; display: flex; justify-content: center; align-items: center; } .tp-hero-social a:hover { background: var(--tp-common-black); color: var(--tp-common-white); border-color: var(--tp-common-black); } .tp-hero-2-video-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .tp-hero-2-video-container video { width: 100%; height: 100%; object-fit: cover; } .tp-hero-2-left { padding-left: 225px; } @media only screen and (min-width: 1600px) and (max-width: 1700px), only screen and (min-width: 1400px) and (max-width: 1599px) { .tp-hero-2-left { padding-left: 125px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) { .tp-hero-2-left { padding-left: 50px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-hero-2-left { padding-left: 0; } } @media only screen and (min-width: 1400px) and (max-width: 1599px) { .tp-hero-2-title { font-size: 87px; } } @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), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-hero-2-title { font-size: 80px; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-hero-2-title { font-size: 64px; } } @media (max-width: 574.98px) { .tp-hero-2-title { font-size: 42px; } } .tp-hero-2-title .tp-hero-video-btn { margin-left: 46px; } @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), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-hero-2-title .tp-hero-video-btn { margin-left: 10px; } } @media (max-width: 574.98px) { .tp-hero-2-title .tp-hero-video-btn { margin-left: 0; } } .tp-hero-2-impact-wrap { margin-left: -85px; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-hero-2-impact-wrap { margin-left: 0; } } .tp-hero-2-impact-wrap .shape { flex: 0 0 auto; } .tp-hero-2-impact-text span { line-height: 1; } .tp-hero-2-impact-text .tp-lines { width: 100%; display: inline-block; } .tp-hero-2-spacing { padding-top: 190px; padding-bottom: 90px; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-hero-2-spacing { padding-top: 90px; } } .tp-hero-2-customer-btn svg { transform: translateY(-2px); } .tp-hero-2-author { margin-top: 355px; } @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), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-hero-2-author { margin-top: 255px; margin-left: -100px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-hero-2-author { margin-top: 0; margin-left: 50px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-hero-2-author { margin-left: 0; } } .tp-hero-2-bottom-shape { position: absolute; bottom: -1px; left: 0; width: 100%; } .tp-hero-2-bottom-shape img { width: 100%; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-hero-2-bottom-shape img { height: 44px; } } .tp-hero-2-bottom-scrool { position: absolute; top: 50%; transform: translateY(-50%); left: 0; right: 0; margin: 0 auto; text-align: center; } .tp-hero-2-shape { margin-top: 255px; margin-left: 75px; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-hero-2-shape { margin-left: 0; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-hero-2-shape { margin-left: -40px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-hero-2-shape { display: none; } } .tp-hero-2-shape-two { position: absolute; left: 0; bottom: 135px; width: 5%; } .tp-hero-wd-title { font-family: var(--tp-ff-teko); font-size: 100px; line-height: 105%; text-transform: uppercase; } @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), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-hero-wd-title { font-size: 80px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-hero-wd-title { font-size: 75px; line-height: 0.9; } } @media (max-width: 574.98px) { .tp-hero-wd-title { font-size: 45px; } } .tp-hero-wd-title-wrap { margin-left: 40px; } @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), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-hero-wd-title-wrap { margin-left: 0; } } .tp-hero-wd-title .shape { margin-left: 101px; transform: translateY(-10px); } @media (max-width: 574.98px) { .tp-hero-wd-title .shape { margin-left: 35px; } } .tp-hero-wd-title .icons { width: 101px; height: 65px; border-radius: 50px; background: var(--tp-theme-primary); text-align: center; line-height: 70px; transform: translateY(-5px); } @media only screen and (min-width: 576px) and (max-width: 767px) { .tp-hero-wd-title .icons { height: 65px; line-height: 65px; transform: translateY(-8px); } } @media (max-width: 574.98px) { .tp-hero-wd-title .icons { height: 34px; line-height: 34px; transform: translateY(-5px); } } .tp-hero-wd-title .title-space { margin-left: 95px; } @media (max-width: 574.98px) { .tp-hero-wd-title .title-space { margin-left: 0; } } .tp-hero-wd-text { margin-left: 105px; margin-top: 77px; margin-right: -122px; } @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), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-hero-wd-text { margin-left: 0; margin-right: -52px; } } @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), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-hero-wd-text { margin-top: 40px; margin-right: -90px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-hero-wd-text { margin-right: 0; } } .tp-hero-wd-customer { display: flex; align-items: center; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-hero-wd-customer { flex-wrap: wrap; } } @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), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-hero-wd-customer .tp-hero-customer { margin-right: 30px; } } @media (max-width: 574.98px) { .tp-hero-wd-customer .tp-hero-customer { margin-right: 0; } } .tp-hero-wd-shape { display: flex; flex-direction: column; align-items: end; position: absolute; top: -93px; right: 78px; } @media (max-width: 574.98px) { .tp-hero-wd-shape { display: none; } } .tp-hero-wd-right { background: var(--tp-grey-3); border-radius: 20px; padding: 50px 45px 50px 45px; margin-left: 145px; } @media only screen and (min-width: 1400px) and (max-width: 1599px) { .tp-hero-wd-right { margin-left: 45px; } } @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), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-hero-wd-right { margin-left: 0; padding: 40px 35px 30px 35px; } } @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), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-hero-wd-right img { margin-bottom: 70px; } } .tp-hero-wd-btp { border: 1px solid var(--tp-border-1); border-radius: 100px; width: 50px; background: var(--tp-common-white); opacity: 0.9; height: 75px; text-align: center; line-height: 75px; position: absolute; left: 70px; bottom: 147px; z-index: 1; } .tp-hero-wd-bottom-border { width: 100%; display: block; } .tp-hero-wd-bottom-border svg { width: 100%; } .tp-hero-wd-bottom-info { padding: 28px 30px 35px 30px; margin-top: 280px; } @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), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-hero-wd-bottom-info { margin-top: 180px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) { .tp-hero-wd-bottom-info { padding: 38px 50px 35px 50px; } } .tp-hero-wd-bottom-info .tp-footer-social ul { gap: 20px; } .tp-hero-wd-bottom-info .tp-footer-social ul li { margin-right: 0; margin-bottom: 0; } .tp-hero-wd-bottom-info .tp-footer-social ul li a { background: var(--tp-common-black-2); font-size: 14px; padding: 3px 14px; } .tp-hero-wd-bottom-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; } @media (max-width: 574.98px) { .tp-hero-wd-bottom-title { margin-bottom: 50px; } } .tp-hero-sa-thumb { margin-left: -25px; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-hero-sa-thumb { margin-left: 0; margin-top: 0; } } .tp-hero-sa-thumb img { border-radius: 100%; } .tp-hero-sa-spacing { padding-top: 96px; padding-bottom: 95px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-hero-sa-spacing { padding-top: 120px; } } .tp-hero-sa-subtitle { display: flex; justify-content: end; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-hero-sa-subtitle { justify-content: start; } } .tp-hero-sa-subtitle-inner { text-align: left; } .tp-hero-sa-shape-2 { display: flex; flex-direction: column; align-items: end; position: absolute; left: -115px; top: 37%; transform: translateY(-50%); } .tp-hero-sa-shape-3 { position: absolute; bottom: 0; right: 0; width: 23%; } .tp-hero-sa-shape-3 svg { width: 100%; } @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), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-hero-sa-btn { margin-right: 10px; } } .tp-hero-sa-btn-wrap { flex-wrap: wrap; } @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), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-hero-sa-customer-text { margin-left: 10px; } } @media (max-width: 574.98px) { .tp-hero-sa-customer-text { margin-left: 0; } .tp-hero-sa-customer-text br { display: none; } } .tp-hero-sa-social a { border: 1px solid #00000024; } .tp-hero-pp-spacing { padding-top: 150px; padding-bottom: 60px; } .tp-hero-pp-title img { transform: translateY(-10px); } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-hero-pp-title img { transform: translateY(-6px); width: 150px; } } @media (max-width: 574.98px) { .tp-hero-pp-title img { transform: translateY(-3px); width: 95px; } } .tp-hero-pp-para { margin-left: 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), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-hero-pp-para { margin-left: 100px; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-hero-pp-para { margin-left: 50px; } .tp-hero-pp-para br { display: none; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-hero-pp-para { margin-left: 0; } } .tp-hero-pp-social { writing-mode: inherit; gap: 10px; } .tp-hero-pp-social span { font-family: var(--tp-ff-heading); font-weight: 500; font-size: 18px; color: var(--tp-common-black); display: block; margin-bottom: 10px; } .tp-hero-pp-social span.borders { font-size: 16px; font-weight: 700; border: 1px solid var(--tp-border-1); border-radius: 100px; display: inline-block; padding: 4px 17px; } .tp-hero-pp-social a { color: var(--tp-grey-1); } .tp-hero-pp-social a:hover { background: var(--tp-theme-primary); border-color: var(--tp-theme-primary); color: var(--tp-common-black); } .tp-hero-pp-thumb { display: flex; align-items: end; justify-content: end; height: 100%; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-hero-pp-thumb { justify-content: flex-start; } } .tp-hero-pp-shape { position: absolute; bottom: 100px; right: 0; } .tp-hero-pp-shape-wrap { position: absolute; left: 0; top: 49%; } .tp-hero-cst-spacing { padding-top: 163px; padding-bottom: 25px; } .tp-hero-cst-content { display: flex; align-items: end; gap: 90px; } @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), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-hero-cst-content { gap: 50px; } } .tp-hero-cst-content p { opacity: 0.7; } .tp-hero-cst-btp a { border: 1px solid var(--tp-border-1); border-radius: 100px; width: 50px; background: var(--tp-common-white); opacity: 0.9; height: 75px; text-align: center; line-height: 75px; display: inline-block; position: relative; z-index: 2; } .tp-hero-cst-impact-wrap .shape { width: 50px; height: 50px; flex: 0 0 auto; } .tp-hero-cst-impact-border { border-bottom: 1px solid rgba(153, 153, 153, 0.3); display: block; margin-bottom: 5px; padding-bottom: 5px; } .tp-hero-cst-bottom-content { position: relative; z-index: 1; padding-top: 450px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-hero-cst-bottom-content { padding-top: 300px; } } @media (max-width: 574.98px) { .tp-hero-cst-bottom-content { padding-top: 200px; } } .tp-hero-cst-bottom-border { padding: 21px 120px; border-top: 1px solid rgba(255, 255, 255, 0.2); } @media only screen and (min-width: 1400px) and (max-width: 1599px) { .tp-hero-cst-bottom-border { padding: 21px 20px; } } @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), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-hero-cst-bottom-border { padding: 21px 0; } } .tp-hero-cst-bottom-shape { position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; z-index: 1; } .tp-hero-cst-bottom-shape .line-1 { stroke-dasharray: 2300; stroke-dashoffset: 4000; animation: dash-2 9s linear forwards infinite; } .tp-hero-cst-bottom-btn ul { display: flex; flex-wrap: wrap; gap: 40px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-hero-cst-bottom-btn ul { gap: 5px; } } .tp-hero-cst-bottom-btn ul li { list-style: none; font-family: var(--tp-ff-dm); font-weight: 700; font-size: 18px; letter-spacing: -0.02em; text-transform: capitalize; color: var(--tp-common-white); cursor: pointer; padding: 5px 0; position: relative; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-hero-cst-bottom-btn ul li { margin-right: 20px; } } .tp-hero-cst-bottom-btn ul li:hover::before { width: 100%; left: 0; right: auto; } .tp-hero-cst-bottom-btn ul li.active::before { width: 100%; left: 0; right: auto; } .tp-hero-cst-bottom-btn ul li::before { position: absolute; content: ""; width: 0; height: 1px; background: var(--tp-common-white); bottom: 0; right: 0; transition: all 0.4s ease; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-hero-cst-bottom-right { margin-top: 5px; } } .tp-hero-cst-bottom-right a { text-decoration: underline; text-underline-offset: 3px; } .tp-hero-it-social { margin-left: 35px; position: absolute; top: 50%; left: 0; transform: translateY(-50%); z-index: 2; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-hero-it-social { display: none !important; } } .tp-hero-it-social span { font-family: var(--tp-ff-poppins); font-size: 15px; text-transform: uppercase; color: var(--tp-common-black-1); } .tp-hero-it-social a { background: none; border: none; } .tp-hero-it-spacing { padding-top: 215px; padding-bottom: 45px; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-hero-it-spacing { padding-bottom: 0; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-hero-it-spacing { padding-top: 190px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-hero-it-spacing { padding-top: 150px; } } .tp-hero-it-counter .subtitle { color: #4c6a61; } .tp-hero-it-counter-wrap { flex-wrap: wrap; justify-content: space-between; gap: 14px; border-top: 1px solid #CDEAD5; padding-top: 17px; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-hero-it-counter-wrap { justify-content: left; gap: 50px; } } @media (max-width: 574.98px) { .tp-hero-it-counter-wrap { gap: 30px; } } .tp-hero-it-bigtitle { font-size: 266px; text-transform: uppercase; text-align: center; } @media only screen and (min-width: 1400px) and (max-width: 1599px) { .tp-hero-it-bigtitle { font-size: 210px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .tp-hero-it-bigtitle { font-size: 180px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tp-hero-it-bigtitle { font-size: 150px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .tp-hero-it-bigtitle { font-size: 125px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .tp-hero-it-bigtitle { font-size: 90px; } } @media (max-width: 574.98px) { .tp-hero-it-bigtitle { font-size: 56px; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-hero-it-bigtitle-wrap { padding-top: 40px; } } .tp-hero-it-shape { position: absolute; bottom: -170px; left: 0; width: 100%; z-index: -1; } .tp-hero-it-shape .line-1 { stroke-dasharray: 2300; stroke-dashoffset: 4000; animation: dash-2 9s linear forwards infinite; } @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) { .tp-hero-it-content { margin-left: 100px; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-hero-it-content { margin-left: 0; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-hero-it-title br { display: none; } } .tp-hero-pb-spacing { padding-top: 208px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-hero-pb-spacing { padding-top: 160px; } } .tp-hero-pb-input .tp-input { font-family: var(--tp-ff-inter); font-weight: 400; font-size: 14px; letter-spacing: -0.02em; color: #111112; background: transparent; border: none; border-radius: 0; height: 44px; border-bottom: 1px solid #E7E7E1; padding-left: 10px; padding-right: 10px; width: 100%; line-height: 44px; } .tp-hero-pb-input .tp-input::-webkit-input-placeholder { /* Chrome/Opera/Safari */ font-family: var(--tp-ff-inter); font-weight: 400; font-size: 14px; letter-spacing: -0.02em; color: rgba(17, 17, 18, 0.6); } .tp-hero-pb-input .tp-input::-moz-placeholder { /* Firefox 19+ */ font-family: var(--tp-ff-inter); font-weight: 400; font-size: 14px; letter-spacing: -0.02em; color: rgba(17, 17, 18, 0.6); } .tp-hero-pb-input .tp-input:-moz-placeholder { /* Firefox 4-18 */ font-family: var(--tp-ff-inter); font-weight: 400; font-size: 14px; letter-spacing: -0.02em; color: rgba(17, 17, 18, 0.6); } .tp-hero-pb-input .tp-input:-ms-input-placeholder { /* IE 10+ Edge*/ font-family: var(--tp-ff-inter); font-weight: 400; font-size: 14px; letter-spacing: -0.02em; color: rgba(17, 17, 18, 0.6); } .tp-hero-pb-input .tp-input::placeholder { /* MODERN BROWSER */ font-family: var(--tp-ff-inter); font-weight: 400; font-size: 14px; letter-spacing: -0.02em; color: rgba(17, 17, 18, 0.6); } .tp-hero-pb-input .tp-input:focus { border-color: var(--tp-theme-secondary); } .tp-hero-pb-input .nice-select::after { right: 10px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-hero-pb-input-btn { margin-top: 20px; } } .tp-hero-pb-bigtitle { font-family: var(--tp-ff-inter); font-weight: 800; font-size: 400px; line-height: 77%; letter-spacing: -0.04em; background: linear-gradient(180deg, rgba(235, 235, 235, 0.58) 0%, rgba(248, 244, 238, 0.09) 100%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; position: absolute; bottom: 80px; left: 0; right: 0; margin: 0 auto; z-index: -1; margin-left: -20px; } @media only screen and (min-width: 1700px) and (max-width: 1800px) { .tp-hero-pb-bigtitle { font-size: 370px; } } @media only screen and (min-width: 1600px) and (max-width: 1700px) { .tp-hero-pb-bigtitle { font-size: 330px; } } @media only screen and (min-width: 1400px) and (max-width: 1599px) { .tp-hero-pb-bigtitle { font-size: 290px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .tp-hero-pb-bigtitle { font-size: 250px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tp-hero-pb-bigtitle { font-size: 200px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .tp-hero-pb-bigtitle { font-size: 160px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .tp-hero-pb-bigtitle { font-size: 120px; } } @media (max-width: 574.98px) { .tp-hero-pb-bigtitle { font-size: 75px; } } .tp-hero-pb-shape { position: absolute; right: 0; top: 228px; width: 13%; z-index: -1; -webkit-animation: levitate-lg 4s ease-in-out infinite; animation: levitate-lg 4s ease-in-out infinite; -webkit-animation-delay: 1s; animation-delay: 1s; } .tp-hero-pb-shape-2 { position: absolute; left: 242px; top: 177px; z-index: -1; -webkit-animation: levitate-lg 4s ease-in-out infinite; animation: levitate-lg 4s ease-in-out infinite; -webkit-animation-delay: 1s; animation-delay: 1s; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) { .tp-hero-pb-shape-2 { left: 42px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-hero-pb-shape-2 { left: 0; } } .tp-hero-pb-shape-3 { position: absolute; left: 0; right: 0; margin: 0 auto; top: -30px; z-index: -1; } .tp-hero-ai-spacing { padding-top: 220px; padding-bottom: 57px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-hero-ai-spacing { padding-top: 180px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-hero-ai-thumb { margin-right: 0; } } .tp-hero-ai-thumb-text { font-size: 139px; writing-mode: sideways-rl; position: absolute; left: -28px; bottom: -8px; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 574.98px) { .tp-hero-ai-thumb-text { font-size: 110px; left: -17px; } } .tp-hero-ai-dec { box-shadow: 0 4px 59px 2px rgba(0, 0, 0, 0.05); padding: 35px 32px 32px 32px; margin-left: -60px; margin-right: 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), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-hero-ai-dec { margin-right: 0px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-hero-ai-dec { margin-left: 0; } } .tp-hero-ai-dec-title { font-size: 110px; } .tp-hero-ai-right-content { margin-left: -30px; } .tp-hero-ai-title { font-size: 140px; line-height: 104%; } @media only screen and (min-width: 1700px) and (max-width: 1800px) { .tp-hero-ai-title { font-size: 130px; } } @media only screen and (min-width: 1600px) and (max-width: 1700px), only screen and (min-width: 992px) and (max-width: 1199px) { .tp-hero-ai-title { font-size: 120px; } } @media only screen and (min-width: 1400px) and (max-width: 1599px) { .tp-hero-ai-title { font-size: 100px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 768px) and (max-width: 991px) { .tp-hero-ai-title { font-size: 90px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .tp-hero-ai-title { font-size: 70px; } } @media (max-width: 574.98px) { .tp-hero-ai-title { font-size: 50px; margin-bottom: 20px; } } .tp-hero-ai-title .authors { margin-top: 10px; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) { .tp-hero-ai-title .authors { width: 80px; } } @media (max-width: 574.98px) { .tp-hero-ai-title .authors { width: 55px; } } .tp-hero-ai-title .hero-shape { margin-top: -38px; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-hero-ai-title .hero-shape { width: 80px; margin-top: -28px; } } @media (max-width: 574.98px) { .tp-hero-ai-title .hero-shape { width: 55px; } } .tp-hero-ai-shape { position: absolute; top: 0; left: 0; width: 37%; z-index: -1; } .tp-hero-ai-body-overlay { position: fixed; z-index: -1; pointer-events: none; top: 0; opacity: 1; inset-inline-start: 0; width: 100vw; height: 100vh; background-repeat: repeat; background-position: top left; background-image: url(../img/body/noise.html); } .tp-hero-md-spacing { padding-top: 220px; padding-bottom: 120px; } @media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 574.98px) { .tp-hero-md-spacing { padding-top: 170px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-hero-md-spacing { padding-bottom: 70px; } } .tp-hero-md-title img { transform: translateY(-20px); } @media (max-width: 574.98px) { .tp-hero-md-title img { transform: translateY(-6px); width: 47px; } } .tp-hero-md-btn { gap: 16px; flex-wrap: wrap; } .tp-hero-md-video-text { text-decoration: underline; text-decoration-skip-ink: none; } .tp-hero-md-video-btn { width: 60px; height: 60px; line-height: 56px; } .tp-hero-md-video-btn:hover { background: var(--tp-theme-1); } .tp-hero-md-row-custom { display: flex; margin: 0 -15px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .tp-hero-md-row-custom { margin: 0 -5px; } } @media (max-width: 574.98px) { .tp-hero-md-row-custom { margin: 0 -3px; } } .tp-hero-md-col-custom { flex: 1; width: 180px; height: 624px; background-size: cover; margin: 0px 12px 0 12px; margin-top: 0; transition: 0.4s; } @media only screen and (min-width: 768px) and (max-width: 991px) { .tp-hero-md-col-custom { margin: 20px 5px; } } @media (max-width: 574.98px) { .tp-hero-md-col-custom { margin: 20px 3px; height: 424px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .tp-hero-md-col-custom { margin: 20px 3px; } } .tp-hero-md-col-custom.active { flex: 3; } @media only screen and (min-width: 768px) and (max-width: 991px) { .tp-hero-md-col-custom.active { flex: 4; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .tp-hero-md-col-custom.active { flex: 6; } } @media (max-width: 574.98px) { .tp-hero-md-col-custom.active { flex: 10; } } .tp-hero-md-col-custom.active .tp-hero-md-panel-meta { visibility: visible; opacity: 1; } .tp-hero-md-col-custom.active .tp-hero-md-panel-content { visibility: visible; opacity: 1; } .tp-hero-md-panel-item { height: 100%; cursor: pointer; } .tp-hero-md-panel-item .tp-hero-md-panel-thumb { height: 100%; position: relative; } .tp-hero-md-panel-item .tp-hero-md-panel-thumb::before { position: absolute; content: ""; top: 0; left: 0; height: 100%; width: 100%; background: linear-gradient(180deg, rgba(17, 17, 18, 0) 56.01%, rgba(2, 2, 6, 0.8) 100%); border-radius: 24px; } .tp-hero-md-panel-item img { object-fit: cover; width: 100%; height: 100%; border-radius: 24px; } .tp-hero-md-panel-meta { visibility: hidden; opacity: 0; transition: all 0.4s ease; transition-delay: 0.3s; } .tp-hero-md-panel-meta .count { font-family: var(--tp-ff-familjen); font-weight: 600; font-size: 42px; line-height: 100%; letter-spacing: -0.04em; color: var(--tp-common-white); display: block; } @media (max-width: 574.98px) { .tp-hero-md-panel-meta .count { font-size: 32px; } } .tp-hero-md-panel-meta .doctor { font-family: var(--tp-ff-dm); font-weight: 400; font-size: 16px; letter-spacing: -0.04em; color: var(--tp-common-white); opacity: 0.8; } .tp-hero-md-panel-title { font-family: var(--tp-ff-familjen); font-weight: 600; font-size: 32px; line-height: 112%; letter-spacing: -0.04em; color: var(--tp-common-white); } @media (max-width: 574.98px) { .tp-hero-md-panel-title { font-size: 25px; } } .tp-hero-md-panel-content { position: absolute; bottom: 0; left: 0; padding: 0 40px 32px 40px; width: 100%; display: flex; justify-content: space-between; transition: all 0.5s ease; opacity: 0; visibility: hidden; } @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-hero-md-panel-content { padding: 0 30px 22px 30px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .tp-hero-md-panel-content { padding: 0 20px 40px 20px; } } @media (max-width: 574.98px) { .tp-hero-md-panel-content { padding: 0 15px 30px 15px; } } .tp-hero-md-shape { position: absolute; bottom: -97px; right: 150px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-hero-vp-content { margin-bottom: 50px; } } .tp-hero-vp-title { font-weight: 800; font-size: 505px; line-height: 73%; } @media only screen and (min-width: 1700px) and (max-width: 1800px), only screen and (min-width: 1600px) and (max-width: 1700px) { .tp-hero-vp-title { font-size: 450px; } } @media only screen and (min-width: 1400px) and (max-width: 1599px) { .tp-hero-vp-title { font-size: 380px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .tp-hero-vp-title { font-size: 330px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tp-hero-vp-title { font-size: 270px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .tp-hero-vp-title { font-size: 210px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .tp-hero-vp-title { font-size: 150px; } } @media (max-width: 574.98px) { .tp-hero-vp-title { font-size: 92px; } } .tp-hero-vp-spacing { padding-top: 318px; padding-bottom: 20px; position: relative; z-index: 999; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-hero-vp-spacing { padding-top: 260px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-hero-vp-spacing { padding-top: 170px; } } .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; } .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; } /*----------------------------------------*/ /* 7.1 about css start /*----------------------------------------*/ .tp-about-title span { display: inline-block; width: 88px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-about-title span { display: none; } } .tp-about-para { line-height: 35px; } .tp-about-bottom { border-top: 1px solid var(--tp-border-1); } .tp-about-expreance .plus { position: absolute; top: 12px; right: -23px; } .tp-about-thumb-height { height: 209px; width: 100%; } .tp-about-thumb-height-2 { height: 400px; width: 100%; } @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), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-about-2-title br { display: none; } } .tp-about-2-title .space { display: inline-block; width: 80px; } .tp-about-2-btn { display: flex; } .tp-about-2-border { height: 1px; width: 100%; background: var(--tp-border-1); } @media (max-width: 574.98px) { .tp-about-wd-title br { display: none; } } .tp-about-wd-title img { transform: translateY(-7px); } @media (max-width: 574.98px) { .tp-about-wd-title img { transform: translateY(-4px); width: 84px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-about-wd-btn { margin-top: 0; } } .tp-about-wd-shape { display: flex; flex-direction: column; align-items: end; margin-right: 30px; margin-top: 20px; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-about-wd-shape { align-items: start; margin-right: 0; margin-top: 0; margin-bottom: 30px; } } .tp-about-wd-expreance { margin-top: -57px; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-about-wd-expreance { margin-top: 0; } } .tp-about-wd-expreance .plus { top: 10px; font-weight: 400; font-size: 30px; } .tp-about-wd-expreance span { transform: translateY(-6px); } .tp-about-wd-thumb3 { position: absolute; top: -222px; right: 0; border: 10px solid var(--tp-common-white); border-top: 0; border-right: 0; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-about-wd-thumb3 { top: -150px; } } .tp-about-wd-thumb4 { margin-top: 80px; margin-right: 110px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-about-wd-thumb4 { margin-right: 0; } } @media (max-width: 574.98px) { .tp-about-wd-thumb4 { margin-top: 126px; } } .tp-about-wd-shape-2 { position: absolute; bottom: 0; right: 0; z-index: -1; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-about-wd-para-wrap { margin-bottom: 0; } } .tp-about-sa-shape { flex-direction: row; margin-right: 0; justify-content: end; margin-top: 80px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-about-sa-shape { margin-top: 20px; justify-content: flex-start; } } .tp-about-sa-shape3 { position: absolute; bottom: 0; left: 0; z-index: -1; } .tp-about-sa-btn a { font-family: var(--tp-ff-heading); font-weight: 500; font-size: 15px; text-transform: uppercase; color: var(--tp-common-black); } .tp-about-sa-thumb2 .tp-about-wd-thumb3 { top: -36px; border: none; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-about-sa-thumb2 .tp-about-wd-thumb3 { top: 0; } } @media (max-width: 574.98px) { .tp-about-sa-thumb2 .tp-about-wd-thumb3 { position: inherit; } } .tp-about-sa-thumb2 .tp-about-wd-thumb4 { margin-top: 0; padding-top: 125px; margin-left: -53px; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-about-sa-thumb2 .tp-about-wd-thumb4 { margin-left: 0; } } @media (max-width: 574.98px) { .tp-about-sa-thumb2 .tp-about-wd-thumb4 { padding-top: 30px; } } .tp-about-pp-skill-wrap { background: var(--tp-common-black-2); border-radius: 100px; padding: 30px 25px 30px 25px; } .tp-about-pp-skill-icon { width: 90px; height: 90px; display: inline-block; border-radius: 100%; border: 1px solid rgba(255, 255, 255, 0.1); background: var(--tp-common-black-2); text-align: center; line-height: 90px; flex: 0 0 auto; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-about-pp-skill-icon { width: 70px; height: 70px; line-height: 64px; margin-right: 10px; } .tp-about-pp-skill-icon svg { width: 30px; } } .tp-about-pp-skill-white-wrap { background: var(--tp-common-white); border: 1px solid var(--tp-border-1); } .tp-about-pp-skill-white-wrap .tp-about-pp-skill-icon { background: var(--tp-common-white-2); } .tp-about-pp-border svg { width: 100%; } @media only screen and (min-width: 1400px) and (max-width: 1599px) { .tp-about-top-title { font-size: 60px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 768px) and (max-width: 991px) { .tp-about-top-title { font-size: 50px; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 576px) and (max-width: 767px) { .tp-about-top-title { font-size: 40px; } } @media (max-width: 574.98px) { .tp-about-top-title { font-size: 30px; } } .tp-about-top-title span { width: 120px; display: inline-block; } @media only screen and (min-width: 576px) and (max-width: 767px) { .tp-about-top-title span { width: 60px; } } @media (max-width: 574.98px) { .tp-about-top-title span { display: none; } } @media only screen and (min-width: 1700px) and (max-width: 1800px), 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), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-about-top-title-wrap { margin-left: 0; } } .tp-about-top-spacing { padding-top: 235px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-about-top-spacing { padding-top: 130px; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-about-top-content p br { display: none; } } .tp-about-bottom-video { position: absolute; top: 50%; transform: translateY(-50%); left: 0; right: 0; display: flex; justify-content: center; } .tp-about-bottom-video .popup-video { background: none; border: 1px solid var(--tp-common-black); color: var(--tp-common-black); } @media (max-width: 574.98px) { .tp-about-bottom-video .popup-video { width: 38px; height: 37px; line-height: 29px; } } .tp-about-process-item { padding: 45px 40px 25px 40px; border: 1px solid transparent; transition: all 0.4s ease; } .tp-about-process-item:hover { border-color: var(--tp-border-1); background: transparent; } .tp-about-me-shape { position: absolute; bottom: 50px; right: 320px; } @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), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-about-me-shape { right: 100px; } } .tp-about-me-email { display: block; text-align: right; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-about-me-email { text-align: left; } } .tp-about-me-banner { overflow: hidden; height: 780px; } @media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px) { .tp-about-me-banner { height: 600px; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-about-me-banner { height: 400px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-about-me-title { margin-bottom: 20px; } } .tp-about-process-2-border svg { width: 100%; } .tp-about-process-2-item ul li { list-style: none; font-weight: 400; font-size: 18px; color: var(--tp-common-black); } .tp-about-process-2-item ul li:not(:last-child) { margin-bottom: 6px; } .tp-about-cst-thumb { border-bottom: 1px solid #E7EAEA; margin-bottom: 37px; padding-right: 30px; } @media (max-width: 574.98px) { .tp-about-cst-thumb { padding-right: 0; } } .tp-about-cst-thumb img { border-radius: 20px; } @media (max-width: 574.98px) { .tp-about-cst-thumb img { margin-right: 0; } } .tp-about-cst-thumb-wrap { border-right: 1px solid #E7EAEA; margin-right: 20px; padding-bottom: 5px; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-about-cst-thumb-wrap { margin-right: 0; padding-right: 0; border: none; } } .tp-about-cst-thumb-wrap .tp-about-expreance .plus { top: 8px; right: -13px; } .tp-about-cst-tab ul { display: flex; flex-wrap: wrap; } .tp-about-cst-tab ul li { list-style: none; margin-right: 42px; } .tp-about-cst-tab ul li a { font-family: var(--tp-ff-dm); font-weight: 700; color: var(--tp-common-black-1); } .tp-about-cst-tab ul li a.active { border-bottom: 1px solid currentColor; } @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), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-about-cst-tab-wrap { margin-left: 0; } } .tp-about-cst-tab-wrap .tab-pane { display: block; pointer-events: none; opacity: 0; visibility: hidden; position: absolute; z-index: 1; top: 0; left: 0; right: 0; -webkit-transform: translateY(30px); -ms-transform: translateY(30px); transform: translateY(30px); transition-timing-function: ease-in; transition-duration: 0.2s; } .tp-about-cst-tab-wrap .tab-pane.active { pointer-events: auto; opacity: 1; visibility: visible; position: relative; z-index: 2; -webkit-transform: none; -ms-transform: none; transform: none; transition-timing-function: ease-out; transition-duration: 0.3s; transition-delay: 0.3s; } .tp-about-cst-list { position: absolute; bottom: -30px; left: 0; } @media (max-width: 574.98px) { .tp-about-cst-list { position: inherit; } } .tp-about-cst-list ul { margin-bottom: 20px; } .tp-about-cst-list ul li { font-family: var(--tp-ff-dm); font-weight: 500; font-size: 14px; color: var(--tp-common-black-1); display: flex; } .tp-about-cst-list ul li span { margin-right: 8px; transform: translateY(-1px); } .tp-about-cst-list-btn { border-radius: 8px; padding: 3px 20px; transition: all 0.4s ease; } .tp-about-cst-list-btn:hover { background: var(--tp-common-white); color: var(--tp-common-black-1); } .tp-about-cst-list-inner { padding: 0px 24px 24px 24px; margin-top: -20px; } @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), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-about-cst-list-thumb { margin-left: 60px; } } @media (max-width: 574.98px) { .tp-about-cst-list-thumb { margin-left: 0; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-about-cst-list-wrap { margin-left: 0; } } @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), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-about-cst-content p br { display: none; } } .tp-about-it-rating-wrap { display: flex; } .tp-about-it-rating .rating { display: flex; gap: 5px; } .tp-about-it-rating .rating i { width: 22px; height: 22px; display: inline-block; text-align: center; display: flex; justify-content: center; align-items: center; border-radius: 4px; background: var(--tp-common-black-1); color: var(--tp-grey-5); font-size: 12px; } .tp-about-it-total-rating { line-height: 0.9; border-right: 1px solid var(--tp-common-black-1); margin-right: 24px; padding-right: 24px; } .tp-about-it-content { margin-right: 75px; margin-left: 17px; } @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), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-about-it-content { margin-right: 0; } } @media (max-width: 574.98px) { .tp-about-it-content { margin-left: 0; } } .tp-about-it-expreance { font-size: 392px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) { .tp-about-it-expreance { font-size: 320px; } } @media (max-width: 574.98px) { .tp-about-it-expreance { font-size: 216px; } } .tp-about-it-feature span { font-family: var(--tp-ff-inter); font-weight: 400; font-size: 20px; letter-spacing: -0.03em; color: var(--tp-common-black-1); background: var(--tp-common-green-3); border-radius: 20px; padding: 8px 25px; display: inline-block; position: absolute; top: 33%; -webkit-animation: mymove 1s infinite; animation: mymove 1s infinite; } .tp-about-it-feature span.feature-1 { left: 37%; } @media (max-width: 574.98px) { .tp-about-it-feature span.feature-1 { left: 55%; top: 20%; } } .tp-about-it-feature span.feature-2 { left: 2%; top: 47%; -webkit-animation: mymove 1.1s infinite; animation: mymove 1.1s infinite; background: #ff6d00; color: var(--tp-common-white); } @media (max-width: 574.98px) { .tp-about-it-feature span.feature-2 { top: 35%; } } .tp-about-it-feature span.feature-3 { left: 33%; top: 61%; -webkit-animation: mymove 1.2s infinite; animation: mymove 1.2s infinite; background: #b4e717; } .tp-about-it-blur { position: absolute; top: -70px; left: 0; width: 400px; height: 400px; background-color: #D5FFDD; border-radius: 50%; filter: blur(180px); z-index: -1; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-about-it-subtitle { margin-bottom: 20px; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-about-pb-para { margin-left: 0; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-about-pb-para { margin-bottom: 40px; } } .tp-about-pb-para p { line-height: 178%; } @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), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-about-pb-para p { margin-right: 0; } } .tp-about-pb-shape { margin-top: -30px; } .tp-about-pb-feature-list ul li { list-style: none; margin-bottom: 16px; } .tp-about-pb-feature-list ul li a { font-family: var(--tp-ff-inter); font-weight: 500; font-size: 16px; letter-spacing: -0.03em; text-transform: capitalize; color: var(--tp-common-black-5); border: 1px solid rgba(17, 17, 18, 0.1); border-radius: 50px; padding: 4px 16px; display: inline-block; } .tp-about-pb-feature-list ul li a:hover { background: var(--tp-theme-secondary); color: var(--tp-common-white); border-color: var(--tp-theme-secondary); } .tp-about-pb-feature-icon { border-radius: 60px; border: 1px solid rgba(17, 17, 18, 0.1); text-align: center; width: 50px; height: 50px; display: flex; justify-content: center; align-items: center; } @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), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-about-pb-feature-para br { display: none; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-about-pb-feature-right { margin-left: 0; } } .tp-about-pb-feature-wrap { margin-top: -220px; position: relative; z-index: 1; } @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) { .tp-about-pb-feature-wrap { margin-top: -120px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .tp-about-pb-feature-wrap { margin-top: -70px; } } @media (max-width: 574.98px) { .tp-about-pb-feature-wrap { margin-top: -40px; } } .tp-about-ai-text .has-scale-image { position: relative; display: inline-block; background-color: currentColor; width: 60px; height: 60px; line-height: inherit; border-radius: 6px; cursor: pointer; overflow: hidden; opacity: 0; transform: scale(0.5); -webkit-transform: scale(0.5); margin-bottom: -9px; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-about-ai-text .has-scale-image { width: 48px; height: 48px; } } .tp-about-ai-text .hidden-image { position: absolute; width: 100%; height: 100%; background-size: cover; opacity: 0; transition: all 0.4s ease-out; -webkit-transition: all 0.4s ease-out; } .tp-about-ai-text .has-scale-image:hover .hidden-image { opacity: 1; } .tp-about-ai-title { font-size: 132px; } @media (max-width: 574.98px) { .tp-about-ai-title { font-size: 100px; } } .tp-about-ai-ring { bottom: 77px; left: -348px; animation: tp_animation_spin 9s linear infinite; z-index: -1; width: 33%; } @media only screen and (min-width: 1400px) and (max-width: 1599px) { .tp-about-ai-ring { width: 37%; } } @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), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-about-ai-ring { left: -250px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-about-ai-ring { display: none; } } @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), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-about-ai-para br { display: none; } } .tp-about-md-title { font-size: 190px; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) { .tp-about-md-title { font-size: 150px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .tp-about-md-title { font-size: 110px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .tp-about-md-title { font-size: 80px; } } @media (max-width: 574.98px) { .tp-about-md-title { font-size: 60px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-about-md-title-wrap { margin-bottom: 20px; } } .tp-about-md-expreance-content { margin-left: -30px; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-about-md-expreance-content { margin-left: 0; } } .tp-about-md-expreance-count h2 { font-size: 180px; line-height: 0.8; margin-top: -100px; } .tp-about-md-bigtext { font-size: 190px; color: rgba(0, 0, 0, 0.05); position: absolute; top: 38%; left: -25px; z-index: -2; } @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), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-about-md-bigtext { font-size: 155px; } } .tp-about-md-shape { position: absolute; top: 170px; left: 0; z-index: -1; width: 28%; } .tp-about-md-shape img { width: 100%; } .tp-about-md-shape-2 { position: absolute; bottom: 235px; right: 0; width: 9%; } .tp-about-md-shape-2 img { width: 100%; } @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), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-about-md-content { margin-right: 0; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-about-md-content { margin-left: 0; } } @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), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-about-md-content p br { display: none; } } .tp-about-feature-info { padding: 145px 100px 100px 160px; } @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), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-about-feature-info { padding: 100px 50px 50px 100px; } .tp-about-feature-info p br { display: none; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-about-feature-info { padding: 60px 30px 40px 30px; } } .tp-about-feature-thumb img { height: 100%; object-fit: cover; } /*----------------------------------------*/ /* 7.4 brand /*----------------------------------------*/ .tp-brand-spacing { padding: 100px 0px; border-top: 1px solid #03030324; border-bottom: 1px solid #03030324; } @media (max-width: 574.98px) { .tp-brand-spacing { padding: 70px 0px; } } .tp-brand-item a { opacity: 0.5; } .tp-brand-item a:hover { opacity: 1; } .tp-brand-slide-active .swiper-slide { display: inline-block; width: auto; margin: 0 80px; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) { .tp-brand-slide-active .swiper-slide { margin: 0 50px; } } @media (max-width: 574.98px) { .tp-brand-slide-active .swiper-slide { margin: 0 30px; } } .tp-brand-customer { border: 1px solid #03030324; border-radius: 100px; padding: 6px 35px; display: inline-block; background: var(--tp-common-white); } .tp-brand-customer-wrap { position: absolute; top: -20px; left: 0; right: 0; text-align: center; } .tp-brand-bottom-border { width: 97%; height: 20px; background: transparent; bottom: -20px; left: 0; right: 0; margin: 0 auto; display: inline-block; position: absolute; border: 1px solid #03030324; z-index: -1; border-top: 0; } .tp-brand-2-item { display: flex; justify-content: center; align-items: center; flex-direction: column; height: 250px; width: 260px; border: 1px solid var(--tp-border-1); margin-right: -1px; margin-top: -1px; opacity: 0.5; } @media only screen and (min-width: 576px) and (max-width: 767px) { .tp-brand-2-item { width: 255px; } } @media (max-width: 574.98px) { .tp-brand-2-item { height: 110px; width: 150px; } .tp-brand-2-item img { width: 100px; } } .tp-brand-2-item:hover { opacity: 1; } .tp-brand-2-item-wrap { display: flex; flex-wrap: wrap; justify-content: center; } .tp-brand-cst-spacing { padding: 160px 0px; } @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), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-brand-cst-spacing { padding: 100px 0px; } } .tp-brand-inner-item img { width: 100%; } /*----------------------------------------*/ /* 7.26 service /*----------------------------------------*/ .tp-service-shape { flex: 0 0 auto; margin-top: 8px; } @media (max-width: 574.98px) { .tp-service-shape { margin-bottom: 20px; } } .tp-service-para { line-height: 35px; } @media (max-width: 574.98px) { .tp-service-para br { display: none; } } .tp-service-item { border: 1px solid var(--tp-border-1); padding: 25px 25px 50px 60px; } @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), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-service-item { padding: 25px 25px 25px 25px; } } .tp-service-item:hover .tp-service-item-bg { opacity: 1; visibility: visible; } .tp-service-item-title { font-weight: 500; font-size: 35px; line-height: 129%; text-transform: uppercase; margin-bottom: 25px; } .tp-service-item-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; visibility: hidden; transition: all 0.4s ease; } .tp-service-item ul li { list-style: none; } .tp-service-item ul li:not(:last-child) { margin-bottom: 17px; } .tp-service-item ul li a { font-family: var(--tp-ff-heading); font-weight: 500; font-size: 22px; line-height: 140%; padding-left: 15px; position: relative; background-image: linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor); background-size: 0 1px, 0 1px; background-position: 100% 100%, 0 100%; background-repeat: no-repeat; transition: background-size 0.3s linear; -webkit-transition: all 0.4s ease 0.3s 0s ease-out; -moz-transition: all 0.4s ease 0.3s 0s ease-out; -ms-transition: all 0.4s ease 0.3s 0s ease-out; -o-transition: all 0.4s ease 0.3s 0s ease-out; transition: all 0.4s ease 0.3s 0s ease-out; } .tp-service-item ul li a:hover { background-image: linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor); background-size: 0 1px, 100% 1px; background-position: 100% 100%, 0 100%; background-repeat: no-repeat; transition: background-size 0.3s linear; -webkit-transition: all 0.4s ease 0.3s 0s ease-out; -moz-transition: all 0.4s ease 0.3s 0s ease-out; -ms-transition: all 0.4s ease 0.3s 0s ease-out; -o-transition: all 0.4s ease 0.3s 0s ease-out; transition: all 0.4s ease 0.3s 0s ease-out; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-service-item ul li a { font-size: 20px; } } .tp-service-item ul li a::before { position: absolute; content: ""; top: 50%; transform: translateY(-50%); left: 0; width: 6px; height: 6px; background: var(--tp-common-black); border-radius: 40px; } @media (max-width: 574.98px) { .tp-service-title-wrap .tp-section-subtitle { margin-bottom: 20px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-service-2-title { margin-bottom: 40px; } } .tp-service-2-title span { width: 120px; } .tp-service-2-para { margin-bottom: 115px; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-service-2-para { margin-bottom: 40px; } } .tp-service-2-para p { margin-left: 644px; padding-left: 24px; position: relative; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .tp-service-2-para p { margin-left: 521px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tp-service-2-para p { margin-left: 321px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-service-2-para p { margin-left: 50px; } } @media (max-width: 574.98px) { .tp-service-2-para p { margin-left: 0; padding-left: 0; } } .tp-service-2-para p::before { position: absolute; content: ""; width: 1px; height: 180px; background: #eee; left: 0; top: -50px; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-service-2-para p::before { height: 100%; top: 0; } } @media (max-width: 574.98px) { .tp-service-2-para p::before { display: none; } } .tp-service-2-item { padding: 50px 40px 80px 40px; border: 1px solid transparent; transition: all 0.4s ease; } .tp-service-2-item:hover { border: 1px solid var(--tp-border-1); background: transparent; } .tp-service-2-btn { border: 1px solid #eee; border-radius: 100px; text-align: left; padding: 28px 50px 21px 50px; } .tp-service-2-btn .tp-btn-2 { background: var(--tp-common-white-2); } .tp-service-2-btn .tp-btn-group .tp-btn-circle { background: var(--tp-common-white-2); } .tp-service-2-btn .tp-btn-group:hover > *:nth-child(1) { background: var(--tp-theme-primary); } @media (max-width: 574.98px) { .tp-service-2-btn p { margin-right: 0; } .tp-service-2-btn p br { display: none; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-service-2-icon { margin-bottom: 100px; } } .tp-service-3-item { border: 1px solid #eee; border-radius: 16px; padding: 50px 25px 50px 60px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-service-3-item { padding: 25px 25px 25px 25px; } } .tp-service-3-item ul li:not(:last-child) { margin-bottom: 22px; } .tp-service-3-item ul li a { font-family: var(--tp-ff-dm); font-weight: 400; font-size: 25px; line-height: 140%; padding-left: 15px; letter-spacing: -0.02em; color: var(--tp-common-black-5); } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-service-3-item ul li a { font-size: 20px; } } .tp-service-wd-content ul li { font-weight: 500; font-size: 18px; color: var(--tp-common-black); list-style: none; margin-bottom: 4px; } .tp-service-wd-item { border-top: 1px solid var(--tp-border-1); padding-top: 35px; padding-bottom: 20px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-service-wd-item-title span { margin-right: 20px; } } @media (max-width: 574.98px) { .tp-service-wd-item-title span { margin-bottom: 3px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-service-wd-border svg { width: 100%; } } @media (max-width: 574.98px) { .tp-service-wd-title-wrap p { margin-left: 0; } .tp-service-wd-title-wrap p br { display: none; } } .tp-service-sa-border { width: 100%; } .tp-service-sa-border svg { width: 100%; } .tp-service-sa-item { padding: 45px 35px 38px 35px; } .tp-service-sa-item-icon svg { transition: all 0.4s ease; } .tp-service-sa-item-text { opacity: 0; visibility: hidden; transition: all 0.4s ease; } .tp-service-sa-item:hover .tp-service-sa-item-icon svg { color: var(--tp-common-nights); } .tp-service-sa-item:hover .tp-service-sa-item-text { opacity: 1; visibility: visible; } .tp-service-sa-pagenation { text-align: center; } .tp-service-sa-pagenation .swiper-pagination-bullet { width: 10px; height: 10px; background: transparent; border: 1px solid var(--tp-grey-2); opacity: 1; } .tp-service-sa-pagenation .swiper-pagination-bullet-active { background: var(--tp-common-nights); border-color: var(--tp-common-nights); } @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), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-service-pp-content p br { display: none; } } .tp-service-pp-category span { font-weight: 500; font-size: 14px; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 100px; background: #0d0d0d; padding: 3px 24px; transition: all 0.4s ease; display: inline-block; margin-right: 5px; margin-bottom: 8px; color: var(--tp-common-white); font-family: var(--tp-ff-heading); } .tp-service-pp-category span:hover { border-color: #252526; background-color: #252526; } .tp-service-pp-item { padding: 40px; border-top: 1px dashed #8d838373; background-color: var(--tp-common-black); } @media (max-width: 574.98px) { .tp-service-pp-item { padding: 40px 15px; } } .tp-service-pp-item:last-child { border-bottom: 1px dashed #8d838373; } .tp-service-pp-number { padding-left: 180px; } @media only screen and (min-width: 1400px) and (max-width: 1599px) { .tp-service-pp-number { padding-left: 60px; } } @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), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-service-pp-number { padding: 0; } } .tp-service-pp-title-box { padding: 0px 220px; padding-bottom: 30px; } @media only screen and (min-width: 1400px) and (max-width: 1599px) { .tp-service-pp-title-box { padding: 0px 100px !important; padding-bottom: 30px !important; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .tp-service-pp-title-box { padding: 0px 50px !important; padding-bottom: 30px !important; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-service-pp-title-box { padding: 0px 15px !important; padding-bottom: 30px !important; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-service-pp-thumb { margin-top: 30px; } .tp-service-pp-thumb img { width: 100%; } } .tp-service-hero-spacing { padding-top: 220px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-service-hero-spacing { padding-top: 150px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-service-hero-right { margin-top: 0; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-service-hero-right p br { display: none; } } .tp-service-hero-shape { position: absolute; bottom: -40px; right: 145px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-service-hero-shape { right: 0; } } .tp-service-hero-shape-2 { right: 0; bottom: 0; width: 21%; z-index: -1; } .tp-service-inner-item { border-top: 1px dashed var(--tp-border-1); background-color: var(--tp-common-white); } .tp-service-inner-item .tp-service-pp-category span { background: transparent; border: 1px solid var(--tp-border-1); color: var(--tp-common-black); } .tp-service-inner-item .tp-service-pp-category span:hover { background: var(--tp-common-black); color: var(--tp-common-white); border-color: var(--tp-common-black); } .tp-service-details-icon { position: absolute; top: -52px; left: -69px; z-index: -1; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-service-details-icon { display: 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), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-service-details-content { margin-right: 0; } .tp-service-details-content p br { display: none; } } .tp-service-details-content ul li { list-style: none; display: flex; margin-bottom: 13px; } .tp-service-details-content ul li i { font-size: 18px; color: var(--tp-grey-1); margin-right: 10px; margin-top: 4px; } .tp-service-details-content ul li p { font-size: 18px; line-height: 144%; font-weight: 300; margin-bottom: 0; } .tp-service-details-content ul li b { font-weight: 700; font-family: var(--tp-ff-heading); color: var(--tp-common-black); } .tp-service-details-content-2 ul li i { color: var(--tp-common-black-5); margin-top: 2px; margin-right: 16px; } .tp-service-details-content-2 ul li p { color: rgba(17, 17, 18, 0.8); font-weight: 400; font-family: var(--tp-ff-dm); } .tp-service-details-content-2 ul li b { font-weight: 700; color: var(--tp-common-black-5); font-family: var(--tp-ff-dm); } .tp-service-cst-content { backdrop-filter: blur(100px); border-radius: 24px; padding: 55px 40px 52px 40px; position: absolute; margin: 32px; margin-right: 60px; bottom: 0; left: 0; right: 0; transition: all 0.4s ease; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-service-cst-content { margin-right: 32px; } } @media (max-width: 574.98px) { .tp-service-cst-content { margin: 10px; padding: 25px 10px 22px 20px; position: inherit; margin-top: -93px; } } .tp-service-cst-item { border-right: 1px solid #26433E; padding-right: 27px; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-service-cst-item { padding-right: 0; border: none; } } .tp-service-cst-item-border { border-bottom: 1px solid #DBE1DD; padding-bottom: 24px; margin-bottom: 20px; } @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), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-service-cst-item-border br { display: none; } } .tp-service-cst-item:hover .tp-service-cst-content { background: var(--tp-common-green-2); } .tp-service-cst-item:hover .tp-service-cst-item-border { border-color: #A4D519; } .tp-service-cst-item:hover .tp-service-cst-thumb img { transform: scale(1.1); } .tp-service-cst-thumb { overflow: hidden; border-radius: 16px; } .tp-service-cst-thumb img { border-radius: 16px; transition: all 0.6s ease; } .tp-service-cst-slider { margin-right: -490px; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-service-cst-slider { margin-right: 0; } } .tp-service-cst-slider-wrap { border-top: 1px solid #26433E; padding-top: 60px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-service-cst-info { margin-left: 12px; margin-right: 12px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-service-cst-info p br { display: none; } } .tp-service-cst-info-list ul li { font-family: var(--tp-ff-dm); font-weight: 500; font-size: 18px; list-style: none; color: var(--tp-grey-5); display: flex; } .tp-service-cst-info-list ul li:not(:last-child) { margin-bottom: 13px; } .tp-service-cst-info-list ul li span { margin-right: 10px; transform: translateY(-2px); } @media only screen and (min-width: 1400px) and (max-width: 1599px) { .tp-service-cst-title-wrap { margin-right: 80px; } } @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), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-service-cst-title-wrap { margin-right: 0; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-service-cst-title-wrap { margin-left: 0; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-service-cst-top-content p br { display: none; } } .tp-service-cst-2-wrap { border-top: 1px solid #E1E5E4; } .tp-service-cst-2-wrap .tp-service-cst-item { border-right: 1px solid #E1E5E4; } .tp-service-cst-2-info .tp-service-cst-info-list ul li { color: var(--tp-common-black-5); } .tp-service-cst-3-wrap .tp-service-cst-item { border-right: 0; padding-right: 0; } .tp-service-it-shape { position: absolute; top: -100px; right: 90px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-service-it-shape { display: none; } } .tp-service-it-item { background: #121212; padding: 56px 60px 105px 60px; border-radius: 16px; } @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), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-service-it-item { padding: 46px 30px 75px 30px; } } .tp-service-it-item:hover .tp-service-it-circale { filter: saturate(1); } .tp-service-it-icon { border-radius: 60px; border: 1px solid rgba(243, 241, 242, 0.1); width: 50px; height: 50px; display: flex; justify-content: center; align-items: center; } .tp-service-it-para { color: #C6C4C5; line-height: 162%; } .tp-service-it-btn { border-bottom: 1px solid #252525; padding-bottom: 32px; margin-bottom: 24px; } .tp-service-it-tag a { font-family: var(--tp-ff-inter); font-weight: 500; font-size: 14px; display: inline-block; letter-spacing: -0.03em; text-transform: uppercase; color: #C6C4C5; border: 1px solid rgba(243, 241, 242, 0.1); border-radius: 50px; padding: 4px 9px; line-height: 1; margin-right: 8px; margin-bottom: 13px; } .tp-service-it-tag a:hover { background: var(--tp-common-green-2); color: var(--tp-common-black); border-color: var(--tp-common-green-2); } .tp-service-it-circale { position: absolute; bottom: -60px; right: -40px; z-index: -1; filter: saturate(0); transition: all 0.2s ease; } .tp-service-it-pagenation { text-align: center; } .tp-service-it-pagenation span { width: 10px; height: 10px; background: transparent; background: #252525; opacity: 1; } .tp-service-it-pagenation span.swiper-pagination-bullet-active { background: var(--tp-common-green-2); } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-service-it-subtitle { margin-bottom: 20px; } } .tp-service-pb-item { border: none; padding-top: 0; padding-bottom: 75px; position: relative; z-index: 4; } .tp-service-pb-item span { transition: all 0.4s ease; } .tp-service-pb-item:hover span { color: var(--tp-theme-secondary); } .tp-service-pb-item:hover a { color: var(--tp-theme-secondary); } .tp-service-pb-thumb { width: 397px !important; height: 253px !important; border-radius: 30px; } .tp-service-pb-thumb img { width: 397px !important; height: 253px !important; border-radius: 30px; } @media (max-width: 574.98px) { .tp-service-pb-thumb img { width: 310px !important; } } .tp-service-pb-wrap { margin-left: -22px; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-service-pb-wrap { margin-left: 0; } } .tp-service-pb-border { border-bottom: 1px solid #E7E4DE; } .tp-service-ai-count { color: rgba(51, 51, 51, 0.3); transition: all 0.4s ease; background: linear-gradient(90deg, #201b17 0%, #f96501 100%) left no-repeat, rgba(51, 51, 51, 0.3); background-size: auto, auto; background-clip: border-box, border-box; background-size: 0% 100%; background-clip: text; -webkit-background-clip: text; } @media (max-width: 574.98px) { .tp-service-ai-count { margin-right: 10px; } } .tp-service-ai-count:hover { background-size: 100% 100%; } .tp-service-ai-title { color: rgba(51, 51, 51, 0.3); } .tp-service-ai-title a { background: linear-gradient(90deg, #201b17 0%, #f96501 100%) left no-repeat, rgba(51, 51, 51, 0.3); background-size: auto, auto; background-clip: border-box, border-box; background-size: 0% 100%; background-clip: text; -webkit-background-clip: text; } .tp-service-ai-item:hover .tp-service-ai-count { background-size: 100% 100%; } .tp-service-ai-item:hover .tp-service-ai-title a { background-size: 100% 100%; } .tp-service-ai-ring { bottom: 480px; right: -315px; animation: tp_animation_spin 9s linear infinite; z-index: -1; width: 32%; } @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), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-service-ai-ring { width: 40%; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-service-ai-ring { display: none; } } .tp-service-ai-thumb { position: relative; transform: scale3d(1, 1, 1); transition: transform 0.65s cubic-bezier(0.23, 1, 0.32, 1); } .tp-service-ai-thumb::after { position: absolute; content: ""; background: linear-gradient(180deg, rgba(17, 17, 18, 0) 12.5%, #111112 100%); width: 100%; height: 100%; top: 0; left: 0; border-radius: 12px; -webkit-transition: all 0.4s ease 0.3s 0s ease-out; -moz-transition: all 0.4s ease 0.3s 0s ease-out; -ms-transition: all 0.4s ease 0.3s 0s ease-out; -o-transition: all 0.4s ease 0.3s 0s ease-out; transition: all 0.4s ease 0.3s 0s ease-out; } .tp-service-ai-thumb img { width: 100%; border-radius: 12px; transform: scale(1.2); transition: transform 0.65s cubic-bezier(0.23, 1, 0.32, 1); width: 100%; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-service-ai-btn { margin-bottom: 0px; } } .tp-service-ai-wrap { border-radius: 24px; } .tp-service-ai-wrap:hover .tp-service-thumb::after { opacity: 1; } .tp-service-ai-content-2 { position: absolute; top: 50%; transform: translateY(-45%); left: 0; right: 0; text-align: center; opacity: 0; transition: all 0.4s ease; } .tp-service-ai-box { transform: scale3d(1, 1, 1); transition: transform 0.65s cubic-bezier(0.23, 1, 0.32, 1); border-radius: 24px; } .tp-service-ai-box:hover { transform: scale3d(1.09, 1.09, 1); } .tp-service-ai-box:hover .tp-service-ai-thumb img { transform: scale(1); } .tp-service-ai-box:hover .tp-service-ai-content-2 { transform: translateY(-50%); opacity: 1; } .tp-service-ai-main { border-radius: 24px; -webkit-transition: all 0.3s 0s ease-out; -moz-transition: all 0.3s 0s ease-out; -ms-transition: all 0.3s 0s ease-out; -o-transition: all 0.3s 0s ease-out; transition: all 0.3s 0s ease-out; } .tp-service-ai-main:hover .tp-service-ai-thumb { transform: scale3d(1.09, 1.09, 1); } .tp-service-md-item { box-shadow: -15px 1px 24px 38px rgba(0, 0, 0, 0.01); border-radius: 16px; padding: 60px 100px 60px 60px; transition: all 0.4s ease; } @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), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-service-md-item { padding: 40px 40px 40px 40px; } } .tp-service-md-item:hover { background: var(--tp-theme-1); transform: scaleY(1.04); } .tp-service-md-item:hover .tp-service-md-icon svg { color: var(--tp-common-white); } .tp-service-md-item:hover .tp-service-md-title { color: var(--tp-common-white); } .tp-service-md-item:hover .tp-service-md-text { color: var(--tp-common-white); } .tp-service-md-item:hover .tp-service-md-btn { color: var(--tp-common-white); } @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), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-service-md-item-wrap { margin-left: 0; } } .tp-service-md-icon { width: 70px; height: 70px; } .tp-service-md-icon svg { transition: all 0.4s ease; } @media only screen and (min-width: 1400px) and (max-width: 1599px) { .tp-service-md-title { font-size: 38px; } } @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), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-service-md-title { font-size: 35px; } } .tp-service-vp-bigtitle { font-size: 660px; color: #dadada; font-weight: 800; line-height: 73%; } @media only screen and (min-width: 1700px) and (max-width: 1800px), only screen and (min-width: 1600px) and (max-width: 1700px) { .tp-service-vp-bigtitle { font-size: 600px; } } @media only screen and (min-width: 1400px) and (max-width: 1599px) { .tp-service-vp-bigtitle { font-size: 480px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .tp-service-vp-bigtitle { font-size: 440px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tp-service-vp-bigtitle { font-size: 360px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .tp-service-vp-bigtitle { font-size: 270px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .tp-service-vp-bigtitle { font-size: 200px; } } @media (max-width: 574.98px) { .tp-service-vp-bigtitle { font-size: 120px; } } .tp-service-vp-para { color: rgba(17, 17, 18, 0.8); } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-service-vp-para br { display: none; } } .tp-service-vp-btn { border: 1px solid rgba(17, 17, 18, 0.1); width: 60px; height: 60px; transition: all 0.6s ease; flex: 0 0 auto; } .tp-service-vp-item { position: relative; width: 73%; margin: 0 auto; padding-left: 33px; padding-right: 33px; padding-bottom: 44px; transition-duration: 0.3s; transition-property: opacity; transition-timing-function: cubic-bezier(0.4, 0, 1, 1); border-bottom: 1px solid rgba(17, 17, 18, 0.1); } @media only screen and (min-width: 768px) and (max-width: 991px) { .tp-service-vp-item { width: 690px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-service-vp-item { width: 100%; padding-left: 0; padding-right: 0; padding-bottom: 24px; } } .tp-service-vp-item:hover { border-color: var(--tp-common-black); } .tp-service-vp-item:hover .tp-service-vp-btn { transform: rotate(360deg); background: var(--tp-common-black); color: var(--tp-common-white); } .tp-service-vp-item .tp-reveal-bg { width: 220px; height: 220px; border-radius: 100%; } .tp-service-vp-wrap .row [class*=col]:not(:first-child) .tp-service-vp-item { padding-top: 50px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-service-vp-wrap .row [class*=col]:not(:first-child) .tp-service-vp-item { padding-top: 20px; } } .image-wrapper { width: 330px; height: 330px; opacity: 0; position: absolute; overflow: hidden; transform: translate(-50%, -50%); top: 0; left: 0; pointer-events: none; z-index: 3; } .image-wrapper .image-slider { display: flex; flex-direction: column; } .image-wrapper img { width: 330px; height: 330px; object-fit: cover; object-position: center; } .tp_text_invert > div { background-image:linear-gradient(to right, #000000 50%, #ffffff 50%); background-size: 200% 100%; background-position: 100%; color: transparent; background-clip: text; -webkit-background-clip: text; } .tp_text_invert.invert-black > div { background-image: linear-gradient(to right, #030303 50%, #525252 50%); } .tp_text_invert.invert-black-2 > div { background-image: linear-gradient(to right, #030303 50%, #aaa 50%); } .tp_text_invert.invert-primary > div { background-image: linear-gradient(to right, #c4ee18 50%, #fff 50%); } .tp_text_invert.invert-white > div { background-image: linear-gradient(to right, #f3f1f2 50%, #AFB7B6 50%); } .tp_text_invert.invert-black-3 > div { background-image: linear-gradient(to right, #10302a 50%, #a0a8a6 50%); } .tp_text_invert.invert-black-5 > div { background-image: linear-gradient(to right, #111112 50%, #707071 50%); } .tp_text_invert.invert-black-6 > div { background-image: linear-gradient(to right, #111112 50%, #dadada 50%); } #service-bg-img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--tp-common-white); } #service-bg-img .service-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-position: center; background-size: cover; background-repeat: no-repeat; visibility: hidden; opacity: 0; transition: all 0.9s ease; -webkit-transform: scale(1.04, 1.04); -moz-transform: scale(1.04, 1.04); -ms-transform: scale(1.04, 1.04); -o-transform: scale(1.04, 1.04); transform: scale(1.04, 1.04); transform-origin: 50% 50%; } #service-bg-img .service-bg::after { position: absolute; content: ""; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(32, 40, 45, 0.5); } #service-bg-img.service-img-1 .service-img-1 { visibility: visible; opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } #service-bg-img.service-img-2 .service-img-2 { visibility: visible; opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } #service-bg-img.service-img-3 .service-img-3 { visibility: visible; opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } #service-bg-img.service-img-4 .service-img-4 { visibility: visible; opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } #service-bg-img.service-img-5 .service-img-5 { visibility: visible; opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } #service-bg-img.service-img-6 .service-img-6 { visibility: visible; opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } #service-bg-img.service-img-7 .service-img-7 { visibility: visible; opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } #service-bg-img.service-img-8 .service-img-8 { visibility: visible; opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } #service-bg-img.service-img-9 .service-img-9 { visibility: visible; opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } #service-bg-img.service-img-10 .service-img-10 { visibility: visible; opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } #service-bg-img.service-img-11 .service-img-11 { visibility: visible; opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } #service-bg-img.service-img-12 .service-img-12 { visibility: visible; opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } #service-bg-img.service-img-13 .service-img-13 { visibility: visible; opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } #service-bg-img.service-img-14 .service-img-14 { visibility: visible; opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } #service-bg-img.service-img-15 .service-img-15 { visibility: visible; opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } #service-bg-img.service-img-16 .service-img-16 { visibility: visible; opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } #service-bg-img.service-img-17 .service-img-17 { visibility: visible; opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } #service-bg-img.service-img-18 .service-img-18 { visibility: visible; opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } #service-bg-img.service-img-19 .service-img-19 { visibility: visible; opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } #service-bg-img.service-img-20 .service-img-20 { visibility: visible; opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } #service-bg-img.service-img-21 .service-img-21 { visibility: visible; opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } #service-bg-img.service-img-22 .service-img-22 { visibility: visible; opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } #service-bg-img.service-img-23 .service-img-23 { visibility: visible; opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } #service-bg-img.service-img-24 .service-img-24 { visibility: visible; opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } /*----------------------------------------*/ /* 7.32 video css start /*----------------------------------------*/ .tp-video-content { padding: 40px 40px 47px 40px; } .tp-video-spacing { padding-top: 400px; } @media only screen and (min-width: 1400px) and (max-width: 1599px) { .tp-video-spacing { padding-top: 300px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .tp-video-spacing { padding-top: 200px; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-video-spacing { padding-top: 150px; } } .tp-video-thumb { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; } .tp-video-main .popup-video { background: var(--tp-theme-primary); width: 50px; height: 50px; color: var(--tp-common-black); } .tp-video-2-main { transform: translateY(-7px); } @media (max-width: 574.98px) { .tp-video-2-main { margin-top: 15px; } } .tp-video-cst-title { line-height: 116%; color: #395953; } .tp-video-cst-title:hover { color: var(--tp-grey-5); } .tp-video-cst-main { line-height: 1; } .tp-video-cst-main video { width: 100%; line-height: 1; height: 475px; object-fit: cover; margin-bottom: -2px; } @media only screen and (min-width: 1400px) and (max-width: 1599px) { .tp-video-cst-main video { height: 429px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) { .tp-video-cst-main video { height: 370px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .tp-video-cst-main video { height: 290px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .tp-video-cst-main video { height: 230px; } } @media (max-width: 574.98px) { .tp-video-cst-main video { height: 170px; } } .tp-video-cst-mask { position: absolute; bottom: 0; left: -1px; width: 101%; z-index: 2; right: -1px; height: 480px; } @media only screen and (min-width: 1400px) and (max-width: 1599px) { .tp-video-cst-mask { height: 430px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) { .tp-video-cst-mask { height: 380px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .tp-video-cst-mask { height: 300px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .tp-video-cst-mask { height: 240px; } } @media (max-width: 574.98px) { .tp-video-cst-mask { height: 180px; } } .tp-video-cst-mask img { text-align: center; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-video-cst-mask img { height: 100%; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-video-cst-wrap { margin-top: 100px; } } .tp-video-cst-2-content { padding-top: 50px; padding-bottom: 350px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) { .tp-video-cst-2-content { padding-bottom: 250px; } } @media (max-width: 574.98px) { .tp-video-cst-2-content { padding-bottom: 180px; } } .tp-video-cst-2-content .tp-video-content { padding: 40px 50px 47px 50px; } @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), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-video-cst-2-content .tp-video-content { padding: 30px 30px 37px 30px; margin-right: 0; } } .tp-video-md-spacing { height: 860px; width: 100%; overflow: hidden; } @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) { .tp-video-md-spacing { height: 660px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-video-md-spacing { height: 460px; } } .tp-video-md-bg { width: 100%; height: 100%; object-fit: cover; } .tp-video-md-wrap { position: absolute; top: 50%; transform: translateY(-50%); left: 0; right: 0; display: flex; justify-content: center; } .tp-video-md-wrap .tp-video-md-btn { width: 150px; height: 150px; background: var(--tp-theme-1); display: flex; justify-content: center; align-items: center; border-radius: 50%; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-video-md-wrap .tp-video-md-btn { width: 100px; height: 100px; } } .tp-video-vp-img-inner-2 { height: 820px; } @media only screen and (min-width: 1400px) and (max-width: 1599px) { .tp-video-vp-img-inner-2 { height: 800px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .tp-video-vp-img-inner-2 { height: 780px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tp-video-vp-img-inner-2 { height: 500px; margin-top: 120px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .tp-video-vp-img-inner-2 { height: 400px; margin-top: 170px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-video-vp-img-inner-2 { height: 350px; } } .tp-video-vp-img-inner-2 video { height: 100%; width: 100%; margin: 0 auto; background-position: center center; background-size: cover; object-fit: cover; } /*----------------------------------------*/ /* 7.21 portfolio css start /*----------------------------------------*/ :root { --numOfSlides: 5; --slidingAT: 1.3s; --controlSize: 60px; } .tp-portfolio-sectitle { font-size: 145px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-portfolio-sectitle { font-size: 70px; } } .tp-portfolio-sectitle .borders { width: 312px; height: 6px; background: var(--tp-common-black); display: inline-block; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-portfolio-sectitle .borders { width: 120px; } } .tp-portfolio-tag span { font-family: var(--tp-ff-heading); font-weight: 700; font-size: 15px; color: #000000; /* border: 1px solid var(--tp-border-1); */ border-radius: 100px; display: inline-block; padding: 6px 26px; margin-right: 13px; transition: all 0.4s ease; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-portfolio-tag span { margin-bottom: 5px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-portfolio-title-wrap { margin-bottom: 20px; } } .tp-portfolio-para { margin-bottom: -54px; z-index: 1; position: relative; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-portfolio-para { margin-bottom: 40px; } } .tp-portfolio-thumb.thumb-1 { width: 100%; overflow: hidden; } .tp-portfolio-thumb.thumb-2 { height: 470px; width: 100%; overflow: hidden; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-portfolio-thumb.thumb-2 { height: 300px; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-portfolio-item { margin-left: 0; margin-right: 0; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-portfolio-item { margin-top: 0; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-portfolio-2-para { padding-top: 30px; } } .tp-portfolio-2-para .tp-portfolio-tag span { font-weight: 500; font-family: var(--tp-ff-p); } .tp-portfolio-2-content .tp-portfolio-tag span { margin-right: 0; font-weight: 500; font-family: var(--tp-ff-p); } .tp-portfolio-2-shape { position: absolute; bottom: -345px; right: 0; z-index: -1; width: 20%; } .tp-portfolio-2-item{ background-color: #EDF0F5; } .tp-portfolio-2-item:hover .tp-portfolio-2-thumb img { transform: scale(1.1); } .tp-portfolio-2-thumb { overflow: hidden; } .tp-portfolio-2-thumb img { transition: all 0.4s ease; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-portfolio-2-slider-active { width: 300px !important; } } .tp-portfolio-wd-title { font-size: 145px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .tp-portfolio-wd-title { font-size: 100px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-portfolio-wd-title { font-size: 70px; } } .tp-portfolio-wd-item img { border-radius: 20px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-portfolio-wd-item img { height: 350px; object-fit: cover; } } .tp-portfolio-wd-thumb { position: relative; } .tp-portfolio-wd-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%, rgba(20, 20, 20, 0.86) 100%); } .tp-portfolio-wd-category { position: absolute; top: 45px; left: 50px; z-index: 2; } @media (max-width: 574.98px) { .tp-portfolio-wd-category { top: 15px; left: 15px; } } .tp-portfolio-wd-category.portfolio-meta { left: auto; right: 50px; } @media (max-width: 574.98px) { .tp-portfolio-wd-category.portfolio-meta { right: 15px; } } .tp-portfolio-wd-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); font-family: var(--tp-ff-heading); } @media (max-width: 574.98px) { .tp-portfolio-wd-category span { font-size: 12px; padding: 7px 7px; } } .tp-portfolio-wd-category span:hover { color: var(--tp-common-black); border-color: var(--tp-common-white); background-color: var(--tp-common-white); } .tp-portfolio-wd-content { position: absolute; bottom: 50px; left: 0; right: 0; display: inline-block; text-align: center; } @media (max-width: 574.98px) { .tp-portfolio-wd-content { padding: 10px 20px 20px 20px; } } @media (max-width: 574.98px) { .tp-portfolio-wd-content { bottom: 5px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .tp-portfolio-wd-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) { .tp-portfolio-wd-area { padding-bottom: 110px; } } @media (max-width: 574.98px) { .tp-portfolio-wd-area { padding-bottom: 0px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-portfolio-wd-tag { margin-left: 0; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-portfolio-wd-tag svg { display: none; } } .tp-portfolio-sa-title { font-size: 145px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tp-portfolio-sa-title { font-size: 110px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .tp-portfolio-sa-title { font-size: 90px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-portfolio-sa-title { font-size: 85px; padding: 17px 0; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-portfolio-sa-title-wrap > span { margin-left: 0; margin-bottom: 10px; margin-right: 0; } } .tp-portfolio-sa-shape { position: absolute; top: 0; right: 0; z-index: -1; width: 9%; } .tp-portfolio-sa-item-tag { padding: 2px 16px; border-radius: 30px; } .tp-portfolio-pp-border { margin-right: 110px; } @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), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-portfolio-pp-border { margin-right: 0; } } .tp-portfolio-pp-border svg { width: auto; } .tp-portfolio-pp-content .positions { background: var(--tp-theme-primary); display: inline-block; border-radius: 100px; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) { .tp-portfolio-showcase-spacing { padding-top: 130px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-portfolio-showcase-spacing { padding-top: 120px; } } .tp-portfolio-showcase-nav { display: flex; justify-content: space-between; } .tp-portfolio-showcase-nav span { font-family: var(--tp-ff-heading); font-weight: 500; font-size: 15px; text-transform: uppercase; color: var(--tp-common-black); display: flex; align-items: center; border: 1px solid var(--tp-border-1); border-radius: 100px; padding: 6px 17px; transition: all 0.4s ease; } .tp-portfolio-showcase-nav span:hover { background: var(--tp-common-black); color: var(--tp-common-white); border-color: var(--tp-common-black); } .tp-portfolio-showcase-pagenation { padding-top: 50px; } .tp-portfolio-showcase-slide-active .tp-portfolio-2-content { opacity: 0; visibility: hidden; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-portfolio-showcase-slide-active .tp-portfolio-2-content { padding: 0 12px; } } .tp-portfolio-showcase-slide-active .swiper-slide.swiper-slide-active .tp-portfolio-2-content { -webkit-animation: tdfadeUp 1s 0.3s forwards; animation: tdfadeUp 1s 0.3s forwards; animation-fill-mode: both; opacity: 1; visibility: visible; } .tp-portfolio-showcase-full-subtitle { font-weight: 400; font-size: 46px; line-height: 0.87; margin-bottom: 40px; display: inline-block; letter-spacing: 0.01em; color: var(--tp-common-white-2); font-family: var(--tp-ff-morganite-semibold); display: inline-block; } .tp-portfolio-showcase-full-bg { padding: 207px 30px 220px 30px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-portfolio-showcase-full-bg { padding: 160px 30px 150px 30px; } } .tp-portfolio-outcome-bost { display: flex; gap: 22px; flex-wrap: wrap; } .tp-portfolio-outcome-bost span { border: 1px solid var(--tp-border-1); border-radius: 100px; display: inline-block; padding: 22px 40px 17px 40px; width: 312px; margin-bottom: 10px; } @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), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-portfolio-outcome-bost span { width: 300px; } } @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), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-portfolio-outcome-content { margin-right: 0; } } @media (max-width: 574.98px) { .tp-portfolio-outcome-title { margin-bottom: 20px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-portfolio-navigation-btn { justify-content: center; } } .tp-portfolio-navigation-btn img { flex: 0 0 auto; width: 100px; } @media (max-width: 574.98px) { .tp-portfolio-navigation-btn img { width: 70px; margin-right: 15px; } } .tp-portfolio-navigation-wrap { border: 1px solid var(--tp-border-1); padding: 35px 40px 10px 40px; } @media (max-width: 574.98px) { .tp-portfolio-navigation-wrap { padding: 25px 20px 10px 20px; } } .tp-portfolio-navigation-grid a { color: var(--tp-grey-1); opacity: 0.3; } .tp-portfolio-navigation-grid a:hover { color: var(--tp-common-black); opacity: 1; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tp-portfolio-navigation-title br { display: none; } } .tp-portfolio-cst-subtitle-wrap { border-bottom: 1px solid #E1E5E4; } .tp-portfolio-cst-tag { border-radius: 100px; padding: 1px 20px; } .tp-portfolio-cst-btn { border-radius: 50px; border: 1px solid rgba(16, 48, 42, 0.1); width: 50px; height: 50px; display: flex; justify-content: center; align-items: center; flex: 0 0 auto; } .tp-portfolio-cst-item { border-bottom: 1px solid #E1E5E4; position: relative; margin-bottom: 32px; } .tp-portfolio-cst-item::before { position: absolute; content: ""; width: 0; height: 1px; background: var(--tp-common-black-1); bottom: 0; left: auto; right: 0; transition: all 0.4s ease; } .tp-portfolio-cst-item:hover::before { width: 100%; left: 0; right: auto; } .tp-portfolio-cst-item:hover .tp-portfolio-cst-btn { background: var(--tp-common-green-2); border-color: var(--tp-common-green-2); transform: rotate(-45deg); } .tp-portfolio-cst-item.active::before { width: 100%; left: 0; right: auto; } .tp-portfolio-cst-item.active .tp-portfolio-cst-btn { background: var(--tp-common-green-2); border-color: var(--tp-common-green-2); transform: rotate(-45deg); } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) { .tp-portfolio-cst-img-wrapper { height: 440px; } } @media (max-width: 574.98px) { .tp-portfolio-cst-img-wrapper { height: 300px; } } .tp-portfolio-cst-img-wrapper .hover-image { display: inline-block; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-portfolio-cst-img-wrapper .hover-image { height: 100%; } } .tp-portfolio-cst-img-wrapper .hover-image .thumb { object-fit: cover; opacity: 0; position: absolute; top: 0; left: -150px; visibility: hidden; transition: all 0.6s ease; border-radius: 20px; } .tp-portfolio-cst-img-wrapper .hover-image.active .thumb { opacity: 1; left: 0; visibility: visible; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-portfolio-cst-content { height: 100%; } } @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), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-portfolio-cst-content p br { display: none; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-portfolio-cst-list-wrap { margin-left: 0; } } .tp-portfolio-details-shedule { background: var(--tp-common-white); border: 1px solid var(--tp-border-1); padding: 43px 40px 50px 40px; } @media (max-width: 574.98px) { .tp-portfolio-details-shedule { padding: 33px 20px 40px 20px; } } .tp-portfolio-details-shedule ul { margin-bottom: 47px; } .tp-portfolio-details-shedule ul li { font-family: var(--tp-ff-heading); font-weight: 500; font-size: 18px; color: var(--tp-common-black); list-style: none; padding-bottom: 15px; display: flex; } .tp-portfolio-details-shedule ul li span { width: 180px; flex: 0 0 auto; display: inline-block; } @media (max-width: 574.98px) { .tp-portfolio-details-shedule ul li span { width: 130px; } } .tp-portfolio-details-shedule-btn { background: var(--tp-common-white-2); padding: 15px 20px; display: block; text-align: center; } .tp-portfolio-details-shedule-btn:hover { background: var(--tp-common-black); color: var(--tp-common-white); } .tp-portfolio-details-shedule-spacing { margin-top: -247px; position: relative; z-index: 2; } @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), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-portfolio-details-shedule-spacing { margin-top: 50px; } } .tp-portfolio-details-line { line-height: 1; margin-top: -10px; } .tp-portfolio-details-line svg { width: 100%; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .tp-portfolio-details-content { margin-right: 50px; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-portfolio-details-content { margin-right: 0px; } } .tp-portfolio-details-2-cetagory ul li { list-style: none; display: flex; } .tp-portfolio-details-2-cetagory ul li:not(:last-child) { padding-bottom: 15px; margin-bottom: 15px; border-bottom: 1px solid var(--tp-border-1); } .tp-portfolio-details-2-cetagory ul li span { font-family: var(--tp-ff-dm); font-weight: 500; font-size: 18px; color: var(--tp-common-black-5); } .tp-portfolio-details-2-cetagory ul li span.spacing { width: 240px; display: inline-block; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-portfolio-details-2-cetagory ul li span.spacing { width: 160px; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-portfolio-details-2-cetagory-wrap p { margin-right: 0; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-portfolio-details-2-thumb { margin-left: 0; margin-right: 0; } } .tp-portfolio-details-2-thumb img { border-radius: 16px; } .tp-portfolio-details-2-challenge { margin-right: 0; } .tp-portfolio-details-2-border { border-bottom: 1px solid var(--tp-border-1); } .tp-portfolio-details-2-branding { margin-right: 140px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-portfolio-details-2-branding { margin-left: 0; margin-right: 0; } } .tp-portfolio-details-2-branding ul li b { font-family: var(--tp-ff-dm); } .tp-portfolio-details-2-branding ul li p { font-family: var(--tp-ff-dm); font-size: 18px; line-height: 144%; letter-spacing: -0.02em; color: var(--tp-grey-1); } .tp-portfolio-details-2-tag { display: flex; gap: 7px; flex-wrap: wrap; } .tp-portfolio-details-2-tag a { font-family: var(--tp-ff-dm); font-weight: 500; font-size: 16px; text-transform: uppercase; color: var(--tp-common-black); border-radius: 50px; padding: 8px 13px; background: #f6f6f9; display: inline-block; line-height: 1; } .tp-portfolio-details-2-tag a:hover { background: var(--tp-common-black-1); color: var(--tp-common-white); } .tp-portfolio-details-2-tag-border { border-bottom: 1px solid var(--tp-border-1); } .tp-portfolio-details-2-social a { margin-right: 0; } .tp-portfolio-details-2-navigation { padding: 0; border: none; border-bottom: 1px solid var(--tp-border-1); } .tp-portfolio-details-2-navigation .tp-portfolio-navigation-btn img { border-radius: 16px; width: auto; } .tp-portfolio-details-2-subtitle { border: none; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-portfolio-details-2-overview-wrap { margin-left: 0; margin-right: 0; } } .tp-portfolio-it-thumb .service-bg { position: relative; } .tp-portfolio-it-thumb .service-bg::after { position: absolute; content: ""; left: 0; top: 0; width: 100%; height: 100%; background: var(--tp-common-black-1); opacity: 0.6; } .tp-portfolio-it-tag a { font-family: var(--tp-ff-inter); font-weight: 500; font-size: 16px; text-transform: uppercase; color: var(--tp-grey-5); border: 1px solid rgba(243, 241, 242, 0.1); display: inline-block; padding: 0px 15px; border-radius: 100px; margin-right: 5px; } @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), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-portfolio-it-tag a { margin-bottom: 5px; } } .tp-portfolio-it-tag a:hover { background: var(--tp-common-green-2); color: var(--tp-common-black-1); } .tp-portfolio-it-inner { opacity: 0; visibility: hidden; -webkit-transition: all 0.4s ease 0.3s 0s ease-out; -moz-transition: all 0.4s ease 0.3s 0s ease-out; -ms-transition: all 0.4s ease 0.3s 0s ease-out; -o-transition: all 0.4s ease 0.3s 0s ease-out; transition: all 0.4s ease 0.3s 0s ease-out; } .tp-portfolio-it-content { transform: translateY(180px); transition: all 0.4s ease; } @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), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-portfolio-it-content { transform: translateY(100px); } } @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), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-portfolio-it-content-inner { margin-bottom: 40px; } } .tp-portfolio-it-wrap { padding: 594px 50px 50px 50px; border-right: 1px solid rgba(255, 255, 255, 0.2); transition: all 0.5s ease; overflow: hidden; } @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), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-portfolio-it-wrap { padding: 394px 20px 50px 20px; height: 100%; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-portfolio-it-wrap { border-bottom: 1px solid rgba(255, 255, 255, 0.2); } } @media only screen and (min-width: 768px) and (max-width: 991px) { .tp-portfolio-it-wrap { padding: 294px 20px 50px 20px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-portfolio-it-wrap { padding: 194px 20px 50px 20px; border-right: 0; } } .tp-portfolio-it-wrap:hover { backdrop-filter: blur(8px); background: rgba(16, 48, 42, 0.2); } .tp-portfolio-it-wrap:hover .tp-portfolio-it-content { transform: translateY(0); } .tp-portfolio-pb-tag a { border: 1px solid rgba(243, 241, 242, 0.1); border-radius: 100px; padding: 0px 15px; } .tp-portfolio-pb-tag a:hover { background: var(--tp-theme-secondary); color: var(--tp-common-white); } .tp-portfolio-pb-content { position: absolute; bottom: -15px; left: 0; padding: 32px; opacity: 0; visibility: hidden; transition: all 0.4s ease; z-index: 2; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .tp-portfolio-pb-content { padding: 15px; } } .tp-portfolio-pb-thumb img { transition: all 0.4s ease; } .tp-portfolio-pb-item:hover::before { opacity: 1; visibility: visible; } .tp-portfolio-pb-item:hover .tp-portfolio-pb-content { visibility: visible; opacity: 1; bottom: 0; } .tp-portfolio-pb-item:hover .tp-portfolio-pb-thumb img { transform: scale(1.1); } .tp-portfolio-pb-item::before { position: absolute; content: ""; background: linear-gradient(180deg, rgba(16, 48, 42, 0) 31%, #111112 100%); width: 100%; height: 100%; bottom: 0; left: 0; opacity: 0; visibility: hidden; transition: all 0.4s ease; z-index: 1; } @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), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-portfolio-ai-title { margin-left: 0; } } .tp-portfolio-md-tag { border: 1px solid rgba(17, 17, 18, 0.1); padding: 3px 17px; } .tp-portfolio-md-wrapper { margin-left: -15px; margin-right: -15px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-portfolio-md-wrapper { margin-left: 0; margin-right: 0; } } .tp-portfolio-md-inner-wrap { width: 100%; display: flex; grid-area: list; box-sizing: border-box; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-portfolio-md-inner-wrap { flex-wrap: wrap; } } .tp-portfolio-md-item { width: 40%; height: 720px; display: block; position: relative !important; left: 0 !important; top: 0 !important; margin: 0px 15px; transition: width 0.6s cubic-bezier(0.38, 0.005, 0.215, 1); } @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) { .tp-portfolio-md-item { height: 620px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-portfolio-md-item { width: 100%; height: auto; margin-bottom: 30px; } } .tp-portfolio-md-item:hover { width: 66%; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) { .tp-portfolio-md-item:hover { width: 40%; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-portfolio-md-item:hover { width: 100%; } } .tp-portfolio-md-thumb { height: 100%; width: 100%; margin-bottom: 30px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-portfolio-md-thumb { height: auto; } } .tp-portfolio-md-thumb img { width: 100%; height: 100%; object-fit: cover; } .tp-portfolio-md-content { padding-left: 32px; } @media (max-width: 574.98px) { .tp-portfolio-md-content { padding-left: 0; } } .tp-portfolio-md-border { border-bottom: 1px solid rgba(17, 17, 18, 0.1); padding-bottom: 160px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-portfolio-md-border { padding-bottom: 100px; } } @media only screen and (min-width: 1400px) and (max-width: 1599px) { .tp-portfolio-md-title { font-size: 30px; } } @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), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-portfolio-md-title { font-size: 25px; } } .tp-portfolio-vp-bigtitle { font-size: 220px; font-weight: 800; line-height: 73%; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-portfolio-vp-bigtitle { font-size: 180px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .tp-portfolio-vp-bigtitle { font-size: 130px; } } @media (max-width: 574.98px) { .tp-portfolio-vp-bigtitle { font-size: 80px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-portfolio-vp-para br { display: none; } } .tp-portfolio-vp-post-thumbnail { padding-top: 720px; border-radius: 32px; position: relative; overflow: hidden; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .tp-portfolio-vp-post-thumbnail { padding-top: 600px; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-portfolio-vp-post-thumbnail { padding-top: 400px; margin-bottom: 30px; } } .tp-portfolio-vp-post-thumbnail img { position: absolute; top: 0; left: 0; height: 100%; width: 100%; object-fit: cover; transform: translate3d(-6.66%, 0, 0) scale(1.2); -webkit-transform: translate3d(-6.66%, 0, 0) scale(1.2); transition: opacity 0.35s, transform 0.45s, filter 0.35s; } .tp-portfolio-vp-post-thumbnail .video-container { overflow: hidden; position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 1; } .tp-portfolio-vp-post-thumbnail .video-container iframe { width: 300%; margin-left: -100%; min-width: 100%; min-height: 100%; object-fit: cover; border: none; max-width: none; transform: translateY(-50%); position: absolute; top: 50%; left: 0; background: var(--tp-common-black-5); } .tp-portfolio-vp-post-thumbnail .vp-title { display: none; } .tp-portfolio-vp-post-thumbnail .vp-sidedock button { display: none; } .tp-portfolio-vp-content { position: absolute; bottom: 32px; left: 32px; z-index: 3; } @media (max-width: 574.98px) { .tp-portfolio-vp-content { bottom: 22px; left: 22px; } } .tp-portfolio-vp-title span { background: var(--tp-common-black-5); display: inline-block; } .tp-portfolio-vp-text-top { padding-left: 32px; padding-right: 42px; padding-top: 10px; border-radius: 16px 16px 0 0; position: relative; } .tp-portfolio-vp-text-top::before { content: ""; position: absolute; bottom: 0; right: -22px; height: 41px; width: 23px; z-index: -1; background-color: transparent; border-bottom-left-radius: 20px; box-shadow: 0px 18px 0 0 #111112; } .tp-portfolio-vp-text-middle { padding: 0 42px 14px 32px; border-radius: 0 16px 16px 16px; } .tp-portfolio-slicer-category { font-size: 40px; font-family: var(--tp-ff-inter); margin-bottom: 36px; display: inline-block; color: var(--tp-common-white); } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tp-portfolio-slicer-category { font-size: 30px; } } @media only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px) { .tp-portfolio-slicer-category { font-size: 25px; margin-bottom: 20px; } } @media (max-width: 574.98px) { .tp-portfolio-slicer-category { font-size: 20px; margin-bottom: 15px; } } .tp-portfolio-slicer-title { font-family: var(--tp-ff-heading); color: var(--tp-common-white); font-size: 150px; line-height: 0.8; font-weight: 600; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 768px) and (max-width: 991px) { .tp-portfolio-slicer-title { font-size: 130px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tp-portfolio-slicer-title { font-size: 100px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .tp-portfolio-slicer-title { font-size: 80px; } } @media (max-width: 574.98px) { .tp-portfolio-slicer-title { font-size: 50px; } } .tp-portfolio-slicer-area-inner #app { height: 100vh; display: flex; align-items: center; justify-content: center; } .tp-portfolio-slicer-slider { position: relative; z-index: 1; } .tp-portfolio-slicer-slider .nav-icon { font-size: 16px; text-transform: uppercase; display: flex; gap: 20px; color: var(--tp-common-white); line-height: 1; position: relative; z-index: 2; } .tp-portfolio-slicer-slider .slider-nav { display: flex; height: 100px; justify-content: space-between; width: 100%; align-items: center; } @media only screen and (min-width: 1400px) and (max-width: 1599px) { .tp-portfolio-slicer-slider .slider-nav { height: 80px; } } .tp-portfolio-slicer-slider .slider-nav-box { position: absolute; bottom: 0; width: 100%; } .tp-portfolio-slicer-slider .slide-content { position: absolute; width: 100%; bottom: 20%; opacity: 0; transition: all 0.5s; } .tp-portfolio-slicer-slider .swiper-slide-active .slide-content { opacity: 1; visibility: visible; } .tp-portfolio-slicer-slider .swiper { width: 100%; height: 100%; --swiper-theme-color: #fff; } .tp-portfolio-slicer-slider .swiper-slicer-image { max-width: unset; } .tp-portfolio-slicer-pagination { position: absolute; top: auto !important; bottom: 0; transform: none; height: 50px; left: 0 !important; right: 0 !important; display: inline-flex; gap: 20px; margin-inline: auto; align-items: center; justify-content: center; z-index: 1; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .tp-portfolio-slicer-pagination { gap: 10px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-portfolio-slicer-pagination { display: none; } } .tp-portfolio-slicer-pagination .swiper-pagination-bullet { width: 80px; height: 5px; display: inline-block; margin: 0 5px; overflow: hidden; transition: 0.4s; position: relative; border-radius: 5px; background: rgba(255, 255, 255, 0.3); } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tp-portfolio-slicer-pagination .swiper-pagination-bullet { width: 50px; } } .tp-portfolio-slicer-pagination .swiper-pagination-bullet .swiper-pagination-bullet-active { width: 80px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tp-portfolio-slicer-pagination .swiper-pagination-bullet .swiper-pagination-bullet-active { width: 40px; } } .tp-portfolio-slicer-pagination .swiper-pagination-bullet::before { content: ""; width: 80px; height: 100%; position: absolute; transition: 0.6s; z-index: 9; left: 0; border-radius: 5px; background: rgba(255, 255, 255, 0.3); } .tp-portfolio-slicer-pagination .swiper-pagination-bullet::after { content: ""; width: 0; height: 100%; position: absolute; transition: 0.6s; z-index: 8; left: 0; background-color: white; } .tp-portfolio-slicer-pagination .swiper-pagination-bullet-active::after { opacity: 1; width: 100%; } .tp-portfolio-parallax-slider-wrapper { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; } .tp-portfolio-parallax-slider-wrapper .parallax-slider { position: absolute; top: 0; left: 0; width: 4200px; height: 100%; } @media (max-width: 574.98px) { .tp-portfolio-parallax-slider-wrapper .parallax-slider { width: 2600px; } } .tp-portfolio-parallax-slider-wrapper .parallax-slider-inner { position: absolute; top: 0; height: 100%; width: 100%; display: flex; gap: 5px; left: 0px; right: 0; } .tp-portfolio-parallax-slider-wrapper .parallax-item { position: relative; width: 600px; height: 100%; overflow: hidden; } @media (max-width: 574.98px) { .tp-portfolio-parallax-slider-wrapper .parallax-item { width: 350px; } } .tp-portfolio-parallax-slider-wrapper .parallax-item:hover .parallax-content { bottom: 0; opacity: 1; visibility: visible; } .tp-portfolio-parallax-slider-wrapper .parallax-item:hover .parallax-img::after { opacity: 1; height: 100%; visibility: visible; } .tp-portfolio-parallax-slider-wrapper .parallax-content { position: absolute; bottom: -100px; left: 0; z-index: 55; overflow: hidden; opacity: 0; visibility: hidden; margin: 40px 40px 30px 35px; transition: 0.4s; } .tp-portfolio-parallax-slider-wrapper .parallax-content span { font-size: 24px; line-height: 1; display: block; font-size: 20px; margin-bottom: 10px; color: var(--tp-common-white); font-family: var(--tp-ff-inter); text-transform: capitalize; } .tp-portfolio-parallax-slider-wrapper .parallax-content h4 { font-size: 50px; line-height: 1; padding-bottom: 7px; display: inline-block; color: var(--tp-common-white); font-family: var(--tp-ff-heading); } .tp-portfolio-parallax-slider-wrapper .parallax-img { position: absolute; height: 100%; width: 840px; background-size: cover; background-position: center; margin-left: -100px; } .tp-portfolio-parallax-slider-wrapper .parallax-img::after { position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; content: ""; opacity: 0; visibility: hidden; transition: 0.4s; background-color: rgba(0, 0, 0, 0.3); } .tp-portfolio-horizontal-slider { background-color: var(--tp-common-white); z-index: 2; width: 100%; position: relative; flex-direction: column; height: 100vh; font-size: 16px; display: flex; clip-path: none !important; } .tp-portfolio-horizontal-slider .slider-inner { background: var(--tp-common-black); height: 100vh; position: relative; } .tp-portfolio-horizontal-slider .swiper-slide { position: relative; display: flex; justify-content: center; text-align: left; flex-direction: column; overflow: hidden; } .tp-portfolio-horizontal-content { position: absolute; top: 26%; left: 78px; z-index: 1; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-portfolio-horizontal-content { width: 100%; text-align: center; left: 0; } } .tp-portfolio-horizontal-inner { object-fit: cover; width: 100%; height: 100vh; } .tp-portfolio-horizontal-inner::after { content: ""; position: absolute; width: 101%; height: 100%; top: 0; left: -1px; background-color: transparent; background-image: radial-gradient(at center right, #FFFFFF00 50%, #00000096 100%); } .tp-portfolio-horizontal-tag { color: var(--tp-common-white); font-weight: 400; font-size: 24px; margin-bottom: 10px; margin-top: 0px; letter-spacing: 1.2px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-portfolio-horizontal-tag { margin-bottom: 0; } } .tp-portfolio-horizontal-title { color: var(--tp-common-white); font-size: 8vw; font-family: var(--tp-ff-inter); font-weight: 700; line-height: 1.1; text-transform: uppercase; margin-bottom: 10px; margin-left: -12px; text-decoration: none; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-portfolio-horizontal-title { font-size: 64px; } } .tp-portfolio-horizontal-disc { font-size: 18px; width: 100%; margin: 0px 0px 20px 0px; font-weight: 400; line-height: 32px; color: #FFFFFFB0; font-family: var(--tp-ff-inter); } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-portfolio-horizontal-disc { margin: 20px auto 20px auto; font-size: 16px; width: 95%; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-portfolio-horizontal-disc br { display: none; } } .tp-portfolio-horizontal-btn { color: var(--tp-common-white); margin-left: 18px; font-size: 1.4em; transition: margin-left 300ms cubic-bezier(0.49, 0, 0.01, 1); font-weight: 400; display: inline-flex; position: relative; white-space: nowrap; text-decoration: none; justify-content: center; align-items: center; cursor: pointer; user-select: none; outline: none; outline-color: transparent; box-shadow: none; will-change: transform; backface-visibility: hidden; } .tp-portfolio-horizontal-btn:hover { margin-left: 38px !important; } .tp-portfolio-horizontal-btn:hover .tp-portfolio-horizontal-btn-label { transform: translateX(18px); } .tp-portfolio-horizontal-btn:hover .tp-portfolio-horizontal-btn-text { color: var(--tp-common-white); } .tp-portfolio-horizontal-btn:hover .tp-portfolio-horizontal-btn-border { transform: scale(0, 1); } .tp-portfolio-horizontal-btn:hover .circle { clip-path: circle(50% at 50% 50%); } .tp-portfolio-horizontal-btn:hover .circle-fill { transform: scale(1, 1); } .tp-portfolio-horizontal-btn:hover .circle-icon { transform: translate(0%, 0%); opacity: 1; } .tp-portfolio-horizontal-btn-label { margin-left: 4pt; transition: transform 500ms cubic-bezier(0.49, 0, 0.01, 1); } .tp-portfolio-horizontal-btn-border { position: absolute; left: 4pt; right: 0; bottom: 0; height: 1px; background: var(--tp-common-white); transform-origin: right; transition: transform 500ms cubic-bezier(0.49, 0, 0.01, 1); } .tp-portfolio-horizontal-btn .circle { position: absolute; right: calc(100% - 10px); top: 0; bottom: 0; margin: auto; width: 45px; height: 45px; display: flex; align-items: center; justify-content: center; border-radius: 50%; clip-path: circle(25% at 50% 50%); transition: clip-path 500ms cubic-bezier(0.49, 0, 0.01, 1); } .tp-portfolio-horizontal-btn .circle-fill { position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-radius: 100%; background-color: var(--tp-common-white); will-change: transform; transform: scale(0); z-index: 1; transition: transform 500ms cubic-bezier(0.49, 0, 0.01, 1), background-color 500ms cubic-bezier(0.49, 0, 0.01, 1); } .tp-portfolio-horizontal-btn .circle-icon { transform: translate(-100%, 0%); position: absolute; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; opacity: 0; z-index: 2; transition: all 500ms cubic-bezier(0.49, 0, 0.01, 1); } .tp-portfolio-horizontal-btn .icon-arrow { width: 20px; height: 20px; stroke: none; fill: var(--tp-common-black); } .tp-portfolio-horizontal-btn .circle-outline { fill: transparent; width: 10px; stroke: var(--tp-common-white); } .tp-portfolio-horizontal-button-wrapper { width: 100%; } .tp-portfolio-horizontal-button-wrapper div { bottom: 5%; top: unset; transform: scale(1); transition: all 0.4s; background-color: #FFFFFF00; backdrop-filter: blur(20px); height: 85px; width: 85px; line-height: 85px; border-radius: 50%; transition: all 0.4s; position: absolute; z-index: 2; font-size: 30px; color: var(--tp-common-white); display: flex; justify-content: center; align-items: center; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-portfolio-horizontal-button-wrapper div { height: 50px; width: 50px; line-height: 50px; } } .tp-portfolio-horizontal-button-wrapper div:hover { background: #FFFFFF0D; } .tp-portfolio-horizontal-button-next { right: 50px; } .tp-portfolio-horizontal-button-prev { left: 50px; } .tp-portfolio-horizontal-pagination-area { display: flex; align-items: center; justify-content: center; position: absolute; top: unset; right: unset; bottom: 80px; left: 50% !important; transform: translateX(-50%); width: 500px; z-index: 1; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-portfolio-horizontal-pagination-area { width: 200px !important; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-portfolio-horizontal-pagination-area { display: none; } } .tp-portfolio-horizontal-pagination-area .slide-range { font-size: 16px; font-weight: 500; margin: 0 15px; color: var(--tp-common-white); line-height: 0; position: absolute; font-size: 20px; } .tp-portfolio-horizontal-pagination-area .slide-range.one { left: -50px; } .tp-portfolio-horizontal-pagination-area .slide-range.three { right: -50px; } .tp-portfolio-horizontal-pagination-area .swiper-pagination { bottom: 0 !important; width: 500px !important; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-portfolio-horizontal-pagination-area .swiper-pagination { bottom: 0 !important; width: 200px !important; } } .tp-portfolio-horizontal-pagination-area .swiper-pagination .swiper-pagination-progressbar-fill { background: var(--tp-common-white); } .tp-portfolio-swipe-gallery .slide { height: 100%; width: 100%; top: 0; position: fixed; visibility: hidden; } .tp-portfolio-swipe-gallery .slide__outer, .tp-portfolio-swipe-gallery .slide__inner { width: 100%; height: 100%; overflow: hidden; } .tp-portfolio-swipe-gallery .slide__content { display: flex; align-items: center; justify-content: center; position: absolute; height: 100%; width: 100%; top: 0; padding-top: 150px; } .tp-portfolio-swipe-gallery .slide__container { position: relative; max-width: 1800px; width: 100vw; margin: 0 auto; height: 95vh; margin-bottom: 10vh; display: grid; grid-template-columns: repeat(10, 1fr); grid-template-rows: repeat(10, 1fr); grid-column-gap: 0px; grid-row-gap: 0px; padding: 0 1rem; } .tp-portfolio-swipe-gallery .slide__heading { display: block; text-align: left; font-size: clamp(5rem, 15vw, 15rem); font-weight: 700; text-transform: uppercase; margin: 0; padding: 0; color: var(--tp-common-white); z-index: 1; mix-blend-mode: difference; grid-area: 2/2/3/10; align-self: end; } .tp-portfolio-swipe-gallery .slide__img-cont { margin-top: 4rem; grid-area: 2/1/7/8; overflow: hidden; } .tp-portfolio-swipe-gallery .slide__img-cont img { width: 100%; height: 100%; object-fit: cover; } .tp-portfolio-swipe-gallery .slide:nth-of-type(1) { visibility: visible; } .tp-portfolio-swipe-gallery .slide:nth-of-type(1) .slide__content { background-color: #842418; } .tp-portfolio-swipe-gallery .slide:nth-of-type(2) .slide__content { background-color: #72241a; } .tp-portfolio-swipe-gallery .slide:nth-of-type(3) .slide__content { background-color: #4e0101; } .tp-portfolio-swipe-gallery .slide:nth-of-type(4) .slide__content { background-color: #200800; } .tp-portfolio-swipe-gallery .overlay { position: fixed; top: 0; bottom: 0; left: 0; right: 0; z-index: 2; } @media (max-width: 574.98px) { .tp-portfolio-swipe-gallery .overlay { top: 90px; } } .tp-portfolio-swipe-gallery .overlay__content { max-width: 1800px; width: 100vw; margin: 0 auto; padding: 0 1rem; height: 90vh; margin-bottom: 10vh; display: grid; grid-template-columns: repeat(10, 1fr); grid-template-rows: repeat(10, 1fr); grid-column-gap: 0px; grid-row-gap: 0px; } .tp-portfolio-swipe-gallery .overlay__img-cont { position: relative; overflow: hidden; margin: 0; grid-area: 4/3/9/11; } .tp-portfolio-swipe-gallery .overlay__img-cont img { position: absolute; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; } .tp-portfolio-swipe-gallery .overlay__count { grid-area: 3/10/4/10; font-size: clamp(3rem, 4vw, 15rem); margin: 0; padding: 0; text-align: right; color: var(--tp-common-white); opacity: 0.3; } @media screen and (min-width: 900px) { .tp-portfolio-swipe-gallery .overlay__content, .tp-portfolio-swipe-gallery .slide__container { margin-top: 15vh; height: 87vh; } .tp-portfolio-swipe-gallery .overlay__img-cont { grid-area: 5/4/10/11; } .tp-portfolio-swipe-gallery .overlay__count { grid-area: 3/10/4/11; } .tp-portfolio-swipe-gallery .slide__img-cont { margin-top: 0; grid-area: 3/2/8/7; } .tp-portfolio-swipe-gallery .slide__heading { grid-area: 1/1/4/4; } } .tp-portfolio-revealing-slider { position: relative; height: 100vh; overflow: hidden; } .tp-portfolio-revealing-slider-social { position: absolute; bottom: 75px; z-index: 99; left: 0; right: 0; margin: 0 auto; text-align: center; } .tp-portfolio-revealing-slider-social a { font-size: 16px; font-weight: 600; line-height: 1; margin: 0 12px; color: var(--tp-common-white); } .tp-portfolio-revealing-slider-slides { z-index: 1; position: relative; height: 100%; } .tp-portfolio-revealing-slider-control { z-index: 2; position: absolute; top: 50%; left: 5%; width: var(--controlSize); height: var(--controlSize); margin-left: calc(var(--controlSize) / -2); margin-top: calc(var(--controlSize) / -2); border-radius: 50%; background-color: #FFFFFF00; backdrop-filter: blur(20px); transition: background-color 0.3s; cursor: pointer; } .tp-portfolio-revealing-slider-control:hover { background-color: var(--tp-theme-secondary); } .tp-portfolio-revealing-slider-control:hover .tp-portfolio-revealing-slider-control-line::after { background-color: #fff; } @media (max-width: 574.98px) { .tp-portfolio-revealing-slider-control { top: 70%; left: 10%; } } .tp-portfolio-revealing-slider-control-right { left: 95%; } @media (max-width: 574.98px) { .tp-portfolio-revealing-slider-control-right { left: 90%; } } .tp-portfolio-revealing-slider-control-right .tp-portfolio-revealing-slider-control-line { left: 37px; transform-origin: 1px 0; transform: rotate(45deg); } .tp-portfolio-revealing-slider-control-right .tp-portfolio-revealing-slider-control-line:nth-child(2) { transform: translateY(1px) rotate(135deg); } .tp-portfolio-revealing-slider-control-line { position: absolute; left: 23px; top: 50%; width: 3px; height: 14px; transform-origin: 50% 0; transform: rotate(-45deg); } .tp-portfolio-revealing-slider-control-line::after { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: #e2e2e2; transition: background-color 0.3s; } .tp-portfolio-revealing-slider-control-line:nth-child(2) { transform: translateY(1px) rotate(-135deg); } .tp-portfolio-revealing-slider-control.a-rotation .tp-portfolio-revealing-slider-control-line::after { animation: arrowLineRotation 0.49s; } .tp-portfolio-revealing-slider-control.a-rotation .tp-portfolio-revealing-slider-control-line:nth-child(1)::after { animation: arrowLineRotationRev 0.49s; } .tp-portfolio-revealing-slide { overflow: hidden; position: absolute; left: 50%; top: 50%; width: 150vmax; height: 150vmax; transform: translate(-50%, -50%); border-radius: 50%; transition: clip-path 0s calc(var(--slidingAT) * 0.7); clip-path: circle(calc(var(--controlSize) / 2) at 120vw 50%); } .tp-portfolio-revealing-slide-inner { position: absolute; left: 50%; top: 50%; width: 100vw; height: 100vh; margin-left: -50vw; margin-top: -50vh; background-size: cover; background-position: center center; } .tp-portfolio-revealing-slide-content { position: absolute; top: 50%; transform: translateY(-50%); left: 0; right: 0; margin: 0 auto; text-align: center; } .tp-portfolio-revealing-slide-heading { font-size: clamp(5rem, 15vw, 13rem); font-weight: 500; line-height: 0.8; color: var(--tp-common-white); font-family: var(--tp-ff-teko); letter-spacing: -4px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-portfolio-revealing-slide-heading { letter-spacing: 0; } } .tp-portfolio-revealing-slide-text { font-size: 16px; font-weight: 500; line-height: 1; margin-bottom: 30px; display: inline-block; font-family: var(--tp-ff-inter); color: var(--tp-common-white); text-transform: uppercase; } .tp-portfolio-revealing-slide.s-prev { clip-path: circle(calc(var(--controlSize) / 2) at 30vw 50%); } .tp-portfolio-revealing-slide.s-active { z-index: 1; transition: clip-path var(--slidingAT); clip-path: circle(120vmax at 120vw 50%); } .tp-portfolio-revealing-slide.s-active.s-active-prev { clip-path: circle(120vmax at 30vw 50%); } .tp-portfolio-mix-slider { height: 100%; width: 100%; } .tp-portfolio-mix-slider-wrap.mix { padding: 0px 0px 0px 0px; height: 100vh; } .tp-portfolio-mix-slider-navigation { position: absolute; bottom: 0; width: 100%; } .tp-portfolio-mix-slider-navigation .nav-icon { font-size: 16px; text-transform: uppercase; display: flex; gap: 20px; color: var(--tp-common-white); line-height: 1; position: relative; z-index: 2; cursor: pointer; } .tp-portfolio-mix-slider-navigation .slider-nav { display: flex; height: 80px; justify-content: space-between; width: 100%; align-items: center; } @media only screen and (min-width: 1400px) and (max-width: 1599px) { .tp-portfolio-mix-slider-navigation .slider-nav { height: 80px; } } .tp-portfolio-mix-slider-navigation .slider-nav-box { position: absolute; bottom: 0; width: 100%; } .tp-portfolio-mix-slider-navigation.navigation-white .nav-icon { color: var(--tp-common-black); } .tp-portfolio-mix-slider-image .popup-image { position: absolute; bottom: 200px; left: 72px; right: auto; } @media (max-width: 574.98px) { .tp-portfolio-mix-slider-image .popup-image { display: none; } } .tp-portfolio-mix-slider-image .popup-image i { width: 35px; height: 35px; display: flex; justify-content: center; align-items: center; background: rgba(0, 0, 0, 0.2); backdrop-filter: blur(10px); color: var(--tp-common-white); } .tp-portfolio-mix-slider-content { position: absolute; top: 50%; transform: translateY(-50%); left: 0; right: 0; margin: 0 auto; text-align: center; } .tp-portfolio-mix-slider-content .tp-portfolio-revealing-slide-text { transform: translateX(200px); transition: all 2s ease; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-portfolio-mix-slider-content .tp-portfolio-revealing-slide-text { transform: translateX(0px); } } .tp-portfolio-mix-slider-content .tp-portfolio-revealing-slide-heading { transform: translateX(-200px); transition: all 2s ease; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-portfolio-mix-slider-content .tp-portfolio-revealing-slide-heading { transform: translateX(0px); } } .tp-portfolio-mix-slider .swiper-slide-active .tp-portfolio-revealing-slide-text { transform: translateX(0px); } .tp-portfolio-mix-slider .swiper-slide-active .tp-portfolio-revealing-slide-heading { transform: translateX(0px); } .tp-portfolio-creative-social { position: absolute; top: 50%; right: 5%; left: auto; z-index: 55; writing-mode: vertical-rl; transform: translateY(-50%) rotate(180deg); } @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) { .tp-portfolio-creative-social { right: 45px; } } @media (max-width: 574.98px) { .tp-portfolio-creative-social { right: 30px; display: none; } } .tp-portfolio-creative-social a { font-weight: 700; font-size: 14px; line-height: 1; margin: 14px 0; display: inline-block; text-transform: uppercase; font-family: var(--tp-ff-inter); color: var(--tp-common-white); } .tp-portfolio-creative-slider-main .swiper-pagination { bottom: 30px; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); width: auto; } @media (max-width: 574.98px) { .tp-portfolio-creative-slider-main .swiper-pagination { display: none; } } .tp-portfolio-creative-slider-main .swiper-pagination-bullet { background: transparent; margin: 0 10px !important; } .tp-portfolio-creative-slider-main .path { display: none; } .tp-portfolio-creative-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; } .tp-portfolio-creative-slider-main .swiper-slide-active .tp-portfolio-slicer-category { transform: translateX(0px); } .tp-portfolio-creative-slider-main .swiper-slide-active .tp-portfolio-slicer-title { transform: translateX(0px); } .tp-portfolio-creative-item { display: flex; align-items: end; height: calc(100vh - 200px); padding: 90px 85px 90px 85px; margin-top: 100px; width: 100%; background-position: center; background-size: cover; background-repeat: no-repeat; border-radius: 40px; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-portfolio-creative-item { padding: 20px 30px; } } .tp-portfolio-creative-wrap { padding: 0px; height: 100vh; } .tp-portfolio-creative-content .tp-portfolio-slicer-category { transform: translateX(200px); transition: all 2s ease; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-portfolio-creative-content .tp-portfolio-slicer-category { transform: translateX(0px); } } .tp-portfolio-creative-content .tp-portfolio-slicer-title { transform: translateX(-200px); transition: all 2s ease; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-portfolio-creative-content .tp-portfolio-slicer-title { transform: translateX(0px); } } .tp-portfolio-elegant { padding-bottom: 50px; border: none; margin-bottom: 20px; } .tp-portfolio-skew-wrap .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; } .tp-portfolio-skew-wrap .slide--current { pointer-events: auto; opacity: 1; } .tp-portfolio-skew-wrap .slide--current .skew-slider-content { opacity: 1; visibility: visible; } .tp-portfolio-skew-wrap .slide__img { width: 100%; height: 100%; background-size: cover; background-position: 50% 50%; background-repeat: no-repeat; will-change: transform, opacity, filter; } .tp-portfolio-skew-wrap .skew-slider-wrap { width: 100%; height: 100vh; display: grid; overflow: hidden; place-items: center; grid-template-rows: 100%; grid-template-columns: 100%; } .tp-portfolio-skew-wrap .skew-slider-arrow { position: absolute; bottom: 80px; gap: 10px; width: 100%; display: flex; padding: 0 100px; align-items: center; justify-content: space-between; } @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) { .tp-portfolio-skew-wrap .skew-slider-arrow { padding: 0 45px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-portfolio-skew-wrap .skew-slider-arrow { padding: 0 20px; } } .tp-portfolio-skew-wrap .skew-slider-arrow button { font-weight: 700; font-size: 14px; line-height: 1; text-transform: uppercase; color: var(--tp-common-white); } .tp-portfolio-skew-wrap .skew-slider-arrow button .icon-1, .tp-portfolio-skew-wrap .skew-slider-arrow button .icon-2 { transition: 0.3s; margin-right: 7px; transform: translate(0px, -1px); } .tp-portfolio-skew-wrap .skew-slider-arrow button .icon-2 { margin-left: 7px; } .tp-portfolio-skew-wrap .skew-slider-arrow button:hover .icon-1 { transform: translate(-3px, -1px); } .tp-portfolio-skew-wrap .skew-slider-arrow button:hover .icon-2 { transform: translate(3px, -1px); } .tp-portfolio-skew-wrap .skew-slider-content { position: absolute; top: 50%; opacity: 0; left: 0; padding-left: 320px; visibility: hidden; transform: translateY(-50%); } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .tp-portfolio-skew-wrap .skew-slider-content { padding-left: 200px; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) { .tp-portfolio-skew-wrap .skew-slider-content { padding-left: 150px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-portfolio-skew-wrap .skew-slider-content { padding-left: 50px; } } .tp-portfolio-skew-wrap .skew-slider-content h4 { font-size: 140px; line-height: 0.9; letter-spacing: -0.03em; text-transform: uppercase; letter-spacing: 1.2px; color: var(--tp-common-white); font-family: var(--tp-ff-teko); } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .tp-portfolio-skew-wrap .skew-slider-content h4 { font-size: 100px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tp-portfolio-skew-wrap .skew-slider-content h4 { font-size: 90px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .tp-portfolio-skew-wrap .skew-slider-content h4 { font-size: 80px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-portfolio-skew-wrap .skew-slider-content h4 { font-size: 60px; } } .tp-portfolio-skew-wrap .skew-slider-content > span { margin-bottom: 15px; display: inline-block; font-weight: 600; font-family: var(--tp-ff-inter); font-size: 16px; line-height: 1; text-transform: uppercase; color: var(--tp-common-white); } .tp-portfolio-skew-wrap .slides-numbers { position: absolute; top: 50%; right: 100px; transform: translateY(-50%); } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-portfolio-skew-wrap .slides-numbers-wrap { display: none; } } .tp-portfolio-skew-wrap .slides-numbers span { font-size: 14px; font-weight: 600; display: block; line-height: 1; color: var(--tp-common-white); } .tp-portfolio-skew-wrap .slides-numbers span.text-1 { transform: translateX(-5px); } .tp-portfolio-skew-wrap .slides-numbers span.text-2 { margin-left: 10px; transform: rotate(25deg); transform-origin: left bottom; } .tp-portfolio-skew-wrap .slides-numbers span.text-3 { margin-left: 27px; } .tp-portfolio-skew-wrap .slides-numbers::after, .tp-portfolio-skew-wrap .slides-numbers::before { content: ""; width: 2px; height: 130px; display: inline-block; transform: translateX(13px); background-color: var(--tp-common-white); } .tp-portfolio-skew-wrap .slides-numbers::before { margin-bottom: 30px; } .tp-portfolio-skew-wrap .slides-numbers::after { margin-top: 40px; } .tp-portfolio-slider__wrap { grid-area: main; position: relative; overflow: hidden; display: grid; place-items: center; width: 100%; height: 100vh; } .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%); overflow: hidden; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-portfolio-slider-type { bottom: 20%; width: 100%; } } .tp-portfolio-slider-type-title { font-weight: 600; font-size: 120px; line-height: 0.9; margin-bottom: 0; text-align: center; color: var(--tp-common-white); font-family: var(--tp-ff-teko); } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) { .tp-portfolio-slider-type-title { font-size: 90px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .tp-portfolio-slider-type-title { font-size: 80px; } } @media (max-width: 574.98px) { .tp-portfolio-slider-type-title { font-size: 60px; } } .tp-portfolio-slider__mail { position: absolute; top: 50%; right: 4%; z-index: 55; transform: translateY(-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) { .tp-portfolio-slider__mail { right: 45px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-portfolio-slider__mail { right: 30px; } } .tp-portfolio-slider__mail a { font-weight: 600; font-size: 16px; line-height: 1; letter-spacing: 0.6px; writing-mode: vertical-lr; color: var(--tp-common-white); font-family: var(--tp-ff-inter); } .tp-portfolio-slider__social { position: absolute; top: 50%; left: 4%; z-index: 55; writing-mode: vertical-rl; transform: translateY(-50%) rotate(180deg); } @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) { .tp-portfolio-slider__social { left: 45px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-portfolio-slider__social { left: 30px; display: none; } } .tp-portfolio-slider__social a { font-weight: 700; font-size: 14px; line-height: 1; margin: 14px 0; display: inline-block; text-transform: uppercase; font-family: var(--tp-ff-inter); color: var(--tp-common-white); } .tp-portfolio-slider__copyright { position: absolute; top: 45px; left: 50%; z-index: 55; transform: translateX(-50%); } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tp-portfolio-slider__copyright { top: 65px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-portfolio-slider__copyright { display: none; } } .tp-portfolio-slider__copyright p { font-weight: 700; font-size: 14px; line-height: 1; margin-bottom: 0; letter-spacing: 0.8px; text-transform: uppercase; color: var(--tp-common-white); } .tp-portfolio-slider__copyright p a { position: relative; } .tp-portfolio-slider__copyright p a::after { position: absolute; content: ""; bottom: -1px; left: 0; width: 0; height: 1px; transition: 0.3s; display: inline-block; opacity: 0; visibility: hidden; background-color: var(--tp-common-white); } .tp-portfolio-slider__copyright p:hover a::after { right: auto; width: 100%; opacity: 1; visibility: visible; } .tp-portfolio-slider__style-2 .tp-portfolio-slider__copyright { position: absolute; top: auto; bottom: 80px; left: 50%; z-index: 55; transform: translateX(-50%); } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-portfolio-slider__style-2 .tp-portfolio-slider__copyright { bottom: 140px; text-align: center; } } .tp-portfolio-slider__style-2 .tp-portfolio-slider-type-title { font-size: 180px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .tp-portfolio-slider__style-2 .tp-portfolio-slider-type-title { font-size: 140px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tp-portfolio-slider__style-2 .tp-portfolio-slider-type-title { font-size: 120px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .tp-portfolio-slider__style-2 .tp-portfolio-slider-type-title { font-size: 100px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-portfolio-slider__style-2 .tp-portfolio-slider-type-title { font-size: 70px; } } .tp-portfolio-slider__style-2 .tp-portfolio-slider-type { top: 65%; } .tp-portfolio-colum-spacing { padding-top: 200px; padding-bottom: 100px; } .tp-portfolio-inner-tab-wrap { display: flex; justify-content: center; } .tp-portfolio-inner-tab-wrap nav .nav-tabs { border-bottom: none; } .tp-portfolio-inner-tab-wrap nav .nav-tabs .nav-link { font-size: 15px; font-weight: 600; padding: 6px 25px; margin-right: 10px; font-family: var(--tp-ff-heading); margin-bottom: 20px; border-radius: 30px; display: inline-block; color: var(--tp-common-black); border: 1px solid rgba(0, 0, 0, 0.1); } .tp-portfolio-inner-tab-wrap nav .nav-tabs .nav-link.active, .tp-portfolio-inner-tab-wrap nav .nav-tabs .nav-link:hover { color: var(--tp-common-black); background-color: var(--tp-grey-5); border-color: var(--tp-grey-5); } .tp-portfolio-grid-item .tp-portfolio-sa-thumb img { transition: all 0.6s ease; } .tp-portfolio-grid-item:hover .tp-portfolio-sa-thumb img { transform: scale(1.1); } .tp--hover-img canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .coverflow-slider-wrap { display: flex; align-items: center; min-height: 100vh; position: relative; } .coverflow-slider-active { padding: 75px 0 100px; } .coverflow-slider-main{ position: relative; } .coverflow-slider-text-active { height: 130px; } .coverflow-slider-text-wrap { position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .coverflow-slider-text-wrap { bottom: 20px; } } .coverflow-slider-title-sm { font-size: 100px; line-height: 1; font-weight: 600; letter-spacing: 2px; color: var(--tp-common-black); font-family: var(--tp-ff-teko); margin-bottom: 0; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) { .coverflow-slider-title-sm { font-size: 80px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .coverflow-slider-title-sm { font-size: 60px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .coverflow-slider-title-sm { font-size: 50px; } } .coverflow-slider-item { height: 500px; overflow: hidden; } /* ============ creative Slider ================= */ .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%); } .tp-portfolio-slider-small__wrap { border-radius: 200px; } /* ============ creative 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-content { position: absolute; text-align: center; width: 100%; top: 50%; z-index: 10; transform: translateY(-50%); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); } .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-category { font-weight: 400; font-size: 40px; line-height: 1; margin-bottom: 0px; color: var(--tp-common-white); display: block; font-family: var(--tp-ff-teko); } .tp-perspective-slider .tp-perspective-title { font-weight: 400; font-size: 180px; line-height: 1; display: inline-block; color: var(--tp-common-white); font-family: var(--tp-ff-teko); } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tp-perspective-slider .tp-perspective-title { font-size: 130px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .tp-perspective-slider .tp-perspective-title { font-size: 110px; } } @media (max-width: 574.98px) { .tp-perspective-slider .tp-perspective-title { font-size: 70px; } } .tp-perspective-social-wrap { position: fixed; bottom: 0; left: 0; right: 0; } .tp-perspective-social-info span { font-size: 17px; font-weight: 400; line-height: 1; text-transform: uppercase; color: var(--tp-common-white); font-family: var(--tp-ff-onest); } .tp-perspective-social-info span svg { display: inline-block; } .tp-perspective-scroll a { font-size: 17px; font-weight: 400; line-height: 1; text-transform: uppercase; color: var(--tp-common-white); font-family: var(--tp-ff-onest); } @media only screen and (min-width: 768px) and (max-width: 991px) { .tp-pd-3-spacing { padding-top: 15px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-pd-3-spacing { padding-top: 0; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-pd-3-hero-area { padding-top: 80px; } } .tp-pd-3-hero-style { padding-top: 20px; } .tp-pd-3-hero-style .des-portfolio-category { top: auto; left: 60px; bottom: 60px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) { .tp-pd-3-hero-style .des-portfolio-category { left: 20px; } } .tp-pd-3-hero-style .des-portfolio-category.portfolio-meta { left: auto; right: 50px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) { .tp-pd-3-hero-style .des-portfolio-category.portfolio-meta { right: 20px; } } .tp-pd-3-hero-style .des-portfolio-content { bottom: 20px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-pd-3-hero-style .des-portfolio-content { bottom: 10px; } } .tp-pd-3-subtitle { font-weight: 500; font-size: 16px; line-height: 1; margin-bottom: 20px; display: inline-block; letter-spacing: -0.02em; text-transform: uppercase; color: rgba(255, 255, 255, 0.6); font-family: var(--tp-ff-inter); } .tp-pd-3-title { font-size: 80px; line-height: 0.9; color: #f9f4e8; margin-bottom: 25px; font-family: var(--tp-ff-teko); font-weight: 500; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-pd-3-title { font-size: 55px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-pd-3-overview-area { padding-top: 80px; padding-bottom: 55px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-pd-3-overview-left { margin-bottom: 40px; } } .tp-pd-3-overview-info span { font-weight: 500; font-size: 16px; line-height: 1; color: rgba(249, 244, 232, 0.5); font-family: var(--tp-ff-inter); } .tp-pd-3-overview-info h4 { font-size: 40px; line-height: 1.4; color: #f9f4e8; margin-bottom: 0; letter-spacing: 0.02em; font-weight: 500; font-family: var(--tp-ff-teko); } .tp-pd-3-overview-text p { font-weight: 500; font-size: 20px; line-height: 1.5; margin-bottom: 55px; margin-right: 20px; font-family: var(--tp-ff-inter); color: rgba(255, 255, 255, 0.6); } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-pd-3-overview-text p br { display: none; } } .tp-pd-3-gallery-img img { width: 100%; border-radius: 20px; } .tp-pd-3-gallery-img.height { height: 880px; overflow: hidden; border-radius: 20px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .tp-pd-3-gallery-img.height { height: 800px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tp-pd-3-gallery-img.height { height: 650px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .tp-pd-3-gallery-img.height { height: 480px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-pd-3-gallery-img.height { height: 260px; } } @media (max-width: 574.98px) { .tp-pd-3-gallery-img.height img { margin-top: -50px; } } .tp-pd-3-gallery-img.medium-img { height: 720px; border-radius: 20px; overflow: hidden; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .tp-pd-3-gallery-img.medium-img { height: 630px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tp-pd-3-gallery-img.medium-img { height: 550px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .tp-pd-3-gallery-img.medium-img { height: 480px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-pd-3-gallery-img.medium-img { height: 260px; } } .tp-pd-3-gallery-img.medium-img img { margin-top: -80px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tp-pd-3-gallery-img.medium-img img { margin-top: -40px; } } .tp-pd-3-gallery-img.small-img { height: 400px; overflow: hidden; border-radius: 20px; } .tp-pd-3-gallery-img.small-img img { margin-top: -150px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .tp-pd-3-gallery-img.small-img img { margin-top: -100px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tp-pd-3-gallery-img.small-img img { margin-top: -20px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .tp-pd-3-portfolio-area { padding-top: 160px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tp-pd-3-portfolio-area { padding-top: 100px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-pd-3-portfolio-area { padding-top: 80px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-pd-3-portfolio-thumb { padding-bottom: 40px; } } .tp-pd-3-portfolio-thumb img { border-radius: 20px; } @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), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-pd-3-portfolio-item { margin-bottom: 0; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-pd-3-portfolio-item-wrap { padding-top: 0; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-pd-3-portfolio-content { margin-left: 0; } } .tp-pd-3-navigation-title { font-size: 160px; font-weight: 500; line-height: 0.69; text-transform: uppercase; color: var(--tp-common-white); font-family: var(--tp-ff-teko); } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .tp-pd-3-navigation-title { font-size: 145px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tp-pd-3-navigation-title { font-size: 125px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .tp-pd-3-navigation-title { font-size: 115px; } } @media only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-pd-3-navigation-title { font-size: 70px; } } .tp-pd-3-navigation-title-sm { font-size: 120px; line-height: 0.62; position: relative; display: inline-block; padding: 15px 0; font-weight: 500; transition: 0.4s ease-in-out; transform: translateY(120px); color: var(--tp-common-white); font-family: var(--tp-ff-teko); } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .tp-pd-3-navigation-title-sm { font-size: 100px; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) { .tp-pd-3-navigation-title-sm { font-size: 90px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-pd-3-navigation-title-sm { font-size: 60px; } } .tp-pd-3-navigation-title-sm::after { position: absolute; content: ""; bottom: 7px; left: 0; height: 6px; width: 0; transition: 0.4s; background-color: var(--tp-common-white); } .tp-pd-3-navigation-title-sm:hover::after { width: 100%; } .tp-pd-3-navigation-thumb { border-radius: 20px; } .tp-pd-3-navigation-thumb img { transition: 0.5s; border-radius: 20px; } .tp-pd-3-navigation-thumb-overlay { position: relative; overflow: hidden; } .tp-pd-3-navigation-thumb-overlay::after { position: absolute; content: ""; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; border-radius: 20px; visibility: hidden; pointer-events: none; transition: 0.3s ease-in-out; background: linear-gradient(180deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.4) 100%); } .tp-pd-3-navigation-thumb-wrap { border-radius: 20px; } .tp-pd-3-navigation-thumb-wrap .des-portfolio-category span { transition: 0.4s ease-in-out; transform: translateY(30px); } .tp-pd-3-navigation-thumb-wrap:hover .tp-pd-3-navigation-title-sm { transform: translateY(0); } .tp-pd-3-navigation-thumb-wrap:hover .des-portfolio-category span { transform: translateY(0); } .tp-pd-3-navigation-thumb-wrap:hover.tp-pd-3-navigation-thumb-overlay::after { opacity: 1; visibility: visible; } .tp-pd-3-navigation-thumb-wrap:hover .tp-pd-3-navigation-thumb img { transform: scale(1.1) rotate(-2deg); } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-pd-3-navigation-top { padding-bottom: 50px; } } .tp-pd-3-navigation-content { position: absolute; bottom: 70px; left: 0; right: 0; z-index: 3; text-align: center; } @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) { .tp-pd-3-navigation-content { bottom: 40px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-pd-3-navigation-content { bottom: 20px; } } .tp-pd-3-btn { font-weight: 400; font-size: 40px; transition: 0.3s; border-radius: 6px; padding: 8px 20px 2px 20px; line-height: 1; display: inline-block; letter-spacing: 1px; color: var(--tp-common-white); font-family: var(--tp-ff-teko); border: 1px solid rgba(249, 244, 232, 0.1); } .tp-pd-3-btn:hover { background: var(--tp-common-white); } .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%, rgba(20, 20, 20, 0.4) 100%); } .des-portfolio-category { position: absolute; top: 45px; left: 50px; z-index: 2; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .des-portfolio-category { top: 15px; left: 15px; } } .des-portfolio-category.portfolio-meta { left: auto; right: 50px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .des-portfolio-category.portfolio-meta { right: 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); font-family: var(--tp-ff-inter); border: 1px solid rgba(255, 255, 255, 0.2); } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .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; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .des-portfolio-content { bottom: 5px; } } .des-portfolio-title { font-weight: 600; font-size: 180px; line-height: 1; margin-bottom: 0; display: inline-block; font-family: var(--tp-ff-teko); color: var(--tp-common-white); font-weight: 500; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .des-portfolio-title { font-size: 125px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .des-portfolio-title { font-size: 80px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .des-portfolio-title { font-size: 70px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .des-portfolio-title { font-size: 50px; } } @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 only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .des-portfolio-area { padding-bottom: 0px; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-pd-2-ptb { padding-top: 150px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-pd-2-ptb { padding-bottom: 50px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tp-pd-2-area { padding-bottom: 100px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-pd-2-area { padding-bottom: 80px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tp-pd-2-top { padding-bottom: 50px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-pd-2-top { padding-bottom: 40px; } } .tp-pd-2-title { font-size: 140px; font-weight: 700; line-height: 1; letter-spacing: -7px; color: var(--tp-common-black); } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .tp-pd-2-title { font-size: 110px; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) { .tp-pd-2-title { font-size: 100px; letter-spacing: 0; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-pd-2-title { font-size: 60px; letter-spacing: 0; } } .tp-pd-2-categories span { font-size: 14px; font-weight: 600; padding: 4px 24px; position: relative; border-radius: 30px; margin-right: 10px; display: inline-block; color: var(--tp-common-black); font-family: var(--tp-ff-inter); border: 1px solid rgba(0, 0, 0, 0.1); } .tp-pd-2-categories span::before { position: absolute; top: 15px; left: 12px; content: ""; height: 5px; width: 5px; border-radius: 50%; background-color: var(--tp-theme-secondary); } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-pd-2-bottom { flex-wrap: wrap; } } .tp-pd-2-bottom .tp-pd-2-bottom-item:not(:last-of-type) { margin-right: 20px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-pd-2-bottom-item { padding-bottom: 20px; } } .tp-pd-2-bottom-item span { font-size: 16px; font-weight: 600; line-height: 1; margin-bottom: 10px; display: inline-block; font-family: var(--tp-ff-inter); color: rgba(0, 0, 0, 0.7); } .tp-pd-2-bottom-item h6 { font-size: 20px; font-weight: 600; color: var(--tp-common-black); } .tp-pd-2-banner { height: 950px; overflow: hidden; } @media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px) { .tp-pd-2-banner { height: 680px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tp-pd-2-banner { height: 600px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .tp-pd-2-banner { height: 500px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-pd-2-banner { height: 250px; } } .tp-pd-2-banner img { width: 100%; margin-top: -150px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tp-pd-2-banner img { margin-top: -100px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .tp-pd-2-banner img { margin-top: -20px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-pd-2-banner img { margin-top: -50px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-pd-2-overview-heading { padding-bottom: 30px; } } .tp-pd-2-overview-title { font-size: 50px; font-weight: 700; line-height: 1; letter-spacing: -1.5px; color: var(--tp-common-black); } .tp-pd-2-overview-wrap p { font-size: 16px; font-weight: 500; line-height: 26px; margin-bottom: 24px; color: rgba(0, 0, 0, 0.6); font-family: var(--tp-ff-inter); } .tp-pd-2-overview-wrap ul { padding-top: 20px; display: inline-block; } .tp-pd-2-overview-wrap ul li { font-size: 20px; font-weight: 600; margin-bottom: 20px; padding-bottom: 20px; margin-left: 16px; color: var(--tp-common-black); font-family: var(--tp-ff-inter); } .tp-pd-2-overview-wrap ul li:not(:last-of-type) { border-bottom: 1px solid rgba(0, 0, 0, 0.08); } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) { .tp-pd-2-slider-ptb { padding-bottom: 100px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-pd-2-slider-ptb { padding-bottom: 80px; } } .tp-pd-2-slider-wrapper { margin: 0 -200px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-pd-2-slider-wrapper { margin: 0; } } .tp-pd-2-slider-wrapper .swiper-wrapper { padding-bottom: 40px; } .tp-pd-2-slider-thumb { overflow: hidden; } .tp-pd-2-slider-thumb:hover img { transform: scale(1.2); } .tp-pd-2-slider-thumb img { transition: 0.9s ease-in-out; } .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: var(--tp-common-black); } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-pd-2-step-heading { padding-bottom: 40px; } } .tp-pd-2-step-title { font-size: 40px; font-weight: 700; line-height: 1.2; letter-spacing: -1.2px; color: var(--tp-common-black); } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-pd-2-step-title { font-size: 35px; letter-spacing: 0; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-pd-2-step-title br { display: none; } } .tp-pd-2-step-item-title { font-size: 22px; font-weight: 600; margin-bottom: 10px; color: var(--tp-common-black); } .tp-pd-2-step-item span { font-size: 15px; font-weight: 500; line-height: 24px; display: inline-block; color: rgba(0, 0, 0, 0.6); font-family: var(--tp-ff-inter); } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-pd-2-step-item span br { display: none; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tp-pd-2-thumb-ptb { padding-bottom: 100px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-pd-2-thumb-ptb { padding-bottom: 80px; } } .tp-pd-2-thumb-item { overflow: hidden; height: 600px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .tp-pd-2-thumb-item { height: 500px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tp-pd-2-thumb-item { height: 400px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .tp-pd-2-thumb-item { height: 450px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-pd-2-thumb-item { height: 250px; } } .tp-pd-2-thumb-item img { margin-top: -100px; width: 100%; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tp-pd-2-thumb-item img { margin-top: -60px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-pd-2-thumb-item img { margin-top: -40px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-pd-2-np-ptb { padding-bottom: 80px; } } .tp-pd-2-np-content a { width: 180px; height: 180px; font-size: 16px; font-weight: 600; margin: 0 -14px; text-align: center; line-height: 180px; border-radius: 50%; display: inline-block; color: var(--tp-common-black); border: 1px solid rgba(0, 0, 0, 0.1); } .tp-pd-2-np-content a:hover { color: var(--tp-common-white); background-color: var(--tp-common-black); } .tp-pd-2-np-content a svg { margin: 0 4px; } /*----------------------------------------*/ /* 7.8 counter css start /*----------------------------------------*/ .tp-counter-item { width: 380px; height: 380px; border: 1px solid var(--tp-border-1); border-radius: 100%; display: flex; justify-content: center; align-items: center; flex-direction: column; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .tp-counter-item { width: 300px; height: 300px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tp-counter-item { width: 250px; height: 250px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-counter-item { width: 180px; height: 180px; } } @media (max-width: 574.98px) { .tp-counter-item { width: 162px; height: 162px; } } .tp-counter-wrap-box { display: flex; justify-content: space-between; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-counter-wrap-box { flex-wrap: wrap; justify-content: center; } } .tp-counter-wrap-box > *:not(:first-child) { margin-inline-start: -100px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-counter-wrap-box > *:not(:first-child) { margin-inline-start: 0; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-counter-pp-wrap-box .tp-counter-item span { margin-bottom: 5px; } } @media (max-width: 574.98px) { .tp-counter-pp-wrap-box .tp-counter-item span svg { width: 40px; height: 30px; } } @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), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-counter-2-item { margin-left: 0; } } .tp-counter-team-count { display: flex; align-items: self-start; margin-right: 10px; } .tp-counter-team-count span { font-size: 24px; margin-top: 10px; display: inline-block; } .tp-counter-team-dvdr { position: absolute; top: 50%; transform: translateY(-50%); right: 0; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-counter-team-dvdr { display: none; } } .tp-counter-team-dvdr-2 { position: absolute; top: 50%; transform: translateY(-50%); left: 35px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-counter-team-dvdr-2 { display: none; } } .tp-counter-cst-item.borders { position: relative; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-counter-cst-item.borders::before { display: none; } } .tp-counter-cst-item.borders::before { position: absolute; content: ""; background: linear-gradient(170deg, #b4e717 0%, #10302a 100%); height: 87px; width: 1px; top: 0; right: 0; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-counter-cst-item-inner { justify-content: center !important; } } @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), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-counter-cst-item.ml-100 { margin-left: 50px; } } @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), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-counter-cst-item.ml-100 { margin-left: 0; } } .tp-counter-cst-2-wrap .tp-counter-cst-item.borders::before { background: linear-gradient(170deg, #b4e71712 0%, #10302a87 100%); } @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), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-counter-md-item { margin-left: 0; } } /*----------------------------------------*/ /* 7.2 awards css start /*----------------------------------------*/ .tp-awards-bg-shape { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; } .tp-awards-item { display: -ms-grid; display: grid; -ms-grid-columns: 1fr 1fr 0.1fr; grid-template-columns: 1fr 1fr 0.1fr; } @media (max-width: 574.98px) { .tp-awards-item span { margin-right: 15px; } } .tp-awards-item.borders { border-bottom: 1px solid rgba(255, 255, 255, 0.1); margin-bottom: 35px; padding-bottom: 35px; } .tp-awards-item-top { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } @media (max-width: 574.98px) { .tp-awards-left h5 br { display: none; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-awards-left .tp-section-subtitle { margin-bottom: 30px; } } .tp-awards-2-title { font-size: 145px; } @media (max-width: 574.98px) { .tp-awards-2-title { font-size: 88px; } } .tp-awards-2-result { margin-left: 110px; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-awards-2-result { margin-left: 15px; } } .tp-awards-2-item { gap: 20px; display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center; margin-bottom: 20px; } @media (max-width: 574.98px) { .tp-awards-2-item { grid-template-columns: 1fr 1fr; align-items: flex-start; } } .tp-awards-2-item.borders { border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .tp-awards-2-item:hover .tp-awards-2-btn { background: var(--tp-theme-primary); color: var(--tp-common-black); border-color: var(--tp-theme-primary); } .tp-awards-2-item:hover .tp-awards-2-link { color: var(--tp-theme-primary); } .tp-awards-2-btn { margin-left: auto; border-radius: 100%; border: 1px solid rgba(255, 255, 255, 0.15); width: 45px; height: 45px; display: inline-block; color: var(--tp-common-white); text-align: center; line-height: 40px; transition: all 0.4s ease; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-awards-2-para { margin-top: 30px; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-awards-2-para p br { display: none; } } .tp-awards-wd-title { font-size: 145px; } .tp-awards-wd-border svg { width: 100%; } .tp-awards-wd-top { display: flex; justify-content: space-between; padding: 0 45px 5px 0px; } @media (max-width: 574.98px) { .tp-awards-wd-top { padding-right: 0; } } .tp-awards-wd-top span { font-weight: 400; font-size: 20px; line-height: 145%; color: var(--tp-grey-1); } .tp-awards-wd-item { padding: 25px 45px 25px 0px; } @media (max-width: 574.98px) { .tp-awards-wd-item { padding-right: 0; } } .tp-awards-wd-item.borders { border-bottom: 1px solid var(--tp-border-1); } .tp-awards-wd-item span { font-weight: 500; font-size: 25px; } .tp-awards-wd-para { margin-left: -40px; } @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), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-awards-wd-para { margin-left: 0; } .tp-awards-wd-para br { display: 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), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-awards-wd-2-wrap { margin-left: 0; margin-right: 0; } } .tp-awards-vp-move-thumbs-wrapper { margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; max-width: 1000% !important; width: 100vw !important; } .tp-awards-vp-start-thumbs-caption { position: relative; width: 100%; height: 50vh; display: flex; align-items: center; justify-content: center; flex-direction: column; } .tp-awards-vp-start-thumbs-wrapper { position: relative; display: flex; justify-content: space-between; flex-wrap: wrap; box-sizing: border-box; padding: 0 40px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .tp-awards-vp-start-thumbs-wrapper { padding: 0 30px; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-awards-vp-start-thumbs-wrapper { padding: 0 20px; } } .tp-awards-vp-start-move-thumb { box-sizing: border-box; position: relative; width: calc(25% - 80px); height: calc(25vw - 40px); margin: 0 40px; margin-bottom: 40px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .tp-awards-vp-start-move-thumb { width: calc(25% - 60px); height: calc(25vw - 30px); margin: 0 30px; margin-bottom: 30px; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) { .tp-awards-vp-start-move-thumb { width: calc(33.33% - 40px); height: calc(33.33vw - 40px); margin: 25px 20px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .tp-awards-vp-start-move-thumb { width: calc(50% - 30px); height: calc(50vw - 30px); margin: 10px 15px; } } @media (max-width: 574.98px) { .tp-awards-vp-start-move-thumb { width: calc(50% - 20px); height: calc(50vw - 20px); margin: 5px 10px; } } .tp-awards-vp-start-move-thumb:nth-of-type(3n + 2) { width: calc(15% - 80px); height: calc(15vw - 40px); margin-top: 50vh; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .tp-awards-vp-start-move-thumb:nth-of-type(3n + 2) { width: calc(15% - 60px); height: calc(15vw - 30px); margin-top: 50vh; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) { .tp-awards-vp-start-move-thumb:nth-of-type(3n + 2) { width: calc(33.33% - 40px); height: calc(33.33vw - 40px); margin: 25px 20px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .tp-awards-vp-start-move-thumb:nth-of-type(3n + 2) { width: calc(50% - 30px); height: calc(50vw - 30px); margin: 10px 15px; } } @media (max-width: 574.98px) { .tp-awards-vp-start-move-thumb:nth-of-type(3n + 2) { width: calc(50% - 20px); height: calc(50vw - 20px); margin: 5px 10px; } } .tp-awards-vp-start-move-thumb:nth-of-type(3n + 3) { width: calc(35% - 80px); height: calc(35vw - 40px); margin-top: 25vh; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .tp-awards-vp-start-move-thumb:nth-of-type(3n + 3) { width: calc(35% - 60px); height: calc(35vw - 30px); margin-top: 25vh; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) { .tp-awards-vp-start-move-thumb:nth-of-type(3n + 3) { width: calc(33.33% - 40px); height: calc(33.33vw - 40px); margin: 25px 20px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .tp-awards-vp-start-move-thumb:nth-of-type(3n + 3) { width: calc(50% - 30px); height: calc(50vw - 30px); margin: 10px 15px; } } @media (max-width: 574.98px) { .tp-awards-vp-start-move-thumb:nth-of-type(3n + 3) { width: calc(50% - 20px); height: calc(50vw - 20px); margin: 5px 10px; } } .tp-awards-vp-start-move-thumb .overlapping-image-inner { width: 100%; height: 100%; position: absolute; top: 0; } .tp-awards-vp-end-move-thumb { box-sizing: border-box; position: relative; width: calc(33.33% - 80px); height: calc(33.33vw - 80px); display: flex; align-items: center; justify-content: center; margin: 40px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .tp-awards-vp-end-move-thumb { width: calc(33.33% - 60px); height: calc(33.33vw - 60px); margin: 30px; } } .tp-awards-vp-end-move-thumb .tp-awards-vp-move-thumb-inner { width: 100%; height: 100%; position: absolute; top: 0; overflow: hidden; border-radius: 24px; } .tp-awards-vp-end-thumbs-wrapper { display: flex; justify-content: space-between; flex-wrap: wrap; margin-top: 100vh; box-sizing: border-box; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .tp-awards-vp-end-thumbs-wrapper { padding-left: 30px; padding-right: 30px; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-awards-vp-end-thumbs-wrapper { display: none; } } .tp-awards-vp-section-image { position: relative; display: block; width: 100%; height: 100%; } .tp-awards-vp-section-image img { border-radius: 24px; width: 100%; object-fit: cover; height: 100%; } .tp-reveal-item.active:hover .tp-reveal-bg { opacity: 1; } .tp-reveal-bg { position: absolute; top: 0; left: 0; width: 120px; height: 156px; opacity: 0; margin: -150px 0 0 -150px; overflow: hidden; pointer-events: none; z-index: 99; background-position: center; background-size: cover; background-repeat: no-repeat; -webkit-transition: opacity 0.3s, transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1); -moz-transition: opacity 0.3s, transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1); -ms-transition: opacity 0.3s, transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1); -o-transition: opacity 0.3s, transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1); transition: opacity 0.3s, transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1); } @media (max-width: 574.98px) { .tp-reveal-bg { width: 170px; height: 170px; } } /*----------------------------------------*/ /* 7.31 text css start /*----------------------------------------*/ .tp-text-slider-item { display: flex; align-items: center; } .tp-text-slider-item span { font-family: var(--tp-ff-heading); font-weight: 700; font-size: 22px; text-transform: uppercase; color: var(--tp-common-black); } .tp-text-slider-item span.icons { padding: 0 60px; display: inline-block; transform: translateY(-2px); } .tp-text-slider-item span.borders { display: inline-block; width: 12px; height: 12px; background: var(--tp-common-black); border-radius: 30px; margin: 0 60px; } .tp-text-slider-active .swiper-slide { width: auto; } .tp-text-cst-title { font-size: 180px; display: flex; align-items: center; } @media only screen and (min-width: 768px) and (max-width: 991px) { .tp-text-cst-title { font-size: 130px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-text-cst-title { font-size: 100px; } } .tp-text-cst-title span { border-radius: 120px; width: 138px; height: 138px; background: var(--tp-common-black-1); display: flex; justify-content: center; align-items: center; margin: 0 36px; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-text-cst-title span { width: 90px; height: 90px; } } .tp-text-cst-slide-active .swiper-slide { width: auto; } .tp-text-it-slider-item span { font-family: var(--tp-ff-inter); font-weight: 600; font-size: 16px; letter-spacing: -0.03em; text-transform: capitalize; color: var(--tp-common-black-1); border: 1px solid rgba(16, 48, 42, 0.1); border-radius: 50px; display: inline-block; padding: 10px 32px; transition: all 0.4s ease; } .tp-text-it-slider-item span:hover { background: var(--tp-common-green-2); border-color: var(--tp-common-green-2); } .tp-text-it-slider-active .swiper-slide { width: auto; } .tp-text-it-item span { font-weight: 700; font-size: 132px; line-height: 1.2; letter-spacing: -0.04em; text-transform: capitalize; color: transparent; color: transparent; transition: 0.3s; cursor: pointer; white-space: nowrap; display: inline-block; background-size: 0% 100%; padding-right: 30px; background-repeat: no-repeat; font-family: var(--tp-ff-inter); -webkit-background-clip: text; -webkit-text-fill-color: transparent; -webkit-text-stroke: 2px #b0d5ba; 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, #b0d5ba 0%, #b0d5ba 50%, transparent 50.1%); } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) { .tp-text-it-item span { font-size: 100px; } } @media (max-width: 574.98px) { .tp-text-it-item span { font-size: 50px; } } .tp-text-it-item span:hover { background-size: 200% 100%; } .tp-text-pb-slider { padding: 29px 0; } .tp-text-pb-slider .tp-text-slider-item span { font-family: var(--tp-ff-inter); font-weight: 500; font-size: 24px; text-transform: capitalize; color: var(--tp-grey-5); } .tp-text-pb-slider .tp-text-slider-item span.icons { padding: 0 40px 0px 12px; } .tp-text-pb-item span { font-weight: 600; font-size: 82px; color: var(--tp-common-black-5); padding-right: 20px; -webkit-text-fill-color: var(--tp-common-black-5); -webkit-text-stroke-color: var(--tp-common-black-5); -webkit-text-stroke-width: 0; } @media (max-width: 574.98px) { .tp-text-pb-item span { font-size: 55px; } } .tp-text-pb-moving-bottom .tp-text-pb-item span { opacity: 0.08; } .tp-text-ai-slider-active .swiper-slide { width: auto; } .tp-text-ai-slider-content { padding: 52px 0; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-text-ai-slider-content { padding: 32px 0; } } .tp-text-ai-slider-single { transform: rotate(3deg); } .tp-text-ai-slider-single-2 { transform: rotate(-3deg); } .tp-text-md-title { font-size: 160px; opacity: 0.05; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-text-md-title { font-size: 120px; } } .tp-text-md-slider-active .swiper-slide { width: auto; } /*----------------------------------------*/ /* 7.30 testimonial css start /*----------------------------------------*/ .tp-testimonial-thumb { overflow: hidden; width: 100%; } @media (max-width: 574.98px) { .tp-testimonial-thumb { margin-left: 0; width: 100%; } } .tp-testimonial-thumb:hover img { transform: scale(1.1); } .tp-testimonial-thumb img { transition: all 0.4s ease; } @media (max-width: 574.98px) { .tp-testimonial-thumb img { width: 100%; } } .tp-testimonial-thumb-2 { position: absolute; bottom: 60px; right: 0; z-index: 2; overflow: hidden; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) { .tp-testimonial-thumb-2 { bottom: 0; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-testimonial-thumb-2 { position: inherit; bottom: auto; margin-top: 30px; display: inline-block; } } .tp-testimonial-thumb-2:hover img { transform: scale(1.1); } .tp-testimonial-thumb-2 img { transition: all 0.4s ease; } .tp-testimonial-video { position: absolute; top: 20px; right: 20px; } .tp-testimonial-video .popup-video { width: 36px; height: 36px; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-testimonial-2-content h5 br { display: none; } } .tp-testimonial-2-content-wrap .fraction-wrapper { position: inherit; bottom: auto; left: auto; right: auto; margin: 0 auto; margin-top: 96px; } .tp-testimonial-2-shape { position: absolute; bottom: 50px; left: -112px; } .tp-testimonial-wd-spacing { padding-top: 230px; } @media only screen and (min-width: 1400px) and (max-width: 1599px) { .tp-testimonial-wd-spacing { padding-top: 120px; } } @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), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-testimonial-wd-spacing { padding-top: 60px; } } .tp-testimonial-wd-ratings { text-align: left; } .tp-testimonial-wd-ratings span i { color: var(--tp-common-yellow-2); font-size: 14px; transform: translateY(-3px); } .tp-testimonial-wd-ratings-wrap { float: right; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-testimonial-wd-ratings-wrap { float: left; } } .tp-testimonial-wd-ratings-inner { border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 100px; width: 264px; padding: 15px 32px; } .tp-testimonial-wd-slider-item .tp-testimonial-video { position: inherit; margin-bottom: 38px; } .tp-testimonial-wd-slider-item .fraction-wrapper { position: inherit; bottom: auto; float: right; margin-top: 50px; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-testimonial-wd-slider-item .fraction-wrapper { float: left; } } .tp-testimonial-wd-slider-item .fraction-wrapper #paginations span { color: var(--tp-common-white); } .tp-testimonial-wd-slider-item .shop-slider-progress-bar { background-color: rgba(255, 255, 255, 0.5); } .tp-testimonial-wd-shape { position: absolute; bottom: 0; left: 0; z-index: 1; width: 24%; } .tp-testimonial-wd-shape svg { width: 100%; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-testimonial-wd-thumb { margin-left: 0; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-testimonial-wd-para { margin-left: 0; } .tp-testimonial-wd-para p br { display: none; } } .tp-testimonial-sa-qoute { display: flex; } .tp-testimonial-sa-qoute img { margin-left: -15px; width: 50px; height: 50px; object-fit: cover; } .tp-testimonial-sa-qoute .qoute { width: 50px; height: 50px; border-radius: 50px; text-align: center; line-height: 46px; background: var(--tp-common-nights); display: inline-block; flex: 0 0 auto; } .tp-testimonial-sa-video .popup-video { background: var(--tp-grey-1); width: 35px; height: 35px; color: var(--tp-common-white); transition: all 0.4s ease; } .tp-testimonial-sa-video .popup-video span { line-height: 0; } .tp-testimonial-sa-item { border: 1px solid var(--tp-border-1); padding: 45px 35px 40px 35px; } .tp-testimonial-sa-item:hover .popup-video { background: var(--tp-common-nights); } .tp-testimonial-qoute .qoute { width: 60px; height: 60px; line-height: 60px; background: var(--tp-theme-primary); } .tp-testimonial-qoute .qoute-img { width: 60px; flex: 0 0 auto; } .tp-testimonial-qoute .qoute-img img { width: 50px; height: 50px; margin: 6px 5px 0 !important; } .tp-testimonial-pp-content .fraction-wrapper { margin-top: 75px; } .tp-testimonial-cst-wrap { border-radius: 20px; box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25); height: 100%; } .tp-testimonial-cst-item { padding: 40px 32px 34px 40px; border-radius: 20px; position: absolute; margin: 40px; bottom: 0; left: 0; right: 0; transition: all 0.4s ease; } @media (max-width: 574.98px) { .tp-testimonial-cst-item { padding: 20px 20px 14px 20px; margin: 10px; position: inherit; margin-top: -120px; } } .tp-testimonial-cst-item .popup-video { width: 60px; height: 60px; background: var(--tp-common-black-1); display: flex; justify-content: center; align-items: center; } .tp-testimonial-cst-item .popup-video span { line-height: 1; } .tp-testimonial-cst-item .tp-testimonial-sa-qoute .qoute { background: var(--tp-common-black-1); } .tp-testimonial-cst-thumb { border-radius: 20px; height: 100%; } @media (max-width: 574.98px) { .tp-testimonial-cst-thumb { height: auto; } } .tp-testimonial-cst-thumb img { border-radius: 20px; height: 100%; } .tp-testimonial-cst-result { padding: 50px 60px 40px 60px; border-radius: 20px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-testimonial-cst-result { padding: 50px 30px 40px 30px; } } .tp-testimonial-cst-result-top { padding-bottom: 363px; } @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), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-testimonial-cst-result-top { padding-bottom: 200px; } .tp-testimonial-cst-result-top h3 { font-size: 28px; } .tp-testimonial-cst-result-top h3 br { display: none; } .tp-testimonial-cst-result-top p br { display: none; } } @media (max-width: 574.98px) { .tp-testimonial-cst-result-top { padding-bottom: 100px; flex-direction: column; } } .tp-testimonial-cst-network { width: 60px; height: 60px; display: inline-block; border-radius: 50%; display: flex; justify-content: center; align-items: center; background: var(--tp-common-green-2); flex: 0 0 auto; } .tp-testimonial-cst-btn { border: 1px solid rgba(243, 241, 242, 0.1); border-radius: 24px; } .tp-testimonial-cst-shape { position: absolute; bottom: -110px; right: -110px; opacity: 0.2; } @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), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-testimonial-cst-shape { width: 50%; } } .tp-testimonial-cst-pagenation { text-align: center; } .tp-testimonial-cst-pagenation span { width: 10px; height: 10px; background: transparent; background: var(--tp-grey-5); opacity: 1; } .tp-testimonial-cst-pagenation span.swiper-pagination-bullet-active { background: var(--tp-common-green-2); } .tp-testimonial-it-title h2 { font-size: 132px; line-height: 1; } @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) { .tp-testimonial-it-title h2 { font-size: 100px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-testimonial-it-title h2 { font-size: 70px; margin-bottom: 20px; } } @media (max-width: 574.98px) { .tp-testimonial-it-title h2 { font-size: 50px; } } .tp-testimonial-it-star i { color: #FF6D00; } .tp-testimonial-it-ratings-wrap { border: 1px solid #E3E7E6; border-radius: 100px; width: 310px; padding: 18px 32px; } .tp-testimonial-it-item { backdrop-filter: blur(5px); opacity: 0.97; border: 1px solid rgba(16, 48, 42, 0.08); border-radius: 20px; padding: 50px 20px 50px 50px; } @media (max-width: 574.98px) { .tp-testimonial-it-item { padding: 30px 20px 30px 20px; } } .tp-testimonial-it-item:hover .tp-testimonial-it-shape { opacity: 1; visibility: visible; } .tp-testimonial-it-qoute { width: 40px; height: 40px; background: var(--tp-common-black-1); display: flex; justify-content: center; align-items: center; border-radius: 50px; } .tp-testimonial-it-shape { position: absolute; top: 20px; right: 20px; opacity: 0; visibility: hidden; transition: all 0.4s ease; } .tp-testimonial-it-slider { margin-right: -290px; margin-top: -55px; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-testimonial-it-slider { margin-right: 0; margin-top: 0; } } .tp-testimonial-it-pagenation { text-align: center; } .tp-testimonial-it-pagenation span { width: 10px; height: 10px; background: transparent; background: var(--tp-common-black-1); opacity: 0.1; } .tp-testimonial-it-pagenation span.swiper-pagination-bullet-active { background: var(--tp-common-black-1); opacity: 1; } .tp-testimonial-it-author img { width: 80px; border-radius: 100px; } .tp-testimonial-pb-wrap { padding: 160px 160px 160px 160px; box-shadow: 0 4px 40px 10px rgba(0, 0, 0, 0.1); position: relative; z-index: 1; margin-bottom: -240px; } @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), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-testimonial-pb-wrap { margin-bottom: -140px; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-testimonial-pb-wrap { padding: 60px 60px 90px 60px; } } @media (max-width: 574.98px) { .tp-testimonial-pb-wrap { padding: 30px 20px 30px 20px; } } .tp-testimonial-pb-pagenation { text-align: right; line-height: 1; margin-top: -50px; } @media (max-width: 574.98px) { .tp-testimonial-pb-pagenation { text-align: center; margin-top: 20px; } } .tp-testimonial-pb-pagenation span { width: 10px; height: 10px; background: transparent; background: var(--tp-theme-secondary); opacity: 0.1; } .tp-testimonial-pb-pagenation span.swiper-pagination-bullet-active { background: var(--tp-theme-secondary); opacity: 1; } @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), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-testimonial-pb-content br { display: none; } } .tp-testimonial-ai-shape { top: -63px; right: 0; width: 19%; z-index: -1; } .tp-testimonial-ai-profeson { padding: 3px 17px; } .tp-testimonial-ai-expreance { border-top: 1px solid rgba(17, 17, 18, 0.1); padding-top: 32px; margin-top: 117px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-testimonial-ai-expreance { margin-top: 50px; } } .tp-testimonial-ai-navigation { display: flex; gap: 10px; position: absolute; bottom: 48px; left: 12px; z-index: 1; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-testimonial-ai-navigation { position: inherit; left: auto; bottom: auto; margin-left: 85px; } } .tp-testimonial-ai-navigation span { transition: all 0.4s ease; position: relative; width: 50px; height: 50px; display: flex; justify-content: center; align-items: center; margin: 2px; } .tp-testimonial-ai-navigation span::after { content: ""; position: absolute; top: -2px; bottom: -2px; left: -2px; right: -2px; z-index: -2; border-radius: 101px; background-image: -webkit-linear-gradient(90deg, #201b17 0%, #f96501 50%, #201b17 100%); background-image: -moz-linear-gradient(90deg, #201b17 0%, #f96501 50%, #201b17 100%); background-image: -ms-linear-gradient(90deg, #201b17 0%, #f96501 50%, #201b17 100%); background-image: -o-linear-gradient(90deg, #201b17 0%, #f96501 50%, #201b17 100%); background-image: linear-gradient(90deg, #201b17 0%, #f96501 50%, #201b17 100%); -moz-animation: sliderTitle3 2s ease-in-out 1s forwards infinite alternate; -webkit-animation: sliderTitle3 2s ease-in-out 1s forwards infinite alternate; animation: sliderTitle3 2s ease-in-out 1s forwards infinite alternate; background-size: 150% 150%; } .tp-testimonial-ai-navigation span::before { position: absolute; content: ""; top: 0; left: 0; width: 100%; height: 100%; background: var(--tp-common-white); z-index: -1; border-radius: 100px; transition: all 0.4s ease; } .tp-testimonial-ai-navigation span:hover { background-color: transparent; color: var(--tp-common-white); } .tp-testimonial-ai-navigation span:hover::before { background: transparent; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-testimonial-ai-avatar { text-align: center; } } @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), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-testimonial-ai-content { margin-right: 0; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-testimonial-ai-content { margin-left: 0; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-testimonial-ai-content p br { display: none; } } .tp-testimonial-md-item { margin: 0px 30px; } @media (max-width: 574.98px) { .tp-testimonial-md-item { margin: 0; } } .fraction-wrapper { position: absolute; bottom: 110px; left: 0; width: 270px; z-index: 1; height: 12px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .fraction-wrapper { position: inherit; margin-top: 30px; bottom: auto; } } .fraction-wrapper #paginations span { font-size: 22px; font-size: 500; color: var(--tp-common-black); } .fraction-wrapper #paginations span:last-child { float: right; } #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: var(--tp-border-1); -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .shop-slider-progress-bar span { position: absolute; left: 0; top: -1px; height: 1px; width: 100%; background-color: var(--tp-common-black); transform: scaleX(1); transform-origin: left; } /*----------------------------------------*/ /* 7.3 banner css start /*----------------------------------------*/ .tp-banner-thumb { height: 680px; width: 100%; overflow: hidden; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-banner-thumb { height: 400px; } } .tp-banner-2-spacing { padding-top: 150px; } @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), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-banner-2-spacing { padding-top: 150px; } } .tp-banner-2-content { padding: 70px 40px 55px 60px; } .tp-banner-2-thumb { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; } .tp-banner-2-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; } .tp-banner-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; } .tp-banner-wd-border svg { width: 100%; } .tp-banner-wd-spacing { padding-top: 515px; } @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), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-banner-wd-spacing { padding-top: 350px; } } .tp-banner-wd-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; } .tp-banner-wd-item { padding: 27px 40px 30px 40px; } .tp-banner-wd-thumb-2 { height: 730px; width: 100%; } @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) { .tp-banner-wd-thumb-2 { height: 500px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-banner-wd-thumb-2 { height: 300px; } } .tp-banner-cst-content .tp-testimonial-cst-network { width: 100px; height: 100px; } @media (max-width: 574.98px) { .tp-banner-cst-content .tp-testimonial-cst-network { width: 50px; height: 50px; } .tp-banner-cst-content .tp-testimonial-cst-network svg { width: 20px; } } .tp-banner-cst-spacing { padding-top: 100px; } @media (max-width: 574.98px) { .tp-banner-cst-spacing { padding-top: 50px; } } .tp-banner-cst-logo { border-bottom: 1px solid #3A553E; margin-bottom: 14px; padding-bottom: 15px; display: inline-block; } .tp-banner-cst-logo-wrap { clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%); background: #243d3a99; width: 220px; height: 240px; padding-top: 57px; border-radius: 10px; } .tp-banner-cst-logo-btn { width: 42px; height: 42px; text-align: center; line-height: 38px; background: var(--tp-common-green-2); display: inline-block; border-radius: 50%; } .tp-banner-cst-widget { width: 355px; height: 414px; display: flex; justify-content: center; align-items: center; } .tp-banner-cst-shape { position: absolute; left: 0; right: 0; margin: 0 auto; } .tp-banner-cst-bottom { border-top: 1px solid #919E9D; margin-top: 194px; padding: 45px 0px 25px 0px; position: relative; z-index: 1; } @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), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-banner-cst-bottom { margin-top: 100px; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-banner-cst-bottom { padding: 25px 0px 5px 0px; } } .tp-banner-it-thumb { height: 800px; width: 100%; overflow: hidden; } @media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px) { .tp-banner-it-thumb { height: 600px; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-banner-it-thumb { height: 400px; } } .tp-banner-pb-thumb { height: 950px; width: 100%; overflow: hidden; } @media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px) { .tp-banner-pb-thumb { height: 750px; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-banner-pb-thumb { height: 650px; } } .tp-banner-ai-thumb { height: 820px; width: 100%; overflow: hidden; } @media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px) { .tp-banner-ai-thumb { height: 600px; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-banner-ai-thumb { height: 400px; } } /*----------------------------------------*/ /* 7.27 skill css start /*----------------------------------------*/ .tp-skill-wd-icon { border-radius: 100%; border: 1px solid rgba(255, 255, 255, 0.1); width: 80px; height: 80px; text-align: center; line-height: 80px; display: inline-block; } .tp-skill-wd-border { position: absolute; top: 0; right: 0; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-skill-wd-border { right: -25px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-skill-wd-border { display: none; } } .tp-skill-wd-border.borders-2 { right: -30px; } .tp-skill-wd-para { border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 100px; background: #0d0d0d; display: inline-block; padding: 8px 10px 8px 30px; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-skill-wd-item { margin-left: 0; } } .tp-skill-pb-title { font-size: 170px; line-height: 1; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) { .tp-skill-pb-title { font-size: 100px; } } @media (max-width: 574.98px) { .tp-skill-pb-title { font-size: 60px; } .tp-skill-pb-title span { margin-top: 0; } } .tp-skill-pb-top-text { display: flex; align-items: start; white-space: nowrap; } .tp-skill-pb-slider-active .swiper-slide { display: inline-block; width: auto; } .tp-skill-pb-numbar { width: 60px; height: 60px; display: flex; justify-content: center; align-items: center; } .tp-skill-pb-numbar.tp-border { border: 1px solid #291A10; } .tp-skill-pb-doted { position: absolute; top: 50%; transform: translateY(-50%); } .tp-skill-pb-circale-wrap { gap: 32px; margin-top: -90px; } @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), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-skill-pb-circale-wrap { margin-top: 0; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-skill-pb-circale-wrap { flex-wrap: wrap; justify-content: center !important; } } .tp-skill-pb-circale.circale-1 { width: 678px; height: 678px; background: var(--tp-theme-secondary); border-radius: 100%; display: flex; justify-content: center; align-items: center; } @media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px) { .tp-skill-pb-circale.circale-1 { width: 478px; height: 478px; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-skill-pb-circale.circale-1 { width: 400px; height: 400px; } } @media (max-width: 574.98px) { .tp-skill-pb-circale.circale-1 { width: 325px; height: 325px; } } .tp-skill-pb-circale.circale-2 { width: 484px; height: 484px; } @media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px) { .tp-skill-pb-circale.circale-2 { width: 378px; height: 378px; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-skill-pb-circale.circale-2 { width: 280px; height: 280px; } } .tp-skill-pb-circale.circale-3 { width: 218px; height: 218px; } .tp-skill-pb-circale-content { position: absolute; top: 50%; transform: translateY(-50%); left: 0; right: 0; text-align: center; } .tp-skill-pb-border { overflow: hidden; } .tp-skill-pb-border-2 .tp-skill-pb-numbar.tp-border { border: 1px solid #DCDBDC; } .tp-skill-pb-border-2 .tp-skill-pb-circale.circale-1 { background: var(--tp-common-black-5); } .tp-skill-pb-panel { width: 100%; height: 100%; will-change: transform; opacity: 1 !important; } .tp-skill-pb-panel-wrap { width: 100%; 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), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-skill-pb-panel-wrap { flex-wrap: wrap; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-skill-pb-para { margin-left: 0; } .tp-skill-pb-para br { display: none; } } /*----------------------------------------*/ /* 7.9 cta css start /*----------------------------------------*/ .tp-cta-wd-shape { position: absolute; bottom: -16px; right: 0; width: 36%; } .tp-cta-wd-shape svg { width: 100%; } .tp-cta-wd-email { border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 100px; padding: 21px 35px; background: var(--tp-common-black); } @media (max-width: 574.98px) { .tp-cta-wd-email { padding: 15px 21px; } } .tp-cta-wd-email:hover { color: var(--tp-grey-1); } .tp-cta-sa-btn { position: absolute; bottom: 0; right: 0; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-cta-sa-btn { position: inherit; margin-top: 30px; } } .tp-cta-it-form .cta-it-input { font-family: var(--tp-ff-inter); font-weight: 400; font-size: 18px; letter-spacing: -0.04em; color: var(--tp-common-black); opacity: 0.8; border: 1px solid rgba(16, 48, 42, 0.1); border-radius: 10px; width: 518px; height: 70px; background: transparent; } @media (max-width: 574.98px) { .tp-cta-it-form .cta-it-input { width: 100%; } } .tp-cta-it-form .cta-it-input:focus { border-color: var(--tp-common-black-1); } .tp-cta-it-form .cta-it-input::placeholder { font-family: var(--tp-ff-inter); font-weight: 400; font-size: 18px; letter-spacing: -0.04em; color: var(--tp-common-black-1); } .tp-cta-it-trams { opacity: 0.8; } .tp-cta-it-trams a { text-decoration: underline; } .tp-cta-it-scale { position: absolute; width: 100%; left: 0; top: 0; z-index: -1; } .tp-cta-it-shape { position: absolute; bottom: 0; left: 0; width: 36%; -webkit-animation: levitate-lg 4s ease-in-out infinite; animation: levitate-lg 4s ease-in-out infinite; -webkit-animation-delay: 1s; animation-delay: 1s; } .tp-cta-it-shape-2 { position: absolute; top: 0; right: 0; width: 35%; -webkit-animation: levitate-lg 4s ease-in-out infinite; animation: levitate-lg 4s ease-in-out infinite; -webkit-animation-delay: 1s; animation-delay: 1s; } .tp-cta-pb-wrap { padding: 77px 0px 55px 0px; flex-wrap: wrap; } .tp-cta-ai-bg { border-radius: 60px; padding: 187px 30px 200px 30px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-cta-ai-bg { padding: 100px 30px 100px 30px; } } /*----------------------------------------*/ /* 7.23 process css start /*----------------------------------------*/ .tp-process-sa-item-count { position: absolute; top: 0; left: 0; width: 70px; height: 70px; display: inline-block; text-align: center; line-height: 70px; } .tp-process-sa-list ul li { font-weight: 500; font-size: 18px; line-height: 144%; color: var(--tp-common-white); list-style: none; margin-bottom: 10px; } .tp-process-sa-border svg { width: 100%; } .tp-process-sa-shape { position: absolute; bottom: 0; right: 0; z-index: -1; width: 9%; } .tp-process-sa-shape svg { width: 100%; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-process-sa-link { margin-top: 30px; } } .tp-process-pp-video { position: absolute; top: 50%; transform: translateY(-50%); left: 0; right: 0; margin: 0 auto; text-align: center; } .tp-process-pp-video-inner { overflow: hidden; border-radius: 50%; flex: 0 0 auto; } .tp-process-pp-video-inner:hover .tp-process-pp-video-img { transform: scale(1.1); } .tp-process-pp-video .popup-video { width: 40px; height: 40px; line-height: 38px; background: var(--tp-common-white); display: inline-block; } .tp-process-pp-video-img { border-radius: 50%; transition: all 0.4s ease; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-process-pp-video-wrap p br { display: none; } } .tp-process-pp-count { width: 40px; height: 40px; line-height: 40px; border-radius: 50%; } .tp-process-pp-border { transform: translateY(32px); } .tp-process-pp-border svg { width: 100%; } .tp-process-it-bg { background: linear-gradient(180deg, #d5ffdd 0%, rgba(213, 255, 221, 0) 100%); } .tp-process-it-video { position: absolute; top: 50%; transform: translateY(-50%); left: 0; right: 0; margin: 0 auto; text-align: center; } .tp-process-it-video .tp-hero-video-btn { display: inline-block; line-height: 47px; } .tp-process-it-item { border: 1px solid #E0EAE4; border-radius: 20px; padding: 55px 30px 27px 30px; } .tp-process-it-item-2 { border-color: rgba(16, 48, 42, 0.1); } .tp-process-it-para-2 { background: none; border: 1px solid #E0EAE4; padding: 8px 32px 8px 30px; } .tp-process-it-para-3 { border-color: rgba(16, 48, 42, 0.1); } .tp-process-it-shape { position: absolute; top: -40px; right: 0; width: 15%; z-index: -1; } /*----------------------------------------*/ /* 7.29 techonolgy css start /*----------------------------------------*/ .tp-techonolgy-para p { margin-left: 200px; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-techonolgy-para p { margin-left: 0; } } @media (max-width: 574.98px) { .tp-techonolgy-para p br { display: none; } } .tp-techonolgy-para p::before { background: rgba(3, 3, 3, 0.1); height: 145px; top: -35px; } .tp-techonolgy-ratings { display: flex; } .tp-techonolgy-ratings-wrap { display: flex; max-width: 210px; background: var(--tp-common-white); padding: 18px 16px 12px 19px; border-radius: 10px; } .tp-techonolgy-ratings i { color: var(--tp-common-meteor); font-size: 14px; } .tp-techonolgy-ratings-inner { float: right; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-techonolgy-ratings-inner { float: left; } } .tp-techonolgy-shape { position: inherit; top: inherit; left: 0; transform: inherit; margin-top: 85px; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-techonolgy-shape { display: none; } } .tp-techonolgy-capsule-wrapper { height: 780px; position: relative; overflow: hidden; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-techonolgy-capsule-wrapper { height: 1000px; } } .tp-techonolgy-capsule-wrapper .tp-techonolgy-capsule-item-wrapper > p { position: absolute; display: inline-block; margin-bottom: 0; left: 0; top: 0; user-select: none; pointer-events: auto; transition: none; } .tp-techonolgy-capsule-item { width: 200px; height: 200px; background: var(--tp-common-white); font-family: var(--tp-ff-heading); font-weight: 500; font-size: 18px; color: var(--tp-common-black); border-radius: 300px; padding: 10px 26px; -webkit-transform: translate(-50%, -50%) rotate(0.01rad); -moz-transform: translate(-50%, -50%) rotate(0.01rad); -ms-transform: translate(-50%, -50%) rotate(0.01rad); -o-transform: translate(-50%, -50%) rotate(0.01rad); transform: translate(-50%, -50%) rotate(0.01rad); display: flex; flex-direction: column; justify-content: center; align-items: center; overflow: hidden; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-techonolgy-capsule-item { width: 150px; height: 150px; text-align: center; } .tp-techonolgy-capsule-item img { margin-bottom: 5px; } } @media (max-width: 574.98px) { .tp-techonolgy-capsule-item { width: 100px; height: 100px; font-size: 16px; margin-bottom: 0; line-height: 1; } .tp-techonolgy-capsule-item img { width: 30px; height: 30px; } } .tp-techonolgy-capsule-item img { display: block; } .tp-techonolgy-capsule-item.vue { width: 250px; height: 250px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-techonolgy-capsule-item.vue { width: 150px; height: 150px; } } @media (max-width: 574.98px) { .tp-techonolgy-capsule-item.vue { width: 120px; height: 120px; } } .tp-techonolgy-capsule-item.dc { width: 180px; height: 180px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-techonolgy-capsule-item.dc { width: 130px; height: 130px; } } @media (max-width: 574.98px) { .tp-techonolgy-capsule-item.dc { width: 100px; height: 100px; font-size: 16px; } } .tp-techonolgy-capsule-item.sketch { width: 170px; height: 170px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-techonolgy-capsule-item.sketch { width: 120px; height: 120px; } } @media (max-width: 574.98px) { .tp-techonolgy-capsule-item.sketch { width: 100px; height: 100px; font-size: 16px; } } /*----------------------------------------*/ /* 7.29 team css start /*----------------------------------------*/ .tp-team-sa-title { font-weight: 700; font-size: 145px; text-transform: uppercase; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-team-sa-title { font-size: 100px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-team-sa-title-wrap { margin-bottom: 100px; } } .tp-team-sa-shape { justify-content: flex-start; margin-left: 112px; margin-top: 146px; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-team-sa-shape { margin-left: 0; } } .tp-team-sa-item .tp-techonolgy-para p::before { top: -21px; } .tp-team-sa-para p::before { top: -21px; } .tp-team-value-item.borders { border-bottom: 1px solid #eee; margin-bottom: 30px; padding-bottom: 15px; } .tp-team-value-title svg { margin-top: 3px; } .tp-team-carear-title { font-size: 25px; line-height: 104%; } .tp-team-carear-content p { font-size: 18px; line-height: 144%; } .tp-team-it-big-title { margin-left: -100px; margin-bottom: -180px; } @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), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-team-it-big-title { margin-left: -30px; margin-bottom: -100px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-team-it-big-title { margin-bottom: -30px; } } .tp-team-it-big-title h2 { font-size: 300px; background: linear-gradient(180deg, rgba(16, 48, 42, 0.1) 0%, rgba(6, 18, 22, 0) 100%); background-clip: border-box; background-clip: border-box; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .tp-team-it-big-title h2 { font-size: 250px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tp-team-it-big-title h2 { font-size: 185px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-team-it-big-title h2 { font-size: 135px; } } @media (max-width: 574.98px) { .tp-team-it-big-title h2 { font-size: 75px; } } .tp-team-it-item { border: 1px solid #E7EAEA; border-radius: 20px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-team-it-item { margin-top: 0; } } .tp-team-it-item:hover .tp-team-it-socials-icon { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } .tp-team-it-item:hover .tp-team-it-thumb::before { opacity: 1; visibility: visible; } .tp-team-it-item-single { margin-right: -67px; margin-left: 37px; margin-top: 153px; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) { .tp-team-it-item-single { margin-right: 0; margin-left: -50px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-team-it-item-single { margin-top: 0; margin-left: 0; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-team-it-item-single { margin-right: 0; } } @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), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-team-it-item-right { margin-left: 0; } } .tp-team-it-thumb { background: var(--tp-grey-5); display: block; border-radius: 20px; position: relative; } .tp-team-it-thumb::before { position: absolute; content: ""; width: 100%; height: 100%; background: linear-gradient(180deg, rgba(180, 231, 23, 0) 55.57%, #b4e717 100%); bottom: 0; left: 0; border-radius: 20px; opacity: 0; visibility: hidden; transition: all 0.4s ease; } .tp-team-it-thumb img { border-radius: 20px; width: 100%; } .tp-team-it-content { padding: 40px 40px 32px 40px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-team-it-content { padding: 40px 30px 32px 30px; } } .tp-team-it-socials { position: absolute; width: 104px; left: 5.5%; bottom: calc(100% - 3px); z-index: 2; text-align: center; pointer-events: none; } .tp-team-it-socials-share { height: 50px; width: 50px; line-height: 50px; font-size: 13px; margin: 8px 8px 0 8px; cursor: pointer; -webkit-border-radius: 50px; border-radius: 50px; background: var(--tp-common-black-1); display: inline-block; } .tp-team-it-socials-trigger { display: block; position: absolute; bottom: 0; left: 0; margin: 0 19px; -webkit-border-radius: 50px 50px 0 0; border-radius: 50px 50px 0 0; background: var(--tp-common-white); } .tp-team-it-socials-trigger::before { content: ""; position: absolute; background-color: transparent; bottom: 3px; height: 40px; width: 20px; right: calc(100% - 1px); border-bottom-right-radius: 20px; box-shadow: 0 20px 0 0 #ffffff; } .tp-team-it-socials-trigger::after { content: ""; position: absolute; background-color: transparent; bottom: 3px; height: 40px; width: 20px; left: calc(100% - 1px); border-bottom-left-radius: 20px; box-shadow: 0 20px 0 0 #ffffff; } .tp-team-it-socials-wrapper { max-width: 50px; margin: 0 auto; overflow: hidden; -webkit-border-radius: 50px; border-radius: 50px; pointer-events: auto; } .tp-team-it-socials-wrapper ul { position: relative; max-width: 100%; margin: 0; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -moz-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-flex-wrap: nowrap; -moz-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-justify-content: flex-end; -moz-justify-content: flex-end; -ms-justify-content: flex-end; justify-content: flex-end; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; align-items: center; -webkit-border-radius: inherit; border-radius: inherit; -webkit-transform: translateY(100%); -ms-transform: translateY(100%); transform: translateY(100%); -webkit-transition: transform 0.6s cubic-bezier(0.77, 0, 0.01, 0.98); background: var(--tp-common-black-1); padding: 14px 0px; } .tp-team-it-socials-wrapper ul li { list-style: none; } .tp-team-it-socials-wrapper ul li a { font-size: 20px; color: var(--tp-common-white); padding: 5px 4px; display: inline-block; } .tp-team-it-socials-wrapper ul li a:hover { color: var(--tp-common-green-2); } .tp-team-it-shape { position: absolute; bottom: 23%; left: 0; width: 14%; z-index: -1; } @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), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-team-details-title-wrap { margin-left: 0; } } /*----------------------------------------*/ /* 7.12 faq css start /*----------------------------------------*/ .tp-faq-wrap .tp-faq-btn { font-weight: 700; font-size: 18px; color: var(--tp-common-black); background: none; border-color: transparent; display: flex; justify-content: space-between; padding: 17px 30px; } .tp-faq-wrap .tp-faq-btn:focus { outline: inherit; box-shadow: none; border-color: none; } .tp-faq-wrap .tp-faq-btn:not(.collapsed) { background-color: transparent; box-shadow: none; } .tp-faq-wrap .accordion-item:not(:first-of-type) { border: 1px solid #eee; } .tp-faq-wrap .accordion-item:first-of-type .accordion-button { border-radius: 0; } .tp-faq-wrap .accordion-item:first-of-type { border-radius: 0; } .tp-faq-wrap .accordion-item:last-of-type { border-radius: 0; } .tp-faq-wrap .tp-faq-active { background-color: var(--tp-common-white-2); border: transparent; } .tp-faq-wrap .tp-faq-active .accordion-btn { color: var(--tp-common-black); padding-left: 30px; } .tp-faq-wrap .accordion-button::after { display: none; } .tp-faq-wrap .accordion-btn { color: #d9d9d9; } .tp-faq-wrap .accordion-body { padding: 0px 30px 18px 30px; } .tp-faq-details-para p { font-size: 18px; line-height: 144%; } .tp-faq-details-para ul { margin-left: 10px; } .tp-faq-details-para ul li { list-style: none; font-weight: 400; font-size: 18px; color: var(--tp-common-black); } .tp-faq-details-para ul li:not(:last-child) { margin-bottom: 2px; } .tp-faq-list-title { font-size: 18px; color: var(--tp-grey-1); display: inline-block; } .tp-faq-spacing { padding-top: 230px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-faq-spacing { padding-top: 170px; } } .tp-faq-cst-tag { height: 100%; } .tp-faq-cst-tag .cst-btn { font-family: var(--tp-ff-dm); font-weight: 400; font-size: 20px; color: var(--tp-grey-5); border-radius: 50px; padding: 8px 21px; background: var(--tp-common-black-1); display: inline-block; position: absolute; z-index: 1; top: 100px; -webkit-animation: mymove 1s infinite; animation: mymove 1s infinite; } .tp-faq-cst-tag .cst-btn-1 { left: 277px; } @media (max-width: 574.98px) { .tp-faq-cst-tag .cst-btn-1 { left: 0; top: 130px; } } .tp-faq-cst-tag .cst-btn-2 { background: #bdffc5; color: var(--tp-common-black); left: 28px; top: 45%; -webkit-animation: mymove 1.1s infinite; animation: mymove 1.1s infinite; } @media (max-width: 574.98px) { .tp-faq-cst-tag .cst-btn-2 { top: 20%; } } .tp-faq-cst-tag .cst-btn-3 { background: #ff6d00; color: var(--tp-common-white); right: 42%; top: 56%; -webkit-animation: mymove 0.9s infinite; animation: mymove 0.9s infinite; } @media (max-width: 574.98px) { .tp-faq-cst-tag .cst-btn-3 { right: 0; } } .tp-faq-cst-tag .cst-btn-4 { right: 0; top: 54%; -webkit-animation: mymove 1.2s infinite; animation: mymove 1.2s infinite; } @media (max-width: 574.98px) { .tp-faq-cst-tag .cst-btn-4 { top: 20%; } } .tp-faq-cst-tag .cst-btn-5 { background: #b4e717; color: var(--tp-common-black); left: 25%; top: auto; bottom: 7%; -webkit-animation: mymove 1.3s infinite; animation: mymove 1.3s infinite; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-faq-cst-tab-content { margin-left: 0; } } .tp-faq-cst-tab-content .tp-faq-btn { font-family: var(--tp-ff-dm); font-weight: 600; font-size: 20px; color: var(--tp-common-black-1); padding: 27px 30px; padding-left: 0; } .tp-faq-cst-tab-content .tp-faq-btn .accordion-btn { position: absolute; top: 50%; right: 0; transform: translateY(-50%); display: inline-block; width: 12px; height: 12px; } .tp-faq-cst-tab-content .tp-faq-btn .accordion-btn::after { position: absolute; content: ""; width: 100%; height: 2px; left: 0; top: 50%; transform: translateY(-50%); background-color: #000000; border-radius: 2px; transition: all 0.4s ease; } .tp-faq-cst-tab-content .tp-faq-btn .accordion-btn::before { position: absolute; content: ""; width: 2px; height: 100%; left: 50%; top: 0; background-color: #000000; transform: translateX(-50%); border-radius: 2px; transition: all 0.4s ease; } .tp-faq-cst-tab-content .tp-faq-btn .accordion-button:not(.collapsed) { color: var(--tp-common-black); background: none; box-shadow: none; } .tp-faq-cst-tab-content .tp-faq-btn:not(.collapsed) .accordion-btn::before { transform: translateX(-50%) rotate(90deg); background: var(--tp-common-black); opacity: 1; } .tp-faq-cst-tab-content .tp-faq-btn:not(.collapsed) .accordion-btn::after { background: var(--tp-common-black); opacity: 1; } .tp-faq-cst-tab-content .accordion-item:not(:first-of-type) { border: none; border-bottom: 1px solid #E1E5E4; } .tp-faq-cst-tab-content .accordion-item { border: none; border-bottom: 1px solid #E1E5E4; background: transparent; } .tp-faq-cst-tab-content .accordion-body { padding: 0px 30px 18px 0; } .tp-faq-cst-tab-content .tp-faq-details-para p { font-family: var(--tp-ff-dm); color: rgba(16, 48, 42, 0.8); margin-bottom: 7px; } @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), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-faq-cst-tab-content .tp-faq-details-para p br { display: 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), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-faq-cst-left { margin-right: 0; } } .tp-faq-pb-tab-content .tp-faq-btn { font-family: var(--tp-ff-inter); font-weight: 500; font-size: 18px; color: var(--tp-common-black-5); padding: 32px 30px; padding-left: 0; text-align: left; } .tp-faq-pb-tab-content .tp-faq-details-para p { font-family: var(--tp-ff-inter); color: #66666c; line-height: 162%; margin-bottom: 18px; } @media (max-width: 574.98px) { .tp-faq-pb-tab-content .tp-faq-details-para p { font-size: 16px; } } .tp-faq-ai-noise { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; } .tp-faq-ai-tab-content .tp-faq-btn { color: var(--tp-grey-5); font-family: var(--tp-ff-jakarta); font-weight: 600; font-size: 32px; letter-spacing: -0.04em; padding: 23px 30px; padding-left: 0; text-align: left; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-faq-ai-tab-content .tp-faq-btn { font-size: 22px; } } .tp-faq-ai-tab-content .tp-faq-btn .accordion-btn::before { background-color: var(--tp-common-white); } .tp-faq-ai-tab-content .tp-faq-btn:not(.collapsed) .accordion-btn::after { background-color: var(--tp-common-white); } .tp-faq-ai-tab-content .tp-faq-btn .accordion-btn::after { background-color: var(--tp-common-white); } .tp-faq-ai-tab-content .tp-faq-btn .accordion-btn { width: 20px; height: 20px; } .tp-faq-ai-tab-content .tp-faq-details-para p { color: var(--tp-grey-5); opacity: 0.8; font-family: var(--tp-ff-dm); font-weight: 400; font-size: 18px; line-height: 156%; letter-spacing: -0.04em; padding-left: 136px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-faq-ai-tab-content .tp-faq-details-para p { padding-left: 55px; } } .tp-faq-ai-tab-content .accordion-item { border-color: rgba(255, 255, 255, 0.1); padding: 32px 24px; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-faq-ai-tab-content .accordion-item { padding: 10px 0; } } .tp-faq-ai-tab-content .accordion-item:not(:first-of-type) { border-color: rgba(255, 255, 255, 0.1); } .tp-faq-ai-count { padding-right: 100px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-faq-ai-count { padding-right: 30px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-faq-ai-title-wrap { margin-bottom: 30px; } } .tp-faq-md-tab-content .tp-faq-btn { font-family: var(--tp-ff-familjen); letter-spacing: -0.03em; color: var(--tp-common-black-5); text-align: left; } .tp-faq-md-tab-content .tp-faq-details-para p { color: var(--tp-grey-7); } .tp-faq-md-tab-content .accordion-body { padding: 0px 80px 18px 0; } @media (max-width: 574.98px) { .tp-faq-md-tab-content .accordion-body { padding: 0px 20px 18px 0; } } .tp-faq-md-thumb { margin-right: -90px; } @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), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-faq-md-thumb { margin-right: 0; } } .tp-faq-md-shape { position: absolute; top: 110px; right: -32px; } @media (max-width: 574.98px) { .tp-faq-md-shape { top: 0; right: 0; width: 25%; } } .tp-faq-cst-tab-content-2 .tp-faq-btn { color: var(--tp-common-black-1); font-family: var(--tp-ff-dm); } .tp-faq-cst-tab-content-2 .tp-faq-details-para p { color: rgba(16, 48, 42, 0.8); } .tp-faq-cst-tab-content-2 .accordion-item:not(:first-of-type) { border-color: rgba(17, 17, 18, 0.1); } .tp-faq-cst-tab-content-2 .accordion-item { border-color: rgba(17, 17, 18, 0.1); } .tp-faq-cst-tab-content-2 .tp-faq-btn:not(.collapsed) .accordion-btn::after { background: var(--tp-common-black-1); } .tp-faq-cst-tab-content-2 .tp-faq-btn .accordion-btn::before { background-color: var(--tp-common-black-1); } .tp-faq-cst-tab-content-2 .tp-faq-btn .accordion-btn::after { background-color: var(--tp-common-black-1); } .tp-faq-hero-spacing { padding-top: 96px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-faq-hero-spacing { padding-top: 80px; } } .tp-faq-hero-thumb { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .tp-faq-hero-title-wrap { padding-top: 138px; padding-bottom: 140px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) { .tp-faq-hero-title-wrap { padding-top: 108px; padding-bottom: 110px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-faq-hero-title-wrap { padding-top: 90px; padding-bottom: 90px; } } /*----------------------------------------*/ /* 7.7 contact css start /*----------------------------------------*/ .tp-contact-spacing { padding-top: 218px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-contact-spacing { padding-top: 160px; } } .tp-contact-number { display: flex; justify-content: space-between; flex-wrap: wrap; padding: 20px 40px 5px 40px; border: 1px solid var(--tp-border-1); } @media (max-width: 574.98px) { .tp-contact-number { padding: 20px 20px 5px 20px; } } .tp-contact-icon { width: 40px; height: 40px; background: var(--tp-theme-primary); color: var(--tp-common-black); border-radius: 50%; display: flex; justify-content: center; align-items: center; } .tp-contact-email { font-family: var(--tp-ff-p); font-weight: 400; font-size: 25px; color: var(--tp-common-black); } .tp-contact-email:hover { color: var(--tp-grey-1); } .tp-contact-form { padding: 70px 60px 70px 60px; } @media (max-width: 574.98px) { .tp-contact-form { padding: 30px 20px 30px 20px; } } .tp-contact-form .tp-postbox-details-input input, .tp-contact-form .tp-postbox-details-input textarea { font-size: 18px; } .tp-contact-form .tp-postbox-details-input input::placeholder, .tp-contact-form .tp-postbox-details-input textarea::placeholder { font-size: 18px; } .tp-contact-form .tp-postbox-details-input .tp-textarea { height: 180px; } .tp-contact-shape { position: absolute; bottom: 0; right: 0; z-index: -1; width: 30%; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-contact-wrap p br { display: none; } } .tp-contact-us-text p { font-size: 18px; font-weight: 400; color: rgba(245, 247, 245, 0.5); } .tp-contact-us-text a { display: inline-block; } .tp-contact-us-text a:hover p { color: var(--tp-common-white); } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-contact-us-form-ptb { padding-top: 30px; } } .tp-contact-us-form-wrapper { padding: 10px; border-radius: 14px; background: #F6F6F9; } .tp-contact-us-title { font-size: 30px; font-weight: 600; letter-spacing: -0.6px; text-transform: uppercase; color: var(--tp-common-black); } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-contact-us-title { margin-bottom: 30px; } } .tp-contact-us-wrap { padding: 110px; } @media only screen and (min-width: 1400px) and (max-width: 1599px) { .tp-contact-us-wrap { padding: 70px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .tp-contact-us-wrap { padding: 50px; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) { .tp-contact-us-wrap { padding: 30px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-contact-us-wrap { padding: 20px; } } .tp-contact-us-wrap .tp-postbox-details-input input, .tp-contact-us-wrap .tp-postbox-details-input textarea { border-radius: 8px; } .tp-contact-us-thumb { overflow: hidden; border-radius: 10px; margin-bottom: 40px; } .tp-contact-us-thumb img { width: 100%; transition: 0.9s; border-radius: 10px; } .tp-contact-us-content { padding: 15px; border-radius: 14px; background: #F6F6F9; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-contact-us-content { margin-top: 0; } } .tp-contact-us-content:hover .tp-contact-us-thumb img { transform: scale(1.1); } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-contact-us-info-area { padding-bottom: 90px; } } .tp-contact-us-info-title { font-size: 26px; font-weight: 700; color: var(--tp-common-black); letter-spacing: -0.52px; margin-bottom: 25px; padding-bottom: 20px; border-bottom: 1px solid rgba(0, 0, 0, 0.1); } .tp-contact-us-info-details { margin-bottom: 45px; } .tp-contact-us-info-details a { font-size: 18px; font-weight: 400; display: block; margin-bottom: 15px; color: rgba(0, 0, 0, 0.7); } .tp-contact-us-info-details a:hover { color: var(--tp-common-black); } .tp-contact-us-bottom { padding: 0 22px 28px; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .cn-contactform-support-area { margin-bottom: 80px; } } .cn-contactform-support-bg { background-repeat: no-repeat; background-size: cover; object-fit: cover; height: 385px; } .cn-contactform-support-text span { font-size: 44px; font-weight: 500; line-height: 52px; max-width: 755px; margin: 0 auto; display: inline-block; letter-spacing: -0.88px; color: var(--tp-common-black); } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .cn-contactform-support-text span { font-size: 40px; } } /*----------------------------------------*/ /* 7.15 gallery css start /*----------------------------------------*/ .tp-gallery-it-thumb-main { background-size: cover; background-position: center; background-repeat: no-repeat; } .tp-gallery-it-item-wrap { padding-top: 160px; text-align: center; } @media only screen and (min-width: 1600px) and (max-width: 1700px) { .tp-gallery-it-item-wrap { padding-top: 120px; } } @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: 768px) and (max-width: 991px) { .tp-gallery-it-item-wrap { padding-top: 70px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tp-gallery-it-item-wrap { padding-top: 20px; } } .tp-gallery-it-btn-box { display: flex; padding: 110px 50px 0; justify-content: space-between; } @media only screen and (min-width: 1600px) and (max-width: 1700px), only screen and (min-width: 1400px) and (max-width: 1599px) { .tp-gallery-it-btn-box { padding: 80px 50px 0; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .tp-gallery-it-btn-box { padding: 30px 50px 0; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tp-gallery-it-btn-box { padding: 40px 30px 0; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-gallery-it-btn-box { padding-bottom: 40px; } } /*-------------------------------------------------- 16. Responsive ---------------------------------------------------*/ @media only screen and (max-width: 1024px) { .showcase-gallery .clapat-slider { padding: 0 10vw 0 10vw; } .showcase-gallery .clapat-slide { width: 80vw; padding: 0 2vw 0 2vw; } .slide-effects { height: 50vh; height: 50dvh; } .slider-zoom-wrapper .trigger-item { width: 70vw; } .slider-thumbs-wrapper { width: 240px; height: 60px; bottom: 20px; } } @media only screen and (max-width: 767px) { .tp-snap-slider-thumbs-wrapper { width: 40vw; height: 40vw; } .external-categories .slide-cat { font-size: 18px; } .slide-effects { height: 50vh; height: 50dvh; } .slider-zoom-wrapper .trigger-item { width: 70vw; } .slider-thumbs-wrapper { width: 220px; height: 50px; bottom: 15px; } } @media only screen and (max-width: 479px) { .slide-effects { height: 40vh; height: 40dvh; } .slider-zoom-wrapper .trigger-item { width: 80vw; } .slider-thumbs-wrapper { width: 220px; height: 50px; bottom: 15px; } } /*----------------------------------------*/ /* 7.13 feature css start /*----------------------------------------*/ .tp-feature-md-btn { border: 1px solid rgba(17, 17, 18, 0.1); padding: 18px 33px; transition: all 0.4s ease; overflow: hidden; display: flex; } .tp-feature-md-btn:hover { background: var(--tp-theme-1); color: var(--tp-grey-5); width: auto; } .tp-feature-md-btn:hover span { opacity: 1; visibility: visible; margin-left: 0; } .tp-feature-md-btn span { opacity: 0; visibility: hidden; transition: all 0.4s ease; margin-left: -92px; } .tp-feature-md-item { border-radius: 16px; padding: 40px 42px 40px 42px; } @media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-feature-md-item { padding: 40px 30px 40px 30px; } } @media only screen and (min-width: 1400px) and (max-width: 1599px), (max-width: 574.98px) { .tp-feature-md-item { flex-direction: column; } } .tp-feature-md-icon { flex: 0 0 auto; margin-top: 10px; } @media only screen and (min-width: 1700px) and (max-width: 1800px), 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: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-feature-md-icon { margin-right: 15px; } } @media only screen and (min-width: 1400px) and (max-width: 1599px), (max-width: 574.98px) { .tp-feature-md-icon { margin-bottom: 20px; } } .tp-feature-md-icon img { flex: 0 0 auto; } @media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-feature-md-icon img { width: 40px; } } /*----------------------------------------*/ /* 7.14 Funfact Css /*----------------------------------------*/ .tp-funfact-img img { height: 146px; width: 146px; border-radius: 50%; object-fit: contain; transition: all 0.4s ease; } .tp-funfact-img img:hover { box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.09); } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tp-funfact-img img { height: 100px; width: 100px; object-fit: contain; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-funfact-img img { height: 100%; width: 100%; } } .tp-funfact-green-wrap { padding-top: 130px; padding-bottom: 70px; border-right: 10px solid #fff; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-funfact-green-wrap { border-right: 0; border-bottom: 10px solid #fff; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-funfact-green-wrap { padding-top: 70px; } } .tp-funfact-shape-1 { position: absolute; bottom: 0; right: 0; } .tp-funfact-title { line-height: 98%; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-funfact-title { padding-left: 0; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-funfact-title { margin-bottom: 40px; } } .tp-funfact-number { margin-left: -20px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-funfact-number { margin-left: 0; } } .tp-funfact-number span { font-family: var(--tp-ff-familjen); font-size: 350px; font-weight: 700; line-height: 1; display: inline-block; letter-spacing: -0.1em; text-transform: uppercase; color: var(--tp-common-black-5); } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .tp-funfact-number span { font-size: 330px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tp-funfact-number span { font-size: 250px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) { .tp-funfact-number span { font-size: 200px; } } @media (max-width: 574.98px) { .tp-funfact-number span { font-size: 112px; } } .tp-funfact-number span i { color: var(--tp-common-black-5); -webkit-text-stroke: 6px #F8F8FB; margin-left: -15px; font-style: normal; display: inline-block; } @media (max-width: 574.98px) { .tp-funfact-number span i { margin-left: 0; } } .tp-funfact-number span em { margin-right: 45px; } @media (max-width: 574.98px) { .tp-funfact-number span em { margin-right: 20px; } } .tp-funfact-green-wrap.pink-style .tp-funfact-number span { color: var(--tp-common-white); } .tp-funfact-green-wrap.pink-style .tp-funfact-number span i { color: var(--tp-common-white); -webkit-text-stroke: 6px #121A26; } .tp-funfact-green-wrap.yellow-style { padding-top: 200px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-funfact-green-wrap.yellow-style { padding-top: 100px; padding-bottom: 100px; } } .tp-funfact-green-wrap.yellow-style .tp-funfact-number span { color: var(--tp-theme-1); } .tp-funfact-green-wrap.yellow-style .tp-funfact-subtitle { color: var(--tp-theme-yellow); } .tp-funfact-green-wrap.yellow-style .tp-funfact-title { color: var(--tp-theme-yellow); } .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), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-funfact-panel-wrap { width: 100%; height: 100%; flex-wrap: wrap; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-funfact-content-wrap { padding-left: 0; margin-left: 0; } } @media (max-width: 574.98px) { .tp-funfact-content-wrap { padding-left: 0; margin-bottom: 30px; } } @media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 574.98px) { .tp-funfact-big-img img { width: 100px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-funfact-big-img { display: none; } } .tp-funfact-yellow-shape { position: absolute; left: 180px; top: -45px; z-index: -1; border-radius: 100px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-funfact-yellow-shape { width: 100px; left: 50px; } } .tp-funfact-yellow-shape-2 { position: absolute; right: 280px; top: -85px; border-radius: 100px; z-index: -1; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-funfact-yellow-shape-2 { width: 100px; right: 80px; top: 0; } } .tp-funfact-yellow-shape-3 { position: absolute; left: 0; bottom: -40px; z-index: -1; border-radius: 100px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-funfact-yellow-shape-3 { width: 100px; } } .tp-funfact-yellow-shape-4 { position: absolute; right: 0; bottom: 30px; z-index: -1; border-radius: 100px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-funfact-yellow-shape-4 { width: 100px; } } .ar-funfact-item h4 { line-height: 0.8; font-size: 100px; letter-spacing: -0.04em; color: var(--tp-common-black); font-family: var(--tp-ff-clash-regular); } .ar-funfact-item h4 i { font-style: normal; } .ar-funfact-item span { font-weight: 500; font-size: 16px; line-height: 1; letter-spacing: 1px; text-transform: uppercase; color: var(--tp-common-black); font-family: var(--tp-ff-clash-medium); } @media only screen and (min-width: 992px) and (max-width: 1199px) { .ar-funfact-item span { font-size: 15px; } } .ar-funfact-bg { padding: 45px 0; padding-bottom: 0; } .st-counter-wrapper { border-top: 1px solid rgba(69, 48, 48, 0.15); border-bottom: 1px solid rgba(69, 48, 48, 0.15); } .st-counter-wrapper .row [class*=col-]:not(:last-child) { border-right: 1px solid rgba(69, 48, 48, 0.15); } @media (max-width: 574.98px) { .st-counter-wrapper .row [class*=col-]:not(:last-child) { border: none; } } .st-counter-item { position: relative; padding-top: 105px; padding-bottom: 110px; z-index: 2; } @media only screen and (min-width: 768px) and (max-width: 991px) { .st-counter-item { padding-top: 70px; padding-bottom: 75px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .st-counter-item { padding: 70px 0; } } @media (max-width: 574.98px) { .st-counter-item { padding: 50px 0; } } .st-counter-item:hover::before { opacity: 1; height: 100%; visibility: visible; } .st-counter-item::before { position: absolute; content: ""; top: 0; left: 0; height: 0; width: 100%; opacity: 0; z-index: -1; visibility: hidden; -webkit-transition: all 0.3s 0s ease-out; -moz-transition: all 0.3s 0s ease-out; -ms-transition: all 0.3s 0s ease-out; -o-transition: all 0.3s 0s ease-out; transition: all 0.3s 0s ease-out; background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 100%); } .st-counter-item h4 { font-size: 80px; font-weight: 700; line-height: 1; margin-bottom: 20px; letter-spacing: -3.2px; color: var(--tp-common-brown); font-family: var(--tp-ff-poppins); } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .st-counter-item h4 { font-size: 60px; margin-bottom: 10px; } } .st-counter-item h4 i { font-style: normal; } .st-counter-item span { font-size: 18px; font-weight: 400; color: #494949; line-height: 1.3; display: inline-block; font-family: var(--tp-ff-poppins); } /*----------------------------------------*/ /* 7.17 intaractive /*----------------------------------------*/ .tp-porfolio-10-title-wrap ul li { list-style-type: none; display: inline-block; padding-right: 30px; padding-bottom: 25px; transition: 0.4s; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-porfolio-10-title-wrap ul li { padding: 16px; } } .tp-porfolio-10-title-wrap ul li.active { transition: 0.4s; } .tp-porfolio-10-title-wrap ul li.active a .tp-porfolio-10-title { color: var(--tp-common-white); opacity: 1; } .tp-porfolio-10-title-wrap ul li.active a .tp-porfolio-10-category { color: var(--tp-common-white); opacity: 1; } .tp-porfolio-10-title { font-size: 120px; font-weight: 800; line-height: 1; opacity: 0.06; transition: 0.4s; margin-bottom: 0; letter-spacing: -2.6px; color: var(--tp-common-white); font-family: var(--tp-ff-teko); z-index: 2; } @media only screen and (min-width: 1400px) and (max-width: 1599px) { .tp-porfolio-10-title { font-size: 100px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .tp-porfolio-10-title { font-size: 90px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tp-porfolio-10-title { font-size: 85px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .tp-porfolio-10-title { font-size: 61px; } } @media (max-width: 574.98px) { .tp-porfolio-10-title { font-size: 45px; letter-spacing: 0; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .tp-porfolio-10-title { font-size: 58px; } } .tp-porfolio-10-title-box { transition: 0.4s; } .tp-porfolio-10-category { font-size: 30px; font-weight: 500; line-height: 1; margin-left: 15px; transform: translateY(-12px); color: var(--tp-common-white); font-family: var(--tp-ff-teko); transition: 0.4s; opacity: 0.06; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) { .tp-porfolio-10-category { font-size: 23px; } } @media (max-width: 574.98px) { .tp-porfolio-10-category { font-size: 18px; } } .tp-porfolio-10-height { height: 100vh; padding-top: 190px; padding-bottom: 100px; } @media only screen and (min-width: 1400px) and (max-width: 1599px) { .tp-porfolio-10-height { padding-top: 140px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-porfolio-10-height { padding-top: 120px; } } .tp-porfolio-10-bg-1, .tp-porfolio-10-bg-2, .tp-porfolio-10-bg-3, .tp-porfolio-10-bg-4, .tp-porfolio-10-bg-5, .tp-porfolio-10-bg-6, .tp-porfolio-10-bg-7, .tp-porfolio-10-bg-8 { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; object-fit: cover; visibility: hidden; transition: all 0.9s; transform: scale(1.04, 1.04); } #tp-porfolio-10-bg-box.tp-porfolio-10-bg-1 { opacity: 1; } #tp-porfolio-10-bg-box.tp-porfolio-10-bg-1 .tp-porfolio-10-bg-1 { opacity: 1; visibility: visible; transform: scale(1); } #tp-porfolio-10-bg-box.tp-porfolio-10-bg-2 { opacity: 1; } #tp-porfolio-10-bg-box.tp-porfolio-10-bg-2 .tp-porfolio-10-bg-2 { opacity: 1; visibility: visible; transform: scale(1); } #tp-porfolio-10-bg-box.tp-porfolio-10-bg-3 { opacity: 1; } #tp-porfolio-10-bg-box.tp-porfolio-10-bg-3 .tp-porfolio-10-bg-3 { opacity: 1; visibility: visible; transform: scale(1); } #tp-porfolio-10-bg-box.tp-porfolio-10-bg-4 { opacity: 1; } #tp-porfolio-10-bg-box.tp-porfolio-10-bg-4 .tp-porfolio-10-bg-4 { opacity: 1; visibility: visible; transform: scale(1); } #tp-porfolio-10-bg-box.tp-porfolio-10-bg-5 { opacity: 1; } #tp-porfolio-10-bg-box.tp-porfolio-10-bg-5 .tp-porfolio-10-bg-5 { opacity: 1; visibility: visible; transform: scale(1); } #tp-porfolio-10-bg-box.tp-porfolio-10-bg-6 { opacity: 1; } #tp-porfolio-10-bg-box.tp-porfolio-10-bg-6 .tp-porfolio-10-bg-6 { opacity: 1; visibility: visible; transform: scale(1); } #tp-porfolio-10-bg-box.tp-porfolio-10-bg-7 { opacity: 1; } #tp-porfolio-10-bg-box.tp-porfolio-10-bg-7 .tp-porfolio-10-bg-7 { opacity: 1; visibility: visible; transform: scale(1); } #tp-porfolio-10-bg-box.tp-porfolio-10-bg-8 { opacity: 1; } #tp-porfolio-10-bg-box.tp-porfolio-10-bg-8 .tp-porfolio-10-bg-8 { opacity: 1; visibility: visible; transform: scale(1); } .tp-port-slider-main { height: 100vh; overflow: hidden; } .tp-port-slider-content-wrap { position: absolute; top: 0; left: 170px; height: 100%; width: 50%; overflow-y: scroll; scrollbar-width: none; padding-top: 150px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .tp-port-slider-content-wrap { left: 120px; } } @media (max-width: 574.98px) { .tp-port-slider-content-wrap { left: 20px; width: 100%; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .tp-port-slider-content-wrap { left: 30px; width: 100%; } } .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-morganite-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 only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-port-slider-title { font-size: 70px; } } .tp-port-slider-title:hover { background-size: 200% 100%; color: var(--tp-common-white); } .tp-port-1, .tp-port-2, .tp-port-3, .tp-port-4, .tp-port-5, .tp-port-6, .tp-port-7, .tp-port-8, .tp-port-9 { position: absolute; top: 0; left: 0; height: 100vh; width: 100%; opacity: 0; object-fit: cover; transform: scale(1.04, 1.04); transform-origin: 50% 50%; transition: all 0.9s; } .tp-port-1 img, .tp-port-2 img, .tp-port-3 img, .tp-port-4 img, .tp-port-5 img, .tp-port-6 img, .tp-port-7 img, .tp-port-8 img, .tp-port-9 img { height: 100vh; width: 100%; object-fit: cover; transition: none; } #tp-port-slider-wrap.tp-port-1 { opacity: 1; } #tp-port-slider-wrap.tp-port-1 .tp-port-1 { opacity: 1; transform: scale(1); } #tp-port-slider-wrap.tp-port-2 { opacity: 1; } #tp-port-slider-wrap.tp-port-2 .tp-port-2 { opacity: 1; transform: scale(1); } #tp-port-slider-wrap.tp-port-3 { opacity: 1; } #tp-port-slider-wrap.tp-port-3 .tp-port-3 { opacity: 1; transform: scale(1); } #tp-port-slider-wrap.tp-port-4 { opacity: 1; } #tp-port-slider-wrap.tp-port-4 .tp-port-4 { opacity: 1; transform: scale(1); } #tp-port-slider-wrap.tp-port-5 { opacity: 1; } #tp-port-slider-wrap.tp-port-5 .tp-port-5 { opacity: 1; transform: scale(1); } #tp-port-slider-wrap.tp-port-6 { opacity: 1; } #tp-port-slider-wrap.tp-port-6 .tp-port-6 { opacity: 1; transform: scale(1); } #tp-port-slider-wrap.tp-port-7 { opacity: 1; } #tp-port-slider-wrap.tp-port-7 .tp-port-7 { opacity: 1; transform: scale(1); } #tp-port-slider-wrap.tp-port-8 { opacity: 1; } #tp-port-slider-wrap.tp-port-8 .tp-port-8 { opacity: 1; transform: scale(1); } #tp-port-slider-wrap.tp-port-9 { opacity: 1; } #tp-port-slider-wrap.tp-port-9 .tp-port-9 { opacity: 1; transform: scale(1); } /*----------------------------------------*/ /* 7.18 light css start /*----------------------------------------*/ .aleric-light .tp-perspective-slider .tp-perspective-inner .tp-perspective-image:before { background: var(--tp-common-white); } .aleric-light .tp-perspective-slider .tp-perspective-inner .tp-perspective-image:after { background: var(--tp-common-white); } .aleric-light .tp-perspective-social-info span { color: var(--tp-common-blck); } .aleric-light .tp-perspective-scroll a { color: var(--tp-common-black); } .aleric-light .tp-pd-3-subtitle { color: rgba(0, 0, 0, 0.6); } .aleric-light .tp-pd-3-title { color: var(--tp-common-black); } .aleric-light .tp-pd-3-btn { color: var(--tp-common-black); border: 1px solid rgba(0, 0, 0, 0.1); } .aleric-light .tp-pd-3-overview-text p { color: rgba(0, 0, 0, 0.6); } .aleric-light .tp-pd-3-overview-info span { color: rgba(0, 0, 0, 0.5); } .aleric-light .tp-pd-3-overview-info h4 { color: var(--tp-common-black); } .aleric-light .tp-pd-3-navigation-title { color: var(--tp-common-black); } .aleric-light .tp-footer-vp-widget span { color: var(--tp-common-black); } .aleric-light .tp-footer-vp-widget ul li a { color: rgba(0, 0, 0, 0.6); } .aleric-light .tp-footer-it-copyright { color: rgba(0, 0, 0, 0.6); } .aleric-light .tp-footer-it-copyright a { color: var(--tp-common-black); } /*----------------------------------------*/ /* 4.1 hero css /*----------------------------------------*/ .al-hero-seo-bg { padding-top: 260px; background-size: cover; background-position: center; background-repeat: no-repeat; } @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), only screen and (min-width: 576px) and (max-width: 767px) { .al-hero-seo-bg { padding-top: 200px; } } @media (max-width: 574.98px) { .al-hero-seo-bg { padding-top: 160px; } } .al-hero-seo-title { font-size: 70px; text-align: center; letter-spacing: -0.02em; color: var(--tp-common-black-1); font-family: var(--tp-ff-inter); } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .al-hero-seo-title { font-size: 65px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .al-hero-seo-title { font-size: 55px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .al-hero-seo-title { font-size: 36px; } } .al-hero-seo-title span { color: var(--tp-common-blue); } .al-hero-seo-title-line { position: absolute; bottom: -25px; left: 30px; } .al-hero-seo-title-box p { font-weight: 400; font-size: 20px; line-height: 1.5; text-align: center; letter-spacing: -0.02em; color: var(--tp-common-black-4); font-family: var(--tp-ff-inter); } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .al-hero-seo-title-box p { font-size: 16px; } .al-hero-seo-title-box p br { display: none; } } .al-hero-seo-playbtn span { height: 46px; width: 46px; line-height: 44px; border-radius: 50%; text-align: center; display: inline-block; margin-right: 10px; color: var(--tp-common-black-1); background-color: var(--tp-common-white); animation: animate-pulse 3s linear infinite; } .al-hero-seo-playbtn span svg { margin-left: 2px; } .al-hero-seo-playbtn i { font-weight: 600; font-size: 22px; display: inline-block; transform: translateY(3px); color: var(--tp-common-black-1); font-family: var(--tp-ff-playfair); } .al-hero-seo-dashboard { position: relative; } .al-hero-seo-dashboard::after { position: absolute; content: ""; bottom: 0; left: 0; height: 220px; width: 100%; background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #fff 85.94%); } .al-hero-seo-shape-1 { position: absolute; bottom: 180px; left: -90px; z-index: 2; } .al-hero-archi-title { font-size: 120px; letter-spacing: 2px; line-height: 1; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .al-hero-archi-title { font-size: 90px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .al-hero-archi-title { font-size: 80px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .al-hero-archi-title { font-size: 70px; letter-spacing: -3px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .al-hero-archi-title { font-size: 60px; } } @media (max-width: 574.98px) { .al-hero-archi-title { font-size: 50px; margin-bottom: 20px; } } .al-hero-archi-title span { align-items: center; display: flex; } .al-hero-archi-title a { border: 1px solid #525252; border-radius: 50px; padding: 25px 25px; display: inline-block; background-color: var(--tp-common-white); font-weight: 400; font-size: 44px; line-height: 1.2; margin-left: 20px; margin-bottom: 10px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .al-hero-archi-title a { padding: 11px 25px; font-size: 26px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .al-hero-archi-title a { padding: 8px 20px; font-size: 20px; letter-spacing: 1px; } } @media (max-width: 574.98px) { .al-hero-archi-title a { padding: 5px 11px; font-size: 16px; } } .al-hero-archi-ptb { padding-top: 305px; padding-bottom: 225px; } @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) { .al-hero-archi-ptb { padding-top: 240px; padding-bottom: 150px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .al-hero-archi-ptb { padding-top: 200px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .al-hero-archi-ptb { padding-top: 200px; padding-bottom: 150px; } } @media (max-width: 574.98px) { .al-hero-archi-ptb { padding-top: 148px; padding-bottom: 94px; } } .al-hero-archi-link { font-weight: 500; font-size: 14px; line-height: 2.08; color: var(--tp-common-black); padding-left: 116px; font-family: var(--tp-ff-inter); position: relative; overflow: hidden; text-transform: uppercase; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .al-hero-archi-link { padding-left: 0; } } .al-hero-archi-link:hover { color: var(--tp-theme-secondary); } .al-hero-archi-link i { font-size: 18px; font-weight: 800; } .al-hero-archi-link::before { position: absolute; content: ""; width: 100px; height: 1px; top: 10px; left: 0; background-color: var(--tp-common-black); } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .al-hero-archi-link::before { display: none; } } .al-hero-archi-link .tp-arrow-svg-top-right { margin-left: 3px; } .al-hero-archi-shape { top: 20%; position: absolute; left: 224px; z-index: -1; } .al-hero-archi-social { position: absolute; top: 41%; right: 100px; } @media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px) { .al-hero-archi-social { right: 30px; top: 20%; } } .al-hero-archi-social ul li { list-style: none; display: flex; flex-direction: column; } .al-hero-archi-social ul li a { font-size: 23px; } @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) { .al-hero-archi-social ul li a { color: var(--tp-theme-secondary); } } .al-hero-archi-social ul li a:hover { color: var(--tp-theme-secondary); } .al-hero-archi-social ul li a:not(:last-child) { margin-bottom: 50px; position: relative; } .al-hero-archi-social ul li a:not(:last-child)::before { position: absolute; content: ""; height: 30px; width: 1px; top: 33px; background-color: var(--tp-grey-1); left: 11px; } .al-hero-pg-area .al-hero-pg-social-wrapper-2 { top: 42%; } .al-hero-pg-height { padding-top: 60px; padding-bottom: 120px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .al-hero-pg-height { padding-top: 120px; padding-bottom: 70px; } } .al-hero-pg-overlay { position: relative; } .al-hero-pg-thumb { mix-blend-mode: difference; } .al-hero-pg-thumb img { mix-blend-mode: difference; } .al-hero-pg-thumb-wrapper { position: relative; } .al-hero-pg-thumb-wrapper .overlay { display: inline-block; position: absolute; top: 50%; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); height: 1000px; width: 2500px; border-radius: 50%; background: var(--tp-common-black-7); filter: blur(175px); -webkit-filter: blur(175px); z-index: 1; } @media only screen and (min-width: 768px) and (max-width: 991px) { .al-hero-pg-thumb-wrapper .overlay { bottom: -100%; } } @media (max-width: 574.98px) { .al-hero-pg-thumb-wrapper .overlay { bottom: -310%; left: -100%; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .al-hero-pg-thumb-wrapper .overlay { bottom: -160%; } } .al-hero-pg-title { font-size: 160px; font-weight: 700; line-height: 0.94; text-transform: uppercase; color: var(--tp-common-cream); font-family: var(--tp-ff-poppins); letter-spacing: -0.04em; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .al-hero-pg-title { font-size: 150px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .al-hero-pg-title { font-size: 120px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .al-hero-pg-title { font-size: 90px; } } @media (max-width: 574.98px) { .al-hero-pg-title { font-size: 54px; } .al-hero-pg-title br { display: none; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .al-hero-pg-title { font-size: 75px; } .al-hero-pg-title br { display: none; } } .al-hero-pg-title span { color: var(--tp-common-pink); } .al-hero-pg-title-box { margin-top: -375px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .al-hero-pg-title-box { margin-top: -270px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .al-hero-pg-title-box { margin-top: -140px; } } .al-hero-pg-title .text-1 { font-size: 34px; font-weight: 500; text-transform: uppercase; letter-spacing: 1px; color: var(--tp-common-pink); font-family: var(--tp-ff-playfair); display: inline-block; position: absolute; top: 22%; right: -5%; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .al-hero-pg-title .text-1 { right: -7%; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .al-hero-pg-title .text-1 { right: -10%; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .al-hero-pg-title .text-1 { position: static; } } .al-hero-pg-title .text-2 { font-size: 36px; font-weight: 500; letter-spacing: 1px; text-transform: uppercase; color: var(--tp-common-cream); font-family: var(--tp-ff-playfair); position: absolute; top: 22%; left: -20%; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .al-hero-pg-title .text-2 { left: -27%; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .al-hero-pg-title .text-2 { left: -40%; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .al-hero-pg-title .text-2 { position: static; } } .al-hero-pg-title em { font-style: normal; } .al-hero-pg-social { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; flex-direction: column; } .al-hero-pg-social-bar { display: inline-block; width: 1px; height: 160px; background-image: -webkit-linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 100%); background-image: -moz-linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 100%); background-image: -ms-linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 100%); background-image: -o-linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 100%); background-image: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 100%); position: absolute; left: 19px; bottom: calc(100% + 20px); } .al-hero-pg-social-bar::after { position: absolute; content: ""; bottom: -1px; left: -1px; -webkit-transform: translateY(-1px); -moz-transform: translateY(-1px); -ms-transform: translateY(-1px); -o-transform: translateY(-1px); transform: translateY(-1px); width: 3px; height: 3px; border-radius: 50%; background-color: var(--tp-common-white); } .al-hero-pg-social-bar.al-hero-pg-social-bar-2 { top: calc(100% + 20px); background-image: -webkit-linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 100%); background-image: -moz-linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 100%); background-image: -ms-linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 100%); background-image: -o-linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 100%); background-image: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 100%); transform: matrix(1, 0, 0, -1, 0, 0); } .al-hero-pg-social-bar.al-hero-pg-social-bar-2::after { bottom: -1px; left: -1px; -webkit-transform: translateY(-1px); -moz-transform: translateY(-1px); -ms-transform: translateY(-1px); -o-transform: translateY(-1px); transform: translateY(-1px); } .al-hero-pg-social-wrapper { position: absolute; bottom: 50px; right: 40px; z-index: 99; } .al-hero-pg-social-wrapper-2 { position: absolute; bottom: auto; top: 50%; left: 70px; right: auto; transform: translateY(-50%); z-index: 99; } @media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px) { .al-hero-pg-social-wrapper-2 { left: 30px; } } .al-hero-pg-social-wrapper-2 .al-hero-pg-social .parallax-wrap { margin-bottom: 10px; } .al-hero-pg-social-wrapper-2 .al-hero-pg-social .parallax-wrap:last-child { margin-bottom: 0; } .al-hero-pg-social-wrapper-2 .al-hero-pg-social a { border-color: 1.5px solid rgba(255, 255, 255, 0.1); background-color: transparent; } .al-hero-pg-social-wrapper-2 .al-hero-pg-social a:hover { color: var(--tp-common-white); } .al-hero-pg-social-wrapper-2 .al-hero-pg-social a.gmail:hover { background-color: #ea4335; border-color: #ea4335; } .al-hero-pg-social-wrapper-2 .al-hero-pg-social a.dribble:hover { background-color: #EA4C89; border-color: #EA4C89; } .al-hero-pg-social-wrapper-2 .al-hero-pg-social a.behance:hover { background-color: #1769ff; border-color: #1769ff; } .al-hero-pg-social-wrapper-2 .al-hero-pg-social a.youtube:hover { background-color: #cd201f; border-color: #cd201f; } .al-hero-pg-social a { display: inline-block; font-size: 18px; background: #1D2B16; border: 1px solid rgba(255, 255, 255, 0.18); width: 40px; height: 40px; line-height: 39px; text-align: center; border-radius: 50%; color: var(--tp-common-white); } .al-hero-pg-social a:not(:last-child) { margin-bottom: 10px; } .al-hero-pg-social a:hover { background-color: #BCE70C; border-color: #BCE70C; color: #292D32; } .al-hero-shop-active .swiper-slide-active .al-hero-shop-content span, .al-hero-shop-active .swiper-slide-active .al-hero-shop-title, .al-hero-shop-active .swiper-slide-active .al-hero-shop-btn { animation-name: fadeInUp; animation-fill-mode: both; } .al-hero-shop-active .swiper-slide-active .al-hero-shop-thumb img { animation-name: fadeInRight; animation-fill-mode: both; } .al-hero-shop-spacing { padding-top: 133px; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .al-hero-shop-spacing { padding-top: 70px; } } .al-hero-shop-shape-1 { position: absolute; top: 0; right: 10%; z-index: -1; mix-blend-mode: luminosity; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) { .al-hero-shop-thumb img { max-width: inherit; } } .al-hero-shop-thumb-gradient { position: absolute; top: 14%; right: -7%; display: inline-block; width: 550px; height: 550px; border-radius: 50%; background-color: rgba(41, 194, 227, 0.3); z-index: -1; } .al-hero-shop-thumb-shape-1 { position: absolute; top: 24%; left: -10px; } .al-hero-shop-thumb-shape-2 { position: absolute; bottom: 25%; right: -8%; } .al-hero-shop-title { font-weight: 400; font-size: 100px; line-height: 1.06; margin-bottom: 30px; animation-delay: 0.3s; animation-duration: 1s; font-family: var(--tp-ff-dm); } @media only screen and (min-width: 992px) and (max-width: 1199px) { .al-hero-shop-title { font-size: 80px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .al-hero-shop-title { font-size: 60px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .al-hero-shop-title { font-size: 85px; } } @media (max-width: 574.98px) { .al-hero-shop-title { font-size: 52px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .al-hero-shop-content { padding-top: 100px; } } .al-hero-shop-content span { font-size: 20px; color: var(--tp-common-black); display: inline-block; margin-bottom: 15px; animation-delay: 0.1s; font-family: var(--tp-ff-dm); animation-duration: 1s; } .al-hero-shop-item { min-height: 790px; } .al-hero-shop-btn { animation-delay: 0.5s; animation-duration: 1s; } .al-hero-shop-dot { gap: 10px; width: auto; display: flex; flex-direction: column; } .al-hero-shop-dot-wrap { position: absolute; right: 50px; left: auto; z-index: 1; bottom: 40%; } @media (max-width: 574.98px) { .al-hero-shop-dot-wrap { right: 10px; } } .al-hero-shop-dot .swiper-pagination-bullet { width: 10px; height: 10px; background-color: var(--tp-grey-2); opacity: 1; margin: 0 3px; position: relative; } .al-hero-shop-dot .swiper-pagination-bullet-active { background: var(--tp-theme-secondary); } /*----------------------------------------*/ /* 4.1 button css /*----------------------------------------*/ .al-btn-blue { font-weight: 500; font-size: 16px; transition: all 0.3s ease; border-radius: 30px; display: inline-block; padding: 10px 30px; letter-spacing: -0.02em; color: var(--tp-common-white); background-color: var(--tp-common-blue); font-family: var(--tp-ff-inter); } .al-btn-blue:hover { background: var(--tp-common-black-1); color: var(--tp-common-white); } .al-btn-blue.sky-bg { background-color: #a1ecea; color: var(--tp-common-black-3); } .al-btn-blue.sky-bg:hover { color: var(--tp-common-white); background-color: var(--tp-common-blue); } .tp-btn-seo-border:hover { background: var(--tp-common-blue); border-color: var(--tp-common-blue); color: var(--tp-common-white); } .al-btn-pg-price { height: 50px; line-height: 48px; border-radius: 100px; padding: 0 60px; font-size: 18px; font-weight: 500; text-align: center; text-transform: capitalize; display: inline-block; overflow: hidden; color: var(--tp-common-black-7); font-family: var(--tp-ff-poppins); border: 1px solid rgba(183, 171, 152, 0.14); transition: 0.3s; } .al-btn-pg-price:hover { color: var(--tp-common-white); border-color: var(--tp-common-black-7); background-color: var(--tp-common-black-7); } .al-btn-pg-subscribe { height: 48px; line-height: 48px; border-radius: 30px; padding: 0 30px; font-size: 16px; font-weight: 500; display: inline-block; color: var(--tp-common-cream); font-family: var(--tp-ff-poppins); background: var(--tp-common-black-7); border: 1px solid rgba(183, 171, 152, 0.14); } .al-shop-btn { display: inline-block; font-family: var(--tp-ff-dm); font-weight: 400; font-size: 16px; background-color: var(--tp-common-black); padding: 9px 26px; color: var(--tp-common-white); border: 1px solid var(--tp-common-black); } .al-shop-btn:hover { background: var(--tp-theme-secondary); border-color: var(--tp-theme-secondary); color: var(--tp-common-white); } .al-shop-btn-border { background-color: transparent; border: 1.5px solid var(--tp-common-black); color: var(--tp-common-black); padding: 8px 29px; } .al-shop-btn-border-sm { padding: 5px 25px; } .al-shop-btn-border-white-sm { border-color: rgba(255, 255, 255, 0.3); color: var(--tp-common-white); } .al-shop-btn-border-white-sm:hover { background: var(--tp-common-black); color: var(--tp-common-white); border-color: var(--tp-common-black); } /*----------------------------------------*/ /* 4.1 brand css /*----------------------------------------*/ .al-brand-seo-title { font-weight: 500; font-size: 16px; letter-spacing: -0.04em; color: var(--tp-common-black-1); font-family: var(--tp-ff-inter); } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .al-brand-seo-title { margin-bottom: 30px; display: inline-block; } } .al-brand-seo-box a { color: #8a969a; transition: 0.3s; } .al-brand-seo-box a:not(:last-child) { margin-right: 55px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .al-brand-seo-box a:not(:last-child) { margin-right: 35px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .al-brand-seo-box a:not(:last-child) { margin-right: 25px; } } .al-brand-seo-box a:hover { color: var(--tp-common-black-1); } .al-brand-seo-wave-border { position: absolute; bottom: 0; left: 0; } .al-brand-title { font-weight: 500; font-size: 20px; line-height: 1; margin-bottom: 0; letter-spacing: -0.02em; text-transform: uppercase; color: var(--tp-common-black-1); font-family: var(--tp-ff-inter); } .al-brand-title::after { content: ""; height: 6px; width: 6px; margin-left: 30px; border-radius: 50%; display: inline-block; transform: translateY(-4px); background-color: var(--tp-common-black-1); } .al-brand-wrapper { padding: 27px 0 23px 0; background: var(--tp-common-yellow); } .al-brand-wrapper .slide-transtion { -webkit-transition-timing-function: linear; transition-timing-function: linear; } .al-brand-active .swiper-slide { width: auto; } .al-brands-archi-slider .swiper-slide { width: auto; } .al-brands-archi-title span { font-weight: 400; font-size: 30px; line-height: 133%; text-align: center; color: var(--tp-grey-1); } /*----------------------------------------*/ /* 4.1 step css /*----------------------------------------*/ .al-step-title-box { margin: 0px 60px; margin-bottom: 40px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .al-step-title-box { margin: 0; margin-bottom: 40px; } } .al-step-title-sm { font-size: 18px; font-weight: 500; line-height: 1.33; margin-bottom: 0; text-align: center; letter-spacing: -0.02em; color: var(--tp-common-black-1); font-family: var(--tp-ff-inter); } .al-step-icon { display: inline-block; margin-bottom: 25px; } .al-step-icon > span { height: 100px; width: 100px; text-align: center; line-height: 95px; border-radius: 50%; display: inline-block; color: var(--tp-common-blue); border: 2px solid var(--tp-common-blue); transition: 0.3s; position: relative; } .al-step-icon > span::after { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; content: ""; visibility: hidden; border-radius: 50%; transition: 0.3s; transform: scale(1.2); border: 1px dashed var(--tp-common-blue); } .al-step-item { display: inline-block; } .al-step-item.active .al-step-icon > span { color: var(--tp-common-white); border-color: var(--tp-common-blue); background-color: var(--tp-common-blue); } .al-step-item.active .al-step-icon > span::after { opacity: 1; visibility: visible; } .al-step-item:hover .al-step-icon > span { color: var(--tp-common-white); border-color: var(--tp-common-blue); background-color: var(--tp-common-blue); } .al-step-item:hover .al-step-icon > span::after { opacity: 1; visibility: visible; } .al-step-number { position: absolute; top: 3px; right: 1px; z-index: 3; height: 30px; width: 30px; line-height: 29px; border-radius: 50%; font-style: normal; display: inline-block; color: var(--tp-common-white); background-color: var(--tp-common-blue); font-family: var(--tp-ff-inter); } .al-step-number::after { position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: ""; border-radius: 50%; border: 4px solid var(--tp-common-white); transform: scale(1.2); } .al-step-shape-1 { position: absolute; top: 26%; left: 0; } .al-step-shape-1 img { animation: anim-top-bottom 1s linear infinite alternate; } .al-step-shape-2 { position: absolute; top: 42%; right: 0; animation: anim-left-right 4s linear infinite alternate; } .al-step-arrow-shape-1 { position: absolute; top: 21%; right: 0; } .al-step-arrow-shape-2 { position: absolute; top: 21%; left: 0; } /*----------------------------------------*/ /* 4.1 common css /*----------------------------------------*/ .al-section-title { font-weight: 700; font-size: 47px; line-height: 1.1; letter-spacing: -0.02em; color: var(--tp-common-black-1); font-family: var(--tp-ff-inter); } @media (max-width: 574.98px) { .al-section-title { font-size: 35px; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .al-section-title br { display: none; } } .al-section-subtitle.fs-12 { font-weight: 600; font-size: 12px; border-radius: 20px; letter-spacing: 0.1em; text-transform: uppercase; background-color: #eef3f6; padding: 2px 23px; color: var(--tp-common-black-1); display: inline-block; font-family: var(--tp-ff-inter); } .al-section-subtitle.fs-12.sky-bg { background-color: #cae1ec; } .al-section-archi-title { font-size: 80px; line-height: 1; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) { .al-section-archi-title { font-size: 60px; } } @media (max-width: 574.98px) { .al-section-archi-title { font-size: 50px; } } .al-section-archi-subtitle { font-family: var(--tp-ff-inter); } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .al-section-archi-subtitle { margin-bottom: 20px; display: inline-block; } } @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: 574.98px), only screen and (min-width: 576px) and (max-width: 767px) { .al-section-archi-content { margin: 0; } } .al-section-archi-content p { font-family: var(--tp-ff-inter); } .al-section-pg-title { font-size: 120px; font-weight: 500; line-height: 0.9; letter-spacing: -4.8px; color: var(--tp-common-cream); text-transform: uppercase; font-family: var(--tp-ff-poppins); } @media only screen and (min-width: 768px) and (max-width: 991px) { .al-section-pg-title { font-size: 100px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .al-section-pg-title { font-size: 70px; } } .al-section-pg-subtitle { font-size: 14px; font-weight: 500; line-height: 20px; text-transform: uppercase; font-family: var(--tp-ff-poppins); color: var(--tp-common-black-7); border: 1px solid var(--tp-common-black-7); padding: 7px 20px; display: inline-block; position: relative; z-index: 1; } .al-section-pg-subtitle i { font-size: 14px; line-height: 1.2; z-index: 2; font-style: normal; text-transform: uppercase; transition: opacity 0.2s ease; } .al-section-pg-subtitle:before, .al-section-pg-subtitle:after { content: ""; background: var(--tp-common-white); position: absolute; z-index: -1; transition: transform 0.2s ease-in-out; opacity: 0.9; } .al-section-pg-subtitle:before { top: -2px; right: 8px; bottom: -2px; left: 8px; } .al-section-pg-subtitle:after { top: 8px; right: -2px; bottom: 8px; left: -2px; } .al-section-shop-title { font-weight: 500; font-size: 44px; font-family: var(--tp-ff-dm); } .al-section-shop-subtitle { font-weight: 400; font-size: 18px; color: var(--tp-theme-secondary); position: relative; z-index: 1; display: inline-block; font-family: var(--tp-ff-dm); } .al-section-shop-subtitle svg { position: absolute; bottom: -8px; left: 26px; z-index: -1; } @keyframes anim-top-bottom { 0% { transform: translateY(-20px); } 100% { transform: translateY(0px); } } @keyframes anim-left-right { 0% { transform: translateX(-50px); } 100% { transform: translateX(0px); } } @keyframes animate-pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.8), 0 0 0 0 rgba(255, 255, 255, 0.8); } 40% { box-shadow: 0 0 0 50px rgba(255, 109, 74, 0), 0 0 0 0 rgba(255, 255, 255, 0.8); } 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 fadeInRight { 0% { opacity: 0; -webkit-transform: translateX(20px); -ms-transform: translateX(20px); transform: translateX(20px); } 100% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } @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); } } .tp-header-seo-bg { background: transparent; } @media (max-width: 574.98px) { .bg-position-md-left { background-position: left; } } .tp_text_invert.invert-black-7 > div { background-image: linear-gradient(to right, var(--tp-common-black-7) 50%, var(--tp-common-cream) 50%); } .tp-service-item-bg { z-index: -1; } /*----------------------------------------*/ /* 4.1 video css /*----------------------------------------*/ .al-video-height { height: 760px; overflow: hidden; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) { .al-video-height { height: 600px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .al-video-height { height: 460px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .al-video-height { height: 300px; } } .al-video-img { position: relative; } .al-video-img::after { position: absolute; top: 0; left: 0; height: 100%; width: 100%; content: ""; background-color: rgba(2, 18, 23, 0.2); } .al-video-img img { position: relative; height: 100%; width: 100%; margin-top: -50px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .al-video-img img { height: 400px; object-fit: cover; } } .al-video-play-btn { position: absolute; top: 50%; left: 0; right: 0; z-index: 22; text-align: center; transform: translateY(-50%); } .al-video-play-btn a { height: 180px; width: 180px; line-height: 188px; border-radius: 50%; font-weight: 600; font-size: 14px; text-align: center; display: inline-block; letter-spacing: -0.02em; color: var(--tp-common-white); border: 1px solid var(--tp-common-white); font-family: var(--tp-ff-inter); } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .al-video-play-btn a { height: 140px; width: 140px; line-height: 146px; } } .al-video-play-btn a span { transform: translateY(-2px); margin-left: 6px; } .al-video-inner-style .tp-video-img img { margin-top: -400px; } @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) { .al-video-inner-style .tp-video-img img { margin-top: -200px; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) { .al-video-inner-style .tp-video-img img { margin-top: -100px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .al-video-inner-style .tp-video-img img { margin-top: -50px; } } /*----------------------------------------*/ /* 4.1 service css /*----------------------------------------*/ .al-service-seo-title { font-weight: 700; font-size: 20px; margin-bottom: 14px; letter-spacing: -0.02em; color: var(--tp-common-black-1); font-family: var(--tp-ff-inter); } @media (max-width: 574.98px) { .al-service-seo-title-box { margin-bottom: 40px; } } .al-service-seo-item:hover .al-service-seo-icon span { animation: icon-bounce 0.8s 1; } .al-service-seo-icon { margin-bottom: 25px; } .al-service-seo-icon span { height: 50px; width: 50px; line-height: 47px; text-align: center; border-radius: 50%; display: inline-block; background-color: #fbcea0; color: var(--tp-common-black-1); } .al-service-seo-content p { font-size: 14px; line-height: 1.57; color: #4d5051; margin-bottom: 0; padding-right: 30px; font-family: var(--tp-ff-inter); } @media only screen and (min-width: 768px) and (max-width: 991px) { .al-service-seo-content p { font-size: 13px; padding-right: 0; } } .al-service-archi-wrapper:hover .al-service-archi-icon { color: var(--tp-theme-secondary); } .al-service-archi-wrapper:hover .al-service-archi-link { color: var(--tp-theme-secondary); } .al-service-archi-title { font-size: 34px; line-height: 1; margin-bottom: 15px; } .al-service-archi-title a:hover { color: var(--tp-theme-secondary); } .al-service-archi-link { color: #BCBCBC; } .al-service-archi-icon { color: var(--tp-common-black); -webkit-transition: all 0.3s 0s ease-out; -moz-transition: all 0.3s 0s ease-out; -ms-transition: all 0.3s 0s ease-out; -o-transition: all 0.3s 0s ease-out; transition: all 0.3s 0s ease-out; } .al-service-archi-content p { font-family: var(--tp-ff-inter); font-size: 17px; } /*----------------------------------------*/ /* 4.1 project css /*----------------------------------------*/ .al-project-seo-item { background: #0e3948; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.04); box-shadow: 0 20px 30px 0 rgba(3, 14, 18, 0.1); padding: 38px 50px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .al-project-seo-item { padding: 38px 35px; } } .al-project-seo-title { font-size: 24px; font-weight: 700; line-height: 1.33; margin-bottom: 0; letter-spacing: -0.02em; color: var(--tp-common-white); font-family: var(--tp-ff-inter); } @media only screen and (min-width: 768px) and (max-width: 991px) { .al-project-seo-title { margin-bottom: 35px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .al-project-seo-title { font-size: 20px; margin-bottom: 35px; } .al-project-seo-title br { display: none; } } .al-project-seo-title a:hover { color: var(--tp-common-yellow); } .al-project-seo-title-box .al-section-subtitle.fs-12 { background-color: #0d3f52; color: var(--tp-common-white); } .al-project-seo-info h5 { font-weight: 700; font-size: 16px; margin-bottom: 10px; letter-spacing: -0.02em; color: var(--tp-common-white); font-family: var(--tp-ff-inter); } .al-project-seo-info span { font-weight: 500; font-size: 14px; line-height: 1; letter-spacing: -0.02em; color: rgba(255, 255, 255, 0.8); font-family: var(--tp-ff-inter); } .al-project-seo-content { padding-left: 50px; margin-left: 50px; position: relative; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .al-project-seo-content { margin-left: 0; padding-left: 0; } } .al-project-seo-content::after { top: 0; left: 0; width: 1px; height: 80px; content: ""; position: absolute; background: rgba(255, 255, 255, 0.14); } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .al-project-seo-content::after { display: none; } } .al-project-seo-btn a { height: 60px; width: 60px; line-height: 55px; text-align: center; border-radius: 50%; display: inline-block; color: var(--tp-common-white); border: 1px solid rgba(255, 255, 255, 0.1); } .al-project-seo-btn a:hover { color: var(--tp-common-black-1); border-color: var(--tp-common-yellow); background-color: var(--tp-common-yellow); } .al-project-archi-title-wrapper { margin-right: 260px; padding-bottom: 220px; } .al-project-archi-title-sm { font-size: 34px; line-height: 1; position: relative; z-index: 2; } @media (max-width: 574.98px) { .al-project-archi-title-sm { font-size: 22px; } } .al-project-archi-title-sm a:hover { color: var(--tp-theme-secondary); } .al-project-archi-meta h5 { font-size: 14px; text-decoration: underline; color: var(--tp-grey-1); font-family: var(--tp-ff-inter); } .al-project-archi-icon { padding-left: 450px; position: relative; transform: translateY(-15px); } @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), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .al-project-archi-icon { padding-left: 0; float: right; } } @media (max-width: 574.98px) { .al-project-archi-icon { padding-top: 12px; } } .al-project-archi-icon::before { position: absolute; content: ""; height: 1px; width: 450px; top: 50%; transform: translateY(-50%); left: 0; background-color: #cecac4; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .al-project-archi-icon::before { left: inherit; right: 59px; width: 648%; } } @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), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .al-project-archi-icon::before { display: none; } } .al-project-archi-icon a { border: 1px solid #cecac4; width: 60px; height: 60px; display: block; border-radius: 50%; text-align: center; color: #030303; transition: all 0.4s ease; display: flex; align-items: center; justify-content: center; } .al-project-archi-icon a .tp-arrow-angle svg { width: 13px; height: 13px; } .al-project-archi-icon a:hover { background-color: var(--tp-theme-secondary); color: var(--tp-common-white); border-color: var(--tp-theme-secondary); } .al-project-archi-content span { line-height: 1; transform: translateY(-30px); display: inline-block; font-family: var(--tp-ff-inter); } @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), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .al-project-archi-content span { margin-top: 18px; transform: inherit; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .al-project-archi-content span { margin-top: 5px; } } .al-project-archi-content-2 { padding-left: 370px; padding-top: 40px; } .al-project-pg-text span { font-size: 15px; font-weight: 500; line-height: 20px; text-transform: uppercase; font-family: var(--tp-ff-poppins); color: rgba(183, 171, 152, 0.5); } .al-project-pg-title { font-size: 16px; font-weight: 500; line-height: 1; text-transform: uppercase; color: var(--tp-common-cream); font-family: var(--tp-ff-poppins); } .al-project-pg-wrapper { margin: 0px -15px; } .al-project-pg-inner-wrap { width: 100%; display: flex; grid-area: list; box-sizing: border-box; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .al-project-pg-inner-wrap { flex-wrap: wrap; } } .al-project-pg-item { width: 30%; height: 615px; display: block; position: relative !important; left: 0 !important; top: 0 !important; margin: 0px 15px; transition: width 0.6s cubic-bezier(0.38, 0.005, 0.215, 1); } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .al-project-pg-item { width: 100%; margin-bottom: 30px; } } .al-project-pg-item:hover { width: 80%; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .al-project-pg-item:hover { width: 100%; } } .al-project-pg-thumb { height: 100%; width: 100%; margin-bottom: 30px; } .al-project-pg-thumb img { width: 100%; height: 100%; object-fit: cover; } .al-project-pg-2-year span { color: var(--tp-common-cream); font-size: 13px; font-weight: 500; line-height: 1; margin-top: 15px; margin-right: 130px; display: inline-block; transition: 0.3s; text-transform: uppercase; font-family: var(--tp-ff-poppins); } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .al-project-pg-2-year span { margin-right: 30px; } } .al-project-pg-2-title { font-size: 46px; font-weight: 400; line-height: 1; color: var(--tp-common-cream); letter-spacing: -1.84px; font-family: var(--tp-ff-playfair); transform: 0.3s; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .al-project-pg-2-title { font-size: 30px; } } .al-project-pg-2-title-box span { color: var(--tp-common-cream); font-size: 13px; font-weight: 500; line-height: 1; text-transform: uppercase; font-family: var(--tp-ff-poppins); } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .al-project-pg-2-title-box span { font-size: 11px; } } .al-project-pg-2-link span { color: var(--tp-common-cream); display: inline-block; transition: 0.3s; } .al-project-pg-2-item { border-bottom: 1px solid rgba(183, 171, 152, 0.14); padding: 40px 0; position: relative; } .al-project-pg-2-item::after { position: absolute; bottom: 0; left: 0; width: 0%; height: 1px; background-color: var(--tp-common-pink); content: ""; transition: 0.4s; } .al-project-pg-2-item:first-child { border-top: 1px solid rgba(183, 171, 152, 0.14); } .al-project-pg-2-item:hover .al-project-pg-2-link span { transform: rotate(-45deg); } .al-project-pg-2-item:hover::after { width: 100%; } .al-project-pg-2-item.active .al-project-pg-2-title { color: var(--tp-common-black-7); } .al-project-pg-2-item.active .al-project-pg-2-year span { color: var(--tp-common-black-7); } .al-project-pg-2-item.active .al-project-pg-2-title-box span { color: var(--tp-common-black-7); } .al-project-pg-2-item.active .al-project-pg-2-link span { color: var(--tp-common-black-7); } .al-project-pg-2-item .tp-reveal-bg { position: absolute; top: 0; left: 0; width: 370px; height: 470px; opacity: 0; margin: -150px 0 0 -150px; overflow: hidden; pointer-events: none; z-index: 99; background-position: center; background-size: cover; background-repeat: no-repeat; -webkit-transition: opacity 0.3s, transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1); -moz-transition: opacity 0.3s, transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1); -ms-transition: opacity 0.3s, transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1); -o-transition: opacity 0.3s, transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1); transition: opacity 0.3s, transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1); } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .al-project-pg-2-item .tp-reveal-bg { height: 240px; width: 240px; } } .al-project-pg-2-item:hover .tp-reveal-bg { opacity: 1; } .al-video-pg-wrap { line-height: 0; } .al-video-pg-wrap video { height: 800px; width: 100%; object-fit: cover; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .al-video-pg-wrap video { height: 400px; } } /*----------------------------------------*/ /* 4.1 price css /*----------------------------------------*/ .al-price-head h5 { font-weight: 700; font-size: 24px; line-height: 1; margin-bottom: 20px; letter-spacing: -0.02em; color: var(--tp-common-black-1); font-family: var(--tp-ff-inter); } .al-price-head span { font-weight: 700; font-size: 50px; display: inline-block; color: var(--tp-common-black-1); font-family: var(--tp-ff-inter); } .al-price-head span i { font-size: 20px; font-style: normal; margin-right: 5px; display: inline-block; transform: translateY(-20px); } .al-price-head span em { font-size: 18px; font-style: normal; } .al-price-list { margin-bottom: 65px; } .al-price-list ul li { font-weight: 500; font-size: 18px; line-height: 1; padding-left: 20px; position: relative; list-style-type: none; color: var(--tp-common-black-1); font-family: var(--tp-ff-inter); } @media only screen and (min-width: 992px) and (max-width: 1199px) { .al-price-list ul li { font-size: 16px; } } .al-price-list ul li:not(:last-child) { margin-bottom: 17px; } .al-price-list ul li::after { position: absolute; content: ""; top: 7px; left: 0; width: 4px; height: 4px; border-radius: 50%; background-color: var(--tp-common-black-3); } .al-price-item { border-radius: 10px; padding: 35px 40px; background-color: var(--tp-common-white); } .al-price-item.active { background-color: var(--tp-common-blue); } .al-price-item.active .al-price-head h5 { color: var(--tp-common-white); } .al-price-item.active .al-price-head span { color: var(--tp-common-white); } .al-price-item.active .al-price-list ul li { color: var(--tp-common-white); } .al-price-item.active .al-price-list ul li::after { background-color: var(--tp-common-white); } .al-price-item.active .al-btn-blue.sky-bg { color: var(--tp-common-black-1); background-color: var(--tp-common-white); } .al-price-item.active .al-btn-blue.sky-bg:hover { color: var(--tp-common-white); background-color: var(--tp-common-black-1); } .al-price-offer { position: absolute; top: -50px; right: -62px; } .al-price-style-2 .al-price-item.active { background-color: var(--tp-common-white); } .al-price-style-2 .al-price-item.active .al-price-head h5 { color: var(--tp-common-black-1); } .al-price-style-2 .al-price-item.active .al-price-head span { color: var(--tp-common-black-1); } .al-price-style-2 .al-price-item.active .al-price-list ul li { color: var(--tp-common-black-1); } .al-price-style-2 .al-price-item.active .al-price-list ul li::after { background-color: var(--tp-common-black-1); } .al-price-style-2 .al-price-item.active .al-btn-border-radius-6.lg { color: var(--tp-common-white); border-color: var(--tp-common-black-1); background-color: var(--tp-common-black-1); } .al-toggler-pre, .al-toggler-post { font-weight: 500; font-size: 16px; line-height: 1; cursor: pointer; color: #848788; transition: all 0.3s ease; font-family: var(--tp-ff-inter); } .al-toggler-pre.is-active, .al-toggler-post.is-active { color: var(--tp-common-black-1); } .al-toggler-pre:hover, .al-toggler-post:hover { color: var(--tp-common-black-1); } .al-toggler-pre { margin-right: 15px; } .al-toggler-post { margin-left: 15px; } .al-toggle-input-wrap { position: relative; width: 76px; height: 36px; overflow: hidden; border-radius: 100px; background-color: var(--tp-common-blue); } .al-price-nav-wrapper { display: flex; align-items: center; justify-content: center; } .al-price-nav-wrapper .al-input-check { position: absolute; display: block; cursor: pointer; top: 0; left: 0; opacity: 0; z-index: 6; width: 100%; height: 100%; } .al-price-nav-wrapper .al-input-check:checked ~ .al-switch-toggle { left: 4px; right: 57.3%; } .al-switch-toggle { position: absolute; top: 4px; right: 4px; left: 57.3%; bottom: 4px; z-index: 1; border-radius: 100%; box-shadow: 0 4px 6px 0 rgba(1, 17, 22, 0.24); transition: 0.25s cubic-bezier(0.785, 0.135, 0.15, 0.86); background: linear-gradient(180deg, #fff 0%, #e1e4e8 100%); } .al-tab-hide { display: none; } .al-price-pg-item { padding: 50px 40px; border: 1px solid rgba(183, 171, 152, 0.14); } @media only screen and (min-width: 768px) and (max-width: 991px) { .al-price-pg-item { padding: 50px 25px; } } @media (max-width: 574.98px) { .al-price-pg-item { padding: 40px 30px; } } .al-price-pg-item.active .al-btn-pg-price { background-color: var(--tp-common-pink); color: var(--tp-common-white); border-color: var(--tp-common-pink); } .al-price-pg-bdr-1::after, .al-price-pg-bdr-2::after, .al-price-pg-bdr-3::after, .al-price-pg-bdr-4::after { position: absolute; top: 0; left: 0; width: 10px; height: 1px; background-color: var(--tp-common-black-7); content: ""; } .al-price-pg-bdr-1::before, .al-price-pg-bdr-2::before, .al-price-pg-bdr-3::before, .al-price-pg-bdr-4::before { position: absolute; top: 0; left: 0; width: 1px; height: 10px; background-color: var(--tp-common-black-7); content: ""; } .al-price-pg-bdr-1.bdr-topright::after, .al-price-pg-bdr-2.bdr-topright::after, .al-price-pg-bdr-3.bdr-topright::after, .al-price-pg-bdr-4.bdr-topright::after { left: auto; right: 0; } .al-price-pg-bdr-1.bdr-topright::before, .al-price-pg-bdr-2.bdr-topright::before, .al-price-pg-bdr-3.bdr-topright::before, .al-price-pg-bdr-4.bdr-topright::before { left: auto; right: 0; } .al-price-pg-bdr-1.bdr-bottomleft::after, .al-price-pg-bdr-2.bdr-bottomleft::after, .al-price-pg-bdr-3.bdr-bottomleft::after, .al-price-pg-bdr-4.bdr-bottomleft::after { top: auto; bottom: 0; } .al-price-pg-bdr-1.bdr-bottomleft::before, .al-price-pg-bdr-2.bdr-bottomleft::before, .al-price-pg-bdr-3.bdr-bottomleft::before, .al-price-pg-bdr-4.bdr-bottomleft::before { top: auto; bottom: 0; } .al-price-pg-bdr-1.bdr-bottomright::after, .al-price-pg-bdr-2.bdr-bottomright::after, .al-price-pg-bdr-3.bdr-bottomright::after, .al-price-pg-bdr-4.bdr-bottomright::after { top: auto; bottom: 0; left: auto; right: 0; } .al-price-pg-bdr-1.bdr-bottomright::before, .al-price-pg-bdr-2.bdr-bottomright::before, .al-price-pg-bdr-3.bdr-bottomright::before, .al-price-pg-bdr-4.bdr-bottomright::before { top: auto; bottom: 0; left: auto; right: 0; } .al-price-pg-title { font-size: 26px; font-weight: 400; line-height: 36px; color: var(--tp-common-black-7); font-family: var(--tp-ff-playfair); margin-bottom: 0; } .al-price-pg-price { font-size: 70px; font-weight: 500; line-height: 100px; letter-spacing: -2.8px; text-transform: uppercase; color: var(--tp-common-black-7); font-family: var(--tp-ff-poppins); margin-bottom: 10px; } .al-price-pg-head { margin-bottom: 35px; } .al-price-pg-head p { font-size: 16px; font-weight: 400; line-height: 26px; font-family: var(--tp-ff-poppins); color: var(--tp-common-black-7); margin-bottom: 0; } .al-price-pg-btn { margin-bottom: 40px; } .al-price-pg-list ul li { font-size: 16px; font-weight: 400; line-height: 1.5; font-family: var(--tp-ff-poppins); color: var(--tp-common-black-7); list-style-type: none; margin-bottom: 20px; position: relative; padding-left: 15px; } .al-price-pg-list ul li::after { position: absolute; top: 10px; left: 0; width: 4px; height: 4px; border-radius: 50%; background-color: var(--tp-common-black-7); content: ""; } .al-price-pg-list ul li:last-child { margin-bottom: 0; } /*----------------------------------------*/ /* 4.1 faq css /*----------------------------------------*/ .al-faq-wrapper .accordion-items { position: relative; padding: 0; } .al-faq-wrapper .accordion-items:not(:last-child) { box-shadow: 0 1px 0 0 rgba(1, 17, 22, 0.14); } .al-faq-wrapper .accordion-header { position: relative; } .al-faq-wrapper .accordion-header .accordion-buttons { width: 100%; padding: 25px 0; font-weight: 700; font-size: 20px; line-height: 1.3; text-align: left; position: relative; padding-right: 30px; color: var(--tp-common-black-1); font-family: var(--tp-ff-inter); } @media only screen and (min-width: 992px) and (max-width: 1199px) { .al-faq-wrapper .accordion-header .accordion-buttons { font-size: 18px; } } .al-faq-wrapper .accordion-header .accordion-buttons:not(.collapsed) { color: var(--tp-common-blue); } .al-faq-wrapper .accordion-header .accordion-buttons:not(.collapsed) .accordion-icon::before { transform: translate(-50%, -50%) rotate(90deg); } .al-faq-wrapper .accordion-header .accordion-buttons:not(.collapsed) .accordion-icon::after { background-color: var(--tp-common-blue); } .al-faq-wrapper .accordion-header .accordion-buttons .accordion-icon { position: absolute; top: 35px; right: 10px; } .al-faq-wrapper .accordion-header .accordion-buttons .accordion-icon::before { position: absolute; content: ""; width: 2px; height: 16px; left: 50%; top: 50%; transition: 0.4s; border-radius: 30px; transform: translate(-50%, -50%); background-color: var(--tp-common-black-3); } .al-faq-wrapper .accordion-header .accordion-buttons .accordion-icon::after { position: absolute; content: ""; width: 16px; height: 2px; left: 50%; top: 50%; border-radius: 30px; transform: translate(-50%, -50%); background-color: var(--tp-common-black-3); } .al-faq-wrapper .accordion-body { padding: 0; padding-right: 110px; padding-bottom: 35px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .al-faq-wrapper .accordion-body { padding-right: 65px; } } .al-faq-wrapper .accordion-body p { font-weight: 500; font-size: 14px; line-height: 1.57; color: #4d5051; margin-bottom: 0; font-family: var(--tp-ff-inter); } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .al-faq-wrapper .accordion-body p br { display: none; } } .al-faq-form-box { padding: 80px; margin-left: 75px; border-radius: 20px; background-color: #eff1f2; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .al-faq-form-box { margin-left: 30px; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) { .al-faq-form-box { padding: 40px; margin-left: 0px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .al-faq-form-box { padding: 20px; margin-left: 0px; } } .al-faq-form-wrap { padding: 40px 50px; border-radius: 10px; background-color: var(--tp-common-white); } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .al-faq-form-wrap { padding: 30px 20px; } } .al-faq-form-content p { font-weight: 400; font-size: 17px; letter-spacing: -0.02em; margin-bottom: 0; color: var(--tp-common-black-1); font-family: var(--tp-ff-inter); } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .al-faq-form-content p { font-size: 14px; } } .al-faq-form-title { font-weight: 600; font-size: 26px; line-height: 1.23; letter-spacing: -0.02em; color: var(--tp-common-black-1); font-family: var(--tp-ff-inter); } @media only screen and (min-width: 768px) and (max-width: 991px) { .al-faq-form-title { font-size: 23px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .al-faq-form-title { font-size: 20px; } } .al-faq-input input { height: 46px; border-radius: 30px; color: var(--tp-common-black-1); border: 1px solid rgba(1, 17, 22, 0.16); font-family: var(--tp-ff-inter); } .al-faq-input input::-webkit-input-placeholder { /* Chrome/Opera/Safari */ font-weight: 500; font-size: 14px; color: #848788; letter-spacing: -0.02em; } .al-faq-input input::-moz-placeholder { /* Firefox 19+ */ font-weight: 500; font-size: 14px; color: #848788; letter-spacing: -0.02em; } .al-faq-input input:-moz-placeholder { /* Firefox 4-18 */ font-weight: 500; font-size: 14px; color: #848788; letter-spacing: -0.02em; } .al-faq-input input:-ms-input-placeholder { /* IE 10+ Edge*/ font-weight: 500; font-size: 14px; color: #848788; letter-spacing: -0.02em; } .al-faq-input input::placeholder { /* MODERN BROWSER */ font-weight: 500; font-size: 14px; color: #848788; letter-spacing: -0.02em; } .al-faq-input input:focus { border-color: var(--tp-common-blue); box-shadow: 0 0 0 3px rgba(39, 125, 255, 0.1); } .al-faq-remeber input { display: none; } .al-faq-remeber input:checked ~ label::after { background-color: var(--tp-common-blue); border-color: var(--tp-common-blue); } .al-faq-remeber input:checked ~ label::before { visibility: visible; opacity: 1; } .al-faq-remeber label { position: relative; padding-left: 26px; font-weight: 400; font-size: 14px; line-height: 1; z-index: 1; color: #4d5051; letter-spacing: -0.02em; font-family: var(--tp-ff-inter); } .al-faq-remeber label::after { position: absolute; content: ""; top: 0; left: 0; width: 16px; height: 16px; z-index: -1; transition: 0.3s; line-height: 16px; border-radius: 4px; text-align: center; border: 1px solid #a1a5a7; } .al-faq-remeber label::before { position: absolute; content: url(../img/login/check.html); top: -1px; left: 0; width: 16px; height: 16px; line-height: 16px; text-align: center; visibility: hidden; opacity: 0; color: var(--tp-common-black-1); transition: all 0.3s ease; } .al-faq-remeber label:hover { cursor: pointer; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .al-faq-title-box { margin-bottom: 40px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .al-faq-wrapper { margin-bottom: 40px; } } /*----------------------------------------*/ /* 4.1 text-slider css /*----------------------------------------*/ .al-text-slider-seo-title { font-weight: 600; font-size: 60px; line-height: 1; margin-right: 55px; color: var(--tp-common-black-1); font-family: var(--tp-ff-inter); } .al-text-slider-seo-active .swiper-slide { width: auto; } .al-text-slider-seo-wave-shape-1 { position: absolute; top: 0; left: 0; right: 0; width: 100%; } .al-text-slider-seo-wave-shape-2 { position: absolute; bottom: 0; left: 0; right: 0; width: 100%; } .al-text-pg-slider-item span { font-size: 40px; font-weight: 500; text-transform: uppercase; color: var(--tp-common-white); font-family: var(--tp-ff-playfair); margin-right: 30px; padding: 5px 0; } .al-text-pg-slider-item img { margin-right: 30px; display: inline-block; filter: invert(1); } .al-text-pg-slider-wrap { background-color: var(--tp-common-pink); padding: 25px 0; } .al-text-pg-slider-active .swiper-slide { width: auto !important; } /*----------------------------------------*/ /* 4.1 testimonial css /*----------------------------------------*/ .al-testimonial-seo-slider-wrap { margin-left: 100px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .al-testimonial-seo-slider-wrap { margin-left: 50px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .al-testimonial-seo-slider-wrap { margin-left: 0; } } .al-testimonial-seo-avater { margin-bottom: 15px; } .al-testimonial-seo-avater img { width: 60px; border-radius: 100px; } .al-testimonial-seo-avater-title { font-weight: 700; font-size: 18px; margin-bottom: 0; letter-spacing: -0.02em; color: var(--tp-common-black-3); font-family: var(--tp-ff-inter); } .al-testimonial-seo-avater-info { margin-bottom: 45px; } .al-testimonial-seo-avater-info span { font-weight: 500; font-size: 14px; line-height: 1; color: #4d5051; font-family: var(--tp-ff-inter); } .al-testimonial-seo-text p { font-weight: 400; font-size: 24px; line-height: 1.42; margin-bottom: 0; color: var(--tp-common-black-3); font-family: var(--tp-ff-inter); } @media only screen and (min-width: 768px) and (max-width: 991px) { .al-testimonial-seo-text p { font-size: 18px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .al-testimonial-seo-text p { font-size: 20px; } } .al-testimonial-seo-dot .swiper-pagination-bullet { width: 60px; height: 2px; opacity: 1; border-radius: 0; display: inline-block; background: #cbcccf; transition: 0.3s; } .al-testimonial-seo-dot .swiper-pagination-bullet.swiper-pagination-bullet-active { background-color: var(--tp-common-blue); } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .al-testimonial-seo-btn { margin-bottom: 40px; } } .al-testimonial-seo-btn .tp-btn-circle-dot { background-color: var(--tp-common-blue); } .al-testimonial-seo-btn .tp-rounded-btn-wrap a { font-size: 16px; color: var(--tp-common-black-1); font-family: var(--tp-ff-inter); text-transform: capitalize; } .al-testimonial-seo-btn .tp-rounded-btn-wrap a:hover { color: var(--tp-common-white); } .al-testimonial-shop-arrow button { position: absolute; top: 50%; left: 0; background: var(--tp-common-white); box-shadow: 0px 1px 1px rgba(1, 15, 28, 0.16); border-radius: 50%; height: 60px; width: 60px; line-height: 60px; font-size: 18px; color: var(--tp-common-black); z-index: 1; } .al-testimonial-shop-arrow button:hover { background-color: var(--tp-theme-secondary); color: var(--tp-common-white); box-shadow: none; } .al-testimonial-shop-arrow button.al-testimonial-shop-next { left: auto; right: 0; } .al-testimonial-shop-designation { color: var(--tp-grey-1); font-size: 14px; font-family: var(--tp-ff-dm); } .al-testimonial-shop-section-title { font-weight: 400; font-size: 20px; margin-bottom: 50px; font-family: var(--tp-ff-dm); } .al-testimonial-shop-content { padding-left: 40px; padding-right: 40px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .al-testimonial-shop-content { padding-left: 0; padding-right: 0; } } .al-testimonial-shop-content p { font-weight: 400; font-size: 30px; line-height: 1.4; color: var(--tp-common-black); margin-bottom: 30px; font-family: var(--tp-ff-dm); } @media (max-width: 574.98px) { .al-testimonial-shop-content p { font-size: 27px; } } .al-testimonial-shop-rating { margin-bottom: 25px; } .al-testimonial-shop-rating span { font-size: 16px; color: var(--tp-theme-secondary); } .al-testimonial-shop-avater img { width: 60px; height: 60px; border-radius: 50%; } .al-testimonial-shop-user { background: var(--tp-common-white); box-shadow: 0px 1px 1px rgba(1, 15, 28, 0.16); border-radius: 40px; padding: 10px; padding-right: 27px; } .al-testimonial-shop-user-translate { -webkit-transform: translateY(2px); -moz-transform: translateY(2px); -ms-transform: translateY(2px); -o-transform: translateY(2px); transform: translateY(2px); text-align: left; } .al-testimonial-shop-user-title { font-weight: 500; font-size: 16px; line-height: 1; margin-bottom: -2px; font-family: var(--tp-ff-dm); } .al-testimonial-shop-user-designation { font-size: 14px; line-height: 1; } .al-testimonial-shop-shape-gradient { position: absolute; top: -65px; left: 50%; transform: translateX(-50%); display: inline-block; width: 432px; height: 432px; border-radius: 50%; background-image: -webkit-linear-gradient(180deg, rgba(9, 137, 255, 0.1) 0%, rgba(255, 255, 255, 0) 70%); background-image: -moz-linear-gradient(180deg, rgba(9, 137, 255, 0.1) 0%, rgba(255, 255, 255, 0) 70%); background-image: -ms-linear-gradient(180deg, rgba(9, 137, 255, 0.1) 0%, rgba(255, 255, 255, 0) 70%); background-image: -o-linear-gradient(180deg, rgba(9, 137, 255, 0.1) 0%, rgba(255, 255, 255, 0) 70%); background-image: linear-gradient(180deg, rgba(9, 137, 255, 0.1) 0%, rgba(255, 255, 255, 0) 70%); z-index: -1; } @media (max-width: 574.98px) { .al-testimonial-shop-shape-gradient { width: 280px; height: 280px; } } .footer-col-1 { padding-right: 95px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .footer-col-1 { padding-right: 0; } } /*----------------------------------------*/ /* 4.1 header css /*----------------------------------------*/ .al-header-dvdr { position: relative; padding-left: 23px; line-height: 1; } .al-header-dvdr::before { position: absolute; content: ""; height: 23px; width: 1px; background-color: var(--tp-grey-1); left: 0; top: 50%; transform: translateY(-50%); } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .al-header-dvdr::before { display: none; } } @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), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .al-header-archi { background: rgba(255, 255, 255, 0.9); } } .al-header-archi .tp-main-menu nav > ul > li > a > span { color: var(--tp-common-black); } .al-header-archi .tp-main-menu nav > ul > li > a:hover { color: var(--tp-theme-secondary); } .al-header-archi .tp-main-menu nav > ul > li > a:hover span { color: var(--tp-theme-secondary); } .al-header-archi .tp-main-menu nav ul li:hover.has-dropdown > a { color: var(--tp-theme-secondary); } .al-header-archi .tp-main-menu nav ul li:hover.has-dropdown > a span { color: var(--tp-theme-secondary); } .al-header-archi .tp-header-btn a { font-family: var(--tp-ff-p); font-weight: 500; font-size: 16px; color: var(--tp-common-black); } .al-header-archi .tp-header-btn a:hover { color: var(--tp-theme-secondary); } .al-header-seo .tp-header-it-btn:hover { background-color: var(--tp-common-blue); color: var(--tp-common-white); box-shadow: none; } .tp-megamenu-list ul li a span.update { color: var(--tp-common-white); background-color: #f70510; } /*----------------------------------------*/ /* 4.1 about css /*----------------------------------------*/ .al-about-archi-shape { position: absolute; top: 0; left: 0; width: 100%; z-index: -1; } .al-about-archi-para { font-family: var(--tp-ff-inter); } .al-about-archi-link { font-family: var(--tp-ff-inter); text-transform: uppercase; font-size: 14px; font-weight: 500; } .al-about-archi-link:hover { color: var(--tp-theme-secondary); } .al-about-archi-link .tp-arrow-svg-top-right { margin-left: 3px; } @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), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767px) { .al-about-archi-content-wrapper { margin: 0; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767px) { .al-about-archi-content-wrapper { margin-bottom: 40px; } } .al-about-archi-thumb.height-1 { width: 100%; height: 537px; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .al-about-archi-thumb.height-1 { height: auto; } } .al-about-archi-thumb.height-2 { width: 100%; height: 786px; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .al-about-archi-thumb.height-2 { height: auto; } } @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), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .al-about-archi-thumb-wrap { margin-right: 0; } } .al-about-pg-shape { filter: invert(100%) sepia(32%) saturate(304%) hue-rotate(200deg) brightness(105%) contrast(100%); } @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) { .al-about-pg-area { padding-bottom: 160px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .al-about-pg-area { padding-bottom: 120px; } } .al-about-pg-title-box { padding-left: 50px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .al-about-pg-title-box { padding-left: 0; } } .al-about-pg-title-box p { font-size: 26px; font-weight: 400; line-height: 36px; margin-bottom: 0; color: var(--tp-common-black-7); font-family: var(--tp-ff-playfair); } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .al-about-pg-title-box p { font-size: 22px; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .al-about-pg-subtitle-box { margin-bottom: 20px; } } .al-about-pg-border { padding-bottom: 70px; margin-bottom: 100px; border-bottom: 1px solid rgba(183, 171, 152, 0.14); } .al-about-pg-funfact .border-line { height: 160px; width: 1px; top: 45%; left: 29%; position: absolute; display: inline-block; background-color: #eb5939; transform: translate(-50%, -50%) rotate(-13deg); } @media only screen and (min-width: 992px) and (max-width: 1199px) { .al-about-pg-funfact .border-line { left: 30%; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .al-about-pg-funfact .border-line { left: 15%; } } .al-about-pg-funfact span { font-weight: 400; color: var(--tp-common-black-7); font-family: var(--tp-ff-playfair); display: inline-block; } .al-about-pg-funfact span i { font-size: 22px; display: block; margin-bottom: 20px; font-style: normal; } .al-about-pg-funfact span em { line-height: 0; font-size: 70px; font-style: normal; letter-spacing: -3.5px; display: inline-block; } .al-about-pg-funfact span em span { transform: translateY(5px); display: inline-block; } .al-about-pg-funfact-item .cols { margin-right: 80px; } @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: 576px) and (max-width: 767px), (max-width: 574.98px) { .al-about-pg-funfact-item .cols { margin-right: 45px; } } .al-about-pg-content-wrap { padding-left: 105px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .al-about-pg-content-wrap { padding-left: 80px; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .al-about-pg-content-wrap { padding-left: 0; } } .al-about-pg-content p { font-size: 16px; font-weight: 400; line-height: 28px; margin-bottom: 65px; color: var(--tp-common-black-7); font-family: var(--tp-ff-poppins); } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .al-about-pg-thumb img { width: 100%; margin-bottom: 30px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .al-about-pg-thumb-2 { padding-top: 0; } } /*----------------------------------------*/ /* 4.1 fact css /*----------------------------------------*/ .al-fact-archi-thumb { margin-left: -88px; } @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), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .al-fact-archi-thumb { margin-left: 0; } } .al-fact-archi-thumb img { float: right; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) { .al-fact-archi-wrap { display: flex; gap: 30px; flex-wrap: wrap; } } .al-fact-archi-subtitle { font-size: 24px; line-height: 1.42; color: var(--tp-grey-1); } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) { .al-fact-archi-subtitle { margin-bottom: 10px; } } @media (max-width: 574.98px) { .al-fact-archi-subtitle { margin-bottom: 5px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) { .al-fact-archi-wrapper { margin-left: 0; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .al-fact-archi-wrapper { margin-left: 0; } } @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), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .al-fact-archi-content p { margin-right: 0; font-size: 16px; } .al-fact-archi-content p br { display: none; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .al-fact-archi-content p { font-size: 15px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .al-fact-archi-content p { font-size: 14px; } } .al-fact-archi-number { font-size: 70px; line-height: 1.14; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .al-fact-archi-number { font-size: 55px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) { .al-fact-archi-number { font-size: 50px; } } @media (max-width: 574.98px) { .al-fact-archi-number { font-size: 40px; } } .al-fact-archi-icon-2 { width: 75px; height: 75px; display: inline-block; } .al-fact-archi-icon-3 { color: var(--tp-theme-primary); } @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), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .al-fact-archi-count-2 { margin: 0; } } .al-fact-archi-count-2 .al-fact-archi-subtitle { font-size: 20px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .al-fact-archi-count-2 .al-fact-archi-subtitle { font-size: 21px; } } .al-fact-archi-count-3 h5 { color: #bcbcbc; } .al-fact-archi-count-3 h3 { color: var(--tp-common-white); } .themeBtn { background: #28d3ad; color: #000; fill: #000; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; padding: 12px 21px; font-family: var(--tp-ff-heading); font-weight: 500; text-transform: uppercase; border-radius: 26px; } .hero_bg_overlay { background-size: cover; position: absolute; width: 100%; height: 100%; top: 0; left: 0; opacity: 0.4; pointer-events: none; } .bluredBg { position: absolute; width: 100%; height: 100%; background-size: contain; background-position: center; background-repeat: no-repeat; filter: blur(101px); top: -90px; animation: counterRotate 8s linear infinite; opacity: 0.8; } @keyframes counterRotate { 0%, 100% { transform: rotate(0deg) scale(1); } 25% { transform: rotate(90deg) scale(1.1); } 50% { transform: rotate(180deg) scale(0.95); } 75% { transform: rotate(270deg) scale(1.05); } } .coverflow-slider-content h5 { color: #28d3ad; } .coverflow-slider-content { display: flex; flex-direction: column; } .swiper-3d .swiper-slide-shadow-left{ background-image: linear-gradient(to left, rgb(0 0 0 / 15%), rgba(0, 0, 0, 0)); } .swiper-3d .swiper-slide-shadow-right{ background-image: linear-gradient(to right, rgb(0 0 0 / 15%), rgba(0, 0, 0, 0)) } .footer_logo { display: flex; align-items: center; gap: 82px; justify-content: flex-start; margin-top: 40px; } .footer_logo img {max-width: 120px;} .tp-word-span:last-child .tp-letter-span { background: linear-gradient(0deg, #111112 4%, #28d3ad 50%, #111112 97%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; display: inline-block; } .impact_vido_box video { width: 100%; height: 100%; object-fit: cover; } .impact_vido_box { width: 300px; height: 300px; border-radius: 100%; overflow: hidden; margin: auto; } .tp-portfolio-2-content { padding: 0px 20px; } .season_text { color: #4d4d4d; margin-top: -9px; } .season_button { background: #28d3ad; padding: 8px 20px; display: inline-block; } .tp-portfolio-2-slider-active .swiper-slide:nth-child(odd) .season_button { background: var(--tp-theme-secondary); color: #fff; }