/*----------------------------------------------------------------------------------- Template Name: Aleric - Digital Agency & Creative Portfolio HTML Template Author: AQLOVA Support: basictheme400@gmail.com Description: Aleric - Digital Agency & Creative Portfolio HTML Template Version: 1.0 ----------------------------------------------------------------------------------- /************ 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 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); } .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 */ @font-face { font-family: "Morganite-Bold"; src: url("../fonts/Morganite-ExtraBold.woff2") format("woff2"), url("../fonts/Morganite-ExtraBold.woff") format("woff"), url("../fonts/Morganite-ExtraBold.ttf") 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.woff") format("woff"), url("../fonts/Morganite-SemiBold.ttf") 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-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-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: #c4ee18; --tp-theme-secondary: #ff6d00; --tp-theme-1: #0752c5; --tp-border-1: #eee; --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; } 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; } } /* 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-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-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: var(--tp-common-black); font-family: var(--tp-ff-heading); border: 1px solid var(--tp-border-1); background: var(--tp-common-white); 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: #ffffff; } .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; } @-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.7 Nice Select /*----------------------------------------*/ .nice-select { -webkit-tap-highlight-color: transparent; box-sizing: border-box; clear: both; cursor: pointer; display: block; outline: none; position: relative; -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; border: 1px solid transparent; user-select: none; white-space: nowrap; width: auto; color: #999 !important; padding-left: 25px; padding-right: 25px; font-weight: 400; font-size: 16px; line-height: 56px; } .nice-select:hover { border-color: ar(--tp-theme-primary); } .nice-select:active, .nice-select.open, .nice-select:focus { border-color: var(--tp-theme-primary); } .nice-select::after { position: absolute; content: "\f107"; top: 50%; right: 25px; font-family: var(--tp-ff-fontawesome); color: var(--tp-grey-2); font-weight: 500; pointer-events: none; font-size: 18px; -webkit-transition: all 0.15s ease-in-out; transition: all 0.15s ease-in-out; margin-top: 0; transform-origin: center; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } .nice-select.open::after { -webkit-transform: translateY(-50%) rotate(-180deg); -moz-transform: translateY(-50%) rotate(-180deg); -ms-transform: translateY(-50%) rotate(-180deg); -o-transform: translateY(-50%) rotate(-180deg); transform: translateY(-50%) rotate(-180deg); } .nice-select.open .list { opacity: 1; pointer-events: auto; -webkit-transform: scale(1) translateY(0); -ms-transform: scale(1) translateY(0); transform: scale(1) translateY(0); } .nice-select.disabled { border-color: #ededed; color: #999; pointer-events: none; } .nice-select.disabled::after { border-color: #cccccc; } .nice-select.wide { width: 100%; } .nice-select.wide .list { left: 0 !important; right: 0 !important; } .nice-select.right { float: right; } .nice-select.right .list { left: auto; right: 0; } .nice-select.small { font-size: 12px; height: 36px; line-height: 34px; } .nice-select.small::after { height: 4px; width: 4px; } .nice-select.small .option { line-height: 34px; min-height: 34px; } .nice-select .list { background-color: #fff; width: 100%; border-radius: 5px; box-shadow: 0 0 0 1px rgba(68, 68, 68, 0.11); box-sizing: border-box; margin-top: 4px; opacity: 0; overflow: hidden; padding: 10px; pointer-events: none; position: absolute; top: 100%; left: 0; -webkit-transform-origin: 50% 0; -ms-transform-origin: 50% 0; transform-origin: 50% 0; -webkit-transform: scale(0.75) translateY(-21px); -ms-transform: scale(0.75) translateY(-21px); transform: scale(0.75) translateY(-21px); -webkit-transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out; transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out; z-index: 9; } .nice-select .option { cursor: pointer; font-weight: 400; line-height: 40px; list-style: none; min-height: 40px; outline: none; padding-left: 18px; padding-right: 29px; text-align: left; -webkit-transition: all 0.2s; transition: all 0.2s; border-radius: 12px; } .nice-select .option:hover { background-color: #f8f8fb; color: var(--tp-common-black); } .nice-select .option.disabled { background-color: transparent; color: #999; cursor: default; } .no-csspointerevents .nice-select .list { display: none; } .no-csspointerevents .nice-select.open .list { display: block; } /*----------------------------------------*/ /* 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.png), 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; } .tp-breadcrumb-list ul { display: flex; } .tp-breadcrumb-list ul li { font-family: var(--tp-ff-heading); font-weight: 500; font-size: 18px; color: var(--tp-common-black-3); list-style: none; } .tp-breadcrumb-list ul li span { width: 8px; height: 8px; display: inline-block; background: var(--tp-grey-1); border-radius: 40px; margin: 0 10px; } .tp-breadcrumb-list ul li a { color: var(--tp-grey-1); 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-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: var(--tp-common-black); 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: #0d0d0d; 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 25px; 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 18px; } } .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; } /*----------------------------------------*/ /* 5.1 blog css /*----------------------------------------*/ .tp-blog-title-wrap .tp-section-title { margin-left: 205px; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) { .tp-blog-title-wrap .tp-section-title { margin-left: 120px; } } @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-blog-title-wrap .tp-section-title { margin-left: 0; } } .tp-blog-meta { border: 1px solid #eee; border-radius: 100px; display: inline-block; padding: 1px 12px; } .tp-blog-meta span { color: var(--tp-grey-1); } .tp-blog-meta span.borders { width: 8px; height: 8px; background: var(--tp-grey-2); display: inline-block; border-radius: 20px; margin: 0 10px; transform: translateY(-2px); } .tp-blog-2-item .tp-blog-meta span.borders { background: transparent; border: 1px solid var(--tp-grey-1); } @media (max-width: 574.98px) { .tp-blog-2-para br { display: none; } } .tp-blog-wd-shape { align-items: center !important; } .tp-blog-wd-tag { border: 1px solid #eee; border-radius: 100px; padding: 1px 15px; } .tp-blog-wd-item { border: 1px solid var(--tp-border-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-blog-wd-title { margin-bottom: 50px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-blog-wd-title br { display: none; } } .tp-blog-wd-title a:hover { color: var(--tp-grey-1); } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-blog-wd-content { padding: 30px 20px; } } .tp-blog-sa-border { border-top: 1px solid var(--tp-border-1); } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-blog-sa-btn { margin-left: 0; } } .tp-blog-pp-item { border: 1px solid var(--tp-border-1); padding-bottom: 14px; } @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-blog-pp-title-wrap p br { display: none; } } .tp-blog-pagenation ul { display: flex; gap: 20px; } .tp-blog-pagenation ul li { list-style: none; } .tp-blog-pagenation ul li a { font-weight: 500; font-size: 16px; text-transform: uppercase; color: var(--tp-grey-1); width: 40px; height: 40px; display: flex; justify-content: center; align-items: center; background: var(--tp-common-white-2); border-radius: 50%; } .tp-blog-pagenation ul li a:hover { background: var(--tp-theme-primary); color: var(--tp-common-black); } .tp-blog-pagenation ul li a.active { background: var(--tp-theme-primary); color: var(--tp-common-black); } .tp-blog-pagenation-nav { 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-blog-pagenation-nav:hover { background: var(--tp-theme-primary); color: var(--tp-common-black); border-color: var(--tp-theme-primary); } .tp-blog-pagenation-wrap { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; } .tp-blog-top-content { padding: 70px 230px 100px 230px; background: var(--tp-common-white); margin-top: -180px; position: relative; z-index: 2; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .tp-blog-top-content { padding: 70px 120px 100px 120px; } } @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-blog-top-content { padding: 40px 50px 40px 50px; } } @media (max-width: 574.98px) { .tp-blog-top-content { margin-top: 70px; padding: 40px 20px 40px 20px; } } .tp-blog-top-title { text-decoration: underline; text-underline-offset: 4px; } @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-blog-top-title br { display: none; } } .tp-blog-details-dates span { color: var(--tp-grey-1); } .tp-blog-details-dates span.borders { width: 8px; height: 8px; background: var(--tp-grey-2); display: inline-block; border-radius: 20px; margin: 0 10px; transform: translateY(-2px); } .tp-blog-details-link { display: flex; gap: 15px; } .tp-blog-details-link a { border: 1px solid var(--tp-border-1); width: 30px; height: 30px; display: flex; justify-content: center; align-items: center; border-radius: 50%; } .tp-blog-details-link a:hover { background: var(--tp-common-black); color: var(--tp-common-white); border-color: var(--tp-common-black); } .tp-blog-details-link-wrap { border: 1px solid var(--tp-border-1); border-radius: 10px; display: flex; justify-content: space-between; padding: 15px 25px; padding-bottom: 5px; flex-wrap: wrap; } .tp-blog-details-tag ul { display: flex; gap: 10px; flex-wrap: wrap; } .tp-blog-details-tag ul li { list-style: none; } .tp-blog-details-tag ul li a { color: var(--tp-grey-1); border: 1px solid #eee; border-radius: 100px; display: inline-block; padding: 11px 17px; line-height: 1; } .tp-blog-details-tag ul li a:hover { background: var(--tp-theme-primary); color: var(--tp-common-black); border-color: var(--tp-theme-primary); } .tp-blog-details-tag-wrap { display: flex; justify-content: space-between; flex-wrap: wrap; } .tp-blog-details-social ul { display: flex; gap: 10px; } .tp-blog-details-social ul li { list-style: none; } .tp-blog-details-social ul li a { border: 1px solid var(--tp-border-1); border-radius: 100px; width: 40px; height: 40px; color: var(--tp-grey-1); border-radius: 50%; display: flex; justify-content: center; align-items: center; } .tp-blog-details-social ul li a:hover { background: var(--tp-theme-primary); color: var(--tp-common-black); border-color: var(--tp-theme-primary); } .tp-blog-cst-para { 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-blog-cst-para { margin-left: 0; } } .tp-blog-cst-thumb { overflow: hidden; border-radius: 12px; } .tp-blog-cst-thumb img { border-radius: 12px; transition: all 0.6s ease; } .tp-blog-cst-item { padding: 30px 30px 30px 30px; border-radius: 20px; background: var(--tp-common-white); transition: all 0.4s ease; } .tp-blog-cst-item:hover { background: var(--tp-common-green-2); } .tp-blog-cst-item:hover .tp-blog-cst-thumb img { transform: scale(1.1); } .tp-blog-cst-content { padding: 30px 6px 0px 6px; } @media (max-width: 574.98px) { .tp-blog-cst-content { flex-direction: column; } } @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-blog-cst-dates { margin-right: 20px; } } @media (max-width: 574.98px) { .tp-blog-cst-dates { margin-right: 0; margin-bottom: 10px; display: flex; align-items: center; } .tp-blog-cst-dates h2 { margin-right: 20px; } } .tp-blog-it-item { border: 1px solid rgba(16, 48, 42, 0.1); border-radius: 16px; } @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-blog-it-item .img-box { height: 305px; } } @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-blog-it-item { margin-top: 0; } } .tp-blog-it-item .tp-blog-thumb { border-radius: 16px; } .tp-blog-it-item .tp-blog-content { padding: 30px 30px 30px 30px; } .tp-blog-it-qoute { padding: 50px 50px 44px 50px; } @media (max-width: 574.98px) { .tp-blog-it-qoute { padding: 20px 20px 14px 20px; } } .tp-blog-it-qoute:hover .tp-blog-it-qoute-icon { background: var(--tp-theme-primary); color: var(--tp-common-black-5); } .tp-blog-it-qoute-icon { width: 60px; height: 60px; background: #1c3c36; flex: 0 0 auto; transition: all 0.4s ease; } .tp-blog-it-qoute-info .dvdr { background: rgba(243, 241, 242, 0.1); height: 24px; width: 1px; display: inline-block; } .tp-blog-it-qoute-wrap { border-bottom: 1px solid rgba(243, 241, 242, 0.1); } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-blog-pb-content { padding: 30px; } } .tp-blog-pb-content .tp-blog-meta { border: none; padding: 0; } .tp-blog-pb-content .tp-blog-meta span { font-family: var(--tp-ff-inter); font-weight: 500; letter-spacing: -0.02em; color: var(--tp-common-black-5); border: none; } .tp-blog-pb-content .tp-blog-meta span.borders { background: var(--tp-common-black-5); } .tp-blog-pb-btn:hover { color: var(--tp-theme-secondary); } .tp-blog-pb-btn:hover span { background: var(--tp-theme-secondary); color: var(--tp-grey-5); } .tp-blog-pb-btn span { border: 1px solid #f3f1f2; width: 48px; height: 48px; transition: all 0.4s ease; } .tp-blog-pb-shape { position: absolute; left: 0; top: 432px; width: 33%; } .tp-blog-pb-shape img { width: 100%; } .tp-blog-pb-thumb { border-radius: 16px 0 0 16px; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-blog-pb-thumb { margin-right: 0; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-blog-pb-thumb { border-radius: 16px; } } .tp-blog-pb-thumb img { border-radius: 16px 0 0 16px; transition: all 0.4s ease; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-blog-pb-thumb img { border-radius: 16px; } } .tp-blog-pb-item { border: 1px solid #E7E4DE; border-radius: 16px; } .tp-blog-pb-item:hover .tp-blog-pb-thumb img { transform: scale(1.1); } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-blog-pb-item-wrap { margin-left: 0; } } .tp-blog-ai-content { background: #171718; border-radius: 16px; padding: 52px 42px 43px 42px; margin: 0px 24px 24px 24px; margin-top: -92px; 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-blog-ai-content { padding: 52px 32px 43px 32px; } } @media (max-width: 574.98px) { .tp-blog-ai-content { margin: 0px 14px 14px 14px; margin-top: -92px; } } .tp-blog-ai-dates { border: 1px solid rgba(243, 241, 242, 0.1); padding: 2px 23px; } .tp-blog-ai-dates svg { transform: translateY(-3px); } .tp-blog-ai-item { border: 1px solid rgba(243, 241, 242, 0.1); } .tp-blog-ai-comments svg { transform: translateY(-2px); } .tp-blog-ai-btn { padding: 14px 55px 32px 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) { .tp-blog-ai-btn { padding: 14px 35px 32px 35px; } } @media (max-width: 574.98px) { .tp-blog-ai-btn { padding: 14px 15px 32px 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) { .tp-blog-ai-title br { display: none; } } .tp-blog-md-content { margin: 0px; margin-top: -107px; box-shadow: 0 4px 32px 0 rgba(0, 0, 0, 0.05); background: var(--tp-common-white); padding: 47px 44px 45px 44px; 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-blog-md-content { margin-top: -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-blog-md-content { padding: 47px 40px 45px 40px; } } @media (max-width: 574.98px) { .tp-blog-md-content { padding: 30px 20px 30px 20px; } } .tp-blog-md-dates { display: flex; gap: 22px; justify-content: center; border-bottom: 1px solid rgba(17, 17, 18, 0.1); padding-bottom: 18px; margin-bottom: 20px; } .tp-blog-md-dates span { display: flex; transition: all 0.4s ease; } .tp-blog-md-dates span svg { transform: translateY(-3px); } .tp-blog-md-item:hover .tp-blog-md-content { background: var(--tp-theme-1); } .tp-blog-md-item:hover .tp-blog-md-dates { border-color: rgba(243, 241, 242, 0.1); } .tp-blog-md-item:hover .tp-blog-md-dates span { color: var(--tp-common-white); } .tp-blog-md-item:hover .tp-blog-md-title { color: var(--tp-common-white); } .tp-blog-md-item:hover .tp-left-right { color: var(--tp-common-white); } @media only screen and (min-width: 1600px) and (max-width: 1700px) { .tp-blog-md-title { font-size: 40px; } } @media only screen and (min-width: 1400px) and (max-width: 1599px) { .tp-blog-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), (max-width: 574.98px) { .tp-blog-md-title { font-size: 27px; } } .tp-blog-vp-title { font-size: 250px; font-weight: 800; line-height: 80%; transform: rotate(-90deg); } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) { .tp-blog-vp-title { font-size: 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-blog-vp-title { transform: rotate(0); font-size: 180px; } } @media (max-width: 574.98px) { .tp-blog-vp-title { font-size: 120px; } } .tp-blog-vp-cetagory a { font-family: var(--tp-ff-inter); font-weight: 600; font-size: 12px; text-transform: uppercase; color: var(--tp-common-black-5); border: 1px solid rgba(17, 17, 18, 0.1); border-radius: 500px; padding: 6px 18px; } .tp-blog-vp-cetagory a:hover { background: var(--tp-common-black-5); 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), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-blog-vp-thumb { 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-blog-vp-item-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-blog-details-2-social { margin-left: 0; } } .tp-blog-details-2-social ul { display: flex; gap: 10px; flex-direction: column; max-width: 80px; border-right: 1px solid var(--tp-border-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-blog-details-2-social ul { flex-direction: row; border-bottom: 1px solid var(--tp-border-1); border-inline-end: 0; display: inline-flex; max-width: 100%; margin-bottom: 30px; padding-bottom: 10px; } } .tp-blog-details-2-social ul li { list-style: none; } .tp-blog-details-2-social ul li a { font-weight: 400; font-size: 14px; line-height: 1; color: var(--tp-grey-1); display: flex; flex-direction: column; text-align: center; align-items: center; } .tp-blog-details-2-social ul li a svg { display: block; padding-bottom: 6px; width: 30px; } .tp-blog-details-2-social ul li a i { font-size: 20px; color: var(--tp-grey-1); transition: all 0.4s ease; width: 60px; height: 60px; border-radius: 50px; display: flex; justify-content: center; align-items: center; } .tp-blog-details-2-social ul li a i:hover { color: var(--tp-common-white); background: var(--tp-common-black-5); } .tp-blog-details-2-social ul li a span { line-height: 1.2; display: inline-block; } /*----------------------------------------*/ /* 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); } .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 { 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%; 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-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-spacing { padding-top: 227px; padding-bottom: 73px; } @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-spacing { padding-top: 125px; } } .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.png); } .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, #fff 50%, #999 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: 16px; color: var(--tp-grey-1); border: 1px solid var(--tp-border-1); border-radius: 100px; display: inline-block; padding: 1px 17px; 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; } } .tp-portfolio-tag span:hover { background: var(--tp-common-black); border: 1px solid var(--tp-common-black); color: var(--tp-common-white); } @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 { height: 604px; width: 100%; overflow: hidden; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-portfolio-thumb.thumb-1 { height: 404px; } } .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: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-common-white-2); display: inline-block; border-radius: 100px; } .tp-portfolio-masonary-spacing { padding-top: 210px; } @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-masonary-spacing { padding-top: 140px; } } .tp-portfolio-showcase-spacing { padding-top: 180px; } @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; height: 100vh; } .coverflow-slider-active { padding: 100px 0; } .coverflow-slider-text-active { height: 100px; } .coverflow-slider-text-wrap { position: absolute; bottom: 60px; 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: 40px; } } .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); } @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-inner .tp-perspective-image:before { content: ""; width: 40px; height: 103%; position: absolute; left: -20px; top: -1.5%; z-index: 10; border-radius: 100%; -webkit-border-radius: 100%; -moz-border-radius: 100%; -ms-border-radius: 100%; -o-border-radius: 100%; background: #000; } @media (max-width: 574.98px) { .tp-perspective-slider .tp-perspective-inner .tp-perspective-image:before { content: none; } } .tp-perspective-slider .tp-perspective-inner .tp-perspective-image:after { content: ""; width: 40px; height: 103%; position: absolute; right: -20px; top: -1.5%; z-index: 10; border-radius: 100%; -webkit-border-radius: 100%; -moz-border-radius: 100%; -ms-border-radius: 100%; -o-border-radius: 100%; background: #000; } @media (max-width: 574.98px) { .tp-perspective-slider .tp-perspective-inner .tp-perspective-image:after { content: none; } } .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; } @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: 100%; height: 100%; } .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-map { position: absolute; top: 114px; left: 0; right: 0; z-index: -1; margin: 0 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) { .tp-testimonial-md-map { top: 44px; height: 90%; } } .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: 283px; } @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: 200px; } } .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: 250px; } } .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; } @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 svg { 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 svg { width: 30px; height: 30px; } } .tp-techonolgy-capsule-item svg { 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-map-box { line-height: 0; } .tp-contact-map-box iframe { height: 680px; width: 100%; line-height: 1; filter: saturate(0); } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) { .tp-contact-map-box iframe { height: 400px; } } @media (max-width: 574.98px) { .tp-contact-map-box iframe { height: 300px; } } .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-map { width: 100%; height: 100%; border-radius: 8px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .tp-contact-us-map { height: 500px; margin-bottom: 30px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-contact-us-map { height: 450px; margin-bottom: 30px; } } .tp-contact-us-map iframe { width: 100%; height: 100%; border-radius: 8px; } @media (max-width: 574.98px) { .tp-contact-us-heading .tp-career-title { padding-bottom: 20px; } } .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; } } /*----------------------------------------*/ /* 7.20 map /*----------------------------------------*/ @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-map-pb-spacing { overflow-x: auto; margin-bottom: 100px; } } .tp-map-pb-wrap { height: 690px; } @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-map-pb-wrap { height: 550px; width: 1000px; } } .tp-map-popup { position: absolute; z-index: 1; top: -310px; left: 50%; transform: translateX(-50%); width: 268px; background: var(--tp-common-white); border-radius: 20px; padding: 20px 20px 24px 20px; box-shadow: 0 7px 16px 2px rgba(0, 0, 0, 0.06); opacity: 0; transition: all 0.4s ease; text-align: left; visibility: hidden; } .tp-map-popup-thumb { width: 100%; border-radius: 8px; } .tp-map-popup-contact { display: flex; align-items: center; font-family: var(--tp-ff-sora); font-weight: 400; font-size: 12px; color: var(--tp-common-black); opacity: 0.8; } .tp-map-popup-contact span { width: 24px; height: 24px; display: flex; justify-content: center; align-items: center; border: 1px solid #E7E7E7; border-radius: 50px; margin-right: 8px; } .tp-map-pin.active .tp-map-pin-icon { color: var(--tp-theme-secondary); } .tp-map-pin.active .tp-map-popup { opacity: 1; visibility: visible; } .tp-map-pin-icon { color: var(--tp-common-black-5); transition: all 0.4s ease; cursor: pointer; } .tp-map-pin-icon svg { animation: popups 3s linear infinite; } .tp-map-pin-wrap { display: inline-block; position: absolute; } .tp-map-pin-1 { top: 216px; left: 50%; } .tp-map-pin-2 { top: 252px; left: 52.5%; } .tp-map-pin-3 { top: 216px; left: 55%; } .tp-map-pin-4 { top: 35px; left: 33%; } .tp-map-pin-4 .tp-map-popup { top: inherit; bottom: -305px; } @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-map-pin-4 .tp-map-popup { top: inherit; bottom: -290px; } } .tp-map-pin-4 .tp-map-pin:hover .tp-map-popup { top: inherit; bottom: -305px; } .tp-map-pin-5 { top: 97px; right: 33%; } .tp-map-pin-5 .tp-map-popup { top: inherit; bottom: -305px; } @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-map-pin-5 .tp-map-popup { top: inherit; bottom: -290px; } } .tp-map-pin-5 .tp-map-pin:hover .tp-map-popup { top: inherit; bottom: -305px; } .tp-map-pin-6 { top: 290px; left: 13%; } .tp-map-pin-7 { top: 270px; left: 17%; } @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-map-pin-7 { left: 7%; } } .tp-map-pin-8 { top: 200px; left: 15%; } .tp-map-pin-9 { top: 390px; left: 30%; } @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-map-pin-9 { left: 13%; } } .tp-map-pin-10 { top: 420px; left: 32%; } @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-map-pin-10 { left: 22%; } } .tp-map-pin-11 { top: 192px; right: 24%; } .tp-map-pin-12 { top: 220px; right: 19%; } .tp-map-pin-13 { top: 274px; right: 21%; } /*----------------------------------------*/ /* 7.5 Cart css /*----------------------------------------*/ .cartmini__area { position: fixed; right: 0; top: 0; width: 320px; height: 100%; -webkit-transform: translateX(calc(100% + 80px)); -moz-transform: translateX(calc(100% + 80px)); -ms-transform: translateX(calc(100% + 80px)); -o-transform: translateX(calc(100% + 80px)); transform: translateX(calc(100% + 80px)); background: var(--tp-common-white) none repeat scroll 0 0; z-index: 99999; scrollbar-width: none; transition: 0.3s; } .cartmini__area::-webkit-scrollbar { display: none; } .cartmini__area.cartmini-opened { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } .cartmini__wrapper { position: relative; min-height: 100%; padding-left: 25px; padding-right: 25px; } .cartmini__top-title { padding: 20px 0; border-bottom: 1px solid #E0E2E3; } .cartmini__top-title h4 { font-size: 18px; font-weight: 600; margin-bottom: 0; text-transform: capitalize; } .cartmini__close { position: absolute; top: 17px; right: 0; } .cartmini__close-btn { background: transparent; color: var(--tp-common-black); font-size: 22px; } .cartmini__close-btn:hover { -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); } .cartmini__shipping { padding: 15px 0; border-bottom: 1px solid #E0E2E3; } .cartmini__shipping .progress { height: 10px; border-radius: 0; } .cartmini__shipping .progress-bar { background-color: #ffaf1b; } .cartmini__shipping p { margin-bottom: 5px; font-size: 16px; } .cartmini__shipping p span { color: red; font-weight: 600; } .cartmini__widget { height: calc(100vh - 380px); overflow-y: scroll; overscroll-behavior-y: contain; scrollbar-width: none; } .cartmini__widget::-webkit-scrollbar { display: none; /* for Chrome, Safari, and Opera */ } .cartmini__widget-item { position: relative; display: flex; padding: 20px 0; border-bottom: 1px solid rgba(129, 129, 129, 0.2); } .cartmini__widget-item:last-child { border-bottom: 0; } .cartmini__thumb { border: 1px solid #E0E2E3; margin-right: 15px; } .cartmini__thumb img { width: 70px; height: auto; } .cartmini__title { font-size: 15px; margin-bottom: 4px; font-weight: 500; } .cartmini__title a { display: inline; transition: all 0.3s linear; background-repeat: no-repeat; background-size: 0% 1px, 0 1px; background-position: 100% 100%, 0 100%; background-image: linear-gradient(currentcolor, currentcolor), linear-gradient(currentcolor, currentcolor); } .cartmini__title a:hover { color: #4d3d30; background-size: 0% 1px, 100% 1px; } .cartmini__content { padding-right: 15px; } .cartmini__content .tp-product-quantity { width: 75px; padding: 0; } .cartmini__content .tp-product-quantity .tp-cart-input[type=text] { height: 30px; text-align: center; font-size: 13px; border: 1px solid #E0E2E3; background-color: var(--tp-common-white); padding: 0; } .cartmini__content .tp-product-quantity .tp-cart-plus, .cartmini__content .tp-product-quantity .tp-cart-minus { width: 20px; height: 30px; line-height: 30px; display: inline-block; text-align: center; font-size: 13px; left: 3px; } .cartmini__content .tp-product-quantity .tp-cart-plus svg, .cartmini__content .tp-product-quantity .tp-cart-minus svg { -webkit-transform: translateY(-1px); -moz-transform: translateY(-1px); -ms-transform: translateY(-1px); -o-transform: translateY(-1px); transform: translateY(-1px); width: 10px; } .cartmini__content .tp-product-quantity .tp-cart-plus::after, .cartmini__content .tp-product-quantity .tp-cart-minus::after { display: none; } .cartmini__content .tp-product-quantity .tp-cart-plus { left: auto; right: 3px; } .cartmini__del { position: absolute; top: 15px; right: 0; width: 25px; height: 25px; line-height: 25px; text-align: center; color: var(--tp-common-black); font-size: 14px; } .cartmini__del:hover { color: #4d3d30; } .cartmini__checkout { padding-top: 15px; padding-bottom: 85px; width: 100%; border-top: 2px solid #E0E2E3; } .cartmini__checkout-title h4 { font-size: 15px; display: inline-block; font-weight: 500; margin-bottom: 0; text-transform: capitalize; } .cartmini__checkout-title span { float: right; font-size: 15px; color: var(--tp-common-black); font-weight: 500; font-family: var(--tp-ff-inter); } .cartmini__price { font-size: 14px; font-weight: 500; color: var(--tp-common-black); font-family: var(--tp-ff-inter); } .cartmini__quantity { font-size: 12px; font-weight: 500; } .cartmini__empty { margin-top: 150px; } .cartmini__empty img { margin-bottom: 30px; } .cartmini__empty p { font-size: 16px; color: var(--tp-common-black); margin-bottom: 15px; } .tp-cart-header-product { padding-left: 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-cart-list { overflow-x: scroll; } } @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-cart-list { overflow-x: scroll; margin-right: 0; } } .tp-cart-list .table > :not(caption) > * > * { padding: 20px 0; box-shadow: none; vertical-align: middle; } @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-cart-list table { width: 840px; } } .tp-cart-list thead { background-color: var(--tp-grey-5); } .tp-cart-list thead th { font-weight: 500; font-size: 14px; color: var(--tp-common-black); border: 0 !important; padding-top: 9px !important; padding-bottom: 9px !important; background: transparent; font-family: var(--tp-ff-dm); } .tp-cart-list tr td { border-color: #E0E2E3; font-family: var(--tp-ff-dm); } .tp-cart-list tr td .tp-cart-action-btn { font-weight: 400; font-size: 14px; color: #818487; } .tp-cart-list tr td .tp-cart-action-btn svg { transform: translateY(-1px); } .tp-cart-list tr td .tp-cart-action-btn:hover { color: #FF1826; } .tp-cart-list tr td.tp-cart-add-to-cart .tp-btn { border-radius: 0; } .tp-cart-list tbody tr:first-child td { padding-top: 30px !important; } .tp-cart-img { width: 78px; margin-right: 20px; } .tp-cart-img img { width: 78px; height: 100px; object-fit: cover; border-radius: 6px; } .tp-cart-title a { margin-left: 20px; font-weight: 400; font-size: 16px; color: var(--tp-common-black); font-family: var(--tp-ff-dm); } .tp-cart-title a:hover { color: var(--tp-theme-secondary); } .tp-cart-price { width: 126px; } .tp-cart-price span { font-size: 16px; color: var(--tp-common-black); font-family: var(--tp-ff-dm); } .tp-cart-quantity { width: 180px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-cart-coupon { margin-bottom: 20px; } } .tp-cart-coupon-input-box label { font-size: 14px; color: var(--tp-common-black); margin-bottom: 7px; font-family: var(--tp-ff-dm); } .tp-cart-coupon-input input { background: var(--tp-grey-5); margin-right: 4px; max-width: 282px; font-size: 14px; padding-left: 26px; padding-right: 26px; border-radius: 0; color: var(--tp-common-black); border: 1px solid transparent; text-transform: capitalize; font-family: var(--tp-ff-dm); border-radius: 50px; } .tp-cart-coupon-input input::-webkit-input-placeholder { /* Chrome/Opera/Safari */ font-size: 14px; text-transform: capitalize; color: rgba(0, 0, 0, 0.4); } .tp-cart-coupon-input input::-moz-placeholder { /* Firefox 19+ */ font-size: 14px; text-transform: capitalize; color: rgba(0, 0, 0, 0.4); } .tp-cart-coupon-input input:-moz-placeholder { /* Firefox 4-18 */ font-size: 14px; text-transform: capitalize; color: rgba(0, 0, 0, 0.4); } .tp-cart-coupon-input input:-ms-input-placeholder { /* IE 10+ Edge*/ font-size: 14px; text-transform: capitalize; color: rgba(0, 0, 0, 0.4); } .tp-cart-coupon-input input::placeholder { /* MODERN BROWSER */ font-size: 14px; text-transform: capitalize; color: rgba(0, 0, 0, 0.4); } .tp-cart-coupon-input input:focus { border-color: var(--tp-common-black); background-color: transparent; } .tp-cart-coupon-input button { font-size: 16px; font-weight: 500; padding: 13px 30px; color: var(--tp-common-white); background-color: var(--tp-common-black); font-family: var(--tp-ff-dm); border-radius: 50px; } .tp-cart-coupon-input button:hover { color: var(--tp-common-white); background-color: var(--tp-theme-secondary); } .tp-cart-update-btn { font-size: 16px; font-weight: 500; padding: 13px 29px; color: var(--tp-common-black); border: 1px solid var(--tp-border-1); font-family: var(--tp-ff-dm); border-radius: 50px; } .tp-cart-update-btn:hover { color: var(--tp-common-white); background-color: var(--tp-theme-secondary); border-color: var(--tp-theme-secondary); } .tp-cart-checkout-wrapper { margin-left: -24px; padding: 36px 24px 28px; background: var(--tp-common-white); box-shadow: 0px 30px 70px rgba(1, 15, 28, 0.1); border-radius: 12px; } @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-cart-checkout-wrapper { margin-top: 50px; margin-left: 0; } } .tp-cart-checkout-top { padding-bottom: 13px; margin-bottom: 19px; border-bottom: 1px solid var(--tp-border-1); } .tp-cart-checkout-top span { font-size: 20px; color: var(--tp-common-black); font-weight: 500; font-family: var(--tp-ff-dm); } .tp-cart-checkout-shipping { padding-bottom: 16px; border-bottom: 1px solid var(--tp-border-1); margin-bottom: 15px; } .tp-cart-checkout-shipping-title { font-weight: 500; font-size: 15px; margin-bottom: 7px; } .tp-cart-checkout-shipping-option:not(:last-child) { margin-bottom: 4px; } .tp-cart-checkout-shipping-option input { display: none; } .tp-cart-checkout-shipping-option input:checked + label::after { border-color: var(--tp-common-black); } .tp-cart-checkout-shipping-option input:checked + label::before { opacity: 1; visibility: visible; } .tp-cart-checkout-shipping-option label { font-weight: 400; font-size: 14px; color: #161C2D; position: relative; padding-left: 25px; font-family: var(--tp-ff-dm); } .tp-cart-checkout-shipping-option label:hover { cursor: pointer; } .tp-cart-checkout-shipping-option label span { color: var(--tp-common-black); } .tp-cart-checkout-shipping-option label::after { position: absolute; content: ""; left: 0; top: 5px; width: 16px; height: 16px; border-radius: 50%; border: 1px solid #BCBCBC; transition: all 0.4s ease; } .tp-cart-checkout-shipping-option label::before { position: absolute; content: ""; left: 4px; top: 9px; width: 8px; height: 8px; border-radius: 50%; background-color: var(--tp-common-black); visibility: hidden; opacity: 0; transition: all 0.4s ease; } .tp-cart-checkout-total { margin-bottom: 25px; } .tp-cart-checkout-total span { font-weight: 500; font-size: 18px; color: var(--tp-common-black); font-family: var(--tp-ff-dm); } .tp-cart-checkout-btn { font-size: 16px; font-weight: 500; padding: 10px 30px; text-align: center; display: inline-block; color: var(--tp-common-white); background-color: var(--tp-common-black); font-family: var(--tp-ff-dm); border-radius: 50px; } .tp-cart-checkout-btn:hover { background-color: var(--tp-theme-secondary); color: var(--tp-common-white); } .cartmini-black { background: var(--tp-common-black); } .cartmini-black .cartmini__top-title h4 { color: var(--tp-common-white); } .cartmini-black .cartmini__top-title { border-bottom: 1px solid var(--tp-border-3); } .cartmini-black .cartmini__shipping p { color: var(--tp-grey-2); } .cartmini-black .progress { --bs-progress-bg: #1A1B1E; } .cartmini-black .cartmini__title { color: var(--tp-common-white); } .cartmini-black .cartmini__price { color: var(--tp-common-white); } .cartmini-black .cartmini__quantity { color: var(--tp-common-white); } .cartmini-black .cartmini__widget-item { border-color: var(--tp-border-3); } .cartmini-black .cartmini__checkout { border-color: var(--tp-border-3); } .cartmini-black .cartmini__shipping { border-color: var(--tp-border-3); } /*----------------------------------------*/ /* 7.28 skill css start /*----------------------------------------*/ .tp-snap-slide { width: 100%; height: 100vh; height: 100dvh; position: relative; overflow: hidden; display: flex; justify-content: center; align-items: center; background-color: #000; } .tp-snap-slide .img-mask { width: 100%; height: 100%; display: block; position: relative; top: 0; left: 0; opacity: 0.1; } .tp-snap-slide .img-mask .section-image { height: 100%; object-fit: cover; width: 100%; } .tp-snap-slide .img-mask .section-image img { height: 100%; width: 100%; object-fit: cover; } .tp-snap-slide-bigtext { font-family: var(--tp-ff-jakarta); font-weight: 700; font-size: 200px; line-height: 50%; letter-spacing: -0.08em; text-transform: capitalize; color: var(--tp-grey-5); opacity: 0.2; position: absolute; margin-bottom: 0; bottom: -10px; right: 60px; } @media (max-width: 574.98px) { .tp-snap-slide-bigtext { font-size: 100px; bottom: 0; } } .tp-snap-slide-caption { position: relative; display: flex; justify-content: space-between; margin: 0; text-align: left; width: 100%; height: auto; box-sizing: border-box; padding: 0; opacity: 1; -webkit-transition: opacity 0.2s ease-in-out; transition: opacity 0.2s ease-in-out; } .tp-snap-slider-thumbs { position: absolute; top: 0; z-index: 5; box-sizing: border-box; width: 100%; height: 100vh; height: 100dvh; overflow: hidden; display: flex; justify-content: center; align-items: center; } .tp-snap-slider-thumbs-wrapper { width: 20vw; height: 20vw; display: block; position: relative; overflow: hidden; border-radius: 24px; } .tp-snap-slider-thumbs-wrapper .thumb-slide { position: relative; width: 100%; height: 100%; overflow: hidden; cursor: pointer; } .tp-snap-slider-thumbs-wrapper .thumb-slide-img { position: relative; width: 100%; height: 100%; overflow: hidden; display: block; } .tp-snap-slider-captions { position: absolute; top: 0; z-index: 0; box-sizing: border-box; width: 100%; height: 100vh; height: 100dvh; overflow: hidden; display: flex; justify-content: flex-start; align-items: center; pointer-events: 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-snap-slider-captions { align-items: flex-end; } } .tp-snap-slider-captions-wrapper { width: 100%; height: 80px; display: block; position: relative; overflow: hidden; mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 15%, black 20%, black 80%, rgba(0, 0, 0, 0) 85%, rgba(0, 0, 0, 0) 100%); -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 15%, black 20%, black 80%, rgba(0, 0, 0, 0) 85%, rgba(0, 0, 0, 0) 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) { .tp-snap-slider-captions-wrapper { height: 70px; } } @media (max-width: 574.98px) { .tp-snap-slider-captions-wrapper { height: 40px; } } .tp-snap-slider-captions .slide-title { font-family: var(--tp-ff-jakarta); font-weight: 700; font-size: 52px; line-height: 1.4; letter-spacing: -0.04em; text-transform: capitalize; color: var(--tp-grey-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) { .tp-snap-slider-captions .slide-title { font-size: 22px; width: 100%; line-height: 2; } } @media (max-width: 574.98px) { .tp-snap-slider-captions .slide-title { font-size: 16px; width: 70%; } } @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-snap-slider-captions .slide-subtitle { width: 100%; justify-content: end; } } .tp-snap-slider-captions .slide-subtitle span { font-family: var(--tp-ff-dm); font-weight: 700; font-size: 20px; letter-spacing: -0.04em; text-transform: capitalize; color: var(--tp-grey-5); margin-left: 5px; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 50px; line-height: 1; padding: 10px 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-snap-slider-captions .slide-subtitle span { border: none; padding: 5px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-snap-slider-captions .slide-subtitle span { font-size: 15px; margin-left: 0; } } @media (max-width: 574.98px) { .tp-snap-slider-captions .slide-subtitle span { font-size: 14px; } .tp-snap-slider-captions .slide-subtitle span:first-child { display: none; } } .tp-snap-slider-captions .content-full-width { padding-left: 60px; padding-right: 60px; max-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-snap-slider-captions .content-full-width { padding-left: 20px; padding-right: 20px; } } /*-------------------------------------------------- 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.22 pricing css start /*----------------------------------------*/ .tp-pricing-ai-item { border: 2px solid rgba(17, 17, 18, 0.05); backdrop-filter: blur(500px); padding: 85px 25px 83px 48px; margin-left: -34px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .tp-pricing-ai-item { margin-left: -73px; } } @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-pricing-ai-item { margin-left: 0; } } @media (max-width: 574.98px) { .tp-pricing-ai-item { padding: 45px 5px 43px 18px; } } @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-pricing-ai-list { 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-pricing-ai-list { margin-left: 0; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-pricing-ai-list { margin-bottom: 20px; } } .tp-pricing-ai-list ul li { font-family: var(--tp-ff-dm); font-weight: 400; font-size: 16px; letter-spacing: -0.02em; color: var(--tp-common-black-5); list-style: none; position: relative; padding-left: 12px; } .tp-pricing-ai-list ul li:not(:last-child) { margin-bottom: 14px; } .tp-pricing-ai-list ul li::before { position: absolute; content: ""; width: 5px; height: 5px; background: var(--tp-common-black-5); border-radius: 50%; top: 50%; transform: translateY(-50%); left: 0; } .tp-pricing-ai-price span { font-size: 16px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .tp-pricing-ai-title-wrap { margin-right: 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-pricing-ai-title-wrap { margin-right: 0; } } .tp-pricing-2-spacing { padding-top: 236px; } @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-pricing-2-spacing { padding-top: 170px; } } /*----------------------------------------*/ /* 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.19 Login Css /*----------------------------------------*/ .tp-login-wrapper { padding: 50px 74px 70px; background: var(--tp-common-white); box-shadow: 0px 30px 60px rgba(3, 4, 28, 0.1); } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .tp-login-wrapper { padding: 50px 50px 70px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-login-wrapper { padding-left: 20px; padding-right: 20px; } } @media (max-width: 574.98px) { .tp-login-area { padding-top: 130px !important; } } .tp-login-title { font-weight: 500; font-size: 30px; margin-bottom: 4px; font-family: var(--tp-ff-dm); } .tp-login-top p { font-size: 16px; font-weight: 400; color: #49535B; font-family: var(--tp-ff-dm); } .tp-login-top p a { position: relative; display: inline-block; color: var(--tp-common-black); } .tp-login-top p a:hover::after { left: 0; right: auto; width: 100%; } .tp-login-top p a::after { position: absolute; content: ""; left: auto; right: 0; bottom: 4px; width: 0%; height: 1px; background-color: var(--tp-common-black); transition: 0.3s; } .tp-login-option-item { margin-bottom: 10px; } .tp-login-option-item:not(:last-child) { margin-right: 10px; } .tp-login-option-item a { font-size: 16px; color: #041226; width: 98px; height: 56px; line-height: 54px; text-align: center; border-radius: 8px; display: inline-block; font-family: var(--tp-ff-dm); backdrop-filter: blur(10px); border: 1px solid rgba(198, 198, 198, 0.4); } .tp-login-option-item a:hover { border-color: rgba(77, 61, 48, 0.2); } .tp-login-option-item a img { -webkit-transform: translateY(-2px); -moz-transform: translateY(-2px); -ms-transform: translateY(-2px); -o-transform: translateY(-2px); transform: translateY(-2px); } .tp-login-option-item a img.apple { -webkit-transform: translateY(-3px); -moz-transform: translateY(-3px); -ms-transform: translateY(-3px); -o-transform: translateY(-3px); transform: translateY(-3px); } .tp-login-option-item.has-google a { width: 220px; } .tp-login-option-item.has-google a img { margin-right: 7px; } .tp-login-mail { position: relative; z-index: 1; } .tp-login-mail::after { position: absolute; content: ""; left: 0; right: 0; bottom: 12px; width: 100%; height: 1px; z-index: -1; transition: 0.3s; background-color: #C6C6C6; } .tp-login-mail p { font-size: 15px; color: #55585B; margin-bottom: 0; padding: 0 20px; position: relative; display: inline-block; background-color: #fff; font-family: var(--tp-ff-dm); } .tp-login-mail p a { color: var(--tp-common-black); } .tp-login-mail p a:hover { color: var(--tp-common-black); } .tp-login-input input { font-size: 14px; border: 1px solid transparent; color: var(--tp-common-black); background-color: transparent; border: 1px solid #EAEAEF; font-family: var(--tp-ff-dm); } .tp-login-input input:focus { border-color: var(--tp-common-black); } .tp-login-input input::-webkit-input-placeholder { /* Chrome/Opera/Safari */ color: #84848B; } .tp-login-input input::-moz-placeholder { /* Firefox 19+ */ color: #84848B; } .tp-login-input input:-moz-placeholder { /* Firefox 4-18 */ color: #84848B; } .tp-login-input input:-ms-input-placeholder { /* IE 10+ Edge*/ color: #84848B; } .tp-login-input input::placeholder { /* MODERN BROWSER */ color: #84848B; } .tp-login-input-wrapper { margin-bottom: 20px; } .tp-login-input-box { position: relative; } .tp-login-input-box:not(:last-child) { margin-bottom: 15px; } .tp-login-input-title label { font-size: 16px; padding: 0 5px; line-height: 1; font-weight: 500; margin-bottom: 10px; color: var(--tp-common-black); font-family: var(--tp-ff-dm); } .tp-login-input-eye { position: absolute; right: 26px; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } .tp-login-input-eye:hover { cursor: pointer; } .tp-login-input-eye:hover span { color: var(--tp-common-black); } .tp-login-input-eye .open-eye { display: none; } .tp-login-input-eye span { transition: 0.3s; } .tp-login-remeber input { display: none; } .tp-login-remeber input:checked ~ label::after { border-color: var(--tp-common-black); background-color: var(--tp-common-black); } .tp-login-remeber input:checked ~ label::before { visibility: visible; opacity: 1; } .tp-login-remeber label { font-size: 15px; position: relative; padding-left: 26px; z-index: 1; color: var(--tp-common-black); font-family: var(--tp-ff-dm); } .tp-login-remeber label:hover { cursor: pointer; } .tp-login-remeber label::after { position: absolute; content: ""; top: 4px; left: 0; width: 18px; height: 18px; line-height: 16px; text-align: center; border: 1px solid #C3C7C9; z-index: -1; transition: 0.3s; } .tp-login-remeber label::before { position: absolute; content: url("../img/login/check.svg"); top: 4px; left: 0; width: 18px; height: 18px; line-height: 16px; text-align: center; visibility: hidden; opacity: 0; color: var(--tp-common-white); transition: 0.3s; } .tp-login-remeber label a:hover { color: var(--tp-theme-primary); } .tp-login-forgot a { font-weight: 400; font-size: 15px; color: var(--tp-common-black); position: relative; display: inline-block; font-family: var(--tp-ff-dm); } .tp-login-forgot a:hover::after { left: 0; right: auto; width: 100%; } .tp-login-forgot a::after { position: absolute; content: ""; left: auto; right: 0; bottom: 4px; width: 0%; height: 1px; background-color: var(--tp-common-black); transition: 0.3s; } .tp-login-btn { font-size: 16px; font-weight: 500; padding: 14px 30px; text-align: center; border-radius: 8px; display: inline-block; color: var(--tp-common-white); border: 1px solid var(--tp-common-black); background-color: var(--tp-common-black); font-family: var(--tp-ff-dm); } .tp-login-btn:hover { color: var(--tp-common-black); background-color: transparent; } /*----------------------------------------*/ /* 7.25 profile css start /*----------------------------------------*/ @media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px), only screen and (min-width: 576px) and (max-width: 767px) { .profile__tab { margin-right: 0; margin-bottom: 50px; } } .profile__tab nav .nav-tabs { padding: 0; border: 0; margin: 0; padding: 20px 0; border: 1px solid #E0E2E3; background-color: var(--tp-common-white); } .profile__tab nav .nav-tabs .nav-link { font-weight: 400; font-size: 16px; padding: 14px 0px; margin: 0px 30px; position: relative; border-radius: 0; text-align: left; border: 0; color: #5D5D63; font-family: var(--tp-ff-dm); } .profile__tab nav .nav-tabs .nav-link::after { position: absolute; top: 14px; left: -31px; height: 25px; width: 2px; content: ""; transition: 0.4s; opacity: 0; visibility: hidden; background-color: var(--tp-common-black); } .profile__tab nav .nav-tabs .nav-link:not(:last-child) { border-bottom: 1px dashed #E0E2E3; } .profile__tab nav .nav-tabs .nav-link span { margin-right: 7px; } .profile__tab nav .nav-tabs .nav-link.active { color: var(--tp-common-black); } .profile__tab nav .nav-tabs .nav-link.active::after { opacity: 1; visibility: visible; } .profile__tab .tp-tab-menu { position: relative; } .profile__tab-content { padding: 35px 40px 40px; background: var(--tp-common-white); box-shadow: 0px 30px 60px rgba(3, 4, 28, 0.1); } .profile__info-title { font-size: 20px; margin-bottom: 25px; font-family: var(--tp-ff-dm); } .profile__input { margin-bottom: 25px; position: relative; } .profile__input-box h4 { font-weight: 500; font-size: 14px; letter-spacing: -0.02em; color: var(--tp-common-black-solid); margin-bottom: 10px; } .profile__input-box h4 span { color: var(--tp-theme-primary); } .profile__input-box p { font-size: 13px; color: var(--tp-common-white); opacity: 0.7; margin-bottom: 10px; } .profile__input > span { position: absolute; top: 50%; left: 20px; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } .profile__input > span svg { -webkit-transform: translateY(-2px); -moz-transform: translateY(-2px); -ms-transform: translateY(-2px); -o-transform: translateY(-2px); transform: translateY(-2px); } .profile__input input, .profile__input textarea { width: 100%; height: 60px; line-height: 60px; padding: 0 25px; padding-left: 50px; border: 0; outline: 0; background: transparent; font-size: 14px; color: var(--tp-common-black); border: 1px solid #EAEAEF; font-family: var(--tp-ff-dm); } .profile__input input:focus, .profile__input textarea:focus { background-color: transparent; border-color: var(--tp-common-black); } .profile__input textarea { line-height: 1.5; padding: 20px; resize: none; height: 200px; resize: none; } .profile__input .nice-select { width: 100%; float: none; height: 60px; border: 1px solid #EAEAEF; border-radius: 0; line-height: 58px; padding-left: 27px; border-radius: 4px; } .profile__input .nice-select .current { color: var(--tp-common-black); font-family: var(--tp-ff-dm); } .profile__input .nice-select::after { right: 25px; color: var(--tp-common-black); } .profile__input .nice-select.open .list { -webkit-transform: scale(1) translateY(0px); -moz-transform: scale(1) translateY(0px); -ms-transform: scale(1) translateY(0px); -o-transform: scale(1) translateY(0px); transform: scale(1) translateY(0px); } .profile__input .nice-select .list { width: 100%; border-radius: 0; margin-top: 0; padding: 13px 8px; transform-origin: center center; -webkit-transform: scale(0.9) translateY(0px); -moz-transform: scale(0.9) translateY(0px); -ms-transform: scale(0.9) translateY(0px); -o-transform: scale(0.9) translateY(0px); transform: scale(0.9) translateY(0px); font-family: var(--tp-ff-dm); } .profile__input .nice-select .list .option:hover { color: var(--tp-common-black); } .profile__password input { padding: 0 20px; background-color: transparent; border: 1px solid #EAEAEF; font-family: var(--tp-ff-dm); } .profile__password input:focus { border-color: var(--tp-common-black); } .profile__password input::-webkit-input-placeholder { /* Chrome/Opera/Safari */ color: #84848B; } .profile__password input::-moz-placeholder { /* Firefox 19+ */ color: #84848B; } .profile__password input:-moz-placeholder { /* Firefox 4-18 */ color: #84848B; } .profile__password input:-ms-input-placeholder { /* IE 10+ Edge*/ color: #84848B; } .profile__password input::placeholder { /* MODERN BROWSER */ color: #84848B; } .profile__ticket { border: 1px solid #E0E2E3; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 767px) { .profile__ticket { overflow-x: scroll; } } .profile__ticket table thead tr { background-color: transparent; } .profile__ticket table th { color: var(--tp-common-black); border-color: #E0E2E3; box-shadow: none; font-family: var(--tp-ff-dm); } .profile__ticket table td { color: var(--tp-common-black); } .profile__ticket table tbody > tr:first-child { background-color: transparent; } .profile__ticket table tbody > tr:not(:last-child) { border-bottom: 1px solid #E0E2E3; } .profile__ticket table tbody > tr td, .profile__ticket table tbody > tr th { vertical-align: middle; color: var(--tp-common-black); font-family: var(--tp-ff-dm); } .profile__ticket table tbody > tr > th { padding-left: 15px; padding-right: 15px; } .profile__ticket table tbody > tr th[scope=row] { color: var(--tp-common-black); } .profile__ticket table tbody > tr td[data-info="status done"] { color: #08AF5C; } .profile__ticket table tbody > tr td[data-info="status pending"] { color: #6364DB; } .profile__ticket table tbody > tr td[data-info="status reply"] { color: #D93D1E; } .profile__ticket table tbody > tr td[data-info="status hold"] { color: #FFB422; } .profile__ticket table tbody > tr .tp-btn { padding: 7px 18px; background-color: #E0E2E3; color: var(--tp-common-black); font-weight: 500; min-width: 90px; } .profile__ticket table tbody > tr .tp-btn:hover { color: var(--tp-common-white); background-color: var(--tp-common-black); } .profile__ticket .table { margin-bottom: 0; --bs-table-bg: none; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 767px) { .profile__ticket .table { width: 700px; } } .profile__ticket .table > :not(:first-child) { border-color: #EAEAEF; border-top-width: 1px; } .profile__ticket .table > :not(caption) > * > * { padding: 1rem 1.5rem; border: 0; box-shadow: none; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 767px) { .profile__address-item { margin-bottom: 40px; } } .profile__address-title { font-size: 22px; margin-bottom: 20px; font-family: var(--tp-ff-dm); } .profile__address-icon span { display: inline-block; min-width: 45px; margin-right: 20px; } @media (max-width: 767px) { .profile__address-icon span { margin-bottom: 20px; } } .profile__address-icon span svg { width: 45px; } .profile__address-icon span svg path { fill: var(--tp-common-black); } .profile__address-content p { font-size: 16px; margin-bottom: 10px; font-family: var(--tp-ff-dm); } .profile__address-content p span { font-weight: 600; margin-right: 7px; color: var(--tp-common-black); } .profile__notification-title { font-size: 24px; margin-bottom: 10px; color: var(--tp-common-black); font-family: var(--tp-ff-dm); } .profile__notification p { font-family: var(--tp-ff-dm); } .profile__notification-item .form-check-input { margin-top: 0; width: 40px; height: 20px; box-shadow: none; } .profile__notification-item .form-check-label { font-size: 16px; margin-left: 10px; color: var(--tp-common-black); font-family: var(--tp-ff-dm); } .profile__notification-item .form-check-label:hover { cursor: pointer; color: var(--tp-common-black); } .profile__notification-item .form-check-input:checked { background-color: var(--tp-common-black); border-color: var(--tp-common-black); } .profile__btn .tp-btn { padding: 14px 39px; border: 1px solid #EAEAEF; } .profile__btn .tp-btn-cart { font-size: 16px; font-weight: 500; height: 50px; line-height: 45px; padding: 0px 30px; transition: 0.3s; display: inline-block; text-align: center; border-radius: 8px; text-transform: capitalize; color: var(--tp-common-white); font-family: var(--tp-ff-dm); background-color: var(--tp-common-black); border: 2px solid transparent; } .profile__btn .tp-btn-cart:hover { border-color: #4D3D30; color: var(--tp-common-black); background-color: transparent; } @media (max-width: 767px) { .profile__main-inner { margin-bottom: 20px; } } .profile__main-thumb { position: relative; } .profile__main-thumb img { width: 80px; height: 80px; border-radius: 50%; margin-right: 16px; } @media (max-width: 767px) { .profile__main-thumb img { margin-bottom: 20px; } } .profile__main-thumb-edit input { display: none; } .profile__main-thumb-edit label { position: absolute; bottom: 2px; right: 12px; width: 25px; height: 25px; line-height: 25px; text-align: center; color: var(--tp-common-black); background-color: #fff; border-radius: 50%; transition: 0.3s; box-shadow: 0px 1px 2px rgba(25, 25, 26, 0.2); } .profile__main-thumb-edit label i { margin-left: 2px; } .profile__main-thumb-edit label:hover { cursor: pointer; color: var(--tp-common-white); background-color: #4d3d30; } .profile__main-title { font-size: 24px; margin-bottom: 0; font-family: var(--tp-ff-dm); } .profile__main-content p { font-size: 14px; margin-bottom: 0; font-family: var(--tp-ff-dm); } .profile__main-content p span { color: var(--tp-common-black); font-weight: 500; } .profile__main-info-item { text-align: center; padding: 27px 30px 25px; border: 1px solid #EAEAEF; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 767px) { .profile__main-info-item { margin-bottom: 25px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .profile__main-info-item { padding: 22px 0 20px; } } .profile__main-info-icon { position: relative; margin-bottom: 15px; } .profile__main-info-icon > span { position: relative; display: inline-block; width: 60px; height: 60px; line-height: 60px; text-align: center; } .profile__main-info-icon > span svg { width: 60px; } .profile__main-info-icon > span svg path { fill: var(--tp-common-black); } .profile__main-info-icon .profile-icon-count { position: absolute; top: 2px; right: -8px; width: 26px; height: 26px; line-height: 21px; border-radius: 50%; font-size: 12px; font-weight: 600; border: 2px solid #fff; color: var(--tp-common-white); font-family: var(--tp-ff-dm); background-color: var(--tp-common-black); } .profile__main-info-title { font-size: 18px; margin-bottom: 0; font-family: var(--tp-ff-dm); } .tp-logout-btn { font-size: 14px; font-weight: 500; padding: 6px 18px; text-align: center; display: inline-block; color: var(--tp-common-black); font-family: var(--tp-ff-dm); border: 1px solid rgba(2, 6, 38, 0.12); } .tp-logout-btn:hover { color: var(--tp-common-white); border-color: var(--tp-common-black); background-color: var(--tp-common-black); } .tp-profile-input-wrapper { margin-bottom: 8px; } .tp-profile-input-box { position: relative; margin-bottom: 30px; } .tp-profile-input input { background: transparent; font-size: 14px; color: var(--tp-common-black); border: 1px solid #EAEAEF; font-family: var(--tp-ff-dm); } .tp-profile-input input:focus { border-color: var(--tp-common-black); } .tp-profile-input input::-webkit-input-placeholder { /* Chrome/Opera/Safari */ color: #84848B; } .tp-profile-input input::-moz-placeholder { /* Firefox 19+ */ color: #84848B; } .tp-profile-input input:-moz-placeholder { /* Firefox 4-18 */ color: #84848B; } .tp-profile-input input:-ms-input-placeholder { /* IE 10+ Edge*/ color: #84848B; } .tp-profile-input input::placeholder { /* MODERN BROWSER */ color: #84848B; } .tp-profile-input input::-webkit-input-placeholder { /* Chrome/Opera/Safari */ color: #95999D; } .tp-profile-input input::-moz-placeholder { /* Firefox 19+ */ color: #95999D; } .tp-profile-input input:-moz-placeholder { /* Firefox 4-18 */ color: #95999D; } .tp-profile-input input:-ms-input-placeholder { /* IE 10+ Edge*/ color: #95999D; } .tp-profile-input input::placeholder { /* MODERN BROWSER */ color: #95999D; } .tp-profile-input textarea { height: 165px; resize: none; } .tp-profile-input-title label { font-size: 16px; padding: 0 5px; line-height: 1; font-weight: 500; margin-bottom: 12px; display: inline-block; color: var(--tp-common-black); font-family: var(--tp-ff-dm); } .tp-profile-input-eye { top: 50%; right: 26px; position: absolute; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } .tp-profile-input-eye .open-eye { display: none; } .tp-profile-input-eye span { transition: 0.3s; } .tp-profile-input-eye:hover { cursor: pointer; } .tp-profile-input-eye:hover span { color: var(--tp-common-black); } /*----------------------------------------*/ /* 2.6 Nice Select /*----------------------------------------*/ .custom-select { position: relative; width: 200px; border: 1px solid #ccc; cursor: pointer; } .custom-select .selected { display: flex; justify-content: space-between; align-items: center; padding: 10px; background: #fff; } .custom-select .selected.open .arrow { transform: rotate(-135deg); } .custom-select .selected.open + .options { max-height: 500px; opacity: 1; } .custom-select .selected .arrow { display: inline-block; width: 8px; height: 8px; border: solid #333; border-width: 0 1px 1px 0; transform: rotate(45deg); transition: transform 0.3s ease; } .custom-select .options { position: absolute; top: 100%; left: 0; width: 100%; background: #fff; border: 1px solid #ccc; max-height: 0; overflow: hidden; opacity: 0; z-index: 100; transition: max-height 0.3s ease, opacity 0.3s ease; } .custom-select .options li { padding: 10px; cursor: pointer; list-style: none; transition: background 0.2s ease; } .custom-select .options li:hover { background: #f0f0f0; } /*----------------------------------------*/ /* 7.24 product css start /*----------------------------------------*/ .tp-product-item:hover .tp-product-thumb img { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); } .tp-product-item:hover .tp-product-action { right: 20px; visibility: visible; opacity: 1; } .tp-product-item:hover .tp-product-add-cart-btn-large-wrapper { bottom: 15px; visibility: visible; opacity: 1; } .tp-product-thumb { border-radius: 10px; } .tp-product-thumb img { transition: all 0.3s 0s ease-out; border-radius: 10px; } .tp-product-action { position: absolute; top: 20px; right: 0; bottom: auto; z-index: 1; visibility: hidden; opacity: 0; transition: all 0.4s ease; } @media (max-width: 574.98px) { .tp-product-action { top: 30px; } } .tp-product-action-btn { position: relative; display: inline-block; height: 40px; width: 40px; line-height: 40px; background: var(--tp-common-white); border: 1px solid #DFE0E1; box-shadow: 0px 1px 1px rgba(1, 15, 28, 0.1); margin-bottom: 4px; border-radius: 50px; } .tp-product-action-btn:last-child { margin-bottom: 0; } .tp-product-action-btn svg { transform: translateY(-2px); } .tp-product-action-btn .tp-product-tooltip { font-weight: 600; font-size: 12px; color: var(--tp-common-white); } .tp-product-action-btn:hover { color: var(--tp-common-white); border-color: var(--tp-common-black); background: var(--tp-common-black); box-shadow: 0px 1px 1px rgba(1, 15, 28, 0.1); } .tp-product-action-btn:hover .tp-product-tooltip { visibility: visible; opacity: 1; -webkit-transform: translateX(-8px) translateY(-50%); -moz-transform: translateX(-8px) translateY(-50%); -ms-transform: translateX(-8px) translateY(-50%); -o-transform: translateX(-8px) translateY(-50%); transform: translateX(-8px) translateY(-50%); } .tp-product-tooltip { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); right: 100%; font-weight: 500; font-size: 12px; color: var(--tp-common-white); background-color: var(--tp-common-black); display: inline-block; width: max-content; line-height: 1; padding: 4px 6px; border-radius: 4px; visibility: hidden; opacity: 0; z-index: 1; transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s cubic-bezier(0.71, 1.7, 0.77, 1.24), -webkit-transform 0.3s cubic-bezier(0.71, 1.7, 0.77, 1.24); font-family: var(--tp-ff-dm); } .tp-product-tooltip::before { position: absolute; content: ""; right: -4px; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); width: 0; height: 0; border-top: 8px solid transparent; border-left: 8px solid var(--tp-common-black); border-bottom: 8px solid transparent; } .tp-product-tooltip-right { left: 100%; right: auto; } .tp-product-tooltip-right::before { left: -4px; right: auto; border-left: 0; border-right: 8px solid var(--tp-common-black); } .tp-product-add-cart-btn-large { font-size: 18px; color: var(--tp-common-black); background-color: var(--tp-common-white); text-transform: capitalize; font-size: 14px; font-weight: 700; display: inline-block; width: 100%; padding: 8px 30px; font-family: var(--tp-ff-dm); border-radius: 50px; width: 90%; } .tp-product-add-cart-btn-large-wrapper { position: absolute; bottom: -40px; left: 0; right: 0; width: 100%; visibility: hidden; opacity: 0; transition: all 0.4s ease; text-align: center; } .tp-product-add-cart-btn-large svg, .tp-product-add-cart-btn-large i { margin-right: 5px; } .tp-product-add-cart-btn-large svg { transform: translateY(-2px); } .tp-product-add-cart-btn-large:hover { color: var(--tp-common-white); background-color: var(--tp-theme-secondary); } .tp-product-title { font-weight: 500; font-size: 20px; margin-bottom: 4px; font-family: var(--tp-ff-dm); } .tp-product-title a:hover { color: var(--tp-theme-secondary); } .tp-product-price { font-weight: 500; font-size: 16px; color: var(--tp-common-black); font-family: var(--tp-ff-dm); } .tp-product-price.old-price { font-weight: 400; font-size: 14px; text-decoration-line: line-through; color: var(--tp-body-color); } .tp-product-badge { position: absolute; top: 20px; left: 20px; z-index: 1; } .tp-product-badge span { display: inline-block; padding: 4px 10px; text-align: center; background-color: #F0A750; border-radius: 50px; color: var(--tp-common-white); font-weight: 500; font-size: 13px; letter-spacing: -0.02em; line-height: 1; } .tp-product-badge span.on-sale { background: #F03E3E; } .tp-product-hero { padding-top: 250px; padding-bottom: 155px; } @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-product-hero { padding-top: 160px; padding-bottom: 110px; } } .tp-product-top-select .tp-select { background-color: var(--tp-common-white); border-radius: 5px; border: solid 1px var(--tp-border-1); font-size: 16px; height: 50px; line-height: 48px; padding-right: 60px; font-family: var(--tp-ff-dm); } .tp-product-top-select .tp-select:after { color: var(--tp-common-black); } .tp-product-top-select .tp-select .current { color: #000; } .tp-product-top-select .tp-select .option { color: #000; } @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-product-details-wrapper { margin-top: 50px; } } .tp-product-details-sort-desc p { font-size: 15px; line-height: 1.7; font-family: var(--tp-ff-dm); } @media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 574.98px) { .tp-product-details-sort-desc p br { display: none; } } .tp-product-details-sort-desc p span { font-weight: 500; color: var(--tp-common-black); } .tp-product-details-nav-main-thumb { position: relative; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-product-details-nav-main-thumb { margin-bottom: 20px; } } .tp-product-details-nav-main-thumb img { border-radius: 20px; } .tp-product-details-thumb-wrapper { margin-right: 70px; } @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-product-details-thumb-wrapper { margin-right: 0; } } .tp-product-details-thumb-wrapper .tab-content { margin-right: 24px; } @media (max-width: 574.98px) { .tp-product-details-thumb-wrapper .tab-content { margin-right: 0; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .tp-product-details-thumb-wrapper .tab-content { margin-right: 15px; } } .tp-product-details-thumb-wrapper .nav-tab .nav-links { padding: 0; width: 100px; height: 120px; border-radius: 0; position: relative; transition: 0.3s; border: 1px solid transparent; border-radius: 6px; } .tp-product-details-thumb-wrapper .nav-tab .nav-links.active { border: 1px solid var(--tp-common-black); } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-product-details-thumb-wrapper .nav-tab .nav-links { margin-right: 10px; margin-bottom: 10px; } } .tp-product-details-thumb-wrapper .nav-tab .nav-links:not(:last-child) { margin-bottom: 10px; } .tp-product-details-thumb-wrapper .nav-tab .nav-links:hover { border-color: var(--tp-common-black); } .tp-product-details-thumb-wrapper .nav-tab .nav-links img { width: 100%; height: 100%; object-fit: cover; border-radius: 6px; } .tp-product-details-thumb-wrapper nav { padding-top: 140px; } @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-product-details-thumb-wrapper nav { padding-top: 0; } } .tp-product-details-category span { font-size: 15px; line-height: 1; color: var(--tp-grey-1); font-family: var(--tp-ff-dm); } .tp-product-details-title { font-size: 32px; font-weight: 600; line-height: 1; color: var(--tp-common-black); margin-bottom: 15px; font-family: var(--tp-ff-dm); } .tp-product-details-stock { margin-right: 12px; } .tp-product-details-stock span { font-size: 15px; line-height: 1; padding: 4px 12px 4px 12px; display: inline-block; color: var(--tp-common-white); background-color: var(--tp-common-black); border-radius: 50px; font-family: var(--tp-ff-dm); } .tp-product-details-rating { margin-right: 11px; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; } .tp-product-details-rating span { font-size: 12px; color: #FFB21D; } .tp-product-details-rating span:not(:last-child) { margin-right: 3px; } .tp-product-details-reviews span { font-family: var(--tp-ff-dm); } .tp-product-details-price { font-size: 24px; font-weight: 600; color: var(--tp-common-black); letter-spacing: -0.02em; font-family: var(--tp-ff-dm); } .tp-product-details-price.new-price { color: var(--tp-common-black); } .tp-product-details-price.old-price { font-weight: 400; font-size: 16px; color: rgba(77, 61, 48, 0.6); text-decoration-line: line-through; } .tp-product-details-variation { margin-bottom: 30px; } .tp-product-details-variation-title { font-size: 15px; font-weight: 400; color: var(--tp-common-black); margin-bottom: 10px; font-family: var(--tp-ff-dm); } .tp-product-details-variation-item:not(:last-child) { margin-bottom: 15px; } .tp-product-details-variation-list button { display: inline-block; width: 26px; height: 26px; border-radius: 50%; position: relative; -webkit-transition: box-shadow 0.2s 0s linear; -moz-transition: box-shadow 0.2s 0s linear; -ms-transition: box-shadow 0.2s 0s linear; -o-transition: box-shadow 0.2s 0s linear; transition: box-shadow 0.2s 0s linear; } .tp-product-details-variation-list button span[data-bg-color] { position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; background-color: var(--tp-common-white); border-radius: 50%; -webkit-transition: all 0.2s 0s linear; -moz-transition: all 0.2s 0s linear; -ms-transition: all 0.2s 0s linear; -o-transition: all 0.2s 0s linear; transition: all 0.2s 0s linear; -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-product-details-variation-list button .tp-color-variation-tootltip { position: absolute; bottom: 100%; left: 50%; -webkit-transform: translateX(-50%) translateY(2px); -moz-transform: translateX(-50%) translateY(2px); -ms-transform: translateX(-50%) translateY(2px); -o-transform: translateX(-50%) translateY(2px); transform: translateX(-50%) translateY(2px); width: max-content; background-color: var(--tp-common-black); color: var(--tp-common-white); text-align: center; font-size: 12px; font-weight: 500; line-height: 1; padding: 4px 6px; border-radius: 4px; visibility: hidden; font-family: var(--tp-ff-dm); opacity: 0; -webkit-transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s cubic-bezier(0.71, 1.7, 0.77, 1.24), -webkit-transform 0.3s cubic-bezier(0.71, 1.7, 0.77, 1.24); -moz-transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s cubic-bezier(0.71, 1.7, 0.77, 1.24), -webkit-transform 0.3s cubic-bezier(0.71, 1.7, 0.77, 1.24); -ms-transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s cubic-bezier(0.71, 1.7, 0.77, 1.24), -webkit-transform 0.3s cubic-bezier(0.71, 1.7, 0.77, 1.24); -o-transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s cubic-bezier(0.71, 1.7, 0.77, 1.24), -webkit-transform 0.3s cubic-bezier(0.71, 1.7, 0.77, 1.24); transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s cubic-bezier(0.71, 1.7, 0.77, 1.24), -webkit-transform 0.3s cubic-bezier(0.71, 1.7, 0.77, 1.24); } .tp-product-details-variation-list button .tp-color-variation-tootltip::before { position: absolute; content: ""; bottom: -6px; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); width: 0; height: 0; border-top: 6px solid var(--tp-common-black); border-left: 6px solid transparent; border-right: 6px solid transparent; } .tp-product-details-variation-list button.tp-size-variation-btn { width: 40px; height: 40px; border-radius: 0; -webkit-transition: all 0.2s 0s linear; -moz-transition: all 0.2s 0s linear; -ms-transition: all 0.2s 0s linear; -o-transition: all 0.2s 0s linear; transition: all 0.2s 0s linear; border: 1px solid rgba(0, 0, 0, 0.2); } .tp-product-details-variation-list button.tp-size-variation-btn:hover, .tp-product-details-variation-list button.tp-size-variation-btn.active { box-shadow: none; border-color: var(--tp-common-black); box-shadow: none; color: var(--tp-common-black); } .tp-product-details-variation-list button:hover, .tp-product-details-variation-list button.active { box-shadow: 0px 1px 2px rgba(1, 15, 28, 0.2); } .tp-product-details-variation-list button:hover span[data-bg-color], .tp-product-details-variation-list button.active span[data-bg-color] { -webkit-transform: translate(-50%, -50%) scale(0.7); -moz-transform: translate(-50%, -50%) scale(0.7); -ms-transform: translate(-50%, -50%) scale(0.7); -o-transform: translate(-50%, -50%) scale(0.7); transform: translate(-50%, -50%) scale(0.7); } .tp-product-details-variation-list button:hover .tp-color-variation-tootltip { visibility: visible; opacity: 1; -webkit-transform: translateX(-50%) translateY(-6px); -moz-transform: translateX(-50%) translateY(-6px); -ms-transform: translateX(-50%) translateY(-6px); -o-transform: translateX(-50%) translateY(-6px); transform: translateX(-50%) translateY(-6px); } .tp-product-details-action-title { font-size: 16px; font-weight: 400; color: var(--tp-common-black); margin-bottom: 13px; font-family: var(--tp-ff-dm); } .tp-product-details-quantity .tp-product-quantity { width: 122px; border-radius: 0; position: relative; } .tp-product-details-quantity .tp-cart-plus, .tp-product-details-quantity .tp-cart-minus { width: 24px; height: 24px; line-height: 21px; text-align: center; border-radius: 50%; left: 14px; top: 11px; cursor: pointer; position: absolute; display: inline-block; -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-quantity .tp-cart-plus:hover, .tp-product-details-quantity .tp-cart-minus:hover { background-color: var(--tp-common-black); color: var(--tp-common-white); } .tp-product-details-quantity .tp-cart-plus { left: auto; right: 14px; } .tp-product-details-quantity .tp-cart-input[type=text] { height: 46px; line-height: 46px; padding: 0 45px; font-size: 16px; background-color: transparent; color: var(--tp-common-black); border: 1px solid var(--tp-border-1); border-radius: 50px; text-align: center; font-family: var(--tp-ff-dm); } .tp-product-details-add-to-cart-btn { font-size: 15px; font-weight: 500; text-align: center; border-radius: 50px; padding: 9px 30px; color: var(--tp-common-black); border: 1px solid var(--tp-border-1); font-family: var(--tp-ff-dm); } .tp-product-details-add-to-cart-btn:hover { background-color: var(--tp-common-black); border-color: var(--tp-common-black); color: var(--tp-common-white); } .tp-product-details-buy-now-btn { display: inline-block; font-size: 15px; font-weight: 600; padding: 10px 30px; color: var(--tp-common-white); background-color: var(--tp-common-black); border: 1px solid transparent; font-family: var(--tp-ff-dm); border-radius: 50px; } .tp-product-details-buy-now-btn:hover { color: var(--tp-common-black); border-color: var(--tp-border-1); background-color: transparent; } .tp-product-details-action-wrapper { margin-bottom: 17px; } .tp-product-details-action-sm { padding-bottom: 9px; margin-bottom: 25px; border-bottom: 1px solid rgba(77, 61, 48, 0.1); } .tp-product-details-action-sm-btn { font-size: 16px; margin-bottom: 10px; color: var(--tp-common-black); font-family: var(--tp-ff-dm); } .tp-product-details-action-sm-btn:not(:last-child) { margin-right: 10px; } .tp-product-details-action-sm-btn i, .tp-product-details-action-sm-btn svg { margin-right: 2px; color: var(--tp-common-black); } .tp-product-details-action-sm-btn:hover { color: var(--tp-grey-1); } .tp-product-details-query { margin-bottom: 22px; } .tp-product-details-query-item:not(:last-child) { margin-bottom: 3px; } .tp-product-details-query-item > span { font-size: 15px; line-height: 1.4; margin-right: 6px; color: var(--tp-common-black); font-family: var(--tp-ff-dm); } .tp-product-details-query-item p { font-size: 15px; margin-bottom: 0; line-height: 1.4; font-family: var(--tp-ff-dm); } .tp-product-details-social { margin-bottom: 22px; } .tp-product-details-social span { font-size: 15px; margin-right: 2px; color: var(--tp-common-black); font-family: var(--tp-ff-dm); } .tp-product-details-social a { display: inline-block; width: 38px; height: 38px; line-height: 36px; text-align: center; color: var(--tp-common-black); border-radius: 50%; border: 1px solid #E6E7E8; background: var(--tp-common-white); } .tp-product-details-social a:hover { border-color: var(--tp-common-black); background-color: var(--tp-common-black); color: var(--tp-common-white); } .tp-product-details-msg ul li { font-size: 15px; list-style: none; padding-left: 25px; position: relative; color: var(--tp-grey-1); font-family: var(--tp-ff-dm); } .tp-product-details-msg ul li::after { position: absolute; content: url("../img/product/icon/product-icon.svg"); top: 4px; left: 0; width: 18px; height: 18px; line-height: 16px; text-align: center; color: var(--tp-common-white); -webkit-transition: all 0.2s 0s linear; -moz-transition: all 0.2s 0s linear; -ms-transition: all 0.2s 0s linear; -o-transition: all 0.2s 0s linear; transition: all 0.2s 0s linear; } .tp-product-details-payment { padding: 18px 30px; background: var(--tp-grey-5); } .tp-product-details-payment p { font-size: 16px; line-height: 1; margin-bottom: 0; margin-right: 46px; flex: 0 0 auto; color: var(--tp-common-black); font-family: var(--tp-ff-dm); } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tp-product-details-payment p { margin-right: 25px; } } @media (max-width: 574.98px) { .tp-product-details-payment p { margin-right: 0; margin-bottom: 15px; } .tp-product-details-payment p br { display: none; } } .tp-product-details-desc-title { font-size: 34px; font-weight: 700; margin-bottom: 20px; font-family: var(--tp-ff-dm); } @media only screen and (min-width: 576px) and (max-width: 767px) { .tp-product-details-desc-title { font-size: 30px; } } @media (max-width: 574.98px) { .tp-product-details-desc-title { font-size: 26px; } } .tp-product-details-desc-title-2 { font-size: 34px; font-weight: 400; margin-bottom: 14px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .tp-product-details-desc-title-2 { font-size: 25px; } } .tp-product-details-desc-content { margin-bottom: 25px; padding-right: 45px; 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), (max-width: 574.98px) { .tp-product-details-desc-content { padding-right: 0; } } @media (max-width: 574.98px) { .tp-product-details-desc-content { padding-left: 0; } } .tp-product-details-desc-content span { font-size: 20px; color: var(--tp-common-black); } .tp-product-details-desc-content p { font-size: 17px; line-height: 1.8; color: #55585B; font-family: var(--tp-ff-dm); } @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-product-details-desc-thumb img { max-width: 100%; } } .tp-product-details-desc-list { padding-top: 13px; } .tp-product-details-desc-list ul li { list-style: none; font-size: 16px; color: var(--tp-common-black); position: relative; padding-left: 17px; } .tp-product-details-desc-list ul li:not(:last-child) { margin-bottom: 3px; } .tp-product-details-desc-list ul li::after { position: absolute; content: ""; left: 0; top: 11px; width: 4px; height: 4px; background-color: #A8ACB0; border-radius: 50%; } .tp-product-details-desc-fact-thumb img { margin-bottom: 16px; } .tp-product-details-desc-fact-content span { display: inline-block; font-size: 50px; line-height: 1.2; color: var(--tp-common-black); } @media only screen and (min-width: 768px) and (max-width: 991px) { .tp-product-details-desc-fact-content span { font-size: 35px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .tp-product-details-desc-fact-content span { font-size: 30px; } } @media (max-width: 574.98px) { .tp-product-details-desc-fact-content span { font-size: 25px; } } .tp-product-details-desc-fact-content p { font-size: 22px; } @media (max-width: 574.98px) { .tp-product-details-desc-fact-content p { font-size: 20px; } } .tp-product-details-additional-info { padding-top: 60px; } @media (max-width: 574.98px) { .tp-product-details-additional-info { overflow-x: scroll; } } .tp-product-details-additional-info-title { font-size: 24px; font-weight: 400; margin-bottom: 16px; display: none; } .tp-product-details-additional-info.tp-table-style-2 { padding-top: 50px; } .tp-product-details-additional-info.tp-table-style-2 .tp-product-details-additional-info-title { display: block; } .tp-product-details-additional-info.tp-table-style-2 table { border: 0; border-collapse: separate; border-spacing: 0 7px; } .tp-product-details-additional-info.tp-table-style-2 table tr { border: 0; } .tp-product-details-additional-info.tp-table-style-2 table tr:not(:last-child) { border: 0; margin-bottom: 6px; } .tp-product-details-additional-info.tp-table-style-2 table tr td { padding: 7px 24px; border: 1px solid #E6E7E8; } .tp-product-details-additional-info.tp-table-style-2 table tr td:first-child { padding-left: 24px; border-right: 0; } .tp-product-details-additional-info.tp-table-style-2 table tr td:last-child { padding-left: 34px; } .tp-product-details-additional-info table { width: 100%; border: 1px solid var(--tp-border-1); } .tp-product-details-additional-info table tr:not(:last-child) { border-bottom: 1px solid var(--tp-border-1); } .tp-product-details-additional-info table tr td { padding: 12px 34px; font-family: var(--tp-ff-dm); } .tp-product-details-additional-info table tr td:first-child { width: 306px; font-size: 16px; background-color: var(--tp-grey-5); color: var(--tp-common-black); } .tp-product-details-additional-info table tr td:last-child { font-size: 16px; color: var(--tp-text-body); } .tp-product-details-review-number { border: 1px solid var(--tp-border-1); padding: 35px 43px 33px 40px; background-color: var(--tp-grey-5); font-family: var(--tp-ff-dm); } @media (max-width: 574.98px) { .tp-product-details-review-number { padding: 35px 25px 33px 25px; } } .tp-product-details-review-number-title { font-size: 20px; font-weight: 500; margin-bottom: 14px; font-family: var(--tp-ff-dm); } .tp-product-details-review-summery { margin-bottom: 12px; } .tp-product-details-review-summery-value span { font-size: 40px; font-weight: 500; color: var(--tp-common-black); margin-right: 8px; font-family: var(--tp-ff-dm); } .tp-product-details-review-summery-rating { margin-right: 3px; } .tp-product-details-review-summery-rating span { color: #FFB21D; } .tp-product-details-review-summery-rating p { margin-left: 4px; font-size: 14px; margin-bottom: 0; font-family: var(--tp-ff-dm); font-family: var(--tp-ff-dm); } .tp-product-details-review-rating-item > span { color: #A0A2A4; font-size: 15px; margin-right: 10px; font-family: var(--tp-ff-dm); } .tp-product-details-review-rating-bar { width: 260px; height: 10px; position: relative; margin-right: 12px; background-color: var(--tp-common-white); } @media (max-width: 574.98px) { .tp-product-details-review-rating-bar { width: 130px; } } .tp-product-details-review-rating-bar-inner { height: 100%; background-color: #FFB21D; display: inline-block; position: absolute; top: 0; left: 0; } .tp-product-details-review-rating-percent span { font-size: 14px; font-family: var(--tp-ff-dm); } .tp-product-details-review-title { font-size: 24px; font-weight: 500; margin-bottom: 22px; font-family: var(--tp-ff-dm); } @media (max-width: 574.98px) { .tp-product-details-review-list { padding-right: 0; } } .tp-product-details-review-avater:not(:last-child) { margin-bottom: 32px; } .tp-product-details-review-avater-thumb { flex: 0 0 auto; } .tp-product-details-review-avater-thumb img { width: 60px; height: 60px; border-radius: 50%; margin-right: 20px; } .tp-product-details-review-avater-rating { line-height: 1; margin-bottom: 3px; } .tp-product-details-review-avater-rating span { font-size: 10px; margin-right: 2px; color: #FFB21D; font-family: var(--tp-ff-dm); } .tp-product-details-review-avater-title { font-size: 16px; font-weight: 500; margin-bottom: 9px; display: inline-block; font-family: var(--tp-ff-dm); } .tp-product-details-review-avater-meta { font-size: 14px; position: relative; padding-left: 11px; margin-left: 3px; font-family: var(--tp-ff-dm); } .tp-product-details-review-avater-meta::after { position: absolute; content: ""; left: 0; top: 8px; width: 4px; height: 4px; border-radius: 50%; background-color: #A8ACB0; } .tp-product-details-review-avater-comment p { font-size: 14px; margin-bottom: 0; line-height: 1.4; font-family: var(--tp-ff-dm); } @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-product-details-review-form { margin-top: 50px; } } .tp-product-details-review-form > p { font-size: 16px; margin-bottom: 8px; font-family: var(--tp-ff-dm); } .tp-product-details-review-form-title { font-size: 24px; font-weight: 500; margin-bottom: 4px; font-family: var(--tp-ff-dm); } .tp-product-details-review-form-rating { margin-bottom: 28px; } .tp-product-details-review-form-rating p { margin-bottom: 0; font-size: 14px; margin-right: 8px; font-family: var(--tp-ff-dm); } .tp-product-details-review-form-rating-icon span { font-size: 12px; color: #FFB21D; font-family: var(--tp-ff-dm); } .tp-product-details-review-input-wrapper { margin-bottom: 11px; } .tp-product-details-review-input-box { position: relative; margin-bottom: 29px; } .tp-product-details-review-input label { font-size: 16px; font-weight: 500; color: #111013; line-height: 1; margin-bottom: 12px; font-family: var(--tp-ff-dm); } .tp-product-details-review-input input, .tp-product-details-review-input textarea { border-radius: 0px; border-color: var(--tp-border-1); background: var(--tp-grey-5); font-family: var(--tp-ff-dm); color: var(--tp-common-black); border-radius: 12px; } .tp-product-details-review-input input:focus, .tp-product-details-review-input textarea:focus { background: transparent; border-color: var(--tp-common-black); } .tp-product-details-review-input input::-webkit-input-placeholder, .tp-product-details-review-input textarea::-webkit-input-placeholder { /* Chrome/Opera/Safari */ color: var(--tp-grey-1); } .tp-product-details-review-input input::-moz-placeholder, .tp-product-details-review-input textarea::-moz-placeholder { /* Firefox 19+ */ color: var(--tp-grey-1); } .tp-product-details-review-input input:-moz-placeholder, .tp-product-details-review-input textarea:-moz-placeholder { /* Firefox 4-18 */ color: var(--tp-grey-1); } .tp-product-details-review-input input:-ms-input-placeholder, .tp-product-details-review-input textarea:-ms-input-placeholder { /* IE 10+ Edge*/ color: var(--tp-grey-1); } .tp-product-details-review-input input::placeholder, .tp-product-details-review-input textarea::placeholder { /* MODERN BROWSER */ color: var(--tp-grey-1); } .tp-product-details-review-input textarea { resize: none; height: 160px; } .tp-product-details-review-input-title label { font-size: 16px; font-weight: 500; color: var(--tp-common-black); line-height: 1; margin-bottom: 12px; font-family: var(--tp-ff-dm); } .tp-product-details-review-remeber input { display: none; } .tp-product-details-review-remeber input:checked ~ label::after { background-color: var(--tp-common-black); border-color: var(--tp-common-black); } .tp-product-details-review-remeber input:checked ~ label::before { visibility: visible; opacity: 1; } .tp-product-details-review-remeber label { font-size: 15px; color: #55585B; position: relative; padding-left: 26px; z-index: 1; font-family: var(--tp-ff-dm); } .tp-product-details-review-remeber label::after { position: absolute; content: ""; top: 4px; left: 0; width: 18px; height: 18px; line-height: 16px; text-align: center; border: 1px solid #C3C7C9; z-index: -1; -webkit-transition: all 0.2s 0s ease-out; -moz-transition: all 0.2s 0s ease-out; -ms-transition: all 0.2s 0s ease-out; -o-transition: all 0.2s 0s ease-out; transition: all 0.2s 0s ease-out; } .tp-product-details-review-remeber label::before { position: absolute; content: url("../img/product/icon/check.svg"); top: 4px; left: 0; width: 18px; height: 18px; line-height: 16px; text-align: center; visibility: hidden; opacity: 0; color: var(--tp-common-white); -webkit-transition: all 0.2s 0s ease-out; -moz-transition: all 0.2s 0s ease-out; -ms-transition: all 0.2s 0s ease-out; -o-transition: all 0.2s 0s ease-out; transition: all 0.2s 0s ease-out; } .tp-product-details-review-remeber label a:hover { color: var(--tp-theme-primary); } .tp-product-details-review-remeber label:hover { cursor: pointer; } .tp-product-details-review-btn { font-size: 16px; font-weight: 500; padding: 9px 45px; color: var(--tp-common-white); border: 1px solid rgba(1, 15, 28, 0.08); background-color: var(--tp-common-black); font-family: var(--tp-ff-dm); border-radius: 50px; } .tp-product-details-review-btn:hover { color: var(--tp-common-white); background-color: var(--tp-theme-secondary); } .tp-product-details-bottom { border-bottom: 1px solid #E0E2E3; } .tp-product-details-tab-nav .nav-tabs { padding-bottom: 12px; border-bottom: 1px solid #E0E2E3; } @media (max-width: 574.98px) { .tp-product-details-tab-nav .nav-tabs { padding-bottom: 0; } } .tp-product-details-tab-nav .nav-tabs .nav-link { font-size: 20px; color: rgba(0, 0, 0, 0.6); border: none; padding: 0; padding-left: 9px; padding-right: 7px; position: relative; background-color: transparent; font-family: var(--tp-ff-dm); } .tp-product-details-tab-nav .nav-tabs .nav-link:not(:first-child) { margin-left: 40px; } .tp-product-details-tab-nav .nav-tabs .nav-link.active, .tp-product-details-tab-nav .nav-tabs .nav-link:hover { color: var(--tp-common-black); } .tp-product-details-tab-nav .nav-tabs .nav-link.active::after, .tp-product-details-tab-nav .nav-tabs .nav-link:hover::after { width: 100%; left: 0; right: auto; } @media (max-width: 574.98px) { .tp-product-details-tab-nav .nav-tabs .nav-link::after { position: absolute; content: ""; left: auto; right: 0; bottom: -1px; width: 0%; height: 2px; background-color: var(--tp-common-black); -webkit-transition: all 0.3s 0s ease-in-out; -moz-transition: all 0.3s 0s ease-in-out; -ms-transition: all 0.3s 0s ease-in-out; -o-transition: all 0.3s 0s ease-in-out; transition: all 0.3s 0s ease-in-out; } } @media (max-width: 574.98px) { .tp-product-details-tab-nav .nav-tabs span#productTabMarker { display: none !important; } } .tp-product-details-tab-line { bottom: 0; height: 1px; position: absolute; background-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; display: block; } .tp-product-details-views { margin-bottom: 10px; } .tp-product-details-views > span { color: var(--tp-common-black); font-size: 16px; margin-right: 8px; } .tp-product-details-views p { font-size: 16px; margin-bottom: 0; } .tp-product-details-views p span { color: var(--tp-common-black); font-weight: 500; } .tp-product-details-stock-bar p { font-size: 15px; margin-bottom: 5px; } .tp-product-details-stock-bar p span { font-weight: 500; color: var(--tp-common-black); } .tp-product-details-stock-bar-line { height: 4px; position: relative; } .tp-product-details-stock-bar-line-inner { position: absolute; top: 0; left: 0; background-color: var(--tp-theme-primary); height: 100%; display: inline-block; } .tp-product-details-wishlist-btn { width: 46px; height: 46px; line-height: 46px; text-align: center; display: inline-block; background-color: var(--tp-common-white); box-shadow: 0px 1px 3px rgba(1, 15, 28, 0.1); } .tp-product-details-wishlist-btn:hover { background-color: var(--tp-common-black); color: var(--tp-common-white); } .tp-pagination ul { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; justify-content: center; } .tp-pagination ul li { display: inline-block; } .tp-pagination ul li:not(:last-child) { margin-right: 6px; } .tp-pagination ul li a, .tp-pagination ul li span { display: inline-block; width: 40px; height: 40px; line-height: 38px; text-align: center; border: 1px solid rgba(1, 15, 28, 0.1); font-size: 16px; font-weight: 500; } .tp-pagination ul li a:hover, .tp-pagination ul li a.current, .tp-pagination ul li span:hover, .tp-pagination ul li span.current { background: var(--tp-theme-color); border-color: var(--tp-theme-color); color: var(--tp-white); } .tp-pagination ul li a svg, .tp-pagination ul li span svg { transform: translateY(-2px); } /*----------------------------------------*/ /* 7.6 Checkout css /*----------------------------------------*/ .tp-checkout-verify-item { margin-bottom: 40px; } .tp-checkout-verify-item:not(:last-child) { margin-bottom: 14px; } .tp-checkout-verify-reveal { width: 100%; font-size: 14px; margin-bottom: 0; padding: 8px 26px; display: inline-block; border: 1px dashed #AAB0B2; color: var(--tp-common-black); font-family: var(--tp-ff-dm); } .tp-checkout-verify-reveal button { position: relative; color: var(--tp-common-black); font-family: var(--tp-ff-dm); } .tp-checkout-verify-reveal button::after { position: absolute; content: ""; left: 0; bottom: 4px; width: 100%; height: 1px; background-color: var(--tp-common-black); } .tp-checkout-btn { font-size: 16px; font-weight: 500; height: 50px; padding: 0 30px; line-height: 50px; text-align: center; border-radius: 8px; display: inline-block; color: var(--tp-common-white); background-color: var(--tp-common-black); border: 1px solid transparent; font-family: var(--tp-ff-dm); } .tp-checkout-btn.btn-plr { padding: 0 150px; border-radius: 0; } @media (max-width: 574.98px) { .tp-checkout-btn.btn-plr { padding: 0 100px; } } .tp-checkout-btn.border-style { font-weight: 500; font-size: 15px; color: var(--tp-common-black); border-radius: 0; text-transform: capitalize; background-color: transparent; border: 1px solid var(--tp-border-1); font-family: var(--tp-ff-dm); } .tp-checkout-btn.border-style span { margin-left: 7px; transform: translateY(-1px); display: inline-block; } .tp-checkout-btn.border-style:hover { color: var(--tp-common-white); background-color: var(--tp-common-black); border-color: var(--tp-common-black); } .tp-checkout-btn:hover { border-color: var(--tp-common-black); color: var(--tp-common-black); background-color: transparent; } .tp-checkout-input { margin-bottom: 20px; } .tp-checkout-input label { font-size: 16px; font-weight: 500; margin-bottom: 12px; color: var(--tp-common-black); font-family: var(--tp-ff-dm); } .tp-checkout-input label span { color: red; } .tp-checkout-input input, .tp-checkout-input textarea { width: 100%; padding: 0 26px; line-height: 52px; font-size: 14px; text-transform: capitalize; border: 1px solid transparent; color: var(--tp-common-black); background: var(--tp-grey-5); font-family: var(--tp-ff-dm); } .tp-checkout-input input::placeholder, .tp-checkout-input textarea::placeholder { font-size: 14px; line-height: 52px; text-transform: capitalize; color: var(--tp-grey-1); } .tp-checkout-input input:focus, .tp-checkout-input textarea:focus { background: transparent; border-color: var(--tp-common-black); } .tp-checkout-input textarea { height: 200px; resize: none; } .tp-checkout-input .tp-select { height: 52px; line-height: 50px; border-radius: 0; border: 1px solid transparent; color: var(--tp-common-black); padding: 0px 25px 0; width: 100%; border-radius: 4px; background: var(--tp-grey-5); font-family: var(--tp-ff-dm); font-size: 14px; } .tp-checkout-input .tp-select .current { font-size: 14px; line-height: 52px; text-transform: capitalize; color: var(--tp-grey-1); font-family: var(--tp-ff-dm); } .tp-checkout-option { margin-bottom: 4px; } .tp-checkout-option-wrapper { margin-top: 10px; margin-bottom: 17px; } .tp-checkout-option input { display: none; } .tp-checkout-option input:checked ~ label::after { background-color: #4d3d30; border-color: #4d3d30; } .tp-checkout-option input:checked ~ label::before { visibility: visible; opacity: 1; } .tp-checkout-option label { font-size: 15px; color: #55585B; position: relative; padding-left: 26px; z-index: 1; font-family: var(--tp-ff-dm); } .tp-checkout-option label::after { position: absolute; content: ""; top: 4px; left: 0; width: 18px; height: 18px; line-height: 16px; text-align: center; border: 1px solid #C3C7C9; z-index: -1; transition: all 0.4s ease; } .tp-checkout-option label::before { position: absolute; content: url("../img/login/check.svg"); top: 4px; left: 0; width: 18px; height: 18px; line-height: 16px; text-align: center; visibility: hidden; opacity: 0; color: var(--tp-common-white); transition: all 0.4s ease; } .tp-checkout-option label a:hover { color: var(--tp-common-black); } .tp-checkout-option label:hover { cursor: pointer; } .tp-checkout-bill-area { padding: 45px 40px 24px; background: var(--tp-common-white); box-shadow: 0px 30px 70px rgba(1, 15, 28, 0.1); border-radius: 12px; } @media (max-width: 574.98px) { .tp-checkout-bill-area { padding: 45px 25px 24px; } } .tp-checkout-bill-title { font-weight: 600; font-size: 26px; margin-bottom: 35px; font-family: var(--tp-ff-dm); } .tp-checkout-place { padding: 44px 50px 50px; background: var(--tp-common-white); box-shadow: 0px 30px 70px rgba(1, 15, 28, 0.1); border-radius: 12px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tp-checkout-place { padding: 35px 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-checkout-place { margin-top: 50px; } } @media (max-width: 574.98px) { .tp-checkout-place { padding: 45px 25px 24px; } } .tp-checkout-place-title { font-size: 26px; font-weight: 600; margin-right: 37px; margin-bottom: 30px; } .tp-checkout-payment { padding-bottom: 26px; margin-bottom: 24px; border-bottom: 1px solid #E0E2E3; } .tp-checkout-payment-item:not(:last-child) { margin-bottom: 10px; } .tp-checkout-payment-item.paypal-payment label { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; flex-wrap: wrap; } .tp-checkout-payment-item input { display: none; } .tp-checkout-payment-item input:checked ~ label::after { border-color: #4d3d30; } .tp-checkout-payment-item input:checked ~ label::before { opacity: 1; visibility: visible; } .tp-checkout-payment-item label { font-size: 14px; position: relative; padding-left: 27px; font-weight: 500; color: var(--tp-common-black); font-family: var(--tp-ff-dm); } .tp-checkout-payment-item label:hover { cursor: pointer; } .tp-checkout-payment-item label::after { position: absolute; content: ""; left: 0; top: 5px; width: 16px; height: 16px; border-radius: 50%; border: 1px solid #BCBCBC; transition: all 0.4s ease; } .tp-checkout-payment-item label::before { position: absolute; content: ""; left: 3px; top: 8px; width: 10px; height: 10px; border-radius: 50%; background-color: var(--tp-common-black); visibility: hidden; opacity: 0; transition: all 0.4s ease; } .tp-checkout-payment-item label img { margin-left: 14px; -webkit-transform: translateY(-2px); -moz-transform: translateY(-2px); -ms-transform: translateY(-2px); -o-transform: translateY(-2px); transform: translateY(-2px); } .tp-checkout-payment-item label a { margin-left: 20px; position: relative; } .tp-checkout-payment-item label a::after { position: absolute; content: ""; left: 0; bottom: 3px; width: 100%; height: 1px; background-color: var(--tp-common-black); } .tp-checkout-payment-desc { position: relative; padding-top: 10px; display: none; } .tp-checkout-payment-desc::after { position: absolute; content: ""; left: 57px; top: 0; width: 16px; height: 16px; background-color: #F6F7F9; -webkit-transform: translateY(3px) rotate(45deg); -moz-transform: translateY(3px) rotate(45deg); -ms-transform: translateY(3px) rotate(45deg); -o-transform: translateY(3px) rotate(45deg); transform: translateY(3px) rotate(45deg); } .tp-checkout-payment-desc p { font-size: 14px; color: #55585B; margin-bottom: 0; margin-left: 27px; line-height: 1.57; padding: 19px 30px; background-color: #F6F7F9; } .tp-checkout-agree { margin-bottom: 24px; } .tp-return-customer { display: none; margin-top: 14px; padding: 40px 40px; background: var(--tp-common-white); box-shadow: 0px 30px 70px rgba(1, 15, 28, 0.1); border-radius: 12px; } .tp-return-customer-input { margin-bottom: 20px; } .tp-return-customer-input label { font-size: 16px; font-weight: 500; margin-bottom: 12px; color: var(--tp-common-black); font-family: var(--tp-ff-dm); } .tp-return-customer-input label span { color: red; } .tp-return-customer-input input, .tp-return-customer-input textarea { width: 100%; padding: 0 26px; line-height: 56px; font-size: 14px; text-transform: capitalize; border: 1px solid transparent; color: var(--tp-common-black); background: var(--tp-grey-5); font-family: var(--tp-ff-dm); } .tp-return-customer-input input::placeholder, .tp-return-customer-input textarea::placeholder { font-size: 14px; line-height: 56px; text-transform: capitalize; color: var(--tp-grey-1); } .tp-return-customer-input input:focus, .tp-return-customer-input textarea:focus { background: transparent; border-color: var(--tp-common-black); } .tp-return-customer-remeber input { display: none; font-family: var(--tp-ff-dm); } .tp-return-customer-remeber input:checked ~ label::after { border-color: var(--tp-common-black); background-color: var(--tp-common-black); } .tp-return-customer-remeber input:checked ~ label::before { opacity: 1; visibility: visible; } .tp-return-customer-remeber label { font-size: 15px; color: #55585B; position: relative; padding-left: 26px; z-index: 1; font-family: var(--tp-ff-dm); } .tp-return-customer-remeber label::after { position: absolute; content: ""; top: 4px; left: 0; width: 18px; height: 18px; line-height: 16px; text-align: center; border: 1px solid #C3C7C9; z-index: -1; transition: all 0.4s ease; } .tp-return-customer-remeber label::before { position: absolute; content: url("../img/login/check.svg"); top: 4px; left: 0; width: 18px; height: 18px; line-height: 16px; text-align: center; visibility: hidden; opacity: 0; color: var(--tp-common-white); transition: all 0.4s ease; } .tp-return-customer-remeber label a { font-family: var(--tp-ff-dm); } .tp-return-customer-remeber label a:hover { color: var(--tp-common-black); } .tp-return-customer-remeber label:hover { cursor: pointer; } .tp-return-customer-forgot a { font-weight: 400; font-size: 15px; color: var(--tp-common-black); position: relative; display: inline-block; font-family: var(--tp-ff-dm); } .tp-return-customer-forgot a::after { position: absolute; content: url("../img/login/check.svg"); left: auto; right: 0; bottom: 4px; width: 0%; height: 1px; background-color: var(--tp-common-black); transition: all 0.4s ease; } .tp-return-customer-forgot a:hover::after { left: 0; right: auto; width: 100%; } .tp-order-details { padding: 70px 100px 55px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .tp-order-details { padding: 70px 70px 55px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tp-order-details { padding: 70px 30px 55px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .tp-order-details { padding: 70px 50px 55px; } } @media (max-width: 574.98px) { .tp-order-details { padding: 40px 30px 45px; } } .tp-order-details-icon { margin-bottom: 22px; } .tp-order-details-icon span { display: inline-block; width: 120px; height: 120px; line-height: 118px; text-align: center; font-size: 55px; color: var(--tp-common-white); border-bottom: 1px solid #E0E2E3; border-radius: 50%; } .tp-order-details-icon span svg { transform: translateY(-1px); } .tp-order-details-title { font-size: 30px; font-weight: 600; color: var(--tp-common-white); margin-bottom: 7px; } .tp-order-details-content p { font-size: 16px; color: var(--tp-common-white); line-height: 1.38; } .tp-order-details-item { margin-bottom: 38px; } .tp-order-details-item-wrapper .row [class*=col-]:nth-child(2n) .tp-order-details-item { padding-left: 40px; } @media (max-width: 574.98px) { .tp-order-details-item-wrapper .row [class*=col-]:nth-child(2n) .tp-order-details-item { padding-left: 0; } } .tp-order-details-item h4 { font-size: 18px; color: var(--tp-common-white); margin-bottom: 0; font-weight: 400; } .tp-order-details-item p { font-weight: 700; font-size: 18px; color: var(--tp-common-white); margin-bottom: 0; } .tp-order-info-wrapper { padding: 42px 50px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tp-order-info-wrapper { padding: 42px 40px; } } @media (max-width: 574.98px) { .tp-order-info-wrapper { padding: 42px 30px; } } .tp-order-info-title { font-size: 26px; font-weight: 600; margin-bottom: 40px; } .tp-order-info-list ul li { list-style: none; padding: 15px 0; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: space-between; } .tp-order-info-list ul li:not(:last-child) { border-bottom: 1px solid #E0E2E3; } .tp-order-info-list ul li span { font-size: 15px; color: var(--tp-common-black); font-family: var(--tp-ff-dm); } .tp-order-info-list ul li.tp-order-info-list-header { padding-top: 0; padding-bottom: 12px; } .tp-order-info-list ul li.tp-order-info-list-header h4 { font-size: 16px; font-weight: 500; margin-bottom: 0; font-family: var(--tp-ff-dm); } .tp-order-info-list ul li.tp-order-info-list-desc p { font-size: 15px; margin-bottom: 0; font-family: var(--tp-ff-dm); } .tp-order-info-list ul li.tp-order-info-list-desc p span { font-size: 15px; font-weight: 500; } .tp-order-info-list ul li.tp-order-info-list-subtotal span:last-child { color: var(--tp-common-black); } .tp-order-info-list ul li.tp-order-info-list-shipping span input { display: none; } .tp-order-info-list ul li.tp-order-info-list-shipping span input:checked ~ label::after { border-color: #4d3d30; } .tp-order-info-list ul li.tp-order-info-list-shipping span input:checked ~ label::before { opacity: 1; visibility: visible; } .tp-order-info-list ul li.tp-order-info-list-shipping span label { font-size: 14px; position: relative; padding-right: 27px; } .tp-order-info-list ul li.tp-order-info-list-shipping span label span { color: var(--tp-common-black); } .tp-order-info-list ul li.tp-order-info-list-shipping span label:hover { cursor: pointer; } .tp-order-info-list ul li.tp-order-info-list-shipping span label::after { position: absolute; content: ""; right: 0; top: 5px; width: 16px; height: 16px; border-radius: 50%; border: 1px solid #BCBCBC; transition: all 0.4s ease; } .tp-order-info-list ul li.tp-order-info-list-shipping span label::before { position: absolute; content: ""; right: 4px; top: 9px; width: 8px; height: 8px; border-radius: 50%; background-color: var(--tp-common-black); visibility: hidden; opacity: 0; transition: all 0.4s ease; } .tp-order-info-list ul li.tp-order-info-list-total { padding: 14px 0; } .tp-order-info-list ul li.tp-order-info-list-total span { font-size: 16px; font-weight: 500; } .tp-order-inner { background-color: var(--tp-common-white); box-shadow: 0px 30px 70px rgba(1, 15, 28, 0.1); } /*----------------------------------------*/ /* 7.11 Error Css /*----------------------------------------*/ .tp-error-title { font-weight: 700; font-size: 64px; margin-bottom: 50px; color: var(--tp-common-black); } .tp-error-title-sm { font-weight: 600; font-size: 26px; line-height: 1; text-transform: uppercase; color: var(--tp-common-black); } .tp-error-content p { font-weight: 400; font-size: 18px; color: #57575a; margin-bottom: 30px; } .tp-error-content .tp-btn { height: 60px; line-height: 55px; border-radius: 40px; padding: 0 18px 0 24px; font-weight: 500; font-size: 18px; letter-spacing: 0.03em; z-index: 9; overflow: hidden; display: inline-block; text-transform: capitalize; position: relative; transition: all 0.3s; background-color: var(--tp-common-black); color: var(--tp-common-white); border: 2px solid transparent; } .tp-error-content .tp-btn:hover { background-color: transparent; color: var(--tp-common-black); border-color: var(--tp-common-black); } .tp-error-wrapper img { margin-bottom: 55px; } /*----------------------------------------*/ /* 7.10 dark css start /*----------------------------------------*/ .aleric-dark body { background-color: #030303; } .aleric-dark .tp-main-menu > nav > ul > li > a { color: var(--tp-common-white); } .aleric-dark .tp-main-menu > nav > ul > li:hover.has-dropdown > a > span { color: var(--tp-common-white); } .aleric-dark .tp-header-search-btn { color: var(--tp-common-white); border: 1px solid var(--tp-border-3); } .aleric-dark .tp-header-search-btn:hover { background: var(--tp-common-white); color: var(--tp-common-black); border-color: var(--tp-common-white); } .aleric-dark .tp-hero-social span { color: var(--tp-common-white); } .aleric-dark .tp-hero-social a { border: 1px solid var(--tp-border-3); color: var(--tp-common-white); } .aleric-dark .tp-hero-social a:hover { background: var(--tp-common-white); color: var(--tp-common-black); } .aleric-dark .tp-hero-video-btn { background: var(--tp-common-white); color: var(--tp-common-black); } .aleric-dark .tp-hero-video-btn:hover { background: var(--tp-theme-primary); } .aleric-dark .tp-hero-bottom-shape { filter: invert(1); } .aleric-dark .tp-hero-customer-shape { filter: invert(1); } .aleric-dark .tp-section-subtitle { border: 1px solid var(--tp-border-3); } .aleric-dark .tp-section-subtitle .borders { background: var(--tp-common-white); } .aleric-dark .tp-about-bottom { border-top: 1px solid var(--tp-border-3); } .aleric-dark .tp-rounded-btn-wrap a { border: 1px solid var(--tp-border-3); background: var(--tp-common-black); color: var(--tp-common-white); } .aleric-dark .tp-rounded-btn-wrap a:hover { color: var(--tp-common-black); } .aleric-dark .tp-brand-spacing { border-top: 1px solid var(--tp-border-3); border-bottom: 1px solid var(--tp-border-3); } .aleric-dark .tp-brand-customer { border: 1px solid var(--tp-border-3); background: var(--tp-common-black); } .aleric-dark .tp-brand-item img { filter: invert(1); } .aleric-dark .tp-brand-bottom-border { border: 1px solid var(--tp-border-3); } .aleric-dark .tp-service-item-bg { filter: invert(0.9); } .aleric-dark .tp-service-item { border: 1px solid var(--tp-border-3); } .aleric-dark .tp-service-item ul li a { color: var(--tp-common-white); } .aleric-dark .tp-service-item ul li a::before { background: var(--tp-common-white); } .aleric-dark .tp-portfolio-sectitle .borders { background: var(--tp-common-white); } .aleric-dark .tp-portfolio-tag span { color: var(--tp-grey-2); border: 1px solid var(--tp-border-3); } .aleric-dark .tp-portfolio-tag span:hover { background: var(--tp-common-white); color: var(--tp-common-black); } .aleric-dark .tp-portfolio-title { color: var(--tp-common-white); } .aleric-dark .tp-counter-item { border: 1px solid var(--tp-border-3); } .aleric-dark .tp-awards-bg-shape { filter: invert(1); } .aleric-dark .fraction-wrapper #paginations span { color: var(--tp-common-white); } .aleric-dark .tp-blog-meta span { color: var(--tp-grey-2); } .aleric-dark .tp-blog-meta { border: 1px solid var(--tp-border-3); } .aleric-dark .tp-footer-social ul li a { color: var(--tp-common-white); background: rgba(255, 255, 255, 0.04); } .aleric-dark .tp-footer-social ul li a:hover { color: var(--tp-theme-primary); } .aleric-dark .tp-footer-widget-form .tp-input { background: rgba(255, 255, 255, 0.04); } .aleric-dark .tp-footer-btn a { background: rgba(255, 255, 255, 0.04); border-color: transparent; } .aleric-dark .tp-header-sidebar-btn span { background: var(--tp-common-white); } .aleric-dark .tp-header-ai-bg { background: rgba(38, 37, 40, 0.9); } .aleric-dark .header-sticky.tp-header-ai-wrap .tp-header-ai-bg { background: rgba(38, 37, 40, 0.9); } .aleric-dark .tp-main-menu-ai > nav > ul > li > a > span { color: var(--tp-grey-2); } .aleric-dark .tp-main-menu-ai > nav > ul > li:hover.has-dropdown > a > span { color: var(--tp-common-black); } .aleric-dark .tp-btn-ai::before { background: var(--tp-common-black); } .aleric-dark .tp-btn-ai:hover::before { background: transparent !important; } .aleric-dark .tp-header-ai-menu-btn { background: #242326; } .aleric-dark .tp-main-menu-ai > nav > ul > li:hover > a { background: var(--tp-common-white); color: var(--tp-common-black); } .aleric-dark .uncover_slice { background: var(--tp-common-black); } .aleric-dark .title-slide-gradient { background-image: -webkit-linear-gradient(90deg, #999 0%, #f96501 50%, #999 100%); background-image: -moz-linear-gradient(90deg, #999 0%, #f96501 50%, #999 100%); background-image: -ms-linear-gradient(90deg, #999 0%, #f96501 50%, #999 100%); background-image: -o-linear-gradient(90deg, #999 0%, #f96501 50%, #999 100%); background-image: linear-gradient(90deg, #999 0%, #f96501 50%, #999 100%); } .aleric-dark .tp-service-ai-title { color: rgba(255, 255, 255, 0.3); } .aleric-dark .tp-service-ai-title a { background: linear-gradient(90deg, #999 0%, #f96501 100%) left no-repeat, rgba(255, 255, 255, 0.3); background-size: auto, auto; background-clip: border-box, border-box; background-size: 0% 100%; background-clip: text; -webkit-background-clip: text; } .aleric-dark .tp-service-ai-count { color: rgba(255, 255, 255, 0.3); background: linear-gradient(90deg, #999 0%, #f96501 100%) left no-repeat, rgba(255, 255, 255, 0.3); background-size: auto, auto; background-clip: border-box, border-box; background-size: 0% 100%; background-clip: text; -webkit-background-clip: text; } .aleric-dark .tp-testimonial-it-ratings-wrap { border: 1px solid var(--tp-border-3); } .aleric-dark .tp-testimonial-ai-navigation span::before { background: var(--tp-common-black); } .aleric-dark .tp-testimonial-ai-navigation span { color: var(--tp-common-white); } .aleric-dark .tp-testimonial-ai-expreance { border-top: 1px solid rgba(255, 255, 255, 0.1); } .aleric-dark .tp-footer-ai-menu ul li a { color: var(--tp-common-white); } .aleric-dark .tp-footer-ai-social a { color: var(--tp-common-white); border-color: rgba(255, 255, 255, 0.1); } .aleric-dark .tp-footer-ai-menu ul li a:hover { background: var(--tp-common-white); color: var(--tp-common-black); } .aleric-dark .tp-footer-ai-copyright-border { border-top: 1px solid var(--tp-border-3); } .aleric-dark .tp-btn-ai-transparent::before { background: #5a4d1b; } .aleric-dark .tp-pricing-ai-list ul li { color: var(--tp-common-white); } .aleric-dark .tp-btn-ai-transparent-2::before { background: transparent; } .aleric-dark .tp-header-btn .tp-btn-ai::before { background: #242326; } .aleric-dark .tp-hero-ai-shape { filter: invert(1); } .aleric-dark .tp-btn-vp-group .tp-btn-2 { background: #030303; border: 1px solid var(--tp-border-3); color: var(--tp-common-white); } .aleric-dark .tp-btn-vp-group .tp-btn-circle { border: 1px solid var(--tp-border-3); color: var(--tp-common-white); } .aleric-dark .tp-btn-vp-group:hover > *:nth-child(2) { background: var(--tp-common-white); color: var(--tp-common-black); } .aleric-dark .tp-btn-vp-group:hover > *:nth-child(1) { background: var(--tp-common-white); color: var(--tp-common-black); } .aleric-dark .header-sticky .tp-btn-vp-group .tp-btn-2 { background: #222124; color: var(--tp-common-white); } .aleric-dark .header-sticky .tp-btn-vp-group:hover > *:nth-child(2) { background: var(--tp-common-white); color: var(--tp-common-black); } .aleric-dark .tp_text_invert.invert-black-6 > div { background-image: linear-gradient(to right, #dadada 50%, #343436 50%); } .aleric-dark .tp-service-vp-btn { border: 1px solid var(--tp-border-3); } .aleric-dark .tp-service-vp-item { border-bottom: 1px solid var(--tp-border-3); } .aleric-dark .tp-service-vp-para { color: var(--tp-grey-2); } .aleric-dark .tp-btn-vp-group-primary .tp-btn-2 { background: var(--tp-theme-primary); color: var(--tp-common-black); } .aleric-dark .tp-btn-vp-group-primary .tp-btn-circle { color: var(--tp-common-black); } .aleric-dark .tp-blog-vp-cetagory a { color: var(--tp-common-white); border: 1px solid var(--tp-border-3); } .aleric-dark .tp-blog-vp-cetagory a:hover { background: var(--tp-common-white); color: var(--tp-common-black); } .aleric-dark .tp-header-cst-menu-btn { background: #222222; border: none; } .aleric-dark .tp-hero-cst-btp a { border: 1px solid var(--tp-border-3); background: var(--tp-common-black); color: var(--tp-common-white); } .aleric-dark .tp-btn-border { border: 1px solid var(--tp-border-3); } .aleric-dark .tp-header-cst-wrap { border-bottom: 1px solid var(--tp-border-3); } .aleric-dark .header-sticky.tp-header-cst-wrap { border-bottom: none; } .aleric-dark .tp_text_invert.invert-black-3 > div { background-image: linear-gradient(to right, #fff 50%, #343436 50%); } .aleric-dark .tp-about-cst-tab ul li a { color: var(--tp-common-white); } .aleric-dark .tp-about-cst-thumb { border-bottom: 1px solid var(--tp-border-3); } .aleric-dark .tp-about-cst-thumb-wrap { border-right: 1px solid var(--tp-border-3); } .aleric-dark .tp-text-cst-title span { background: var(--tp-common-white); } .aleric-dark .tp-section-cst-subtitle { border: none; } .aleric-dark .tp-portfolio-cst-subtitle-wrap { border-bottom: 1px solid var(--tp-border-3); } .aleric-dark .tp-portfolio-cst-btn { border: 1px solid var(--tp-border-3); color: var(--tp-common-white); } .aleric-dark .tp-portfolio-cst-item.active .tp-portfolio-cst-btn { border-color: var(--tp-common-green-2); color: var(--tp-common-black); } .aleric-dark .tp-portfolio-cst-item::before { background: var(--tp-common-white); } .aleric-dark .tp-portfolio-cst-item { border-bottom: 1px solid var(--tp-border-3); } .aleric-dark .tp-faq-cst-thumb-wrap img { filter: invert(0.8); } .aleric-dark .tp-faq-cst-tab-content .tp-faq-btn { color: var(--tp-common-white); } .aleric-dark .tp-faq-cst-tab-content .tp-faq-details-para p { color: var(--tp-grey-2); } .aleric-dark .tp-faq-cst-tab-content .accordion-item { border-bottom: 1px solid var(--tp-border-3); } .aleric-dark .tp-testimonial-cst-item .popup-video { background: var(--tp-common-black-1); } .aleric-dark .tp-blog-cst-item { background: var(--tp-common-black); } .aleric-dark .tp-about-2-border { background: var(--tp-border-3); } .aleric-dark .tp-service-2-para p::before { background: var(--tp-border-3); } .aleric-dark .tp-service-2-item:hover { border: 1px solid var(--tp-border-3); } .aleric-dark .tp-service-2-btn { border: 1px solid var(--tp-border-3); } .aleric-dark .shop-slider-progress-bar span { background-color: var(--tp-common-white); } .aleric-dark .shop-slider-progress-bar { background-color: var(--tp-border-3); } .aleric-dark .tp-brand-2-item { border: 1px solid var(--tp-border-3); } .aleric-dark .tp-brand-2-item img { filter: invert(1); } .aleric-dark .tp-header-it-bg { background: rgba(38, 37, 40, 0.9); } .aleric-dark .tp-header-it-btn { box-shadow: none; } .aleric-dark .header-sticky .tp-header-it-bg { background: none; } .aleric-dark .tp-hero-it-counter .subtitle { color: var(--tp-grey-2); } .aleric-dark .tp-hero-it-counter-wrap { border-top: 1px solid var(--tp-border-3); } .aleric-dark .tp-text-it-slider-item span { color: var(--tp-common-white); border: 1px solid var(--tp-border-3); } .aleric-dark .tp-text-it-slider-item span:hover { color: var(--tp-common-black); } .aleric-dark .tp-about-it-blur { background-color: #B4E717; opacity: 0.3; } .aleric-dark .tp-section-it-subtitle { border: 1px solid var(--tp-border-3); } .aleric-dark .tp-about-it-rating .rating i { background: var(--tp-common-white); color: var(--tp-common-black); } .aleric-dark .tp-about-it-total-rating { border-right: 1px solid var(--tp-border-3); } .aleric-dark .tp-service-it-item { background: #12121257; } .aleric-dark .tp-process-it-bg { background: linear-gradient(180deg, #10302a 0%, rgba(16, 48, 42, 0) 100%); } .aleric-dark .tp-text-it-item span { -webkit-text-stroke: 2px var(--tp-border-3); } .aleric-dark .tp-process-it-item { border: 1px solid var(--tp-border-3); } .aleric-dark .tp-process-it-para-2 { border: 1px solid var(--tp-border-3); } .aleric-dark .tp-team-it-big-title h2 { background: linear-gradient(180deg, rgba(16, 48, 42, 0.61) 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; } .aleric-dark .tp-team-it-socials-trigger { background: var(--tp-common-black); } .aleric-dark .tp-team-it-socials-trigger::before { box-shadow: 0 20px 0 0 #030303; } .aleric-dark .tp-team-it-socials-trigger::after { box-shadow: 0 20px 0 0 #030303; } .aleric-dark .tp-team-it-item { border: 1px solid var(--tp-border-3); } .aleric-dark .tp-testimonial-it-qoute { background: var(--tp-common-white); } .aleric-dark .tp-testimonial-it-item { border: 1px solid var(--tp-border-3); } .aleric-dark .tp-testimonial-it-pagenation span { background: var(--tp-common-white); } .aleric-dark .tp-blog-it-item { border: 1px solid var(--tp-border-3); } .aleric-dark .tp-team-it-thumb { background: var(--tp-grey-8); } .aleric-dark .tp-header-pp-email { border: 1px solid var(--tp-border-3); } .aleric-dark .tp-header-pp-email:hover { color: var(--tp-grey-2); } .aleric-dark .tp-header-pp-menu-btn { border: none; background: var(--tp-grey-8); } .aleric-dark .tp-hero-pp-social span.borders { color: var(--tp-common-white); border-color: var(--tp-border-3); } .aleric-dark .tp-section-pp-subtitle { border-color: var(--tp-border-3); background: #e1e1e112; } .aleric-dark .tp-about-pp-skill-wrap { background: #e1e1e112; } .aleric-dark .tp-portfolio-pp-content .positions { background: #e1e1e112; } .aleric-dark .tp-service-pp-item { border-top: 1px dashed var(--tp-border-3); background-color: var(--tp-grey-8); } .aleric-dark .tp-service-pp-category span { border: 1px solid var(--tp-border-3); background: var(--tp-grey-8); } .aleric-dark .tp-service-pp-category span:hover { background: var(--tp-border-3); } .aleric-dark .tp-skill-wd-para { border: 1px solid var(--tp-border-3); background: var(--tp-grey-8); } .aleric-dark .tp-blog-pp-item { border: 1px solid var(--tp-border-3); } .aleric-dark .tp-header-wd-wrap { border-color: var(--tp-border-3); } .aleric-dark .tp-hero-wd-btp { border: 1px solid var(--tp-border-3); background: var(--tp-common-black); color: var(--tp-common-white); } .aleric-dark .tp-hero-wd-right { background: var(--tp-grey-8); } .aleric-dark .tp-about-wd-thumb3 { border: 10px solid var(--tp-common-black); } .aleric-dark .tp-service-wd-content ul li { color: var(--tp-common-white); } .aleric-dark .tp-service-wd-item { border-top: 1px solid var(--tp-border-3); } .aleric-dark .tp-awards-wd-item.borders { border-bottom: 1px solid var(--tp-border-2); } .aleric-dark .tp-blog-wd-item { border: 1px solid var(--tp-border-3); } .aleric-dark .tp-blog-wd-tag { border: 1px solid var(--tp-border-3); } .aleric-dark .tp-cta-wd-email { border: 1px solid var(--tp-border-3); background: var(--tp-grey-8); } .aleric-dark .tp-footer-wd-desk { border: 1px solid var(--tp-border-3); } .aleric-dark .tp-footer-wd-desk:hover { color: var(--tp-common-white); } .aleric-dark .tp-footer-wd-widget ul li a { color: var(--tp-grey-2); } .aleric-dark .tp-footer-wd-widget-form .tp-input { border: 1px solid var(--tp-border-3); color: var(--tp-common-white); } .aleric-dark .tp-footer-wd-social a { border: 1px solid var(--tp-border-3); color: var(--tp-grey-2); } .aleric-dark .tp-footer-wd-social a:hover { color: var(--tp-common-black); } .aleric-dark .tp-footer-sa-widget .tp-footer-wd-social a:hover { color: var(--tp-common-white); } .aleric-dark .tp-footer-wd-bottom { border-color: var(--tp-border-3); } .aleric-dark .tp-header-pb-bottom { border-top: 1px solid var(--tp-border-3); border-bottom: 1px solid var(--tp-border-3); } .aleric-dark .header-sticky .tp-header-pb-bottom { border-top: none; border-bottom: none; } .aleric-dark .tp-header-pb-contact ul li { color: var(--tp-common-white); } .aleric-dark .tp-header-pb-contact ul li:first-child::before { background: var(--tp-common-white); } .aleric-dark .tp-header-pb-social ul li a { color: var(--tp-common-white); } .aleric-dark .tp-header-pb-social ul li a:hover { color: var(--tp-theme-secondary); } .aleric-dark .tp-header-pb-cart-icon { color: var(--tp-common-white); } .aleric-dark .tp-header-pb-helpline::before { background: var(--tp-border-3); } .aleric-dark .tp-hero-pb-input .tp-input { color: var(--tp-common-white); border-bottom: 1px solid var(--tp-border-3); } .aleric-dark .tp-hero-pb-input .tp-input::-webkit-input-placeholder { /* Chrome/Opera/Safari */ color: var(--tp-grey-2); } .aleric-dark .tp-hero-pb-input .tp-input::-moz-placeholder { /* Firefox 19+ */ color: var(--tp-grey-2); } .aleric-dark .tp-hero-pb-input .tp-input:-moz-placeholder { /* Firefox 4-18 */ color: var(--tp-grey-2); } .aleric-dark .tp-hero-pb-input .tp-input:-ms-input-placeholder { /* IE 10+ Edge*/ color: var(--tp-grey-2); } .aleric-dark .tp-hero-pb-input .tp-input::placeholder { /* MODERN BROWSER */ color: var(--tp-grey-2); } .aleric-dark .tp-hero-pb-input .tp-input:focus { border-color: var(--tp-theme-secondary); } .aleric-dark .tp-hero-pb-bigtitle { background: linear-gradient(180deg, rgba(235, 235, 235, 0.13) 0%, rgba(248, 244, 238, 0) 100%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .aleric-dark .nice-select .list { background-color: var(--tp-common-black); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.11); } .aleric-dark .nice-select .option:hover { background-color: #2c2b2e; color: var(--tp-common-white); } .aleric-dark .tp_text_invert.invert-black-5 > div { background-image: linear-gradient(to right, #fff 50%, #999 50%); } .aleric-dark .tp-about-pb-feature-list ul li a { color: var(--tp-common-white); border: 1px solid var(--tp-border-3); } .aleric-dark .tp-about-pb-feature-icon { border: 1px solid var(--tp-border-3); } .aleric-dark .tp-service-pb-item { border: none; } .aleric-dark .tp-service-pb-border { border-bottom: 1px solid var(--tp-border-3); } .aleric-dark .tp-map-pin-icon { color: var(--tp-common-white); } .aleric-dark .tp-map-popup { background: var(--tp-grey-8); box-shadow: 0 7px 16px 2px rgba(0, 0, 0, 0.06); } .aleric-dark .tp-map-popup-contact { color: var(--tp-common-white); } .aleric-dark .tp-text-pb-item span { color: var(--tp-common-white); -webkit-text-fill-color: var(--tp-common-white); -webkit-text-stroke-color: var(--tp-common-white); -webkit-text-stroke-width: 0; } .aleric-dark .tp-skill-pb-border-2 .tp-skill-pb-numbar.tp-border { border: 1px solid var(--tp-border-3); } .aleric-dark .tp-faq-cst-tab-content .tp-faq-btn .accordion-btn::before { background-color: var(--tp-common-white); } .aleric-dark .tp-faq-cst-tab-content .tp-faq-btn .accordion-btn::after { background-color: var(--tp-common-white); } .aleric-dark .tp-blog-pb-content .tp-blog-meta { border: none; } .aleric-dark .tp-blog-pb-content .tp-blog-meta span.borders { background: var(--tp-grey-2); } .aleric-dark .tp-blog-pb-item { border: 1px solid var(--tp-border-3); } .aleric-dark .tp-blog-pb-btn span { border: 1px solid var(--tp-border-3); } .aleric-dark .cartmini__title a:hover { color: var(--tp-grey-2); } .aleric-dark .cartmini__del { color: var(--tp-common-white); } .aleric-dark .cartmini__checkout-title h4 { color: var(--tp-common-white); } .aleric-dark .cartmini__checkout-title span { color: var(--tp-common-white); } .aleric-dark .cartmini__close-btn { color: var(--tp-common-white); } .aleric-dark .tp-about-md-bigtext { color: rgba(255, 255, 255, 0.05); } .aleric-dark .tp-btn-md-border { border: 1px solid var(--tp-border-3); } .aleric-dark .tp-service-md-icon svg { color: var(--tp-common-white); } .aleric-dark .tp-portfolio-md-tag { border: 1px solid var(--tp-border-3); } .aleric-dark .tp-portfolio-md-border { border-color: var(--tp-border-3); } .aleric-dark .tp-testimonial-md-map { filter: invert(1); } .aleric-dark .tp-text-md-title { opacity: 0.07; } .aleric-dark .tp-blog-md-content { background: var(--tp-grey-8); } .aleric-dark .tp-blog-md-dates { border-bottom: 1px solid var(--tp-border-3); } .aleric-dark .tp-hero-md-video-btn:hover { background: var(--tp-theme-1); color: var(--tp-common-white); } .aleric-dark .tp_text_invert.invert-black-2 > div { background-image: linear-gradient(to right, #fff 50%, #999 50%); } .aleric-dark .tp-bg-common-white-2 { background-color: var(--tp-grey-8); } .aleric-dark .tp-service-sa-item-icon svg { color: var(--tp-common-white); } .aleric-dark .tp-service-sa-pagenation .swiper-pagination-bullet { border: 1px solid var(--tp-border-3); } .aleric-dark .tp-hero-cst-content p { opacity: 1; } .aleric-dark .tp-testimonial-sa-item { border: 1px solid var(--tp-border-3); } .aleric-dark .tp-testimonial-sa-item:hover .popup-video { color: var(--tp-common-white); } .aleric-dark .tp-testimonial-sa-item:hover .popup-video:hover { background: var(--tp-common-nights); } .aleric-dark .tp-blog-sa-border { border-top: 1px solid var(--tp-border-3); } .aleric-dark .coverflow-slider-title-sm { color: var(--tp-common-white); } .aleric-dark .tp-portfolio-creative-slider-main .swiper-pagination-bullet.swiper-pagination-bullet-active circle { stroke: var(--tp-common-white) !important; fill: transparent !important; } .aleric-dark .tp-portfolio-creative-slider-main .swiper-pagination-bullet circle { stroke: var(--tp-common-white) !important; fill: var(--tp-common-white) !important; } .aleric-dark .tp-portfolio-showcase-nav span { color: var(--tp-common-white); border: 1px solid var(--tp-border-3); } .aleric-dark .tp-portfolio-inner-tab-wrap nav .nav-tabs .nav-link { color: var(--tp-common-white); border: 1px solid var(--tp-border-3); } .aleric-dark .tp-portfolio-inner-tab-wrap nav .nav-tabs .nav-link.active, .aleric-dark .tp-portfolio-inner-tab-wrap nav .nav-tabs .nav-link:hover { color: var(--tp-common-white); background-color: var(--tp-grey-8); border-color: var(--tp-grey-8); } .aleric-dark .tp-pd-2-categories span { color: var(--tp-common-white); border: 1px solid var(--tp-border-3); } .aleric-dark .tp-pd-2-title { color: var(--tp-common-white); } .aleric-dark .tp-pd-2-bottom-item span { color: rgba(255, 255, 255, 0.7); } .aleric-dark .tp-pd-2-bottom-item h6 { color: var(--tp-common-white); } .aleric-dark .tp-pd-2-overview-title { color: var(--tp-common-white); } .aleric-dark .tp-pd-2-overview-wrap p { color: rgba(255, 255, 255, 0.6); } .aleric-dark .tp-pd-2-overview-wrap ul li:not(:last-of-type) { border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .aleric-dark .tp-pd-2-overview-wrap ul li { color: var(--tp-common-white); } .aleric-dark .tp-pd-2-dot .swiper-pagination-bullet { background: rgba(255, 255, 255, 0.3); } .aleric-dark .tp-pd-2-dot .swiper-pagination-bullet.swiper-pagination-bullet-active { background-color: var(--tp-common-white); } .aleric-dark .tp-pd-2-step-title { color: var(--tp-common-white); } .aleric-dark .tp-pd-2-step-item-title { color: var(--tp-common-white); } .aleric-dark .tp-pd-2-step-item span { color: rgba(255, 255, 255, 0.6); } .aleric-dark .tp-pd-2-np-content a { color: var(--tp-common-white); border: 1px solid rgba(255, 255, 255, 0.1); } .aleric-dark .tp-pd-2-np-content a:hover { background: var(--tp-common-white); color: var(--tp-common-black); } .aleric-dark .tp-service-details-icon img { filter: invert(1); } .aleric-dark .tp-breadcrumb-wrap { border-top: 1px solid var(--tp-border-3); } .aleric-dark .tp-breadcrumb-list ul li { color: var(--tp-common-white); } .aleric-dark .tp-breadcrumb-list ul li a { color: var(--tp-grey-2); } .aleric-dark .tp-portfolio-details-shedule { background: var(--tp-common-black); border-color: var(--tp-border-3); } .aleric-dark .tp-portfolio-details-shedule ul li { color: var(--tp-common-white); } .aleric-dark .tp-portfolio-details-shedule-btn { background: var(--tp-grey-8); } .aleric-dark .tp-portfolio-details-shedule-btn:hover { background: var(--tp-common-white); color: var(--tp-common-black); } .aleric-dark .tp-service-details-content ul li p { color: var(--tp-grey-2); } .aleric-dark .tp-service-details-content ul li b { color: var(--tp-common-white); } .aleric-dark .tp-portfolio-outcome-bost span { border: 1px solid var(--tp-border-3); } .aleric-dark .tp-portfolio-navigation-wrap { border: 1px solid var(--tp-border-2); } .aleric-dark .tp-portfolio-navigation-grid a { color: var(--tp-grey-2); } .aleric-dark .tp-portfolio-navigation-grid a:hover { opacity: 1; } .aleric-dark .tp-faq-5-wrap .tp-faq-wrap .tp-faq-active { background-color: var(--tp-grey-8); } .aleric-dark .tp-faq-5-wrap .tp-faq-wrap .accordion-item:not(:first-of-type) { border-color: var(--tp-border-3); } .aleric-dark .tp-faq-5-wrap .tp-faq-wrap .accordion-item { background: var(--tp-grey-8); border: transparent; } .aleric-dark .tp-faq-5-wrap .tp-faq-wrap .tp-faq-btn { color: var(--tp-common-white); } .aleric-dark .tp-faq-5-wrap .tp-faq-details-para p { color: var(--tp-grey-2); } .aleric-dark .tp-faq-5-wrap .tp-faq-details-para p span { color: var(--tp-common-white) !important; } .aleric-dark .tp-faq-5-wrap .tp-faq-list-title { color: var(--tp-grey-2); } .aleric-dark .tp-faq-5-wrap .tp-faq-details-para ul li { color: var(--tp-common-white); } .aleric-dark .tp-faq-5-wrap .tp-faq-wrap .tp-faq-active .accordion-btn { color: var(--tp-common-white); } .aleric-dark .tp-faq-5-wrap .tp-faq-wrap .accordion-btn { color: var(--tp-grey-2); } .aleric-dark .tp-counter-cst-2-wrap .tp-counter-cst-item.borders::before { background: linear-gradient(170deg, #232222 0%, #272424 100%); } .aleric-dark .tp_text_invert.invert-black > div { background-image: linear-gradient(to right, #fff 50%, #999 50%); } .aleric-dark .tp-about-pp-skill-white-wrap { border: 1px solid var(--tp-border-3); } .aleric-dark .tp-about-bottom-thumb.white-bg img { filter: invert(0.09); } .aleric-dark .tp-about-bottom-video .popup-video { background: none; } .aleric-dark .tp-about-process-item:hover { border-color: var(--tp-border-3); background: transparent; } .aleric-dark .tp-service-cst-2-wrap { border-top: 1px solid var(--tp-border-3); } .aleric-dark .tp-service-cst-2-wrap .tp-service-cst-item { border-right: 1px solid var(--tp-border-3); } .aleric-dark .tp-service-cst-2-info .tp-service-cst-info-list ul li { color: var(--tp-common-white); } .aleric-dark .tp-service-cst-shape.inner img { filter: invert(1); } .aleric-dark .tp-breadcrumb-3-border { border-top: 1px solid rgba(255, 255, 255, 0.06); } .aleric-dark .tp-awards-wd-top span { color: var(--tp-grey-2); } .aleric-dark .tp-team-value-item.borders { border-bottom: 1px solid var(--tp-border-3); } .aleric-dark .tp-header-cst-wrap.border-none { border-bottom: none; } .aleric-dark .tp-pricing-ai-list ul li::before { background: var(--tp-common-white); } .aleric-dark .tp-product-top-select .tp-select { background-color: var(--tp-common-black); border: solid 1px var(--tp-border-3); } .aleric-dark .tp-product-top-select .tp-select .current { color: var(--tp-common-white); } .aleric-dark .tp-product-top-select .tp-select:after { color: var(--tp-common-white); } .aleric-dark .tp-product-top-select .tp-select .option { color: var(--tp-grey-2); } .aleric-dark .tp-product-title { color: var(--tp-common-white); } .aleric-dark .tp-product-price { color: var(--tp-common-white); } .aleric-dark .tp-product-details-category span { color: var(--tp-grey-2); } .aleric-dark .tp-product-details-title { color: var(--tp-common-white); } .aleric-dark .tp-product-details-stock span { background-color: var(--tp-grey-8); } .aleric-dark .tp-product-details-sort-desc p { color: var(--tp-grey-2); } .aleric-dark .tp-product-details-price.new-price { color: var(--tp-common-white); } .aleric-dark .tp-product-details-price.old-price { color: rgba(255, 255, 255, 0.6); } .aleric-dark .tp-product-details-variation-title { color: var(--tp-common-white); } .aleric-dark .tp-product-details-variation-list button .tp-color-variation-tootltip { background-color: var(--tp-grey-8); } .aleric-dark .tp-product-details-variation-list button .tp-color-variation-tootltip::before { background-color: var(--tp-grey-8); } .aleric-dark .tp-product-details-action-title { color: var(--tp-common-white); } .aleric-dark .tp-product-details-quantity .tp-cart-input[type=text] { color: var(--tp-common-white); border: 1px solid var(--tp-border-3); } .aleric-dark .tp-product-details-quantity .tp-cart-plus, .aleric-dark .tp-product-details-quantity .tp-cart-minus { color: var(--tp-common-white); } .aleric-dark .tp-product-details-add-to-cart-btn { color: var(--tp-common-white); border: 1px solid var(--tp-border-3); } .aleric-dark .tp-product-details-add-to-cart-btn:hover { background: var(--tp-common-white); color: var(--tp-common-black); } .aleric-dark .tp-product-details-buy-now-btn { color: var(--tp-common-black); background-color: var(--tp-common-white); } .aleric-dark .tp-product-details-buy-now-btn:hover { background-color: var(--tp-theme-secondary); border-color: var(--tp-theme-secondary); color: var(--tp-common-white); } .aleric-dark .tp-product-details-action-sm-btn { color: var(--tp-common-white); } .aleric-dark .tp-product-details-action-sm-btn i, .aleric-dark .tp-product-details-action-sm-btn svg { color: var(--tp-common-white); } .aleric-dark .tp-product-details-query-item > span { color: var(--tp-common-white); } .aleric-dark .tp-product-details-query-item p { color: var(--tp-grey-2); } .aleric-dark .tp-product-details-action-sm { border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .aleric-dark .tp-product-details-social span { color: var(--tp-common-white); } .aleric-dark .tp-product-details-social a { color: var(--tp-common-white); border: 1px solid var(--tp-border-3); background: var(--tp-common-black); } .aleric-dark .tp-product-details-social a:hover { background: var(--tp-common-white); color: var(--tp-common-black); } .aleric-dark .tp-product-details-msg ul li { color: var(--tp-grey-2); } .aleric-dark .tp-product-details-msg ul li::after { filter: invert(1); } .aleric-dark .tp-product-details-payment { background: var(--tp-grey-8); } .aleric-dark .tp-product-details-payment p { color: var(--tp-common-white); } .aleric-dark .tp-product-details-quantity .tp-cart-plus:hover, .aleric-dark .tp-product-details-quantity .tp-cart-minus:hover { background-color: var(--tp-common-white); color: var(--tp-common-black); } .aleric-dark .tp-product-details-tab-nav .nav-tabs .nav-link { color: rgba(255, 255, 255, 0.6); } .aleric-dark .tp-product-details-tab-nav .nav-tabs .nav-link.active, .aleric-dark .tp-product-details-tab-nav .nav-tabs .nav-link:hover { color: var(--tp-common-white); } .aleric-dark .tp-product-details-additional-info table tr td:first-child { background-color: var(--tp-grey-8); color: var(--tp-common-white); } .aleric-dark .tp-product-details-additional-info table tr:not(:last-child) { border-bottom: 1px solid var(--tp-border-3); } .aleric-dark .tp-product-details-additional-info table { border: 1px solid var(--tp-border-3); } .aleric-dark .tp-product-details-desc-title { color: var(--tp-common-white); } .aleric-dark .tp-product-details-desc-content p { color: var(--tp-grey-2); } .aleric-dark .tp-product-details-tab-nav .nav-tabs { border-bottom: 1px solid var(--tp-border-3); } .aleric-dark .tp-product-details-review-number { border: 1px solid transparent; background-color: var(--tp-grey-8); } .aleric-dark .tp-product-details-review-number-title { color: var(--tp-common-white); } .aleric-dark .tp-product-details-review-summery-value span { color: var(--tp-common-white); } .aleric-dark .tp-product-details-review-summery-rating p { color: var(--tp-grey-2); } .aleric-dark .tp-product-details-review-title { color: var(--tp-common-white); } .aleric-dark .tp-product-details-review-avater-title { color: var(--tp-common-white); } .aleric-dark .tp-product-details-review-avater-meta { color: var(--tp-grey-2); } .aleric-dark .tp-product-details-review-avater-comment p { color: var(--tp-grey-2); } .aleric-dark .tp-product-details-review-rating-percent span { color: var(--tp-common-white); } .aleric-dark .tp-product-details-review-form-title { color: var(--tp-common-white); } .aleric-dark .tp-product-details-review-form > p { color: var(--tp-grey-2); } .aleric-dark .tp-product-details-review-form-rating p { color: var(--tp-grey-2); } .aleric-dark .tp-product-details-review-input-title label { color: var(--tp-common-white); } .aleric-dark .tp-product-details-review-input input, .aleric-dark .tp-product-details-review-input textarea { border-color: transparent; background: var(--tp-grey-8); color: var(--tp-common-white); } .aleric-dark .tp-product-details-review-remeber label { color: var(--tp-grey-2); } .aleric-dark .tp-product-details-review-remeber label::before { color: var(--tp-common-white); } .aleric-dark .tp-product-details-review-remeber label::after { border: 1px solid var(--tp-border-3); } .aleric-dark .tp-product-details-review-btn { color: var(--tp-common-black); background-color: var(--tp-common-white); } .aleric-dark .tp-product-details-review-btn:hover { background: var(--tp-theme-secondary); color: var(--tp-common-white); } .aleric-dark .tp-product-details-bottom { border-bottom: 1px solid var(--tp-border-3); } .aleric-dark .tp-cart-list thead th { color: var(--tp-common-white); } .aleric-dark .tp-cart-list thead { background-color: var(--tp-grey-8); } .aleric-dark .tp-cart-title a { color: var(--tp-common-white); } .aleric-dark .tp-cart-title a:hover { color: var(--tp-theme-secondary); } .aleric-dark .tp-cart-list tr td .tp-cart-action-btn { color: var(--tp-grey-2); } .aleric-dark .tp-cart-list tr td .tp-cart-action-btn:hover { color: #FF1826; } .aleric-dark .tp-cart-price span { color: var(--tp-common-white); } .aleric-dark .tp-cart-list tr td { border-color: var(--tp-border-3); } .aleric-dark .tp-cart-update-btn { color: var(--tp-common-white); border: 1px solid var(--tp-border-3); } .aleric-dark .tp-cart-coupon-input button { color: var(--tp-common-black); background-color: var(--tp-common-white); } .aleric-dark .tp-cart-coupon-input input { background: var(--tp-grey-8); color: var(--tp-common-white); } .aleric-dark .tp-cart-coupon-input input::placeholder { color: var(--tp-grey-2); } .aleric-dark .tp-cart-checkout-wrapper { background: var(--tp-grey-8); } .aleric-dark .tp-cart-checkout-top span { color: var(--tp-common-white); } .aleric-dark .tp-cart-checkout-top { border-bottom: 1px solid var(--tp-border-3); } .aleric-dark .tp-cart-checkout-shipping-title { color: var(--tp-common-white); } .aleric-dark .tp-cart-checkout-shipping-option label { color: var(--tp-grey-2); } .aleric-dark .tp-cart-checkout-shipping-option label span { color: var(--tp-common-white); } .aleric-dark .tp-cart-checkout-shipping-option label::after { border: 1px solid var(--tp-border-3); } .aleric-dark .tp-cart-checkout-shipping-option label::before { background-color: var(--tp-common-white); } .aleric-dark .tp-cart-checkout-shipping-option input:checked + label::after { border-color: var(--tp-common-white); } .aleric-dark .tp-cart-checkout-total span { color: var(--tp-common-white); } .aleric-dark .tp-cart-checkout-total span { color: var(--tp-common-white); } .aleric-dark .tp-cart-checkout-btn { color: var(--tp-common-black); background-color: var(--tp-common-white); } .aleric-dark .tp-cart-checkout-btn:hover { color: var(--tp-common-white); background: var(--tp-theme-secondary); } .aleric-dark .tp-cart-checkout-shipping { border-bottom: 1px solid var(--tp-border-3); } .aleric-dark .tp-cart-coupon-input-box label { color: var(--tp-common-white); } .aleric-dark .tp-checkout-verify-reveal { border: 1px dashed var(--tp-border-3); color: var(--tp-common-white); } .aleric-dark .tp-checkout-verify-reveal button { color: var(--tp-common-white); } .aleric-dark .tp-checkout-verify-reveal button::after { background-color: var(--tp-common-white); } .aleric-dark .tp-return-customer { background: var(--tp-grey-8); } .aleric-dark .tp-return-customer-input label { color: var(--tp-common-white); } .aleric-dark .tp-return-customer-input input, .aleric-dark .tp-return-customer-input textarea { color: var(--tp-common-white); background: var(--tp-common-black); } .aleric-dark .tp-return-customer-input input::placeholder, .aleric-dark .tp-return-customer-input textarea::placeholder { color: var(--tp-grey-2); } .aleric-dark .tp-checkout-btn { color: var(--tp-common-black); background-color: var(--tp-common-white); } .aleric-dark .tp-checkout-btn:hover { border-color: var(--tp-border-3); background: var(--tp-common-black); color: var(--tp-common-white); } .aleric-dark .tp-return-customer-forgot a::after { background-color: var(--tp-common-white); content: ""; } .aleric-dark .tp-return-customer-forgot a { color: var(--tp-common-white); } .aleric-dark .tp-return-customer-remeber label { color: var(--tp-common-white); } .aleric-dark .tp-return-customer-remeber label::after { border: 1px solid var(--tp-border-3); } .aleric-dark .tp-checkout-bill-area { background: var(--tp-grey-8); } .aleric-dark .tp-checkout-bill-title { color: var(--tp-common-white); } .aleric-dark .tp-checkout-input label { color: var(--tp-common-white); } .aleric-dark .tp-checkout-input input, .aleric-dark .tp-checkout-input textarea { color: var(--tp-common-white); background: var(--tp-common-black); } .aleric-dark .tp-checkout-input input:focus, .aleric-dark .tp-checkout-input textarea:focus { background: transparent; border-color: var(--tp-border-3); } .aleric-dark .tp-checkout-input input::placeholder, .aleric-dark .tp-checkout-input textarea::placeholder { color: var(--tp-grey-2); } .aleric-dark .tp-checkout-input .tp-select { color: var(--tp-common-white); background: var(--tp-common-black); } .aleric-dark .tp-checkout-input .tp-select .current { color: var(--tp-grey-2); } .aleric-dark .tp-checkout-option label { color: var(--tp-common-white); } .aleric-dark .tp-checkout-option label::after { border: 1px solid var(--tp-border-3); } .aleric-dark .tp-checkout-place { background: var(--tp-grey-8); } .aleric-dark .tp-checkout-place-title { color: var(--tp-common-white); } .aleric-dark .tp-order-info-list ul li.tp-order-info-list-desc p { color: var(--tp-grey-2); } .aleric-dark .tp-order-info-list ul li:not(:last-child) { border-bottom: 1px solid var(--tp-border-3); } .aleric-dark .tp-order-info-list ul li.tp-order-info-list-header h4 { color: var(--tp-common-white); } .aleric-dark .tp-order-info-list ul li span { color: var(--tp-common-white); } .aleric-dark .tp-order-info-list ul li.tp-order-info-list-shipping span label span { color: var(--tp-common-white); } .aleric-dark .tp-order-info-list ul li.tp-order-info-list-shipping span label::after { border: 1px solid var(--tp-border-3); } .aleric-dark .tp-order-info-list ul li.tp-order-info-list-shipping span label::before { background-color: var(--tp-common-white); } .aleric-dark .tp-checkout-payment-item label { color: var(--tp-common-white); } .aleric-dark .tp-checkout-payment-item label::after { border: 1px solid var(--tp-border-3); } .aleric-dark .tp-checkout-payment-item label::before { background-color: var(--tp-common-white); } .aleric-dark .tp-checkout-payment-item label a::after { background-color: var(--tp-common-white); } .aleric-dark .tp-checkout-payment { border-bottom: 1px solid var(--tp-border-3); } .aleric-dark .profile__btn .tp-btn-cart { color: var(--tp-common-black); background-color: var(--tp-common-white); } .aleric-dark .profile__btn .tp-btn-cart:hover { background: transparent; border-color: var(--tp-border-3); color: var(--tp-common-white); } .aleric-dark .tp-login-wrapper { background: var(--tp-grey-8); } .aleric-dark .tp-login-title { color: var(--tp-common-white); } .aleric-dark .tp-login-top p { color: var(--tp-grey-2); } .aleric-dark .tp-login-input-title label { color: var(--tp-common-white); } .aleric-dark .tp-login-input input { color: var(--tp-common-white); border: 1px solid var(--tp-border-3); } .aleric-dark .tp-login-input input::placeholder { color: var(--tp-grey-2); } .aleric-dark .tp-login-btn { color: var(--tp-common-black); border: 1px solid transparent; background: var(--tp-common-white); } .aleric-dark .tp-login-btn:hover { color: var(--tp-common-white); background: var(--tp-common-black); } .aleric-dark .tp-login-top p a { color: var(--tp-common-white); } .aleric-dark .tp-login-option-item a { color: var(--tp-common-white); border: 1px solid var(--tp-border-3); } .aleric-dark .tp-login-option-item a img.apple { filter: invert(1); } .aleric-dark .tp-login-mail::after { background-color: var(--tp-border-3); } .aleric-dark .tp-login-mail p { color: var(--tp-common-white); background-color: var(--tp-common-black); } .aleric-dark .tp-login-mail p a { color: var(--tp-common-white); } .aleric-dark .tp-login-remeber label { color: var(--tp-common-white); } .aleric-dark .tp-login-remeber label::after { border: 1px solid var(--tp-border-3); } .aleric-dark .tp-login-input-eye span { color: var(--tp-common-white); } .aleric-dark .tp-login-forgot a { color: var(--tp-common-white); } .aleric-dark .tp-about-process-2-item ul li { color: var(--tp-common-white); } .aleric-dark .tp-error-title { color: var(--tp-common-white); } .aleric-dark .tp-error-title-sm { color: var(--tp-common-white); } .aleric-dark .tp-error-content p { color: var(--tp-grey-2); } .aleric-dark .tp-error-content .tp-btn { background-color: var(--tp-common-white); color: var(--tp-common-black); } .aleric-dark .tp-error-content .tp-btn:hover { border-color: var(--tp-common-white); color: var(--tp-common-white); background: transparent; } .aleric-dark .tp-blog-pagenation-nav { color: var(--tp-common-white); border: 1px solid var(--tp-border-2); } .aleric-dark .tp-blog-pagenation-nav:hover { color: var(--tp-common-black); } .aleric-dark .black-logo .tp-brand-item img { filter: invert(0); } .aleric-dark .tp-blog-top-content { background: var(--tp-grey-8); } .aleric-dark .tp-postbox-text { color: var(--tp-grey-2); } .aleric-dark .tp-sidebar-search-input input { background: var(--tp-grey-8); color: var(--tp-common-white); } .aleric-dark .tp-sidebar-search-input input::placeholder { color: var(--tp-grey-2); } .aleric-dark .tp-sidebar-search-input button { color: var(--tp-common-white); } .aleric-dark .tp-sidebar-widget { border: 1px solid var(--tp-border-2); } .aleric-dark .tp-sidebar-widget-title { color: var(--tp-common-white); } .aleric-dark .tp-sidebar-widget-content ul li a { color: var(--tp-grey-2); } .aleric-dark .tp-sidebar-widget-content ul li a:hover { color: var(--tp-common-white); } .aleric-dark .tp-sidebar-rc-post-tag { color: var(--tp-grey-2); border: 1px solid var(--tp-border-3); } .aleric-dark .tp-sidebar-rc-post-title { color: var(--tp-common-white); } .aleric-dark .tp-sidebar-rc-post-dates { color: var(--tp-grey-2); } .aleric-dark .tp-sidebar-rc-tag ul li a { color: var(--tp-grey-2); background: var(--tp-grey-8); } .aleric-dark .tp-sidebar-rc-tag ul li a:hover { background: var(--tp-theme-primary); color: var(--tp-common-black); } .aleric-dark .tp-sidebar-banner { border: 1px solid var(--tp-border-3); } .aleric-dark .tp-blog-details-link-wrap { border: 1px solid var(--tp-border-3); } .aleric-dark .tp-blog-details-dates span { color: var(--tp-grey-2); } .aleric-dark .tp-blog-details-link a { border: 1px solid var(--tp-border-3); color: var(--tp-common-white); } .aleric-dark .tp-blog-details-link a:hover { color: var(--tp-common-black); background: var(--tp-common-white); } .aleric-dark .tp-blog-details-tag ul li a { color: var(--tp-grey-2); border: 1px solid var(--tp-border-3); } .aleric-dark .tp-blog-details-tag ul li a:hover { color: var(--tp-common-black); } .aleric-dark .tp-blog-details-social ul li a { border: 1px solid var(--tp-border-3); color: var(--tp-grey-2); } .aleric-dark .tp-blog-details-social ul li a:hover { color: var(--tp-common-black); } .aleric-dark .postbox__comment-name h5 { color: var(--tp-common-white); } .aleric-dark .postbox__comment-name span { color: var(--tp-grey-2); } .aleric-dark .postbox__comment-text p { color: var(--tp-grey-2); } .aleric-dark .postbox__comment-reply a { color: var(--tp-common-white); border: 1px solid var(--tp-border-3); } .aleric-dark .postbox__comment-reply a:hover { background: var(--tp-common-white); color: var(--tp-common-black); } .aleric-dark .tp-postbox-details-form { background: var(--tp-grey-8); } .aleric-dark .tp-postbox-details-input .tp-input, .aleric-dark .tp-postbox-details-input .tp-textarea, .aleric-dark .tp-postbox-details-input .tp-select { color: var(--tp-common-white); background: transparent; border-color: var(--tp-border-3); } .aleric-dark .tp-postbox-details-remember .tp-checkbox { background: var(--tp-common-black); border: 1px solid var(--tp-border-3); } .aleric-dark .tp-postbox-details-remember .tp-checkbox:checked::after { color: var(--tp-common-white); } .aleric-dark .tp-blog-details-2-social ul { border-right: 1px solid var(--tp-border-3); } .aleric-dark .tp-blog-details-2-social ul li a { color: var(--tp-grey-2); } .aleric-dark .tp-blog-details-2-social ul li a i:hover { color: var(--tp-common-white); background: var(--tp-grey-8); } .aleric-dark .tp-postbox-details-remember label { color: var(--tp-grey-2); } .aleric-dark .tp-contact-number { border: 1px solid var(--tp-border-2); } .aleric-dark .tp-contact-email { color: var(--tp-grey-2); } .aleric-dark .tp-contact-email:hover { color: var(--tp-common-white); } .aleric-dark .tp-contact-us-form-wrapper { background: var(--tp-grey-8); } .aleric-dark .tp-contact-us-title { color: var(--tp-common-white); } .aleric-dark .cn-contactform-support-text span { color: var(--tp-common-white); } .aleric-dark .tp-contact-us-content { background: var(--tp-grey-8); } .aleric-dark .tp-contact-us-info-title { color: var(--tp-common-white); border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .aleric-dark .tp-contact-us-info-details a { color: rgba(255, 255, 255, 0.7); } .aleric-dark .tp-contact-us-info-details a:hover { color: var(--tp-common-white); } .aleric-dark .tp-portfolio-details-2-cetagory ul li span { color: var(--tp-common-white); } .aleric-dark .tp-portfolio-details-2-cetagory ul li:not(:last-child) { border-bottom: 1px solid var(--tp-border-3); } .aleric-dark .tp-portfolio-details-2-border { border-bottom: 1px solid var(--tp-border-3); } .aleric-dark .tp-portfolio-details-2-tag-border { border-bottom: 1px solid var(--tp-border-3); } .aleric-dark .tp-portfolio-details-2-tag a { background: var(--tp-grey-8); color: var(--tp-common-white); } .aleric-dark .tp-portfolio-details-2-tag a:hover { background: var(--tp-common-black-1); } .aleric-dark .tp-portfolio-details-2-navigation { border: none; border-bottom: 1px solid var(--tp-border-3); } .aleric-dark .tp-portfolio-details-2-subtitle { border: none; } /*----------------------------------------*/ /* 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); } /*# sourceMappingURL=main.css.map */