/*----------------------------------------------------------------------------------- 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.1 ----------------------------------------------------------------------------------- /************ 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); } .al-hero-pg-social a svg, .tp-product-details-action-sm-btn svg, .tp-product-details-wishlist-btn svg, .tp-perspective-social-info span svg { -webkit-transform: translateY(-2px); -moz-transform: translateY(-2px); -ms-transform: translateY(-2px); -o-transform: translateY(-2px); transform: translateY(-2px); } /* transform */ .al-banner-shop-thumb { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } @font-face { font-family: "Morganite-Bold"; src: url("../fonts/Morganite-ExtraBold.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: 'Familjen Grotesk', sans-serif; --tp-ff-heading: 'Familjen Grotesk', sans-serif; --tp-ff-p: 'Familjen Grotesk', sans-serif; --tp-ff-teko: 'Familjen Grotesk', sans-serif; --tp-ff-funnel: 'Familjen Grotesk', sans-serif; --tp-ff-sora: 'Sora', sans-serif; --tp-ff-dm: 'Familjen Grotesk', sans-serif; --tp-ff-inter: 'Familjen Grotesk', sans-serif; --tp-ff-poppins: 'Familjen Grotesk', sans-serif; --tp-ff-playfair: 'Playfair Display', serif; --tp-ff-jakarta: 'Plus Jakarta Sans', sans-serif; --tp-ff-familjen: 'Familjen Grotesk', sans-serif; --tp-ff-morganite-bold: 'Morganite-Bold', sans-serif; --tp-ff-morganite-semibold: 'Morganite-SemiBold', sans-serif; --tp-ff-fontawesome: "Font Awesome 6 Pro"; /** @color declaration */ --tp-common-white: #fff; --tp-common-white-2: #f0f0f0; --tp-common-black: #030303; --tp-common-black-1: #10302a; --tp-common-black-2: #0d0d0d; --tp-common-black-3: #000; --tp-common-black-4: #405955; --tp-common-black-5: #111112; --tp-common-black-6: #333333; --tp-common-black-7: #121314; --tp-common-yellow: #fff112; --tp-common-yellow-2: #FFD500; --tp-common-green: #00dd80; --tp-common-green-2: #b4e717; --tp-common-green-3: #d5ffdd; --tp-common-blue: #5956e9; --tp-common-nights: #7D5DFF; --tp-common-meteor: #E62415; --tp-common-angry: #f14f44; --tp-common-sugar : #FFFBF5; --tp-common-cream : #b7ab98; --tp-common-pink : #eb5939; --tp-grey-1: #525252; --tp-grey-2: #999; --tp-grey-3: #f8f8f8; --tp-grey-4: #aaa; --tp-grey-5: #f3f1f2; --tp-grey-6: #AFB7B6; --tp-grey-7: #5c5c5c; --tp-grey-8: #101010; --tp-theme-primary: #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; 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: 30px; } h5 { font-size: 20px; } h6 { font-size: 16px; } ul { margin: 0px; padding: 0px; } p { font-family: var(--tp-ff-p); color: var(--tp-grey); font-weight: 400; font-size: 16px; line-height: 26px; margin-bottom: 15px; } img { max-width: 100%; } a:not([href]):not([class]), a:not([href]):not([class]):hover { color: inherit; text-decoration: none; } a:focus, .button:focus { text-decoration: none; outline: none; } a:focus, a:hover { color: inherit; text-decoration: none; } a, button { color: inherit; outline: none; border: none; background: transparent; } button:hover { cursor: pointer; } button:focus { outline: 0; } .uppercase { text-transform: uppercase; } .capitalize { text-transform: capitalize; } input[type=text], input[type=email], input[type=tel], input[type=number], input[type=password], input[type=url], textarea { outline: none; background-color: var(--tp-common-white); height: 52px; width: 100%; line-height: 52px; font-size: 16px; color: var(--tp-theme-primary); padding-left: 25px; padding-right: 25px; border-radius: 4px; border: 1px solid var(--tp-common-white); } input[type=text]::-webkit-input-placeholder, input[type=email]::-webkit-input-placeholder, input[type=tel]::-webkit-input-placeholder, input[type=number]::-webkit-input-placeholder, input[type=password]::-webkit-input-placeholder, input[type=url]::-webkit-input-placeholder, textarea::-webkit-input-placeholder { /* Chrome/Opera/Safari */ color: var(--tp-grey-2); } input[type=text]::-moz-placeholder, input[type=email]::-moz-placeholder, input[type=tel]::-moz-placeholder, input[type=number]::-moz-placeholder, input[type=password]::-moz-placeholder, input[type=url]::-moz-placeholder, textarea::-moz-placeholder { /* Firefox 19+ */ color: var(--tp-grey-2); } input[type=text]:-moz-placeholder, input[type=email]:-moz-placeholder, input[type=tel]:-moz-placeholder, input[type=number]:-moz-placeholder, input[type=password]:-moz-placeholder, input[type=url]:-moz-placeholder, textarea:-moz-placeholder { /* Firefox 4-18 */ color: var(--tp-grey-2); } input[type=text]:-ms-input-placeholder, input[type=email]:-ms-input-placeholder, input[type=tel]:-ms-input-placeholder, input[type=number]:-ms-input-placeholder, input[type=password]:-ms-input-placeholder, input[type=url]:-ms-input-placeholder, textarea:-ms-input-placeholder { /* IE 10+ Edge*/ color: var(--tp-grey-2); } input[type=text]::placeholder, input[type=email]::placeholder, input[type=tel]::placeholder, input[type=number]::placeholder, input[type=password]::placeholder, input[type=url]::placeholder, textarea::placeholder { /* MODERN BROWSER */ color: var(--tp-grey-2); } [dir=rtl] input[type=text], [dir=rtl] input[type=email], [dir=rtl] input[type=tel], [dir=rtl] input[type=number], [dir=rtl] input[type=password], [dir=rtl] input[type=url], [dir=rtl] textarea { text-align: right; } input[type=text]:focus, input[type=email]:focus, input[type=tel]:focus, input[type=number]:focus, input[type=password]:focus, input[type=url]:focus, textarea:focus { border-color: var(--tp-theme-primary); } input[type=text]:focus::placeholder, input[type=email]:focus::placeholder, input[type=tel]:focus::placeholder, input[type=number]:focus::placeholder, input[type=password]:focus::placeholder, input[type=url]:focus::placeholder, textarea:focus::placeholder { opacity: 0; } textarea { line-height: 1.4; padding-top: 17px; padding-bottom: 17px; } input[type=color] { appearance: none; -moz-appearance: none; -webkit-appearance: none; background: none; border: 0; cursor: pointer; height: 100%; width: 100%; padding: 0; border-radius: 50%; } *::-moz-selection { background: var(--tp-common-black); color: var(--tp-common-white); text-shadow: none; } ::-moz-selection { background: var(--tp-common-black); color: var(--tp-common-white); text-shadow: none; } ::selection { background: var(--tp-common-black); color: var(--tp-common-white); text-shadow: none; } *::-moz-placeholder { color: var(--tp-theme-primary); font-size: 14px; opacity: 1; } *::placeholder { color: var(--tp-theme-primary); font-size: 14px; opacity: 1; } .z-index { z-index: 1; } .z-index-2 { z-index: 2; } .z-index-3 { z-index: 3; } .z-index-4 { z-index: 4; } .z-index-5 { z-index: 5; } .z-index-6 { z-index: 6; } .z-index-7 { z-index: 7; } .z-index-8 { z-index: 8; } .gx-10 { --bs-gutter-x: 10px; } .gx-12 { --bs-gutter-x: 12px; } .gx-15 { --bs-gutter-x: 15px; } .gx-20 { --bs-gutter-x: 20px; } .gx-23 { --bs-gutter-x: 23px; } .gx-25 { --bs-gutter-x: 25px; } .gx-30 { --bs-gutter-x: 30px; } .gx-35 { --bs-gutter-x: 35px; } .gx-40 { --bs-gutter-x: 40px; } .gx-45 { --bs-gutter-x: 45px; } .gx-50 { --bs-gutter-x: 50px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .gx-50 { --bs-gutter-x: 15px; } } .gx-60 { --bs-gutter-x: 60px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .gx-60 { --bs-gutter-x: 30px; } } .gx-90 { --bs-gutter-x: 90px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .gx-90 { --bs-gutter-x: 50px; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .gx-90 { --bs-gutter-x: 30px; } } /*--------------------------------- 1.1 Common Classes ---------------------------------*/ .w-img img { width: 100%; } .m-img img { max-width: 100%; } .hover-text-white:hover { color: var(--tp-common-white); } .hover-text-black:hover { color: var(--tp-common-black); } .hover-text-primary:hover { color: var(--tp-theme-primary); } .hover-text-grey:hover { color: var(--tp-grey-2); } .section-m-spacing { margin-top: -1px; } .text-italic { font-style: italic; } .fix { overflow: hidden; } .clear { clear: both; } .z-index-1 { z-index: 1; } .z-index-2 { z-index: 2; } .z-index-3 { z-index: 3; } .z-index-4 { z-index: 4; } .z-index-5 { z-index: 5; } .z-index-6 { z-index: 6; } .z-index-7 { z-index: 7; } .z-index-8 { z-index: 8; } .z-index-9 { z-index: 9; } .z-index-10 { z-index: 10; } .z-index-m-1 { z-index: -1; } .z-index-m-1 { z-index: -1; } .overflow-y-visible { overflow-x: hidden; overflow-y: visible; } .p-relative { position: relative; } .p-absolute { position: absolute; } .p-inherit { position: inherit !important; } .bg-position { background-position: center; background-size: cover; background-repeat: no-repeat; } /* transfrom */ .tp-transfrom { transform: translateY(-1px) !important; } .tp-transfrom-2 { transform: translateY(-2px); } .tp-transfrom-3 { transform: translateY(-3px); } .tp-transfrom-4 { transform: translateY(-4px); } .tp-round-4 { border-radius: 4px; } .tp-round-8 { border-radius: 8px; } .tp-round-10 { border-radius: 10px; } .tp-round-20 { border-radius: 20px; } .tp-round-24 { border-radius: 24px; } .tp-round-26 { border-radius: 26px; } .tp-round-32 { border-radius: 32px; } .tp-round-36 { border-radius: 36px; } .lh-0 { line-height: 0; } .lh-22 { line-height: 22px; } .lh-24 { line-height: 24px; } .lh-28 { line-height: 28px; } .lh-30 { line-height: 30px; } .lh-32 { line-height: 32px; } .lh-34 { line-height: 34px; } .lh-36 { line-height: 36px; } .lh-38 { line-height: 38px; } .lh-110-per { line-height: 1.1; } .lh-120-per { line-height: 1.2; } .lh-130-per { line-height: 1.3; } .lh-140-per { line-height: 1.4; } .lh-150-per { line-height: 1.5; } .lh-160-per { line-height: 1.6; } .lh-180-per { line-height: 1.8; } .ls-0 { letter-spacing: 0; } .ls-1 { letter-spacing: 0.01em; } .ls-m-1 { letter-spacing: -0.01em; } .ls-m-2 { letter-spacing: -0.02em; } .ls-m-3 { letter-spacing: -0.03em; } .ls-m-4 { letter-spacing: -0.04em; } .ls-m-5 { letter-spacing: -0.05em; } .ls-m-6 { letter-spacing: -0.06em; } .opacity-8 { opacity: 0.8; } .hover-opacity-1:hover { opacity: 1; } .underline-black { background-image: linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor); background-size: 0 1px, 0 1px; background-position: 100% 100%, 0 100%; background-repeat: no-repeat; transition: background-size 0.3s linear; -webkit-transition: all 0.4s ease 0.3s 0s ease-out; -moz-transition: all 0.4s ease 0.3s 0s ease-out; -ms-transition: all 0.4s ease 0.3s 0s ease-out; -o-transition: all 0.4s ease 0.3s 0s ease-out; transition: all 0.4s ease 0.3s 0s ease-out; } .underline-black:hover { background-image: linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor); background-size: 0 1px, 100% 1px; background-position: 100% 100%, 0 100%; background-repeat: no-repeat; transition: background-size 0.3s linear; -webkit-transition: all 0.4s ease 0.3s 0s ease-out; -moz-transition: all 0.4s ease 0.3s 0s ease-out; -ms-transition: all 0.4s ease 0.3s 0s ease-out; -o-transition: all 0.4s ease 0.3s 0s ease-out; transition: all 0.4s ease 0.3s 0s ease-out; } .underline-white { background-image: linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor); background-size: 0 1px, 0 1px; background-position: 100% 100%, 0 100%; background-repeat: no-repeat; transition: background-size 0.3s linear; -webkit-transition: all 0.4s ease 0.3s 0s ease-out; -moz-transition: all 0.4s ease 0.3s 0s ease-out; -ms-transition: all 0.4s ease 0.3s 0s ease-out; -o-transition: all 0.4s ease 0.3s 0s ease-out; transition: all 0.4s ease 0.3s 0s ease-out; } .underline-white:hover { background-image: linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor); background-size: 0 1px, 100% 1px; background-position: 100% 100%, 0 100%; background-repeat: no-repeat; transition: background-size 0.3s linear; -webkit-transition: all 0.4s ease 0.3s 0s ease-out; -moz-transition: all 0.4s ease 0.3s 0s ease-out; -ms-transition: all 0.4s ease 0.3s 0s ease-out; -o-transition: all 0.4s ease 0.3s 0s ease-out; transition: all 0.4s ease 0.3s 0s ease-out; } .tp-transparent { position: absolute; top: 0; left: 0; right: 0; width: 100%; z-index: 3; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .br br { display: none; } } .slide-transtion { -webkit-transition-timing-function: linear; transition-timing-function: linear; } .text-uppercase { text-transform: uppercase; } .img-cover { width: 100%; height: 100%; object-fit: cover; } .counter-row { counter-reset: count; } .p-inherit { position: inherit; } /*--------------------------------- 1.3 Default Spacing ---------------------------------*/ @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .pt-170 { padding-top: 115px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .pt-165 { padding-top: 110px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .pt-160 { padding-top: 100px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .pt-155 { padding-top: 100px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .pt-150 { padding-top: 100px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .pt-145 { padding-top: 100px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .pt-140 { padding-top: 100px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .pt-135 { padding-top: 95px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .pt-130 { padding-top: 90px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .pt-125 { padding-top: 85px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .pt-120 { padding-top: 80px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .pt-115 { padding-top: 75px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .pt-110 { padding-top: 70px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .pt-105 { padding-top: 65px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .pt-100 { padding-top: 60px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .pb-170 { padding-bottom: 100px; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .pt-180 { padding-top: 100px; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .pt-190 { padding-top: 110px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .pb-165 { padding-bottom: 100px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .pb-160 { padding-bottom: 100px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .pb-155 { padding-bottom: 100px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .pb-150 { padding-bottom: 100px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .pb-145 { padding-bottom: 100px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .pb-140 { padding-bottom: 100px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .pb-135 { padding-bottom: 95px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .pb-130 { padding-bottom: 90px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .pb-125 { padding-bottom: 85px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .pb-120 { padding-bottom: 80px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .pb-115 { padding-bottom: 75px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .pb-110 { padding-bottom: 70px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .pb-105 { padding-bottom: 65px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .pb-100 { padding-bottom: 60px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .pb-95 { padding-bottom: 55px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .pb-90 { padding-bottom: 50px; } } /*--------------------------------- 1.2 init style ---------------------------------*/ @media (min-width: 1400px) { .container-1800 { max-width: 1800px; } } @media (min-width: 1400px) { .container-1524 { max-width: 1524px; } } @media (min-width: 1400px) { .container-1646 { max-width: 1646px; } } @media (min-width: 1400px) { .container-1824 { max-width: 1824px; } } @media (min-width: 1400px) { .container-1750 { max-width: 1750px; } } @media (min-width: 1400px) { .container-1380 { max-width: 1380px; } } @media (min-width: 1400px) { .container-1230 { max-width: 1230px; } } @media (min-width: 1400px) { .container-1320 { max-width: 1320px; } } /* Font weight */ .fw-0{ font-weight: 0; } .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-bg-common-theme { background-color: #021352; } .tp-bg-common-anim { background: linear-gradient(90deg, #021352 0%, #A70C7E 50%, #021352 100%); background-size: 300% 300%; animation: tpGradientMove 10s ease infinite; } @keyframes tpGradientMove { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .tp-text-common-black-2 { color: var(--tp-common-black-2); } .tp-bg-common-black-2 { background-color: var(--tp-common-black-2); } .tp-text-common-black-3 { color: var(--tp-common-black-3); } .tp-bg-common-black-3 { background-color: var(--tp-common-black-3); } .tp-text-common-black-4 { color: var(--tp-common-black-4); } .tp-bg-common-black-4 { background-color: var(--tp-common-black-4); } .tp-text-common-black-5 { color: var(--tp-common-black-5); } .tp-bg-common-black-5 { background-color: var(--tp-common-black-5); } .tp-text-common-black-6 { color: var(--tp-common-black-6); } .tp-bg-common-black-6 { background-color: var(--tp-common-black-6); } .tp-text-common-black-7 { color: var(--tp-common-black-7); } .tp-bg-common-black-7 { background-color: var(--tp-common-black-7); } .tp-text-common-yellow { color: var(--tp-common-yellow); } .tp-bg-common-yellow { background-color: var(--tp-common-yellow); } .tp-text-common-yellow-2 { color: var(--tp-common-yellow-2); } .tp-bg-common-yellow-2 { background-color: var(--tp-common-yellow-2); } .tp-text-common-green { color: var(--tp-common-green); } .tp-bg-common-green { background-color: var(--tp-common-green); } .tp-text-common-green-2 { color: var(--tp-common-green-2); } .tp-bg-common-green-2 { background-color: var(--tp-common-green-2); } .tp-text-common-green-3 { color: var(--tp-common-green-3); } .tp-bg-common-green-3 { background-color: var(--tp-common-green-3); } .tp-text-common-blue { color: var(--tp-common-blue); } .tp-bg-common-blue { background-color: var(--tp-common-blue); } .tp-text-common-nights { color: var(--tp-common-nights); } .tp-bg-common-nights { background-color: var(--tp-common-nights); } .tp-text-common-meteor { color: var(--tp-common-meteor); } .tp-bg-common-meteor { background-color: var(--tp-common-meteor); } .tp-text-common-angry { color: var(--tp-common-angry); } .tp-bg-common-angry { background-color: var(--tp-common-angry); } .tp-text-common-sugar { color: var(--tp-common-sugar ); } .tp-bg-common-sugar { background-color: var(--tp-common-sugar ); } .tp-text-common-cream { color: var(--tp-common-cream ); } .tp-bg-common-cream { background-color: var(--tp-common-cream ); } .tp-text-common-pink { color: var(--tp-common-pink ); } .tp-bg-common-pink { background-color: var(--tp-common-pink ); } .tp-text-grey-1 { color: var(--tp-grey-1); } .tp-bg-grey-1 { background-color: var(--tp-grey-1); } .tp-text-grey-2 { color: var(--tp-grey-2); } .tp-bg-grey-2 { background-color: var(--tp-grey-2); } .tp-text-grey-3 { color: var(--tp-grey-3); } .tp-bg-grey-3 { background-color: var(--tp-grey-3); } .tp-text-grey-4 { color: var(--tp-grey-4); } .tp-bg-grey-4 { background-color: var(--tp-grey-4); } .tp-text-grey-5 { color: var(--tp-grey-5); } .tp-bg-grey-5 { background-color: var(--tp-grey-5); } .tp-text-grey-6 { color: var(--tp-grey-6); } .tp-bg-grey-6 { background-color: var(--tp-grey-6); } .tp-text-grey-7 { color: var(--tp-grey-7); } .tp-bg-grey-7 { background-color: var(--tp-grey-7); } .tp-text-grey-8 { color: var(--tp-grey-8); } .tp-bg-grey-8 { background-color: var(--tp-grey-8); } .tp-text-theme-primary { color: var(--tp-theme-primary); } .tp-bg-theme-primary { background-color: var(--tp-theme-primary); } .tp-text-theme-secondary { color: var(--tp-theme-secondary); } .tp-bg-theme-secondary { background-color: var(--tp-theme-secondary); } .tp-text-theme-1 { color: var(--tp-theme-1); } .tp-bg-theme-1 { background-color: var(--tp-theme-1); } .tp-text-border-1 { color: var(--tp-border-1); } .tp-bg-border-1 { background-color: var(--tp-border-1); } .tp-text-border-2 { color: var(--tp-border-2); } .tp-bg-border-2 { background-color: var(--tp-border-2); } .tp-text-border-3 { color: var(--tp-border-3); } .tp-bg-border-3 { background-color: var(--tp-border-3); } .tp-ff-body { font-family: var(--tp-ff-body); } .tp-ff-heading { font-family: var(--tp-ff-heading); } .tp-ff-p { font-family: var(--tp-ff-p); } .tp-ff-teko { font-family: var(--tp-ff-teko); } .tp-ff-funnel { font-family: var(--tp-ff-funnel); } .tp-ff-sora { font-family: var(--tp-ff-sora); } .tp-ff-dm { font-family: var(--tp-ff-dm); } .tp-ff-inter { font-family: var(--tp-ff-inter); } .tp-ff-poppins { font-family: var(--tp-ff-poppins); } .tp-ff-playfair { font-family: var(--tp-ff-playfair); } .tp-ff-jakarta { font-family: var(--tp-ff-jakarta); } .tp-ff-familjen { font-family: var(--tp-ff-familjen); } .tp-ff-morganite-bold { font-family: var(--tp-ff-morganite-bold); } .tp-ff-morganite-semibold { font-family: var(--tp-ff-morganite-semibold); } .tp-ff-fontawesome { font-family: var(--tp-ff-fontawesome); } /*----------------------------------------*/ /* 2.3 scrollToTop /*----------------------------------------*/ .scrollToTop { display: none !important; height: 55px; width: 55px; position: fixed; bottom: 20px; right: 20px; background-color: #cbc6c6; border-radius: 50%; overflow: hidden; cursor: pointer; z-index: 999; transition: 0.5s ease all; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .scrollToTop { height: 40px; width: 40px; } } .scrollToTop.active-progress { display: block !important; } .scrollToTop:hover { transform: translateY(-15%); } .scrollToTop .arrowUp { position: absolute; left: 0; top: 0; z-index: 3; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--tp-common-white); 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: #021352; transition: all 0.3s; border: 1px solid #021352; } .scrollToTop .water svg use { margin-bottom: -1px; position: relative; bottom: -1px; fill: #021352 !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; width: 165px; z-index: 1; transition: all 0.4s ease; margin: 0; } .tp-btn-ai::after { content: ""; position: absolute; top: -2px; bottom: -2px; left: -2px; right: -2px; z-index: -2; border-radius: 101px; background: #A70C7E; -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-image: -webkit-linear-gradient(90deg #A70C7E 0%, #A70C7E 50%, #021352 100%); background-image: -moz-linear-gradient(90deg, #A70C7E 0%, #A70C7E 50%, #021352 100%); background-image: -ms-linear-gradient(90deg, #A70C7E 0%, #A70C7E 50%, #021352 100%); background-image: -o-linear-gradient(90deg, #A70C7E 0%, #A70C7E 50%, #021352 100%); background-image: linear-gradient(90deg, #A70C7E 0%, #A70C7E 50%, #021352 100%); 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: white; } .tp-btn-ai-transparent-2::before { background: transparent; } .tp-btn-ai-black::before { background: var(--tp-common-black); } .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: f1e8e3; -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, #A70C7E 0%, #2545BC 100%); background-image: -moz-linear-gradient(90deg, #A70C7E 0%, #2545BC 100%); background-image: -ms-linear-gradient(90deg, #A70C7E 0%, #2545BC 100%); background-image: -o-linear-gradient(90deg, #A70C7E 0%, #2545BC 100%); background-image: linear-gradient(90deg, #A70C7E 0%, #2545BC 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%; } .title-slide-gradient-whatwedo { selector { color:black;} } @-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: 25px !important; 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-inner { position: relative; display: flex; align-items: center; justify-content: center; /* logo stays center */ padding: 0 1rem; min-height: 90px; } /* Left & Right take equal space */ .tp-header-left, .tp-header-right { flex: 1.5; display: flex; align-items: center; } .tp-header-left { justify-content: flex-start; } .tp-header-right { justify-content: flex-end; } .tp-header-center { position: absolute; left: 50%; transform: translateX(-60%); z-index: 10; width: 200px; text-align: center; } /* Menu items spacing */ .tp-main-menu ul { gap: 1.5rem; /* equal spacing between items */ padding: 0; margin: 0; } .tp-main-menu ul li { list-style: none; } /* Contact button spacing */ .tp-header-btn { margin-left: 1.5rem; } .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 /*----------------------------------------*/ /* ——— HIDE MAGIC CURSOR IN HEADER ——— */ .header-cursor-hidden #magic-cursor #ball { opacity: 0 !important; transform: scale(0) !important; transition: opacity 0.1s ease, transform 0.1s ease !important; pointer-events: none !important; } .header-cursor-hidden, .header-cursor-hidden * { cursor: default !important; } /* Header particle canvas – invisible overlay */ .header-particles { position: absolute; inset: 0; pointer-events: none; z-index: 999; display: block; } /* NEW: Darker particle color for #f1e8e3 background */ .header-particle-ambient { fill: #c7b299; /* dark beige, blends with #f1e8e3 */ opacity: 0.15; } .tp-main-menu nav > ul > li { list-style: none; margin: 0 0.1rem; /* Uniform spacing between menu items, 1rem (16px) for balance */ position: relative; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) { .tp-main-menu nav > ul > li { margin:0 0.75rem; /* Adjusted for smaller screens, 12px */ } } @media only screen and (max-width: 991px) { .tp-main-menu nav > ul > li { margin: 0 0.5rem; /* Further reduced for tablets and mobiles, 8px */ } .tp-header-logo img { max-width: 120px; } .tp-header-center { width: 120px; } } .tp-main-menu nav > ul { display: flex; align-items: center; margin: 0; /* Reset any default margins */ padding: 0; /* Reset any default padding */ } .tp-header-right { display: flex; align-items: center; } /* Add margin to right menu to separate from Contact button */ .tp-header-right .tp-main-menu { margin-right: 2rem; /* Small gap between right menu and Contact button */ } /* Style Contact button group for consistent spacing */ .tp-btn-group.tp-btn-vp-group { display: flex; align-items: center; gap: 10px; /* Space between button and SVG icons */ } /* Style mobile menu items */ .tp-mobile-menu-active nav > ul > li { display: block; /* Stack items vertically in mobile menu */ margin: 0; padding: 10px 20px; /* Consistent padding for mobile menu items */ } .tp-mobile-menu-active nav > ul > li, .tp-offcanvas-menu ul > li { display: block; /* Stack items vertically in mobile menu */ margin: 0; padding: 10px 20px; /* Consistent padding for mobile menu items */ } .tp-mobile-menu-active nav > ul > li > a { font-family: var(--tp-ff-sora); font-weight: 600; font-size: 16px; color: var(--tp-common-black-5); padding: 0; /* Remove padding to align with mobile menu style */ text-transform: uppercase; } .tp-mobile-menu-active nav > ul > li > a, .tp-offcanvas-menu ul > li > a { font-family: var(--tp-ff-sora); font-weight: 600; font-size: 16px; color: var(--tp-common-black-5); padding: 0; /* Remove padding to align with mobile menu style */ text-transform: uppercase; } .tp-main-menu nav > ul > li > a { font-family: var(--tp-ff-heading); font-weight: 700; font-size: 18px; text-transform: uppercase; color: var(--tp-common-black); display: inline-block; padding: 28px 0; /* Ensure consistent vertical alignment */ line-height: 1; /* Ensure text aligns vertically */ } /* Center logo and balance content */ .tp-header-logo { flex: 0 0 auto; /* Prevent logo from stretching */ margin: 0 1.5rem; /* Add space around logo to balance with edges */ } .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-header-inner > *:first-child { flex: 1; /* Left section grows */ display: flex; justify-content: flex-start; } .tp-header-inner > *:last-child { flex: 1; /* Right section grows */ display: flex; justify-content: flex-end; padding-left: 2rem; /* Add padding to match left side's effective width */ } .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: #f1e8e3; 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; min-height: 80px; } /* Override any transparent or scroll-based styles */ .tp-header-area, .tp-header-vp-spacing, .header-transparent { background: #f1e8e3 !important; } /* --- UNIVERSAL FIX: Consistent Side Padding --- */ /* This ensures your header content never touches the screen edges */ .tp-header-area .container-1824 { padding-left: 30px; padding-right: 30px; } .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-heading); color: var(--tp-common-black); font-size: 20px; } .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 #080808; border-radius: 100px; display: inline-block; padding: 11px 17px; line-height: 1; } .tp-blog-details-tag ul li a:hover { background: #007bff; color: var(--tp-common-white); border-color: #007bff; } .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: #021352; } .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: 2px 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:#f1e8e3; } .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: #021352; 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: -3px; } @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: 20 -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; margin-right: 30px !important; } @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-pages { font-weight: 500; font-size: 510px; line-height: 73%; letter-spacing: 1px !important; margin-left: 90px !important; } @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-pages { font-size: 383px; /* 450px × (510/600) ≈ 383px */ } } @media only screen and (min-width: 1400px) and (max-width: 1599px) { .tp-hero-vp-title-pages { font-size: 323px; /* 380px × (510/600) ≈ 323px */ } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .tp-hero-vp-title-pages { font-size: 281px; /* 330px × (510/600) ≈ 281px */ } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tp-hero-vp-title-pages { font-size: 230px; /* 270px × (510/600) ≈ 230px */ } } @media only screen and (min-width: 768px) and (max-width: 991px) { .tp-hero-vp-title-pages { font-size: 179px; /* 210px × (510/600) ≈ 179px */ } } @media only screen and (min-width: 576px) and (max-width: 767px) { .tp-hero-vp-title-pages { font-size: 128px; /* 150px × (510/600) ≈ 128px */ } } @media (max-width: 574.98px) { .tp-hero-vp-title-pages { font-size: 78px; /* 92px × (510/600) ≈ 78px */ } } .tp-hero-vp-title { font-weight: 800; font-size: 600px; line-height: 73%; letter-spacing: 30px; } @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:#c0c0f7; 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; } } @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 #08000073; background-color: var(--tp-common-white); } @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: 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-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: 30px 25px 28px 25px; position: absolute; margin: 32px; margin-right: 60px; bottom: 0; left: 0; right: 0; transition: all 0.4s ease; 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-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: #021352; } .tp-service-cst-item:hover .tp-service-cst-content h5, .tp-service-cst-item:hover .tp-service-cst-content p, .tp-service-cst-item:hover .tp-service-cst-content a { color: #ffffff; /* white */ } /* .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 { 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, #021352 0%, #A70C7E 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, #021352 0%, #A70C7E 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: 550px; right: -280px; 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: 500px; 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: 70px; } @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; transition: all 0.3s 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-item { margin-top: 0; transition: all 0.3s 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-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; width:97.7%; margin-left: 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: 97.7%; margin-left: 20px; 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: center; 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: 70px; } @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; transform: translateX(-20px); /* Adjust -20px to your desired shift */ } .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 #021352; 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: #021352; border-color: #021352; 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: #021352; border-color: #021352; 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-black); 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-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: 90px; 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-heading); } @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-heading); } @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: 30px; padding: 6px 25px; margin-right: 10px; font-family: var(--tp-ff-heading); margin-bottom: 20px; border-radius: 30px; display: inline-block; gap: 30px; 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; width: 385px !important; margin-left: 22px !important; } .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: 70vh; } .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-heading); } @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-heading); } .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-heading); } @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: 20px; left: -550px; z-index: 1; width: 24%; } .tp-testimonial-wd-shape svg { width: 100%; transform: scale(3.9) translateY(-15%); transform-origin: bottom left; } @media only screen and (min-width: 992px) and (max-width: 1199px), only 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: #021352; 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-common-black); border: #fff; opacity: 1; } .tp-testimonial-cst-pagenation span.swiper-pagination-bullet-active { background: #021352; } .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; } .parent-container { position: relative; width: 100%; /* Ensure full width */ height: 100%; /* Ensure sufficient height, adjust as needed */ } .parent-container { width: 100vw; /* Full viewport width, adjust as needed */ } @media only screen and (min-width: 992px) and (max-width: 1199px), 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-white-2); } .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: left; 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%; margin-left: 55px; } .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: -1000px; left: -50px; width: 20%; transform: rotate(90deg); transform-origin: center; -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: -90px; left: 30px; width: 30%; -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-3 { -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: 40px; 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, #d2d2f7 0%, rgba(133, 135, 245, 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: 1200px; 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: 20; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only 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: #c0c0f7; 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%, #c0c0f7 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; } .tp-btn-ai { padding: 10px 20px; width: 140px; } .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 select { 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-white); } .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; } .tp-header-btn { margin-left: 0.1rem; /* Small gap between right menu and Contact button */ } .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: #d2d2f7; 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 select { 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-input select::option { 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; } @media (max-width: 574.98px) { .aleric-dark .tp-header-seo-bg { background: transparent; } } /*----------------------------------------*/ /* 7.18 light css start /*----------------------------------------*/ .aleric-light .tp-perspective-slider .tp-perspective-inner .tp-perspective-image:before { background: var(--tp-common-white); } .aleric-light .tp-perspective-slider .tp-perspective-inner .tp-perspective-image:after { background: var(--tp-common-white); } .aleric-light .tp-perspective-social-info span { color: var(--tp-common-blck); } .aleric-light .tp-perspective-scroll a { color: var(--tp-common-black); } .aleric-light .tp-pd-3-subtitle { color: rgba(0, 0, 0, 0.6); } .aleric-light .tp-pd-3-title { color: var(--tp-common-black); } .aleric-light .tp-pd-3-btn { color: var(--tp-common-black); border: 1px solid rgba(0, 0, 0, 0.1); } .aleric-light .tp-pd-3-overview-text p { color: rgba(0, 0, 0, 0.6); } .aleric-light .tp-pd-3-overview-info span { color: rgba(0, 0, 0, 0.5); } .aleric-light .tp-pd-3-overview-info h4 { color: var(--tp-common-black); } .aleric-light .tp-pd-3-navigation-title { color: var(--tp-common-black); } .aleric-light .tp-footer-vp-widget span { color: var(--tp-common-black); } .aleric-light .tp-footer-vp-widget ul li a { color: rgba(0, 0, 0, 0.6); } .aleric-light .tp-footer-it-copyright { color: rgba(0, 0, 0, 0.6); } .aleric-light .tp-footer-it-copyright a { color: var(--tp-common-black); } /*----------------------------------------*/ /* 4.1 hero css /*----------------------------------------*/ .al-hero-seo-bg { padding-top: 260px; background-size: cover; background-position: center; background-repeat: no-repeat; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) { .al-hero-seo-bg { padding-top: 200px; } } @media (max-width: 574.98px) { .al-hero-seo-bg { padding-top: 160px; } } .al-hero-seo-title { font-size: 70px; text-align: center; letter-spacing: -0.02em; color: var(--tp-common-black-1); font-family: var(--tp-ff-inter); } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .al-hero-seo-title { font-size: 65px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .al-hero-seo-title { font-size: 55px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .al-hero-seo-title { font-size: 36px; } } .al-hero-seo-title span { color: var(--tp-common-blue); } .al-hero-seo-title-line { position: absolute; bottom: -25px; left: 30px; } .al-hero-seo-title-box p { font-weight: 400; font-size: 20px; line-height: 1.5; text-align: center; letter-spacing: -0.02em; color: var(--tp-common-black-4); font-family: var(--tp-ff-inter); } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .al-hero-seo-title-box p { font-size: 16px; } .al-hero-seo-title-box p br { display: none; } } .al-hero-seo-playbtn span { height: 46px; width: 46px; line-height: 44px; border-radius: 50%; text-align: center; display: inline-block; margin-right: 10px; color: var(--tp-common-black-1); background-color: var(--tp-common-white); animation: animate-pulse 3s linear infinite; } .al-hero-seo-playbtn span svg { margin-left: 2px; } .al-hero-seo-playbtn i { font-weight: 600; font-size: 22px; display: inline-block; transform: translateY(3px); color: var(--tp-common-black-1); font-family: var(--tp-ff-playfair); } .al-hero-seo-dashboard { position: relative; } .al-hero-seo-dashboard::after { position: absolute; content: ""; bottom: 0; left: 0; height: 220px; width: 100%; background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #fff 90.94%); } .al-hero-seo-shape-1 { position: absolute; bottom: 180px; left: -90px; z-index: 2; } .al-hero-archi-title { font-size: 120px; letter-spacing: 2px; line-height: 1; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .al-hero-archi-title { font-size: 90px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .al-hero-archi-title { font-size: 80px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .al-hero-archi-title { font-size: 70px; letter-spacing: -3px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .al-hero-archi-title { font-size: 60px; } } @media (max-width: 574.98px) { .al-hero-archi-title { font-size: 50px; margin-bottom: 20px; } } .al-hero-archi-title span { align-items: center; display: flex; } .al-hero-archi-title a { border: 1px solid #525252; border-radius: 50px; padding: 25px 25px; display: inline-block; background-color: var(--tp-common-white); font-weight: 400; font-size: 44px; line-height: 1.2; margin-left: 20px; margin-bottom: 10px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .al-hero-archi-title a { padding: 11px 25px; font-size: 26px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .al-hero-archi-title a { padding: 8px 20px; font-size: 20px; letter-spacing: 1px; } } @media (max-width: 574.98px) { .al-hero-archi-title a { padding: 5px 11px; font-size: 16px; } } .al-hero-archi-ptb { padding-top: 305px; padding-bottom: 225px; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) { .al-hero-archi-ptb { padding-top: 240px; padding-bottom: 150px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .al-hero-archi-ptb { padding-top: 200px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .al-hero-archi-ptb { padding-top: 200px; padding-bottom: 150px; } } @media (max-width: 574.98px) { .al-hero-archi-ptb { padding-top: 148px; padding-bottom: 94px; } } .al-hero-archi-link { font-weight: 500; font-size: 14px; line-height: 2.08; color: var(--tp-common-black); padding-left: 116px; font-family: var(--tp-ff-inter); position: relative; overflow: hidden; text-transform: uppercase; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .al-hero-archi-link { padding-left: 0; } } .al-hero-archi-link:hover { color: var(--tp-theme-secondary); } .al-hero-archi-link i { font-size: 18px; font-weight: 800; } .al-hero-archi-link::before { position: absolute; content: ""; width: 100px; height: 1px; top: 10px; left: 0; background-color: var(--tp-common-black); } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .al-hero-archi-link::before { display: none; } } .al-hero-archi-link .tp-arrow-svg-top-right { margin-left: 3px; } .al-hero-archi-shape { top: 20%; position: absolute; left: 224px; z-index: -1; } .al-hero-archi-social { position: absolute; top: 41%; right: 100px; } @media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px) { .al-hero-archi-social { right: 30px; top: 20%; } } .al-hero-archi-social ul li { list-style: none; display: flex; flex-direction: column; } .al-hero-archi-social ul li a { font-size: 23px; } @media only screen and (min-width: 1600px) and (max-width: 1700px), only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) { .al-hero-archi-social ul li a { color: var(--tp-theme-secondary); } } .al-hero-archi-social ul li a:hover { color: var(--tp-theme-secondary); } .al-hero-archi-social ul li a:not(:last-child) { margin-bottom: 50px; position: relative; } .al-hero-archi-social ul li a:not(:last-child)::before { position: absolute; content: ""; height: 30px; width: 1px; top: 33px; background-color: var(--tp-grey-1); left: 11px; } .al-hero-pg-area .al-hero-pg-social-wrapper-2 { top: 42%; } .al-hero-pg-height { padding-top: 60px; padding-bottom: 120px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .al-hero-pg-height { padding-top: 120px; padding-bottom: 70px; } } .al-hero-pg-overlay { position: relative; } .al-hero-pg-thumb { mix-blend-mode: difference; } .al-hero-pg-thumb img { mix-blend-mode: difference; } .al-hero-pg-thumb-wrapper { position: relative; } .al-hero-pg-thumb-wrapper .overlay { display: inline-block; position: absolute; top: 50%; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); height: 1000px; width: 2500px; border-radius: 50%; background: var(--tp-common-black-7); filter: blur(175px); -webkit-filter: blur(175px); z-index: 1; } @media only screen and (min-width: 768px) and (max-width: 991px) { .al-hero-pg-thumb-wrapper .overlay { bottom: -100%; } } @media (max-width: 574.98px) { .al-hero-pg-thumb-wrapper .overlay { bottom: -310%; left: -100%; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .al-hero-pg-thumb-wrapper .overlay { bottom: -160%; } } .al-hero-pg-title { font-size: 160px; font-weight: 700; line-height: 0.94; text-transform: uppercase; color: var(--tp-common-cream); font-family: var(--tp-ff-poppins); letter-spacing: -0.04em; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .al-hero-pg-title { font-size: 150px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .al-hero-pg-title { font-size: 120px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .al-hero-pg-title { font-size: 90px; } } @media (max-width: 574.98px) { .al-hero-pg-title { font-size: 54px; } .al-hero-pg-title br { display: none; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .al-hero-pg-title { font-size: 75px; } .al-hero-pg-title br { display: none; } } .al-hero-pg-title span { color: var(--tp-common-pink); } .al-hero-pg-title-box { margin-top: -375px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .al-hero-pg-title-box { margin-top: -270px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .al-hero-pg-title-box { margin-top: -140px; } } .al-hero-pg-title .text-1 { font-size: 34px; font-weight: 500; text-transform: uppercase; letter-spacing: 1px; color: var(--tp-common-pink); font-family: var(--tp-ff-playfair); display: inline-block; position: absolute; top: 22%; right: -5%; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .al-hero-pg-title .text-1 { right: -7%; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .al-hero-pg-title .text-1 { right: -10%; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .al-hero-pg-title .text-1 { position: static; } } .al-hero-pg-title .text-2 { font-size: 36px; font-weight: 500; letter-spacing: 1px; text-transform: uppercase; color: var(--tp-common-cream); font-family: var(--tp-ff-playfair); position: absolute; top: 22%; left: -20%; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .al-hero-pg-title .text-2 { left: -27%; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .al-hero-pg-title .text-2 { left: -40%; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .al-hero-pg-title .text-2 { position: static; } } .al-hero-pg-title em { font-style: normal; } .al-hero-pg-social { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; flex-direction: column; } .al-hero-pg-social-bar { display: inline-block; width: 1px; height: 160px; background-image: -webkit-linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 100%); background-image: -moz-linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 100%); background-image: -ms-linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 100%); background-image: -o-linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 100%); background-image: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 100%); position: absolute; left: 19px; bottom: calc(100% + 20px); } .al-hero-pg-social-bar::after { position: absolute; content: ""; bottom: -1px; left: -1px; -webkit-transform: translateY(-1px); -moz-transform: translateY(-1px); -ms-transform: translateY(-1px); -o-transform: translateY(-1px); transform: translateY(-1px); width: 3px; height: 3px; border-radius: 50%; background-color: var(--tp-common-white); } .al-hero-pg-social-bar.al-hero-pg-social-bar-2 { top: calc(100% + 20px); background-image: -webkit-linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 100%); background-image: -moz-linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 100%); background-image: -ms-linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 100%); background-image: -o-linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 100%); background-image: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 100%); transform: matrix(1, 0, 0, -1, 0, 0); } .al-hero-pg-social-bar.al-hero-pg-social-bar-2::after { bottom: -1px; left: -1px; -webkit-transform: translateY(-1px); -moz-transform: translateY(-1px); -ms-transform: translateY(-1px); -o-transform: translateY(-1px); transform: translateY(-1px); } .al-hero-pg-social-wrapper { position: absolute; bottom: 50px; right: 40px; z-index: 99; } .al-hero-pg-social-wrapper-2 { position: absolute; bottom: auto; top: 50%; left: 70px; right: auto; transform: translateY(-50%); z-index: 99; } @media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px) { .al-hero-pg-social-wrapper-2 { left: 30px; } } .al-hero-pg-social-wrapper-2 .al-hero-pg-social .parallax-wrap { margin-bottom: 10px; } .al-hero-pg-social-wrapper-2 .al-hero-pg-social .parallax-wrap:last-child { margin-bottom: 0; } .al-hero-pg-social-wrapper-2 .al-hero-pg-social a { border-color: 1.5px solid rgba(255, 255, 255, 0.1); background-color: transparent; } .al-hero-pg-social-wrapper-2 .al-hero-pg-social a:hover { color: var(--tp-common-white); } .al-hero-pg-social-wrapper-2 .al-hero-pg-social a.gmail:hover { background-color: #ea4335; border-color: #ea4335; } .al-hero-pg-social-wrapper-2 .al-hero-pg-social a.dribble:hover { background-color: #EA4C89; border-color: #EA4C89; } .al-hero-pg-social-wrapper-2 .al-hero-pg-social a.behance:hover { background-color: #1769ff; border-color: #1769ff; } .al-hero-pg-social-wrapper-2 .al-hero-pg-social a.youtube:hover { background-color: #cd201f; border-color: #cd201f; } .al-hero-pg-social a { display: inline-block; font-size: 18px; background: #1D2B16; border: 1px solid rgba(255, 255, 255, 0.18); width: 40px; height: 40px; line-height: 39px; text-align: center; border-radius: 50%; color: var(--tp-common-white); } .al-hero-pg-social a:not(:last-child) { margin-bottom: 10px; } .al-hero-pg-social a:hover { background-color: #BCE70C; border-color: #BCE70C; color: #292D32; } .al-hero-shop-active .swiper-slide-active .al-hero-shop-content span, .al-hero-shop-active .swiper-slide-active .al-hero-shop-title, .al-hero-shop-active .swiper-slide-active .al-hero-shop-btn { animation-name: fadeInUp; animation-fill-mode: both; } .al-hero-shop-active .swiper-slide-active .al-hero-shop-thumb img { animation-name: fadeInRight; animation-fill-mode: both; } .al-hero-shop-spacing { padding-top: 133px; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .al-hero-shop-spacing { padding-top: 70px; } } .al-hero-shop-shape-1 { position: absolute; top: 0; right: 10%; z-index: -1; mix-blend-mode: luminosity; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) { .al-hero-shop-thumb img { max-width: inherit; } } .al-hero-shop-thumb-gradient { position: absolute; top: 14%; right: -7%; display: inline-block; width: 550px; height: 550px; border-radius: 50%; background-color: rgba(41, 194, 227, 0.3); z-index: -1; } .al-hero-shop-thumb-shape-1 { position: absolute; top: 24%; left: -10px; } .al-hero-shop-thumb-shape-2 { position: absolute; bottom: 25%; right: -8%; } .al-hero-shop-title { font-weight: 400; font-size: 100px; line-height: 1.06; margin-bottom: 30px; animation-delay: 0.3s; animation-duration: 1s; font-family: var(--tp-ff-dm); } @media only screen and (min-width: 992px) and (max-width: 1199px) { .al-hero-shop-title { font-size: 80px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .al-hero-shop-title { font-size: 60px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .al-hero-shop-title { font-size: 85px; } } @media (max-width: 574.98px) { .al-hero-shop-title { font-size: 52px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .al-hero-shop-content { padding-top: 100px; } } .al-hero-shop-content span { font-size: 20px; color: var(--tp-common-black); display: inline-block; margin-bottom: 15px; animation-delay: 0.1s; font-family: var(--tp-ff-dm); animation-duration: 1s; } .al-hero-shop-item { min-height: 790px; } .al-hero-shop-btn { animation-delay: 0.5s; animation-duration: 1s; } .al-hero-shop-dot { gap: 10px; width: auto; display: flex; flex-direction: column; } .al-hero-shop-dot-wrap { position: absolute; right: 50px; left: auto; z-index: 1; bottom: 40%; } @media (max-width: 574.98px) { .al-hero-shop-dot-wrap { right: 10px; } } .al-hero-shop-dot .swiper-pagination-bullet { width: 10px; height: 10px; background-color: var(--tp-grey-2); opacity: 1; margin: 0 3px; position: relative; } .al-hero-shop-dot .swiper-pagination-bullet-active { background: var(--tp-theme-secondary); } /*----------------------------------------*/ /* 4.1 button css /*----------------------------------------*/ .al-btn-blue { font-weight: 500; font-size: 16px; transition: all 0.3s ease; border-radius: 30px; display: inline-block; padding: 10px 30px; letter-spacing: -0.02em; color: var(--tp-common-white); background-color: var(--tp-common-blue); font-family: var(--tp-ff-inter); } .al-btn-blue:hover { background: var(--tp-common-black-1); color: var(--tp-common-white); } .al-btn-blue.sky-bg { background-color: #a1ecea; color: var(--tp-common-black-3); } .al-btn-blue.sky-bg:hover { color: var(--tp-common-white); background-color: var(--tp-common-blue); } .tp-btn-seo-border:hover { background: var(--tp-common-blue); border-color: var(--tp-common-blue); color: var(--tp-common-white); } .al-btn-pg-price { height: 50px; line-height: 48px; border-radius: 100px; padding: 0 60px; font-size: 18px; font-weight: 500; text-align: center; text-transform: capitalize; display: inline-block; overflow: hidden; color: var(--tp-common-black-7); font-family: var(--tp-ff-poppins); border: 1px solid rgba(183, 171, 152, 0.14); transition: 0.3s; } .al-btn-pg-price:hover { color: var(--tp-common-white); border-color: var(--tp-common-black-7); background-color: var(--tp-common-black-7); } .al-btn-pg-subscribe { height: 48px; line-height: 48px; border-radius: 30px; padding: 0 30px; font-size: 16px; font-weight: 500; display: inline-block; color: var(--tp-common-cream); font-family: var(--tp-ff-poppins); background: var(--tp-common-black-7); border: 1px solid rgba(183, 171, 152, 0.14); } .al-shop-btn { display: inline-block; font-family: var(--tp-ff-dm); font-weight: 400; font-size: 16px; background-color: var(--tp-common-black); padding: 9px 26px; color: var(--tp-common-white); border: 1px solid var(--tp-common-black); } .al-shop-btn:hover { background: var(--tp-theme-secondary); border-color: var(--tp-theme-secondary); color: var(--tp-common-white); } .al-shop-btn-border { background-color: transparent; border: 1.5px solid var(--tp-common-black); color: var(--tp-common-black); padding: 8px 29px; } .al-shop-btn-border-sm { padding: 5px 25px; } .al-shop-btn-border-white-sm { border-color: rgba(255, 255, 255, 0.3); color: var(--tp-common-white); } .al-shop-btn-border-white-sm:hover { background: var(--tp-common-black); color: var(--tp-common-white); border-color: var(--tp-common-black); } /*----------------------------------------*/ /* 4.1 brand css /*----------------------------------------*/ .al-brand-seo-title { font-weight: 500; font-size: 16px; letter-spacing: -0.04em; color: var(--tp-common-black-1); font-family: var(--tp-ff-inter); } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .al-brand-seo-title { margin-bottom: 30px; display: inline-block; } } .al-brand-seo-box a { color: #8a969a; transition: 0.3s; } .al-brand-seo-box a:not(:last-child) { margin-right: 55px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .al-brand-seo-box a:not(:last-child) { margin-right: 35px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .al-brand-seo-box a:not(:last-child) { margin-right: 25px; } } .al-brand-seo-box a:hover { color: var(--tp-common-black-1); } .al-brand-seo-wave-border { position: absolute; bottom: 0; left: 0; } .al-brand-title { font-weight: 500; font-size: 20px; line-height: 1; margin-bottom: 0; letter-spacing: -0.02em; text-transform: uppercase; color: var(--tp-common-black-1); font-family: var(--tp-ff-inter); } .al-brand-title::after { content: ""; height: 6px; width: 6px; margin-left: 30px; border-radius: 50%; display: inline-block; transform: translateY(-4px); background-color: var(--tp-common-black-1); } .al-brand-wrapper { padding: 27px 0 23px 0; max-width: 100000px; background: var(--tp-common-yellow); } .al-brand-wrapper .slide-transtion { -webkit-transition-timing-function: linear; transition-timing-function: linear; } .al-brand-active .swiper-slide { width: auto; } .al-brands-archi-slider .swiper-slide { width: auto; } .al-brands-archi-title span { font-weight: 400; font-size: 30px; line-height: 133%; text-align: center; color: var(--tp-grey-1); } /*----------------------------------------*/ /* 4.1 step css /*----------------------------------------*/ .al-step-title-box { margin: 0px 60px; margin-bottom: 40px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .al-step-title-box { margin: 0; margin-bottom: 40px; } } .al-step-title-sm { font-size: 18px; font-weight: 500; line-height: 1.33; margin-bottom: 0; text-align: center; letter-spacing: -0.02em; color: var(--tp-common-black-1); font-family: var(--tp-ff-inter); } .al-step-icon { display: inline-block; margin-bottom: 25px; } .al-step-icon > span { height: 100px; width: 100px; text-align: center; line-height: 95px; border-radius: 50%; display: inline-block; color: var(--tp-common-blue); border: 2px solid var(--tp-common-blue); transition: 0.3s; position: relative; } .al-step-icon > span::after { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; content: ""; visibility: hidden; border-radius: 50%; transition: 0.3s; transform: scale(1.2); border: 1px dashed var(--tp-common-blue); } .al-step-item { display: inline-block; } .al-step-item.active .al-step-icon > span { color: var(--tp-common-white); border-color: var(--tp-common-blue); background-color: var(--tp-common-blue); } .al-step-item.active .al-step-icon > span::after { opacity: 1; visibility: visible; } .al-step-item:hover .al-step-icon > span { color: var(--tp-common-white); border-color: var(--tp-common-blue); background-color: var(--tp-common-blue); } .al-step-item:hover .al-step-icon > span::after { opacity: 1; visibility: visible; } .al-step-number { position: absolute; top: 3px; right: 1px; z-index: 3; height: 30px; width: 30px; line-height: 29px; border-radius: 50%; font-style: normal; display: inline-block; color: var(--tp-common-white); background-color: var(--tp-common-blue); font-family: var(--tp-ff-inter); } .al-step-number::after { position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: ""; border-radius: 50%; border: 4px solid var(--tp-common-white); transform: scale(1.2); } .al-step-shape-1 { position: absolute; top: 26%; left: 0; } .al-step-shape-1 img { animation: anim-top-bottom 1s linear infinite alternate; } .al-step-shape-2 { position: absolute; top: 42%; right: 0; animation: anim-left-right 4s linear infinite alternate; } .al-step-arrow-shape-1 { position: absolute; top: 21%; right: 0; } .al-step-arrow-shape-2 { position: absolute; top: 21%; left: 0; } /*----------------------------------------*/ /* 4.1 common css /*----------------------------------------*/ .al-section-title { font-weight: 700; font-size: 60px; line-height: 1.1; letter-spacing: -0.02em; color: var(--tp-common-black); font-family: var(--tp-ff-inter); } @media (max-width: 574.98px) { .al-section-title { font-size: 35px; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .al-section-title br { display: none; } } .al-section-subtitle.fs-12 { font-weight: 600; font-size: 12px; border-radius: 20px; letter-spacing: 0.1em; text-transform: uppercase; background-color: #eef3f6; padding: 2px 23px; color: var(--tp-common-black-1); display: inline-block; font-family: var(--tp-ff-inter); } .al-section-subtitle.fs-12.sky-bg { background-color: #cae1ec; } .al-section-archi-title { font-size: 80px; line-height: 1; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) { .al-section-archi-title { font-size: 60px; } } @media (max-width: 574.98px) { .al-section-archi-title { font-size: 50px; } } .al-section-archi-subtitle { font-family: var(--tp-ff-inter); } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .al-section-archi-subtitle { margin-bottom: 20px; display: inline-block; } } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767px) { .al-section-archi-content { margin: 0; } } .al-section-archi-content p { font-family: var(--tp-ff-inter); } .al-section-pg-title { font-size: 120px; font-weight: 500; line-height: 0.9; letter-spacing: -4.8px; color: var(--tp-common-cream); text-transform: uppercase; font-family: var(--tp-ff-heading); } @media only screen and (min-width: 768px) and (max-width: 991px) { .al-section-pg-title { font-size: 100px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .al-section-pg-title { font-size: 70px; } } .al-section-pg-subtitle { font-size: 14px; font-weight: 500; line-height: 20px; text-transform: uppercase; font-family: var(--tp-ff-poppins); color: var(--tp-common-black-7); border: 1px solid var(--tp-common-black-7); padding: 7px 20px; display: inline-block; position: relative; z-index: 1; } .al-section-pg-subtitle i { font-size: 14px; line-height: 1.2; z-index: 2; font-style: normal; text-transform: uppercase; transition: opacity 0.2s ease; } .al-section-pg-subtitle:before, .al-section-pg-subtitle:after { content: ""; background: var(--tp-common-white); position: absolute; z-index: -1; transition: transform 0.2s ease-in-out; opacity: 0.9; } .al-section-pg-subtitle:before { top: -2px; right: 8px; bottom: -2px; left: 8px; } .al-section-pg-subtitle:after { top: 8px; right: -2px; bottom: 8px; left: -2px; } .al-section-shop-title { font-weight: 500; font-size: 44px; font-family: var(--tp-ff-dm); } .al-section-shop-subtitle { font-weight: 400; font-size: 18px; color: var(--tp-theme-secondary); position: relative; z-index: 1; display: inline-block; font-family: var(--tp-ff-dm); } .al-section-shop-subtitle svg { position: absolute; bottom: -8px; left: 26px; z-index: -1; } @keyframes anim-top-bottom { 0% { transform: translateY(-20px); } 100% { transform: translateY(0px); } } @keyframes anim-left-right { 0% { transform: translateX(-50px); } 100% { transform: translateX(0px); } } @keyframes animate-pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.8), 0 0 0 0 rgba(255, 255, 255, 0.8); } 40% { box-shadow: 0 0 0 50px rgba(255, 109, 74, 0), 0 0 0 0 rgba(255, 255, 255, 0.8); } 80% { box-shadow: 0 0 0 50px rgba(255, 109, 74, 0), 0 0 0 30px rgba(255, 109, 74, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 109, 74, 0), 0 0 0 30px rgba(255, 109, 74, 0); } } @keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translateX(20px); -ms-transform: translateX(20px); transform: translateX(20px); } 100% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } @keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translateY(20px); -ms-transform: translateY(20px); transform: translateY(20px); } 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } .tp-header-seo-bg { background: transparent; } @media (max-width: 574.98px) { .bg-position-md-left { background-position: left; } } .tp_text_invert.invert-black-7 > div { background-image: linear-gradient(to right, var(--tp-common-black-7) 50%, var(--tp-common-cream) 50%); } .tp-service-item-bg { z-index: -1; } /*----------------------------------------*/ /* 4.1 video css /*----------------------------------------*/ .al-video-height { height: 760px; overflow: hidden; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) { .al-video-height { height: 600px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .al-video-height { height: 460px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .al-video-height { height: 300px; } } .al-video-img { position: relative; } .al-video-img::after { position: absolute; top: 0; left: 0; height: 100%; width: 100%; content: ""; background-color: rgba(2, 18, 23, 0.2); } .al-video-img img { position: relative; height: 100%; width: 100%; margin-top: -50px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .al-video-img img { height: 400px; object-fit: cover; } } .al-video-play-btn { position: absolute; top: 50%; left: 0; right: 0; z-index: 22; text-align: center; transform: translateY(-50%); } .al-video-play-btn a { height: 180px; width: 180px; line-height: 188px; border-radius: 50%; font-weight: 600; font-size: 14px; text-align: center; display: inline-block; letter-spacing: -0.02em; color: var(--tp-common-white); border: 1px solid var(--tp-common-white); font-family: var(--tp-ff-inter); } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .al-video-play-btn a { height: 140px; width: 140px; line-height: 146px; } } .al-video-play-btn a span { transform: translateY(-2px); margin-left: 6px; } .al-video-inner-style .tp-video-img img { margin-top: -400px; } @media only screen and (min-width: 1600px) and (max-width: 1700px), only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px) { .al-video-inner-style .tp-video-img img { margin-top: -200px; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) { .al-video-inner-style .tp-video-img img { margin-top: -100px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .al-video-inner-style .tp-video-img img { margin-top: -50px; } } /*----------------------------------------*/ /* 4.1 service css /*----------------------------------------*/ .al-service-seo-title { font-weight: 700; font-size: 20px; margin-bottom: 14px; letter-spacing: -0.02em; color: var(--tp-common-black-1); font-family: var(--tp-ff-inter); } @media (max-width: 574.98px) { .al-service-seo-title-box { margin-bottom: 40px; } } .al-service-seo-item:hover .al-service-seo-icon span { animation: icon-bounce 0.8s 1; } .al-service-seo-icon { margin-bottom: 25px; } .al-service-seo-icon span { height: 50px; width: 50px; line-height: 47px; text-align: center; border-radius: 50%; display: inline-block; background-color: #fbcea0; color: var(--tp-common-black-1); } .al-service-seo-content p { font-size: 14px; line-height: 1.57; color: #4d5051; margin-bottom: 0; padding-right: 30px; font-family: var(--tp-ff-inter); } @media only screen and (min-width: 768px) and (max-width: 991px) { .al-service-seo-content p { font-size: 13px; padding-right: 0; } } .al-service-archi-wrapper:hover .al-service-archi-icon { color: var(--tp-theme-secondary); } .al-service-archi-wrapper:hover .al-service-archi-link { color: var(--tp-theme-secondary); } .al-service-archi-title { font-size: 34px; line-height: 1; margin-bottom: 15px; } .al-service-archi-title a:hover { color: var(--tp-theme-secondary); } .al-service-archi-link { color: #BCBCBC; } .al-service-archi-icon { color: var(--tp-common-black); -webkit-transition: all 0.3s 0s ease-out; -moz-transition: all 0.3s 0s ease-out; -ms-transition: all 0.3s 0s ease-out; -o-transition: all 0.3s 0s ease-out; transition: all 0.3s 0s ease-out; } .al-service-archi-content p { font-family: var(--tp-ff-inter); font-size: 17px; } /*----------------------------------------*/ /* 4.1 project css /*----------------------------------------*/ .al-project-seo-item { background: #0e3948; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.04); box-shadow: 0 20px 30px 0 rgba(3, 14, 18, 0.1); padding: 38px 50px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .al-project-seo-item { padding: 38px 35px; } } .al-project-seo-title { font-size: 24px; font-weight: 700; line-height: 1.33; margin-bottom: 0; letter-spacing: -0.02em; color: var(--tp-common-white); font-family: var(--tp-ff-inter); } @media only screen and (min-width: 768px) and (max-width: 991px) { .al-project-seo-title { margin-bottom: 35px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .al-project-seo-title { font-size: 20px; margin-bottom: 35px; } .al-project-seo-title br { display: none; } } .al-project-seo-title a:hover { color: var(--tp-common-yellow); } .al-project-seo-title-box .al-section-subtitle.fs-12 { background-color: #0d3f52; color: var(--tp-common-white); } .al-project-seo-info h5 { font-weight: 700; font-size: 16px; margin-bottom: 10px; letter-spacing: -0.02em; color: var(--tp-common-white); font-family: var(--tp-ff-inter); } .al-project-seo-info span { font-weight: 500; font-size: 14px; line-height: 1; letter-spacing: -0.02em; color: rgba(255, 255, 255, 0.8); font-family: var(--tp-ff-inter); } .al-project-seo-content { padding-left: 50px; margin-left: 50px; position: relative; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .al-project-seo-content { margin-left: 0; padding-left: 0; } } .al-project-seo-content::after { top: 0; left: 0; width: 1px; height: 80px; content: ""; position: absolute; background: rgba(255, 255, 255, 0.14); } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .al-project-seo-content::after { display: none; } } .al-project-seo-btn a { height: 60px; width: 60px; line-height: 55px; text-align: center; border-radius: 50%; display: inline-block; color: var(--tp-common-white); border: 1px solid rgba(255, 255, 255, 0.1); } .al-project-seo-btn a:hover { color: var(--tp-common-black-1); border-color: var(--tp-common-yellow); background-color: var(--tp-common-yellow); } .al-project-archi-title-wrapper { margin-right: 260px; padding-bottom: 220px; } .al-project-archi-title-sm { font-size: 34px; line-height: 1; position: relative; z-index: 2; } @media (max-width: 574.98px) { .al-project-archi-title-sm { font-size: 22px; } } .al-project-archi-title-sm a:hover { color: var(--tp-theme-secondary); } .al-project-archi-meta h5 { font-size: 14px; text-decoration: underline; color: var(--tp-grey-1); font-family: var(--tp-ff-inter); } .al-project-archi-icon { padding-left: 450px; position: relative; transform: translateY(-15px); } @media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .al-project-archi-icon { padding-left: 0; float: right; } } @media (max-width: 574.98px) { .al-project-archi-icon { padding-top: 12px; } } .al-project-archi-icon::before { position: absolute; content: ""; height: 1px; width: 450px; top: 50%; transform: translateY(-50%); left: 0; background-color: #cecac4; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .al-project-archi-icon::before { left: inherit; right: 59px; width: 648%; } } @media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .al-project-archi-icon::before { display: none; } } .al-project-archi-icon a { border: 1px solid #cecac4; width: 60px; height: 60px; display: block; border-radius: 50%; text-align: center; color: #030303; transition: all 0.4s ease; display: flex; align-items: center; justify-content: center; } .al-project-archi-icon a .tp-arrow-angle svg { width: 13px; height: 13px; } .al-project-archi-icon a:hover { background-color: var(--tp-theme-secondary); color: var(--tp-common-white); border-color: var(--tp-theme-secondary); } .al-project-archi-content span { line-height: 1; transform: translateY(-30px); display: inline-block; font-family: var(--tp-ff-inter); } @media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .al-project-archi-content span { margin-top: 18px; transform: inherit; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .al-project-archi-content span { margin-top: 5px; } } .al-project-archi-content-2 { padding-left: 370px; padding-top: 40px; } .al-project-pg-text span { font-size: 15px; font-weight: 500; line-height: 20px; text-transform: uppercase; font-family: var(--tp-ff-poppins); color: rgba(183, 171, 152, 0.5); } .al-project-pg-title { font-size: 16px; font-weight: 500; line-height: 1; text-transform: uppercase; color: var(--tp-common-cream); font-family: var(--tp-ff-poppins); } .al-project-pg-wrapper { margin: 0px -15px; } .al-project-pg-inner-wrap { width: 100%; display: flex; grid-area: list; box-sizing: border-box; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .al-project-pg-inner-wrap { flex-wrap: wrap; } } .al-project-pg-item { width: 30%; height: 615px; display: block; position: relative !important; left: 0 !important; top: 0 !important; margin: 0px 15px; transition: width 0.6s cubic-bezier(0.38, 0.005, 0.215, 1); } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .al-project-pg-item { width: 100%; margin-bottom: 30px; } } .al-project-pg-item:hover { width: 80%; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .al-project-pg-item:hover { width: 100%; } } .al-project-pg-thumb { height: 100%; width: 100%; margin-bottom: 30px; } .al-project-pg-thumb img { width: 100%; height: 100%; object-fit: cover; } .al-project-pg-2-year span { color: var(--tp-common-cream); font-size: 13px; font-weight: 500; line-height: 1; margin-top: 15px; margin-right: 130px; display: inline-block; transition: 0.3s; text-transform: uppercase; font-family: var(--tp-ff-poppins); } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .al-project-pg-2-year span { margin-right: 30px; } } .al-project-pg-2-title { font-size: 46px; font-weight: 400; line-height: 1; color: var(--tp-common-cream); letter-spacing: -1.84px; font-family: var(--tp-ff-playfair); transform: 0.3s; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .al-project-pg-2-title { font-size: 30px; } } .al-project-pg-2-title-box span { color: var(--tp-common-cream); font-size: 13px; font-weight: 500; line-height: 1; text-transform: uppercase; font-family: var(--tp-ff-poppins); } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .al-project-pg-2-title-box span { font-size: 11px; } } .al-project-pg-2-link span { color: var(--tp-common-cream); display: inline-block; transition: 0.3s; } .al-project-pg-2-item { border-bottom: 1px solid rgba(183, 171, 152, 0.14); padding: 40px 0; position: relative; } .al-project-pg-2-item::after { position: absolute; bottom: 0; left: 0; width: 0%; height: 1px; background-color: var(--tp-common-pink); content: ""; transition: 0.4s; } .al-project-pg-2-item:first-child { border-top: 1px solid rgba(183, 171, 152, 0.14); } .al-project-pg-2-item:hover .al-project-pg-2-link span { transform: rotate(-45deg); } .al-project-pg-2-item:hover::after { width: 100%; } .al-project-pg-2-item.active .al-project-pg-2-title { color: var(--tp-common-black-7); } .al-project-pg-2-item.active .al-project-pg-2-year span { color: var(--tp-common-black-7); } .al-project-pg-2-item.active .al-project-pg-2-title-box span { color: var(--tp-common-black-7); } .al-project-pg-2-item.active .al-project-pg-2-link span { color: var(--tp-common-black-7); } .al-project-pg-2-item .tp-reveal-bg { position: absolute; top: 0; left: 0; width: 370px; height: 470px; opacity: 0; margin: -150px 0 0 -150px; overflow: hidden; pointer-events: none; z-index: 99; background-position: center; background-size: cover; background-repeat: no-repeat; -webkit-transition: opacity 0.3s, transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1); -moz-transition: opacity 0.3s, transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1); -ms-transition: opacity 0.3s, transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1); -o-transition: opacity 0.3s, transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1); transition: opacity 0.3s, transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1); } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .al-project-pg-2-item .tp-reveal-bg { height: 240px; width: 240px; } } .al-project-pg-2-item:hover .tp-reveal-bg { opacity: 1; } .al-video-pg-wrap { line-height: 0; } .al-video-pg-wrap video { height: 800px; width: 100%; object-fit: cover; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .al-video-pg-wrap video { height: 400px; } } /*----------------------------------------*/ /* 4.1 price css /*----------------------------------------*/ .al-price-head h5 { font-weight: 700; font-size: 24px; line-height: 1; margin-bottom: 20px; letter-spacing: -0.02em; color: var(--tp-common-black-1); font-family: var(--tp-ff-inter); } .al-price-head span { font-weight: 700; font-size: 50px; display: inline-block; color: var(--tp-common-black-1); font-family: var(--tp-ff-inter); } .al-price-head span i { font-size: 20px; font-style: normal; margin-right: 5px; display: inline-block; transform: translateY(-20px); } .al-price-head span em { font-size: 18px; font-style: normal; } .al-price-list { margin-bottom: 65px; } .al-price-list ul li { font-weight: 500; font-size: 18px; line-height: 1; padding-left: 20px; position: relative; list-style-type: none; color: var(--tp-common-black-1); font-family: var(--tp-ff-inter); } @media only screen and (min-width: 992px) and (max-width: 1199px) { .al-price-list ul li { font-size: 16px; } } .al-price-list ul li:not(:last-child) { margin-bottom: 17px; } .al-price-list ul li::after { position: absolute; content: ""; top: 7px; left: 0; width: 4px; height: 4px; border-radius: 50%; background-color: var(--tp-common-black-3); } .al-price-item { border-radius: 10px; padding: 35px 40px; background-color: var(--tp-common-white); } .al-price-item.active { background-color: var(--tp-common-blue); } .al-price-item.active .al-price-head h5 { color: var(--tp-common-white); } .al-price-item.active .al-price-head span { color: var(--tp-common-white); } .al-price-item.active .al-price-list ul li { color: var(--tp-common-white); } .al-price-item.active .al-price-list ul li::after { background-color: var(--tp-common-white); } .al-price-item.active .al-btn-blue.sky-bg { color: var(--tp-common-black-1); background-color: var(--tp-common-white); } .al-price-item.active .al-btn-blue.sky-bg:hover { color: var(--tp-common-white); background-color: var(--tp-common-black-1); } .al-price-offer { position: absolute; top: -50px; right: -62px; } .al-price-style-2 .al-price-item.active { background-color: var(--tp-common-white); } .al-price-style-2 .al-price-item.active .al-price-head h5 { color: var(--tp-common-black-1); } .al-price-style-2 .al-price-item.active .al-price-head span { color: var(--tp-common-black-1); } .al-price-style-2 .al-price-item.active .al-price-list ul li { color: var(--tp-common-black-1); } .al-price-style-2 .al-price-item.active .al-price-list ul li::after { background-color: var(--tp-common-black-1); } .al-price-style-2 .al-price-item.active .al-btn-border-radius-6.lg { color: var(--tp-common-white); border-color: var(--tp-common-black-1); background-color: var(--tp-common-black-1); } .al-toggler-pre, .al-toggler-post { font-weight: 500; font-size: 16px; line-height: 1; cursor: pointer; color: #848788; transition: all 0.3s ease; font-family: var(--tp-ff-inter); } .al-toggler-pre.is-active, .al-toggler-post.is-active { color: var(--tp-common-black-1); } .al-toggler-pre:hover, .al-toggler-post:hover { color: var(--tp-common-black-1); } .al-toggler-pre { margin-right: 15px; } .al-toggler-post { margin-left: 15px; } .al-toggle-input-wrap { position: relative; width: 76px; height: 36px; overflow: hidden; border-radius: 100px; background-color: var(--tp-common-blue); } .al-price-nav-wrapper { display: flex; align-items: center; justify-content: center; } .al-price-nav-wrapper .al-input-check { position: absolute; display: block; cursor: pointer; top: 0; left: 0; opacity: 0; z-index: 6; width: 100%; height: 100%; } .al-price-nav-wrapper .al-input-check:checked ~ .al-switch-toggle { left: 4px; right: 57.3%; } .al-switch-toggle { position: absolute; top: 4px; right: 4px; left: 57.3%; bottom: 4px; z-index: 1; border-radius: 100%; box-shadow: 0 4px 6px 0 rgba(1, 17, 22, 0.24); transition: 0.25s cubic-bezier(0.785, 0.135, 0.15, 0.86); background: linear-gradient(180deg, #fff 0%, #e1e4e8 100%); } .al-tab-hide { display: none; } .al-price-pg-item { padding: 50px 40px; border: 1px solid rgba(183, 171, 152, 0.14); } @media only screen and (min-width: 768px) and (max-width: 991px) { .al-price-pg-item { padding: 50px 25px; } } @media (max-width: 574.98px) { .al-price-pg-item { padding: 40px 30px; } } .al-price-pg-item.active .al-btn-pg-price { background-color: var(--tp-common-pink); color: var(--tp-common-white); border-color: var(--tp-common-pink); } .al-price-pg-bdr-1::after, .al-price-pg-bdr-2::after, .al-price-pg-bdr-3::after, .al-price-pg-bdr-4::after { position: absolute; top: 0; left: 0; width: 10px; height: 1px; background-color: var(--tp-common-black-7); content: ""; } .al-price-pg-bdr-1::before, .al-price-pg-bdr-2::before, .al-price-pg-bdr-3::before, .al-price-pg-bdr-4::before { position: absolute; top: 0; left: 0; width: 1px; height: 10px; background-color: var(--tp-common-black-7); content: ""; } .al-price-pg-bdr-1.bdr-topright::after, .al-price-pg-bdr-2.bdr-topright::after, .al-price-pg-bdr-3.bdr-topright::after, .al-price-pg-bdr-4.bdr-topright::after { left: auto; right: 0; } .al-price-pg-bdr-1.bdr-topright::before, .al-price-pg-bdr-2.bdr-topright::before, .al-price-pg-bdr-3.bdr-topright::before, .al-price-pg-bdr-4.bdr-topright::before { left: auto; right: 0; } .al-price-pg-bdr-1.bdr-bottomleft::after, .al-price-pg-bdr-2.bdr-bottomleft::after, .al-price-pg-bdr-3.bdr-bottomleft::after, .al-price-pg-bdr-4.bdr-bottomleft::after { top: auto; bottom: 0; } .al-price-pg-bdr-1.bdr-bottomleft::before, .al-price-pg-bdr-2.bdr-bottomleft::before, .al-price-pg-bdr-3.bdr-bottomleft::before, .al-price-pg-bdr-4.bdr-bottomleft::before { top: auto; bottom: 0; } .al-price-pg-bdr-1.bdr-bottomright::after, .al-price-pg-bdr-2.bdr-bottomright::after, .al-price-pg-bdr-3.bdr-bottomright::after, .al-price-pg-bdr-4.bdr-bottomright::after { top: auto; bottom: 0; left: auto; right: 0; } .al-price-pg-bdr-1.bdr-bottomright::before, .al-price-pg-bdr-2.bdr-bottomright::before, .al-price-pg-bdr-3.bdr-bottomright::before, .al-price-pg-bdr-4.bdr-bottomright::before { top: auto; bottom: 0; left: auto; right: 0; } .al-price-pg-title { font-size: 26px; font-weight: 400; line-height: 36px; color: var(--tp-common-black-7); font-family: var(--tp-ff-playfair); margin-bottom: 0; } .al-price-pg-price { font-size: 70px; font-weight: 500; line-height: 100px; letter-spacing: -2.8px; text-transform: uppercase; color: var(--tp-common-black-7); font-family: var(--tp-ff-poppins); margin-bottom: 10px; } .al-price-pg-head { margin-bottom: 35px; } .al-price-pg-head p { font-size: 16px; font-weight: 400; line-height: 26px; font-family: var(--tp-ff-poppins); color: var(--tp-common-black-7); margin-bottom: 0; } .al-price-pg-btn { margin-bottom: 40px; } .al-price-pg-list ul li { font-size: 16px; font-weight: 400; line-height: 1.5; font-family: var(--tp-ff-poppins); color: var(--tp-common-black-7); list-style-type: none; margin-bottom: 20px; position: relative; padding-left: 15px; } .al-price-pg-list ul li::after { position: absolute; top: 10px; left: 0; width: 4px; height: 4px; border-radius: 50%; background-color: var(--tp-common-black-7); content: ""; } .al-price-pg-list ul li:last-child { margin-bottom: 0; } /*----------------------------------------*/ /* 4.1 faq css /*----------------------------------------*/ .al-faq-wrapper .accordion-items { position: relative; padding: 0; } .al-faq-wrapper .accordion-items:not(:last-child) { box-shadow: 0 1px 0 0 rgba(1, 17, 22, 0.14); } .al-faq-wrapper .accordion-header { position: relative; } .al-faq-wrapper .accordion-header .accordion-buttons { width: 100%; padding: 25px 0; font-weight: 700; font-size: 30px; line-height: 1.3; text-align: left; position: relative; padding-right: 30px; color: var(--tp-common-black-1); font-family: var(--tp-ff-inter); } @media only screen and (min-width: 992px) and (max-width: 1199px) { .al-faq-wrapper .accordion-header .accordion-buttons { font-size: 18px; } } .al-faq-wrapper .accordion-header .accordion-buttons:not(.collapsed) { color: var(--tp-common-blue); } .al-faq-wrapper .accordion-header .accordion-buttons:not(.collapsed) .accordion-icon::before { transform: translate(-50%, -50%) rotate(90deg); } .al-faq-wrapper .accordion-header .accordion-buttons:not(.collapsed) .accordion-icon::after { background-color: var(--tp-common-blue); } .al-faq-wrapper .accordion-header .accordion-buttons .accordion-icon { position: absolute; top: 35px; right: 10px; } .al-faq-wrapper .accordion-header .accordion-buttons .accordion-icon::before { position: absolute; content: ""; width: 2px; height: 16px; left: 50%; top: 50%; transition: 0.4s; border-radius: 30px; transform: translate(-50%, -50%); background-color: var(--tp-common-black-3); } .al-faq-wrapper .accordion-header .accordion-buttons .accordion-icon::after { position: absolute; content: ""; width: 16px; height: 2px; left: 50%; top: 50%; border-radius: 30px; transform: translate(-50%, -50%); background-color: var(--tp-common-black-3); } .al-faq-wrapper .accordion-body { padding: 0; padding-right: 110px; padding-bottom: 35px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .al-faq-wrapper .accordion-body { padding-right: 65px; } } .al-faq-wrapper .accordion-body p { font-weight: 500; font-size: 22px; line-height: 1.57; color: #4d5051; margin-bottom: 0; font-family: var(--tp-ff-inter); } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .al-faq-wrapper .accordion-body p br { display: none; } } .al-faq-form-box { padding: 80px; margin-left: 60px; border-radius: 20px; background-color:#ddcceb; margin-bottom: 80px !important; width: 750px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .al-faq-form-box { margin-left: 30px; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) { .al-faq-form-box { padding: 40px; margin-left: 0px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .al-faq-form-box { padding: 20px; margin-left: 0px; } } .al-faq-form-wrap { padding: 40px 50px; border-radius: 10px; background-color: var(--tp-common-white); width: 600px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .al-faq-form-wrap { padding: 30px 20px; } } .al-faq-form-content p { font-weight: 400; font-size: 30px; letter-spacing: -0.02em; margin-bottom: 0; color: var(--tp-common-black); font-family: var(--tp-ff-inter); } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .al-faq-form-content p { font-size: 14px; } } .al-faq-form-title { font-weight: 600; font-size: 70px; line-height: 1.23; letter-spacing: -0.02em; color: var(--tp-common-black); font-family: var(--tp-ff-inter); align-items: center; padding-top: -80px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .al-faq-form-title { font-size: 23px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .al-faq-form-title { font-size: 20px; } } .al-faq-input input { height: 50px; border-radius: 30px; color: var(--tp-common-black-1); border: 1px solid rgba(1, 17, 22, 0.16); font-family: var(--tp-ff-inter); } .al-faq-textarea textarea { height: 50px; border-radius: 30px; color: var(--tp-common-black-1); border: 1px solid rgba(1, 17, 22, 0.16); font-family: var(--tp-ff-inter); } .al-faq-textarea textarea::-webkit-textarea-placeholder { /* Chrome/Opera/Safari */ font-weight: 500; font-size: 14px; color: #848788; letter-spacing: -0.02em; } .al-faq-textarea textarea::-moz-placeholder { /* Firefox 19+ */ font-weight: 500; font-size: 14px; color: #848788; letter-spacing: -0.02em; } .al-faq-textarea textarea:-moz-placeholder { /* Firefox 4-18 */ font-weight: 500; font-size: 14px; color: #848788; letter-spacing: -0.02em; } .al-faq-textarea textarea:-ms-textarea-placeholder { /* IE 10+ Edge*/ font-weight: 500; font-size: 14px; color: #848788; letter-spacing: -0.02em; } .al-faq-textarea textarea::placeholder { /* MODERN BROWSER */ font-weight: 500; font-size: 14px; color: #848788; letter-spacing: -0.02em; } .al-faq-textarea textarea:focus { border-color: var(--tp-common-blue); box-shadow: 0 0 0 3px rgba(39, 125, 255, 0.1); } .al-faq-input input::-webkit-input-placeholder { /* Chrome/Opera/Safari */ font-weight: 500; font-size: 14px; color: #848788; letter-spacing: -0.02em; } .al-faq-input input::-moz-placeholder { /* Firefox 19+ */ font-weight: 500; font-size: 14px; color: #848788; letter-spacing: -0.02em; } .al-faq-input input:-moz-placeholder { /* Firefox 4-18 */ font-weight: 500; font-size: 14px; color: #848788; letter-spacing: -0.02em; } .al-faq-input input:-ms-input-placeholder { /* IE 10+ Edge*/ font-weight: 500; font-size: 14px; color: #848788; letter-spacing: -0.02em; } .al-faq-input input::placeholder { /* MODERN BROWSER */ font-weight: 500; font-size: 22px; color: #848788; letter-spacing: -0.02em; } .al-faq-input input:focus { border-color: var(--tp-common-blue); box-shadow: 0 0 0 3px rgba(39, 125, 255, 0.1); } .al-faq-remeber input { display: none; } .al-faq-remeber input:checked ~ label::after { background-color: var(--tp-common-blue); border-color: var(--tp-common-blue); } .al-faq-remeber input:checked ~ label::before { visibility: visible; opacity: 1; } .al-faq-remeber label { position: relative; padding-left: 26px; font-weight: 400; font-size: 14px; line-height: 1; z-index: 1; color: #4d5051; letter-spacing: -0.02em; font-family: var(--tp-ff-inter); } .al-faq-remeber label::after { position: absolute; content: ""; top: 0; left: 0; width: 16px; height: 16px; z-index: -1; transition: 0.3s; line-height: 16px; border-radius: 4px; text-align: center; border: 1px solid #a1a5a7; } .al-faq-remeber label::before { position: absolute; content: url(../img/login/check.svg); top: -1px; left: 0; width: 16px; height: 16px; line-height: 16px; text-align: center; visibility: hidden; opacity: 0; color: var(--tp-common-black-1); transition: all 0.3s ease; } .al-faq-remeber label:hover { cursor: pointer; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .al-faq-title-box { margin-bottom: 40px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .al-faq-wrapper { margin-bottom: 40px; } } /*----------------------------------------*/ /* 4.1 text-slider css /*----------------------------------------*/ .al-text-slider-seo-title { font-weight: 600; font-size: 60px; line-height: 1; margin-right: 55px; color: var(--tp-common-black); font-family: var(--tp-ff-heading); } .al-text-slider-seo-active .swiper-slide { width: auto; } .al-text-slider-seo-wave-shape-1 { position: absolute; top: 0; left: 0; right: 0; width: 100%; } .al-text-slider-seo-wave-shape-2 { position: absolute; bottom: 0; left: 0; right: 0; width: 100%; } .al-text-pg-slider-item span { font-size: 40px; font-weight: 500; text-transform: uppercase; color: var(--tp-common-white); font-family: var(--tp-ff-'Kanit', sans-serif); margin-right: 30px; padding: 5px 0; } .al-text-pg-slider-item img { margin-right: 30px; display: inline-block; filter: invert(1); } .al-text-pg-slider-wrap { background-color: #000516; padding: 25px 0; } .al-text-pg-slider-active .swiper-slide { width: auto !important; } /*----------------------------------------*/ /* 4.1 testimonial css /*----------------------------------------*/ .al-testimonial-seo-slider-wrap { margin-left: 100px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .al-testimonial-seo-slider-wrap { margin-left: 50px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .al-testimonial-seo-slider-wrap { margin-left: 0; } } .al-testimonial-seo-avater { margin-bottom: 15px; } .al-testimonial-seo-avater img { width: 60px; border-radius: 100px; } .al-testimonial-seo-avater-title { font-weight: 700; font-size: 18px; margin-bottom: 0; letter-spacing: -0.02em; color: var(--tp-common-black-3); font-family: var(--tp-ff-inter); } .al-testimonial-seo-avater-info { margin-bottom: 45px; } .al-testimonial-seo-avater-info span { font-weight: 500; font-size: 14px; line-height: 1; color: #4d5051; font-family: var(--tp-ff-inter); } .al-testimonial-seo-text p { font-weight: 400; font-size: 24px; line-height: 1.42; margin-bottom: 0; color: var(--tp-common-black-3); font-family: var(--tp-ff-inter); } @media only screen and (min-width: 768px) and (max-width: 991px) { .al-testimonial-seo-text p { font-size: 18px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .al-testimonial-seo-text p { font-size: 20px; } } .al-testimonial-seo-dot .swiper-pagination-bullet { width: 60px; height: 2px; opacity: 1; border-radius: 0; display: inline-block; background: #cbcccf; transition: 0.3s; } .al-testimonial-seo-dot .swiper-pagination-bullet.swiper-pagination-bullet-active { background-color: var(--tp-common-blue); } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .al-testimonial-seo-btn { margin-bottom: 40px; } } .al-testimonial-seo-btn .tp-btn-circle-dot { background-color: var(--tp-common-blue); } .al-testimonial-seo-btn .tp-rounded-btn-wrap a { font-size: 16px; color: var(--tp-common-black-1); font-family: var(--tp-ff-inter); text-transform: capitalize; } .al-testimonial-seo-btn .tp-rounded-btn-wrap a:hover { color: var(--tp-common-white); } .al-testimonial-shop-arrow button { position: absolute; top: 50%; left: 0; background: var(--tp-common-white); box-shadow: 0px 1px 1px rgba(1, 15, 28, 0.16); border-radius: 50%; height: 60px; width: 60px; line-height: 60px; font-size: 18px; color: var(--tp-common-black); z-index: 1; } .al-testimonial-shop-arrow button:hover { background-color: var(--tp-theme-secondary); color: var(--tp-common-white); box-shadow: none; } .al-testimonial-shop-arrow button.al-testimonial-shop-next { left: auto; right: 0; } .al-testimonial-shop-designation { color: var(--tp-grey-1); font-size: 14px; font-family: var(--tp-ff-dm); } .al-testimonial-shop-section-title { font-weight: 400; font-size: 20px; margin-bottom: 50px; font-family: var(--tp-ff-dm); } .al-testimonial-shop-content { padding-left: 40px; padding-right: 40px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .al-testimonial-shop-content { padding-left: 0; padding-right: 0; } } .al-testimonial-shop-content p { font-weight: 400; font-size: 30px; line-height: 1.4; color: var(--tp-common-black); margin-bottom: 30px; font-family: var(--tp-ff-dm); } @media (max-width: 574.98px) { .al-testimonial-shop-content p { font-size: 27px; } } .al-testimonial-shop-rating { margin-bottom: 25px; } .al-testimonial-shop-rating span { font-size: 16px; color: var(--tp-theme-secondary); } .al-testimonial-shop-avater img { width: 60px; height: 60px; border-radius: 50%; } .al-testimonial-shop-user { background: var(--tp-common-white); box-shadow: 0px 1px 1px rgba(1, 15, 28, 0.16); border-radius: 40px; padding: 10px; padding-right: 27px; } .al-testimonial-shop-user-translate { -webkit-transform: translateY(2px); -moz-transform: translateY(2px); -ms-transform: translateY(2px); -o-transform: translateY(2px); transform: translateY(2px); text-align: left; } .al-testimonial-shop-user-title { font-weight: 500; font-size: 16px; line-height: 1; margin-bottom: -2px; font-family: var(--tp-ff-dm); } .al-testimonial-shop-user-designation { font-size: 14px; line-height: 1; } .al-testimonial-shop-shape-gradient { position: absolute; top: -50px; left: 50%; transform: translateX(-50%); display: inline-block; width: 432px; height: 432px; border-radius: 50%; background-image: -webkit-linear-gradient(180deg, rgba(9, 137, 255, 0.1) 0%, rgba(255, 255, 255, 0) 70%); background-image: -moz-linear-gradient(180deg, rgba(9, 137, 255, 0.1) 0%, rgba(255, 255, 255, 0) 70%); background-image: -ms-linear-gradient(180deg, rgba(9, 137, 255, 0.1) 0%, rgba(255, 255, 255, 0) 70%); background-image: -o-linear-gradient(180deg, rgba(9, 137, 255, 0.1) 0%, rgba(255, 255, 255, 0) 70%); background-image: linear-gradient(180deg, rgba(9, 137, 255, 0.1) 0%, rgba(255, 255, 255, 0) 70%); z-index: -1; } @media (max-width: 574.98px) { .al-testimonial-shop-shape-gradient { width: 280px; height: 280px; } } /*----------------------------------------*/ /* 4.1 blog css /*----------------------------------------*/ .al-blog-seo-item { padding: 40px 10px; padding-bottom: 45px; border-radius: 10px; transition: all 0.3s; background-color: var(--tp-common-white); } .al-blog-seo-item:hover { box-shadow: 0 20px 16px 0 rgba(1, 17, 22, 0.06); } .al-blog-seo-item:hover .al-blog-seo-thumb img { transform: scale(1.1) rotate(-2deg); } .al-blog-seo-content { padding: 0px 30px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 574.98px) { .al-blog-seo-content { padding: 0px 20px; } } .al-blog-seo-category { margin-bottom: 10px; } .al-blog-seo-category a { font-weight: 700; font-size: 12px; line-height: 1.67; border-radius: 4px; padding: 4px 10px; color: #4d5051; text-transform: uppercase; transition: all 0.3s; border: 1px solid rgba(0, 43, 59, 0.1); font-family: var(--tp-ff-inter); } .al-blog-seo-category a:not(:last-child) { margin-right: 4px; } .al-blog-seo-category a:hover { color: var(--tp-common-white); border-color: var(--tp-common-black-1); background-color: var(--tp-common-black-1); } .al-blog-seo-title { font-weight: 700; font-size: 22px; line-height: 1.27; color: var(--tp-common-black-1); font-family: var(--tp-ff-inter); } @media only screen and (min-width: 992px) and (max-width: 1199px) { .al-blog-seo-title { font-size: 18px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .al-blog-seo-title { font-size: 20px; } } .al-blog-seo-title a:hover { color: var(--tp-common-blue); } .al-blog-seo-meta span { font-weight: 500; font-size: 14px; line-height: 1.43; display: inline-block; text-transform: uppercase; color: var(--tp-common-black-1); font-family: var(--tp-ff-inter); } .al-blog-seo-meta span svg { color: #4d5051; margin-right: 4px; transform: translateY(-2px); } .al-blog-seo-thumb { margin-bottom: 20px; } .al-blog-seo-thumb img { transition: all 0.9s; } .al-blog-seo-avater-info img { height: 30px; width: 30px; border-radius: 50%; margin-right: 10px; } .al-blog-seo-avater-info span { font-weight: 600; font-size: 14px; line-height: 1; color: var(--tp-common-black-1); font-family: var(--tp-ff-inter); } .al-blog-archi-tag { position: relative; } .al-blog-archi-tag::before { clip-path: polygon(0 0, 100% 0%, 77% 100%, 0% 100%); position: absolute; content: ""; width: 65px; height: 30px; top: -2px; left: 0; background-color: #ffc9b2; z-index: 1; } .al-blog-archi-tag a { font-weight: 500; font-size: 14px; line-height: 150%; text-transform: uppercase; z-index: 1; position: relative; padding-left: 15px; font-family: var(--tp-ff-inter); } .al-blog-archi-tag a span { color: var(--tp-common-black); font-weight: 600; } .al-blog-archi-title { line-height: 1; font-size: 30px; font-weight: 600; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .al-blog-archi-title { font-size: 24px; } } .al-blog-archi-title a:hover { color: var(--tp-theme-secondary); } .al-blog-archi-avatar h5 { font-size: 24px; color: var(--tp-common-black); line-height: 1; font-family: var(--tp-ff-inter); position: relative; margin-right: 13px; padding-right: 13px; } .al-blog-archi-avatar h5::before { position: absolute; content: ""; width: 1px; height: 45px; background: #d7d5d2; top: 0; right: 0; } .al-blog-archi-avatar h5 span { font-size: 18px; text-transform: uppercase; font-weight: 600; } .al-blog-archi-avatar-para { font-family: var(--tp-ff-inter); } .al-blog-archi-btn a { font-weight: 500; font-size: 14px; text-transform: uppercase; font-family: var(--tp-ff-inter); } .al-blog-archi-btn a:hover { color: var(--tp-theme-secondary); } .al-blog-archi-thumb img { transition: 0.9s; } .al-blog-archi-wrapper:hover .al-blog-archi-thumb img { -webkit-transform: scale(1.1) rotate(-2deg); -moz-transform: scale(1.1) rotate(-2deg); -ms-transform: scale(1.1) rotate(-2deg); -o-transform: scale(1.1) rotate(-2deg); transform: scale(1.1) rotate(-2deg); } .al-blog-shop-item:hover .al-blog-shop-thumb img { -webkit-transform: scale(1.1) rotate(4deg); -moz-transform: scale(1.1) rotate(4deg); -ms-transform: scale(1.1) rotate(4deg); -o-transform: scale(1.1) rotate(4deg); transform: scale(1.1) rotate(4deg); } .al-blog-shop-title { font-weight: 400; font-size: 24px; line-height: 1.33; font-family: var(--tp-ff-dm); } .al-blog-shop-title a:hover { color: var(--tp-theme-secondary); } .al-blog-shop-thumb img { -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; width: 100%; } .al-blog-shop-content.has-thumbnail { padding-top: 25px; } .al-blog-shop-meta { margin-bottom: 4px; } .al-blog-shop-meta span { color: var(--tp-common-black); } .al-blog-shop-meta span svg { transform: translateY(-2px); } .al-blog-shop-meta a { font-size: 16px; position: relative; font-family: var(--tp-ff-dm); } .al-blog-shop-meta a::after { position: absolute; content: ""; left: auto; right: 0; bottom: 3px; width: 0; height: 1px; background-color: var(--tp-theme-secondary); -webkit-transition: all 0.3s 0s ease-out; -moz-transition: all 0.3s 0s ease-out; -ms-transition: all 0.3s 0s ease-out; -o-transition: all 0.3s 0s ease-out; transition: all 0.3s 0s ease-out; } .al-blog-shop-meta a:hover { color: var(--tp-theme-secondary); } .al-blog-shop-meta a:hover::after { left: 0; right: auto; width: 100%; } .al-blog-shop-meta a:hover { color: var(--tp-theme-secondary); } .al-blog-shop-meta-date { position: absolute; top: 10px; right: 10px; z-index: 1; } .al-blog-shop-meta-date span { font-size: 14px; line-height: 1; color: var(--tp-common-black); background-color: var(--tp-common-white); padding: 5px 16px; font-family: var(--tp-ff-dm); } /*----------------------------------------*/ /* 4.1 footer css /*----------------------------------------*/ .al-footer-seo-widget-paragraph p { font-weight: 500; font-size: 16px; line-height: 1.5; color: var(--tp-common-white); font-family: var(--tp-ff-inter); } .al-footer-seo-widget-social a { height: 40px; width: 40px; line-height: 33px; border-radius: 50%; display: inline-block; text-align: center; color: rgba(255, 255, 255, 0.5); border: 2px solid rgba(255, 255, 255, 0.1); } .al-footer-seo-widget-social a:not(:last-child) { margin-right: 6px; } .al-footer-seo-widget-social a:hover { color: var(--tp-common-white); border-color: var(--tp-common-blue); background-color: var(--tp-common-blue); } .al-footer-seo-widget-title { font-weight: 700; font-size: 74px; line-height: 0.86; padding-bottom: 20px; background-clip: border-box; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background: linear-gradient(90deg, #d4fc79 0%, #96e6a1 100%); background: -webkit-linear-gradient(90deg, #d4fc79 0%, #96e6a1 100%); font-family: var(--tp-ff-inter); } @media only screen and (min-width: 992px) and (max-width: 1199px) { .al-footer-seo-widget-title { font-size: 55px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .al-footer-seo-widget-title { font-size: 51px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .al-footer-seo-widget-title { font-size: 45px; } } .al-footer-seo-widget .al-footer-link:hover { color: var(--tp-common-blue); } .al-footer-seo-col-1 { padding-right: 125px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .al-footer-seo-col-1 { padding-right: 80px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .al-footer-seo-col-1 { padding-right: 0; } } .al-footer-seo-col-2 { padding-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) { .al-footer-seo-col-2 { padding-left: 0; } } .al-footer-seo-bg::after { position: absolute; top: 0; left: 0; width: 38.9%; height: 100%; content: ""; background-color: #082e3d; } @media only screen and (min-width: 1400px) and (max-width: 1599px) { .al-footer-seo-bg::after { width: 35.9%; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .al-footer-seo-bg::after { width: 34.9%; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .al-footer-seo-bg::after { display: none; } } .al-footer-seo-black-bg { background: #012836; } .al-copyright-seo-left p { font-weight: 500; font-size: 14px; color: #72878e; margin-bottom: 0; font-family: var(--tp-ff-inter); } .al-copyright-seo-left p a { color: var(--tp-common-white); } .al-copyright-seo-middle a { font-weight: 500; font-size: 14px; line-height: 1.71; color: #afb2b8; transition: all 0.3s; font-family: var(--tp-ff-inter); } .al-copyright-seo-middle a span { margin-right: 5px; display: inline-block; transform: translateY(-1px); } .al-copyright-seo-middle a:hover { color: var(--tp-common-white); } .al-copyright-seo-right ul li { display: inline-block; list-style-type: none; } .al-copyright-seo-right ul li:not(:first-child) { margin-left: 30px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .al-copyright-seo-right ul li:not(:first-child) { margin-left: 20px; } } .al-copyright-seo-right ul li a { font-weight: 500; font-size: 14px; color: #afb2b8; transition: all 0.3s; font-family: var(--tp-ff-inter); } .al-copyright-seo-right ul li a:hover { color: var(--tp-common-white); } .al-copyright-seo-border { padding-top: 22px; padding-bottom: 40px; border-top: 1px solid rgba(255, 255, 255, 0.06); background-color: #012836; } .al-footer-archi-widget-title { font-size: 28px; line-height: 1; } .al-footer-archi-widget-link ul .email a { text-transform: lowercase; } .al-footer-archi-widget-link ul li { list-style: none; } .al-footer-archi-widget-link ul li:not(:last-child) { margin-bottom: 5px; } .al-footer-archi-widget-link ul li a { font-weight: 500; line-height: 1.67; text-transform: capitalize; color: var(--tp-grey-1); font-family: var(--tp-ff-inter); } .al-footer-archi-widget-link ul li a:hover { color: var(--tp-theme-secondary); } .al-footer-archi-widget-contact ul li { margin-bottom: 7px; } .al-footer-archi-main-border { border-top: 1px solid #e7d6c4; } .al-footer-archi-border ul li a:hover { color: var(--tp-theme-secondary); } .al-footer-archi-input input { background: none; border: none; border-bottom: 1px solid var(--tp-common-black); padding: 0 0; font-weight: 500; font-size: 14px; line-height: 1.5; color: var(--tp-grey-1); height: 46px; padding-right: 20px; border-radius: 0; text-transform: uppercase; font-family: var(--tp-ff-inter); } .al-footer-archi-input input::placeholder { font-weight: 500; font-size: 14px; color: var(--tp-grey-1); } .al-footer-archi-input input:focus { border-color: var(--tp-theme-secondary); } .al-footer-archi-input-btn { position: absolute; right: 0; top: 50%; transform: translateY(-50%); } .al-footer-archi-input-btn i { font-size: 17px; transform: rotate(-35deg) translateY(3px); } .al-footer-archi-check input { margin-right: 5px; display: none; } .al-footer-archi-check input:checked ~ label::before { visibility: visible; opacity: 1; } .al-footer-archi-check input:checked ~ label::after { background-color: var(--tp-theme-secondary); border-color: var(--tp-theme-secondary); } .al-footer-archi-check label { position: relative; padding-left: 22px; font-family: var(--tp-ff-inter); cursor: pointer; transition: all 0.3s; border-radius: 2px; font-size: 15px; color: var(--tp-grey-1); } .al-footer-archi-check label:before { position: absolute; content: url(../../assets/img/login/check.svg); top: 3px; left: 0; width: 15px; height: 15px; line-height: 15px; text-align: center; visibility: hidden; opacity: 0; color: var(--tp-common-white); -ms-transition: all 0.2s ease-out 0s; transition: all 0.2s ease-out 0s; z-index: 1; border-radius: 2px; } .al-footer-archi-check label:after { position: absolute; content: ""; top: 5px; left: 0; width: 15px; height: 15px; line-height: 15px; text-align: center; border: 1px solid #2b2a2a; transition: all 0.2s ease-out 0s; border-radius: 0; border-radius: 2px; } .al-footer-archi-social-link a { font-weight: 400; font-size: 16px; text-transform: uppercase; margin: 0 2px; color: var(--tp-grey-1); } .al-footer-archi-social-link a:hover { color: var(--tp-theme-secondary); } .al-footer-archi-mr { margin-left: -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) { .al-footer-archi-mr { margin-left: 0px; } } .al-footer-archi-bottom { background-color: #fff7ef; padding: 36px 0; padding-bottom: 6px; } .al-footer-archi-copyright p { font-family: var(--tp-ff-inter); } .al-footer-archi-copyright p a { color: var(--tp-common-black); font-weight: 500; } .al-footer-archi-copyright p a:hover { color: var(--tp-theme-secondary); } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .al-footer-archi-copyright-social { float: left; } } .al-footer-archi-copyright-social a { font-weight: 500; font-size: 15px; text-transform: uppercase; font-family: var(--tp-ff-inter); } .al-footer-archi-copyright-social a:hover { color: var(--tp-theme-secondary); } .al-footer-archi-copyright-social span { margin: 0 25px; } @media (max-width: 574.98px) { .al-footer-archi-copyright-social span { margin: 0 8px; } } .al-footer-pg-subscribe-title { font-size: 26px; font-weight: 400; line-height: 1; color: var(--tp-common-cream); font-family: var(--tp-ff-playfair); margin-bottom: 35px; display: inline-block; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .al-footer-pg-subscribe-title { font-size: 23px; } } .al-footer-pg-input input { border-radius: 100px; background: #292929; height: 60px; line-height: 60px; border: none; font-size: 16px; font-weight: 500; line-height: 1; padding: 0px 30px; padding-right: 160px; color: var(--tp-common-cream); font-family: var(--tp-ff-poppins); } .al-footer-pg-input input::-webkit-input-placeholder { /* Chrome/Opera/Safari */ font-size: 16px; font-weight: 500; line-height: 1; color: var(--tp-common-cream); font-family: var(--tp-ff-poppins); } .al-footer-pg-input input::-moz-placeholder { /* Firefox 19+ */ font-size: 16px; font-weight: 500; line-height: 1; color: var(--tp-common-cream); font-family: var(--tp-ff-poppins); } .al-footer-pg-input input:-moz-placeholder { /* Firefox 4-18 */ font-size: 16px; font-weight: 500; line-height: 1; color: var(--tp-common-cream); font-family: var(--tp-ff-poppins); } .al-footer-pg-input input:-ms-input-placeholder { /* IE 10+ Edge*/ font-size: 16px; font-weight: 500; line-height: 1; color: var(--tp-common-cream); font-family: var(--tp-ff-poppins); } .al-footer-pg-input input::placeholder { /* MODERN BROWSER */ font-size: 16px; font-weight: 500; line-height: 1; color: var(--tp-common-cream); font-family: var(--tp-ff-poppins); } .al-footer-pg-input-box { position: relative; margin-bottom: 90px; } .al-footer-pg-input-box button { position: absolute; top: 50%; right: 7px; transform: translateY(-50%); } .al-footer-pg-input-box button:hover { color: var(--tp-common-coffe); background-color: var(--tp-common-cream); } .al-footer-pg-info-box { margin-bottom: 80px; } .al-footer-pg-info-mail { font-size: 34px; font-weight: 400; line-height: 1; color: var(--tp-common-cream); font-family: var(--tp-ff-playfair); position: relative; margin-bottom: 30px; display: inline-block; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .al-footer-pg-info-mail { font-size: 28px; } } .al-footer-pg-info-mail::after { position: absolute; bottom: -1px; left: 0; width: 0; height: 1px; content: ""; background-color: var(--tp-common-cream); transition: 0.4s; } .al-footer-pg-info-mail:hover { color: var(--tp-common-cream); } .al-footer-pg-info-mail:hover::after { width: 100%; } .al-footer-pg-social a { font-size: 13px; font-weight: 500; line-height: 1; text-transform: uppercase; font-family: var(--tp-ff-poppins); color: rgba(183, 171, 152, 0.6); padding-right: 15px; margin-right: 15px; position: relative; } .al-footer-pg-social a:hover { color: var(--tp-common-cream); } .al-footer-pg-social a::after { position: absolute; top: 4px; right: 0; height: 12px; width: 1px; content: ""; background-color: rgba(183, 171, 152, 0.6); } .al-footer-pg-social a:last-child { padding-right: 0; margin-right: 0; } .al-footer-pg-social a:last-child::after { display: none; } .al-footer-pg-text { font-size: 270px; font-weight: 600; line-height: 1; letter-spacing: -10px; text-transform: uppercase; color: var(--tp-common-cream); font-family: var(--tp-ff-poppins); white-space: nowrap; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .al-footer-pg-text { font-size: 220px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .al-footer-pg-text { font-size: 180px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .al-footer-pg-text { font-size: 150px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .al-footer-pg-text { font-size: 60px; } } .al-footer-pg-slide-active .swiper-slide { width: auto; } .al-footer-pg-slide-active .swiper-wrapper { transition-timing-function: linear; } .al-copyright-pg-right-menu a { font-size: 14px; font-weight: 500; line-height: 1; text-transform: uppercase; color: var(--tp-common-cream); font-family: var(--tp-ff-poppins); margin-left: 25px; position: relative; } .al-copyright-pg-right-menu a::after { position: absolute; bottom: 0; left: 0; width: 0; height: 1px; background-color: var(--tp-common-cream); content: ""; transition: 0.4s; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .al-copyright-pg-right-menu a { margin-left: 0; margin: 0px 5px; } } .al-copyright-pg-right-menu a:hover::after { width: 100%; } .al-copyright-pg-left span { font-size: 14px; font-weight: 500; line-height: 1; text-transform: uppercase; color: var(--tp-common-cream); font-family: var(--tp-ff-poppins); } .al-copyright-pg-wrap { padding: 30px 0; border-top: 1px solid #292929; } .al-footer-shop-logo { margin-bottom: 22px; } .al-footer-shop-desc { font-family: var(--tp-ff-dm); color: var(--tp-common-black); margin-bottom: 22px; font-weight: 400; font-size: 20px; line-height: 1.3; } .al-footer-shop-social a { display: inline-block; width: 38px; height: 38px; line-height: 38px; text-align: center; background: #FFFFFF; border: 1px solid #D9DBDE; } .al-footer-shop-social a:hover { background-color: var(--tp-theme-secondary); color: var(--tp-common-white); } .al-footer-shop-talk span { font-family: var(--tp-ff-dm); font-size: 14px; color: var(--tp-grey-1); display: inline-block; } .al-footer-shop-talk h4 { font-family: var(--tp-ff-dm); color: var(--tp-common-black); font-weight: 500; font-size: 22px; } .al-footer-shop-talk h4 a:hover { color: var(--tp-theme-secondary); } .al-footer-shop-contact-icon span { display: inline-block; width: 16px; font-size: 16px; color: var(--tp-common-black); margin-right: 10px; } .al-footer-shop-contact-icon span svg { transform: translateY(-3px); } .al-footer-shop-contact-content p { font-family: var(--tp-ff-dm); font-size: 16px; line-height: 20px; color: var(--tp-grey-1); } .al-footer-shop-contact-content p a:hover { color: var(--tp-theme-secondary); } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .al-footer-shop-copyright { margin-bottom: 15px; } } .al-footer-shop-copyright p { font-family: var(--tp-ff-dm); font-size: 14px; color: var(--tp-text-5); margin-bottom: 0; } .al-footer-shop-copyright p a { color: var(--tp-theme-secondary); } .al-footer-shop-payment p { margin-bottom: 0; } .al-footer-shop-bottom-wrapper { padding-top: 18px; padding-bottom: 18px; border-top: 1px solid #E4E5E8; } .al-footer-shop-widget-title { font-family: var(--tp-ff-dm); font-weight: 500; font-size: 23px; color: var(--tp-common-black); margin-bottom: 15px; } .al-footer-shop-widget-content ul li { list-style: none; } .al-footer-shop-widget-content ul li:not(:last-child) { margin-bottom: 7px; } .al-footer-shop-widget-content ul li a { font-family: var(--tp-ff-dm); font-weight: 500; font-size: 14px; color: var(--tp-grey-1); position: relative; padding-left: 10px; } .al-footer-shop-widget-content ul li a::after { position: absolute; content: ""; left: 0; top: 6px; width: 3px; height: 3px; background-color: var(--tp-grey-1); border-radius: 50%; -webkit-transition: all 0.3s 0s ease-out; -moz-transition: all 0.3s 0s ease-out; -ms-transition: all 0.3s 0s ease-out; -o-transition: all 0.3s 0s ease-out; transition: all 0.3s 0s ease-out; } .al-footer-shop-widget-content ul li a:hover { color: var(--tp-theme-secondary); } .al-footer-shop-widget-content ul li a:hover::after { background-color: var(--tp-theme-secondary); } .footer-col-1 { padding-right: 95px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .footer-col-1 { padding-right: 0; } } /*----------------------------------------*/ /* 4.1 header css /*----------------------------------------*/ .al-header-dvdr { position: relative; padding-left: 23px; line-height: 1; } .al-header-dvdr::before { position: absolute; content: ""; height: 23px; width: 1px; background-color: var(--tp-grey-1); left: 0; top: 50%; transform: translateY(-50%); } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .al-header-dvdr::before { display: none; } } @media only screen and (min-width: 1600px) and (max-width: 1700px), only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .al-header-archi { background: rgba(255, 255, 255, 0.9); } } .al-header-archi .tp-main-menu nav > ul > li > a > span { color: var(--tp-common-black); } .al-header-archi .tp-main-menu nav > ul > li > a:hover { color: var(--tp-theme-secondary); } .al-header-archi .tp-main-menu nav > ul > li > a:hover span { color: var(--tp-theme-secondary); } .al-header-archi .tp-main-menu nav ul li:hover.has-dropdown > a { color: var(--tp-theme-secondary); } .al-header-archi .tp-main-menu nav ul li:hover.has-dropdown > a span { color: var(--tp-theme-secondary); } .al-header-archi .tp-header-btn a { font-family: var(--tp-ff-p); font-weight: 500; font-size: 16px; color: var(--tp-common-black); } .al-header-archi .tp-header-btn a:hover { color: var(--tp-theme-secondary); } .al-header-seo .tp-header-it-btn:hover { background-color: var(--tp-common-blue); color: var(--tp-common-white); box-shadow: none; } .tp-megamenu-list ul li a span.update { color: var(--tp-common-white); background-color: #f70510; } /*----------------------------------------*/ /* 4.1 about css /*----------------------------------------*/ .al-about-archi-shape { position: absolute; top: 0; left: 0; width: 100%; z-index: -1; } .al-about-archi-para { font-family: var(--tp-ff-inter); } .al-about-archi-link { font-family: var(--tp-ff-inter); text-transform: uppercase; font-size: 14px; font-weight: 500; } .al-about-archi-link:hover { color: var(--tp-theme-secondary); } .al-about-archi-link .tp-arrow-svg-top-right { margin-left: 3px; } @media only screen and (min-width: 1600px) and (max-width: 1700px), only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767px) { .al-about-archi-content-wrapper { margin: 0; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 574.98px), only screen and (min-width: 576px) and (max-width: 767px) { .al-about-archi-content-wrapper { margin-bottom: 40px; } } .al-about-archi-thumb.height-1 { width: 100%; height: 537px; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .al-about-archi-thumb.height-1 { height: auto; } } .al-about-archi-thumb.height-2 { width: 100%; height: 786px; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .al-about-archi-thumb.height-2 { height: auto; } } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .al-about-archi-thumb-wrap { margin-right: 0; } } .al-about-pg-shape { filter: invert(100%) sepia(32%) saturate(304%) hue-rotate(200deg) brightness(105%) contrast(100%); } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) { .al-about-pg-area { padding-bottom: 160px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .al-about-pg-area { padding-bottom: 120px; } } .al-about-pg-title-box { padding-left: 50px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .al-about-pg-title-box { padding-left: 0; } } .al-about-pg-title-box p { font-size: 26px; font-weight: 400; line-height: 36px; margin-bottom: 0; color: var(--tp-common-black-7); font-family: var(--tp-ff-playfair); } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .al-about-pg-title-box p { font-size: 22px; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .al-about-pg-subtitle-box { margin-bottom: 20px; } } .al-about-pg-border { padding-bottom: 70px; margin-bottom: 100px; border-bottom: 1px solid rgba(183, 171, 152, 0.14); } .al-about-pg-funfact .border-line { height: 160px; width: 1px; top: 45%; left: 29%; position: absolute; display: inline-block; background-color: #eb5939; transform: translate(-50%, -50%) rotate(-13deg); } @media only screen and (min-width: 992px) and (max-width: 1199px) { .al-about-pg-funfact .border-line { left: 30%; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .al-about-pg-funfact .border-line { left: 15%; } } .al-about-pg-funfact span { font-weight: 400; color: var(--tp-common-black-7); font-family: var(--tp-ff-playfair); display: inline-block; } .al-about-pg-funfact span i { font-size: 22px; display: block; margin-bottom: 20px; font-style: normal; } .al-about-pg-funfact span em { line-height: 0; font-size: 70px; font-style: normal; letter-spacing: -3.5px; display: inline-block; } .al-about-pg-funfact span em span { transform: translateY(5px); display: inline-block; } .al-about-pg-funfact-item .cols { margin-right: 80px; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .al-about-pg-funfact-item .cols { margin-right: 45px; } } .al-about-pg-content-wrap { padding-left: 105px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .al-about-pg-content-wrap { padding-left: 80px; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .al-about-pg-content-wrap { padding-left: 0; } } .al-about-pg-content p { font-size: 22px; font-weight: 400; line-height: 28px; margin-bottom: 65px; color: var(--tp-common-black-7); font-family: var(--tp-ff-poppins); } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .al-about-pg-thumb img { width: 100%; margin-bottom: 30px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .al-about-pg-thumb-2 { padding-top: 0; } } /*----------------------------------------*/ /* 4.1 fact css /*----------------------------------------*/ .al-fact-archi-thumb { margin-left: -88px; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .al-fact-archi-thumb { margin-left: 0; } } .al-fact-archi-thumb img { float: right; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) { .al-fact-archi-wrap { display: flex; gap: 30px; flex-wrap: wrap; } } .al-fact-archi-subtitle { font-size: 24px; line-height: 1.42; color: var(--tp-grey-1); } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) { .al-fact-archi-subtitle { margin-bottom: 10px; } } @media (max-width: 574.98px) { .al-fact-archi-subtitle { margin-bottom: 5px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) { .al-fact-archi-wrapper { margin-left: 0; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .al-fact-archi-wrapper { margin-left: 0; } } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .al-fact-archi-content p { margin-right: 0; font-size: 16px; } .al-fact-archi-content p br { display: none; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .al-fact-archi-content p { font-size: 15px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .al-fact-archi-content p { font-size: 14px; } } .al-fact-archi-number { font-size: 70px; line-height: 1.14; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .al-fact-archi-number { font-size: 55px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) { .al-fact-archi-number { font-size: 50px; } } @media (max-width: 574.98px) { .al-fact-archi-number { font-size: 40px; } } .al-fact-archi-icon-2 { width: 75px; height: 75px; display: inline-block; } .al-fact-archi-icon-3 { color: var(--tp-theme-primary); } @media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .al-fact-archi-count-2 { margin: 0; } } .al-fact-archi-count-2 .al-fact-archi-subtitle { font-size: 20px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .al-fact-archi-count-2 .al-fact-archi-subtitle { font-size: 21px; } } .al-fact-archi-count-3 h5 { color: #bcbcbc; } .al-fact-archi-count-3 h3 { color: var(--tp-common-white); } /*----------------------------------------*/ /* 4.1 chose css /*----------------------------------------*/ .al-choose-archi-thumb { margin-left: -200px; margin-right: 83px; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .al-choose-archi-thumb-4 { margin-left: 0; } } @media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .al-choose-archi-thumb { margin-left: 0; margin-right: 0; } .al-choose-archi-thumb img { width: 100%; } } .al-choose-archi-faq .accordion { --bs-accordion-border-width: 0; --bs-accordion-btn-icon: none; --bs-accordion-btn-active-icon: none; } .al-choose-archi-faq-btn { font-weight: 700; font-size: 30px; color: #bcbcbc; background: none; padding: 0; border-radius: 0; } .al-choose-archi-faq-btn.collapsed { border-bottom-right-radius: 0 !important; border-bottom-left-radius: 0 !important; } .al-choose-archi-faq-btn.accordion-button:not(.collapsed) { background: none; box-shadow: none; color: var(--tp-common-white); } .al-choose-archi-faq-btn.accordion-button:focus { border-color: none; box-shadow: none; } .al-choose-archi-faq-btn:not(.collapsed) .accordion-btn::before { -webkit-transform: translateX(-50%) rotate(90deg); -moz-transform: translateX(-50%) rotate(90deg); -ms-transform: translateX(-50%) rotate(90deg); -o-transform: translateX(-50%) rotate(90deg); transform: translateX(-50%) rotate(90deg); color: var(--tp-common-black); background-color: var(--tp-theme-secondary); opacity: 1; } .al-choose-archi-faq-btn .accordion-btn { position: absolute; top: 50%; right: 0; transform: translateY(-50%); display: inline-block; width: 14px; height: 14px; } .al-choose-archi-faq-btn .accordion-btn:not(.collapsed)::after { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } .al-choose-archi-faq-btn .accordion-btn::before { position: absolute; content: ""; width: 2px; height: 100%; left: 50%; top: 0; background-color: #fff; opacity: 0.5; transform: translateX(-50%); border-radius: 2px; transition: all 0.4s ease; } .al-choose-archi-faq-btn .accordion-btn::after { position: absolute; content: ""; width: 100%; height: 2px; left: 0; top: 43%; transform: translateY(-50%); background-color: #fff; opacity: 0.5; border-radius: 2px; transition: all 0.4s ease; } .al-choose-archi-faq .accordion-item { color: var(--tp-grey-2); background: none; } .al-choose-archi-faq .accordion-item:last-of-type { border-bottom-right-radius: 0 !important; border-bottom-left-radius: 0 !important; } .al-choose-archi-faq-list { padding-bottom: 30px; margin-bottom: 30px; border-bottom: 1px solid #b9b4b4; } .al-choose-archi-details-para { padding: 0; padding-top: 23px; } .al-choose-archi-details-para p { margin-bottom: 0; font-family: var(--tp-ff-inter); color: var(--tp-common-white-2); } .al-choose-archi-expreance { display: flex; align-items: center; clip-path: polygon(0 0, 90% 0, 100% 100%, 0% 100%); background: rgba(255, 255, 255, 0.1); padding: 30px 72px 16px 70px; } @media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .al-choose-archi-expreance { padding: 30px 25px 16px 30px; } } @media (max-width: 574.98px) { .al-choose-archi-expreance { padding: 30px 25px 16px 14px; } } .al-choose-archi-expreance h2 { font-size: 100px; line-height: 1; color: var(--tp-theme-secondary); margin: 0; margin-right: 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) { .al-choose-archi-expreance h2 { font-size: 70px; } } .al-choose-archi-expreance h5 { font-size: 24px; line-height: 1.42; 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) { .al-choose-archi-expreance h5 { font-size: 20px; } } @media (max-width: 574.98px) { .al-choose-archi-expreance h5 { font-size: 17px; } } .al-choose-archi-shape { top: 0; right: 0; z-index: -1; } /*----------------------------------------*/ /* 4.1 instagram css /*----------------------------------------*/ .al-insta-pg-title { font-size: 14px; font-weight: 500; line-height: 1; text-transform: uppercase; font-family: var(--tp-ff-poppins); color: rgba(183, 171, 152, 0.6); margin-bottom: 0; } .al-insta-pg-title span { color: var(--tp-common-cream); } .al-insta-pg-title-box { border-top: 1px solid rgba(183, 171, 152, 0.1); border-bottom: 1px solid rgba(183, 171, 152, 0.1); padding: 14px 0; } .al-insta-pg-thumb img { transition: 0.9s; } .al-insta-pg-thumb:hover img { transform: scale(1.1); } .al-instagram-shop-item-2 { position: relative; } .al-instagram-shop-item-2::after { position: absolute; content: ""; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(3, 3, 3, 0.3); opacity: 0; 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; } .al-instagram-shop-item-2:hover::after { visibility: visible; opacity: 1; } .al-instagram-shop-item-2:hover .al-instagram-shop-icon-2 { top: 50%; visibility: visible; opacity: 1; } .al-instagram-shop-icon-2 { position: absolute; top: 60%; 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%); z-index: 1; visibility: hidden; opacity: 0; -webkit-transition: all 0.3s 0s ease-out; -moz-transition: all 0.3s 0s ease-out; -ms-transition: all 0.3s 0s ease-out; -o-transition: all 0.3s 0s ease-out; transition: all 0.3s 0s ease-out; } .al-instagram-shop-icon-2 a { display: inline-block; width: 60px; height: 60px; text-align: center; line-height: 60px; color: var(--tp-common-black); font-size: 18px; border-radius: 50px; background-color: var(--tp-common-white); } .al-instagram-shop-icon-2 a:hover { background-color: var(--tp-theme-secondary); color: var(--tp-common-white); } .al-instagram-shop-icon-2 a i { -webkit-transform: translateY(1px); -moz-transform: translateY(1px); -ms-transform: translateY(1px); -o-transform: translateY(1px); transform: translateY(1px); } .al-instagram-shop-banner { height: 100%; width: 100%; background-color: var(--tp-common-white); border: 1px solid var(--tp-common-black); display: flex; align-items: center; justify-content: center; flex-direction: column; } @media (max-width: 574.98px) { .al-instagram-shop-banner { padding-top: 50px; padding-bottom: 50px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .al-instagram-shop-banner-icon { margin-bottom: 20px; } } @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) { .al-instagram-shop-banner-icon img { width: 50%; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .al-instagram-shop-banner-icon img { width: 35%; } } .al-instagram-shop-banner-content span { font-weight: 400; font-size: 20px; color: #021D35; display: block; margin-bottom: 5px; font-family: var(--tp-ff-dm); } .al-instagram-shop-banner-content a { font-weight: 700; font-size: 36px; color: #021D35; font-family: var(--tp-ff-dm); } .al-instagram-shop-banner-content a:hover { color: var(--tp-theme-secondary); } /*----------------------------------------*/ /* 4.1 banner css /*----------------------------------------*/ .al-banner-shop-item { min-height: 280px; padding: 65px 48px 55px; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) { .al-banner-shop-item { padding: 65px 25px 55px; } } @media (max-width: 574.98px) { .al-banner-shop-item { min-height: 250px; padding: 49px 29px 45px; } } .al-banner-shop-item:hover .al-banner-shop-thumb { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); } .al-banner-shop-thumb { z-index: -1; } @media (max-width: 574.98px) { .al-banner-shop-thumb { background-position: center left; } } .al-banner-shop-title { font-weight: 400; font-size: 36px; line-height: 1.17; margin-bottom: 20px; font-family: var(--tp-ff-dm); } .al-banner-shop-title a:hover { color: var(--tp-theme-secondary); } /*----------------------------------------*/ /* 4.1 cetagory css /*----------------------------------------*/ .al-category-shop-slider .al-swiper-shop-scrollbar { width: calc(100% - 200px); margin: auto; } @media only screen and (min-width: 576px) and (max-width: 767px) { .al-category-shop-slider .al-swiper-shop-scrollbar { width: calc(100% - 100px); } } @media (max-width: 574.98px) { .al-category-shop-slider .al-swiper-shop-scrollbar { width: 100%; } } .al-category-shop-item:hover .al-category-shop-title, .al-category-shop-item:hover .al-category-shop-btn, .al-category-shop-item:hover .al-category-shop-content span, .al-category-shop-item:hover .al-category-shop-content::after { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); visibility: visible; opacity: 1; } .al-category-shop-item:hover .al-category-shop-title { transition-delay: 0.5s; } .al-category-shop-item:hover .al-category-shop-btn { transition-delay: 0.7s; } .al-category-shop-item:hover .al-category-shop-content span { transition-delay: 0.3s; } .al-category-shop-item:hover .al-category-shop-content::after { transition-delay: 0.1s; } .al-category-shop-title, .al-category-shop-btn, .al-category-shop-content span, .al-category-shop-content::after { -webkit-transform: translateY(10px); -moz-transform: translateY(10px); -ms-transform: translateY(10px); -o-transform: translateY(10px); transform: translateY(10px); visibility: hidden; opacity: 0; -webkit-transition: all 0.3s 0s ease-out; -moz-transition: all 0.3s 0s ease-out; -ms-transition: all 0.3s 0s ease-out; -o-transition: all 0.3s 0s ease-out; transition: all 0.3s 0s ease-out; } .al-category-shop-content { position: absolute; top: 14px; left: 14px; bottom: 14px; right: 14px; background-color: transparent; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; flex-direction: column; justify-content: center; align-items: center; z-index: 1; } .al-category-shop-content::after { position: absolute; content: ""; left: 0; top: 0; width: 100%; height: 100%; background-color: var(--tp-common-white); z-index: -1; -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; transition-delay: 0.7s; } .al-category-shop-content span { font-size: 16px; display: inline-block; margin-bottom: 3px; transition-delay: 0.5s; font-family: var(--tp-ff-dm); } .al-category-shop-title { font-weight: 400; font-size: 20px; margin-bottom: 17px; transition-delay: 0.3s; font-family: var(--tp-ff-dm); } .al-category-shop-title a:hover { color: var(--tp-theme-secondary); } .al-category-shop-btn { transition-delay: 0s; } .al-category-shop-btn .al-shop-btn-border { font-size: 14px; padding: 3px 15px; } .al-category-shop-btn .al-shop-btn-border:hover { background: var(--tp-theme-secondary); border-color: var(--tp-theme-secondary); color: var(--tp-common-white); } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .al-category-shop-thumb img { width: 100%; } } .al-swiper-shop-scrollbar { background-color: #EDEFF2; height: 2px !important; -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; position: relative !important; } .al-swiper-shop-scrollbar .al-swiper-scrollbar-drag { background-color: var(--tp-common-black); height: 100%; } .al-swiper-shop-scrollbar .al-swiper-scrollbar-drag:hover { cursor: pointer; } /*----------------------------------------*/ /* 4.1 product css /*----------------------------------------*/ .al-product-tab .nav-tabs { border: none; } .al-product-tab .nav-tabs .nav-link { font-size: 20px; color: #A0A2A4; position: relative; font-family: var(--tp-ff-dm); padding: 0; margin: 0; border: 0; } @media (max-width: 574.98px) { .al-product-tab .nav-tabs .nav-link { font-size: 15px; } } .al-product-tab .nav-tabs .nav-link:not(:first-child) { margin-left: 28px; } .al-product-tab .nav-tabs .nav-link:not(:first-child)::after { position: absolute; left: -17px; top: 50%; content: ""; width: 6px; height: 6px; border-radius: 50%; background-color: #CED2D6; } .al-product-tab .nav-tabs .nav-link.active { color: var(--tp-theme-secondary); } .al-product-tab .nav-tabs .nav-link.active .al-product-tab-tooltip { opacity: 1; visibility: visible; } .al-product-tab .nav-tabs .nav-link .al-product-tab-tooltip { position: absolute; top: -24px; right: 0; background-color: var(--tp-theme-secondary); color: var(--tp-common-white); font-size: 12px; line-height: 1; display: inline-block; padding: 4px 9px; border-radius: 4px; visibility: hidden; opacity: 0; -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; font-weight: 700; font-family: var(--tp-ff-dm); } .al-product-tab .nav-tabs .nav-link .al-product-tab-tooltip::after { position: absolute; content: ""; bottom: 0; bottom: -5px; left: 7px; width: 13px; height: 6px; background-color: var(--tp-theme-secondary); clip-path: polygon(100% 0, 0 0, 28% 100%); } .al-product-tag { margin-bottom: 3px; } .al-product-tag a { font-size: 14px; position: relative; display: inline-block; line-height: 1; font-family: var(--tp-ff-dm); color: var(--tp-grey-1); } .al-product-tag a::after { position: absolute; content: ""; left: auto; right: 0; bottom: 0; width: 0; height: 1px; background-color: var(--tp-theme-secondary); -webkit-transition: all 0.3s 0s ease-out; -moz-transition: all 0.3s 0s ease-out; -ms-transition: all 0.3s 0s ease-out; -o-transition: all 0.3s 0s ease-out; transition: all 0.3s 0s ease-out; } .al-product-tag a:hover { color: var(--tp-theme-secondary); } .al-product-tag a:hover::after { left: 0; right: auto; width: 100%; } .tp-product-price { color: var(--tp-grey-1); } .al-trending-shop-slider-dot .swiper-pagination-bullet.swiper-pagination-bullet-active { background-color: var(--tp-theme-secondary); } .al-trending-shop-banner { position: relative; height: 630px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .al-trending-shop-banner { height: 430px; margin-left: 0; margin-top: 50px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .al-trending-shop-banner { height: 430px; margin-left: 0; margin-top: 50px; } } @media (max-width: 574.98px) { .al-trending-shop-banner { height: 430px; margin-left: 0; margin-top: 50px; } } .al-trending-shop-banner::after { position: absolute; content: ""; left: 0; bottom: 0; width: 100%; height: 100%; background-image: -webkit-linear-gradient(180deg, rgba(1, 15, 28, 0) 44.84%, rgba(1, 15, 28, 0.6) 100%); background-image: -moz-linear-gradient(180deg, rgba(1, 15, 28, 0) 44.84%, rgba(1, 15, 28, 0.6) 100%); background-image: -ms-linear-gradient(180deg, rgba(1, 15, 28, 0) 44.84%, rgba(1, 15, 28, 0.6) 100%); background-image: -o-linear-gradient(180deg, rgba(1, 15, 28, 0) 44.84%, rgba(1, 15, 28, 0.6) 100%); background-image: linear-gradient(180deg, rgba(1, 15, 28, 0) 44.84%, rgba(1, 15, 28, 0.6) 100%); } .al-trending-shop-banner-content { position: absolute; bottom: 40px; left: 35px; z-index: 1; } @media (max-width: 574.98px) { .al-trending-shop-banner-content { bottom: 25px; left: 20px; } } .al-trending-shop-banner-title { font-weight: 500; font-size: 30px; line-height: 1.13; color: var(--tp-common-white); margin-bottom: 18px; } .al-trending-shop-banner-title a { background-image: linear-gradient(#fff, #fff), linear-gradient(#fff, #fff); background-size: 0% 1px, 0 1px; background-position: 100% 100%, 0 81%; background-repeat: no-repeat; transition: background-size 0.4s linear; } .al-trending-shop-banner-title a:hover { background-size: 0 1px, 100% 1px; } .al-trending-shop-banner-thumb { position: absolute; top: 0; left: 0; width: 100%; 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) { .al-trending-shop-banner-thumb { background-position: top center; } } /*----------------------------------------*/ /* 4.1 featured css /*----------------------------------------*/ .al-featured-shop-slider { margin-right: -660px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) { .al-featured-shop-slider { margin-right: 0; } } .al-featured-shop-slider-arrow button { font-size: 30px; color: #B3BAC0; position: relative; } .al-featured-shop-slider-arrow button:not(:last-child) { padding-right: 14px; margin-right: 10px; } .al-featured-shop-slider-arrow button:not(:last-child)::after { position: absolute; content: ""; right: 0; top: 0; height: 30px; width: 1px; background-color: #D6D9E0; } .al-featured-shop-slider-arrow button:hover { color: var(--tp-common-black); } .al-featured-shop-item { min-height: 380px; padding: 87px 50px; } @media only screen and (min-width: 576px) and (max-width: 767px) { .al-featured-shop-item { padding: 87px 35px; } } @media (max-width: 574.98px) { .al-featured-shop-item { min-height: 280px; padding: 35px 35px; } } .al-featured-shop-thumb { z-index: -1; width: 290px; position: absolute; top: 0; right: 0; height: 100%; } @media (max-width: 574.98px) { .al-featured-shop-thumb { height: 230px; position: inherit; margin-bottom: 20px; } } .al-featured-shop-title { font-weight: 400; font-size: 36px; line-height: 1.17; margin-bottom: 7px; font-family: var(--tp-ff-dm); } @media (max-width: 574.98px) { .al-featured-shop-title { font-size: 25px; } } .al-featured-shop-title a:hover { color: var(--tp-theme-secondary); } .al-featured-shop-price { font-weight: 500; font-size: 20px; color: var(--tp-common-black); line-height: 1; font-family: var(--tp-ff-dm); } .al-featured-shop-price-wrapper { line-height: 1; margin-bottom: 2px; } .al-featured-shop-price.new-price { color: var(--tp-common-black); } .al-featured-shop-price.old-price { font-weight: 400; font-size: 14px; text-decoration-line: line-through; color: var(--tp-grey-1); } .al-featured-shop-rating-icon { margin-right: 6px; display: flex; align-items: center; } .al-featured-shop-rating-icon span { color: #ffb21d; font-size: 12px; } .al-featured-shop-rating-icon span:not(:last-child) { margin-right: 2px; } .al-feature-shop-border-2 .row [class*=col-] .al-feature-shop-item-2 { position: relative; } @media (max-width: 574.98px) { .al-feature-shop-border-2 .row [class*=col-] .al-feature-shop-item-2 { padding-bottom: 20px; margin-bottom: 20px; } } .al-feature-shop-border-2 .row [class*=col-] .al-feature-shop-item-2::after { position: absolute; content: ""; right: 14px; top: 42%; width: 1px; height: 50px; background-color: #D9DBDE; transform: translateY(-50%); } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) { .al-feature-shop-border-2 .row [class*=col-] .al-feature-shop-item-2::after { display: none; } } @media (max-width: 574.98px) { .al-feature-shop-border-2 .row [class*=col-]:last-child .al-feature-shop-item-2 { padding-bottom: 0; margin-bottom: 0; } } .al-feature-shop-border-2 .row [class*=col-]:last-child .al-feature-shop-item-2::after { 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) { .al-feature-shop-border-2 .row [class*=col-]:nth-child(1) .al-feature-shop-item-2, .al-feature-shop-border-2 .row [class*=col-]:nth-child(2) .al-feature-shop-item-2, .al-feature-shop-border-2 .row [class*=col-]:nth-child(3) .al-feature-shop-item-2 { padding-bottom: 20px; margin-bottom: 20px; } .al-feature-shop-border-2 .row [class*=col-]:nth-child(1) .al-feature-shop-item-2::after, .al-feature-shop-border-2 .row [class*=col-]:nth-child(2) .al-feature-shop-item-2::after, .al-feature-shop-border-2 .row [class*=col-]:nth-child(3) .al-feature-shop-item-2::after { right: auto; left: 0; top: auto; bottom: 0; width: 85%; height: 1px; display: block; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) { .al-feature-shop-border-2 .row [class*=col-]:nth-child(3) .al-feature-shop-item-2 { padding-bottom: 0; margin-bottom: 0; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) { .al-feature-shop-border-2 .row [class*=col-]:nth-child(3) .al-feature-shop-item-2::after { display: none; } } .al-feature-shop-inner-2 { background: var(--tp-common-white); border: 1px solid #E9EAEC; padding: 30px 40px 23px; } .al-feature-shop-title-2 { font-weight: 500; font-size: 16px; font-family: var(--tp-ff-dm); color: var(--tp-common-black); margin-bottom: 2px; line-height: 1; } .al-feature-shop-icon-2 span { font-size: 35px; color: var(--tp-common-black); } .al-feature-shop-content-2 p { font-size: 14px; margin-bottom: 0; line-height: 1.3; font-family: var(--tp-ff-dm); } /*----------------------------------------*/ /* 4.1 dark css /*----------------------------------------*/ .aleric-dark .black-bg-6 { background: #1B1C1D; } .aleric-dark .tp_text_invert.invert-black-7 > div { background-image: linear-gradient(to right, #b7ab98 50%, #403c38 50%); } .aleric-dark .al-about-pg-shape { filter: none; } .aleric-dark .al-section-pg-subtitle:before, .aleric-dark .al-section-pg-subtitle:after { background: #121314; } .aleric-dark .al-section-pg-subtitle { color: var(--tp-common-cream); border: 1px solid var(--tp-common-cream); } .aleric-dark .al-about-pg-content p { color: var(--tp-common-cream); } .aleric-dark .al-about-pg-funfact span em { color: var(--tp-common-cream); } .aleric-dark .al-about-pg-funfact span i { color: var(--tp-common-cream); } .aleric-dark .al-about-pg-funfact span { color: var(--tp-common-cream); } .aleric-dark .al-project-pg-2-item.active .al-project-pg-2-title { color: var(--tp-common-cream); } .aleric-dark .al-project-pg-2-title { color: #403C38; } .aleric-dark .al-project-pg-2-item.active .al-project-pg-2-title-box span { color: var(--tp-common-cream); } .aleric-dark .al-project-pg-2-title-box span { color: #403C38; } .aleric-dark .al-project-pg-2-year span { color: #403C38; } .aleric-dark .al-project-pg-2-item.active .al-project-pg-2-year span { color: var(--tp-common-cream); } .aleric-dark .al-project-pg-2-link span { color: #403C38; } .aleric-dark .al-project-pg-2-item.active .al-project-pg-2-link span { color: var(--tp-common-cream); } .aleric-dark .al-price-pg-title { color: var(--tp-common-cream); } .aleric-dark .al-price-pg-price { color: var(--tp-common-cream); } .aleric-dark .al-price-pg-head p { color: var(--tp-common-cream); } .aleric-dark .al-btn-pg-price { color: var(--tp-common-cream); } .aleric-dark .al-btn-pg-price:hover { color: var(--tp-common-black); border-color: var(--tp-common-cream); background-color: var(--tp-common-cream); } .aleric-dark .al-price-pg-list ul li { color: var(--tp-common-cream); } .aleric-dark .al-price-pg-list ul li::after { background-color: var(--tp-common-cream); } .aleric-dark .al-price-pg-bdr-1::before, .aleric-dark .al-price-pg-bdr-2::before, .aleric-dark .al-price-pg-bdr-3::before, .aleric-dark .al-price-pg-bdr-4::before { background-color: var(--tp-common-cream); } .aleric-dark .al-price-pg-bdr-1::after, .aleric-dark .al-price-pg-bdr-2::after, .aleric-dark .al-price-pg-bdr-3::after, .aleric-dark .al-price-pg-bdr-4::after { background-color: var(--tp-common-cream); } .aleric-dark .al-main-menu-archi nav > ul > li > a { color: var(--tp-common-black); } .aleric-dark .al-header-archi.header-sticky .tp-header-logo .logo-1 { display: none; } .aleric-dark .al-header-archi.header-sticky .tp-header-logo .logo-2 { display: block !important; } .aleric-dark .al-header-archi.header-sticky .al-main-menu-archi nav > ul > li > a { color: var(--tp-common-white); } .aleric-dark .al-header-archi.header-sticky .al-main-menu-archi nav > ul > li > a > span { color: var(--tp-common-white); } .aleric-dark .al-header-archi.header-sticky .tp-header-btn a { color: var(--tp-common-white); } .aleric-dark .al-header-archi.header-sticky .tp-header-it-menu-btn span { background: var(--tp-common-white); } .aleric-dark .al-header-archi.header-sticky .tp-main-menu nav ul li:hover.has-dropdown > a { color: var(--tp-theme-secondary); } .aleric-dark .al-header-archi.header-sticky .tp-main-menu nav ul li:hover.has-dropdown > a span { color: var(--tp-theme-secondary); } .aleric-dark .al-header-archi.header-sticky .tp-header-btn a:hover { color: var(--tp-theme-secondary); } .aleric-dark .al-header-archi .tp-header-it-menu-btn span { background: var(--tp-common-black); } .aleric-dark .al-section-archi-title { color: var(--tp-common-white); } .aleric-dark .al-section-archi-subtitle { color: var(--tp-common-white); } .aleric-dark .al-section-archi-content p { color: rgba(255, 255, 255, 0.8); } .aleric-dark .al-about-archi-para { color: rgba(255, 255, 255, 0.8); } .aleric-dark .al-about-archi-link { color: var(--tp-common-white); } .aleric-dark .al-about-archi-link:hover { color: var(--tp-theme-secondary); } .aleric-dark .al-service-archi-icon { color: var(--tp-common-white); } .aleric-dark .al-service-archi-title { color: var(--tp-common-white); } .aleric-dark .al-service-archi-content p { color: rgba(255, 255, 255, 0.8); } .aleric-dark .al-fact-archi-icon { color: var(--tp-common-white); } .aleric-dark .al-fact-archi-subtitle { color: rgba(255, 255, 255, 0.8); } .aleric-dark .al-fact-archi-number { color: var(--tp-common-white); } .aleric-dark .al-project-archi-meta h5 { color: rgba(255, 255, 255, 0.8); } .aleric-dark .al-project-archi-title-sm { color: var(--tp-common-white); } .aleric-dark .al-project-archi-content span { color: rgba(255, 255, 255, 0.8); } .aleric-dark .al-project-archi-icon::before { background-color: #cecac447; } .aleric-dark .al-project-archi-icon a { border: 1px solid #cecac447; color: var(--tp-common-white); } .aleric-dark .al-blog-archi-tag a span { color: var(--tp-common-white); } .aleric-dark .al-blog-archi-tag::before { background-color: #121212; } .aleric-dark .al-blog-archi-title { color: var(--tp-common-white); } .aleric-dark .al-blog-archi-avatar h5 { color: var(--tp-common-white); } .aleric-dark .al-blog-archi-avatar-para { color: rgba(255, 255, 255, 0.8); } .aleric-dark .al-blog-archi-avatar h5::before { background: #cecac447; } .aleric-dark .al-footer-archi-bottom { background-color: var(--tp-common-black); } .aleric-dark .al-footer-archi-widget-title { color: var(--tp-common-white); } .aleric-dark .al-footer-archi-widget-link ul li a { color: rgba(255, 255, 255, 0.8); } .aleric-dark .al-footer-archi-widget-link ul li a:hover { color: var(--tp-theme-secondary); } .aleric-dark .al-footer-archi-main-border { border-top: 1px solid #cecac447; } .aleric-dark .al-footer-archi-input input { border-bottom: 1px solid #cecac447; color: var(--tp-common-white); } .aleric-dark .al-footer-archi-input input::placeholder { color: rgba(255, 255, 255, 0.8); } .aleric-dark .al-footer-archi-check label { color: var(--tp-common-white); } .aleric-dark .al-footer-archi-social-link a { color: var(--tp-common-white); } .aleric-dark .al-footer-archi-social-link a:hover { color: var(--tp-theme-secondary); } .aleric-dark .al-footer-archi-copyright p { color: rgba(255, 255, 255, 0.8); } .aleric-dark .al-footer-archi-copyright-social a { color: var(--tp-common-white); } .aleric-dark .al-footer-archi-copyright-social a:hover { color: var(--tp-theme-secondary); } .aleric-dark .al-footer-archi-copyright-social span { color: var(--tp-common-white); } .aleric-dark .al-blog-archi-btn a { color: var(--tp-common-white); } .aleric-dark .al-blog-archi-btn a:hover { color: var(--tp-theme-secondary); } .aleric-dark .al-section-subtitle.fs-12 { background-color: #1d1e1e; color: var(--tp-common-white); } .aleric-dark .al-section-title { color: var(--tp-common-white); } .aleric-dark .al-step-number::after { border: 4px solid var(--tp-common-black); } .aleric-dark .al-step-title-sm { color: var(--tp-common-white); } .aleric-dark .al-step-arrow-shape-1 img { filter: invert(1); } .aleric-dark .al-step-arrow-shape-2 img { filter: invert(1); } .aleric-dark .al-service-seo-title { color: var(--tp-common-white); } .aleric-dark .al-service-seo-content p { color: rgba(255, 255, 255, 0.8); } .aleric-dark .al-project-seo-item { background: var(--tp-common-black); border: 1px solid rgba(255, 255, 255, 0.04); } .aleric-dark .al-toggler-pre, .aleric-dark .al-toggler-post { color: rgba(255, 255, 255, 0.8); } .aleric-dark .al-toggler-pre.is-active, .aleric-dark .al-toggler-post.is-active { color: var(--tp-common-white); } .aleric-dark .al-price-offer img { filter: invert(1); } .aleric-dark .al-price-item { background-color: var(--tp-common-black); } .aleric-dark .al-price-item.active { background-color: var(--tp-common-blue); } .aleric-dark .al-price-head h5 { color: var(--tp-common-white); } .aleric-dark .al-price-head span { color: var(--tp-common-white); } .aleric-dark .al-price-list ul li { color: var(--tp-common-white); } .aleric-dark .al-price-list ul li::after { background-color: var(--tp-common-white); } .aleric-dark .al-faq-wrapper .accordion-header .accordion-buttons { color: var(--tp-common-white); } .aleric-dark .al-faq-wrapper .accordion-body p { color: rgba(255, 255, 255, 0.8); } .aleric-dark .al-faq-wrapper .accordion-header .accordion-buttons .accordion-icon::after { background-color: rgba(255, 255, 255, 0.8); } .aleric-dark .al-faq-wrapper .accordion-header .accordion-buttons .accordion-icon::before { background-color: rgba(255, 255, 255, 0.8); } .aleric-dark .al-faq-wrapper .accordion-header .accordion-buttons:not(.collapsed) { color: var(--tp-common-blue); } .aleric-dark .al-faq-wrapper .accordion-header .accordion-buttons:not(.collapsed) .accordion-icon::after { background-color: var(--tp-common-blue); } .aleric-dark .al-faq-wrapper .accordion-items:not(:last-child) { box-shadow: 0 1px 0 0 rgba(166, 188, 195, 0.14); } .aleric-dark .al-faq-form-box { background-color: var(--tp-grey-8); } .aleric-dark .al-faq-form-wrap { background-color: var(--tp-common-black); } .aleric-dark .al-faq-form-title { color: var(--tp-common-white); } .aleric-dark .al-faq-form-content p { color: var(--tp-common-white); } .aleric-dark .al-faq-remeber label { color: rgba(255, 255, 255, 0.8); } .aleric-dark .al-faq-input input { color: var(--tp-common-white); border: 1px solid rgba(39, 40, 40, 0.99); background: transparent; } .aleric-dark .al-text-slider-seo-wave-shape-2 { filter: invert(1); } .aleric-dark .al-text-slider-seo-wave-shape-1 { filter: invert(1); } .aleric-dark .al-text-slider-seo-title { color: var(--tp-common-white); } .aleric-dark .al-testimonial-seo-avater-title { color: var(--tp-common-white); } .aleric-dark .al-testimonial-seo-avater-info span { color: rgba(255, 255, 255, 0.8); } .aleric-dark .al-testimonial-seo-text p { color: var(--tp-common-white); } .aleric-dark .al-testimonial-seo-btn .tp-rounded-btn-wrap a { color: var(--tp-common-white); } .aleric-dark .al-blog-seo-item { background-color: var(--tp-common-black); } .aleric-dark .al-blog-seo-category a { color: var(--tp-common-white); border: 1px solid rgba(48, 48, 48, 0.74); } .aleric-dark .al-blog-seo-title { color: var(--tp-common-white); } .aleric-dark .al-blog-seo-meta span { color: rgba(255, 255, 255, 0.8); } .aleric-dark .al-blog-seo-avater-info span { color: var(--tp-common-white); } .aleric-dark .al-hero-seo-dashboard::after { background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000000 85.94%); } .aleric-dark .al-hero-seo-title { color: var(--tp-common-white); } .aleric-dark .al-hero-seo-title-box p { color: var(--tp-common-white); } .aleric-dark .al-hero-seo-playbtn i { color: var(--tp-common-white); } .aleric-dark .al-brand-seo-box a { color: rgba(255, 255, 255, 0.8); } .aleric-dark .al-brand-seo-box a:hover { color: var(--tp-common-white); } .aleric-dark .al-brand-seo-title { color: var(--tp-common-white); } .aleric-dark .al-hero-shop-title { color: var(--tp-common-white); } .aleric-dark .al-shop-btn-border { border: 1.5px solid #b5abab47; color: var(--tp-common-white); } .aleric-dark .al-shop-btn-border:hover { border-color: var(--tp-theme-secondary); } .aleric-dark .al-hero-shop-content span { color: var(--tp-common-white); } .aleric-dark .al-hero-shop-shape-1 { filter: invert(1); } .aleric-dark .al-banner-shop-btn .al-shop-btn-border { border: 1.5px solid var(--tp-common-black); color: var(--tp-common-black); } .aleric-dark .al-banner-shop-btn .al-shop-btn-border:hover { border-color: var(--tp-theme-secondary); color: var(--tp-common-white); } .aleric-dark .al-section-shop-title { color: var(--tp-common-white); } .aleric-dark .al-category-shop-btn .al-shop-btn-border { border: 1.5px solid var(--tp-common-black); color: var(--tp-common-black); } .aleric-dark .al-category-shop-btn .al-shop-btn-border:hover { border-color: var(--tp-theme-secondary); color: var(--tp-common-white); } .aleric-dark .al-swiper-shop-scrollbar .al-swiper-scrollbar-drag { background-color: var(--tp-common-white); } .aleric-dark .al-swiper-shop-scrollbar { background-color: #4b4f54; } .aleric-dark .al-product-tab .nav-tabs .nav-link.active { background: transparent; } .aleric-dark .al-product-tag a { color: rgba(255, 255, 255, 0.8); } .aleric-dark .al-product-tag a:hover { color: var(--tp-theme-secondary); } .aleric-dark .al-featured-shop-btn .al-shop-btn-border { border: 1.5px solid var(--tp-common-black); color: var(--tp-common-black); } .aleric-dark .al-featured-shop-btn .al-shop-btn-border:hover { border-color: var(--tp-theme-secondary); color: var(--tp-common-white); } .aleric-dark .al-trending-shop-slider-dot span { background: rgba(255, 255, 255, 0.8) !important; } .aleric-dark .al-trending-shop-banner-btn .al-shop-btn-border:hover { border-color: var(--tp-common-black); color: var(--tp-common-white); } .aleric-dark .al-testimonial-shop-section-title { color: var(--tp-common-white); } .aleric-dark .al-testimonial-shop-content p { color: var(--tp-common-white); } .aleric-dark .al-blog-shop-meta a { color: rgba(255, 255, 255, 0.8); } .aleric-dark .al-blog-shop-meta a:hover { color: var(--tp-theme-secondary); } .aleric-dark .al-blog-shop-title { color: var(--tp-common-white); } .aleric-dark .al-blog-shop-meta span { color: rgba(255, 255, 255, 0.8); } .aleric-dark .al-feature-shop-inner-2 { border: 1px solid var(--tp-grey-8); background: var(--tp-grey-8); } .aleric-dark .al-feature-shop-content-2 p { color: var(--tp-common-white); } .aleric-dark .al-feature-shop-title-2 { color: var(--tp-common-white); } .aleric-dark .al-feature-shop-border-2 .row [class*=col-] .al-feature-shop-item-2::after { background-color: #3d3f42; } .aleric-dark .al-footer-shop-social a { background: transparent; border: 1px solid #3d3f42; color: var(--tp-common-white); } .aleric-dark .al-footer-shop-social a:hover { border-color: var(--tp-theme-secondary); color: var(--tp-common-white); background: var(--tp-theme-secondary); } .aleric-dark .al-footer-shop-desc { color: var(--tp-common-white); } .aleric-dark .al-footer-shop-widget-title { color: var(--tp-common-white); } .aleric-dark .al-footer-shop-widget-content ul li a { color: rgba(255, 255, 255, 0.8); } .aleric-dark .al-footer-shop-widget-content ul li a:hover { color: var(--tp-theme-secondary); } .aleric-dark .al-footer-shop-talk span { color: rgba(255, 255, 255, 0.8); } .aleric-dark .al-footer-shop-talk h4 { color: var(--tp-common-white); } .aleric-dark .al-footer-shop-contact-content p { color: rgba(255, 255, 255, 0.8); } .aleric-dark .al-footer-shop-contact-icon span { color: rgba(255, 255, 255, 0.8); } .aleric-dark .al-footer-shop-bottom-wrapper { border-top: 1px solid #e4e5e82e; } .aleric-dark .al-footer-shop-copyright p { color: rgba(255, 255, 255, 0.8); } .aleric-dark .al-feature-shop-icon-2 span { color: var(--tp-common-white); } .aleric-dark .al-instagram-shop-banner { background-color: var(--tp-common-black); border: 1px solid var(--tp-common-white); } .aleric-dark .al-instagram-shop-banner-content span { color: var(--tp-common-white); } .aleric-dark .al-instagram-shop-banner-content a { color: var(--tp-common-white); } .aleric-dark .al-instagram-shop-banner-content a:hover { color: var(--tp-theme-secondary); } .aleric-dark .al-featured-shop-slider-arrow button:hover { color: var(--tp-theme-secondary); } .aleric-dark .tp-product-details-additional-info table tr td:last-child { color: var(--tp-common-white); } /*# sourceMappingURL=main.css.map */ /* ------------------------------------------------- HIDE SCROLLBARS ONLY INSIDE .col-xl-7 (keeps scrolling functional, page scroll unchanged) ------------------------------------------------- */ .tp-blog-grid-area .col-xl-7 { flex: 1; overflow-y: auto; /* keep vertical scrolling */ overflow-x: hidden; /* prevent horizontal overflow */ max-height: 100vh; /* optional – limits height */ /* Firefox */ scrollbar-width: none; /* IE / old Edge */ -ms-overflow-style: none; /* Chrome, Safari, new Edge */ &::-webkit-scrollbar { display: none; } } /* ------------------------------------------------- YOUR ORIGINAL STYLES (unchanged) ------------------------------------------------- */ .tp-blog-grid-area .row { display: flex; flex-wrap: wrap; } .tp-blog-grid-area .col-xl-5 { position: sticky; top: 100px; align-self: flex-start; height: fit-content; z-index: 1; } .tp-blog-grid-area { padding-top:100px !important; padding-bottom:200px !important; } @media (max-width:1199px){ .tp-blog-grid-area .col-xl-5 { position:static !important; } .tp-blog-grid-area .col-xl-7 { max-height:none !important; } } .tp-blog-item.tp_fade_anim{ opacity:1 !important; transform:none !important; } .privacy-container{ background:#fff; padding:12px 25px; border-radius:8px; display:inline-block; } .privacy-container h2{ color:#000; margin:0; } .tp-service-pp-pin .tp-service-pp-item, .tp-service-pp-pin .row:first-child{ margin-bottom:90px; } .blog-card-hover:hover { background:#021352!important; } /* HOVER: Force WHITE */ .blog-card:hover .tp-blog-meta span, .blog-card:hover h3, .blog-card:hover h3 a, .blog-card:hover .blog-link { color: #ffffff !important; text-decoration-color: #ffffff !important; } /* Underline turns white */ .blog-card:hover .underline-black::after { background-color: #ffffff !important; } /* Card lift */ .blog-card:hover { transform: translateY(-10px); box-shadow: 0 25px 50px rgba(0,123,255,0.25); } /* Shop page slider pagination css */ /* Custom layout - renamed to avoid conflicts */ .custom-fraction-wrapper { position: relative; display: flex; flex-direction: row; justify-content: center; align-items: center; margin: 0 auto; width: 220px; height: 120px; z-index: 10; bottom: 50px; visibility: visible; opacity: 1; } .custom-fraction-wrapper #paginations { display: flex; flex-direction: row; justify-content: space-between; align-items: center; width: 100%; color: #ffffff; } .custom-fraction-wrapper #paginations .shop-slider-pagination { display: flex; justify-content: space-between; width: 100%; align-items: center; } .custom-fraction-wrapper #paginations .shop-slider-pagination span { font-size: 22px; font-weight: 500; color: #ffffff; flex: 0 0 auto; padding: 0 0px; } .custom-fraction-wrapper #paginations .shop-slider-pagination span:first-child { margin-left: -25px; order: -1; } .custom-fraction-wrapper #paginations .shop-slider-pagination span:last-child { order: 1; margin-right: -50px; } .custom-fraction-wrapper .shop-slider-progress-bar { position: relative; width: 200px; height: 3px; background-color: #ccc; z-index: 11; flex: 0 0 200px; order: 0; } .custom-fraction-wrapper .shop-slider-progress-bar span { position: absolute; left: 0; top: 0; height: 3px; width: 100%; background-color: #ffffff; transform: scaleX(1); transform-origin: left; } /* Overrides for testimonial sections */ .tp-testimonial-2-content-wrap .custom-fraction-wrapper { margin-top: -50px; } .tp-testimonial-wd-slider-item .custom-fraction-wrapper { position: relative; margin-top: -50px; float: none; display: flex; flex-direction: row; justify-content: center; align-items: center; } .tp-testimonial-pp-content .custom-fraction-wrapper { margin-top: -50px; } /* Media queries */ @media only 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 .custom-fraction-wrapper { float: none; margin: 0 auto; margin-top: -30px; width: 280px; } .custom-fraction-wrapper { position: relative; margin: 0 auto; margin-top: -30px; width: 280px; } } /* Dark mode */ .aleric-dark .custom-fraction-wrapper #paginations span { color: #ffffff; } .aleric-dark .custom-fraction-wrapper .shop-slider-progress-bar { background-color: #333; } .aleric-dark .custom-fraction-wrapper .shop-slider-progress-bar span { background-color: #ffffff; } /* .tp-process-it-bg-home { background: linear-gradient(180deg, #ebf0f7 0%, rgba(133, 135, 245, 0) 100%); } */ /* ——————————————————————— CENTER GLOW ONLY – NO LAYOUT CHANGE Works with your 2-column grid ——————————————————————— */ .center-glow-wrapper { position: relative; width: 100%; height: 100%; min-height: 100%; background: #ffffff; /* FULL WHITE – NO TOP/BOTTOM FADE */ overflow: hidden; } /* GLOW IN CENTER ONLY – DOES NOT AFFECT LAYOUT */ .center-glow-wrapper::before { content: ""; position: absolute; top: 50%; left: 50%; width: 70vmax; height: 70vmax; max-width: 900px; max-height: 900px; background: radial-gradient( circle, #ffffff 0%, #fdfbff 25%, #f8f5ff 45%, transparent 70% ); transform: translate(-50%, -50%); pointer-events: none; z-index: 0; animation: soft-pulse 7s ease-in-out infinite; } /* FLOATING ORBS – Stay in middle, never block content */ .glow-particle { position: absolute; width: 8vw; height: 8vw; max-width: 100px; max-height: 100px; border-radius: 50%; background: radial-gradient(at 30% 30%, rgba(114, 14, 236, 0.2), rgba(114, 14, 236, 0.06), transparent ); filter: blur(2px); opacity: 0.5; pointer-events: none; z-index: 1; animation: float-gentle linear infinite; } /* 8 particles – all in center zone */ .glow-particle:nth-child(1) { top: 45%; left: 15%; animation: float-gentle 16s infinite linear; } .glow-particle:nth-child(2) { top: 52%; left: 75%; animation: float-gentle 20s infinite linear reverse; animation-delay: 2s; } .glow-particle:nth-child(3) { top: 40%; left: 60%; animation: float-gentle 14s infinite linear; animation-delay: 1s; } .glow-particle:nth-child(4) { top: 58%; left: 25%; animation: float-gentle 18s infinite linear reverse; animation-delay: 3s; } .glow-particle:nth-child(5) { top: 48%; left: 80%; animation: float-gentle 22s infinite linear; animation-delay: 4s; } .glow-particle:nth-child(6) { top: 55%; left: 10%; animation: float-gentle 17s infinite linear reverse; animation-delay: 1.5s; } .glow-particle:nth-child(7) { top: 42%; left: 65%; animation: float-gentle 19s infinite linear; animation-delay: 2.5s; } .glow-particle:nth-child(8) { top: 50%; left: 50%; animation: float-gentle 21s infinite linear reverse; animation-delay: 0.5s; } /* ANIMATIONS – SMOOTH & LIGHT */ @keyframes soft-pulse { 0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.8; } 50% { transform: translate(-50%, -50%) scale(1.07); opacity: 1; } } @keyframes float-gentle { 0% { transform: translate(0, 0); } 25% { transform: translate(5vw, -3vw); } 50% { transform: translate(2vw, 4vw); } 75% { transform: translate(-4vw, -2vw); } 100% { transform: translate(0, 0); } } /* YOUR CONTENT – NO CARD, NO PADDING, NO SHADOW */ .glow-content-area { position: relative; z-index: 10; width: 100%; height: 100%; padding: 0 !important; margin: 0 !important; } .subhed{ color:white !important; font-size: 40px !important; } /* ----- The moving‑gradient section ----- */ .fluid-bg { position: relative; width: 100%; min-height: 60vh; /* adjust height as you wish */ overflow: hidden; background: #0a0e2b; /* dark fallback */ } .fluid-bg .wave { position: absolute; inset: 0; background: linear-gradient( 90deg, #0d1b4f, #0f2b6e, #1c5ba1, #2fa8e0, #6cd4f5, #a0e7ff, #e0c3fc, #c8b5ff ); background-size: 400% 100%; animation: flow 18s linear infinite; opacity: 0.85; } .fluid-bg .wave:nth-child(2) { animation-duration: 22s; } .fluid-bg .wave:nth-child(3) { animation-duration: 26s; } .fluid-bg .wave:nth-child(4) { animation-duration: 30s; } /* vertical offset + blur for each layer */ .fluid-bg .wave:nth-child(1) { filter: blur(8px); transform: translateY(-10%); } .fluid-bg .wave:nth-child(2) { filter: blur(12px); transform: translateY( 5%); } .fluid-bg .wave:nth-child(3) { filter: blur(16px); transform: translateY(-15%); } .fluid-bg .wave:nth-child(4) { filter: blur(20px); transform: translateY( 10%); } @keyframes flow { 0% { background-position: 0% 50%; } 100% { background-position: 400% 50%; } } /* optional content on top of the animation */ .fluid-bg .content { position: relative; z-index: 5; padding: 4rem 2rem; color: #fff; text-align: center; text-shadow: 0 1px 3px rgba(0,0,0,.6); } .event-bazar{ margin-right:-50px !important ; } /* --- 2. Media Queries for Font Size & Layout Adjustments --- */ /* A. For Extra Large Screens (e.g., 4K Monitors, > 1920px) */ @media only screen and (min-width: 1921px) { .tp-main-menu nav > ul { gap: 2rem; /* More space for wider screens */ } .tp-main-menu nav > ul > li > a { font-size: 19px; /* Slightly larger font */ } } /* B. For Standard Laptops & Smaller Desktops (1280px to 1700px) */ @media only screen and (min-width: 1280px) and (max-width: 1700px) { .tp-main-menu nav > ul { gap: 1.2rem; } .tp-main-menu nav > ul > li > a { font-size: 16px; } } /* C. CRITICAL FIX: For Small Laptops & Large Tablets (992px to 1279px) */ /* This specifically targets and fixes the layout for 1280x800 and 1024x768 */ @media only screen and (min-width: 992px) and (max-width: 1279px) { /* Reduce space between menu items drastically */ .tp-main-menu nav > ul { gap: 0.75rem; } /* Make menu font smaller to fit */ .tp-main-menu nav > ul > li > a { font-size: 14px; padding: 20px 0; } /* Shrink the logo to create more horizontal space */ .tp-header-center { width: 160px; } .tp-header-logo img { max-width: 160px; } /* Shrink the "Contact Us" button */ .tp-header-right .tp-btn-ai { padding: 12px 24px; font-size: 14px; } /* Reduce space between the right menu and the button */ .tp-header-right .tp-main-menu { margin-right: 1rem; } } /* D. For Tablets (768px to 991px) */ /* This is where we switch to the mobile menu view */ @media only screen and (min-width: 768px) and (max-width: 991px) { /* Hide the full menu and contact button */ .tp-main-menu { display: none; } .tp-header-btn { display: none; } /* Make sure the mobile menu button is visible */ .tp-menu-bar.tp-header-sidebar-btn { display: block !important; } } /* E. For Mobile Phones (max-width: 767px) */ @media (max-width: 767.98px) { /* Hide desktop navigation elements */ .tp-main-menu, .tp-header-btn { display: none; } /* Re-align items for a mobile layout (logo on left, burger on right) */ .tp-header-inner { justify-content: space-between; } .tp-header-left, .tp-header-right { flex: none; /* Reset flex sizing */ } /* Bring the logo back into the normal document flow */ .tp-header-center { position: static; transform: none; width: auto; text-align: left; } /* Adjust side padding for smaller screens */ .tp-header-area .container-1824 { padding-left: 15px; padding-right: 15px; } /* Control the logo size on mobile */ .tp-header-logo img { max-width: 120px; } /* Ensure mobile menu button is visible */ .tp-menu-bar.tp-header-sidebar-btn { display: block !important; } } /* rajmIsal */ /* home page owner section */ /* ——— BASE STYLES (unchanged) ——— */ .utsoraa-hero-section .tp-portfolio-revealing-slide-heading{font-size:75px!important;line-height:1.2!important;margin-bottom:5px!important;} .utsoraa-hero-section .al-about-pg-content p{font-size:24px!important;line-height:1.6;margin-bottom:65px!important;;font-family:var(--tp-ff-poppins);color:var(---tp-common-black-7);} .utsoraa-hero-section .tp-team-details-title-wrap{margin-left:35px!important;margin-bottom:40px!important;} .utsoraa-hero-section .tp-team-details-thumb img{margin-top:-70px!important;width:100%;border-radius:20px;} .utsoraa-hero-section .tp-btn-ai{padding:14px 32px!important;width:165px!important;font-size:16px!important;line-height:1!important;} .utsoraa-hero-section .row{--bs-gutter-x:30px;margin-left:calc(-.5*var(--bs-gutter-x));margin-right:calc(-.5*var(--bs-gutter-x));} .utsoraa-hero-section [class*="col-"]{padding-left:calc(.5*var(--bs-gutter-x));padding-right:calc(.5*var(--bs-gutter-x));} /* Default - show full content on desktop and hide read more */ .mobile-read-more { display: none !important; } #hidden-text-mobile { display: inline !important; } @media only screen and (max-width: 430px) { /* Mobile styles */ .utsoraa-hero-section .tp-portfolio-revealing-slide-heading { font-size: 40px !important; text-align: center !important; margin-left: -50px !important; margin-top: -50px !important; } .utsoraa-hero-section .tp-team-details-title-wrap { margin-left: 0 !important; } .utsoraa-hero-section .tp-team-details-thumb { margin-left: -20px !important; margin-bottom: -50px !important; } .utsoraa-hero-section .al-about-pg-content p { font-size: 18px !important; margin-bottom: 6px !important; text-align: justify !important; margin-left: -30px !important; padding-bottom: 30px !important; } /* Hide part of text and show read more on mobile only */ #hidden-text-mobile { display: none !important; } /* Read more link visible only on mobile */ .mobile-read-more { display: inline !important; font-size: 14px !important; color: #007bff !important; text-decoration: underline !important; cursor: pointer !important; background: none !important; border: none !important; padding: 0 !important; margin-left: 4px !important; } .utsoraa-hero-section .row { --bs-gutter-x: 0 !important; margin-left: 0 !important; margin-right: 0 !important; } .utsoraa-hero-section [class*="col-"] { padding-left: 0 !important; padding-right: 0 !important; } } /* ============================================================== 3. RESPONSIVE SCALING – ALL DESKTOP RESOLUTIONS Uses: calc(original_value * (100vw / 1920)) ============================================================== */ @media only screen and (max-width: 1919px) { .utsoraa-hero-section .tp-portfolio-revealing-slide-heading { font-size: calc(75px * (100vw / 1920)) !important; line-height: 1.2 !important; } .utsoraa-hero-section .al-about-pg-content p { font-size: calc(22px * (100vw / 1920)) !important; line-height: calc(28px * (100vw / 1920)) !important; margin-bottom: calc(65px * (100vw / 1920)) !important; } .utsoraa-hero-section .tp-team-details-title-wrap { margin-left: calc(35px * (100vw / 1920)) !important; } .utsoraa-hero-section .tp-team-details-thumb img { margin-top: calc(-70px * (100vw / 1920)) !important; } .utsoraa-hero-section .tp-btn-ai { padding: calc(14px * (100vw / 1920)) calc(32px * (100vw / 1920)) !important; width: calc(165px * (100vw / 1920)) !important; } } /* ============================================================== 4. SPECIAL CASES (≥1920px – allow growth, no cap) ============================================================== */ @media only screen and (min-width: 1920px) { .utsoraa-hero-section .tp-portfolio-revealing-slide-heading { font-size: calc(75px * (100vw / 1920)) !important; } .utsoraa-hero-section .al-about-pg-content p { font-size: calc(22px * (100vw / 1920)) !important; line-height: calc(28px * (100vw / 1920)) !important; margin-bottom: calc(65px * (100vw / 1920)) !important; } .utsoraa-hero-section .tp-team-details-title-wrap { margin-left: calc(35px * (100vw / 1920)) !important; } .utsoraa-hero-section .tp-team-details-thumb img { margin-top: calc(-70px * (100vw / 1920)) !important; } .utsoraa-hero-section .tp-btn-ai { padding: calc(14px * (100vw / 1920)) calc(32px * (100vw / 1920)) !important; width: calc(165px * (100vw / 1920)) !important; } } /* ============================================================== 5. SMALL DESKTOP FALLBACK (≤1200px) – Prevent overflow ============================================================== */ @media only screen and (max-width: 1200px) { .utsoraa-hero-section .tp-portfolio-revealing-slide-heading { font-size: 42px !important; line-height: 1.2 !important; } .utsoraa-hero-section .al-about-pg-content p { font-size: 16px !important; line-height: 22px !important; margin-bottom: 40px !important; } .utsoraa-hero-section .tp-team-details-title-wrap { margin-left: 20px !important; } .utsoraa-hero-section .tp-team-details-thumb img { margin-top: -45px !important; } .utsoraa-hero-section .tp-btn-ai { padding: 10px 24px !important; width: 130px !important; } } /* ============================================================== FIX: 1536×864, 1440×900, 1366×768 → 1.5rem margin on both sides Image & text stay inside container ============================================================== */ /* ============================================================== FIX: 1536×864, 1440×900, 1366×768 → 1.5rem margin + SMALLER IMAGE + LEFT SHIFT Image: 90% scale + shifted left by ~15px (proportional) ============================================================== */ /* ============================================================== NUCLEAR FIX: 1366, 1440, 1536 — IMAGE SMALLER + LEFT SHIFT → 100% GUARANTEED TO WORK → RED BORDER = PROOF IT'S APPLIED ============================================================== */ @media only screen and (max-width: 1536px) { /* Force EXACT SAME 2rem padding on LEFT and RIGHT */ .utsoraa-hero-section .container-fluid.container-1524 { padding-left: 2rem !important; padding-right: 2rem !important; max-width: 100% !important; box-sizing: border-box !important; } /* Optional: Keep image smaller & slightly left */ .utsoraa-hero-section .tp-team-details-thumb { width: 88% !important; margin-left: -18px !important; float: right !important; } .utsoraa-hero-section .tp-team-details-thumb img { margin-top: -55px !important; width: 100% !important; height: auto !important; display: block !important; } /* Keep text scaling */ .utsoraa-hero-section .tp-portfolio-revealing-slide-heading { font-size: calc(75px * (100vw / 1920)) !important; } .utsoraa-hero-section .al-about-pg-content p { font-size: calc(22px * (100vw / 1920)) !important; line-height: calc(28px * (100vw / 1920)) !important; margin-bottom: calc(65px * (100vw / 1920)) !important; } .utsoraa-hero-section .tp-team-details-title-wrap { margin-left: calc(35px * (100vw / 1920)) !important; } .utsoraa-hero-section .tp-btn-ai { padding: calc(14px * (100vw / 1920)) calc(32px * (100vw / 1920)) !important; width: calc(165px * (100vw / 1920)) !important; } } /* RIGHT COLUMN KO THODA LEFT ME SHIFT KARO */ @media only screen and (max-width: 1536px) { .utsoraa-hero-section .col-lg-6:last-child { margin-left: -20px !important; } } /* ============================================================== 6. YOUR ORIGINAL COMMON STYLES (Keep – but scoped) ============================================================== */ .utsoraa-hero-section .tp-btn-ai::before, .utsoraa-hero-section .tp-btn-ai::after { border-radius: 100px; } .utsoraa-hero-section .tp-btn-ai { position: relative; z-index: 1; transition: all 0.4s ease; background: linear-gradient(90deg, #A70C7E 0%, #A70C7E 50%, #021352 100%); color: white; text-transform: uppercase; font-weight: 700; font-family: var(--tp-ff-dm, sans-serif); } /* ============================================= */ /* WHY UTSORAA – FULLY CONTROLLED & RESPONSIVE */ /* Base: 1920×1080 → Heading 75px */ /* 7 Media Queries for exact resolutions */ /* ============================================= */ .utsoraa-why-utsoraa { overflow: hidden; } .utsoraa-why-utsoraa .tp-portfolio-area { padding: 115px 0 80px; position: relative; } /* CONTAINER */ .utsoraa-why-utsoraa .container-fluid { padding-left: 50px !important; padding-right: 50px !important; max-width: 1524px; margin: 0 auto; } /* LEFT COLUMN */ .utsoraa-why-utsoraa .tp-portfolio-cst-content { position: relative; display: flex; flex-direction: column; height: 100%; padding-right: 30px; } .utsoraa-why-utsoraa .heading-icon-wrapper { position: relative; display: block; margin-bottom: 30px; width: fit-content; } /* HEADING */ .utsoraa-why-utsoraa .tp-portfolio-revealing-slide-heading { font-size: 75px; line-height: 1.1; font-weight: 700; font-family: var(--tp-ff-dm); padding-left: px; /* Space for BIG icon */ position: relative; z-index: 2; display: inline-block; margin: 0; } .utsoraa-why-utsoraa .title-slide-gradient { background: linear-gradient(90deg,#A70C7E, #021352); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* ICON – BIGGER, SHARPER, HIGHER BEHIND "The" */ .utsoraa-why-utsoraa .tp-service-details-icon { position: absolute; top: -115px !important; /* HIGHER */ left: -90px; width: 250px; /* BIGGER */ height: 250px; /* BIGGER */ z-index: 1; pointer-events: none; box-shadow: none; } .utsoraa-why-utsoraa .tp-live-anim-spin { animation: tp_animation_spin 6s linear infinite; } /* PARAGRAPH – TIGHT SPACING */ .utsoraa-why-utsoraa .al-about-pg-content p { font-size: 24px; line-height: 1.6; color: var(--tp-common-black-7); font-family: var(--tp-ff-poppins); margin: 0; padding-top: 0; } .utsoraa-why-utsoraa .al-about-pg-content p br { display: block; } /* IMAGE WRAPPER */ .utsoraa-why-utsoraa .tp-portfolio-cst-img-wrapper { position: relative; width: 100%; height: 520px; overflow: hidden; border-radius: 20px; margin-top: 50px; } .utsoraa-why-utsoraa .tp-portfolio-cst-img-wrapper .hover-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; visibility: hidden; transition: opacity 0.6s ease; } .utsoraa-why-utsoraa .tp-portfolio-cst-img-wrapper .hover-image.active { opacity: 1; visibility: visible; } .utsoraa-why-utsoraa .tp-portfolio-cst-img-wrapper .thumb { width: 100%; height: 100%; object-fit: cover; border-radius: 20px; } /* RIGHT COLUMN */ .utsoraa-why-utsoraa .tp-portfolio-cst-list-wrap { padding-top: 0px; margin-left: 50px; } .utsoraa-why-utsoraa .tp-portfolio-cst-item { display: flex; justify-content: space-between; align-items: center; padding: 22px 0; border-bottom: 1px solid #e5e5e5; cursor: pointer; } .utsoraa-why-utsoraa .tp-portfolio-cst-item:last-child { border-bottom: none; } .utsoraa-why-utsoraa .tp-portfolio-cst-title { font-size: 32px; font-weight: 600; margin: 0 0 10px; color: #021352; font-family: var(--tp-ff-dm); } .utsoraa-why-utsoraa .tp-portfolio-cst-item p { font-size: 24px; line-height: 1.4; color: var(--tp-grey-1); margin: 0; } .utsoraa-why-utsoraa .tp-portfolio-cst-btn { width: 56px; height: 56px; border: 1px solid #021352; border-radius: 50px; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; } .utsoraa-why-utsoraa .tp-portfolio-cst-btn svg { width: 18px; height: 18px; } .utsoraa-why-utsoraa .tp-portfolio-cst-btn svg path { fill: #021352; transition: fill 0.3s ease; } .utsoraa-why-utsoraa .tp-portfolio-cst-item:hover .tp-portfolio-cst-btn, .utsoraa-why-utsoraa .tp-portfolio-cst-item.active .tp-portfolio-cst-btn { background: #021352; transform: rotate(-45deg); } .utsoraa-why-utsoraa .tp-portfolio-cst-item:hover .tp-portfolio-cst-btn svg path, .utsoraa-why-utsoraa .tp-portfolio-cst-item.active .tp-portfolio-cst-btn svg path { fill: #fff; } /* CONTACT BUTTON */ .utsoraa-why-utsoraa .tp-header-btn { padding-top: 20px; } .utsoraa-why-utsoraa .tp-btn-ai { padding: 16px 36px; background: #021352; color: #fff; font-size: 18px; font-weight: 700; width:200px; text-transform: uppercase; font-family: var(--tp-ff-dm); border-radius: 50px; } /* SHAPE */ .utsoraa-why-utsoraa .tp-service-hero-shape-2 { right: 0; bottom: 0; width: 21%; z-index: -1; } .utsoraa-why-utsoraa .tp-service-hero-shape-2 svg { width: 100%; height: auto; } @keyframes tp_animation_spin { to { transform: rotate(360deg); } } /* ============================================= */ /* MEDIA QUERIES – 7 EXACT RESOLUTIONS */ /* Proportional scaling, no overflow */ /* ============================================= */ /* 1. 1366 × 768 */ @media (max-width: 1366px) { .utsoraa-why-utsoraa .container-fluid { padding-left: 35px !important; padding-right: 35px !important; } .utsoraa-why-utsoraa .tp-portfolio-revealing-slide-heading { font-size: 56px; } .utsoraa-why-utsoraa .tp-service-details-icon { top: -85px !important; left: -65px; width: 190px; height: 190px; } .utsoraa-why-utsoraa .al-about-pg-content p { font-size: 19px; line-height: 28px; } .utsoraa-why-utsoraa .tp-portfolio-cst-img-wrapper { height: 420px; margin-top: 40px; } .utsoraa-why-utsoraa .tp-portfolio-cst-list-wrap { padding-top: 60px; margin-left: 35px; } .utsoraa-why-utsoraa .tp-portfolio-cst-title { font-size: 28px; } .utsoraa-why-utsoraa .tp-portfolio-cst-item p { font-size: 21px; } .utsoraa-why-utsoraa .tp-portfolio-cst-btn { width: 50px; height: 50px; } .utsoraa-why-utsoraa .tp-btn-ai { padding: 14px 32px; font-size: 16px; width: 180px; } } /* 2. 1600 × 900 */ @media (min-width: 1367px) and (max-width: 1600px) { .utsoraa-why-utsoraa .container-fluid { padding-left: 45px !important; padding-right: 45px !important; } .utsoraa-why-utsoraa .tp-portfolio-revealing-slide-heading { font-size: 68px; } .utsoraa-why-utsoraa .tp-service-details-icon { top: -100px !important; left: -75px; width: 220px; height: 220px; } .utsoraa-why-utsoraa .tp-portfolio-cst-img-wrapper { height: 490px; } .utsoraa-why-utsoraa .tp-portfolio-cst-title { font-size: 30px; } .utsoraa-why-utsoraa .tp-portfolio-cst-item p { font-size: 23px; } } /* 3. 1536 × 864 */ @media (min-width: 1537px) and (max-width: 1599px) { .utsoraa-why-utsoraa .tp-portfolio-revealing-slide-heading { font-size: 65px; } .utsoraa-why-utsoraa .tp-service-details-icon { top: -95px !important; left: -70px; width: 210px; height: 210px; } .utsoraa-why-utsoraa .tp-portfolio-cst-img-wrapper { height: 480px; } } /* 4. 1440 × 900 */ @media (min-width: 1441px) and (max-width: 1535px) { .utsoraa-why-utsoraa .container-fluid { padding-left: 40px !important; padding-right: 40px !important; } .utsoraa-why-utsoraa .tp-portfolio-revealing-slide-heading { font-size: 75px; } .utsoraa-why-utsoraa .tp-service-details-icon { top: -90px !important; left: px; width: 10px !important; height: 20px !important; } .utsoraa-why-utsoraa .tp-portfolio-cst-img-wrapper { height: 460px; margin-top: 45px; } .utsoraa-why-utsoraa .tp-portfolio-cst-list-wrap { padding-top: 70px; margin-left: 40px; } .utsoraa-why-utsoraa .tp-portfolio-cst-title { font-size: 27px; } .utsoraa-why-utsoraa .tp-portfolio-cst-item p { font-size: 22px; } } /* 5. 1280 × 1024 & 1280 × 800 */ @media (max-width: 1280px) { .utsoraa-why-utsoraa .container-fluid { padding-left: 50px !important; padding-right: 50px !important; } .utsoraa-why-utsoraa .tp-portfolio-revealing-slide-heading { font-size: 52px; } .utsoraa-why-utsoraa .tp-service-details-icon { top: -75px !important; left: -55px; width: 170px; height: 170px; } .utsoraa-why-utsoraa .al-about-pg-content p { font-size: 18px; line-height: 26px; } .utsoraa-why-utsoraa .tp-portfolio-cst-img-wrapper { height: 345px; margin-top: 30px; } .utsoraa-why-utsoraa .tp-portfolio-cst-list-wrap { padding-top: 50px; margin-left: 25px; } .utsoraa-why-utsoraa .tp-portfolio-cst-title { font-size: 26px; } .utsoraa-why-utsoraa .tp-portfolio-cst-item p { font-size: 20px; } .utsoraa-why-utsoraa .tp-portfolio-cst-btn { width: 48px; height: 48px; } .utsoraa-why-utsoraa .tp-btn-ai { padding: 13px 28px; font-size: 15px; width: 170px;bottom:80px; } } /* 6. 1680 × 1050 */ @media (min-width: 1601px) and (max-width: 1680px) { .utsoraa-why-utsoraa .tp-portfolio-revealing-slide-heading { font-size: 72px; } .utsoraa-why-utsoraa .tp-service-details-icon { top: -105px !important; left: -80px; width: 230px; height: 230px; } .utsoraa-why-utsoraa .tp-portfolio-cst-img-wrapper { height: 510px; } .utsoraa-why-utsoraa .tp-portfolio-cst-title { font-size: 31px; } } /* 7. 1024 × 768 (EXTRA SMALL – STACKED) */ @media (max-width: 1024px) { .utsoraa-why-utsoraa .row { flex-direction: column; } .utsoraa-why-utsoraa .col-lg-5, .utsoraa-why-utsoraa .col-lg-7 { width: 100%; } .utsoraa-why-utsoraa .tp-portfolio-cst-content { padding-right: 0; margin-bottom: 50px; } .utsoraa-why-utsoraa .tp-portfolio-cst-list-wrap { margin-left: 0; padding-top: 30px; } .utsoraa-why-utsoraa .tp-service-details-icon { top: -60px !important; left: -40px; width: 140px; height: 140px; } .utsoraa-why-utsoraa .tp-portfolio-revealing-slide-heading { font-size: 48px; } .utsoraa-why-utsoraa .tp-portfolio-cst-img-wrapper { height: 320px; } } /* faq and contct form */ /* ================================================= FAQ + CONTACT — COMPLETE CSS (Paste this) ================================================= */ /* Container / section */ .al-faq-area { padding: 105px 0 140px !important; background-position: center !important; background-repeat: no-repeat !important; background-size: cover !important; } .al-faq-area .container { max-width: 1600px !important; margin: 0 auto !important; padding: 0 15px !important; box-sizing: border-box !important; } /* Wrapper: use flex with safe widths */ /* CHANGE HERE: gap ke liye yeh value adjust karo (kam karne se columns aur pass aayenge) */ .faq-form-wrapper { display: flex !important; flex-wrap: nowrap !important; /* keep side-by-side on desktop */ justify-content: space-between !important; align-items: flex-start !important; gap: 10px !important; /* <<-- CHANGED: was 30px; reduce to 20px to bring columns closer */ box-sizing: border-box !important; } /* LEFT: FAQ column */ .faq-container-1000 { flex: 0 0 50% !important; max-width: 50% !important; margin: 0 !important; box-sizing: border-box !important; margin-left: -50px !important; } /* Title */ .al-faq-title-box { margin-bottom: 80px !important; } /* KEEP YOUR LARGE FONT-SIZE */ .al-section-title { font-size: var(--faq-title-size,75px) !important; /* large as you set */ line-height: 1.1 !important; font-weight: 700 !important; font-family: var(--tp-ff-inter, sans-serif) !important; margin: 0 !important; } /* Base icon: size, alignment, color */ .accordion-icon { width: 28px !important; /* icon size (CHANGE THIS) */ height: 28px !important; /* icon size */ display: inline-block !important; position: relative !important; flex-shrink: 0 !important; margin-left: 12px !important; /* space from question text (CHANGE) */ margin-top: -50px!important; /* align vertically center by removing big negative margins */ box-sizing: border-box !important; vertical-align: middle !important; } /* Horizontal line */ .accordion-icon::before, .accordion-icon::after { content: '' !important; position: absolute !important; background: #021352 !important; /* icon color (CHANGE) */ transition: transform 0.25s ease, opacity 0.25s ease !important; border-radius: 2px !important; } /* minus/plus horizontal bar */ .accordion-icon::before { width: 100% !important; height: 3px !important; /* thickness of the bar (CHANGE) */ top: 50% !important; left: 0 !important; transform: translateY(-50%) !important; } /* vertical bar for plus */ .accordion-icon::after { width: 3px !important; /* thickness of vertical bar */ height: 100% !important; left: 50% !important; top: 0 !important; transform: translateX(-50%) !important; } /* When accordion is expanded: rotate/transform to show minus (hide vertical bar) */ .accordion-buttons[aria-expanded="true"] .accordion-icon::after { transform: translateX(-50%) scaleY(0) !important; /* hide vertical bar */ opacity: 0 !important; } /* Slight hover/active effect to make it feel interactive */ .accordion-buttons:hover .accordion-icon::before, .accordion-buttons:focus .accordion-icon::before { transform: translateY(-50%) scaleX(1.05) !important; } /* Ensure icon doesn't push content; align to right side of button */ .accordion-buttons { display: flex !important; align-items: center !important; justify-content: space-between !important; /* keeps question text left and icon at far right */ gap: 12px !important; } /* Make touch target larger on mobile (increase clickable area) */ .accordion-buttons .accordion-icon { padding: 6px !important; /* clickable area */ margin-right: 0 !important; } /* Accordion button styling */ .accordion-buttons { display: flex !important; justify-content: space-between !important; align-items: center !important; width: 100% !important; padding: 25px 0 !important; font-size: 30px !important; font-family: var(--tp-ff-inter, sans-serif) !important; color: #000 !important; background: none !important; border: none !important; text-align: left !important; cursor: pointer !important; } .question-text { flex: 1 !important; margin-right: 15px !important; } /* Accordion body */ .accordion-body { padding: 0 0 35px 0 !important; } .accordion-body p { font-size: 23px !important; line-height: 1.57 !important; color: #4d5051 !important; font-weight: 500 !important; margin: 0 !important; font-family: var(--tp-ff-inter, sans-serif) !important; } /* RIGHT: FORM column */ /* CHANGE HERE: top shift for contact form - adjust `margin-top` to move form up/down */ .form-container { flex: 0 0 50% !important; max-width: 50% !important; margin: 0 !important; box-sizing: border-box !important; padding-left: 15px !important; /* CONTACT FORM SHIFT: reduce positive to move up (negative moves further up) */ margin-top: -40px !important; /* <<-- CHANGED: moved form UP by 40px. Tweak this value as needed. */ margin-left: -100px !important; } .al-faq-form-box { max-height: 1050px !important; width: 100% !important; box-sizing: border-box !important; } /* If the form overlap happens with FAQ header, lower this number (closer to 0) */ /* e.g. margin-top: -20px; or margin-top: 0; */ /* Keep your large form title size */ .al-faq-form-content { margin-top: 0 !important; text-align: center !important; } .al-faq-form-title { font-size: var(--title-font, 75px) !important; /* kept large */ margin-bottom: 10px !important; font-family: var(--tp-ff-inter, sans-serif) !important; } .al-faq-form-content p { font-size: 30px !important; margin: 0 0 30px 0 !important; color: #4d5051 !important; } /* Form inputs */ .al-faq-input-box { display: flex !important; flex-direction: column !important; gap: 0 !important; } .al-faq-input input, .al-faq-input textarea, .al-faq-captcha input { width: 100% !important; height: 55px !important; padding: 10px 15px !important; border: 1px solid #7958af !important; border-radius: 10px !important; background-color: #c7b0e1 !important; font-family: var(--tp-ff-inter, sans-serif) !important; font-size: 18px !important; margin-bottom: 20px !important; box-sizing: border-box !important; color: #000 !important; } .al-faq-input textarea { height: 100px !important; resize: vertical !important; } /* Placeholders */ .al-faq-input input::placeholder, .al-faq-input textarea::placeholder, .al-faq-captcha input::placeholder { color: #000 !important; opacity: 0.6 !important; font-size: 18px !important; } /* Captcha text */ .al-faq-captcha span { display: block !important; margin-bottom: 5px !important; font-size: 16px !important; color: #4d5051 !important; } .al-faq-btn .tp-header-btn { display: block !important; /* was inline-block; make it block */ width: 100% !important; /* allow full width */ padding: 0 !important; /* remove extra wrapper padding if any */ box-sizing: border-box !important; } .tp-btn-wide-here { display: flex !important; justify-content: center !important; align-items: center !important; width: 100% !important; height: 50px !important; box-sizing: border-box !important; padding: 10px 45px !important; border: none !important; border-radius: 25px !important; font-weight: 600 !important; font-size: 16px !important; color: #fff !important; font-family: var(--tp-ff-dm, sans-serif) !important; text-transform: uppercase !important; cursor: pointer !important; /* Gradient background (use background-image so we don't accidentally reset background-position) */ background-image: linear-gradient(90deg, #021352 0%, #A70C7E 50%, #021352 100%) !important; background-size: 300% 300% !important; background-repeat: no-repeat !important; background-position: 0% 50% !important; /* Force the animation (linear for constant speed). Add !important to avoid overrides. */ animation: tpGradientMove 10s linear infinite !important; -webkit-animation: tpGradientMove 10s linear infinite !important; } /* Keyframes — include only once in your stylesheet (put near other keyframes) */ @keyframes tpGradientMove { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } @-webkit-keyframes tpGradientMove { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } /* Optional: ensure reduced motion doesn't block it while testing */ /* Remove this in production if you want to respect user prefers-reduced-motion */ @media (prefers-reduced-motion: reduce) { .tp-btn-wide-here { animation: none !important; -webkit-animation: none !important; } } /* 1440 × 900 — FULLY CONTROLLABLE VERSION */ /* 1440 × 900 — FINAL PERFECT VERSION (Copy-Paste Kar Do) */ @media (min-width: 1400px) and (max-width: 1540px) { /* Pura section safe width mein */ .al-faq-area .container { max-width: 1240px !important; padding: 0 15px !important; } /* Wrapper ko flex-start + thoda right se start karo */ .faq-form-wrapper { justify-content: flex-start !important; gap: 80px !important; /* ← beech ka perfect gap */ padding-left: 60px !important; /* ← pura content thoda right se shuru */ } /* FAQ column ko right shift karo (left se door) */ .faq-container-1000 { flex: 0 0 48% !important; max-width: 48% !important; margin-left:-10px !important; /* ← FAQ right shift (jitna chahiye badhao) */ } /* CONTACT FORM ko chhota + left shift karo */ .form-container { position: relative !important; left: -100px !important; /* ← jitna left chahiye utna badhao (-100, -150, -200, -250) */ z-index: 10 !important; } /* Bootstrap ki col-lg-6 ko hara do (ye zaroori hai) */ .form-container[class*="col-"] { position: relative !important; left: -100px !important; width: 48% !important; flex: none !important; } /* Titles perfect size */ .al-section-title, .al-faq-form-title { font-size: 66px !important; line-height: 1.05 !important; } .al-faq-form-content p { font-size: 24px !important; } /* Accordion text */ .accordion-buttons { font-size: 25px !important; padding: 20px 0 !important; } .accordion-body p { font-size: 18px !important; } /* Form inputs clean */ .al-faq-input input, .al-faq-input textarea { height: 50px !important; font-size: 16px !important; } .tp-btn-wide-here { height: 54px !important; font-size: 16.5px !important; } } /* ================================ 1024 × 768 (smallest desktop) ================================ */ @media (min-width: 1020px) and (max-width: 1050px) { .al-faq-area .container { max-width: 960px !important; } .faq-form-wrapper { gap: 30px !important; padding-left: 20px !important; } .faq-container-1000 { margin-left: -30px !important; } .form-container { left: -50px !important; width: 44% !important; } .form-container[class*="col-"] { left: -50px !important; width: 44% !important; } .al-section-title, .al-faq-form-title { font-size: 48px !important; } .accordion-buttons { font-size: 19px !important; } } /* ================================ 1280 × 800 / 1280 × 1024 ================================ */ @media (min-width: 1250px) and (max-width: 1350px) { .al-faq-area .container { max-width: 1100px !important; } .faq-form-wrapper { gap: 50px !important; padding-left: 40px !important; } .faq-container-1000 { margin-left: -20px !important; } .form-container { left: -80px !important; width: 44% !important; } .form-container[class*="col-"] { left: -80px !important; width: 44% !important; } .al-section-title, .al-faq-form-title { font-size: 58px !important; } .accordion-buttons { font-size: 22px !important; } } /* ================================ 1366 × 768 ================================ */ @media (min-width: 1351px) and (max-width: 1400px) { .al-faq-area .container { max-width: 1180px !important; } .faq-form-wrapper { gap: 60px !important; padding-left: 50px !important; } .faq-container-1000 { margin-left: -15px !important; } .form-container { left: -90px !important; width: 44% !important; } .form-container[class*="col-"] { left: -90px !important; width: 44% !important; } .al-section-title, .al-faq-form-title { font-size: 62px !important; } .accordion-buttons { font-size: 24px !important; } } /* ================================ 1440 × 900 ← TUMHARA FAVORITE (already perfect) ================================ */ @media (min-width: 1401px) and (max-width: 1540px) { .al-faq-area .container { max-width: 1240px !important; } .faq-form-wrapper { gap: 80px !important; padding-left: 60px !important; } .faq-container-1000 { margin-left: -10px !important; } .form-container { left: -100px !important; width: 48% !important; } .form-container[class*="col-"] { left: -100px !important; width: 48% !important; } .al-section-title, .al-faq-form-title { font-size: 66px !important; } .accordion-buttons { font-size: 25px !important; } } /* ================================ 1536 × 864 ================================ */ @media (min-width: 1541px) and (max-width: 1580px) { .al-faq-area .container { max-width: 1300px !important; } .faq-form-wrapper { gap: 90px !important; padding-left: 70px !important; } .faq-container-1000 { margin-left: 10px !important; } .form-container { left: -110px !important; width: 48% !important; } .form-container[class*="col-"] { left: -110px !important; width: 48% !important; } .al-section-title, .al-faq-form-title { font-size: 70px !important; } .accordion-buttons { font-size: 26px !important; } } /* ================================ 1600 × 900 ================================ */ @media (min-width: 1581px) and (max-width: 1650px) { .al-faq-area .container { max-width: 1360px !important; } .faq-form-wrapper { gap: 100px !important; padding-left: 80px !important; } .faq-container-1000 { margin-left: 20px !important; } .form-container { left: -120px !important; width: 48% !important; } .form-container[class*="col-"] { left: -120px !important; width: 48% !important; } .al-section-title, .al-faq-form-title { font-size: 74px !important; } .accordion-buttons { font-size: 28px !important; } } /* ================================ 1680 × 1050 ================================ */ @media (min-width: 1651px) and (max-width: 1750px) { .al-faq-area .container { max-width: 1420px !important; } .faq-form-wrapper { gap: 110px !important; padding-left: 90px !important; } .faq-container-1000 { margin-left: 30px !important; } .form-container { left: -130px !important; width: 48% !important; } .form-container[class*="col-"] { left: -130px !important; width: 48% !important; } .al-section-title, .al-faq-form-title { font-size: 78px !important; } .accordion-buttons { font-size: 29px !important; } } /* ================================================= MOBILE + TABLET RESPONSIVE (with iPhone 14 Pro Max fix) ================================================= */ /* Tablet and smaller: stack columns, reduce font-sizes & spacing */ @media (max-width: 991.98px) { .faq-form-wrapper { flex-direction: column-reverse !important; /* 👈 Contact Form upar, FAQ niche */ flex-wrap: wrap !important; gap: 20px !important; } .faq-container-1000, .form-container { flex: 0 0 100% !important; max-width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; margin: 0 !important; } .form-container { margin-top: 0 !important; } .al-faq-title-box { margin-bottom: 30px !important; } .al-faq-form-content { margin-top: 0 !important; } .tp-btn-wide-here { width: 100% !important; } } /* Small phones: tone down big typography */ @media (max-width: 575.98px) { .accordion-buttons { font-size: 18px !important; padding: 16px 0 !important; } .accordion-body p { font-size: 15px !important; } .al-faq-form-content p { font-size: 16px !important; } .al-section-title { font-size: 24px !important; } .al-faq-input input, .al-faq-input textarea, .al-faq-captcha input { height: 50px !important; font-size: 16px !important; } } /* iPhone 14 Pro Max — extra fine adjustments */ @media only screen and (min-device-width: 430px) and (max-device-width: 430px) and (-webkit-device-pixel-ratio: 3) { .faq-form-wrapper { flex-direction: column-reverse !important; /* contact upar */ gap: 25px !important; padding: 0 10px !important; } .al-faq-area { padding: 60px 0 90px !important; } .al-faq-title-box { margin-bottom: 25px !important; } .al-faq-form-content { margin-top: 0 !important; } .tp-btn-wide-here { width: 100% !important; height: 65px !important; /* 👈 taller button for better tap area */ font-size: 17px !important; } .al-faq-input input, .al-faq-input textarea { font-size: 16px !important; } } /* Safety: ensure no horizontal overflow */ html, body { overflow-x: hidden !important; } /* Optional: small visual polish for accordion items */ .accordion-items + .accordion-items { border-top: 1px solid rgba(0,0,0,0.05) !important; padding-top: 16px !important; } /* =============================================== */ /* iPhone 14 / 14 Pro / 14 Pro Max (430x932) FIXES */ /* =============================================== */ @media only screen and (min-device-width: 430px) and (max-device-width: 432px) and (min-device-height: 930px) and (max-device-height: 934px) and (-webkit-device-pixel-ratio: 3) { /* 🔁 Correct order: Contact Form first, FAQ below */ .form-container { order: 1 !important; /* Contact Form pehle */ } .faq-container-1000 { order: 2 !important; /* FAQ baad me */ } /* 📏 Adjust spacing and layout */ .faq-form-wrapper { display: flex !important; flex-direction: column !important; /* normal stacking */ gap: 35px !important; align-items: center !important; } .accordion-icon { width: 24px !important; /* slightly smaller icon on phone */ height: 24px !important; margin-left: 8px !important; margin-top: -70px !important; } .accordion-icon::before { height: 2.5px !important; } .accordion-icon::after { width: 2.5px !important; } .accordion-buttons { gap: 10px !important; } /* Reduce gap between title and first FAQ if needed */ .al-faq-title-box { margin-bottom: 60px !important; } .accordion-buttons { padding: 12px 0 !important; } /* 🧱 Contact form full width + better height */ .form-container { width: 100% !important; max-width: 100% !important; } .al-faq-form-box { width: 100% !important; max-width: 420px !important; margin: 0 auto !important; } /* 📝 Inputs slightly taller */ .al-faq-input input, .al-faq-input textarea { height: 58px !important; font-size: 17px !important; } /* ✉️ Contact button centered + full width */ .tp-btn-wide-here { width: 100% !important; max-width: 320px !important; height: 50px !important; font-size: 17px !important; display: flex !important; align-items: center !important; justify-content: center !important; margin: 0 auto !important; } /* 🔤 Heading & text slightly smaller for fit */ .al-faq-form-title { font-size: 40px !important; } .al-section-title { font-size: 40px !important; text-align: center !important; } .al-faq-form-content p, .accordion-body p { font-size: 16px !important; } } /* blog */ .tp-btn-ai-blog { padding: 14px 32px; border-radius: 100px; width: 220px; z-index: 1; transition: all 0.4s ease; left: 310px; } .tp-btn-ai-blog::after { content: ""; position: absolute; top: -2px; bottom: -2px; left: -2px; right: -2px; z-index: -2; border-radius: 101px; background-image: -webkit-linear-gradient(90deg #A70C7E 0%, #A70C7E 50%, #021352 100%); background-image: -moz-linear-gradient(90deg, #A70C7E 0%, #A70C7E 50%, #021352 100%); background-image: -ms-linear-gradient(90deg, #A70C7E 0%, #A70C7E 50%, #021352 100%); background-image: -o-linear-gradient(90deg, #A70C7E 0%, #A70C7E 50%, #021352 100%); background-image: linear-gradient(90deg, #A70C7E 0%, #A70C7E 50%, #021352 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-blog::before { position: absolute; content: ""; top: 0; left: 0; width: 100%; height: 100%; background: #fff ; z-index: -1; border-radius: 100px; transition: all 0.4s ease; } .tp-btn-ai-blog:hover { background-color: transparent; } .tp-btn-ai-blog:hover::before { background: transparent; } /* contact fomr */ /* ============================================= */ /* GLOBAL & LAYOUT */ /* ============================================= */ .al-faq-area { padding: 105px 0 140px !important; } .al-faq-area .container { max-width: 1600px !important; margin: 0 auto !important; padding: 0 15px !important; } .faq-form-wrapper { display: flex !important; justify-content: space-between !important; align-items: flex-start !important; gap: 90px !important; /* CHANGE: Gap between left & right */ } /* ============================================= */ /* LEFT SIDE: CONTACT INFO (WIDTH CONTROL) */ /* ============================================= */ /* CHANGE HERE: LEFT WIDTH & POSITION */ /* flex: 0 0 X% → X = width percentage */ /* max-width → max allowed width */ /* margin-left → shift left/right */ .utsoraa-contact-container { flex: 0 0 80% !important; /* LEFT WIDTH: 46% */ max-width: 680px !important; /* MAX WIDTH */ margin-left: -40px !important; /* SHIFT LEFT (negative = left, positive = right) */ padding-right: 30px !important; /* INNER GAP */ } /* Title Styling */ .al-faq-title-box { margin-bottom: 80px !important; } /* .al-section-title { font-size: 70px !important; line-height: 1.1 !important; font-weight: 700 !important; font-family: var(--tp-ff-inter, sans-serif) !important; } */ /* Contact Info Styling */ .utsoraa-contact-wrapper { font-family: var(--tp-ff-inter, sans-serif); } .utsoraa-contact-title { font-size: 36px; font-weight: 700; color: #000; margin-bottom: 10px; } .utsoraa-contact-subtitle { font-size: 22px; color: #4d5051; line-height: 1.5; } .utsoraa-contact-icon i { font-size: 22px; color: #7958af; width: 28px; text-align: center; } .utsoraa-contact-text h6 { font-size: 18px; font-weight: 600; color: #000; margin: 0 0 6px; } .utsoraa-contact-text p { font-size: 24px; color: #4d5051; line-height: 1.6; font-weight: 500px; } .utsoraa-link { color: #7958af; text-decoration: none; transition: color 0.3s; } .utsoraa-link:hover { color: #5a3d8a; } .utsoraa-contact-blurb p { font-size: 24px; color: #333; line-height: 1.7; } /* ============================================= */ /* PHONE + EMAIL SIDE BY SIDE (2 COLUMNS) */ /* ============================================= */ .utsoraa-contact-row { display: flex !important; justify-content: flex-start !important; gap: 40px !important; /* CHANGE: Gap between Phone & Email */ flex-wrap: wrap !important; /* Mobile pe stack ho jayega */ } .utsoraa-contact-row .utsoraa-contact-item { flex: 1 !important; min-width: 220px !important; /* Ensures 2 columns */ margin-bottom: 0 !important; } /* Mobile: Stack Phone & Email */ @media (max-width: 768px) { .utsoraa-contact-row { flex-direction: column !important; gap: 20px !important; } .utsoraa-contact-row .utsoraa-contact-item { min-width: auto !important; } } /* ============================================= */ /* RIGHT SIDE: FORM (SCOPED WITH .utsoraa) */ /* ============================================= */ /* CHANGE HERE: RIGHT WIDTH */ .utsoraa .form-container { flex: 0 0 48% !important; /* RIGHT WIDTH: 48% */ max-width: 780px !important; /* MAX WIDTH */ } /* Form Box */ .utsoraa .al-faq-form-box { max-height: 1050px !important; } .utsoraa .al-faq-form-content { margin-top: -50px !important; text-align: center !important; } .utsoraa .al-faq-form-title { font-size: 70px !important; margin-bottom: 10px !important; font-family: var(--tp-ff-inter, sans-serif) !important; } .utsoraa .al-faq-form-content p { font-size: 30px !important; margin: 0 0 30px 0 !important; color: #4d5051 !important; } .utsoraa .al-faq-input-box { display: flex !important; flex-direction: column !important; } .utsoraa .al-faq-input input, .utsoraa .al-faq-input textarea, .utsoraa .al-faq-captcha input { width: 100% !important; height: 55px !important; padding: 10px 15px !important; border: 1px solid #7958af !important; border-radius: 10px !important; background-color: #c7b0e1 !important; font-family: var(--tp-ff-inter, sans-serif) !important; font-size: 18px !important; margin-bottom: 20px !important; box-sizing: border-box !important; } .utsoraa .al-faq-input textarea { height: 100px !important; resize: vertical !important; } .utsoraa .al-faq-input input::placeholder, .utsoraa .al-faq-input textarea::placeholder, .utsoraa .al-faq-captcha input::placeholder { color: #000 !important; opacity: 0.5 !important; font-size: 18px !important; } .utsoraa .al-faq-captcha span { display: block !important; margin-bottom: 5px !important; font-size: 16px !important; color: #4d5051 !important; } /* Button */ .utsoraa .tp-btn-wide-here { width: 100% !important; min-width: 600px !important; padding: 0 30px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; height: 55px !important; border-radius: 26px !important; background: #007bff !important; color: white !important; font-size: 16px !important; font-weight: 700 !important; text-transform: uppercase !important; font-family: var(--tp-ff-dm, sans-serif) !important; transition: 0.3s !important; } .utsoraa .tp-btn-wide-here:hover { background: #0056b3 !important; } /* ============================================= */ /* QUICK WIDTH ADJUSTMENT CLASSES */ /* ============================================= */ /* Add to HTML:
*/ /* Makes LEFT WIDER */ .left-wider { flex: 0 0 55% !important; max-width: 800px !important; margin-left: -50px !important; } .form-narrow { flex: 0 0 40% !important; max-width: 650px !important; } /* Equal Width */ .equal { flex: 0 0 48% !important; max-width: 750px !important; } /* ============================================= */ /* RESPONSIVE BREAKPOINTS */ /* ============================================= */ @media (max-width: 1536px) { /* LEFT */ .utsoraa-contact-container { flex: 0 0 44% !important; max-width: 600px !important; margin-left: 10px !important; } /* RIGHT */ .utsoraa .form-container { flex: 0 0 50% !important; max-width: 680px !important; } .utsoraa .al-faq-form-title { font-size: 58px !important; } .utsoraa .tp-btn-wide-here { min-width: 480px !important; height: 52px !important; } } @media (max-width: 1366px) { .utsoraa-contact-container { flex: 0 0 44% !important; max-width: 550px !important; margin-left: 0 !important; } .utsoraa .form-container { flex: 0 0 48% !important; max-width: 600px !important; } .utsoraa .al-faq-form-title { font-size: 54px !important; } .utsoraa .tp-btn-wide-here { min-width: 440px !important; height: 50px !important; } } @media (max-width: 1199px) { .faq-form-wrapper { flex-direction: column !important; gap: 60px !important; } .utsoraa-contact-container, .utsoraa .form-container { flex: 0 0 100% !important; max-width: 100% !important; margin-left: 0 !important; padding-right: 0 !important; } .utsoraa .al-faq-form-title { font-size: 42px !important; text-align: center !important; } .utsoraa .tp-btn-wide-here { width: 100% !important; min-width: auto !important; height: 50px !important; } } @media (max-width: 991px) { .utsoraa .al-faq-form-title { font-size: 38px !important; } } @media (max-width: 768px) { .utsoraa .al-faq-form-title { font-size: 34px !important; } .utsoraa .tp-btn-wide-here { height: 48px !important; font-size: 15px !important; } } @media (max-width: 480px) { .utsoraa .al-faq-form-title { font-size: 30px !important; } .utsoraa .al-faq-form-content p { font-size: 20px !important; } .utsoraa .tp-btn-wide-here { height: 45px !important; font-size: 14px !important; } } /* The large spinning ring */ .utsoraa-contact-container .tp-about-ai-ring { position: absolute; /* Was top: -9px. This is small and can remain fixed. */ top: 600px; /* Was right: -348px. On a 1920px screen, this is -18.125vw. */ right: 18.125vw; /* Was width: 33%. This is already a great relative unit. */ width: 90%; animation: tp_animation_spin 9s linear infinite; z-index: 1; } .tp-btn-ai-alt { position: relative; padding: 14px 32px; border-radius: 100px; width: 165px; z-index: 1; transition: all 0.4s ease; color: white; text-align: center; text-transform: uppercase; font-weight: 700; overflow: hidden; display: inline-block; } /* Moving gradient background same as .tp-bg-common-anim */ .tp-btn-ai-alt::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 100px; background: linear-gradient(90deg, #021352 0%, #A70C7E 50%, #021352 100%); background-size: 300% 300%; animation: tpGradientMove 10s ease infinite; z-index: -1; transition: all 0.4s ease; } /* Gradient animation keyframes (same as tp-bg-common-anim) */ @keyframes tpGradientMove { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } /* Hover effect → White background + Black text */ .tp-btn-ai-alt:hover { color: #000; } .tp-btn-ai-alt:hover::before { background: #fff; animation: none; /* stop gradient animation on hover */ } /* 4/11 */ /* === FIXED HEADER (with small top gap) === */ .utsoraa-header { position: fixed; top: 12px; /* 👈 move whole header up/down on screen */ left: 0; right: 0; z-index: 9999; display: flex; justify-content: center; background: transparent; } /* === PATCH BACKGROUND === */ .utsoraa-header-bg { background-color: #f1e8e3; /* 👈 patch color */ width: 90%; /* 👈 reduce/increase for left-right margin */ border-radius: 12px; box-shadow: 0 2px 6px rgba(19, 19, 22, 0.08); animation: headerSlideDown 0.95s ease forwards; } /* === HEADER CONTAINER === */ .utsoraa-header-container { display: flex; align-items: center; /* 👈 keeps everything vertically centered */ justify-content: space-between; /* 👈 positions left and right menus */ position: relative; /* needed for centered logo */ padding: 40px 50px; /* 👈 increase to make patch taller */ } /* === LOGO CENTER === */ .header-logo { position: absolute; top: 40%; /* 👈 vertical center of patch */ left: 50%; /* 👈 horizontal center of screen */ transform: translate(-50%, -30%); /* 👈 perfect centering */ } /* === LOGO IMAGE === */ .header-logo img { width: 150px; /* 👈 logo size */ height: 70px; display: block; } /* === LEFT MENU === */ .header-left ul { display: flex; gap: 29px; /* 👈 space between left menu items */ list-style: none; margin: 0; padding: 0; position: relative; top: 0; /* 👈 to move left menu UP/DOWN → use +px (down), -px (up) */ } /* Example: .header-left ul { top: 5px; } 👈 moves menu 5px down .header-left ul { top: -5px; } 👈 moves menu 5px up */ /* === RIGHT MENU === */ .header-right ul { display: flex; align-items: center; gap: 29px; /* 👈 space between “Shop” & “Contact” */ list-style: none; margin: 0; padding: 0; position: relative; top: 0; /* 👈 same logic: increase → down, decrease → up */ } /* === MENU LINKS === */ .header-left a, .header-right a { text-decoration: none; color: #000; font-size: 22px; /* 👈 increase for bigger text */ font-weight: 600; transition: color 0.3s ease; } .header-left a:hover, .header-right a:hover { color: #a70c7e; } /* === CONTACT BUTTON === */ .contact-btn { background: linear-gradient(90deg, #021352 0%, #A70C7E 50%, #021352 100%); background-size: 300% 300%; animation: tpGradientMove 10s ease infinite; color: #fff !important; padding: 10px 45px; /* 👈 increase this to make button wider */ border-radius: 25px; font-weight: 600; font-size: 16px; border: none; transition: all 0.3s ease; cursor: pointer; } /* 👇 Gradient animation movement */ @keyframes tpGradientMove { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } /* === BODY TOP PADDING (prevents content overlap) === */ body { padding-top: 100px; /* 👈 increase if header height > 80px */ } /* === OPTIONAL ANIMATION === */ @keyframes headerSlideDown { from { transform: translateY(-40px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } /* === QUICK CONTROL REFERENCE === 👉 Move whole header up/down → .utsoraa-header { top: 12px; } 👉 Move menu (left/right) up/down → top: ±px inside .header-left ul / .header-right ul 👉 Increase patch height → padding in .utsoraa-header-container 👉 Increase space between items → gap: 24px; 👉 Logo size → .header-logo img { width: 120px; } */ /* === Hide helper (unchanged) === */ .utsoraa-hidden { display: none !important; } /* === BUTTON BASE === */ #utsoraMenuBtn.utsora-toggler { position: fixed; top: 18px; right: 24px; z-index: 10001; display: inline-flex; align-items: center; justify-content: center; gap: 10px; cursor: pointer; border: none; border-radius: 999px; backdrop-filter: blur(6px); box-sizing: border-box; /* Fixed width so it doesn’t change when label hides */ width: 180px; min-width: 180px; padding: 10px 14px; /* ✨ Gradient animation */ background: linear-gradient(90deg, #021352 0%, #A70C7E 50%, #021352 100%); background-size: 400% 400%; animation: utsoraGradAnim 10s ease infinite; transition: all 0.25s ease; } /* === Gradient animation === */ @keyframes utsoraGradAnim { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } /* === Hover: lift and faster shimmer === */ #utsoraMenuBtn.utsora-toggler:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(167,12,126,0.25); animation: utsoraGradFast 6s ease infinite; } @keyframes utsoraGradFast { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } /* === Icon setup === */ #utsoraMenuBtn .utsora-icon { display: inline-flex; flex-direction: column; justify-content: center; align-items: center; gap: 4px; flex: 0 0 48px; /* fixed icon area width */ height: 20px; } /* === Bars === */ #utsoraMenuBtn .utsora-icon span { display: block; width: 22px; height: 2px; border-radius: 2px; background: #fff; transition: transform 0.35s ease, opacity 0.25s ease; } /* === Label === */ #utsoraMenuBtn .utsora-label { display: inline-block; width: calc(100% - 48px); max-width: calc(100% - 48px); color: #fff; font-weight: 600; font-size: 15px; letter-spacing: 0.2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease; } /* === When menu is OPEN === */ #utsoraMenuBtn.is-open .utsora-icon span:nth-child(1) { transform: translateY(6px) rotate(45deg); } #utsoraMenuBtn.is-open .utsora-icon span:nth-child(2) { opacity: 0; } #utsoraMenuBtn.is-open .utsora-icon span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } /* === Smoothly hide label, keep button width stable === */ #utsoraMenuBtn.is-open .utsora-label { opacity: 0; visibility: hidden; transform: translateX(6px); pointer-events: none; transition: opacity .24s ease, transform .24s ease, visibility .24s ease; /* keep element in layout so button width does not change */ display: inline-block; } /* === Responsive tweak for small screens === */ @media (max-width: 420px) { #utsoraMenuBtn.utsora-toggler { width: 56px; min-width: 56px; padding: 8px; right: 12px; top: 12px; } #utsoraMenuBtn .utsora-label { display: none; } } /* median query for nav bar */ /* ✅ 1600 × 900 (16:9 widescreen laptops / external monitors) */ @media (min-width: 1500px) and (max-width: 1699px) { :root { --patch-width: 1400px; /* 1440px wale se ~100px zyada */ --patch-height: 95px; /* thoda zyada breathing room */ --patch-padding: 42px 70px; /* padding bhi scale kiya */ --logo-h: 70px; --logo-w: 140px; /* logo bada dikh sakta hai comfortably */ --menu-font: 18px; /* font size badhaya for better readability */ --menu-gap: 34px; /* items ke beech zyada space */ --left-offset: 150px; /* left menu thoda door */ --right-offset: 230px; /* right menu thoda door */ } .utsoraa-header-bg { width: var(--patch-width); height: var(--patch-height); } .utsoraa-header-container { padding: var(--patch-padding); } .header-logo img { width: var(--logo-w); height: var(--logo-h); } .header-left a, .header-right a { font-size: var(--menu-font); } .header-left ul, .header-right ul { gap: var(--menu-gap); } /* Positioning same rahegi jaise 1440px mein thi */ .header-left { left: 50%; transform: translateX(calc(-100% - var(--left-offset))); position: absolute; top: 50%; translate: 0 -50%; } .header-right { right: 50%; transform: translateX(calc(100% + var(--right-offset))); position: absolute; top: 50%; translate: 0 -50%; } .header-logo { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } } /* ------------------------------------------- DESKTOP / LAPTOP HIGH - 1366px — 1599px ------------------------------------------- */ @media (min-width: 1500px) and (max-width: 1536px) { :root { --patch-width: 1350px; --patch-height: 100px; --patch-padding: 50px 75px; --logo-h: 75px; --logo-w: 130px; --menu-font: 18px; --menu-gap: 36px; --left-offset: 150px; --right-offset: 240px; } .utsoraa-header-bg { width: var(--patch-width); } .utsoraa-header-bg { height: var(--patch-height); } .utsoraa-header-container { padding: var(--patch-padding); } .header-logo img { width: var(--logo-w); } .header-logo img { height: var(--logo-h); } .header-left a, .header-right a { font-size: var(--menu-font); } .header-left ul, .header-right ul { gap: var(--menu-gap); } .header-left { left: 50%; transform: translateX(calc(-100% - var(--left-offset))); position: absolute; top: 50%; translate: 0 -50%; } .header-right { right: 50%; transform: translateX(calc(100% + var(--right-offset))); position: absolute; top: 50%; translate: 0 -50%; } .header-logo { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } } /* ✅ 1440 × 900 (MacBooks / 15” laptops) */ @media (min-width: 1400px) and (max-width: 1499px) { :root { --patch-width: 1250px; --patch-height: 90px; --patch-padding: 40px 65px; --logo-h: 65px; --logo-w: 130px; --menu-font: 17px; --menu-gap: 30px; --left-offset: 140px; --right-offset: 210px; } .utsoraa-header-bg { width: var(--patch-width); height: var(--patch-height); } .utsoraa-header-container { padding: var(--patch-padding); } .header-logo img { width: var(--logo-w); height: var(--logo-h); } .header-left a, .header-right a { font-size: var(--menu-font); } .header-left ul, .header-right ul { gap: var(--menu-gap); } .header-left { left: 50%; transform: translateX(calc(-100% - var(--left-offset))); position: absolute; top: 50%; translate: 0 -50%; } .header-right { right: 50%; transform: translateX(calc(100% + var(--right-offset))); position: absolute; top: 50%; translate: 0 -50%; } .header-logo { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } } /* ✅ 1366 × 768 (Most mid-range laptops) */ @media (min-width: 1300px) and (max-width: 1399px) { :root { --patch-width: 1200px; --patch-height: 85px; --patch-padding: 40px 60px; --logo-h: 60px; --logo-w: 110px; --menu-font: 16px; --menu-gap: 26px; --left-offset: 135px; --right-offset: 195px; } .utsoraa-header-bg { width: var(--patch-width); height: var(--patch-height); } .utsoraa-header-container { padding: var(--patch-padding); } .header-logo img { width: var(--logo-w); height: var(--logo-h); } .header-left a, .header-right a { font-size: var(--menu-font); } .header-left ul, .header-right ul { gap: var(--menu-gap); } .header-left { left: 50%; transform: translateX(calc(-100% - var(--left-offset))); position: absolute; top: 50%; translate: 0 -50%; } .header-right { right: 50%; transform: translateX(calc(100% + var(--right-offset))); position: absolute; top: 50%; translate: 0 -50%; } .header-logo { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } } /* ✅ 1280 × 1024 / 1280 × 800 (Smaller screens / older laptops) */ @media (min-width: 1200px) and (max-width: 1299px) { :root { --patch-width: 1100px; --patch-height: 80px; --patch-padding: 35px 55px; --logo-h: px; --logo-w: 105px; --menu-font: 15px; --menu-gap: 22px; --left-offset: 120px; --right-offset: 175px; } .utsoraa-header-bg { width: var(--patch-width); height: var(--patch-height); } .utsoraa-header-container { padding: var(--patch-padding); } .header-logo img { width: var(--logo-w); height: var(--logo-h); } .header-left a, .header-right a { font-size: var(--menu-font); } .header-left ul, .header-right ul { gap: var(--menu-gap); } .header-left { left: 50%; transform: translateX(calc(-100% - var(--left-offset))); position: absolute; top: 50%; translate: 0 -50%; } .header-right { right: 50%; transform: translateX(calc(100% + var(--right-offset))); position: absolute; top: 50%; translate: 0 -50%; } .header-logo { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } } /* ✅ 1152 × 864 / 1024 × 768 (Older / small screens) */ @media (min-width: 1000px) and (max-width: 1199px) { :root { --patch-width: 1000px; --patch-height: 75px; --patch-padding: 35px 50px; --logo-h: 52px; --logo-w: 95px; --menu-font: 14px; --menu-gap: 18px; --left-offset: 115px; --right-offset: 150px; } .utsoraa-header-bg { width: var(--patch-width); height: var(--patch-height); } .utsoraa-header-container { padding: var(--patch-padding); } .header-logo img { width: var(--logo-w); height: var(--logo-h); } .header-left a, .header-right a { font-size: var(--menu-font); } .header-left ul, .header-right ul { gap: var(--menu-gap); } .header-left { left: 50%; transform: translateX(calc(-100% - var(--left-offset))); position: absolute; top: 50%; translate: 0 -50%; } .header-right { right: 50%; transform: translateX(calc(100% + var(--right-offset))); position: absolute; top: 50%; translate: 0 -50%; } .header-logo { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } } /* ---------- iPad Mini (768px) ---------- */ @media (min-width:768px) and (max-width:768px){ @import url('./tablet-common.css'); .utsoraa-header-container{padding:30px 20px;} .utsoraa-hamburger{font-size:30px;} .header-logo img{width:120px;height:56px;} .tablet-contact-btn{padding:10px 30px;font-size:15px;} } /* ---------- iPad Air (769‑820px) ---------- */ @media (min-width:769px) and (max-width:820px){ @import url('./tablet-common.css'); .utsoraa-header-container{padding:32px 22px;} .utsoraa-hamburger{font-size:32px;} .header-logo img{width:130px;height:60px;} .tablet-contact-btn{padding:11px 34px;font-size:16px;} } /* ---------- iPad Pro 11″ (821‑834px) ---------- */ @media (min-width:821px) and (max-width:834px){ @import url('./tablet-common.css'); .utsoraa-header-container{padding:34px 24px;} .utsoraa-hamburger{font-size:34px;} .header-logo img{width:135px;height:63px;} .tablet-contact-btn{padding:12px 36px;font-size:16px;} } /* ---------- iPad Pro 12.9″ (835‑1024px) – BIGGER PATCH + FONTS ---------- */ @media (min-width: 835px) and (max-width: 1024px) { @import url('./tablet-common.css'); /* keep all common styles */ /* === INCREASE NAVBAR PATCH SIZE === */ .utsoraa-header-bg { width: 95% !important; /* wider than before */ max-width: 1200px; /* optional cap */ height: 110px; /* taller patch */ border-radius: 16px; /* slightly bigger radius */ } /* === MORE PADDING INSIDE (taller feel) === */ .utsoraa-header-container { padding: 35px 30px !important; /* ↑ vertical, ↑ horizontal */ } /* === BIGGER HAMBURGER + MENU TEXT === */ .utsoraa-hamburger { font-size: 38px; } .utsoraa-hamburger span { font-size: 18px; } /* === BIGGER LOGO === */ .header-logo img { width: 160px !important; height: 74px !important; } /* === BIGGER CONTACT BUTTON (top right) === */ .tablet-contact-btn { padding: 14px 42px !important; font-size: 18px !important; border-radius: 28px; } /* === BIGGER FONTS IN DRAWER === */ .utsoraa-drawer ul li a { font-size: 24px !important; /* menu links */ } .utsoraa-drawer .contact-btn { padding: 16px 48px !important; font-size: 19px !important; border-radius: 30px; } /* Optional: bigger close (×) */ .utsoraa-drawer-close { font-size: 42px; } } /* ============================================================== COMMON TABLET STYLES – LOGO 100 % CENTERED (flex + absolute) ============================================================== */ @media (min-width: 768px) and (max-width: 1024px) { /* hide original menus */ .header-left, .header-right { display:none !important; } /* ---- CONTAINER – flex, full width, relative ---- */ .utsoraa-header-container { display:flex; align-items:center; justify-content:space-between; /* left & right items */ position:relative; /* for absolute logo */ padding:30px 20px; /* overwritten per device */ } /* ---- LOGO – absolute centre (ignores left/right) ---- */ .header-logo { position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); margin:0; z-index:10; /* above hamburger if needed */ } .header-logo img { display:block; width:130px; /* default – overridden per device */ height:auto; } /* ---- HAMBURGER (left) ---- */ .utsoraa-hamburger { background:transparent; border:none; cursor:pointer; color:#000; font-size:30px; /* overwritten per device */ display:flex; align-items:center; gap:6px; z-index:10000; } .utsoraa-hamburger span { font-size:16px; font-weight:600; } /* ---- CONTACT BUTTON (right) ---- */ .tablet-contact-btn { background:linear-gradient(90deg,#021352 0%,#A70C7E 50%,#021352 100%); background-size:300% 300%; animation:tpGradientMove 10s ease infinite; color:#fff !important; border:none; border-radius:25px; font-weight:600; cursor:pointer; text-decoration:none; display:inline-block; } /* ---- DRAWER (from RIGHT) ---- */ .utsoraa-drawer-overlay{ position:fixed;inset:0;background:rgba(0,0,0,.55); opacity:0;visibility:hidden;transition:opacity .35s,visibility .35s; z-index:9998; } .utsoraa-drawer-overlay.active{opacity:1;visibility:visible;} .utsoraa-drawer{ position:fixed;top:0;right:0;width:300px;max-width:85vw;height:100%; background:#f1e8e3;box-shadow:-6px 0 20px rgba(0,0,0,.2); padding:80px 30px 30px;transform:translateX(100%); transition:transform .38s cubic-bezier(.25,.8,.25,1); z-index:9999;overflow-y:auto; } .utsoraa-drawer.active{transform:translateX(0);} .utsoraa-drawer-close{ position:absolute;top:18px;right:18px;background:none;border:none; font-size:38px;cursor:pointer;color:#444; } .utsoraa-drawer ul{list-style:none;margin:0;padding:0;} .utsoraa-drawer ul li{margin-bottom:20px;} .utsoraa-drawer ul li a{ display:block;font-size:22px;font-weight:600;color:#000; text-decoration:none;padding:8px 0;transition:color .3s; } .utsoraa-drawer ul li a:hover{color:#a70c7e;} .utsoraa-drawer .contact-btn{ display:inline-block;margin-top:15px;padding:14px 40px; border-radius:28px;font-size:18px;width:fit-content; } } /* ============================================================== MOBILE DRAWER: Separate media queries for common phones ============================================================== */ /* ---------- iPhone SE / Small phones (320‑374px) – SHORTER PATCH ---------- */ @media (min-width: 320px) and (max-width: 374px) { @import url('./mobile-common.css'); /* === 1. REDUCE PATCH HEIGHT === */ .utsoraa-header-bg { width: 82% !important; height: 52px !important; /* ← WAS 58px or 70px → NOW SHORTER */ border-radius: 9px; } /* === 2. REDUCE VERTICAL PADDING === */ .utsoraa-header-container { padding: 25px 10px !important; /* ← WAS 14px 10px → LESS TOP/BOTTOM */ } /* === 3. SMALLER LOGO TO FIT === */ .header-logo img { width: 80px !important; height: 36px !important; } /* === 4. SMALLER HAMBURGER === */ .utsoraa-hamburger-mobile { font-size: 23px !important; left: 10px !important; } /* === 5. TIGHTER DRAWER TEXT === */ .utsoraa-drawer ul li a { font-size: 16.5px !important; padding: 10px 0; } .utsoraa-drawer .contact-btn { padding: 10px 26px !important; font-size: 15px !important; } } /* ---------- iPhone 12/13/14 (375‑424px) – SMALLER PATCH ---------- */ @media (min-width: 375px) and (max-width: 424px) { @import url('./mobile-common.css'); /* === SMALLER PATCH === */ .utsoraa-header-bg { width: 86% !important; /* was 92% */ height: 56px !important; /* was 74px → NOW SHORTER */ border-radius: 10px; } /* === TIGHTER PADDING === */ .utsoraa-header-container { padding: 30px 12px !important; /* was 20px 14px → LESS VERTICAL */ } /* === SMALLER LOGO === */ .header-logo img { width: 85px !important; /* was 105px */ height: 38px !important; /* was 48px */ } /* === SMALLER HAMBURGER === */ .utsoraa-hamburger-mobile { font-size: 25px !important; /* was 28px */ left: 12px !important; /* was 14px */ } /* === TIGHTER DRAWER TEXT === */ .utsoraa-drawer ul li a { font-size: 18px !important; /* was 19px */ padding: 10px 0; } .utsoraa-drawer .contact-btn { padding: 12px 30px !important; font-size: 15.5px !important; border-radius: 24px; } } /* ---------- Larger phones / small tablets (425‑767px) – SMALLER PATCH ---------- */ @media (min-width: 425px) and (max-width: 767px) { @import url('./mobile-common.css'); /* === SMALLER PATCH === */ .utsoraa-header-bg { width: 88% !important; /* was 93% */ height: 60px !important; /* was 78px → NOW SHORTER */ border-radius: 11px; } /* === TIGHTER PADDING === */ .utsoraa-header-container { padding: 30px 14px !important; /* was 22px 16px → LESS VERTICAL */ } /* === SMALLER LOGO === */ .header-logo img { width: 98px !important; /* was 110px */ height: 44px !important; /* was 50px */ } /* === SMALLER HAMBURGER === */ .utsoraa-hamburger-mobile { font-size: 20px !important; /* was 30px */ left: 14px !important; /* was 16px */ } /* === TIGHTER DRAWER TEXT === */ .utsoraa-drawer ul li a { font-size: 19px !important; /* was 20px */ padding: 11px 0; } .utsoraa-drawer .contact-btn { padding: 13px 34px !important; font-size: 16.5px !important; border-radius: 25px; } } /* ============================================================== MOBILE COMMON STYLES (used by all mobile queries) ============================================================== */ @media (max-width: 767px) { .header-left, .header-right { display: none !important; } .utsoraa-header-container { display: flex; align-items: center; justify-content: center; position: relative; } .header-logo { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 10; } .header-logo img { display: block; } .utsoraa-hamburger-mobile { position: absolute; top: 50%; transform: translateY(-50%); background: transparent; border: none; color: #000; cursor: pointer; z-index: 10000; } .utsoraa-drawer-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.55); opacity: 0; visibility: hidden; transition: opacity .35s, visibility .35s; z-index: 9998; } .utsoraa-drawer-overlay.active { opacity:1; visibility:visible; } .utsoraa-drawer { position: fixed; top: 0; right: 0; width: 100%; max-width: none; height: 100%; background: #f1e8e3; box-shadow: -6px 0 20px rgba(0,0,0,.2); padding: 70px 25px 30px; transform: translateX(100%); transition: transform .38s cubic-bezier(.25,.8,.25,1); z-index: 9999; overflow-y: auto; } .utsoraa-drawer.active { transform: translateX(0); } .utsoraa-drawer-close { position: absolute; top: 15px; right: 15px; background: none; border: none; font-size: 36px; cursor: pointer; color: #444; } .utsoraa-drawer ul { list-style: none; margin: 0; padding: 0; } .utsoraa-drawer ul li { margin-bottom: 18px; } .utsoraa-drawer ul li a { display: block; color: #000; text-decoration: none; padding: 12px 0; transition: color .3s; } .utsoraa-drawer ul li a:hover { color: #a70c7e; } .utsoraa-drawer .contact-btn { display: block; text-align: center; margin-top: 20px; border-radius: 26px; } } /* ****************************************testimonial css*********************************************** */ .tp-btn-ai-alt { position: relative; padding: 14px 32px; border-radius: 100px; width: 165px; z-index: 1; transition: all 0.4s ease; color: white; text-align: center; text-transform: uppercase; font-weight: 700; overflow: hidden; display: inline-block; } /* Moving gradient background same as .tp-bg-common-anim */ .tp-btn-ai-alt::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 100px; background: linear-gradient(90deg, #021352 0%, #A70C7E 50%, #021352 100%); background-size: 300% 300%; animation: tpGradientMove 10s ease infinite; z-index: -1; transition: all 0.4s ease; } .tp-live-anim-spin { animation: tp_animation_spin 6s linear infinite; } .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-network { width: 60px; height: 60px; display: inline-block; border-radius: 50%; display: flex; justify-content: center; align-items: center; background: #021352; flex: 0 0 auto; } .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-testimonial-cst-shape { position: absolute; bottom: -110px; right: -110px; opacity: 0.2; } .tp-testimonial-scale-wrapper { width: 100%; margin: 0 auto; transform-origin: center top; pointer-events: none; /* Let clicks pass through to Swiper */ } .tp-testimonial-scale-wrapper > * { pointer-events: auto; /* Re-enable clicks on content */ } /* ===== ADD THESE PAGINATION STYLES ===== */ .tp-testimonial-cst-pagenation { position: relative !important; bottom: 0 !important; left: 0 !important; width: 100% !important; display: flex !important; justify-content: center !important; align-items: center !important; gap: 8px !important; margin-top: 30px !important; z-index: 10 !important; } .tp-testimonial-cst-pagenation .swiper-pagination-bullet { width: 8px !important; height: 8px !important; background: #ccc !important; border-radius: 50% !important; opacity: 0.6 !important; cursor: pointer !important; transition: all 0.3s ease !important; display: block !important; } .tp-testimonial-cst-pagenation .swiper-pagination-bullet-active { background: #021352 !important; opacity: 1 !important; width: 12px !important; /* Same as other bullets but can be larger */ height: 12px !important; /* Make sure height matches width */ border-radius: 50% !important; /* This makes it perfectly round */ } /* ===== SCOPED SWIPER FIXES - ONLY AFFECT TESTIMONIAL SLIDER ===== */ .tp-testimonial-cst-slider .swiper-wrapper { display: flex; width: 100%; height: auto; transition-timing-function: ease-out; } .tp-testimonial-cst-slider .swiper-slide { width: 100% !important; flex-shrink: 0; height: auto; } .tp-testimonial-cst-slider { width: 100%; overflow: hidden; } /* ===== ADD THIS MOBILE FIX ===== */ @media (max-width: 430px) { .tp-testimonial-cst-pagenation { margin-top: 20px !important; } .tp-testimonial-cst-pagenation .swiper-pagination-bullet { width: 6px !important; height: 6px !important; } .tp-testimonial-cst-pagenation .swiper-pagination-bullet-active { background: #021352 !important; opacity: 1 !important; width: 12px !important; /* Same as other bullets but can be larger */ height: 12px !important; /* Make sure height matches width */ border-radius: 90% !important; /* This makes it perfectly round */ } .col-lg-6.mb-25:last-child { display: none !important; } } /* Media query for 430x932 resolution */ @media (max-width: 430px) { .col-lg-6.mb-25:last-child { display: none !important; } .tp-testimonial-scale-wrapper { transform: scale(0.85); transform-origin: center top; width: 100%; margin: 0 auto; } .tp-testimonial-area .container-fluid { padding: 0 15px; } .tp-testimonial-cst-slider .swiper-slide { padding: 10px 0; } .row { --bs-gutter-x: 10px; --bs-gutter-y: 10px; margin: 0; } .col-lg-6.mb-25 { margin-bottom: 15px !important; width: 100%; } /* Testimonial item adjustments */ .tp-testimonial-cst-item { padding: 20px 15px 15px 20px; margin: 15px; position: relative; margin-top: -80px; } .tp-testimonial-cst-item p { font-size: 18px !important; line-height: 1.3 !important; margin-bottom: 20px !important; } /* Testimonial thumb adjustments */ .tp-testimonial-cst-thumb img { width: 100%; height: auto; } .tp-testimonial-cst-pagenation { margin-top: 20px !important; } .tp-testimonial-cst-pagenation .swiper-pagination-bullet { width: 6px !important; height: 6px !important; } .tp-testimonial-cst-pagenation .swiper-pagination-bullet-active { background: #021352 !important; opacity: 1 !important; width: 12px !important; /* Same as other bullets but can be larger */ height: 12px !important; /* Make sure height matches width */ border-radius: 50% !important; /* This makes it perfectly round */ } .col-lg-6.mb-25:last-child { display: none !important; } } /* ------------------------------------------------- 3. 1536 × 864 → Scale down both columns slightly ------------------------------------------------- */ /* ------------------------------------------------- 3. 1536 × 864 → Scale down both columns slightly ------------------------------------------------- */ @media (min-width: 1536px) and (max-width: 1599px) { .tp-testimonial-scale-wrapper { transform: scale(0.90); transform-origin: center top; width: 100%; margin: 0 auto; } .row { --bs-gutter-x: 20px; --bs-gutter-x: 1rem; /* Default ~1.5rem → ab 1rem */ --bs-gutter-y: 1rem; } /* Your original tweaks */ .tp-testimonial-cst-item { padding: 42px 34px 36px 42px; margin: 42px; } .tp-testimonial-cst-item p { font-size: 30px; } .tp-testimonial-cst-result { padding: 65px; } .tp-testimonial-cst-result h3 { font-size: 50px; } .tp-testimonial-cst-result p { font-size: 18px; } .tp-testimonial-cst-network { width: 65px; height: 65px; } .tp-testimonial-cst-network svg { width: 26px; } .tp-header-btn a, .tp-btn-ai-alt { width: 270px; } .tp-testimonial-scale-wrapper { transform: scale(0.90); } .row { --bs-gutter-x: 20px; } .tp-testimonial-cst-pagenation { margin-top: 12px !important; /* 20px → 12px */ text-align: center; } .col-lg-6.mb-25 { margin-bottom: 0.5rem !important; /* 25px → ~8px */ } } /* ------------------------------------------------- 1. 1600 × 900 → HD+ ------------------------------------------------- */ @media (min-width: 1600px) and (max-width: 1919px) { .tp-testimonial-scale-wrapper { transform: scale(0.92); transform-origin: center top; width: 100%; margin: 0 auto; } .row { --bs-gutter-x: 20px; --bs-gutter-y: 1rem; } .col-lg-6.mb-25 { margin-bottom: 0.5rem !important; } .tp-testimonial-cst-pagenation { margin-top: 12px !important; text-align: center; } .tp-testimonial-cst-item { padding: 45px 36px 39px 45px; margin: 45px; } .tp-testimonial-cst-item p { font-size: 32px; } .tp-testimonial-cst-result { padding: 70px; } .tp-testimonial-cst-result h3 { font-size: 54px; } .tp-testimonial-cst-result p { font-size: 19px; } .tp-testimonial-cst-network { width: 70px; height: 70px; } .tp-testimonial-cst-network svg { width: 28px; } .tp-header-btn a, .tp-btn-ai-alt { width: 280px; } } /* ------------------------------------------------- 2. 1440 × 900 → WXGA+ ------------------------------------------------- */ @media (min-width: 1440px) and (max-width: 1535px) { .tp-testimonial-scale-wrapper { transform: scale(0.88); transform-origin: center top; width: 100%; margin: 0 auto; } .row { --bs-gutter-x: 18px; --bs-gutter-y: 1rem; } .col-lg-6.mb-25 { margin-bottom: 0.5rem !important; } .tp-testimonial-cst-pagenation { margin-top: 12px !important; text-align: center; } .tp-testimonial-cst-item { padding: 40px 32px 34px 40px; margin: 40px; } .tp-testimonial-cst-item p { font-size: 29px; } .tp-testimonial-cst-result { padding: 60px; } .tp-testimonial-cst-result h3 { font-size: 48px; } .tp-testimonial-cst-result p { font-size: 18px; } .tp-testimonial-cst-network { width: 62px; height: 62px; } .tp-testimonial-cst-network svg { width: 25px; } .tp-header-btn a, .tp-btn-ai-alt { width: 260px; } } /* ------------------------------------------------- 3. 1366 × 768 → HD / WXGA ------------------------------------------------- */ @media (min-width: 1366px) and (max-width: 1439px) { .tp-testimonial-scale-wrapper { transform: scale(0.86); transform-origin: center top; width: 100%; margin: 0 auto; } .row { --bs-gutter-x: 16px; --bs-gutter-y: 1rem; } .col-lg-6.mb-25 { margin-bottom: 0.5rem !important; } .tp-testimonial-cst-pagenation { margin-top: 12px !important; text-align: center; } .tp-testimonial-cst-item { padding: 38px 30px 32px 38px; margin: 38px; } .tp-testimonial-cst-item p { font-size: 27px; } .tp-testimonial-cst-result { padding: 55px; } .tp-testimonial-cst-result h3 { font-size: 44px; } .tp-testimonial-cst-result p { font-size: 17px; } .tp-testimonial-cst-network { width: 58px; height: 58px; } .tp-testimonial-cst-network svg { width: 23px; } .tp-header-btn a, .tp-btn-ai-alt { width: 250px; } } /* ------------------------------------------------- 4. 1280px wide (1280×1024, 1280×800, 1280×720) ------------------------------------------------- */ @media (min-width: 1280px) and (max-width: 1365px) { .tp-testimonial-scale-wrapper { transform: scale(0.84); transform-origin: center top; width: 100%; margin: 0 auto; } .row { --bs-gutter-x: 15px; --bs-gutter-y: 1rem; } .col-lg-6.mb-25 { margin-bottom: 0.5rem !important; } .tp-testimonial-cst-pagenation { margin-top: 12px !important; text-align: center; } .tp-testimonial-cst-item { padding: 35px 28px 30px 35px; margin: 35px; } .tp-testimonial-cst-item p { font-size: 25px; } .tp-testimonial-cst-result { padding: 50px; } .tp-testimonial-cst-result h3 { font-size: 40px; } .tp-testimonial-cst-result p { font-size: 16px; } .tp-testimonial-cst-network { width: 55px; height: 55px; } .tp-testimonial-cst-network svg { width: 22px; } .tp-header-btn a, .tp-btn-ai-alt { width: 240px; } } /* ------------------------------------------------- 5. 1024 × 768 → XGA ------------------------------------------------- */ @media (min-width: 1024px) and (max-width: 1279px) { .tp-testimonial-scale-wrapper { transform: scale(0.82); transform-origin: center top; width: 100%; margin: 0 auto; } .row { --bs-gutter-x: 14px; --bs-gutter-y: 1rem; } .col-lg-6.mb-25 { margin-bottom: 0.5rem !important; } .tp-testimonial-cst-pagenation { margin-top: 12px !important; text-align: center; } .tp-testimonial-cst-item { padding: 30px 25px 27px 30px; margin: 30px; } .tp-testimonial-cst-item p { font-size: 23px; } .tp-testimonial-cst-result { padding: 45px; } .tp-testimonial-cst-result h3 { font-size: 36px; } .tp-testimonial-cst-result p { font-size: 15px; } .tp-testimonial-cst-network { width: 50px; height: 50px; } .tp-testimonial-cst-network svg { width: 20px; } .tp-header-btn a, .tp-btn-ai-alt { width: 220px; } } /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~footer~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ------------------------------------------------- FOOTER – background now inline in HTML ------------------------------------------------- */ .tp-footer-area { background-size: cover; background-position: center; background-repeat: no-repeat; padding: 80px 0 30px; position: relative; } .tp-footer-area:not([style*="background-image"]) { background-color: #0a0a0a; } /* ------------------------------------------------- Rest of your original styling (unchanged) ------------------------------------------------- */ .tp-footer-top { padding-bottom: 30px; } .tp-footer-top-social-wrap { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin: 0 1.5rem; } .tp-footer-top-subtitle { font-size: 18px; font-weight: 500; color: #000000; } .tp-footer-top-title { font-size: 9rem; color: #ffffff; text-transform: uppercase; font-weight: 500; } /* Left & Right halves */ .tp-footer-left, .tp-footer-right { flex: 1; display: flex; gap: 80px !important; margin: 0 2.5rem; } .tp-footer-left { gap: 50px; } /* tighter between Events & Links */ .tp-footer-left .tp-footer-widget:nth-child(2) { transform: translateX(-20px); } .tp-footer-widget { flex: 1; min-width: 0; } /* Titles */ .tp-footer-widget-title, .right-footer-form .tp-footer-widget-title { font-size: 30px !important; color: #ffffff; text-transform: uppercase; margin-bottom: 15px; } /* Body text */ .tp-footer-widget p, .tp-footer-widget a, .tp-footer-widget .events-container a, .right-footer-form h4, .right-footer-form input, .right-footer-form textarea, .right-footer-form button { font-size: 22px !important; line-height: 1.9; color: #b3b3b3; } .right-footer-form input::placeholder, .right-footer-form textarea::placeholder { font-size: 22px !important; opacity: 0.8; } /* Read-more links */ .tp-read-more-link, .tp-read-more-link-events { font-size: 18px !important; color: #b3b3b3; text-decoration: none; display: inline-block; margin-top: 10px; } .tp-read-more-link:hover, .tp-read-more-link-events:hover { color: #ffffff; } /* Events container */ .event-footer{margin-left: 80px;} .events-container { position: relative; min-height: 300px; overflow: hidden;margin-left: 80px; } .events-more { display: none; } .events-more a { display: block; } /* Enquiry form */ /* ---- Container – limit max width but allow growth ---- */ .right-footer-form .enquiry-form { width: 100%; max-width: 560px; /* Increased from ~480px */ margin-right: 0; } /* ---- Form rows – 2 columns with more space ---- */ .enquiry-form .form-row { display: flex; gap: 20px; /* Increased gap */ margin-bottom: 18px; flex-wrap: nowrap; /* keep 2 cols until breakpoint */ } /* ---- INPUTS & TEXTAREA – WIDER + BETTER PADDING ---- */ .enquiry-form input, .enquiry-form textarea { flex: 1; min-width: 0; /* allow shrink */ padding: 16px 18px; /* Increased padding */ border: 1px solid #b3b3b3; background: transparent; color: #fff; font-size: 22px !important; line-height: 1.4; border-radius: 8px; /* Slightly rounder */ box-sizing: border-box; width: 100%; /* Force full width of flex item */ } /* ---- Placeholder ---- */ .enquiry-form input::placeholder, .enquiry-form textarea::placeholder { color: #fff; opacity: 0.7; font-size: 22px !important; } /* ---- Textarea – taller default ---- */ .enquiry-form textarea { resize: vertical; min-height: 80px; /* Increased */ } /* ---- Submit button – full width, bigger click area ---- */ .enquiry-form button { background: linear-gradient(to right, #A70C7E, #021352); color: #fff; padding: 9px 24px; /* Increased */ border-radius: 8px; border: none; width: 100%; height: 60px; font-size: 22px !important; font-weight: 600; cursor: pointer; margin-top: 0px; transition: all .25s ease; margin-bottom: 90px; } .enquiry-form button:hover { opacity: .92; transform: translateY(-1px); } /* Copyright */ .tp-footer-copyright { display: flex; justify-content: center; align-items: center; padding-top: 20px; margin: 0 1.5rem; position: relative; } .tp-footer-logo-img { max-width: 180px; height: auto; position: absolute; bottom: 0.1rem; right: 1.5rem; } /* Main menu wrapper */ .tp-main-menu { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; } /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~footer ends here~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ footer media ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ @media (max-width: 1536px) and (min-width: 1200px), (width: 1536px) and (max-height: 900px) { /* Container / overall footer sizing */ .tp-footer-inner { padding-left: 60px; padding-right: 60px; transform: scale(0.9); } .tp-footer-area { padding: 60px 0 24px; /* EDIT HERE: reduce top/bottom space */ background-position: center 20%; background-size: cover; } /* Top title size & spacing */ .tp-footer-top-title { font-size: 6.8rem; /* EDIT HERE: scale the giant title down */ line-height: 0.95; margin-bottom: 6px; transform-origin: left center; /* keep rotation anchor stable */ } /* Footer halves: make gaps tighter so content fits horizontally */ .tp-footer-left, .tp-footer-right { gap: 60px !important; /* EDIT HERE: reduce gap between columns */ margin: 0 1.8rem; } .tp-footer-left { gap: 28px; } /* slightly tighter for left column */ /* Widget titles smaller */ .tp-footer-widget-title, .right-footer-form .tp-footer-widget-title { font-size: 22px !important; /* EDIT HERE: smaller title */ margin-bottom: 12px; } /* Body text scale down a bit for 1536px */ .tp-footer-widget p, .tp-footer-widget a, .tp-footer-widget .events-container a, .right-footer-form h4, .right-footer-form input, .right-footer-form textarea, .right-footer-form button { font-size: 18px !important; /* EDIT HERE */ line-height: 1.7; } /* Events container - allow more items and avoid overflow clipping */ .events-container { min-height: 260px; margin-left: 60px; /* EDIT HERE: tune left indent for event list */ } .event-footer { margin-left: 60px; } /* Enquiry form responsive tweaks */ .right-footer-form .enquiry-form { max-width: 520px; /* EDIT HERE: limit form width slightly */ } .enquiry-form .form-row { gap: 16px; } .enquiry-form input, .enquiry-form textarea { font-size: 18px !important; padding: 14px 16px; border-radius: 6px; } .enquiry-form textarea { min-height: 72px; } .enquiry-form button { height: 54px; font-size: 18px !important; padding: 10px 20px; margin-bottom: 60px; } /* Footer copyright + logo */ .tp-footer-copyright { padding-top: 16px; margin: 0 1.8rem; } .tp-footer-logo-img { max-width: 150px; /* EDIT HERE: smaller logo on reduced width */ right: 1rem; bottom: 0.25rem; } /* Main menu wrapper adjustments */ .tp-main-menu { align-items: flex-start; gap: 12px; } /* Make sure long text doesn't overflow — nice for big screens with slightly smaller fonts */ .tp-footer-widget { min-width: 0; overflow-wrap: anywhere; } /* Optional: subtle global scale for entire footer on 1536x800: use with care */ /* Uncomment to enable a gentle scale (0.95 = 95% size) */ /* .tp-footer-area { transform: scale(0.98); transform-origin: top center; } */ } /* ----------------------------------------------------- Utility classes & examples — quick ways to shift/scale/resize items Use these on any element in the footer HTML. Comments explain usage. ----------------------------------------------------- */ /* SHIFTING: translate moves without breaking layout — use on a single element */ .shift-up-10 { transform: translateY(-10px); } /* pushes element up 10px */ .shift-up-20 { transform: translateY(-20px); } /* pushes element up 20px */ .shift-down-10 { transform: translateY(10px); } /* pushes element down 10px */ .shift-left-10 { transform: translateX(-10px); } /* pushes element left 10px */ .shift-right-10{ transform: translateX(10px); } /* pushes element right 10px */ /* SCALE: visually scale items (keeps them in flow but can overlap) */ .scale-95 { transform: scale(0.95); transform-origin: center top; } /* slightly smaller */ .scale-90 { transform: scale(0.9); transform-origin: center top; } /* more compact */ /* IMAGE sizing helpers: apply to or .tp-footer-logo-img to override */ .img-w-100 { width: 100px !important; height: auto !important; } .img-w-150 { width: 150px !important; height: auto !important; } .img-w-200 { width: 200px !important; height: auto !important; } /* FONT helpers: override font sizes quickly */ .fs-16 { font-size: 16px !important; } .fs-18 { font-size: 18px !important; } .fs-20 { font-size: 20px !important; } /* LAYOUT helpers — margin / padding quick edits (use sparingly) */ .mt-10 { margin-top: 10px !important; } .mb-10 { margin-bottom: 10px !important; } .ml-10 { margin-left: 10px !important; } /* STACK: force column layout — useful if you want to stack left+right in narrower containers */ .stack-vertical { flex-direction: column !important; gap: 18px !important; } /* home page about us */ /* ---------- HTML REFERENCE (for you) ----------

Events Made Effortless.
Experiences Made Memorable.

Utsoraa is a new-age, one-stop event company that plans, builds, and manages everything your brand needs — from intimate gatherings to large-scale experiences. We blend creativity with structure so every event feels seamless, stress-free, and uniquely yours.

Contact Us
-------------------------------------------- */ /* ============================================================= */ /* ====================== BASE STYLES ======================= */ /* ============================================================= */ /* Section container */ .al-about-pg-area { position: relative; padding: clamp(80px, 6.25vw, 120px) 0; overflow: hidden; } /* Large decorative ring */ .al-about-pg-area .tp-about-ai-ring { position: absolute; top: -9px; right: -18.125vw; /* = -348px @ 1920px */ width: 33%; animation: tp_animation_spin 9s linear infinite; z-index: -1; } /* Small decorative ring */ .al-about-pg-area .tp-about-ai-ring-small { position: absolute; bottom: 1.56vw; /* = 30px @ 1920px */ left: 4.68vw; /* = 90px @ 1920px */ width: 8%; animation: tp_animation_spin 9s linear infinite; z-index: 1; } /* Heading */ .al-about-pg-area .tp-portfolio-revealing-slide-heading { font-size: clamp(32px, 5.2vw, 100px); /* 100px @ 1920px */ font-weight: 500; line-height: 1.1; letter-spacing: -0.04em; margin-bottom: clamp(30px, 3.125vw, 60px); } .al-about-pg-area .title-slide-gradient { background-image: linear-gradient(90deg, #A70C7E 0%, #2545BC 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; text-fill-color: transparent; } /* Paragraph */ .al-about-pg-area .al-about-pg-content p { font-size: clamp(16px, 1.14vw, 22px); /* 22px @ 1920px */ line-height: 1.6; margin-bottom: 3.38vw; /* 65px @ 1920px */ text-align: justify; } /* Content wrapper (left padding) */ .al-about-pg-area .al-about-pg-content-wrap { padding-left: 5.46vw; /* 105px @ 1920px */ } /* Images – keep intrinsic ratio */ .al-about-pg-area .al-about-pg-thumb img, .al-about-pg-area .al-about-pg-thumb-2 img { max-width: 100%; height: auto; display: block; } /* Right image vertical offset */ .al-about-pg-area .al-about-pg-thumb-2 { padding-top: 100px; /* original value – will be overridden in media queries */ margin-left: 80px; } /* Button */ .al-about-pg-area .tp-header-btn { margin-left: 0; } .al-about-pg-area .tp-about-ai-ring { position: absolute; top: -9px; right: -18.125vw; width: 33%; animation: tp_animation_spin 9s linear infinite; z-index: -1; transform-origin: center; } /* KEYFRAMES — GLOBAL */ @keyframes tp_animation_spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* ============================================================= */ /* ========= RESPONSIVE OVERRIDES (smaller than 1920px) ======= */ /* ============================================================= */ /* Use max-width so the base clamp/vw values stay active on larger screens */ @media (max-width: 1919px) { .al-about-pg-area { /* Example variables – replace clamp/vw only where needed */ --heading-size: 84px; --para-fs: 20px; --content-pl: 88px; --img1-w: 360px; --img2-w: 280px; --thumb2-pt: 85px; } .al-about-pg-area .tp-portfolio-revealing-slide-heading { font-size: var(--heading-size); } .al-about-pg-area .al-about-pg-content p { font-size: var(--para-fs); } .al-about-pg-area .al-about-pg-content-wrap { padding-left: var(--content-pl); } .al-about-pg-area .al-about-pg-thumb img { width: var(--img1-w); } .al-about-pg-area .al-about-pg-thumb-2 img { width: var(--img2-w); } .al-about-pg-area .al-about-pg-thumb-2 { padding-top: var(--thumb2-pt); } } /* 1600 × 900 — Fixed: Second image ab side-by-side hi rahegi */ @media (min-width: 1501px) and (max-width: 1700px) { .al-about-pg-area { /* Layout */ --container-padding: 0 30px; --content-pl: 40px; --content-pr: 40px; --heading-size: 78px; --heading-mb: 44px; --para-fs: 20px; --para-mb: 46px; --col-gap: 0px; /* Images — now safe */ --img1-w: 420px; --img2-w: 200px; /* fits in 400px column */ /* Rings — balanced */ --ring-large-r: -250px; --ring-large-w: 32%; --ring-small-b: 100px; --ring-small-l: -120px; --ring-small-w: 10px; /* ~110px */ /* Right image */ --thumb2-ml: 70px; } /* Container */ .al-about-pg-area .container-1320 { padding: var(--container-padding); } /* Row gap */ .al-about-pg-area .row { gap: var(--col-gap); } /* KEY FIX: Force col-xl-3 → col-xl-4 width (33.33%) No HTML change needed */ .al-about-pg-area [class*="col-xl-3"] { flex: 0 0 33.333333% !important; max-width: 31% !important; } .al-about-pg-area [class*="col-lg-5"] { flex: 0 0 40.333333% !important; max-width: 35% !important; } /* Typography */ .al-about-pg-area .tp-portfolio-revealing-slide-heading { font-size: var(--heading-size); margin-bottom: var(--heading-mb); } .al-about-pg-area .al-about-pg-content p { font-size: var(--para-fs); margin-bottom: var(--para-mb); } /* Content */ .al-about-pg-area .al-about-pg-content-wrap { padding-left: var(--content-pl); padding-left:var( --content-pr); } /* Images */ .al-about-pg-area .al-about-pg-thumb img { width: var(--img1-w); height: 500px !important; display: block; } .al-about-pg-area .al-about-pg-thumb-2 img { width: var(--img2-w); height: 250px; display: block; margin-top: 90px; } /* Right image — centered */ .al-about-pg-area .al-about-pg-thumb-2 { padding-top: var(--thumb2-pt); margin-left: var(--thumb2-ml); text-align: center; } /* Rings */ .al-about-pg-area .tp-about-ai-ring { right: var(--ring-large-r); width: var(--ring-large-w); } .al-about-pg-area .tp-about-ai-ring-small { bottom: var(--ring-small-b) !important; left: var(--ring-small-l) !important; width: var(--ring-small-w); max-height: 100px; /* height auto rakho */ max-width: 10px; /* hard limit — kabhi bada nahi hoga */ object-fit: contain; } /* Contact Us button — text perfectly centered */ .al-about-pg-area .tp-header-btn { display: flex; justify-content: center; align-items: center; } .al-about-pg-area .tp-header-btn a { text-align: center; display: inline-block; } } /* ============================================================= */ /* ========= RESPONSIVE: 1536px × 864 and smaller ============ */ /* ============================================================= */ @media (max-width: 1536px) { .al-about-pg-area { /* Layout */ --container-padding: 0 30px; --content-pl: 40px; --content-pr: 40px; --heading-size: 78px; --heading-mb: 44px; --para-fs: 20px; --para-mb: 46px; --col-gap: 0px; /* Images — now safe */ --img1-w: 420px; --img2-w: 200px; /* fits in 400px column */ /* Rings — balanced */ --ring-large-r: -250px; --ring-large-w: 32%; --ring-small-b: 100px; --ring-small-l: -120px; --ring-small-w: 10px; /* ~110px */ /* Right image */ --thumb2-ml: 70px; } /* Container */ .al-about-pg-area .container-1320 { padding: var(--container-padding); } /* Row gap */ .al-about-pg-area .row { gap: var(--col-gap); } /* KEY FIX: Force col-xl-3 → col-xl-4 width (33.33%) No HTML change needed */ .al-about-pg-area [class*="col-xl-3"] { flex: 0 0 33.333333% !important; max-width: 31% !important; } .al-about-pg-area [class*="col-lg-5"] { flex: 0 0 40.333333% !important; max-width: 35% !important; } /* Typography */ .al-about-pg-area .tp-portfolio-revealing-slide-heading { font-size: var(--heading-size); margin-bottom: var(--heading-mb); } .al-about-pg-area .al-about-pg-content p { font-size: var(--para-fs); margin-bottom: var(--para-mb); } /* Content */ .al-about-pg-area .al-about-pg-content-wrap { padding-left: var(--content-pl); padding-left:var( --content-pr); } /* Images */ .al-about-pg-area .al-about-pg-thumb img { width: var(--img1-w); height: 500px !important; display: block; } .al-about-pg-area .al-about-pg-thumb-2 img { width: var(--img2-w); height: 250px; display: block; margin-top: 90px; } /* Right image — centered */ .al-about-pg-area .al-about-pg-thumb-2 { padding-top: var(--thumb2-pt); margin-left: var(--thumb2-ml); text-align: center; } /* Rings */ .al-about-pg-area .tp-about-ai-ring { right: var(--ring-large-r); width: var(--ring-large-w); } .al-about-pg-area .tp-about-ai-ring-small { bottom: var(--ring-small-b) !important; left: var(--ring-small-l) !important; width: var(--ring-small-w); max-height: 100px; /* height auto rakho */ max-width: 10px; /* hard limit — kabhi bada nahi hoga */ object-fit: contain; } /* Contact Us button — text perfectly centered */ .al-about-pg-area .tp-header-btn { display: flex; justify-content: center; align-items: center; } .al-about-pg-area .tp-header-btn a { text-align: center; display: inline-block; } } /* ============================================================= */ /* ========= RESPONSIVE: 1400px × 900 and smaller ============ */ /* ============================================================= */ /* ============================================================= */ /* ========= RESPONSIVE: 1400px × 900 and smaller ============ */ /* ============================================================= */ @media (max-width: 1400px) { .al-about-pg-area { --container-padding: 0 25px; --content-pl: 32px; --content-pr: 32px; --heading-size: 72px; --heading-mb: 40px; --para-fs: 18.8px; --para-mb: 42px; --col-gap: 0px; --img1-w: 395px; --img2-w: 188px; --ring-large-r: -235px; --ring-large-w: 32%; --ring-small-b: 92px; --ring-small-l: -108px; --ring-small-w: 9px; --thumb2-ml: 62px; } .al-about-pg-area .container-1320 { padding: var(--container-padding); } .al-about-pg-area .row { gap: var(--col-gap);margin-left: 70px !important; } /* COLUMN WIDTHS — SABHI KAM KIYE (CSS-only) */ .al-about-pg-area [class*="col-xl-4"] { /* Left column */ flex: 0 0 28% !important; /* Was ~33.33% */ max-width: 28% !important; } .al-about-pg-area [class*="col-lg-5"] { /* Middle column */ flex: 0 0 36% !important; /* Was ~40.33% */ max-width: 36% !important; } .al-about-pg-area [class*="col-xl-3"] { /* Right column */ flex: 0 0 30% !important; /* Was 33.33% → forced */ max-width: 30% !important; } .al-about-pg-area .tp-portfolio-revealing-slide-heading { font-size: var(--heading-size); margin-bottom: var(--heading-mb); } .al-about-pg-area .al-about-pg-content p { font-size: var(--para-fs); margin-bottom: var(--para-mb); } .al-about-pg-area .al-about-pg-content-wrap { padding-left: var(--content-pl); padding-right: var(--content-pr); } .al-about-pg-area .al-about-pg-thumb img { width: var(--img1-w); height: 420px !important; display: block; } .al-about-pg-area .al-about-pg-thumb-2 img { width: var(--img2-w); height: 238px; display: block; margin-top: 82px; } .al-about-pg-area .al-about-pg-thumb-2 { margin-left: var(--thumb2-ml); text-align: center; } .al-about-pg-area .tp-about-ai-ring { right: var(--ring-large-r); width: var(--ring-large-w); } .al-about-pg-area .tp-about-ai-ring-small { bottom: var(--ring-small-b) !important; left: var(--ring-small-l) !important; width: var(--ring-small-w); max-height: 88px; max-width: 9px; object-fit: contain; } .al-about-pg-area .tp-header-btn { display: flex; justify-content: center; align-items: center; } .al-about-pg-area .tp-header-btn a { text-align: center; display: inline-block; } } /* ============================================================= */ /* ========= RESPONSIVE: 1366px × 768 and smaller ============ */ /* ============================================================= */ @media (max-width: 1366px) { .al-about-pg-area { --container-padding: 0 25px; --content-pl: 36px; --content-pr: 36px; --heading-size: 72px; --heading-mb: 41px; --para-fs: 17px; --para-mb: 43px; --col-gap: 0px; --img1-w: 400px; --img2-w: 170px; --ring-large-r: -235px; --ring-large-w: 32%; --ring-small-b: 95px; --ring-small-l: -110px; --ring-small-w: 9px; --thumb2-ml: 65px; } .al-about-pg-area .container-1320 { padding: var(--container-padding); } .al-about-pg-area .row { gap: var(--col-gap); } /* COLUMN WIDTHS — SABHI KAM KIYE (CSS-only) */ .al-about-pg-area [class*="col-xl-4"] { /* Left column */ flex: 0 0 29% !important; /* Was ~33.33% */ max-width:29% !important; } .al-about-pg-area [class*="col-lg-5"] { /* Middle column */ flex: 0 0 35% !important; /* Was ~40.33% */ max-width: 35% !important; } .al-about-pg-area [class*="col-xl-3"] { /* Right column */ flex: 0 0 29% !important; /* Was 33.33% → forced */ max-width: 29% !important; } .al-about-pg-area .tp-portfolio-revealing-slide-heading { font-size: var(--heading-size); margin-bottom: var(--heading-mb); } .al-about-pg-area .al-about-pg-content p { font-size: var(--para-fs); margin-bottom: var(--para-mb); } .al-about-pg-area .al-about-pg-content-wrap { padding-left: var(--content-pl); padding-right: var(--content-pr); } .al-about-pg-area .al-about-pg-thumb img { width: var(--img1-w); height: 350px !important; display: block; } .al-about-pg-area .al-about-pg-thumb-2 img { width: var(--img2-w); height: 190px; display: block; margin-top: 85px; } .al-about-pg-area .al-about-pg-thumb-2 { margin-left: var(--thumb2-ml); text-align: center; } /* LARGE RING — POSITION FIXED TO RIGHT + SPINNING WORKS */ .al-about-pg-area { --ring-large-r: -235px; /* Anchor to right edge */ --ring-large-w: 30%; /* Extend full width from right */ } .al-about-pg-area .tp-about-ai-ring { right: var(--ring-large-r) !important; left: auto !important; width: var(--ring-large-w) !important; /* DO NOT override animation or transform */ } .al-about-pg-area .tp-about-ai-ring-small { bottom: var(--ring-small-b) !important; left: var(--ring-small-l) !important; width: var(--ring-small-w); max-height: 90px; max-width: 9px; object-fit: contain; } .al-about-pg-area .tp-header-btn { display: flex; justify-content: center; align-items: center; width: 120px !important; } .al-about-pg-area .tp-header-btn a { text-align: center; display: inline-block; } } /* ============================================================= */ /* ========= RESPONSIVE: 1280px × 800 and smaller ============ */ /* ============================================================= */ @media (max-width: 1280px) { .al-about-pg-area { --container-padding: 0 22px; --content-pl: 34px; --content-pr: 34px; --heading-size: 68px; --heading-mb: 39px; --para-fs: 18.5px; --para-mb: 41px; --col-gap: 0px; --img1-w: 380px; --img2-w: 185px; --ring-large-r: -220px; --ring-large-w: 32%; --ring-small-b: 90px; --ring-small-l: -105px; --ring-small-w: 8.5px; --thumb2-ml: 60px; } .al-about-pg-area .container-1320 { padding: var(--container-padding); } .al-about-pg-area .row { gap: var(--col-gap); } .al-about-pg-area [class*="col-xl-3"] { flex: 0 0 33.333333% !important; max-width: 31% !important; } .al-about-pg-area [class*="col-lg-5"] { flex: 0 0 40.333333% !important; max-width: 35% !important; } .al-about-pg-area .tp-portfolio-revealing-slide-heading { font-size: var(--heading-size); margin-bottom: var(--heading-mb); } .al-about-pg-area .al-about-pg-content p { font-size: var(--para-fs); margin-bottom: var(--para-mb); } .al-about-pg-area .al-about-pg-content-wrap { padding-left: var(--content-pl); padding-right: var(--content-pr); } .al-about-pg-area .al-about-pg-thumb img { width: var(--img1-w); height: 460px !important; display: block; } .al-about-pg-area .al-about-pg-thumb-2 img { width: var(--img2-w); height: 235px; display: block; margin-top: 80px; } .al-about-pg-area .al-about-pg-thumb-2 { margin-left: var(--thumb2-ml); text-align: center; } .al-about-pg-area .tp-about-ai-ring { right: var(--ring-large-r); width: var(--ring-large-w); } .al-about-pg-area .tp-about-ai-ring-small { bottom: var(--ring-small-b) !important; left: var(--ring-small-l) !important; width: var(--ring-small-w); max-height: 85px; max-width: 8.5px; object-fit: contain; } .al-about-pg-area .tp-header-btn { display: flex; justify-content: center; align-items: center; } .al-about-pg-area .tp-header-btn a { text-align: center; display: inline-block; } } /* ============================================================= */ /* ========= RESPONSIVE: 1200px–1299px ====================== */ /* ============================================================= */ @media (min-width: 1200px) and (max-width: 1299px) { .al-about-pg-area { --container-padding: 0 20px; --content-pl: 32px; --content-pr: 32px; --heading-size: 66px; --heading-mb: 37px; --para-fs: 18px; --para-mb: 39px; --col-gap: 0px; --img1-w: 370px; --img2-w: 180px; --ring-large-r: -210px; --ring-large-w: 32%; --ring-small-b: 85px; --ring-small-l: -100px; --ring-small-w: 8px; --thumb2-ml: 55px; } .al-about-pg-area .container-1320 { padding: var(--container-padding); } .al-about-pg-area .row { gap: var(--col-gap); } .al-about-pg-area [class*="col-xl-3"] { flex: 0 0 33.333333% !important; max-width: 31% !important; } .al-about-pg-area [class*="col-lg-5"] { flex: 0 0 40.333333% !important; max-width: 35% !important; } .al-about-pg-area .tp-portfolio-revealing-slide-heading { font-size: var(--heading-size); margin-bottom: var(--heading-mb); } .al-about-pg-area .al-about-pg-content p { font-size: var(--para-fs); margin-bottom: var(--para-mb); } .al-about-pg-area .al-about-pg-content-wrap { padding-left: var(--content-pl); padding-right: var(--content-pr); } .al-about-pg-area .al-about-pg-thumb img { width: var(--img1-w); height: 450px !important; display: block; } .al-about-pg-area .al-about-pg-thumb-2 img { width: var(--img2-w); height: 230px; display: block; margin-top: 75px; } .al-about-pg-area .al-about-pg-thumb-2 { margin-left: var(--thumb2-ml); text-align: center; } .al-about-pg-area .tp-about-ai-ring { right: var(--ring-large-r); width: var(--ring-large-w); } .al-about-pg-area .tp-about-ai-ring-small { bottom: var(--ring-small-b) !important; left: var(--ring-small-l) !important; width: var(--ring-small-w); max-height: 80px; max-width: 8px; object-fit: contain; } .al-about-pg-area .tp-header-btn { display: flex; justify-content: center; align-items: center; } .al-about-pg-area .tp-header-btn a { text-align: center; display: inline-block; } } /* ============================================================= */ /* ========= RESPONSIVE: 1000px–1199px ====================== */ /* ============================================================= */ @media (min-width: 1000px) and (max-width: 1199px) { .al-about-pg-area { --container-padding: 0 18px; --content-pl: 30px; --content-pr: 30px; --heading-size: 62px; --heading-mb: 35px; --para-fs: 17.5px; --para-mb: 37px; --col-gap: 0px; --img1-w: 350px; --img2-w: 170px; --ring-large-r: -195px; --ring-large-w: 33%; --ring-small-b: 80px; --ring-small-l: -90px; --ring-small-w: 7.5px; --thumb2-ml: 50px; } .al-about-pg-area .container-1320 { padding: var(--container-padding); } .al-about-pg-area .row { gap: var(--col-gap); } .al-about-pg-area [class*="col-xl-3"] { flex: 0 0 33.333333% !important; max-width: 31% !important; } .al-about-pg-area [class*="col-lg-5"] { flex: 0 0 40.333333% !important; max-width: 35% !important; } .al-about-pg-area .tp-portfolio-revealing-slide-heading { font-size: var(--heading-size); margin-bottom: var(--heading-mb); } .al-about-pg-area .al-about-pg-content p { font-size: var(--para-fs); margin-bottom: var(--para-mb); } .al-about-pg-area .al-about-pg-content-wrap { padding-left: var(--content-pl); padding-right: var(--content-pr); } .al-about-pg-area .al-about-pg-thumb img { width: var(--img1-w); height: 430px !important; display: block; } .al-about-pg-area .al-about-pg-thumb-2 img { width: var(--img2-w); height: 220px; display: block; margin-top: 70px; } .al-about-pg-area .al-about-pg-thumb-2 { margin-left: var(--thumb2-ml); text-align: center; } .al-about-pg-area .tp-about-ai-ring { right: var(--ring-large-r); width: var(--ring-large-w); } .al-about-pg-area .tp-about-ai-ring-small { bottom: var(--ring-small-b) !important; left: var(--ring-small-l) !important; width: var(--ring-small-w); max-height: 75px; max-width: 7.5px; object-fit: contain; } .al-about-pg-area .tp-header-btn { display: flex; justify-content: center; align-items: center; } .al-about-pg-area .tp-header-btn a { text-align: center; display: inline-block; } } /* ============================================================= */ /* ========= TABLET: 768px – 1024px (iPad Mini & Standard) ===== */ /* ========= LAYOUT: 1st + 3rd side-by-side | 2nd below 3rd ===== */ /* ============================================================= */ @media (min-width: 768px) and (max-width: 1024px) { .al-about-pg-area { --container-padding: 0 20px; --content-pl: 0; --content-pr: 0; --heading-size: 50px; --heading-mb: 30px; --para-fs: 20px; --para-mb: 35px; --img1-w: 48%; --img2-h: 320px; /* 3rd image chhota */ --img2-w: 350px; --ring-large-r: 60px; --ring-large-w: 38%; --ring-small-b: 40px; --ring-small-l: 30px; --ring-small-w: 55px; } .al-about-pg-area .container-1320 { padding: var(--container-padding); margin-left: -30px; } /* MAIN ROW — column for text (2nd) */ .al-about-pg-area .row { display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; } /* 1st column — left image */ .al-about-pg-area [class*="col-xl-4"] { flex: 0 0 var(--img1-w) !important; max-width: var(--img1-w) !important; order: 1 !important; margin-left: -50px !important } /* 3rd column — right image (chhota) */ .al-about-pg-area [class*="col-xl-3"] { flex: 0 0 var(--img2-w) !important; max-width: var(--img2-w) !important; order: 2 !important; } /* 2nd column — text paragraph (neeche) */ .al-about-pg-area [class*="col-lg-5"] { flex: 0 0 100% !important; max-width: 100% !important; order: 3 !important; text-align: center !important; } /* Heading */ .al-about-pg-area .tp-portfolio-revealing-slide-heading { font-size: var(--heading-size); margin-bottom: var(--heading-mb); line-height: 1.2; margin-right:-90px !important; } .al-about-pg-area .al-about-pg-content p { font-size: var(--para-fs); margin-bottom: var(--para-mb); text-align: justify; } .al-about-pg-area .al-about-pg-content-wrap { padding: 0 30px; } /* Images */ .al-about-pg-area .al-about-pg-thumb img { width: 100%; height: auto !important; max-height: 340px; object-fit: cover; border-radius: 16px; margin-left: 50px !important; animation: none !important; transform: none !important; transition: none !important; } .al-about-pg-area .al-about-pg-thumb-2 img { width:var(--img2-w ) !important; height: var(--img2-h) !important; object-fit: cover; border-radius: 16px; margin-top: -90px; margin-left:20px; animation: none !important; transform: none !important; transition: none !important; } /* Rings */ .al-about-pg-area .tp-about-ai-ring { right: var(--ring-large-r); width: var(--ring-large-w); } .al-about-pg-area .tp-about-ai-ring-small { bottom: var(--ring-small-b) !important; left: var(--ring-small-l) !important; width: var(--ring-small-w); max-height: 60px; max-width: 250px; object-fit: contain; display: none !important; } /* Button — center below text */ .al-about-pg-area .tp-header-btn { margin: 30px auto 0; display: block; width: 250px !important; } .al-about-pg-area .tp-header-btn a { display: flex; justify-content: center; align-items: center; width: 70%; height: 48px; font-size: 16px; font-weight: 600; border-radius: 17px; background: linear-gradient(90deg, #A70C7E, #2545BC); color: white; text-decoration: none; } } /* ============================================================= */ /* ========= TABLET: 1024px – 1199px (iPad Pro Portrait) ======== */ /* ========= LAYOUT: 1st + 3rd side-by-side | 2nd below 3rd ===== */ /* ============================================================= */ @media (min-width: 1024px) and (max-width: 1199px) { .al-about-pg-area { --container-padding: 0 25px; --content-pl: 0; --content-pr: 0; --heading-size: 58px; --heading-mb: 32px; --para-fs: 22px; --para-mb: 38px; --img1-w: 48%; --img2-w: 380px; --img2-h: 340px; --ring-large-r: -110px; --ring-large-w: 30%; --ring-small-b: 45px; --ring-small-l: 35px; --ring-small-w: 60px; } .al-about-pg-area .container-1320 { padding: var(--container-padding); margin-left: -35px; } .al-about-pg-area .row { display: flex; flex-wrap: wrap; gap: 25px; justify-content: center; } .al-about-pg-area [class*="col-xl-4"] { flex: 0 0 var(--img1-w) !important; max-width: var(--img1-w) !important; order: 1 !important; margin-left: -55px !important; } .al-about-pg-area [class*="col-xl-3"] { flex: 0 0 var(--img2-w) !important; max-width: var(--img2-w) !important; order: 2 !important; } .al-about-pg-area [class*="col-lg-5"] { flex: 0 0 100% !important; max-width: 100% !important; order: 3 !important; text-align: center !important; } .al-about-pg-area .tp-portfolio-revealing-slide-heading { font-size: var(--heading-size); margin-bottom: var(--heading-mb); line-height: 1.2; margin-right: -100px !important; } .al-about-pg-area .al-about-pg-content p { font-size: var(--para-fs); margin-bottom: var(--para-mb); text-align: justify; } .al-about-pg-area .al-about-pg-content-wrap { padding: 0 35px; } .al-about-pg-area .al-about-pg-thumb img { width: 100%; height: auto !important; max-height: 360px; object-fit: cover; border-radius: 18px; margin-left: 55px !important; animation: none !important; transform: none !important; transition: none !important; } .al-about-pg-area .al-about-pg-thumb-2 img { width: var(--img2-w) !important; height: var(--img2-h) !important; object-fit: cover; border-radius: 18px; margin-top: -100px; margin-left: 25px; animation: none !important; transform: none !important; transition: none !important; } .al-about-pg-area .tp-about-ai-ring { right: var(--ring-large-r); width: var(--ring-large-w); } .al-about-pg-area .tp-about-ai-ring-small { bottom: var(--ring-small-b) !important; left: var(--ring-small-l) !important; width: var(--ring-small-w); max-height: 65px; max-width: 250px; object-fit: contain; display: none !important; } .al-about-pg-area .tp-header-btn { margin: 35px auto 0; display: block; width: 260px !important; } .al-about-pg-area .tp-header-btn a { display: flex; justify-content: center; align-items: center; width: 70%; height: 50px; font-size: 17px; font-weight: 600; border-radius: 18px; background: linear-gradient(90deg, #A70C7E, #2545BC); color: white; text-decoration: none; } } /* ============================================================= */ /* ========= TABLET: 820px – 1023px (iPad Air Portrait) ======== */ /* ========= LAYOUT: 1st + 3rd side-by-side | 2nd below 3rd ===== */ /* ============================================================= */ @media (min-width: 820px) and (max-width: 1023px) { .al-about-pg-area { --container-padding: 0 18px; --content-pl: 0; --content-pr: 0; --heading-size: 52px; --heading-mb: 31px; --para-fs: 19px; --para-mb: 36px; --img1-w: 47%; --img2-w: 360px; --img2-h: 330px; --ring-large-r: 1px; --ring-large-w: 37%; --ring-small-b: 42px; --ring-small-l: 32px; --ring-small-w: 57px; } .al-about-pg-area .container-1320 { padding: var(--container-padding); margin-left: -12px; } .al-about-pg-area .row { display: flex; flex-wrap: wrap; gap: 22px; justify-content: center; } .al-about-pg-area [class*="col-xl-4"] { flex: 0 0 var(--img1-w) !important; max-width: var(--img1-w) !important; order: 1 !important; margin-left: -52px !important; } .al-about-pg-area [class*="col-xl-3"] { flex: 0 0 var(--img2-w) !important; max-width: var(--img2-w) !important; order: 2 !important; } .al-about-pg-area [class*="col-lg-5"] { flex: 0 0 100% !important; max-width: 100% !important; order: 3 !important; text-align: center !important; } .al-about-pg-area .tp-portfolio-revealing-slide-heading { font-size: var(--heading-size); margin-bottom: var(--heading-mb); line-height: 1.2; margin-right: -95px !important; } .al-about-pg-area .al-about-pg-content p { font-size: var(--para-fs); margin-bottom: var(--para-mb); text-align: justify; } .al-about-pg-area .al-about-pg-content-wrap { padding: 0 32px; } .al-about-pg-area .al-about-pg-thumb img { width: 100%; height: auto !important; max-height: 350px; object-fit: cover; border-radius: 17px; margin-left: 52px !important; animation: none !important; transform: none !important; transition: none !important; } .al-about-pg-area .al-about-pg-thumb-2 img { width: var(--img2-w) !important; height: var(--img2-h) !important; object-fit: cover; border-radius: 17px; margin-top: -95px; margin-left: 22px; animation: none !important; transform: none !important; transition: none !important; } .al-about-pg-area .tp-about-ai-ring { right: var(--ring-large-r); width: var(--ring-large-w); display: none !important; } .al-about-pg-area .tp-about-ai-ring-small { bottom: var(--ring-small-b) !important; left: var(--ring-small-l) !important; width: var(--ring-small-w); max-height: 62px; max-width: 250px; object-fit: contain; display: none !important; } .al-about-pg-area .tp-header-btn { margin: 32px auto 0; display: block; width: 255px !important; } .al-about-pg-area .tp-header-btn a { display: flex; justify-content: center; align-items: center; width: 70%; height: 49px; font-size: 16px; font-weight: 600; border-radius: 17px; background: linear-gradient(90deg, #A70C7E, #2545BC); color: white; text-decoration: none; } } /* ============================================================= */ /* ========= TABLET: 768px – 819px (iPad Mini Portrait) ======== */ /* ========= LAYOUT: 1st + 3rd side-by-side | 2nd below 3rd ===== */ /* ============================================================= */ @media (min-width: 768px) and (max-width: 819px) { .al-about-pg-area { --container-padding: 0 16px; --content-pl: 0; --content-pr: 0; --heading-size: 48px; --heading-mb: 29px; --para-fs: 18px; --para-mb: 34px; --img1-w: 46%; --img2-w: 340px; --img2-h: 310px; --ring-large-r: 8px; --ring-large-w: 36%; --ring-small-b: 38px; --ring-small-l: 28px; --ring-small-w: 53px; } .al-about-pg-area .container-1320 { padding: var(--container-padding); margin-left: -28px; } .al-about-pg-area .row { display: flex; flex-wrap: wrap; gap: 18px; justify-content: center; } .al-about-pg-area [class*="col-xl-4"] { flex: 0 0 var(--img1-w) !important; max-width: var(--img1-w) !important; order: 1 !important; margin-left: -48px !important; } .al-about-pg-area [class*="col-xl-3"] { flex: 0 0 var(--img2-w) !important; max-width: var(--img2-w) !important; order: 2 !important; } .al-about-pg-area [class*="col-lg-5"] { flex: 0 0 100% !important; max-width: 100% !important; order: 3 !important; text-align: center !important; } .al-about-pg-area .tp-portfolio-revealing-slide-heading { font-size: var(--heading-size); margin-bottom: var(--heading-mb); line-height: 1.2; margin-right: -85px !important; } .al-about-pg-area .al-about-pg-content p { font-size: var(--para-fs); margin-bottom: var(--para-mb); text-align: justify; } .al-about-pg-area .al-about-pg-content-wrap { padding: 0 28px; } .al-about-pg-area .al-about-pg-thumb img { width: 100%; height: auto !important; max-height: 330px; object-fit: cover; border-radius: 16px; margin-left: 48px !important; animation: none !important; transform: none !important; transition: none !important; } .al-about-pg-area .al-about-pg-thumb-2 img { width: var(--img2-w) !important; height: var(--img2-h) !important; object-fit: cover; border-radius: 16px; margin-top: -85px; margin-left: 18px; animation: none !important; transform: none !important; transition: none !important; } .al-about-pg-area .tp-about-ai-ring { right: var(--ring-large-r); width: var(--ring-large-w); display: none !important; } .al-about-pg-area .tp-about-ai-ring-small { bottom: var(--ring-small-b) !important; left: var(--ring-small-l) !important; width: var(--ring-small-w); max-height: 58px; max-width: 250px; object-fit: contain; display: none !important; } .al-about-pg-area .tp-header-btn { margin: 28px auto 0; display: block; width: 245px !important; } .al-about-pg-area .tp-header-btn a { display: flex; justify-content: center; align-items: center; width: 70%; height: 46px; font-size: 15px; font-weight: 600; border-radius: 16px; background: linear-gradient(90deg, #A70C7E, #2545BC); color: white; text-decoration: none; } } /* ============================================================= */ /* ========= iPhone 14 Pro Max: 430px – 932px (Portrait) ======== */ /* ========= LAYOUT: Heading → Text → 1st + 3rd side-by-side ==== */ /* ============================================================= */ @media (min-width: 430px) and (max-width: 932px) and (orientation: portrait) { .al-about-pg-area { --container-padding: 0 18px; --heading-size: 42px; --heading-mb: 15px; --para-fs: 18px; --para-mb: 32px; --img1-w: 48%; --img2-w: 48%; --img2-h: 240px; --ring-large-r: -50px; --ring-large-w: 48%; --ring-small-b: 25px; --ring-small-l: 20px; --ring-small-w: 45px; } .al-about-pg-area .container-1320 { padding: var(--container-padding); } /* Row — wrap allowed */ .al-about-pg-area .row { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; } /* 2nd column (text) — heading ke niche, full width */ .al-about-pg-area [class*="col-lg-5"] { order: 1 !important; flex: 0 0 100% !important; max-width: 100% !important; text-align: center !important; } /* Increase width of 1st & 3rd columns */ .al-about-pg-area [class*="col-xl-4"] { order: 2 !important; flex: 0 0 40% !important; /* Was ~48% → now 50% */ max-width: 40% !important; margin-left: -30px !important; max-height: 90px !important; } .al-about-pg-area [class*="col-xl-3"] { order: 3 !important; flex: 0 0 40% !important; /* Was ~48% → now 50% */ max-width: 40% !important; } /* Heading & Text */ .al-about-pg-area .tp-portfolio-revealing-slide-heading { font-size: var(--heading-size); margin-bottom: var(--heading-mb); line-height: 1.2; } .al-about-pg-area .al-about-pg-content p { font-size: var(--para-fs); margin-bottom: var(--para-mb); text-align: justify; margin-left:-90px !important; } .al-about-pg-area .al-about-pg-content-wrap { padding: 0 20px; } /* Images container - flex wrapper */ .al-about-pg-area [class*="col-xl-4"], .al-about-pg-area [class*="col-xl-3"] { display: flex; justify-content: center; align-items: center; gap: 15px; width: 100%; padding: 0; margin: 0 auto; } /* Image containers - perfectly equal width */ /* Adjust width here if needed - currently set to 49% each */ .al-about-pg-area .al-about-pg-thumb, .al-about-pg-area .al-about-pg-thumb-2 { flex: 0 0 120%; width: 120%; max-width: 120%; margin: 0; padding: 0; margin-left: -27px; } /* Images - identical dimensions and styling */ .al-about-pg-area .al-about-pg-thumb img, .al-about-pg-area .al-about-pg-thumb-2 img { width: 100% !important; height: 260px !important; object-fit: cover; border-radius: 16px; display: block; margin: 0; padding: 0; animation: none !important; transform: none !important; transition: none !important; } .al-about-pg-area .al-about-pg-thumb-2 img {margin-top: -20px !important;} /* Rings */ .al-about-pg-area .tp-about-ai-ring { right: var(--ring-large-r); width: var(--ring-large-w); top: -25px; display: none !important; } .al-about-pg-area .tp-about-ai-ring-small { bottom: var(--ring-small-b) !important; left: var(--ring-small-l) !important; width: var(--ring-small-w); max-height: 55px; max-width: 55px; object-fit: contain; display: none !important; } /* Button — text ke niche center */ .al-about-pg-area .tp-header-btn { margin: 35px auto 0; display: block; width: 220px !important; } .al-about-pg-area .tp-header-btn a { display: flex; justify-content: center; align-items: center; width: 100%; height: 48px; font-size: 16px; font-weight: 600; border-radius: 24px; background: linear-gradient(90deg, #A70C7E, #2545BC); color: white; text-decoration: none; } } /* hoem page slider */ @media (max-width: 430px) { /* Adjust container height for 430px width screens (e.g., iPhone 14 Pro Max, etc.) */ .coverflow-slider-wrap { height: 50vh; /* Reduce height proportionally */ } /* Reduce image container height */ .coverflow-slider-item { height: 320px; /* Scaled down from 500px for better fit */ } /* Adjust text content positioning and padding */ .tp-portfolio-wd-content { bottom: 10px; padding: 8px 15px; } /* Scale down heading font size */ .tp-ff-heading { font-size: 32px !important; /* Base size for small screens */ } /* Optional: Fine-tune Swiper wrapper padding */ .tp-pd-2-slider-wrapper .swiper-wrapper, .al-footer-pg-slide-active .swiper-wrapper { padding-bottom: 25px; } /* Ensure images scale properly within container */ .coverflow-slider-item img { width: 100%; height: 100%; object-fit: cover; } } /* Target exact or near 430x932 viewport (portrait mobile) */ @media (max-width: 430px) and (min-height: 900px), (max-width: 430px) and (max-height: 950px) { .coverflow-slider-wrap { height: 55vh; /* Slightly more height for taller screens like 932px */ } .coverflow-slider-item { height: 340px; } .tp-ff-heading { font-size: 36px !important; line-height: 1.1; } } .mobile-text { display: none; } /* Desktop Only — All Popular Resolutions Covered 1024×768 → 1366×768 → 1440×900 → 1536×864 → 1600×900 → 1680×1050 → 1920×1080 → 1280×800/1024 */ @media (min-width: 1024px) and (max-width: 1920px) { /* Container ko thoda tight kar diya larger screens pe bhi overflow na ho */ .event-hero-container { max-width: 1380px; /* 1500 se kam kiya safe side */ padding: 0 20px; gap: 50px; /* breathing room */ } /* Left content — title, text, button */ .event-hero-content { flex: 1; max-width: 780px; /* pehle 820px tha, ab safe */ margin-top: -90px !important; /* thoda kam kiya */ } .event-hero-title { font-size: clamp(54px, 5.5vw, 76px); /* auto scale with screen */ margin-bottom: 16px; line-height: 1.1; } .event-hero-text { font-size: clamp(20px, 2.2vw, 26px); margin-bottom: 24px; } /* Gallery Area — Cards ka parent */ .event-hero-gallery { flex: 0 0 420px; /* 380 se thoda bada for better look */ height: 380px; /* 320 → 380 (zyada premium feel) */ justify-content: center; } /* Base Card Styles — Scaled up for larger screens */ .event-hero-card { width: 290px; /* 260 → 290 */ --parallax-ty: 0px; transform: translateY(calc(32px + var(--parallax-ty))) scale(.96) rotate(-2.5deg); transition: all 650ms cubic-bezier(0.22, 1, 0.36, 1); } .event-hero-card--one { right: 10px; z-index: 6; width: 300px; } .event-hero-card--two { right: 68px; z-index: 5; width: 260px; } .event-hero-card--three { right: 128px; z-index: 4; width: 230px; } /* Visible State — Jab card active ho */ .event-hero-card.visible { transform: translateY(var(--parallax-ty)) scale(1) rotate(0deg); opacity: 1; } /* Image shadow & border radius */ .event-hero-card img { border-radius: 10px; filter: drop-shadow(0 22px 50px rgba(0,0,0,0.7)); } /* Button thoda bada aur bold */ .event-hero-btn { padding: 16px 32px; border-radius: 50px; font-size: 17px; font-weight: 700; } } /* Extra fine-tuning for very common 1366×768 & 1440×900 */ @media (min-width: 1300px) and (max-width: 1500px) { .event-hero-gallery { flex: 0 0 400px; height: 360px; } .event-hero-card--one { width: 280px; right: 8px; } .event-hero-card--two { width: 240px; right: 62px; } .event-hero-card--three { width: 215px; right: 118px; } } /* 1600×900, 1680×1050, 1920×1080 — Full premium mode */ @media (min-width: 1600px) { .event-hero-gallery { flex: 0 0 460px; height: 420px; } .event-hero-card--one { width: 320px; right: 15px; } .event-hero-card--two { width: 280px; right: 78px; } .event-hero-card--three { width: 250px; right: 142px; } } /* ONLY for 430x932 — Hide Images + Reduce Section Height */ @media only screen and (width: 430px) and (height: 932px) { /* 1. Hide all images */ .event-hero-gallery, .event-hero-card { display: none !important; } /* 2. Reduce full section height */ .event-hero-section { min-height: auto !important; max-height: 600px !important; /* Height kam */ padding-top: 150px !important; /* Top se kam space */ padding-bottom: 20px !important; /* Bottom se kam space */ } /* 3. Font Sizes – Tum khud adjust kar sakte ho */ .tp-portfolio-revealing-slide-heading { font-size: 40px !important; /* ← Change this */ line-height: 1.2 !important; text-align: center !important; } .event-hero-text .mobile-text { display: inline; font-size: 17px !important; /* ← Change this */ line-height: 1.5 !important; } .event-hero-text .desktop-text { display: none; } .tp-btn-ai { font-size: 14px !important; /* ← Change this */ padding: 11px 22px !important; } } /* Hide mobile version by default (for desktop) */ .mobile-crew-section { display: none; } /* 📱 MOBILE VIEW — show mobile layout, hide desktop layout */ @media (max-width: 767px) { /* Hide all old desktop Join the Crew content */ .tp-service-vp-wrap, .tp-service-vp-title-wrap, .tp-service-vp-para, .tp-service-vp-item, .tp-rounded-btn-wrap, .tp-cta-it-scale, .tp-cta-it-shape-2, .tp-reveal-bg, .tp-service-vp-btn { display: none !important; } /* Show mobile layout */ .mobile-crew-section { display: block !important; padding: 60px 20px 80px; text-align: center; font-family: var(--tp-ff-heading, sans-serif); margin-top: -120px !important; } /* === ROW 1: Title + Paragraph === */ .mobile-crew-header { margin-left: -20px !important; margin-top: -70px !important; } .mobile-crew-header .h1{ font-size: 300px !important; ; } .mobile-crew-title { font-weight: 800; line-height: 1.1; margin: 0 0 16px; } .mobile-crew-para { font-size: 18px !important; line-height: 1.6; color: rgba(17,17,18,0.8); max-width: 90%; margin: 0 auto; padding-bottom: 50px !important; } /* === ROW 2: 4 Items (2×2 Grid) === */ .mobile-crew-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px 20px; justify-items: center; margin-bottom: 50px; } .mobile-crew-item { display: flex; flex-direction: column; align-items: center; } .mobile-crew-img { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; margin-bottom: 12px; box-shadow: 0 8px 25px rgba(0,0,0,0.08); } .mobile-crew-item-title { font-size: 18px; font-weight: 600; color: #111112; line-height: 1.4; } /* === Explore More Link === */ .mobile-explore-link { display: inline-block; margin-top: 20px; font-size: 16px; font-weight: 600; color: #111; text-decoration: underline; text-underline-offset: 4px; } .mobile-explore-link:hover { color: #000; } .tp_text_invertt > 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_invertt.invertt-black > div { background-image: linear-gradient(to right, #030303 50%, #525252 50%); } .tp_text_invertt.invertt-black-2 > div { background-image: linear-gradient(to right, #030303 50%, #aaa 50%); } .tp_text_invertt.invertt-primary > div { background-image: linear-gradient(to right, #c4ee18 50%, #fff 50%); } .tp_text_invertt.invertt-white > div { background-image: linear-gradient(to right, #f3f1f2 50%, #AFB7B6 50%); } .tp_text_invertt.invertt-black-3 > div { background-image: linear-gradient(to right, #10302a 50%, #a0a8a6 50%); } .tp_text_invertt.invertt-black-5 > div { background-image: linear-gradient(to right, #111112 50%, #707071 50%); } .tp_text_invertt.invertt-black-6 > div { background-image: linear-gradient(to right, #111112 50%, #dadada 50%); } .aleric-dark .tp_text_invertt.invertt-black-6 > div { background-image: linear-gradient(to right, #525252 50%,#030303 50%); } .mobile-explore-link { position: relative; display: inline-block; padding: 14px 32px; border-radius: 100px; width: 220px; text-align: center; font-weight: 600; font-size: 16px; color: #000; background: #fff; z-index: 1; text-decoration: none; overflow: hidden; transition: all 0.4s ease; } .mobile-explore-link::after { content: ""; position: absolute; top: -2px; bottom: -2px; left: -2px; right: -2px; z-index: -2; border-radius: 101px; background-image: linear-gradient(90deg, #A70C7E 0%, #A70C7E 50%, #021352 100%); background-size: 150% 150%; animation: sliderTitle3 2s ease-in-out 1s infinite alternate; } .mobile-explore-link::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #fff; z-index: -1; border-radius: 100px; transition: all 0.4s ease; } .mobile-explore-link:hover { background: transparent; color: #fff; } .mobile-explore-link:hover::before { background: transparent; } /* same animation as your blog button */ @keyframes sliderTitle3 { 0% { background-position: 0% 50%; } 100% { background-position: 100% 50%; } } } /* why utsoraa */ /* Default: hide mobile layout on desktop */ .mobile-only-layout { display: none !important; } /* iPhone 14 Pro Max (430x932, DPR 3) only */ @media only screen and (min-device-width: 430px) and (max-device-width: 430px) and (min-device-height: 932px) and (max-device-height: 932px) and (-webkit-min-device-pixel-ratio: 3) { .utsoraa-why-utsoraa .col-lg-5, .utsoraa-why-utsoraa .col-lg-7, .utsoraa-why-utsoraa .tp-portfolio-cst-list-wrap, .utsoraa-why-utsoraa .tp-portfolio-cst-img-wrapper { display: none !important; } .mobile-only-layout { display: block !important; position: relative; margin-top: -150px !important; margin-left: 0 !important; width: 100% !important; z-index: 9999 !important; background: white !important; padding: 30px 15px !important; } /* Mobile layout styling */ .mobile-only-layout .mobile-heading { font-size: 40px !important; text-align: center !important; padding-left: 10px !important; padding-right: 10px !important; } .mobile-only-layout .mobile-para { font-size: 20x !important; margin-bottom: 30px !important; } .mobile-only-layout .mobile-divider { margin: 25px 0 !important; border-color:black !important; } .mobile-only-layout .mobile-slide-item { margin: 20px 0 !important; } .mobile-only-layout .item-title { font-size: 24px !important; margin-bottom: 10px !important; padding-top: 30 !important; } .mobile-only-layout .item-desc { font-size: 18px !important; color: #666 !important; } .mobile-only-layout .mobile-pagination { margin-top: 30px !important; } /* Add this to your existing CSS */ .mobile-slider-container { position: relative; height: 120px; overflow: hidden; margin-top: -40px !important; } .mobile-slide-item { position: absolute; top: 0; left: 0; width: 100%; opacity: 0; transform: translateX(100%); transition: all 0.5s ease-in-out; } .mobile-slide-item.active { opacity: 1; transform: translateX(0); } .mobile-slide-item.prev { transform: translateX(-100%); margin-top: -90px !important; } .mobile-pagination .dot { cursor: pointer; display: inline-block; width: 8px; height: 8px; margin: 0 5px; background-color: #ccc; border-radius: 50%; transition: background-color 0.3s ease; } .mobile-pagination .dot.active { background-color: #021352; } } /* home page start marquee */ /* Mobile styles for 430x932 only */ @media (max-width: 430px) and (max-height: 932px) { .al-text-slider-seo-area { padding: 30px 0 25px; } .al-text-slider-seo-title { font-size: 32px; margin-right: 25px; line-height: 1.1; } .swiper-container { padding: 0 15px; } .al-text-slider-seo-active .swiper-slide { width: auto !important; } } /* new area home page slider */ /* Mobile-specific styles for 430px width and 932px height */ @media (max-width: 430px) and (max-height: 932px) { /* Shift service list to the right */ .tp-service-ai-content { padding-left: 20px !important; margin-left: -16px; } .tp-service-ai-item { transform: translateX(15px); } /* Center the heading only */ .col-lg-8 { display: flex; justify-content: center; text-align: center; width: 100%; margin-top: -80px !important; } .tp-service-ai-title-wrap { width: 100%; text-align: center; } .tp-section-ai-title { text-align: center !important; margin: 0 auto; } /* Keep the rest of your existing mobile styles */ .tp-service-ai-box-wrp .row { display: none; } .tp-service-slider-container { display: block; width: 100%; margin: 0 auto; position: relative; } .tp-service-slider { display: flex; transition: transform 0.5s ease; width: 100%; } .tp-service-slide { flex: 0 0 100%; max-width: 100%; padding: 0 15px; box-sizing: border-box; position: relative; } .tp-service-slide .tp-service-ai-box { width: 100%; margin: 0 auto; } .tp-service-slide .tp-service-ai-thumb img { width: 100%; height: 250px; object-fit: cover; border-radius: 12px; display: block; } .tp-service-slide .tp-service-ai-content-2 { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; opacity: 1; z-index: 3; width: 100%; } .tp-service-slide .tp-service-ai-content-2 a { color: white; text-decoration: none; font-size: 24px; font-weight: 700; text-shadow: 2px 2px 4px rgba(0,0,0,0.5); } .tp-service-slide .tp-service-ai-thumb::after { opacity: 1; background: linear-gradient(180deg, rgba(17, 17, 18, 0.3) 0%, #111112 100%); } /* Slider navigation styles - POSITIONED ON IMAGE */ .tp-service-slider-nav { position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%); display: flex; justify-content: space-between; padding: 0 25px; z-index: 4; pointer-events: none; } .tp-service-slider-btn { background-color: rgba(17, 17, 18, 0.7); color: white; border: none; border-radius: 50%; width: 45px; height: 45px; font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; pointer-events: all; box-shadow: 0 2px 10px rgba(0,0,0,0.3); } .tp-service-slider-btn:hover { background-color: rgba(17, 17, 18, 0.9); transform: scale(1.1); } .tp-service-slider-btn:disabled { background-color: rgba(204, 204, 204, 0.5); cursor: not-allowed; transform: none; } .tp-service-slider-dots { display: flex; justify-content: center; gap: 10px; margin-top: 15px; position: relative; z-index: 2; } .tp-service-slider-dot { width: 12px; height: 12px; border-radius: 50%; background-color: #ddd; cursor: pointer; transition: all 0.3s ease; } .tp-service-slider-dot.active { background-color: #021352; transform: scale(1.2); } .fs-72 { font-size: 40px; } .fs-28 { font-size: 22px; } .fs-24 { font-size: 18px; } .fs-18 { font-size: 16px; } .mr-30 { margin-right: 15px; } .tp-service-ai-title { font-size: 28px !important; } .tp-service-ai-count { font-size: 16px !important; } .tp-service-area { padding-top: 80px; padding-bottom: 100px; } .pt-150 { padding-top: 80px; } .pb-170 { padding-bottom: 100px; } .pt-70 { padding-top: 40px; } .mb-80 { margin-bottom: 40px; } .tp-btn-ai { padding: 12px 24px; font-size: 14px; margin-bottom: 60px !important; margin-left: 0 !important; } .tp-service-ai-ring { display: none; } /* Service list adjustments */ .tp-service-ai-content { padding-top: 30px; } .tp-service-ai-item-main { margin-bottom: 25px; } } /* Hide slider on desktop */ @media (min-width: 431px) { .tp-service-slider-container { display: none !important; } .tp-service-ai-box-wrp .row { display: flex !important; } } @media only screen and (width: 430px) and (height: 932px) { .tp-text-ai-slider-wrap { transform: scale(0.50); transform-origin: top center; margin-top: -50px !important; } .tp-text-ai-slider-content { padding: 44px 0; /* 52px * 0.85 */ } } /* home page new section below marqee */ @media only screen and (max-width: 932px) and (max-height: 932px) and (min-width: 430px) and (min-height: 430px) { .tp-portfolio-area .row { display: flex; flex-direction: column; } .tp-portfolio-area .col-lg-7 { order: 1; width: 100%; } .tp-portfolio-area .col-xl-5, .tp-portfolio-area .col-lg-5 { order: 2; width: 100%; margin-top:-50px ! } .tp-portfolio-ai-title.ml-80 { margin-left: 0 !important; text-align: center; } .tp-about-2-thumb.text-lg-end { text-align: center !important; } .tp-about-2-thumb img { max-width: 85% !important; height: auto !important; transform: scale(0.7) translateX(50px); /* Shift right using transform */ transform-origin: center; margin-right: 0 !important; margin-top: -60px !important; } .tp-section-ai-title { font-size: 40px !important; text-align: center; line-height: 1.2; } .tp-about-ai-para { font-size: 18px !important; text-align: center; padding-top: 20px !important; } .tp-portfolio-area .tp-header-btn { text-align: center; display: block !important; margin-top: -30px !important; } } /* ````````````````````````````````````````Join the crew Page responsive sart here```````````````````````````````````````````````````` */ /* Media Query for 430x932 resolution only */ /* Media Query for 430px resolution only */ @media only screen and (max-width: 430px) { /* Join the Crew Section */ .tp-portfolio-colum-spacing { padding-top: 80px; padding-bottom: 40px; } .tp-hero-vp-title-pages { font-size: 130px !important; line-height: 70% !important; letter-spacing: 0.5px !important; margin-left: -5px !important; text-align: center; } .tp-hero-vp-content { margin-bottom: 30px !important; } .container-1824.containers { padding: 0 15px; } /* Tab Navigation */ .tp-portfolio-inner-tab-wrap { position: relative; padding: 0 50px; display: flex; align-items: center; justify-content: center; } .tp-portfolio-inner-tab-wrap nav { width: 100%; display: flex; justify-content: center; } .tp-portfolio-inner-tab-wrap nav .nav-tabs { display: flex; gap: 10px; justify-content: center; width: 100%; max-width: 280px; /* Enough for 2 tabs */ overflow: hidden; } .tp-portfolio-inner-tab-wrap nav .nav-tabs .nav-link { font-size: 14px; padding: 10px 20px; margin: 0; border-radius: 25px; white-space: nowrap; flex: 1; min-width: 20px; text-align: center; display: none; /* Hidden by default, shown by JS */ } /* Show arrows */ .tab-arrow { display: flex !important; position: absolute; top: 50%; transform: translateY(-50%); background: white; border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 50%; width: 35px; height: 35px; align-items: center; justify-content: center; cursor: pointer; z-index: 10; box-shadow: 0 2px 8px rgba(0,0,0,0.15); transition: all 0.3s ease; } .tab-arrow:hover { background: #f5f5f5; transform: translateY(-50%) scale(1.05); } .tab-arrow-left { left: 5px; } .tab-arrow-right { right: 5px; } .tab-arrow.disabled { opacity: 0.3; pointer-events: none; cursor: not-allowed; } .tab-arrow svg { width: 16px; height: 16px; } } /* Hide arrows on desktop */ @media only screen and (min-width: 431px) { .tab-arrow { display: none !important; } .tp-portfolio-inner-tab-wrap nav .nav-tabs .nav-link { display: inline-block !important; } } /* join the cre images part responsive ness */ /* Your existing CSS */ .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-portfolio-grid-item .tp-portfolio-sa-thumb img { transition: all 0.6s ease; width: 385px !important; margin-left: 22px !important; } .tp-portfolio-grid-item:hover .tp-portfolio-sa-thumb img { transform: scale(1.1); } .utsoraa-why-utsoraa .tp-portfolio-cst-title { font-size: 32px; font-weight: 600; margin: 0 0 10px; color: #021352; font-family: var(--tp-ff-dm); } /* Mobile layout styles (only for 430x932) */ @media only screen and (max-width: 430px) and (max-height: 932px) and (min-height: 900px) { .tp-portfolio-grid-item .tp-portfolio-sa-thumb img { width: 100% !important; margin-left: -4px !important; } .row { display: flex; flex-wrap: wrap; margin: 0 -10px; /* Increased gap between columns */ } .col-xl-3 { flex: 0 0 50%; max-width: 50%; padding: 0 10px; /* Increased gap between columns */ margin-bottom: -18px !important; /* Increased gap between rows */ } .tp-portfolio-grid-item.mobile-hidden { display: none; } .tp-portfolio-cst-title, .fw-600.fs-28.tp-ff-dm.ml-20 { font-size: 18px !important; margin-left: 10px !important; } .explore-more-container { width: 100%; text-align: center; margin: 25px 0; /* Increased margin */ display: block !important; } /* Explore More Button Styling */ .explore-more-btn { padding: 14px 32px; border-radius: 100px; width: 220px; z-index: 1; transition: all 0.4s ease; position: relative; background: #fff; border: none; cursor: pointer; font-size: 16px; font-weight: 600; color: #021352; } .explore-more-btn::after { content: ""; position: absolute; top: -2px; bottom: -2px; left: -2px; right: -2px; z-index: -2; border-radius: 101px; background-image: linear-gradient(90deg, #A70C7E 0%, #A70C7E 50%, #021352 100%); background-size: 150% 150%; animation: sliderTitle3 2s ease-in-out 1s forwards infinite alternate; } .explore-more-btn::before { position: absolute; content: ""; top: 0; left: 0; width: 100%; height: 100%; background: #fff; z-index: -1; border-radius: 100px; transition: all 0.4s ease; } .explore-more-btn:hover { background-color: transparent; color: white; } .explore-more-btn:hover::before { background: transparent; } @keyframes sliderTitle3 { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .page-join .faq-form-wrapper { margin-top: -85px; /* smaller gap only on this page at <=768px */ } .page-join .tp-testimonial-cst-item { margin-top: -150px !important; /* smaller gap only on this page at <=768px */ } } /* Hide explore more button on desktop */ @media (min-width: 431px) { .explore-more-container { display: none !important; } } /* what we do page respomdive code here */ /* Base styles */ /* what we do page hero section */ @media only screen and (max-width: 430px) and (max-height: 932px) { .tp-hero-md-row-custom { display: flex; overflow: hidden; position: relative; /* height: 250px !important; margin-right: -20px !important; padding-bottom: 50px !important; */ } .tp-hero-area{ margin-top: -120px !important; } .tp-hero-md-title{ font-size: 40px !important; text-align: center !important; margin-left: -10px !important; } .tp-hero-md-col-custom { flex-shrink: 0; transition: all 0.5s ease-in-out; opacity: 0.7; transform: scale(0.9); height:180px !important; margin-top: -50px !; } .tp-hero-md-para { margin-bottom: -20px !important; /* Reduce paragraph bottom margin */ font-size: 20px !important; text-align: justify; padding-right: 30px; } .tp-hero-md-col-custom.active { opacity: 1; transform: scale(1); z-index: 2; } .tp-hero-md-panel-item img { width: 100%; height: 180px !important; object-fit: cover; display: block; } } /* what we do image slider section 2nd section */ /* Base styles */ /* Media Query for EXACTLY 430x932 Resolution */ @media only screen and (width: 430px) and (height: 932px) { .tp-portfolio-revealing-slide-headingg { font-size: 45px !important; } .tp-ff-heading { font-size: 25px !important; } .tp-portfolio-wd-category { margin-right: -50px !important; } .tp-portfolio-wd-category span { font-size: 15px !important; border-radius: 5px; } .tp-portfolio-wd-wrap { display: flex !important; overflow-x: auto !important; scroll-behavior: smooth !important; -webkit-overflow-scrolling: touch !important; scroll-snap-type: x mandatory !important; gap: 20px !important; padding-bottom: 20px !important; margin: 0 10px !important; flex-wrap: nowrap !important; } .tp-portfolio-wd-wrap::-webkit-scrollbar { display: none !important; } .tp-portfolio-wd-item { flex: 0 0 auto !important; width: 85% !important; scroll-snap-align: start !important; margin-bottom: 10px !important; } .tp-portfolio-wd-item img { height: 350px !important; } /* Navigation Arrows */ /* Navigation Arrows - MODIFIED */ .portfolio-horizontal-nav { display: flex !important; justify-content: space-between !important; position: absolute !important; top: 60% !important; /* CHANGED from 50% to 60% to move arrows down */ left: 0 !important; right: 0 !important; transform: translateY(-50%) !important; padding: 0 5px !important; z-index: 1000 !important; pointer-events: none !important; margin-bottom: -150px !important;} .portfolio-horizontal-arrow { display: flex !important; background: rgba(255, 255, 255, 0.95) !important; border: none !important; width: 44px !important; height: 44px !important; border-radius: 50% !important; align-items: center !important; justify-content: center !important; cursor: pointer !important; color: #000 !important; font-size: 22px !important; font-weight: bold !important; transition: all 0.3s ease !important; pointer-events: all !important; box-shadow: 0 2px 10px rgba(0,0,0,0.4) !important; visibility: visible !important; opacity: 1 !important; } .portfolio-horizontal-arrow:hover { background: white !important; transform: scale(1.1) !important; } /* Position arrows */ .prev-horizontal-arrow { margin-left: 5px !important; } .next-horizontal-arrow { margin-right: 5px !important; } /* Dot Pagination */ .portfolio-horizontal-pagination { display: flex !important; justify-content: center !important; gap: 12px !important; margin-top: 15px !important; margin-bottom: 20px !important; } .portfolio-horizontal-dot { display: block !important; width: 12px !important; height: 12px !important; border-radius: 50% !important; background: rgba(255, 255, 255, 0.4) !important; cursor: pointer !important; transition: all 0.3s ease !important; border: 2px solid transparent !important; } .portfolio-horizontal-dot.active { background: white !important; transform: scale(1.2) !important; box-shadow: 0 0 8px rgba(255,255,255,0.7) !important; } /* Make sure arrows are visible over images */ .tp-portfolio-area { position: relative !important; } } /* STRICT HIDE on ALL other resolutions */ @media not all and (width: 430px) and (height: 932px) { .portfolio-horizontal-nav, .portfolio-horizontal-arrow, .portfolio-horizontal-pagination, .portfolio-horizontal-dot { display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; } } /* what we do 3rd section responsive mobile */ /* Media Query for 430x932 resolution only */ @media (max-width: 430px) and (max-height: 932px) { /* Heading size adjustment */ .tp-portfolio-revealing-slide-heading { font-size: 40px !important; margin-bottom: 20px !important; } /* Contact Us Button */ .contact-btn-mobile { background: linear-gradient(90deg, #021352 0%, #A70C7E 50%, #021352 100%); background-size: 300% 300%; animation: tpGradientMove 10s ease infinite; color: #fff !important; padding: 10px 45px; border-radius: 25px; font-weight: 600; font-size: 16px; border: none; transition: all 0.3s ease; cursor: pointer; display: block; margin: 0 auto 30px auto; text-align: center; width: fit-content; } /* Grid layout - 2 columns */ #blogGrid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 10px !important; } /* Column adjustment */ .col-lg-4.col-md-6.mb-4 { width: 100% !important; flex: 0 0 50% !important; max-width: 50% !important; padding: 0 5px !important; padding-left: 17px !important; } /* Image card sizing for mobile - SMALLER */ .tp-blog-thumb { height:120px !important; width: 170px !important; border-radius: 10px !important; margin-bottom: 5px !important; } .tp-portfolio-cst-title{ font-size: 18px !important; } /* .tp-portfolio-revealing-slide-heading .span.break{ } */ .tp-blog-thumb { height: 140px !important; border-radius: 10px !important; margin-bottom: 5px !important; } /* Image size reduction */ .tp--hover-img img { height: 140px !important; object-fit: cover !important; } /* Blog item spacing */ .tp-blog-item { margin-bottom: 15px !important; } /* OVERRIDE ALL other responsive styles */ .tp-blog-thumb { height: 170px !important; max-height: 170px !important; min-height: 170px !important; } .tp--hover-img, .tp--hover-img img { height: 170px !important; max-height: 170px !important; min-height: 170px !important; } /* Explore More Button */ .explore-more-btn { grid-column: 1 / -1; text-align: center; margin: 15px auto; padding: 10px 25px; background: linear-gradient(45deg, #2b82f5, #3360f7); color: black; border: none; border-radius: 20px; font-weight: 600; font-size: 14px; cursor: pointer; transition: all 0.3s ease; display: block; } .explore-more-btn:hover { transform: translateY(-2px); } /* Hide pagination on mobile */ .pagination-wrapper { display: none !important; } /* Container padding reduction */ .container { padding-left: 10px !important; padding-right: 10px !important; } /* Row margin adjustment */ .row { margin-left: -5px !important; margin-right: -5px !important; } } @keyframes tpGradientMove { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } /* all mobile */ /* home page about us */ /* ============================================================= */ /* ========= EXACT VIEWPORT: 360×640 (Portrait) =============== */ /* ========= LAYOUT: Heading → Text → Img1 + Img3 side-by-side = */ /* ============================================================= */ @media (width: 360px) and (height: 640px) and (orientation: portrait) { .al-about-pg-area { --container-padding: 0 15px; --heading-fs: 32px; --heading-mb: 12px; --para-fs: 15px; --para-lh: 1.5; --para-mb: 24px; --img-h: 170px; --img2-h: 210px; --img-gap: 0px; --btn-h: 48px; --btn-w: 200px; --text-ml: -70px; --img1-w: 78%; --img1-ml: -32px; --img2-w: 78%; --img2-ml: -50px; --img2-mt: -40px; } .al-about-pg-area .container-1320 { padding: var(--container-padding); } .al-about-pg-area .row { display: flex; flex-wrap: wrap; gap: var(--img-gap); justify-content: center; margin: 0; width: 100%; } .al-about-pg-area [class*="col-lg-5"] { order: 1 !important; flex: 0 0 100% !important; max-width: 100% !important; padding: 0 !important; text-align: center; } .al-about-pg-area [class*="col-xl-4"], .al-about-pg-area [class*="col-xl-3"] { order: 2 !important; flex: 0 0 calc(50% - (var(--img-gap) / 2)) !important; max-width: calc(50% - (var(--img-gap) / 2)) !important; padding: 0 !important; margin: 0 !important; } .al-about-pg-area .tp-portfolio-revealing-slide-heading { font-size: var(--heading-fs); margin-bottom: var(--heading-mb); line-height: 1.2; width: 100%; } .al-about-pg-area .al-about-pg-content p { font-size: var(--para-fs); line-height: var(--para-lh); margin: 0 0 var(--para-mb); text-align: justify !important; word-wrap: break-word; overflow-wrap: break-word; hyphens: auto; width: 100%; max-width: 100%; margin-left: var(--text-ml) !important; } .al-about-pg-area .al-about-pg-thumb, .al-about-pg-area .al-about-pg-thumb-2 { width: var(--img1-w); height: var(--img-h); margin-left: var(--img1-ml) !important; padding: 0; overflow: hidden; border-radius: 16px; } .al-about-pg-area .al-about-pg-thumb-2 { height: var(--img2-h) !important; width: var(--img2-w) !important; margin-top: var(--img2-mt) !important; margin-left: var(--img2-ml) !important; } .al-about-pg-area .al-about-pg-thumb img, .al-about-pg-area .al-about-pg-thumb-2 img { width: 100% !important; height: 100% !important; object-fit: cover; border-radius: 16px; display: block; } .al-about-pg-area .tp-about-ai-ring, .al-about-pg-area .tp-about-ai-ring-small { display: none !important; } .al-about-pg-area .tp-header-btn { margin: 28px auto 0; display: block; width: var(--btn-w); min-height: var(--btn-h); } .al-about-pg-area .tp-header-btn a { display: flex; justify-content: center; align-items: center; width: 100%; height: var(--btn-h); font-size: 15px; font-weight: 600; border-radius: 24px; background: linear-gradient(90deg, #A70C7E, #2545BC); color: white; text-decoration: none; text-align: center; } } /* ============================================================= */ /* ========= EXACT VIEWPORT: 393×873 (Portrait) =============== */ /* ========= LAYOUT: Heading → Text → Img1 + Img3 side-by-side = */ /* ============================================================= */ /* ============================================================= */ /* ========= FIXED: 393×873 (Portrait) – CORRECTED LAYOUT ======= */ /* ========= Text column full-width, no overflow, images side-by-side = */ /* ============================================================= */ @media (width: 393px) and (height: 873px) and (orientation: portrait) { .al-about-pg-area { --container-padding: 0 18px; --heading-fs: 36px; --heading-mb: 14px; --para-fs: 16px; --para-lh: 1.55; --para-mb: 28px; --img-h: 195px; --img2-h: 240px; --img-gap: 0px; --btn-h: 50px; --btn-w: 220px; } /* Container padding */ .al-about-pg-area .container-1320 { padding: var(--container-padding); } /* Row: flex wrap with proper gap */ .al-about-pg-area .row { display: flex; flex-wrap: wrap; gap: var(--img-gap); justify-content: center; margin: 0; width: 100%; } /* Text column: full width, proper order */ .al-about-pg-area [class*="col-lg-5"] { order: 1 !important; flex: 0 0 100% !important; max-width: 100% !important; padding: 0 !important; text-align: center; } /* Image columns: side-by-side, equal width */ .al-about-pg-area [class*="col-xl-4"], .al-about-pg-area [class*="col-xl-3"] { order: 2 !important; flex: 0 0 calc(50% - (var(--img-gap) / 2)) !important; max-width: calc(50% - (var(--img-gap) / 2)) !important; padding: 0 !important; margin: 0 !important; } /* Heading */ .al-about-pg-area .tp-portfolio-revealing-slide-heading { font-size: var(--heading-fs); margin-bottom: var(--heading-mb); line-height: 1.2; width: 100%; } /* Paragraph: prevent overflow, allow wrapping */ .al-about-pg-area .al-about-pg-content p { font-size: var(--para-fs); line-height: var(--para-lh); margin: 0 0 var(--para-mb); text-align: justify !important; word-wrap: break-word; overflow-wrap: break-word; hyphens: auto; width: 100%; max-width: 100%; margin-left: -70px !important; } /* Image containers: clean, no extra margins */ .al-about-pg-area .al-about-pg-thumb, .al-about-pg-area .al-about-pg-thumb-2 { width: 80%; height: var(--img-h); margin-left: -40px !important; padding: 0; overflow: hidden; border-radius: 16px; } /* Images: cover, fixed height, no distortion */ .al-about-pg-area .al-about-pg-thumb img, .al-about-pg-area .al-about-pg-thumb-2 img { width: 100% !important; height: 100% !important; object-fit: cover; border-radius: 16px; display: block; } .al-about-pg-area .al-about-pg-thumb-2 { height: var(--img2-h) !important; width: 80% !important; margin-top: -50px !important; margin-left: -60px !important; } /* Hide rings */ .al-about-pg-area .tp-about-ai-ring, .al-about-pg-area .tp-about-ai-ring-small { display: none !important; } /* Button: centered, touch-friendly */ .al-about-pg-area .tp-header-btn { margin: 32px auto 0; display: block; width: var(--btn-w); min-height: var(--btn-h); } .al-about-pg-area .tp-header-btn a { display: flex; justify-content: center; align-items: center; width: 100%; height: var(--btn-h); font-size: 16px; font-weight: 600; border-radius: 26px; background: linear-gradient(90deg, #A70C7E, #2545BC); color: white; text-decoration: none; text-align: center; } } /* ============================================================= */ /* ========= EXACT VIEWPORT: 412×869 (Portrait) =============== */ /* ========= LAYOUT: Heading → Text → Img1 + Img3 side-by-side = */ /* ============================================================= */ @media (width: 412px) and (height: 869px) and (orientation: portrait) { .al-about-pg-area { --container-padding: 0 20px; --heading-fs: 38px; --heading-mb: 15px; --para-fs: 16px; --para-lh: 1.55; --para-mb: 30px; --img-h: 205px; --img2-h: 250px; --img-gap: 0px; --btn-h: 50px; --btn-w: 230px; --text-ml: -75px; --img1-w: 82%; --img1-ml: -42px; --img2-w: 82%; --img2-ml: -65px; --img2-mt: -55px; } .al-about-pg-area .container-1320 { padding: var(--container-padding); } .al-about-pg-area .row { display: flex; flex-wrap: wrap; gap: var(--img-gap); justify-content: center; margin: 0; width: 100%; } .al-about-pg-area [class*="col-lg-5"] { order: 1 !important; flex: 0 0 100% !important; max-width: 100% !important; padding: 0 !important; text-align: center; } .al-about-pg-area [class*="col-xl-4"], .al-about-pg-area [class*="col-xl-3"] { order: 2 !important; flex: 0 0 calc(50% - (var(--img-gap) / 2)) !important; max-width: calc(50% - (var(--img-gap) / 2)) !important; padding: 0 !important; margin: 0 !important; } .al-about-pg-area .tp-portfolio-revealing-slide-heading { font-size: var(--heading-fs); margin-bottom: var(--heading-mb); line-height: 1.2; width: 100%; } .al-about-pg-area .al-about-pg-content p { font-size: var(--para-fs); line-height: var(--para-lh); margin: 0 0 var(--para-mb); text-align: justify !important; word-wrap: break-word; overflow-wrap: break-word; hyphens: auto; width: 100%; max-width: 100%; margin-left: var(--text-ml) !important; } .al-about-pg-area .al-about-pg-thumb, .al-about-pg-area .al-about-pg-thumb-2 { width: var(--img1-w); height: var(--img-h); margin-left: var(--img1-ml) !important; padding: 0; overflow: hidden; border-radius: 16px; } .al-about-pg-area .al-about-pg-thumb-2 { height: var(--img2-h) !important; width: var(--img2-w) !important; margin-top: var(--img2-mt) !important; margin-left: var(--img2-ml) !important; } .al-about-pg-area .al-about-pg-thumb img, .al-about-pg-area .al-about-pg-thumb-2 img { width: 100% !important; height: 100% !important; object-fit: cover; border-radius: 16px; display: block; } .al-about-pg-area .tp-about-ai-ring, .al-about-pg-area .tp-about-ai-ring-small { display: none !important; } .al-about-pg-area .tp-header-btn { margin: 34px auto 0; display: block; width: var(--btn-w); min-height: var(--btn-h); } .al-about-pg-area .tp-header-btn a { display: flex; justify-content: center; align-items: center; width: 100%; height: var(--btn-h); font-size: 16px; font-weight: 600; border-radius: 26px; background: linear-gradient(90deg, #A70C7E, #2545BC); color: white; text-decoration: none; text-align: center; } } /* ============================================================= */ /* ========= EXACT VIEWPORT: 428×926 (Portrait) =============== */ /* ========= LAYOUT: Heading → Text → Img1 + Img3 side-by-side = */ /* ============================================================= */ @media (width: 428px) and (height: 926px) and (orientation: portrait) { .al-about-pg-area { --container-padding: 0 22px; --heading-fs: 40px; --heading-mb: 16px; --para-fs: 17px; --para-lh: 1.6; --para-mb: 32px; --img-h: 215px; --img2-h: 260px; --img-gap: 0px; --btn-h: 52px; --btn-w: 240px; --text-ml: -80px; --img1-w: 84%; --img1-ml: -45px; --img2-w: 84%; --img2-ml: -70px; --img2-mt: -60px; } .al-about-pg-area .container-1320 { padding: var(--container-padding); } .al-about-pg-area .row { display: flex; flex-wrap: wrap; gap: var(--img-gap); justify-content: center; margin: 0; width: 100%; } .al-about-pg-area [class*="col-lg-5"] { order: 1 !important; flex: 0 0 100% !important; max-width: 100% !important; padding: 0 !important; text-align: center; } .al-about-pg-area [class*="col-xl-4"], .al-about-pg-area [class*="col-xl-3"] { order: 2 !important; flex: 0 0 calc(50% - (var(--img-gap) / 2)) !important; max-width: calc(50% - (var(--img-gap) / 2)) !important; padding: 0 !important; margin: 0 !important; } .al-about-pg-area .tp-portfolio-revealing-slide-heading { font-size: var(--heading-fs); margin-bottom: var(--heading-mb); line-height: 1.2; width: 100%; } .al-about-pg-area .al-about-pg-content p { font-size: var(--para-fs); line-height: var(--para-lh); margin: 0 0 var(--para-mb); text-align: justify !important; word-wrap: break-word; overflow-wrap: break-word; hyphens: auto; width: 100%; max-width: 100%; margin-left: var(--text-ml) !important; } .al-about-pg-area .al-about-pg-thumb, .al-about-pg-area .al-about-pg-thumb-2 { width: var(--img1-w); height: var(--img-h); margin-left: var(--img1-ml) !important; padding: 0; overflow: hidden; border-radius: 16px; } .al-about-pg-area .al-about-pg-thumb-2 { height: var(--img2-h) !important; width: var(--img2-w) !important; margin-top: var(--img2-mt) !important; margin-left: var(--img2-ml) !important; } .al-about-pg-area .al-about-pg-thumb img, .al-about-pg-area .al-about-pg-thumb-2 img { width: 100% !important; height: 100% !important; object-fit: cover; border-radius: 16px; display: block; } .al-about-pg-area .tp-about-ai-ring, .al-about-pg-area .tp-about-ai-ring-small { display: none !important; } .al-about-pg-area .tp-header-btn { margin: 36px auto 0; display: block; width: var(--btn-w); min-height: var(--btn-h); } .al-about-pg-area .tp-header-btn a { display: flex; justify-content: center; align-items: center; width: 100%; height: var(--btn-h); font-size: 17px; font-weight: 600; border-radius: 28px; background: linear-gradient(90deg, #A70C7E, #2545BC); color: white; text-decoration: none; text-align: center; } } /* ============================================================= */ /* ========= COMPACT RANGE: 360px–428px (Portrait) ============ */ /* ========= Covers all similar phones – fallback & scalable === */ /* ============================================================= */ @media (min-width: 360px) and (max-width: 428px) and (orientation: portrait) { .al-about-pg-area { --container-padding: 0 clamp(15px, 4vw, 22px); --heading-fs: clamp(32px, 9vw, 40px); --heading-mb: clamp(12px, 3.5vw, 16px); --para-fs: clamp(15px, 4.2vw, 17px); --para-lh: 1.55; --para-mb: clamp(24px, 7vw, 32px); --img-h: clamp(170px, 48vw, 215px); --img2-h: clamp(210px, 58vw, 260px); --img-gap: 0px; --btn-h: clamp(48px, 12vw, 52px); --btn-w: clamp(200px, 55vw, 240px); --text-ml: clamp(-80px, -18vw, -55px); --img1-w: clamp(78%, 80%, 84%); --img1-ml: clamp(-45px, -10vw, -32px); --img2-w: clamp(78%, 80%, 84%); --img2-ml: clamp(-70px, -16vw, -50px); --img2-mt: clamp(-60px, -14vw, -40px); } .al-about-pg-area .container-1320 { padding: var(--container-padding); } .al-about-pg-area .row { display: flex; flex-wrap: wrap; gap: var(--img-gap); justify-content: center; margin: 0; width: 100%; } .al-about-pg-area [class*="col-lg-5"] { order: 1 !important; flex: 0 0 100% !important; max-width: 100% !important; padding: 0 !important; text-align: center; } .al-about-pg-area [class*="col-xl-4"], .al-about-pg-area [class*="col-xl-3"] { order: 2 !important; flex: 0 0 calc(50% - (var(--img-gap) / 2)) !important; max-width: calc(50% - (var(--img-gap) / 2)) !important; padding: 0 !important; margin: 0 !important; } .al-about-pg-area .tp-portfolio-revealing-slide-heading { font-size: var(--heading-fs); margin-bottom: var(--heading-mb); line-height: 1.2; width: 100%; } .al-about-pg-area .al-about-pg-content p { font-size: var(--para-fs); line-height: var(--para-lh); margin: 0 0 var(--para-mb); text-align: justify !important; word-wrap: break-word; overflow-wrap: break-word; hyphens: auto; width: 100%; max-width: 100%; margin-left: var(--text-ml) !important; } .al-about-pg-area .al-about-pg-thumb, .al-about-pg-area .al-about-pg-thumb-2 { width: var(--img1-w); height: var(--img-h); margin-left: var(--img1-ml) !important; padding: 0; overflow: hidden; border-radius: 16px; } .al-about-pg-area .al-about-pg-thumb-2 { height: var(--img2-h) !important; width: var(--img2-w) !important; margin-top: var(--img2-mt) !important; margin-left: var(--img2-ml) !important; } .al-about-pg-area .al-about-pg-thumb img, .al-about-pg-area .al-about-pg-thumb-2 img { width: 100% !important; height: 100% !important; object-fit: cover; border-radius: 16px; display: block; } .al-about-pg-area .tp-about-ai-ring, .al-about-pg-area .tp-about-ai-ring-small { display: none !important; } .al-about-pg-area .tp-header-btn { margin: clamp(28px, 8vw, 36px) auto 0; display: block; width: var(--btn-w); min-height: var(--btn-h); } .al-about-pg-area .tp-header-btn a { display: flex; justify-content: center; align-items: center; width: 100%; height: var(--btn-h); font-size: clamp(15px, 4vw, 17px); font-weight: 600; border-radius: 26px; background: linear-gradient(90deg, #A70C7E, #2545BC); color: white; text-decoration: none; text-align: center; } } /* ============================================================= */ /* ========= 360×800 (Portrait) – ADJUSTED LAYOUT =============== */ /* ============================================================= */ @media (width: 360px) and (height: 800px) and (orientation: portrait) { .al-about-pg-area { --container-padding: 0 15px; --heading-fs: 34px; --heading-mb: 13px; --para-fs: 15px; --para-lh: 1.52; --para-mb: 26px; --img-h: 185px; --img2-h: 230px; --img-gap: 0px; --btn-h: 48px; --btn-w: 210px; --text-ml: -60px; --img1-w: 79%; --img1-ml: -35px; --img2-w: 79%; --img2-ml: -55px; --img2-mt: -45px; } .al-about-pg-area .container-1320 { padding: var(--container-padding); } .al-about-pg-area .row { display: flex; flex-wrap: wrap; gap: var(--img-gap); justify-content: center; margin: 0; width: 100%; } .al-about-pg-area [class*="col-lg-5"] { order: 1 !important; flex: 0 0 100% !important; max-width: 100% !important; padding: 0 !important; text-align: center; } .al-about-pg-area [class*="col-xl-4"], .al-about-pg-area [class*="col-xl-3"] { order: 2 !important; flex: 0 0 calc(50% - (var(--img-gap) / 2)) !important; max-width: calc(50% - (var(--img-gap) / 2)) !important; padding: 0 !important; margin: 0 !important; } .al-about-pg-area .tp-portfolio-revealing-slide-heading { font-size: var(--heading-fs); margin-bottom: var(--heading-mb); line-height: 1.2; width: 100%; } .al-about-pg-area .al-about-pg-content p { font-size: var(--para-fs); line-height: var(--para-lh); margin: 0 0 var(--para-mb); text-align: justify !important; word-wrap: break-word; overflow-wrap: break-word; hyphens: auto; width: 100%; max-width: 100%; margin-left: var(--text-ml) !important; } .al-about-pg-area .al-about-pg-thumb, .al-about-pg-area .al-about-pg-thumb-2 { width: var(--img1-w); height: var(--img-h); margin-left: var(--img1-ml) !important; padding: 0; overflow: hidden; border-radius: 16px; } .al-about-pg-area .al-about-pg-thumb-2 { height: var(--img2-h) !important; width: var(--img2-w) !important; margin-top: var(--img2-mt) !important; margin-left: var(--img2-ml) !important; } .al-about-pg-area .al-about-pg-thumb img, .al-about-pg-area .al-about-pg-thumb-2 img { width: 100% !important; height: 100% !important; object-fit: cover; border-radius: 16px; display: block; } .al-about-pg-area .tp-about-ai-ring, .al-about-pg-area .tp-about-ai-ring-small { display: none !important; } .al-about-pg-area .tp-header-btn { margin: 30px auto 0; display: block; width: var(--btn-w); min-height: var(--btn-h); } .al-about-pg-area .tp-header-btn a { display: flex; justify-content: center; align-items: center; width: 100%; height: var(--btn-h); font-size: 15px; font-weight: 600; border-radius: 24px; background: linear-gradient(90deg, #A70C7E, #2545BC); color: white; text-decoration: none; text-align: center; } } /* ============================================================= */ /* ========= 390×844 (Portrait) – ADJUSTED LAYOUT =============== */ /* ============================================================= */ @media (width: 390px) and (height: 844px) and (orientation: portrait) { .al-about-pg-area { --container-padding: 0 18px; --heading-fs: 36px; --heading-mb: 14px; --para-fs: 16px; --para-lh: 1.55; --para-mb: 28px; --img-h: 195px; --img2-h: 240px; --img-gap: 0px; --btn-h: 50px; --btn-w: 220px; --text-ml: -68px; --img1-w: 80%; --img1-ml: -40px; --img2-w: 80%; --img2-ml: -60px; --img2-mt: -50px; } .al-about-pg-area .container-1320 { padding: var(--container-padding); } .al-about-pg-area .row { display: flex; flex-wrap: wrap; gap: var(--img-gap); justify-content: center; margin: 0; width: 100%; } .al-about-pg-area [class*="col-lg-5"] { order: 1 !important; flex: 0 0 100% !important; max-width: 100% !important; padding: 0 !important; text-align: center; } .al-about-pg-area [class*="col-xl-4"], .al-about-pg-area [class*="col-xl-3"] { order: 2 !important; flex: 0 0 calc(50% - (var(--img-gap) / 2)) !important; max-width: calc(50% - (var(--img-gap) / 2)) !important; padding: 0 !important; margin: 0 !important; } .al-about-pg-area .tp-portfolio-revealing-slide-heading { font-size: var(--heading-fs); margin-bottom: var(--heading-mb); line-height: 1.2; width: 100%; } .al-about-pg-area .al-about-pg-content p { font-size: var(--para-fs); line-height: var(--para-lh); margin: 0 0 var(--para-mb); text-align: justify !important; word-wrap: break-word; overflow-wrap: break-word; hyphens: auto; width: 100%; max-width: 100%; margin-left: var(--text-ml) !important; } .al-about-pg-area .al-about-pg-thumb, .al-about-pg-area .al-about-pg-thumb-2 { width: var(--img1-w); height: var(--img-h); margin-left: var(--img1-ml) !important; padding: 0; overflow: hidden; border-radius: 16px; } .al-about-pg-area .al-about-pg-thumb-2 { height: var(--img2-h) !important; width: var(--img2-w) !important; margin-top: var(--img2-mt) !important; margin-left: var(--img2-ml) !important; } .al-about-pg-area .al-about-pg-thumb img, .al-about-pg-area .al-about-pg-thumb-2 img { width: 100% !important; height: 100% !important; object-fit: cover; border-radius: 16px; display: block; } .al-about-pg-area .tp-about-ai-ring, .al-about-pg-area .tp-about-ai-ring-small { display: none !important; } .al-about-pg-area .tp-header-btn { margin: 32px auto 0; display: block; width: var(--btn-w); min-height: var(--btn-h); } .al-about-pg-area .tp-header-btn a { display: flex; justify-content: center; align-items: center; width: 100%; height: var(--btn-h); font-size: 16px; font-weight: 600; border-radius: 26px; background: linear-gradient(90deg, #A70C7E, #2545BC); color: white; text-decoration: none; text-align: center; } } /* ============================================================= */ /* ========= 412×915 (Portrait) – ADJUSTED LAYOUT =============== */ /* ============================================================= */ @media (width: 412px) and (height: 915px) and (orientation: portrait) { .al-about-pg-area { --container-padding: 0 20px; --heading-fs: 38px; --heading-mb: 15px; --para-fs: 16px; --para-lh: 1.55; --para-mb: 30px; --img-h: 210px; --img2-h: 255px; --img-gap: 0px; --btn-h: 50px; --btn-w: 230px; --text-ml: -75px; --img1-w: 82%; --img1-ml: -42px; --img2-w: 82%; --img2-ml: -65px; --img2-mt: -55px; } .al-about-pg-area .container-1320 { padding: var(--container-padding); } .al-about-pg-area .row { display: flex; flex-wrap: wrap; gap: var(--img-gap); justify-content: center; margin: 0; width: 100%; } .al-about-pg-area [class*="col-lg-5"] { order: 1 !important; flex: 0 0 100% !important; max-width: 100% !important; padding: 0 !important; text-align: center; } .al-about-pg-area [class*="col-xl-4"], .al-about-pg-area [class*="col-xl-3"] { order: 2 !important; flex: 0 0 calc(50% - (var(--img-gap) / 2)) !important; max-width: calc(50% - (var(--img-gap) / 2)) !important; padding: 0 !important; margin: 0 !important; } .al-about-pg-area .tp-portfolio-revealing-slide-heading { font-size: var(--heading-fs); margin-bottom: var(--heading-mb); line-height: 1.2; width: 100%; } .al-about-pg-area .al-about-pg-content p { font-size: var(--para-fs); line-height: var(--para-lh); margin: 0 0 var(--para-mb); text-align: justify !important; word-wrap: break-word; overflow-wrap: break-word; hyphens: auto; width: 100%; max-width: 100%; margin-left: var(--text-ml) !important; } .al-about-pg-area .al-about-pg-thumb, .al-about-pg-area .al-about-pg-thumb-2 { width: var(--img1-w); height: var(--img-h); margin-left: var(--img1-ml) !important; padding: 0; overflow: hidden; border-radius: 16px; } .al-about-pg-area .al-about-pg-thumb-2 { height: var(--img2-h) !important; width: var(--img2-w) !important; margin-top: var(--img2-mt) !important; margin-left: var(--img2-ml) !important; } .al-about-pg-area .al-about-pg-thumb img, .al-about-pg-area .al-about-pg-thumb-2 img { width: 100% !important; height: 100% !important; object-fit: cover; border-radius: 16px; display: block; } .al-about-pg-area .tp-about-ai-ring, .al-about-pg-area .tp-about-ai-ring-small { display: none !important; } .al-about-pg-area .tp-header-btn { margin: 34px auto 0; display: block; width: var(--btn-w); min-height: var(--btn-h); } .al-about-pg-area .tp-header-btn a { display: flex; justify-content: center; align-items: center; width: 100%; height: var(--btn-h); font-size: 16px; font-weight: 600; border-radius: 26px; background: linear-gradient(90deg, #A70C7E, #2545BC); color: white; text-decoration: none; text-align: center; } } /* ============================================================= */ /* ========= 414×896 (Portrait) – ADJUSTED LAYOUT =============== */ /* ============================================================= */ @media (width: 414px) and (height: 896px) and (orientation: portrait) { .al-about-pg-area { --container-padding: 0 20px; --heading-fs: 38px; --heading-mb: 15px; --para-fs: 16px; --para-lh: 1.55; --para-mb: 30px; --img-h: 208px; --img2-h: 253px; --img-gap: 0px; --btn-h: 50px; --btn-w: 232px; --text-ml: -76px; --img1-w: 82%; --img1-ml: -43px; --img2-w: 82%; --img2-ml: -66px; --img2-mt: -54px; } .al-about-pg-area .container-1320 { padding: var(--container-padding); } .al-about-pg-area .row { display: flex; flex-wrap: wrap; gap: var(--img-gap); justify-content: center; margin: 0; width: 100%; } .al-about-pg-area [class*="col-lg-5"] { order: 1 !important; flex: 0 0 100% !important; max-width: 100% !important; padding: 0 !important; text-align: center; } .al-about-pg-area [class*="col-xl-4"], .al-about-pg-area [class*="col-xl-3"] { order: 2 !important; flex: 0 0 calc(50% - (var(--img-gap) / 2)) !important; max-width: calc(50% - (var(--img-gap) / 2)) !important; padding: 0 !important; margin: 0 !important; } .al-about-pg-area .tp-portfolio-revealing-slide-heading { font-size: var(--heading-fs); margin-bottom: var(--heading-mb); line-height: 1.2; width: 100%; } .al-about-pg-area .al-about-pg-content p { font-size: var(--para-fs); line-height: var(--para-lh); margin: 0 0 var(--para-mb); text-align: justify !important; word-wrap: break-word; overflow-wrap: break-word; hyphens: auto; width: 100%; max-width: 100%; margin-left: var(--text-ml) !important; } .al-about-pg-area .al-about-pg-thumb, .al-about-pg-area .al-about-pg-thumb-2 { width: var(--img1-w); height: var(--img-h); margin-left: var(--img1-ml) !important; padding: 0; overflow: hidden; border-radius: 16px; } .al-about-pg-area .al-about-pg-thumb-2 { height: var(--img2-h) !important; width: var(--img2-w) !important; margin-top: var(--img2-mt) !important; margin-left: var(--img2-ml) !important; } .al-about-pg-area .al-about-pg-thumb img, .al-about-pg-area .al-about-pg-thumb-2 img { width: 100% !important; height: 100% !important; object-fit: cover; border-radius: 16px; display: block; } .al-about-pg-area .tp-about-ai-ring, .al-about-pg-area .tp-about-ai-ring-small { display: none !important; } .al-about-pg-area .tp-header-btn { margin: 34px auto 0; display: block; width: var(--btn-w); min-height: var(--btn-h); } .al-about-pg-area .tp-header-btn a { display: flex; justify-content: center; align-items: center; width: 100%; height: var(--btn-h); font-size: 16px; font-weight: 600; border-radius: 26px; background: linear-gradient(90deg, #A70C7E, #2545BC); color: white; text-decoration: none; text-align: center; } } /* ============================================================= */ /* ========= 375×812 (Portrait) – ADJUSTED LAYOUT =============== */ /* ============================================================= */ @media (width: 375px) and (height: 812px) and (orientation: portrait) { .al-about-pg-area { --container-padding: 0 16px; --heading-fs: 34px; --heading-mb: 13px; --para-fs: 15px; --para-lh: 1.52; --para-mb: 26px; --img-h: 185px; --img2-h: 230px; --img-gap: 0px; --btn-h: 48px; --btn-w: 210px; --text-ml: -62px; --img1-w: 79%; --img1-ml: -36px; --img2-w: 79%; --img2-ml: -56px; --img2-mt: -46px; } .al-about-pg-area .container-1320 { padding: var(--container-padding); } .al-about-pg-area .row { display: flex; flex-wrap: wrap; gap: var(--img-gap); justify-content: center; margin: 0; width: 100%; } .al-about-pg-area [class*="col-lg-5"] { order: 1 !important; flex: 0 0 100% !important; max-width: 100% !important; padding: 0 !important; text-align: center; } .al-about-pg-area [class*="col-xl-4"], .al-about-pg-area [class*="col-xl-3"] { order: 2 !important; flex: 0 0 calc(50% - (var(--img-gap) / 2)) !important; max-width: calc(50% - (var(--img-gap) / 2)) !important; padding: 0 !important; margin: 0 !important; } .al-about-pg-area .tp-portfolio-revealing-slide-heading { font-size: var(--heading-fs); margin-bottom: var(--heading-mb); line-height: 1.2; width: 100%; } .al-about-pg-area .al-about-pg-content p { font-size: var(--para-fs); line-height: var(--para-lh); margin: 0 0 var(--para-mb); text-align: justify !important; word-wrap: break-word; overflow-wrap: break-word; hyphens: auto; width: 100%; max-width: 100%; margin-left: var(--text-ml) !important; } .al-about-pg-area .al-about-pg-thumb, .al-about-pg-area .al-about-pg-thumb-2 { width: var(--img1-w); height: var(--img-h); margin-left: var(--img1-ml) !important; padding: 0; overflow: hidden; border-radius: 16px; } .al-about-pg-area .al-about-pg-thumb-2 { height: var(--img2-h) !important; width: var(--img2-w) !important; margin-top: var(--img2-mt) !important; margin-left: var(--img2-ml) !important; } .al-about-pg-area .al-about-pg-thumb img, .al-about-pg-area .al-about-pg-thumb-2 img { width: 100% !important; height: 100% !important; object-fit: cover; border-radius: 16px; display: block; } .al-about-pg-area .tp-about-ai-ring, .al-about-pg-area .tp-about-ai-ring-small { display: none !important; } .al-about-pg-area .tp-header-btn { margin: 30px auto 0; display: block; width: var(--btn-w); min-height: var(--btn-h); } .al-about-pg-area .tp-header-btn a { display: flex; justify-content: center; align-items: center; width: 100%; height: var(--btn-h); font-size: 15px; font-weight: 600; border-radius: 24px; background: linear-gradient(90deg, #A70C7E, #2545BC); color: white; text-decoration: none; text-align: center; } } /* ============================================================= */ /* ========= 375×667 (Portrait) – ADJUSTED LAYOUT =============== */ /* ============================================================= */ @media (width: 375px) and (height: 667px) and (orientation: portrait) { .al-about-pg-area { --container-padding: 0 16px; --heading-fs: 32px; --heading-mb: 12px; --para-fs: 15px; --para-lh: 1.5; --para-mb: 24px; --img-h: 165px; --img2-h: 205px; --img-gap: 0px; --btn-h: 46px; --btn-w: 200px; --text-ml: -58px; --img1-w: 77%; --img1-ml: -34px; --img2-w: 77%; --img2-ml: -52px; --img2-mt: -42px; } .al-about-pg-area .container-1320 { padding: var(--container-padding); } .al-about-pg-area .row { display: flex; flex-wrap: wrap; gap: var(--img-gap); justify-content: center; margin: 0; width: 100%; } .al-about-pg-area [class*="col-lg-5"] { order: 1 !important; flex: 0 0 100% !important; max-width: 100% !important; padding: 0 !important; text-align: center; } .al-about-pg-area [class*="col-xl-4"], .al-about-pg-area [class*="col-xl-3"] { order: 2 !important; flex: 0 0 calc(50% - (var(--img-gap) / 2)) !important; max-width: calc(50% - (var(--img-gap) / 2)) !important; padding: 0 !important; margin: 0 !important; } .al-about-pg-area .tp-portfolio-revealing-slide-heading { font-size: var(--heading-fs); margin-bottom: var(--heading-mb); line-height: 1.2; width: 100%; } .al-about-pg-area .al-about-pg-content p { font-size: var(--para-fs); line-height: var(--para-lh); margin: 0 0 var(--para-mb); text-align: justify !important; word-wrap: break-word; overflow-wrap: break-word; hyphens: auto; width: 100%; max-width: 100%; margin-left: var(--text-ml) !important; } .al-about-pg-area .al-about-pg-thumb, .al-about-pg-area .al-about-pg-thumb-2 { width: var(--img1-w); height: var(--img-h); margin-left: var(--img1-ml) !important; padding: 0; overflow: hidden; border-radius: 16px; } .al-about-pg-area .al-about-pg-thumb-2 { height: var(--img2-h) !important; width: var(--img2-w) !important; margin-top: var(--img2-mt) !important; margin-left: var(--img2-ml) !important; } .al-about-pg-area .al-about-pg-thumb img, .al-about-pg-area .al-about-pg-thumb-2 img { width: 100% !important; height: 100% !important; object-fit: cover; border-radius: 16px; display: block; } .al-about-pg-area .tp-about-ai-ring, .al-about-pg-area .tp-about-ai-ring-small { display: none !important; } .al-about-pg-area .tp-header-btn { margin: 28px auto 0; display: block; width: var(--btn-w); min-height: var(--btn-h); } .al-about-pg-area .tp-header-btn a { display: flex; justify-content: center; align-items: center; width: 100%; height: var(--btn-h); font-size: 15px; font-weight: 600; border-radius: 23px; background: linear-gradient(90deg, #A70C7E, #2545BC); color: white; text-decoration: none; text-align: center; } } /* ============================================================= */ /* ========= 360×780 (Portrait) – ADJUSTED LAYOUT =============== */ /* ============================================================= */ @media (width: 360px) and (height: 780px) and (orientation: portrait) { .al-about-pg-area { --container-padding: 0 15px; --heading-fs: 33px; --heading-mb: 12px; --para-fs: 15px; --para-lh: 1.5; --para-mb: 25px; --img-h: 180px; --img2-h: 225px; --img-gap: 0px; --btn-h: 48px; --btn-w: 205px; --text-ml: -70px; --img1-w: 78%; --img1-ml: -34px; --img2-w: 78%; --img2-ml: -53px; --img2-mt: -43px; } .al-about-pg-area .container-1320 { padding: var(--container-padding); } .al-about-pg-area .row { display: flex; flex-wrap: wrap; gap: var(--img-gap); justify-content: center; margin: 0; width: 100%; } .al-about-pg-area [class*="col-lg-5"] { order: 1 !important; flex: 0 0 100% !important; max-width: 100% !important; padding: 0 !important; text-align: center; } .al-about-pg-area [class*="col-xl-4"], .al-about-pg-area [class*="col-xl-3"] { order: 2 !important; flex: 0 0 calc(50% - (var(--img-gap) / 2)) !important; max-width: calc(50% - (var(--img-gap) / 2)) !important; padding: 0 !important; margin: 0 !important; } .al-about-pg-area .tp-portfolio-revealing-slide-heading { font-size: var(--heading-fs); margin-bottom: var(--heading-mb); line-height: 1.2; width: 100%; } .al-about-pg-area .al-about-pg-content p { font-size: var(--para-fs); line-height: var(--para-lh); margin: 0 0 var(--para-mb); text-align: justify !important; word-wrap: break-word; overflow-wrap: break-word; hyphens: auto; width: 100%; max-width: 100%; margin-left: var(--text-ml) !important; } .al-about-pg-area .al-about-pg-thumb, .al-about-pg-area .al-about-pg-thumb-2 { width: var(--img1-w); height: var(--img-h); margin-left: var(--img1-ml) !important; padding: 0; overflow: hidden; border-radius: 16px; } .al-about-pg-area .al-about-pg-thumb-2 { height: var(--img2-h) !important; width: var(--img2-w) !important; margin-top: var(--img2-mt) !important; margin-left: var(--img2-ml) !important; } .al-about-pg-area .al-about-pg-thumb img, .al-about-pg-area .al-about-pg-thumb-2 img { width: 100% !important; height: 100% !important; object-fit: cover; border-radius: 16px; display: block; } .al-about-pg-area .tp-about-ai-ring, .al-about-pg-area .tp-about-ai-ring-small { display: none !important; } .al-about-pg-area .tp-header-btn { margin: 29px auto 0; display: block; width: var(--btn-w); min-height: var(--btn-h); } .al-about-pg-area .tp-header-btn a { display: flex; justify-content: center; align-items: center; width: 100%; height: var(--btn-h); font-size: 15px; font-weight: 600; border-radius: 24px; background: linear-gradient(90deg, #A70C7E, #2545BC); color: white; text-decoration: none; text-align: center; } } /* home page about us mobile section ends here */ /* home page owner section mobile satrts here */ /* ============================================================= */ /* ========= 390×844 (Portrait) – READ MORE + MOBILE LAYOUT ===== */ /* ============================================================= */ @media (width: 390px) and (height: 844px) and (orientation: portrait) { .utsoraa-hero-section { --heading-fs: 40px; --heading-ml: -5px; --heading-mt: -50px; --para-fs: 18px; --para-mb: 6px; --para-ml: -5px; --para-pb: 30px; --thumb-ml: -20px; --thumb-mb: -50px; } /* Heading */ .utsoraa-hero-section .tp-portfolio-revealing-slide-heading { font-size: var(--heading-fs) !important; text-align: center !important; margin-left: var(--heading-ml) !important; margin-top: var(--heading-mt) !important; } /* Title wrap */ .utsoraa-hero-section .tp-team-details-title-wrap { margin-left: 0 !important; } /* Thumb */ .utsoraa-hero-section .tp-team-details-thumb { margin-left: var(--thumb-ml) !important; margin-bottom: var(--thumb-mb) !important; } /* Paragraph */ .utsoraa-hero-section .al-about-pg-content p { font-size: var(--para-fs) !important; margin-bottom: var(--para-mb) !important; text-align: justify !important; margin-left: var(--para-ml) !important; padding-bottom: var(--para-pb) !important; font-weight: 100px !important; } /* Hide full text, show read more */ #hidden-text-mobile { display: none !important; } .mobile-read-more { display: inline !important; font-size: 14px !important; color: #007bff !important; text-decoration: underline !important; cursor: pointer !important; background: none !important; border: none !important; padding: 0 !important; margin-left: 4px !important; } /* Row & Col gutters */ .utsoraa-hero-section .row { --bs-gutter-x: 0 !important; margin-left: 0 !important; margin-right: 0 !important; } .utsoraa-hero-section [class*="col-"] { padding-left: 0 !important; padding-right: 0 !important; } } /* ============================================================= */ /* ========= 360×800 (Portrait) – READ MORE + MOBILE LAYOUT ===== */ /* ============================================================= */ @media (width: 360px) and (height: 800px) and (orientation: portrait) { .utsoraa-hero-section { --heading-fs: 38px; --heading-ml: -4px; --heading-mt: -45px; --para-fs: 17px; --para-mb: 5px; --para-ml: -4px; --para-pb: 28px; --thumb-ml: -18px; --thumb-mb: -45px; } .utsoraa-hero-section .tp-portfolio-revealing-slide-heading { font-size: var(--heading-fs) !important; text-align: center !important; margin-left: var(--heading-ml) !important; margin-top: var(--heading-mt) !important; } .utsoraa-hero-section .tp-team-details-title-wrap { margin-left: 0 !important; } .utsoraa-hero-section .tp-team-details-thumb { margin-left: var(--thumb-ml) !important; margin-bottom: var(--thumb-mb) !important; } .utsoraa-hero-section .al-about-pg-content p { font-size: var(--para-fs) !important; margin-bottom: var(--para-mb) !important; text-align: justify !important; margin-left: var(--para-ml) !important; padding-bottom: var(--para-pb) !important; font-weight: 100 !important; } #hidden-text-mobile { display: none !important; } .mobile-read-more { display: inline !important; font-size: 14px !important; color: #007bff !important; text-decoration: underline !important; cursor: pointer !important; background: none !important; border: none !important; padding: 0 !important; margin-left: 4px !important; } .utsoraa-hero-section .row { --bs-gutter-x: 0 !important; margin-left: 0 !important; margin-right: 0 !important; } .utsoraa-hero-section [class*="col-"] { padding-left: 0 !important; padding-right: 0 !important; } } /* ============================================================= */ /* ========= 412×915 (Portrait) – READ MORE + MOBILE LAYOUT ===== */ /* ============================================================= */ @media (width: 412px) and (height: 915px) and (orientation: portrait) { .utsoraa-hero-section { --heading-fs: 41px; --heading-ml: -6px; --heading-mt: -52px; --para-fs: 18px; --para-mb: 6px; --para-ml: -6px; --para-pb: 32px; --thumb-ml: -22px; --thumb-mb: -52px; } .utsoraa-hero-section .tp-portfolio-revealing-slide-heading { font-size: var(--heading-fs) !important; text-align: center !important; margin-left: var(--heading-ml) !important; margin-top: var(--heading-mt) !important; } .utsoraa-hero-section .tp-team-details-title-wrap { margin-left: 0 !important; } .utsoraa-hero-section .tp-team-details-thumb { margin-left: var(--thumb-ml) !important; margin-bottom: var(--thumb-mb) !important; } .utsoraa-hero-section .al-about-pg-content p { font-size: var(--para-fs) !important; margin-bottom: var(--para-mb) !important; text-align: justify !important; margin-left: var(--para-ml) !important; padding-bottom: var(--para-pb) !important; font-weight: 100 !important; } #hidden-text-mobile { display: none !important; } .mobile-read-more { display: inline !important; font-size: 14px !important; color: #007bff !important; text-decoration: underline !important; cursor: pointer !important; background: none !important; border: none !important; padding: 0 !important; margin-left: 4px !important; } .utsoraa-hero-section .row { --bs-gutter-x: 0 !important; margin-left: 0 !important; margin-right: 0 !important; } .utsoraa-hero-section [class*="col-"] { padding-left: 0 !important; padding-right: 0 !important; } } /* ============================================================= */ /* ========= 414×896 (Portrait) – READ MORE + MOBILE LAYOUT ===== */ /* ============================================================= */ @media (width: 414px) and (height: 896px) and (orientation: portrait) { .utsoraa-hero-section { --heading-fs: 41px; --heading-ml: -6px; --heading-mt: -52px; --para-fs: 18px; --para-mb: 6px; --para-ml: -6px; --para-pb: 32px; --thumb-ml: -22px; --thumb-mb: -52px; } .utsoraa-hero-section .tp-portfolio-revealing-slide-heading { font-size: var(--heading-fs) !important; text-align: center !important; margin-left: var(--heading-ml) !important; margin-top: var(--heading-mt) !important; } .utsoraa-hero-section .tp-team-details-title-wrap { margin-left: 0 !important; } .utsoraa-hero-section .tp-team-details-thumb { margin-left: var(--thumb-ml) !important; margin-bottom: var(--thumb-mb) !important; } .utsoraa-hero-section .al-about-pg-content p { font-size: var(--para-fs) !important; margin-bottom: var(--para-mb) !important; text-align: justify !important; margin-left: var(--para-ml) !important; padding-bottom: var(--para-pb) !important; font-weight: 100 !important; } #hidden-text-mobile { display: none !important; } .mobile-read-more { display: inline !important; font-size: 14px !important; color: #007bff !important; text-decoration: underline !important; cursor: pointer !important; background: none !important; border: none !important; padding: 0 !important; margin-left: 4px !important; } .utsoraa-hero-section .row { --bs-gutter-x: 0 !important; margin-left: 0 !important; margin-right: 0 !important; } .utsoraa-hero-section [class*="col-"] { padding-left: 0 !important; padding-right: 0 !important; } } /* ============================================================= */ /* ========= 375×812 (Portrait) – READ MORE + MOBILE LAYOUT ===== */ /* ============================================================= */ @media (width: 375px) and (height: 812px) and (orientation: portrait) { .utsoraa-hero-section { --heading-fs: 39px; --heading-ml: -5px; --heading-mt: -48px; --para-fs: 17px; --para-mb: 5px; --para-ml: -5px; --para-pb: 29px; --thumb-ml: -19px; --thumb-mb: -48px; } .utsoraa-hero-section .tp-portfolio-revealing-slide-heading { font-size: var(--heading-fs) !important; text-align: center !important; margin-left: var(--heading-ml) !important; margin-top: var(--heading-mt) !important; } .utsoraa-hero-section .tp-team-details-title-wrap { margin-left: 0 !important; } .utsoraa-hero-section .tp-team-details-thumb { margin-left: var(--thumb-ml) !important; margin-bottom: var(--thumb-mb) !important; } .utsoraa-hero-section .al-about-pg-content p { font-size: var(--para-fs) !important; margin-bottom: var(--para-mb) !important; text-align: justify !important; margin-left: var(--para-ml) !important; padding-bottom: var(--para-pb) !important; font-weight: 100 !important; } #hidden-text-mobile { display: none !important; } .mobile-read-more { display: inline !important; font-size: 14px !important; color: #007bff !important; text-decoration: underline !important; cursor: pointer !important; background: none !important; border: none !important; padding: 0 !important; margin-left: 4px !important; } .utsoraa-hero-section .row { --bs-gutter-x: 0 !important; margin-left: 0 !important; margin-right: 0 !important; } .utsoraa-hero-section [class*="col-"] { padding-left: 0 !important; padding-right: 0 !important; } } /* ============================================================= */ /* ========= 375×667 (Portrait) – READ MORE + MOBILE LAYOUT ===== */ /* ============================================================= */ @media (width: 375px) and (height: 667px) and (orientation: portrait) { .utsoraa-hero-section { --heading-fs: 36px; --heading-ml: -4px; --heading-mt: -42px; --para-fs: 16px; --para-mb: 4px; --para-ml: -4px; --para-pb: 26px; --thumb-ml: -16px; --thumb-mb: -42px; } .utsoraa-hero-section .tp-portfolio-revealing-slide-heading { font-size: var(--heading-fs) !important; text-align: center !important; margin-left: var(--heading-ml) !important; margin-top: var(--heading-mt) !important; } .utsoraa-hero-section .tp-team-details-title-wrap { margin-left: 0 !important; } .utsoraa-hero-section .tp-team-details-thumb { margin-left: var(--thumb-ml) !important; margin-bottom: var(--thumb-mb) !important; } .utsoraa-hero-section .al-about-pg-content p { font-size: var(--para-fs) !important; margin-bottom: var(--para-mb) !important; text-align: justify !important; margin-left: var(--para-ml) !important; padding-bottom: var(--para-pb) !important; font-weight: 100 !important; } #hidden-text-mobile { display: none !important; } .mobile-read-more { display: inline !important; font-size: 13px !important; color: #007bff !important; text-decoration: underline !important; cursor: pointer !important; background: none !important; border: none !important; padding: 0 !important; margin-left: 3px !important; } .utsoraa-hero-section .row { --bs-gutter-x: 0 !important; margin-left: 0 !important; margin-right: 0 !important; } .utsoraa-hero-section [class*="col-"] { padding-left: 0 !important; padding-right: 0 !important; } } /* ============================================================= */ /* ========= 360×780 (Portrait) – READ MORE + MOBILE LAYOUT ===== */ /* ============================================================= */ @media (width: 360px) and (height: 780px) and (orientation: portrait) { .utsoraa-hero-section { --heading-fs: 37px; --heading-ml: -4px; --heading-mt: -44px; --para-fs: 17px; --para-mb: 5px; --para-ml: -4px; --para-pb: 27px; --thumb-ml: -17px; --thumb-mb: -44px; } .utsoraa-hero-section .tp-portfolio-revealing-slide-heading { font-size: var(--heading-fs) !important; text-align: center !important; margin-left: var(--heading-ml) !important; margin-top: var(--heading-mt) !important; } .utsoraa-hero-section .tp-team-details-title-wrap { margin-left: 0 !important; } .utsoraa-hero-section .tp-team-details-thumb { margin-left: var(--thumb-ml) !important; margin-bottom: var(--thumb-mb) !important; } .utsoraa-hero-section .al-about-pg-content p { font-size: var(--para-fs) !important; margin-bottom: var(--para-mb) !important; text-align: justify !important; margin-left: var(--para-ml) !important; padding-bottom: var(--para-pb) !important; font-weight: 100 !important; } #hidden-text-mobile { display: none !important; } .mobile-read-more { display: inline !important; font-size: 14px !important; color: #007bff !important; text-decoration: underline !important; cursor: pointer !important; background: none !important; border: none !important; padding: 0 !important; margin-left: 4px !important; } .utsoraa-hero-section .row { --bs-gutter-x: 0 !important; margin-left: 0 !important; margin-right: 0 !important; } .utsoraa-hero-section [class*="col-"] { padding-left: 0 !important; padding-right: 0 !important; } } /* ============================================================= */ /* ========= 360×640 (Portrait) – READ MORE + MOBILE LAYOUT ===== */ /* ============================================================= */ @media (width: 360px) and (height: 640px) and (orientation: portrait) { .utsoraa-hero-section { --heading-fs: 35px; --heading-ml: -3px; --heading-mt: -40px; --para-fs: 16px; --para-mb: 4px; --para-ml: -3px; --para-pb: 24px; --thumb-ml: -15px; --thumb-mb: -40px; } .utsoraa-hero-section .tp-portfolio-revealing-slide-heading { font-size: var(--heading-fs) !important; text-align: center !important; margin-left: var(--heading-ml) !important; margin-top: var(--heading-mt) !important; } .utsoraa-hero-section .tp-team-details-title-wrap { margin-left: 0 !important; } .utsoraa-hero-section .tp-team-details-thumb { margin-left: var(--thumb-ml) !important; margin-bottom: var(--thumb-mb) !important; } .utsoraa-hero-section .al-about-pg-content p { font-size: var(--para-fs) !important; margin-bottom: var(--para-mb) !important; text-align: justify !important; margin-left: var(--para-ml) !important; padding-bottom: var(--para-pb) !important; font-weight: 100 !important; } #hidden-text-mobile { display: none !important; } .mobile-read-more { display: inline !important; font-size: 13px !important; color: #007bff !important; text-decoration: underline !important; cursor: pointer !important; background: none !important; border: none !important; padding: 0 !important; margin-left: 3px !important; } .utsoraa-hero-section .row { --bs-gutter-x: 0 !important; margin-left: 0 !important; margin-right: 0 !important; } .utsoraa-hero-section [class*="col-"] { padding-left: 0 !important; padding-right: 0 !important; } } /* ============================================================= */ /* ========= 412×869 (Portrait) – READ MORE + MOBILE LAYOUT ===== */ /* ============================================================= */ @media (width: 412px) and (height: 869px) and (orientation: portrait) { .utsoraa-hero-section { --heading-fs: 40px; --heading-ml: -6px; --heading-mt: -50px; --para-fs: 18px; --para-mb: 6px; --para-ml: -6px; --para-pb: 30px; --thumb-ml: -21px; --thumb-mb: -50px; } .utsoraa-hero-section .tp-portfolio-revealing-slide-heading { font-size: var(--heading-fs) !important; text-align: center !important; margin-left: var(--heading-ml) !important; margin-top: var(--heading-mt) !important; } .utsoraa-hero-section .tp-team-details-title-wrap { margin-left: 0 !important; } .utsoraa-hero-section .tp-team-details-thumb { margin-left: var(--thumb-ml) !important; margin-bottom: var(--thumb-mb) !important; } .utsoraa-hero-section .al-about-pg-content p { font-size: var(--para-fs) !important; margin-bottom: var(--para-mb) !important; text-align: justify !important; margin-left: var(--para-ml) !important; padding-bottom: var(--para-pb) !important; font-weight: 100 !important; } #hidden-text-mobile { display: none !important; } .mobile-read-more { display: inline !important; font-size: 14px !important; color: #007bff !important; text-decoration: underline !important; cursor: pointer !important; background: none !important; border: none !important; padding: 0 !important; margin-left: 4px !important; } .utsoraa-hero-section .row { --bs-gutter-x: 0 !important; margin-left: 0 !important; margin-right: 0 !important; } .utsoraa-hero-section [class*="col-"] { padding-left: 0 !important; padding-right: 0 !important; } } /* ============================================================= */ /* ========= 428×926 (Portrait) – READ MORE + MOBILE LAYOUT ===== */ /* ============================================================= */ @media (width: 428px) and (height: 926px) and (orientation: portrait) { .utsoraa-hero-section { --heading-fs: 42px; --heading-ml: -7px; --heading-mt: -54px; --para-fs: 18px; --para-mb: 6px; --para-ml: -7px; --para-pb: 33px; --thumb-ml: -23px; --thumb-mb: -54px; } .utsoraa-hero-section .tp-portfolio-revealing-slide-heading { font-size: var(--heading-fs) !important; text-align: center !important; margin-left: var(--heading-ml) !important; margin-top: var(--heading-mt) !important; } .utsoraa-hero-section .tp-team-details-title-wrap { margin-left: 0 !important; } .utsoraa-hero-section .tp-team-details-thumb { margin-left: var(--thumb-ml) !important; margin-bottom: var(--thumb-mb) !important; } .utsoraa-hero-section .al-about-pg-content p { font-size: var(--para-fs) !important; margin-bottom: var(--para-mb) !important; text-align: justify !important; margin-left: var(--para-ml) !important; padding-bottom: var(--para-pb) !important; font-weight: 100 !important; } #hidden-text-mobile { display: none !important; } .mobile-read-more { display: inline !important; font-size: 14px !important; color: #007bff !important; text-decoration: underline !important; cursor: pointer !important; background: none !important; border: none !important; padding: 0 !important; margin-left: 4px !important; } .utsoraa-hero-section .row { --bs-gutter-x: 0 !important; margin-left: 0 !important; margin-right: 0 !important; } .utsoraa-hero-section [class*="col-"] { padding-left: 0 !important; padding-right: 0 !important; } } /* home page owner section mobile ends here */ /* home page why utsoraa section mobile starts here */ /* ============================================================= */ /* ========= 390×844 (Portrait) – MOBILE-ONLY LAYOUT (Why Utsoraa) */ /* ============================================================= */ @media (width: 390px) and (height: 844px) and (orientation: portrait) { .utsoraa-why-utsoraa .col-lg-5, .utsoraa-why-utsoraa .col-lg-7, .utsoraa-why-utsoraa .tp-portfolio-cst-list-wrap, .utsoraa-why-utsoraa .tp-portfolio-cst-img-wrapper { display: none !important; } .mobile-only-layout { display: block !important; position: relative; margin-top: -150px !important; margin-left: 0 !important; width: 100% !important; z-index: 9999 !important; background: white !important; padding: 30px 15px !important; } /* Mobile heading */ .mobile-only-layout .mobile-heading { font-size: 40px !important; text-align: center !important; padding-left: 10px !important; padding-right: 10px !important; line-height: 1.2; } /* Mobile paragraph */ .mobile-only-layout .mobile-para { font-size: 18px !important; margin-bottom: 30px !important; line-height: 1.6; text-align: center; } /* Divider */ .mobile-only-layout .mobile-divider { margin: 25px 0 !important; border-top: 1px solid black !important; } /* Slider container */ .mobile-slider-container { position: relative; height: 120px; overflow: hidden; margin-top: -40px !important; } /* Slide items */ .mobile-slide-item { position: absolute; top: 0; left: 0; width: 100%; opacity: 0; transform: translateX(100%); transition: all 0.5s ease-in-out; padding: 0 10px; } .mobile-slide-item.active { opacity: 1; transform: translateX(0); } .mobile-slide-item.prev { transform: translateX(-100%); margin-top: -90px !important; } /* Item title & desc */ .mobile-only-layout .item-title { font-size: 24px !important; margin-bottom: 10px !important; padding-top: 30px !important; font-weight: 600; } .mobile-only-layout .item-desc { font-size: 18px !important; color: #666 !important; line-height: 1.5; } /* Pagination */ .mobile-only-layout .mobile-pagination { margin-top: 30px !important; text-align: center; } .mobile-pagination .dot { cursor: pointer; display: inline-block; width: 8px; height: 8px; margin: 0 5px; background-color: #ccc; border-radius: 50%; transition: background-color 0.3s ease; } .mobile-pagination .dot.active { background-color: #021352; } } /* ============================================================= */ /* ========= 412×915 (Portrait) – MOBILE-ONLY LAYOUT (Why Utsoraa) */ /* ============================================================= */ @media (width: 412px) and (height: 915px) and (orientation: portrait) { .utsoraa-why-utsoraa .col-lg-5, .utsoraa-why-utsoraa .col-lg-7, .utsoraa-why-utsoraa .tp-portfolio-cst-list-wrap, .utsoraa-why-utsoraa .tp-portfolio-cst-img-wrapper { display: none !important; } .mobile-only-layout { display: block !important; position: relative; margin-top: -155px !important; margin-left: 0 !important; width: 100% !important; z-index: 9999 !important; background: white !important; padding: 32px 18px !important; } .mobile-only-layout .mobile-heading { font-size: 42px !important; text-align: center !important; padding-left: 12px !important; padding-right: 12px !important; line-height: 1.2; } .mobile-only-layout .mobile-para { font-size: 19px !important; margin-bottom: 32px !important; line-height: 1.6; text-align: center; } .mobile-only-layout .mobile-divider { margin: 28px 0 !important; border-top: 1px solid black !important; } .mobile-slider-container { position: relative; height: 125px; overflow: hidden; margin-top: -42px !important; } .mobile-slide-item { position: absolute; top: 0; left: 0; width: 100%; opacity: 0; transform: translateX(100%); transition: all 0.5s ease-in-out; padding: 0 12px; } .mobile-slide-item.active { opacity: 1; transform: translateX(0); } .mobile-slide-item.prev { transform: translateX(-100%); margin-top: -92px !important; } .mobile-only-layout .item-title { font-size: 25px !important; margin-bottom: 11px !important; padding-top: 32px !important; font-weight: 600; } .mobile-only-layout .item-desc { font-size: 19px !important; color: #666 !important; line-height: 1.5; } .mobile-only-layout .mobile-pagination { margin-top: 32px !important; text-align: center; } .mobile-pagination .dot { cursor: pointer; display: inline-block; width: 9px; height: 9px; margin: 0 6px; background-color: #ccc; border-radius: 50%; transition: background-color 0.3s ease; } .mobile-pagination .dot.active { background-color: #021352; } } /* ============================================================= */ /* ========= 414×896 (Portrait) – MOBILE-ONLY LAYOUT (Why Utsoraa) */ /* ============================================================= */ @media (width: 414px) and (height: 896px) and (orientation: portrait) { .utsoraa-why-utsoraa .col-lg-5, .utsoraa-why-utsoraa .col-lg-7, .utsoraa-why-utsoraa .tp-portfolio-cst-list-wrap, .utsoraa-why-utsoraa .tp-portfolio-cst-img-wrapper { display: none !important; } .mobile-only-layout { display: block !important; position: relative; margin-top: -154px !important; margin-left: 0 !important; width: 100% !important; z-index: 9999 !important; background: white !important; padding: 32px 18px !important; } .mobile-only-layout .mobile-heading { font-size: 42px !important; text-align: center !important; padding-left: 12px !important; padding-right: 12px !important; line-height: 1.2; } .mobile-only-layout .mobile-para { font-size: 19px !important; margin-bottom: 32px !important; line-height: 1.6; text-align: center; } .mobile-only-layout .mobile-divider { margin: 28px 0 !important; border-top: 1px solid black !important; } .mobile-slider-container { position: relative; height: 124px; overflow: hidden; margin-top: -42px !important; } .mobile-slide-item { position: absolute; top: 0; left: 0; width: 100%; opacity: 0; transform: translateX(100%); transition: all 0.5s ease-in-out; padding: 0 12px; } .mobile-slide-item.active { opacity: 1; transform: translateX(0); } .mobile-slide-item.prev { transform: translateX(-100%); margin-top: -91px !important; } .mobile-only-layout .item-title { font-size: 25px !important; margin-bottom: 11px !important; padding-top: 32px !important; font-weight: 600; } .mobile-only-layout .item-desc { font-size: 19px !important; color: #666 !important; line-height: 1.5; } .mobile-only-layout .mobile-pagination { margin-top: 32px !important; text-align: center; } .mobile-pagination .dot { cursor: pointer; display: inline-block; width: 9px; height: 9px; margin: 0 6px; background-color: #ccc; border-radius: 50%; transition: background-color 0.3s ease; } .mobile-pagination .dot.active { background-color: #021352; } } /* ============================================================= */ /* ========= 375×812 (Portrait) – MOBILE-ONLY LAYOUT (Why Utsoraa) */ /* ============================================================= */ @media (width: 375px) and (height: 812px) and (orientation: portrait) { .utsoraa-why-utsoraa .col-lg-5, .utsoraa-why-utsoraa .col-lg-7, .utsoraa-why-utsoraa .tp-portfolio-cst-list-wrap, .utsoraa-why-utsoraa .tp-portfolio-cst-img-wrapper { display: none !important; } .mobile-only-layout { display: block !important; position: relative; margin-top: -148px !important; margin-left: 0 !important; width: 100% !important; z-index: 9999 !important; background: white !important; padding: 28px 14px !important; } .mobile-only-layout .mobile-heading { font-size: 39px !important; text-align: center !important; padding-left: 10px !important; padding-right: 10px !important; line-height: 1.2; } .mobile-only-layout .mobile-para { font-size: 18px !important; margin-bottom: 28px !important; line-height: 1.6; text-align: center; } .mobile-only-layout .mobile-divider { margin: 24px 0 !important; border-top: 1px solid black !important; } .mobile-slider-container { position: relative; height: 118px; overflow: hidden; margin-top: -38px !important; } .mobile-slide-item { position: absolute; top: 0; left: 0; width: 100%; opacity: 0; transform: translateX(100%); transition: all 0.5s ease-in-out; padding: 0 10px; } .mobile-slide-item.active { opacity: 1; transform: translateX(0); } .mobile-slide-item.prev { transform: translateX(-100%); margin-top: -88px !important; } .mobile-only-layout .item-title { font-size: 23px !important; margin-bottom: 9px !important; padding-top: 28px !important; font-weight: 600; } .mobile-only-layout .item-desc { font-size: 18px !important; color: #666 !important; line-height: 1.5; } .mobile-only-layout .mobile-pagination { margin-top: 28px !important; text-align: center; } .mobile-pagination .dot { cursor: pointer; display: inline-block; width: 8px; height: 8px; margin: 0 5px; background-color: #ccc; border-radius: 50%; transition: background-color 0.3s ease; } .mobile-pagination .dot.active { background-color: #021352; } } /* ============================================================= */ /* ========= 375×667 (Portrait) – MOBILE-ONLY LAYOUT (Why Utsoraa) */ /* ============================================================= */ @media (width: 375px) and (height: 667px) and (orientation: portrait) { .utsoraa-why-utsoraa .col-lg-5, .utsoraa-why-utsoraa .col-lg-7, .utsoraa-why-utsoraa .tp-portfolio-cst-list-wrap, .utsoraa-why-utsoraa .tp-portfolio-cst-img-wrapper { display: none !important; } .mobile-only-layout { display: block !important; position: relative; margin-top: -135px !important; margin-left: 0 !important; width: 100% !important; z-index: 9999 !important; background: white !important; padding: 25px 12px !important; } .mobile-only-layout .mobile-heading { font-size: 36px !important; text-align: center !important; padding-left: 8px !important; padding-right: 8px !important; line-height: 1.2; } .mobile-only-layout .mobile-para { font-size: 17px !important; margin-bottom: 25px !important; line-height: 1.55; text-align: center; } .mobile-only-layout .mobile-divider { margin: 20px 0 !important; border-top: 1px solid black !important; } .mobile-slider-container { position: relative; height: 105px; overflow: hidden; margin-top: -35px !important; } .mobile-slide-item { position: absolute; top: 0; left: 0; width: 100%; opacity: 0; transform: translateX(100%); transition: all 0.5s ease-in-out; padding: 0 8px; } .mobile-slide-item.active { opacity: 1; transform: translateX(0); } .mobile-slide-item.prev { transform: translateX(-100%); margin-top: -80px !important; } .mobile-only-layout .item-title { font-size: 22px !important; margin-bottom: 8px !important; padding-top: 25px !important; font-weight: 600; } .mobile-only-layout .item-desc { font-size: 17px !important; color: #666 !important; line-height: 1.5; } .mobile-only-layout .mobile-pagination { margin-top: 25px !important; text-align: center; } .mobile-pagination .dot { cursor: pointer; display: inline-block; width: 7px; height: 7px; margin: 0 4px; background-color: #ccc; border-radius: 50%; transition: background-color 0.3s ease; } .mobile-pagination .dot.active { background-color: #021352; } } /* ============================================================= */ /* ========= 360×780 (Portrait) – MOBILE-ONLY LAYOUT (Why Utsoraa) */ /* ============================================================= */ @media (width: 360px) and (height: 780px) and (orientation: portrait) { .utsoraa-why-utsoraa .col-lg-5, .utsoraa-why-utsoraa .col-lg-7, .utsoraa-why-utsoraa .tp-portfolio-cst-list-wrap, .utsoraa-why-utsoraa .tp-portfolio-cst-img-wrapper { display: none !important; } .mobile-only-layout { display: block !important; position: relative; margin-top: -145px !important; margin-left: 0 !important; width: 100% !important; z-index: 9999 !important; background: white !important; padding: 27px 13px !important; } .mobile-only-layout .mobile-heading { font-size: 38px !important; text-align: center !important; padding-left: 9px !important; padding-right: 9px !important; line-height: 1.2; } .mobile-only-layout .mobile-para { font-size: 18px !important; margin-bottom: 27px !important; line-height: 1.6; text-align: center; } .mobile-only-layout .mobile-divider { margin: 23px 0 !important; border-top: 1px solid black !important; } .mobile-slider-container { position: relative; height: 115px; overflow: hidden; margin-top: -37px !important; } .mobile-slide-item { position: absolute; top: 0; left: 0; width: 100%; opacity: 0; transform: translateX(100%); transition: all 0.5s ease-in-out; padding: 0 9px; } .mobile-slide-item.active { opacity: 1; transform: translateX(0); } .mobile-slide-item.prev { transform: translateX(-100%); margin-top: -86px !important; } .mobile-only-layout .item-title { font-size: 23px !important; margin-bottom: 9px !important; padding-top: 27px !important; font-weight: 600; } .mobile-only-layout .item-desc { font-size: 18px !important; color: #666 !important; line-height: 1.5; } .mobile-only-layout .mobile-pagination { margin-top: 27px !important; text-align: center; } .mobile-pagination .dot { cursor: pointer; display: inline-block; width: 8px; height: 8px; margin: 0 5px; background-color: #ccc; border-radius: 50%; transition: background-color 0.3s ease; } .mobile-pagination .dot.active { background-color: #021352; } } /* ============================================================= */ /* ========= 360×640 (Portrait) – MOBILE-ONLY LAYOUT (Why Utsoraa) */ /* ============================================================= */ @media (width: 360px) and (height: 640px) and (orientation: portrait) { .utsoraa-why-utsoraa .col-lg-5, .utsoraa-why-utsoraa .col-lg-7, .utsoraa-why-utsoraa .tp-portfolio-cst-list-wrap, .utsoraa-why-utsoraa .tp-portfolio-cst-img-wrapper { display: none !important; } .mobile-only-layout { display: block !important; position: relative; margin-top: -130px !important; margin-left: 0 !important; width: 100% !important; z-index: 9999 !important; background: white !important; padding: 24px 12px !important; } .mobile-only-layout .mobile-heading { font-size: 35px !important; text-align: center !important; padding-left: 8px !important; padding-right: 8px !important; line-height: 1.2; } .mobile-only-layout .mobile-para { font-size: 17px !important; margin-bottom: 24px !important; line-height: 1.55; text-align: center; } .mobile-only-layout .mobile-divider { margin: 20px 0 !important; border-top: 1px solid black !important; } .mobile-slider-container { position: relative; height: 100px; overflow: hidden; margin-top: -33px !important; } .mobile-slide-item { position: absolute; top: 0; left: 0; width: 100%; opacity: 0; transform: translateX(100%); transition: all 0.5s ease-in-out; padding: 0 8px; } .mobile-slide-item.active { opacity: 1; transform: translateX(0); } .mobile-slide-item.prev { transform: translateX(-100%); margin-top: -78px !important; } .mobile-only-layout .item-title { font-size: 22px !important; margin-bottom: 8px !important; padding-top: 24px !important; font-weight: 600; } .mobile-only-layout .item-desc { font-size: 17px !important; color: #666 !important; line-height: 1.5; } .mobile-only-layout .mobile-pagination { margin-top: 24px !important; text-align: center; } .mobile-pagination .dot { cursor: pointer; display: inline-block; width: 7px; height: 7px; margin: 0 4px; background-color: #ccc; border-radius: 50%; transition: background-color 0.3s ease; } .mobile-pagination .dot.active { background-color: #021352; } } /* ============================================================= */ /* ========= 412×869 (Portrait) – MOBILE-ONLY LAYOUT (Why Utsoraa) */ /* ============================================================= */ @media (width: 412px) and (height: 869px) and (orientation: portrait) { .utsoraa-why-utsoraa .col-lg-5, .utsoraa-why-utsoraa .col-lg-7, .utsoraa-why-utsoraa .tp-portfolio-cst-list-wrap, .utsoraa-why-utsoraa .tp-portfolio-cst-img-wrapper { display: none !important; } .mobile-only-layout { display: block !important; position: relative; margin-top: -152px !important; margin-left: 0 !important; width: 100% !important; z-index: 9999 !important; background: white !important; padding: 31px 17px !important; } .mobile-only-layout .mobile-heading { font-size: 41px !important; text-align: center !important; padding-left: 11px !important; padding-right: 11px !important; line-height: 1.2; } .mobile-only-layout .mobile-para { font-size: 19px !important; margin-bottom: 31px !important; line-height: 1.6; text-align: center; } .mobile-only-layout .mobile-divider { margin: 27px 0 !important; border-top: 1px solid black !important; } .mobile-slider-container { position: relative; height: 122px; overflow: hidden; margin-top: -41px !important; } .mobile-slide-item { position: absolute; top: 0; left: 0; width: 100%; opacity: 0; transform: translateX(100%); transition: all 0.5s ease-in-out; padding: 0 11px; } .mobile-slide-item.active { opacity: 1; transform: translateX(0); } .mobile-slide-item.prev { transform: translateX(-100%); margin-top: -90px !important; } .mobile-only-layout .item-title { font-size: 25px !important; margin-bottom: 10px !important; padding-top: 31px !important; font-weight: 600; } .mobile-only-layout .item-desc { font-size: 19px !important; color: #666 !important; line-height: 1.5; } .mobile-only-layout .mobile-pagination { margin-top: 31px !important; text-align: center; } .mobile-pagination .dot { cursor: pointer; display: inline-block; width: 9px; height: 9px; margin: 0 6px; background-color: #ccc; border-radius: 50%; transition: background-color 0.3s ease; } .mobile-pagination .dot.active { background-color: #021352; } } /* ============================================================= */ /* ========= 428×926 (Portrait) – MOBILE-ONLY LAYOUT (Why Utsoraa) */ /* ============================================================= */ @media (width: 428px) and (height: 926px) and (orientation: portrait) { .utsoraa-why-utsoraa .col-lg-5, .utsoraa-why-utsoraa .col-lg-7, .utsoraa-why-utsoraa .tp-portfolio-cst-list-wrap, .utsoraa-why-utsoraa .tp-portfolio-cst-img-wrapper { display: none !important; } .mobile-only-layout { display: block !important; position: relative; margin-top: -158px !important; margin-left: 0 !important; width: 100% !important; z-index: 9999 !important; background: white !important; padding: 34px 20px !important; } .mobile-only-layout .mobile-heading { font-size: 43px !important; text-align: center !important; padding-left: 13px !important; padding-right: 13px !important; line-height: 1.2; } .mobile-only-layout .mobile-para { font-size: 20px !important; margin-bottom: 34px !important; line-height: 1.6; text-align: center; } .mobile-only-layout .mobile-divider { margin: 30px 0 !important; border-top: 1px solid black !important; } .mobile-slider-container { position: relative; height: 128px; overflow: hidden; margin-top: -44px !important; } .mobile-slide-item { position: absolute; top: 0; left: 0; width: 100%; opacity: 0; transform: translateX(100%); transition: all 0.5s ease-in-out; padding: 0 13px; } .mobile-slide-item.active { opacity: 1; transform: translateX(0); } .mobile-slide-item.prev { transform: translateX(-100%); margin-top: -94px !important; } .mobile-only-layout .item-title { font-size: 26px !important; margin-bottom: 12px !important; padding-top: 34px !important; font-weight: 600; } .mobile-only-layout .item-desc { font-size: 20px !important; color: #666 !important; line-height: 1.5; } .mobile-only-layout .mobile-pagination { margin-top: 34px !important; text-align: center; } .mobile-pagination .dot { cursor: pointer; display: inline-block; width: 9px; height: 9px; margin: 0 6px; background-color: #ccc; border-radius: 50%; transition: background-color 0.3s ease; } .mobile-pagination .dot.active { background-color: #021352; } } /* ============================================================= */ /* ========= 360×800 (Portrait) – MOBILE-ONLY LAYOUT (Why Utsoraa) */ /* ============================================================= */ @media (width: 360px) and (height: 800px) and (orientation: portrait) { .utsoraa-why-utsoraa .col-lg-5, .utsoraa-why-utsoraa .col-lg-7, .utsoraa-why-utsoraa .tp-portfolio-cst-list-wrap, .utsoraa-why-utsoraa .tp-portfolio-cst-img-wrapper { display: none !important; } .mobile-only-layout { display: block !important; position: relative; margin-top: -147px !important; margin-left: 0 !important; width: 100% !important; z-index: 9999 !important; background: white !important; padding: 28px 14px !important; } .mobile-only-layout .mobile-heading { font-size: 38px !important; text-align: center !important; padding-left: 10px !important; padding-right: 10px !important; line-height: 1.2; } .mobile-only-layout .mobile-para { font-size: 18px !important; margin-bottom: 28px !important; line-height: 1.6; text-align: center; } .mobile-only-layout .mobile-divider { margin: 24px 0 !important; border-top: 1px solid black !important; } .mobile-slider-container { position: relative; height: 118px; overflow: hidden; margin-top: -38px !important; } .mobile-slide-item { position: absolute; top: 0; left: 0; width: 100%; opacity: 0; transform: translateX(100%); transition: all 0.5s ease-in-out; padding: 0 10px; } .mobile-slide-item.active { opacity: 1; transform: translateX(0); } .mobile-slide-item.prev { transform: translateX(-100%); margin-top: -88px !important; } .mobile-only-layout .item-title { font-size: 23px !important; margin-bottom: 9px !important; padding-top: 28px !important; font-weight: 600; } .mobile-only-layout .item-desc { font-size: 18px !important; color: #666 !important; line-height: 1.5; } .mobile-only-layout .mobile-pagination { margin-top: 28px !important; text-align: center; } .mobile-pagination .dot { cursor: pointer; display: inline-block; width: 8px; height: 8px; margin: 0 5px; background-color: #ccc; border-radius: 50%; transition: background-color 0.3s ease; } .mobile-pagination .dot.active { background-color: #021352; } } /* home page why us section start here */ /* Home page join the crew section sratrt here */ /* ============================================================= */ /* ========= 360×800 (Portrait) – MOBILE CREW SECTION ============= */ /* ============================================================= */ @media (width: 360px) and (height: 800px) and (orientation: portrait) { .mobile-crew-section { display: block !important; padding: 55px 18px 75px !important; text-align: center; font-family: var(--tp-ff-heading, sans-serif); margin-top: -115px !important; } .mobile-crew-header { margin-left: -15px !important; margin-top: -65px !important; } .mobile-crew-title { font-size: 36px !important; font-weight: 800; line-height: 1.1; text-align: left !important; } .mobile-crew-para { font-size: 17px !important; line-height: 1.6; color: rgba(17,17,18,0.8); max-width: 92%; margin: 0 auto; padding-bottom: 48px !important; } .mobile-crew-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 18px; justify-items: center; margin-bottom: 45px; } .mobile-crew-img { width: 110px; height: 110px; border-radius: 50%; object-fit: cover; margin-bottom: 10px; box-shadow: 0 8px 25px rgba(0,0,0,0.08); } .mobile-crew-item-title { font-size: 17px; font-weight: 600; color: #111112; line-height: 1.4; } .mobile-explore-link { display: inline-block; margin-top: 18px; padding: 12px 30px; border-radius: 100px; width: 200px; text-align: center; font-weight: 600; font-size: 15px; color: #000; background: #fff; z-index: 1; text-decoration: none; overflow: hidden; transition: all 0.4s ease; } .mobile-explore-link::after { content: ""; position: absolute; top: -2px; bottom: -2px; left: -2px; right: -2px; z-index: -2; border-radius: 101px; background-image: linear-gradient(90deg, #A70C7E 0%, #A70C7E 50%, #021352 100%); background-size: 150% 150%; animation: sliderTitle3 2s ease-in-out 1s infinite alternate; } .mobile-explore-link::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #fff; z-index: -1; border-radius: 100px; transition: all 0.4s ease; } .mobile-explore-link:hover { background: transparent; color: #fff; } .mobile-explore-link:hover::before { background: transparent; } } /* home page shop scetion start here */ /* ============================================================= */ /* ========= 390×844 (Portrait) – EVENT HERO SECTION (No Images) */ /* ============================================================= */ @media (width: 390px) and (height: 844px) and (orientation: portrait) { /* 1. Hide all images */ .event-hero-gallery, .event-hero-card { display: none !important; } /* 2. Reduce full section height */ .event-hero-section { min-height: auto !important; max-height: 580px !important; /* Height reduced */ padding-top: 140px !important; /* Less top space */ padding-bottom: 18px !important; /* Less bottom space */ padding-left: 25px !important; } /* 3. Font Sizes – Adjusted for 390×844 */ .tp-portfolio-revealing-slide-heading { font-size: 38px !important; line-height: 1.2 !important; text-align: center !important; } .event-hero-text .mobile-text { display: inline !important; font-size: 16px !important; line-height: 1.5 !important; } .event-hero-text .desktop-text { display: none !important; } .tp-btn-ai { font-size: 14px !important; padding: 10px 20px !important; } } /* ============================================================= */ /* ========= 412×915 (Portrait) – EVENT HERO SECTION (No Images) */ /* ============================================================= */ @media (width: 412px) and (height: 915px) and (orientation: portrait) { .event-hero-gallery, .event-hero-card { display: none !important; } .event-hero-section { min-height: auto !important; max-height: 610px !important; padding-top: 148px !important; padding-bottom: 20px !important; padding-left: 28px !important; } .tp-portfolio-revealing-slide-heading { font-size: 40px !important; line-height: 1.2 !important; text-align: center !important; } .event-hero-text .mobile-text { display: inline !important; font-size: 17px !important; line-height: 1.5 !important; } .event-hero-text .desktop-text { display: none !important; } .tp-btn-ai { font-size: 15px !important; padding: 11px 22px !important; } } /* ============================================================= */ /* ========= 414×896 (Portrait) – EVENT HERO SECTION (No Images) */ /* ============================================================= */ @media (width: 414px) and (height: 896px) and (orientation: portrait) { .event-hero-gallery, .event-hero-card { display: none !important; } .event-hero-section { min-height: auto !important; max-height: 605px !important; padding-top: 147px !important; padding-bottom: 20px !important; padding-left: 28px !important; } .tp-portfolio-revealing-slide-heading { font-size: 40px !important; line-height: 1.2 !important; text-align: center !important; } .event-hero-text .mobile-text { display: inline !important; font-size: 17px !important; line-height: 1.5 !important; } .event-hero-text .desktop-text { display: none !important; } .tp-btn-ai { font-size: 15px !important; padding: 11px 22px !important; } } /* ============================================================= */ /* ========= 375×812 (Portrait) – EVENT HERO SECTION (No Images) */ /* ============================================================= */ @media (width: 375px) and (height: 812px) and (orientation: portrait) { .event-hero-gallery, .event-hero-card { display: none !important; } .event-hero-section { min-height: auto !important; max-height: 570px !important; padding-top: 138px !important; padding-bottom: 17px !important; padding-left: 20px !important; } .tp-portfolio-revealing-slide-heading { font-size: 37px !important; line-height: 1.2 !important; text-align: center !important; } .event-hero-text .mobile-text { display: inline !important; font-size: 16px !important; line-height: 1.5 !important; } .event-hero-text .desktop-text { display: none !important; } .tp-btn-ai { font-size: 14px !important; padding: 10px 20px !important; } } /* ============================================================= */ /* ========= 375×667 (Portrait) – EVENT HERO SECTION (No Images) */ /* ============================================================= */ @media (width: 375px) and (height: 667px) and (orientation: portrait) { .event-hero-gallery, .event-hero-card { display: none !important; } .event-hero-section { min-height: auto !important; max-height: 520px !important; padding-top: 130px !important; padding-bottom: 15px !important; padding-left: 22px !important; } .tp-portfolio-revealing-slide-heading { font-size: 35px !important; line-height: 1.2 !important; text-align: center !important; } .event-hero-text .mobile-text { display: inline !important; font-size: 15px !important; line-height: 1.5 !important; } .event-hero-text .desktop-text { display: none !important; } .tp-btn-ai { font-size: 13px !important; padding: 9px 18px !important; } } /* ============================================================= */ /* ========= 360×780 (Portrait) – EVENT HERO SECTION (No Images) */ /* ============================================================= */ @media (width: 360px) and (height: 780px) and (orientation: portrait) { .event-hero-gallery, .event-hero-card { display: none !important; } .event-hero-section { min-height: auto !important; max-height: 560px !important; padding-top: 135px !important; padding-bottom: 16px !important; padding-left: 23px !important; } .tp-portfolio-revealing-slide-heading { font-size: 36px !important; line-height: 1.2 !important; text-align: center !important; } .event-hero-text .mobile-text { display: inline !important; font-size: 15px !important; line-height: 1.5 !important; } .event-hero-text .desktop-text { display: none !important; } .tp-btn-ai { font-size: 14px !important; padding: 10px 19px !important; } } /* ============================================================= */ /* ========= 360×640 (Portrait) – EVENT HERO SECTION (No Images) */ /* ============================================================= */ @media (width: 360px) and (height: 640px) and (orientation: portrait) { .event-hero-gallery, .event-hero-card { display: none !important; } .event-hero-section { min-height: auto !important; max-height: 510px !important; padding-top: 125px !important; padding-bottom: 14px !important; padding-left: 21px !important; } .tp-portfolio-revealing-slide-heading { font-size: 34px !important; line-height: 1.2 !important; text-align: center !important; } .event-hero-text .mobile-text { display: inline !important; font-size: 15px !important; line-height: 1.5 !important; } .event-hero-text .desktop-text { display: none !important; } .tp-btn-ai { font-size: 13px !important; padding: 8px 17px !important; } } /* ============================================================= */ /* ========= 412×869 (Portrait) – EVENT HERO SECTION (No Images) */ /* ============================================================= */ @media (width: 412px) and (height: 869px) and (orientation: portrait) { .event-hero-gallery, .event-hero-card { display: none !important; } .event-hero-section { min-height: auto !important; max-height: 595px !important; padding-top: 145px !important; padding-bottom: 19px !important; padding-left: 27px !important; } .tp-portfolio-revealing-slide-heading { font-size: 39px !important; line-height: 1.2 !important; text-align: center !important; } .event-hero-text .mobile-text { display: inline !important; font-size: 17px !important; line-height: 1.5 !important; } .event-hero-text .desktop-text { display: none !important; } .tp-btn-ai { font-size: 15px !important; padding: 11px 21px !important; } } /* ============================================================= */ /* ========= 428×926 (Portrait) – EVENT HERO SECTION (No Images) */ /* ============================================================= */ @media (width: 428px) and (height: 926px) and (orientation: portrait) { .event-hero-gallery, .event-hero-card { display: none !important; } .event-hero-section { min-height: auto !important; max-height: 620px !important; padding-top: 152px !important; padding-bottom: 21px !important; padding-left: 30px !important; } .tp-portfolio-revealing-slide-heading { font-size: 41px !important; line-height: 1.2 !important; text-align: center !important; } .event-hero-text .mobile-text { display: inline !important; font-size: 18px !important; line-height: 1.5 !important; } .event-hero-text .desktop-text { display: none !important; } .tp-btn-ai { font-size: 15px !important; padding: 12px 23px !important; } } /* home page mobile Shop section end here */ /* home page nre section mobile start here */ /* ============================================================= */ /* ========= 390×844 (Portrait) – SERVICE SLIDER SECTION ========= */ /* ============================================================= */ @media (width: 390px) and (height: 844px) and (orientation: portrait) { /* Shift service list to the right */ .tp-service-ai-content { padding-left: 18px !important; margin-left: -14px; } .tp-service-ai-item { transform: translateX(13px); } /* Center the heading only */ .col-lg-8 { display: flex; justify-content: center; text-align: center; width: 100%; margin-top: -75px !important; } .tp-service-ai-title-wrap { width: 100%; text-align: center; } .tp-section-ai-title { text-align: center !important; margin: 0 auto; } /* Hide desktop grid, show slider */ .tp-service-ai-box-wrp .row { display: none !important; } .tp-service-slider-container { display: block !important; width: 100%; margin: 0 auto; position: relative; } .tp-service-slider { display: flex; transition: transform 0.5s ease; width: 100%; } .tp-service-slide { flex: 0 0 100%; max-width: 100%; padding: 0 14px; box-sizing: border-box; position: relative; } .tp-service-slide .tp-service-ai-box { width: 100%; margin: 0 auto; } .tp-service-slide .tp-service-ai-thumb img { width: 100%; height: 235px; object-fit: cover; border-radius: 11px; display: block; transform: none !important; transition: none !important; animation: none !important; } .tp-service-slide .tp-service-ai-thumb img:hover, .tp-service-slide .tp-service-ai-thumb img:active, .tp-service-ai-box:hover .tp-service-ai-thumb img { transform: scale(1) !important; transition: none !important; animation: none !important; } .tp-service-slide .tp-service-ai-content-2 { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; opacity: 1; z-index: 3; width: 100%; } .tp-service-slide .tp-service-ai-content-2 a { color: white; text-decoration: none; font-size: 23px; font-weight: 700; text-shadow: 2px 2px 4px rgba(0,0,0,0.5); } .tp-service-slide .tp-service-ai-thumb::after { opacity: 1; background: linear-gradient(180deg, rgba(17, 17, 18, 0.3) 0%, #111112 100%); } /* Slider navigation - ON IMAGE */ .tp-service-slider-nav { position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%); display: flex; justify-content: space-between; padding: 0 22px; z-index: 4; pointer-events: none; } .tp-service-slider-btn { background-color: rgba(17, 17, 18, 0.7); color: white; border: none; border-radius: 50%; width: 42px; height: 42px; font-size: 17px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; pointer-events: all; box-shadow: 0 2px 10px rgba(0,0,0,0.3); } .tp-service-slider-btn:hover { background-color: rgba(17, 17, 18, 0.9); transform: scale(1.1); } .tp-service-slider-btn:disabled { background-color: rgba(204, 204, 204, 0.5); cursor: not-allowed; transform: none; } .tp-service-slider-dots { display: flex; justify-content: center; gap: 9px; margin-top: 14px; position: relative; z-index: 2; } .tp-service-slider-dot { width: 11px; height: 11px; border-radius: 50%; background-color: #ddd; cursor: pointer; transition: all 0.3s ease; } .tp-service-slider-dot.active { background-color: #021352; transform: scale(1.2); } /* Font size scaling */ .fs-72 { font-size: 38px; } .fs-28 { font-size: 21px; } .fs-24 { font-size: 17px; } .fs-18 { font-size: 15px; } .mr-30 { margin-right: 14px; } .tp-service-ai-title { font-size: 27px !important; } .tp-service-ai-count { font-size: 15px !important; } /* Section padding */ .tp-service-area { padding: 75px 0 95px; } .pt-150 { padding-top: 75px; } .pb-170 { padding-bottom: 95px; } .pt-70 { padding-top: 38px; } .mb-80 { margin-bottom: 38px; } .tp-btn-ai { padding: 11px 22px !important; font-size: 13px !important; margin-bottom: 55px !important; margin-left: 0 !important; } .tp-service-ai-ring { display: none !important; } .tp-service-ai-content { padding-top: 28px; } .tp-service-ai-item-main { margin-bottom: 23px; } /* Text slider scaling */ .tp-text-ai-slider-wrap { transform: scale(0.48); transform-origin: top center; margin-top: -48px !important; } .tp-text-ai-slider-content { padding: 42px 0; } } /* ============================================================= */ /* ========= 412×915 (Portrait) – SERVICE SLIDER SECTION ========= */ /* ============================================================= */ @media (width: 412px) and (height: 915px) and (orientation: portrait) { .tp-service-ai-content { padding-left: 20px !important; margin-left: -16px; } .tp-service-ai-item { transform: translateX(15px); } .col-lg-8 { display: flex; justify-content: center; text-align: center; width: 100%; margin-top: -82px !important; } .tp-service-ai-title-wrap { width: 100%; text-align: center; } .tp-section-ai-title { text-align: center !important; margin: 0 auto; } .tp-service-ai-box-wrp .row { display: none !important; } .tp-service-slider-container { display: block !important; width: 100%; margin: 0 auto; position: relative; } .tp-service-slider { display: flex; transition: transform 0.5s ease; width: 100%; } .tp-service-slide { flex: 0 0 100%; max-width: 100%; padding: 0 16px; box-sizing: border-box; position: relative; } .tp-service-slide .tp-service-ai-box { width: 100%; margin: 0 auto; } .tp-service-slide .tp-service-ai-thumb img { width: 100%; height: 250px; object-fit: cover; border-radius: 12px; display: block; } .tp-service-slide .tp-service-ai-content-2 { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; opacity: 1; z-index: 3; width: 100%; } .tp-service-slide .tp-service-ai-content-2 a { color: white; text-decoration: none; font-size: 24px; font-weight: 700; text-shadow: 2px 2px 4px rgba(0,0,0,0.5); } .tp-service-slide .tp-service-ai-thumb::after { opacity: 1; background: linear-gradient(180deg, rgba(17, 17, 18, 0.3) 0%, #111112 100%); } .tp-service-slider-nav { position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%); display: flex; justify-content: space-between; padding: 0 25px; z-index: 4; pointer-events: none; } .tp-service-slider-btn { background-color: rgba(17, 17, 18, 0.7); color: white; border: none; border-radius: 50%; width: 45px; height: 45px; font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; pointer-events: all; box-shadow: 0 2px 10px rgba(0,0,0,0.3); } .tp-service-slider-btn:hover { background-color: rgba(17, 17, 18, 0.9); transform: scale(1.1); } .tp-service-slider-btn:disabled { background-color: rgba(204, 204, 204, 0.5); cursor: not-allowed; transform: none; } .tp-service-slider-dots { display: flex; justify-content: center; gap: 10px; margin-top: 15px; z-index: 2; } .tp-service-slider-dot { width: 12px; height: 12px; border-radius: 50%; background-color: #ddd; cursor: pointer; transition: all 0.3s ease; } .tp-service-slider-dot.active { background-color: #021352; transform: scale(1.2); } .fs-72 { font-size: 40px; } .fs-28 { font-size: 22px; } .fs-24 { font-size: 18px; } .fs-18 { font-size: 16px; } .mr-30 { margin-right: 15px; } .tp-service-ai-title { font-size: 29px !important; } .tp-service-ai-count { font-size: 16px !important; } .tp-service-area { padding: 82px 0 105px; } .pt-150 { padding-top: 82px; } .pb-170 { padding-bottom: 105px; } .pt-70 { padding-top: 42px; } .mb-80 { margin-bottom: 42px; } .tp-btn-ai { padding: 12px 24px !important; font-size: 14px !important; margin-bottom: 60px !important; margin-left: 0 !important; } .tp-service-ai-ring { display: none !important; } .tp-service-ai-content { padding-top: 30px; } .tp-service-ai-item-main { margin-bottom: 25px; } .tp-text-ai-slider-wrap { transform: scale(0.52); transform-origin: top center; margin-top: -52px !important; } .tp-text-ai-slider-content { padding: 45px 0; } } /* ============================================================= */ /* ========= 414×896 (Portrait) – SERVICE SLIDER SECTION ========= */ /* ============================================================= */ @media (width: 414px) and (height: 896px) and (orientation: portrait) { .tp-service-ai-content { padding-left: 20px !important; margin-left: -16px;margin-top: -40px !important; } .tp-service-ai-item { transform: translateX(15px); } .col-lg-8 { display: flex; justify-content: center; text-align: center; width: 100%; margin-top: -81px !important; } .tp-service-ai-title-wrap { width: 100%; text-align: center; } .tp-section-ai-title { text-align: center !important; margin: 0 auto; } .tp-service-ai-box-wrp .row { display: none !important; } .tp-service-slider-container { display: block !important; width: 100%; margin: 0 auto; position: relative; } .tp-service-slider { display: flex; transition: transform 0.5s ease; width: 100%; } .tp-service-slide { flex: 0 0 100%; max-width: 100%; padding: 0 16px; box-sizing: border-box; position: relative; } .tp-service-slide .tp-service-ai-box { width: 100%; margin: 0 auto; } .tp-service-slide .tp-service-ai-thumb img { width: 100%; height: 248px; object-fit: cover; border-radius: 12px; display: block; } .tp-service-slide .tp-service-ai-content-2 { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; opacity: 1; z-index: 3; width: 100%; } .tp-service-slide .tp-service-ai-content-2 a { color: white; text-decoration: none; font-size: 24px; font-weight: 700; text-shadow: 2px 2px 4px rgba(0,0,0,0.5); } .tp-service-slide .tp-service-ai-thumb::after { opacity: 1; background: linear-gradient(180deg, rgba(17, 17, 18, 0.3) 0%, #111112 100%); } .tp-service-slider-nav { position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%); display: flex; justify-content: space-between; padding: 0 25px; z-index: 4; pointer-events: none; } .tp-service-slider-btn { background-color: rgba(17, 17, 18, 0.7); color: white; border: none; border-radius: 50%; width: 45px; height: 45px; font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; pointer-events: all; box-shadow: 0 2px 10px rgba(0,0,0,0.3); } .tp-service-slider-btn:hover { background-color: rgba(17, 17, 18, 0.9); transform: scale(1.1); } .tp-service-slider-btn:disabled { background-color: rgba(204, 204, 204, 0.5); cursor: not-allowed; transform: none; } .tp-service-slider-dots { display: flex; justify-content: center; gap: 10px; margin-top: 15px; z-index: 2; } .tp-service-slider-dot { width: 12px; height: 12px; border-radius: 50%; background-color: #ddd; cursor: pointer; transition: all 0.3s ease; } .tp-service-slider-dot.active { background-color: #021352; transform: scale(1.2); } .fs-72 { font-size: 40px; } .fs-28 { font-size: 22px; } .fs-24 { font-size: 18px; } .fs-18 { font-size: 16px; } .mr-30 { margin-right: 15px; } .tp-service-ai-title { font-size: 29px !important; } .tp-service-ai-count { font-size: 16px !important; } .tp-service-area { padding: 81px 0 103px; } .pt-150 { padding-top: 81px; } .pb-170 { padding-bottom: 103px; } .pt-70 { padding-top: 41px; } .mb-80 { margin-bottom: 41px; } .tp-btn-ai { padding: 12px 24px !important; font-size: 14px !important; margin-bottom: 59px !important; margin-left: 0 !important; } .tp-service-ai-ring { display: none !important; } .tp-service-ai-content { padding-top: 30px; } .tp-service-ai-item-main { margin-bottom: 25px; } .tp-text-ai-slider-wrap { transform: scale(0.51); transform-origin: top center; margin-top: -51px !important; } .tp-text-ai-slider-content { padding: 44px 0; } } /* ============================================================= */ /* ========= 375×812 (Portrait) – SERVICE SLIDER SECTION ========= */ /* ============================================================= */ @media (width: 375px) and (height: 812px) and (orientation: portrait) { .tp-service-ai-content { padding-left: 17px !important; margin-left: -13px;margin-top: -40px !important; } .tp-service-ai-item { transform: translateX(12px); } .col-lg-8 { display: flex; justify-content: center; text-align: center; width: 100%; margin-top: -73px !important; } .tp-service-ai-title-wrap { width: 100%; text-align: center; } .tp-section-ai-title { text-align: center !important; margin: 0 auto; } .tp-service-ai-box-wrp .row { display: none !important; } .tp-service-slider-container { display: block !important; width: 100%; margin: 0 auto; position: relative; } .tp-service-slider { display: flex; transition: transform 0.5s ease; width: 100%; } .tp-service-slide { flex: 0 0 100%; max-width: 100%; padding: 0 13px; box-sizing: border-box; position: relative; } .tp-service-slide .tp-service-ai-box { width: 100%; margin: 0 auto; } .tp-service-slide .tp-service-ai-thumb img { width: 100%; height: 230px; object-fit: cover; border-radius: 11px; display: block; } .tp-service-slide .tp-service-ai-content-2 { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; opacity: 1; z-index: 3; width: 100%; } .tp-service-slide .tp-service-ai-content-2 a { color: white; text-decoration: none; font-size: 22px; font-weight: 700; text-shadow: 2px 2px 4px rgba(0,0,0,0.5); } .tp-service-slide .tp-service-ai-thumb::after { opacity: 1; background: linear-gradient(180deg, rgba(17, 17, 18, 0.3) 0%, #111112 100%); } .tp-service-slider-nav { position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%); display: flex; justify-content: space-between; padding: 0 21px; z-index: 4; pointer-events: none; } .tp-service-slider-btn { background-color: rgba(17, 17, 18, 0.7); color: white; border: none; border-radius: 50%; width: 41px; height: 41px; font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; pointer-events: all; box-shadow: 0 2px 10px rgba(0,0,0,0.3); } .tp-service-slider-btn:hover { background-color: rgba(17, 17, 18, 0.9); transform: scale(1.1); } .tp-service-slider-btn:disabled { background-color: rgba(204, 204, 204, 0.5); cursor: not-allowed; transform: none; } .tp-service-slider-dots { display: flex; justify-content: center; gap: 9px; margin-top: 14px; z-index: 2; } .tp-service-slider-dot { width: 11px; height: 11px; border-radius: 50%; background-color: #ddd; cursor: pointer; transition: all 0.3s ease; } .tp-service-slider-dot.active { background-color: #021352; transform: scale(1.2); } .fs-72 { font-size: 37px; } .fs-28 { font-size: 20px; } .fs-24 { font-size: 17px; } .fs-18 { font-size: 15px; } .mr-30 { margin-right: 13px; } .tp-service-ai-title { font-size: 26px !important; } .tp-service-ai-count { font-size: 15px !important; } .tp-service-area { padding: 73px 0 92px; } .pt-150 { padding-top: 73px; } .pb-170 { padding-bottom: 92px; } .pt-70 { padding-top: 37px; } .mb-80 { margin-bottom: 37px; } .tp-btn-ai { padding: 11px 22px !important; font-size: 13px !important; margin-bottom: 54px !important; margin-left: 0 !important; } .tp-service-ai-ring { display: none !important; } .tp-service-ai-content { padding-top: 27px; } .tp-service-ai-item-main { margin-bottom: 22px; } .tp-text-ai-slider-wrap { transform: scale(0.47); transform-origin: top center; margin-top: -47px !important; } .tp-text-ai-slider-content { padding: 41px 0; } } /* ============================================================= */ /* ========= 375×667 (Portrait) – SERVICE SLIDER SECTION ========= */ /* ============================================================= */ @media (width: 375px) and (height: 667px) and (orientation: portrait) { .tp-service-ai-content { padding-left: 15px !important; margin-left: -11px;margin-top: -40px !important; } .tp-service-ai-item { transform: translateX(10px); } .col-lg-8 { display: flex; justify-content: center; text-align: center; width: 100%; margin-top: -65px !important; } .tp-service-ai-title-wrap { width: 100%; text-align: center; } .tp-section-ai-title { text-align: center !important; margin: 0 auto; } .tp-service-ai-box-wrp .row { display: none !important; } .tp-service-slider-container { display: block !important; width: 100%; margin: 0 auto; position: relative; } .tp-service-slider { display: flex; transition: transform 0.5s ease; width: 100%; } .tp-service-slide { flex: 0 0 100%; max-width: 100%; padding: 0 11px; box-sizing: border-box; position: relative; } .tp-service-slide .tp-service-ai-box { width: 100%; margin: 0 auto; } .tp-service-slide .tp-service-ai-thumb img { width: 100%; height: 210px; object-fit: cover; border-radius: 10px; display: block; } .tp-service-slide .tp-service-ai-content-2 { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; opacity: 1; z-index: 3; width: 100%; } .tp-service-slide .tp-service-ai-content-2 a { color: white; text-decoration: none; font-size: 20px; font-weight: 700; text-shadow: 2px 2px 4px rgba(0,0,0,0.5); } .tp-service-slide .tp-service-ai-thumb::after { opacity: 1; background: linear-gradient(180deg, rgba(17, 17, 18, 0.3) 0%, #111112 100%); } .tp-service-slider-nav { position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%); display: flex; justify-content: space-between; padding: 0 18px; z-index: 4; pointer-events: none; } .tp-service-slider-btn { background-color: rgba(17, 17, 18, 0.7); color: white; border: none; border-radius: 50%; width: 38px; height: 38px; font-size: 15px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; pointer-events: all; box-shadow: 0 2px 10px rgba(0,0,0,0.3); } .tp-service-slider-btn:hover { background-color: rgba(17, 17, 18, 0.9); transform: scale(1.1); } .tp-service-slider-btn:disabled { background-color: rgba(204, 204, 204, 0.5); cursor: not-allowed; transform: none; } .tp-service-slider-dots { display: flex; justify-content: center; gap: 8px; margin-top: 12px; z-index: 2; } .tp-service-slider-dot { width: 10px; height: 10px; border-radius: 50%; background-color: #ddd; cursor: pointer; transition: all 0.3s ease; } .tp-service-slider-dot.active { background-color: #021352; transform: scale(1.2); } .fs-72 { font-size: 34px; } .fs-28 { font-size: 19px; } .fs-24 { font-size: 16px; } .fs-18 { font-size: 14px; } .mr-30 { margin-right: 12px; } .tp-service-ai-title { font-size: 24px !important; } .tp-service-ai-count { font-size: 14px !important; } .tp-service-area { padding: 65px 0 85px; } .pt-150 { padding-top: 65px; } .pb-170 { padding-bottom: 85px; } .pt-70 { padding-top: 34px; } .mb-80 { margin-bottom: 34px; } .tp-btn-ai { padding: 10px 20px !important; font-size: 12px !important; margin-bottom: 48px !important; margin-left: 0 !important; } .tp-service-ai-ring { display: none !important; } .tp-service-ai-content { padding-top: 25px; } .tp-service-ai-item-main { margin-bottom: 20px; } .tp-text-ai-slider-wrap { transform: scale(0.43); transform-origin: top center; margin-top: -43px !important; } .tp-text-ai-slider-content { padding: 38px 0; } } /* ============================================================= */ /* ========= 360×780 (Portrait) – SERVICE SLIDER SECTION ========= */ /* ============================================================= */ @media (width: 360px) and (height: 780px) and (orientation: portrait) { .tp-service-ai-content { padding-left: 16px !important; margin-left: -12px;margin-top: -40px !important; } .tp-service-ai-item { transform: translateX(11px); } .col-lg-8 { display: flex; justify-content: center; text-align: center; width: 100%; margin-top: -71px !important; } .tp-service-ai-title-wrap { width: 100%; text-align: center; } .tp-section-ai-title { text-align: center !important; margin: 0 auto; } .tp-service-ai-box-wrp .row { display: none !important; } .tp-service-slider-container { display: block !important; width: 100%; margin: 0 auto; position: relative; } .tp-service-slider { display: flex; transition: transform 0.5s ease; width: 100%; } .tp-service-slide { flex: 0 0 100%; max-width: 100%; padding: 0 12px; box-sizing: border-box; position: relative; } .tp-service-slide .tp-service-ai-box { width: 100%; margin: 0 auto; } .tp-service-slide .tp-service-ai-thumb img { width: 100%; height: 225px; object-fit: cover; border-radius: 11px; display: block; } .tp-service-slide .tp-service-ai-content-2 { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; opacity: 1; z-index: 3; width: 100%; } .tp-service-slide .tp-service-ai-content-2 a { color: white; text-decoration: none; font-size: 22px; font-weight: 700; text-shadow: 2px 2px 4px rgba(0,0,0,0.5); } .tp-service-slide .tp-service-ai-thumb::after { opacity: 1; background: linear-gradient(180deg, rgba(17, 17, 18, 0.3) 0%, #111112 100%); } .tp-service-slider-nav { position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%); display: flex; justify-content: space-between; padding: 0 20px; z-index: 4; pointer-events: none; } .tp-service-slider-btn { background-color: rgba(17, 17, 18, 0.7); color: white; border: none; border-radius: 50%; width: 40px; height: 40px; font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; pointer-events: all; box-shadow: 0 2px 10px rgba(0,0,0,0.3); } .tp-service-slider-btn:hover { background-color: rgba(17, 17, 18, 0.9); transform: scale(1.1); } .tp-service-slider-btn:disabled { background-color: rgba(204, 204, 204, 0.5); cursor: not-allowed; transform: none; } .tp-service-slider-dots { display: flex; justify-content: center; gap: 9px; margin-top: 13px; z-index: 2; } .tp-service-slider-dot { width: 11px; height: 11px; border-radius: 50%; background-color: #ddd; cursor: pointer; transition: all 0.3s ease; } .tp-service-slider-dot.active { background-color: #021352; transform: scale(1.2); } .fs-72 { font-size: 36px; } .fs-28 { font-size: 20px; } .fs-24 { font-size: 17px; } .fs-18 { font-size: 15px; } .mr-30 { margin-right: 13px; } .tp-service-ai-title { font-size: 26px !important; } .tp-service-ai-count { font-size: 15px !important; } .tp-service-area { padding: 71px 0 90px; } .pt-150 { padding-top: 71px; } .pb-170 { padding-bottom: 90px; } .pt-70 { padding-top: 36px; } .mb-80 { margin-bottom: 36px; } .tp-btn-ai { padding: 11px 21px !important; font-size: 13px !important; margin-bottom: 52px !important; margin-left: 0 !important; } .tp-service-ai-ring { display: none !important; } .tp-service-ai-content { padding-top: 26px; } .tp-service-ai-item-main { margin-bottom: 21px; } .tp-text-ai-slider-wrap { transform: scale(0.46); transform-origin: top center; margin-top: -46px !important; } .tp-text-ai-slider-content { padding: 40px 0; } } /* ============================================================= */ /* ========= 360×640 (Portrait) – SERVICE SLIDER SECTION ========= */ /* ============================================================= */ @media (width: 360px) and (height: 640px) and (orientation: portrait) { .tp-service-ai-content { padding-left: 14px !important; margin-left: -10px;margin-top: -40px !important; } .tp-service-ai-item { transform: translateX(9px); } .col-lg-8 { display: flex; justify-content: center; text-align: center; width: 100%; margin-top: -60px !important; } .tp-service-ai-title-wrap { width: 100%; text-align: center; } .tp-section-ai-title { text-align: center !important; margin: 0 auto; } .tp-service-ai-box-wrp .row { display: none !important; } .tp-service-slider-container { display: block !important; width: 100%; margin: 0 auto; position: relative; } .tp-service-slider { display: flex; transition: transform 0.5s ease; width: 100%; } .tp-service-slide { flex: 0 0 100%; max-width: 100%; padding: 0 10px; box-sizing: border-box; position: relative; } .tp-service-slide .tp-service-ai-box { width: 100%; margin: 0 auto; } .tp-service-slide .tp-service-ai-thumb img { width: 100%; height: 200px; object-fit: cover; border-radius: 10px; display: block; } .tp-service-slide .tp-service-ai-content-2 { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; opacity: 1; z-index: 3; width: 100%; } .tp-service-slide .tp-service-ai-content-2 a { color: white; text-decoration: none; font-size: 19px; font-weight: 700; text-shadow: 2px 2px 4px rgba(0,0,0,0.5); } .tp-service-slide .tp-service-ai-thumb::after { opacity: 1; background: linear-gradient(180deg, rgba(17, 17, 18, 0.3) 0%, #111112 100%); } .tp-service-slider-nav { position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%); display: flex; justify-content: space-between; padding: 0 17px; z-index: 4; pointer-events: none; } .tp-service-slider-btn { background-color: rgba(17, 17, 18, 0.7); color: white; border: none; border-radius: 50%; width: 36px; height: 36px; font-size: 14px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; pointer-events: all; box-shadow: 0 2px 10px rgba(0,0,0,0.3); } .tp-service-slider-btn:hover { background-color: rgba(17, 17, 18, 0.9); transform: scale(1.1); } .tp-service-slider-btn:disabled { background-color: rgba(204, 204, 204, 0.5); cursor: not-allowed; transform: none; } .tp-service-slider-dots { display: flex; justify-content: center; gap: 8px; margin-top: 11px; z-index: 2; } .tp-service-slider-dot { width: 10px; height: 10px; border-radius: 50%; background-color: #ddd; cursor: pointer; transition: all 0.3s ease; } .tp-service-slider-dot.active { background-color: #021352; transform: scale(1.2); } .fs-72 { font-size: 33px; } .fs-28 { font-size: 18px; } .fs-24 { font-size: 15px; } .fs-18 { font-size: 14px; } .mr-30 { margin-right: 11px; } .tp-service-ai-title { font-size: 23px !important; } .tp-service-ai-count { font-size: 13px !important; } .tp-service-area { padding: 60px 0 80px; } .pt-150 { padding-top: 60px; } .pb-170 { padding-bottom: 80px; } .pt-70 { padding-top: 32px; } .mb-80 { margin-bottom: 32px; } .tp-btn-ai { padding: 9px 18px !important; font-size: 12px !important; margin-bottom: 45px !important; margin-left: 0 !important; } .tp-service-ai-ring { display: none !important; } .tp-service-ai-content { padding-top: 24px; } .tp-service-ai-item-main { margin-bottom: 19px; } .tp-text-ai-slider-wrap { transform: scale(0.41); transform-origin: top center; margin-top: -41px !important; } .tp-text-ai-slider-content { padding: 36px 0; } } /* ============================================================= */ /* ========= 412×869 (Portrait) – SERVICE SLIDER SECTION ========= */ /* ============================================================= */ @media (width: 412px) and (height: 869px) and (orientation: portrait) { .tp-service-ai-content { padding-left: 19px !important; margin-left: -15px;margin-top: -40px !important; } .tp-service-ai-item { transform: translateX(14px); } .col-lg-8 { display: flex; justify-content: center; text-align: center; width: 100%; margin-top: -79px !important; } .tp-service-ai-title-wrap { width: 100%; text-align: center; } .tp-section-ai-title { text-align: center !important; margin: 0 auto; } .tp-service-ai-box-wrp .row { display: none !important; } .tp-service-slider-container { display: block !important; width: 100%; margin: 0 auto; position: relative; } .tp-service-slider { display: flex; transition: transform 0.5s ease; width: 100%; } .tp-service-slide { flex: 0 0 100%; max-width: 100%; padding: 0 15px; box-sizing: border-box; position: relative; } .tp-service-slide .tp-service-ai-box { width: 100%; margin: 0 auto; } .tp-service-slide .tp-service-ai-thumb img { width: 100%; height: 245px; object-fit: cover; border-radius: 12px; display: block; } .tp-service-slide .tp-service-ai-content-2 { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; opacity: 1; z-index: 3; width: 100%; } .tp-service-slide .tp-service-ai-content-2 a { color: white; text-decoration: none; font-size: 24px; font-weight: 700; text-shadow: 2px 2px 4px rgba(0,0,0,0.5); } .tp-service-slide .tp-service-ai-thumb::after { opacity: 1; background: linear-gradient(180deg, rgba(17, 17, 18, 0.3) 0%, #111112 100%); } .tp-service-slider-nav { position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%); display: flex; justify-content: space-between; padding: 0 24px; z-index: 4; pointer-events: none; } .tp-service-slider-btn { background-color: rgba(17, 17, 18, 0.7); color: white; border: none; border-radius: 50%; width: 44px; height: 44px; font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; pointer-events: all; box-shadow: 0 2px 10px rgba(0,0,0,0.3); } .tp-service-slider-btn:hover { background-color: rgba(17, 17, 18, 0.9); transform: scale(1.1); } .tp-service-slider-btn:disabled { background-color: rgba(204, 204, 204, 0.5); cursor: not-allowed; transform: none; } .tp-service-slider-dots { display: flex; justify-content: center; gap: 10px; margin-top: 15px; z-index: 2; } .tp-service-slider-dot { width: 12px; height: 12px; border-radius: 50%; background-color: #ddd; cursor: pointer; transition: all 0.3s ease; } .tp-service-slider-dot.active { background-color: #021352; transform: scale(1.2); } .fs-72 { font-size: 39px; } .fs-28 { font-size: 22px; } .fs-24 { font-size: 18px; } .fs-18 { font-size: 16px; } .mr-30 { margin-right: 15px; } .tp-service-ai-title { font-size: 28px !important; } .tp-service-ai-count { font-size: 16px !important; } .tp-service-area { padding: 79px 0 100px; } .pt-150 { padding-top: 79px; } .pb-170 { padding-bottom: 100px; } .pt-70 { padding-top: 40px; } .mb-80 { margin-bottom: 40px; } .tp-btn-ai { padding: 12px 23px !important; font-size: 14px !important; margin-bottom: 58px !important; margin-left: 0 !important; } .tp-service-ai-ring { display: none !important; } .tp-service-ai-content { padding-top: 29px; } .tp-service-ai-item-main { margin-bottom: 24px; } .tp-text-ai-slider-wrap { transform: scale(0.50); transform-origin: top center; margin-top: -50px !important; } .tp-text-ai-slider-content { padding: 43px 0; } } /* ============================================================= */ /* ========= 428×926 (Portrait) – SERVICE SLIDER SECTION ========= */ /* ============================================================= */ @media (width: 428px) and (height: 926px) and (orientation: portrait) { .tp-service-ai-content { padding-left: 21px !important; margin-left: -17px;margin-top: -40px !important; } .tp-service-ai-item { transform: translateX(16px); } .col-lg-8 { display: flex; justify-content: center; text-align: center; width: 100%; margin-top: -84px !important; } .tp-service-ai-title-wrap { width: 100%; text-align: center; } .tp-section-ai-title { text-align: center !important; margin: 0 auto; } .tp-service-ai-box-wrp .row { display: none !important; } .tp-service-slider-container { display: block !important; width: 100%; margin: 0 auto; position: relative; } .tp-service-slider { display: flex; transition: transform 0.5s ease; width: 100%; } .tp-service-slide { flex: 0 0 100%; max-width: 100%; padding: 0 17px; box-sizing: border-box; position: relative; } .tp-service-slide .tp-service-ai-box { width: 100%; margin: 0 auto; } .tp-service-slide .tp-service-ai-thumb img { width: 100%; height: 255px; object-fit: cover; border-radius: 13px; display: block; } .tp-service-slide .tp-service-ai-content-2 { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; opacity: 1; z-index: 3; width: 100%; } .tp-service-slide .tp-service-ai-content-2 a { color: white; text-decoration: none; font-size: 25px; font-weight: 700; text-shadow: 2px 2px 4px rgba(0,0,0,0.5); } .tp-service-slide .tp-service-ai-thumb::after { opacity: 1; background: linear-gradient(180deg, rgba(17, 17, 18, 0.3) 0%, #111112 100%); } .tp-service-slider-nav { position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%); display: flex; justify-content: space-between; padding: 0 26px; z-index: 4; pointer-events: none; } .tp-service-slider-btn { background-color: rgba(17, 17, 18, 0.7); color: white; border: none; border-radius: 50%; width: 46px; height: 46px; font-size: 19px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; pointer-events: all; box-shadow: 0 2px 10px rgba(0,0,0,0.3); } .tp-service-slider-btn:hover { background-color: rgba(17, 17, 18, 0.9); transform: scale(1.1); } .tp-service-slider-btn:disabled { background-color: rgba(204, 204, 204, 0.5); cursor: not-allowed; transform: none; } .tp-service-slider-dots { display: flex; justify-content: center; gap: 11px; margin-top: 16px; z-index: 2; } .tp-service-slider-dot { width: 13px; height: 13px; border-radius: 50%; background-color: #ddd; cursor: pointer; transition: all 0.3s ease; } .tp-service-slider-dot.active { background-color: #021352; transform: scale(1.2); } .fs-72 { font-size: 41px; } .fs-28 { font-size: 23px; } .fs-24 { font-size: 19px; } .fs-18 { font-size: 17px; } .mr-30 { margin-right: 16px; } .tp-service-ai-title { font-size: 30px !important; } .tp-service-ai-count { font-size: 17px !important; } .tp-service-area { padding: 84px 0 108px; } .pt-150 { padding-top: 84px; } .pb-170 { padding-bottom: 108px; } .pt-70 { padding-top: 43px; } .mb-80 { margin-bottom: 43px; } .tp-btn-ai { padding: 13px 25px !important; font-size: 15px !important; margin-bottom: 62px !important; margin-left: 0 !important; } .tp-service-ai-ring { display: none !important; } .tp-service-ai-content { padding-top: 31px; } .tp-service-ai-item-main { margin-bottom: 26px; } .tp-text-ai-slider-wrap { transform: scale(0.53); transform-origin: top center; margin-top: -53px !important; } .tp-text-ai-slider-content { padding: 46px 0; } } /* ============================================================= */ /* ========= 360×800 (Portrait) – SERVICE SLIDER SECTION ========= */ /* ============================================================= */ @media (width: 360px) and (height: 800px) and (orientation: portrait) { .tp-service-ai-content { padding-left: 17px !important; margin-left: -13px;margin-top: -40px !important;font-size: 15px !important; } .tp-service-ai-item { transform: translateX(12px); } .col-lg-8 { display: flex; justify-content: center; text-align: center; width: 100%; margin-top: -73px !important; } .tp-service-ai-title-wrap { width: 100%; text-align: center; } .tp-section-ai-title { text-align: center !important; margin: 0 auto; } .tp-service-ai-box-wrp .row { display: none !important; } .tp-service-slider-container { display: block !important; width: 100%; margin: 0 auto; position: relative; } .tp-service-slider { display: flex; transition: transform 0.5s ease; width: 100%; } .tp-service-slide { flex: 0 0 100%; max-width: 100%; padding: 0 13px; box-sizing: border-box; position: relative; } .tp-service-slide .tp-service-ai-box { width: 100%; margin: 0 auto; } .tp-service-slide .tp-service-ai-thumb img { width: 100%; height: 230px; object-fit: cover; border-radius: 11px; display: block; } .tp-service-slide .tp-service-ai-content-2 { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; opacity: 1; z-index: 3; width: 100%; } .tp-service-slide .tp-service-ai-content-2 a { color: white; text-decoration: none; font-size: 22px; font-weight: 700; text-shadow: 2px 2px 4px rgba(0,0,0,0.5); } .tp-service-slide .tp-service-ai-thumb::after { opacity: 1; background: linear-gradient(180deg, rgba(17, 17, 18, 0.3) 0%, #111112 100%); } .tp-service-slider-nav { position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%); display: flex; justify-content: space-between; padding: 0 21px; z-index: 4; pointer-events: none; } .tp-service-slider-btn { background-color: rgba(17, 17, 18, 0.7); color: white; border: none; border-radius: 50%; width: 41px; height: 41px; font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; pointer-events: all; box-shadow: 0 2px 10px rgba(0,0,0,0.3); } .tp-service-slider-btn:hover { background-color: rgba(17, 17, 18, 0.9); transform: scale(1.1); } .tp-service-slider-btn:disabled { background-color: rgba(204, 204, 204, 0.5); cursor: not-allowed; transform: none; } .tp-service-slider-dots { display: flex; justify-content: center; gap: 9px; margin-top: 14px; z-index: 2; } .tp-service-slider-dot { width: 11px; height: 11px; border-radius: 50%; background-color: #ddd; cursor: pointer; transition: all 0.3s ease; } .tp-service-slider-dot.active { background-color: #021352; transform: scale(1.2); } .fs-72 { font-size: 37px; } .fs-28 { font-size: 20px; } .fs-24 { font-size: 17px; } .fs-18 { font-size: 15px; } .mr-30 { margin-right: 13px; } .tp-service-ai-title { font-size: 26px !important; } .tp-service-ai-count { font-size: 15px !important; } .tp-service-area { padding: 73px 0 92px; } .pt-150 { padding-top: 73px; } .pb-170 { padding-bottom: 92px; } .pt-70 { padding-top: 37px; } .mb-80 { margin-bottom: 37px; } .tp-btn-ai { padding: 11px 22px !important; font-size: 13px !important; margin-bottom: 54px !important; margin-left: 0 !important; } .tp-service-ai-ring { display: none !important; } .tp-service-ai-content { padding-top: 27px; } .tp-service-ai-item-main { margin-bottom: 22px; } .tp-text-ai-slider-wrap { transform: scale(0.47); transform-origin: top center; margin-top: -47px !important; } .tp-text-ai-slider-content { padding: 41px 0; } } /* univaeal of above */ /* ============================================================= */ /* ========= UNIVERSAL MOBILE – SERVICE SLIDER SECTION ========== */ /* Works: 360px → 430px /* ============================================================= */ @media (max-width: 430.98px) and (orientation: portrait) { /* === CONTENT ADJUSTMENT === */ .tp-service-ai-content { padding-left: clamp(14px, 4.5vw, 18px) !important; margin-left: clamp(-15px, -4vw, -12px) !important; margin-top: clamp(-50px, -12vh, -35px) !important; font-size: clamp(14px, 3.8vw, 16px) !important; line-height: 1.5 !important; } .tp-service-ai-item { transform: translateX(clamp(10px, 3.3vw, 14px)) !important; } /* === CENTER TITLE === */ .col-lg-8 { display: flex !important; justify-content: center !important; text-align: center !important; width: 100% !important; margin-top: clamp(-80px, -20vh, -65px) !important; } .tp-service-ai-title-wrap, .tp-section-ai-title { width: 100% !important; text-align: center !important; margin: 0 auto !important; } /* === HIDE GRID, SHOW SLIDER === */ .tp-service-ai-box-wrp .row { display: none !important; } .tp-service-slider-container { display: block !important; width: 100% !important; margin: 0 auto !important; position: relative !important; } .tp-service-slider { display: flex !important; transition: transform 0.5s ease !important; width: 100% !important; } /* === SLIDE === */ .tp-service-slide { flex: 0 0 100% !important; max-width: 100% !important; padding: 0 clamp(10px, 3.5vw, 15px) !important; box-sizing: border-box !important; position: relative !important; } .tp-service-slide .tp-service-ai-box { width: 100% !important; margin: 0 auto !important; } .tp-service-slide .tp-service-ai-thumb img { width: 100% !important; height: clamp(210px, 55vw, 240px) !important; object-fit: cover !important; border-radius: clamp(9px, 2.8vw, 12px) !important; display: block !important; } /* === OVERLAY TEXT === */ .tp-service-slide .tp-service-ai-content-2 { position: absolute !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; text-align: center !important; opacity: 1 !important; z-index: 3 !important; width: 100% !important; padding: 0 10px !important; } .tp-service-slide .tp-service-ai-content-2 a { color: white !important; text-decoration: none !important; font-size: clamp(20px, 5.5vw, 24px) !important; font-weight: 700 !important; text-shadow: 2px 2px 4px rgba(0,0,0,0.5) !important; } .tp-service-slide .tp-service-ai-thumb::after { content: "" !important; position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; background: linear-gradient(180deg, rgba(17, 17, 18, 0.3) 0%, #111112 100%) !important; border-radius: inherit !important; opacity: 1 !important; pointer-events: none !important; } /* === NAV ARROWS === */ .tp-service-slider-nav { position: absolute !important; top: 50% !important; left: 0 !important; right: 0 !important; transform: translateY(-50%) !important; display: flex !important; justify-content: space-between !important; padding: 0 clamp(18px, 5.5vw, 24px) !important; z-index: 4 !important; pointer-events: none !important; } .tp-service-slider-btn { background-color: rgba(17, 17, 18, 0.7) !important; color: white !important; border: none !important; border-radius: 50% !important; width: clamp(38px, 10vw, 44px) !important; height: clamp(38px, 10vw, 44px) !important; font-size: clamp(15px, 4vw, 17px) !important; cursor: pointer !important; display: flex !important; align-items: center !important; justify-content: center !important; transition: all 0.3s ease !important; pointer-events: all !important; box-shadow: 0 2px 10px rgba(0,0,0,0.3) !important; } .tp-service-slider-btn:hover { background-color: rgba(17, 17, 18, 0.9) !important; transform: scale(1.1) !important; } .tp-service-slider-btn:disabled { background-color: rgba(204, 204, 204, 0.5) !important; cursor: not-allowed !important; transform: none !important; } /* === DOTS === */ .tp-service-slider-dots { display: flex !important; justify-content: center !important; gap: clamp(7px, 2.2vw, 10px) !important; margin-top: clamp(12px, 3vw, 16px) !important; z-index: 2 !important; } .tp-service-slider-dot { width: clamp(9px, 2.5vw, 12px) !important; height: clamp(9px, 2.5vw, 12px) !important; border-radius: 50% !important; background-color: #ddd !important; cursor: pointer !important; transition: all 0.3s ease !important; } .tp-service-slider-dot.active { background-color: #021352 !important; transform: scale(1.2) !important; } /* === FONT SCALING === */ .fs-72 { font-size: clamp(34px, 9vw, 40px) !important; } .fs-28 { font-size: clamp(18px, 5vw, 22px) !important; } .fs-24 { font-size: clamp(16px, 4.5vw, 19px) !important; } .fs-18 { font-size: clamp(14px, 3.8vw, 16px) !important; } .mr-30 { margin-right: clamp(10px, 3.3vw, 15px) !important; } .tp-service-ai-title { font-size: clamp(24px, 6.5vw, 28px) !important; } .tp-service-ai-count { font-size: clamp(14px, 3.8vw, 16px) !important; } /* === PADDING & SPACING === */ .tp-service-area { padding: clamp(65px, 16vh, 80px) 0 clamp(80px, 20vh, 100px) !important; } .pt-150 { padding-top: clamp(65px, 16vh, 80px) !important; } .pb-170 { padding-bottom: clamp(80px, 20vh, 100px) !important; } .pt-70 { padding-top: clamp(32px, 8vh, 40px) !important; } .mb-80 { margin-bottom: clamp(32px, 8vh, 40px) !important; } /* === BUTTON === */ .tp-btn-ai { padding: clamp(10px, 2.8vw, 12px) clamp(20px, 5.5vw, 25px) !important; font-size: clamp(12px, 3.3vw, 14px) !important; margin-bottom: clamp(48px, 12vh, 60px) !important; margin-left: 0 !important; } .tp-service-ai-ring { display: none !important; } .tp-service-ai-content { padding-top: clamp(24px, 6vh, 30px) !important; } .tp-service-ai-item-main { margin-bottom: clamp(20px, 5vh, 25px) !important; } /* === TEXT SCALING ANIMATION === */ .tp-text-ai-slider-wrap { transform: scale(clamp(0.44, 0.12vw + 0.3, 0.5)) !important; transform-origin: top center !important; margin-top: clamp(-55px, -14vh, -40px) !important; } .tp-text-ai-slider-content { padding: clamp(36px, 9vh, 45px) 0 !important; } } /* === DESKTOP: HIDE MOBILE SLIDER === */ @media (min-width: 431px) { .tp-service-slider-container { display: none !important; } .tp-service-ai-box-wrp .row { display: flex !important; } } /* home page new section ends here */ /* home page section below new marquee */ /* ============================================================= */ /* ========= 390×844 (Portrait) – PORTFOLIO SECTION (MOBILE) ==== */ /* ============================================================= */ @media (width: 390px) and (height: 844px) and (orientation: portrait) { .tp-portfolio-area .row { display: flex; flex-direction: column; margin-top: -150px !important; } .tp-portfolio-area .col-lg-7 { order: 1; width: 100%; } .tp-portfolio-area .col-xl-5, .tp-portfolio-area .col-lg-5 { order: 2; width: 100%; margin-top: -45px !important; } .tp-portfolio-ai-title.ml-80 { margin-left: 0 !important; text-align: center; } .tp-about-2-thumb.text-lg-end { text-align: center !important; } .tp-about-2-thumb img { max-width: 82% !important; height: auto !important; transform: scale(0.68) translateX(48px) !important; transform-origin: center; margin-right: 0 !important; margin-top: -55px !important; } .tp-section-ai-title { font-size: 38px !important; text-align: center; line-height: 1.2; } .tp-about-ai-para { font-size: 17px !important; text-align: center; padding-top: 18px !important; } .tp-portfolio-area .tp-header-btn { text-align: center; display: block !important; margin-top: -28px !important; padding-bottom: 30px !important; } } /* ============================================================= */ /* ========= 360×800 (Portrait) – PORTFOLIO SECTION (MOBILE) ==== */ /* ============================================================= */ @media (width: 360px) and (height: 800px) and (orientation: portrait) { .tp-portfolio-area .row { display: flex; flex-direction: column; margin-top: -140px !important; } .tp-portfolio-area .col-lg-7 { order: 1; width: 100%; } .tp-portfolio-area .col-xl-5, .tp-portfolio-area .col-lg-5 { order: 2; width: 100%; margin-top: -42px !important; } .tp-portfolio-ai-title.ml-80 { margin-left: 0 !important; text-align: center; } .tp-about-2-thumb.text-lg-end { text-align: center !important; } .tp-about-2-thumb img { max-width: 80% !important; height: auto !important; transform: scale(0.66) translateX(45px) !important; transform-origin: center; margin-right: 0 !important; margin-top: -52px !important; } .tp-section-ai-title { font-size: 36px !important; text-align: center; line-height: 1.2; } .tp-about-ai-para { font-size: 16px !important; text-align: center; padding-top: 17px !important; } .tp-portfolio-area .tp-header-btn { text-align: center; display: block !important; margin-top: -26px !important; padding-bottom: 28px !important; } } /* ============================================================= */ /* ========= 412×915 (Portrait) – PORTFOLIO SECTION (MOBILE) ==== */ /* ============================================================= */ @media (width: 412px) and (height: 915px) and (orientation: portrait) { .tp-portfolio-area .row { display: flex; flex-direction: column; margin-top: -155px !important; } .tp-portfolio-area .col-lg-7 { order: 1; width: 100%; } .tp-portfolio-area .col-xl-5, .tp-portfolio-area .col-lg-5 { order: 2; width: 100%; margin-top: -48px !important; } .tp-portfolio-ai-title.ml-80 { margin-left: 0 !important; text-align: center; } .tp-about-2-thumb.text-lg-end { text-align: center !important; } .tp-about-2-thumb img { max-width: 84% !important; height: auto !important; transform: scale(0.70) translateX(52px) !important; transform-origin: center; margin-right: 0 !important; margin-top: -58px !important; } .tp-section-ai-title { font-size: 40px !important; text-align: center; line-height: 1.2; } .tp-about-ai-para { font-size: 18px !important; text-align: center; padding-top: 19px !important; } .tp-portfolio-area .tp-header-btn { text-align: center; display: block !important; margin-top: -30px !important; padding-bottom: 32px !important; } } /* ============================================================= */ /* ========= 414×896 (Portrait) – PORTFOLIO SECTION (MOBILE) ==== */ /* ============================================================= */ @media (width: 414px) and (height: 896px) and (orientation: portrait) { .tp-portfolio-area .row { display: flex; flex-direction: column; margin-top: -154px !important; } .tp-portfolio-area .col-lg-7 { order: 1; width: 100%; } .tp-portfolio-area .col-xl-5, .tp-portfolio-area .col-lg-5 { order: 2; width: 100%; margin-top: -47px !important; } .tp-portfolio-ai-title.ml-80 { margin-left: 0 !important; text-align: center; } .tp-about-2-thumb.text-lg-end { text-align: center !important; } .tp-about-2-thumb img { max-width: 84% !important; height: auto !important; transform: scale(0.69) translateX(51px) !important; transform-origin: center; margin-right: 0 !important; margin-top: -57px !important; } .tp-section-ai-title { font-size: 40px !important; text-align: center; line-height: 1.2; } .tp-about-ai-para { font-size: 18px !important; text-align: center; padding-top: 19px !important; } .tp-portfolio-area .tp-header-btn { text-align: center; display: block !important; margin-top: -29px !important; padding-bottom: 31px !important; } } /* ============================================================= */ /* ========= 375×812 (Portrait) – PORTFOLIO SECTION (MOBILE) ==== */ /* ============================================================= */ @media (width: 375px) and (height: 812px) and (orientation: portrait) { .tp-portfolio-area .row { display: flex; flex-direction: column; margin-top: -145px !important; } .tp-portfolio-area .col-lg-7 { order: 1; width: 100%; } .tp-portfolio-area .col-xl-5, .tp-portfolio-area .col-lg-5 { order: 2; width: 100%; margin-top: -43px !important; } .tp-portfolio-ai-title.ml-80 { margin-left: 0 !important; text-align: center; } .tp-about-2-thumb.text-lg-end { text-align: center !important; } .tp-about-2-thumb img { max-width: 81% !important; height: auto !important; transform: scale(0.67) translateX(46px) !important; transform-origin: center; margin-right: 0 !important; margin-top: -53px !important; } .tp-section-ai-title { font-size: 37px !important; text-align: center; line-height: 1.2; } .tp-about-ai-para { font-size: 16px !important; text-align: center; padding-top: 17px !important; } .tp-portfolio-area .tp-header-btn { text-align: center; display: block !important; margin-top: -27px !important; padding-bottom: 29px !important; } } /* ============================================================= */ /* ========= 375×667 (Portrait) – PORTFOLIO SECTION (MOBILE) ==== */ /* ============================================================= */ @media (width: 375px) and (height: 667px) and (orientation: portrait) { .tp-portfolio-area .row { display: flex; flex-direction: column; margin-top: -135px !important; } .tp-portfolio-area .col-lg-7 { order: 1; width: 100%; } .tp-portfolio-area .col-xl-5, .tp-portfolio-area .col-lg-5 { order: 2; width: 100%; margin-top: -40px !important; } .tp-portfolio-ai-title.ml-80 { margin-left: 0 !important; text-align: center; } .tp-about-2-thumb.text-lg-end { text-align: center !important; } .tp-about-2-thumb img { max-width: 78% !important; height: auto !important; transform: scale(0.64) translateX(42px) !important; transform-origin: center; margin-right: 0 !important; margin-top: -50px !important; } .tp-section-ai-title { font-size: 35px !important; text-align: center; line-height: 1.2; } .tp-about-ai-para { font-size: 15px !important; text-align: center; padding-top: 16px !important; } .tp-portfolio-area .tp-header-btn { text-align: center; display: block !important; margin-top: -25px !important; padding-bottom: 26px !important; } } /* ============================================================= */ /* ========= 360×780 (Portrait) – PORTFOLIO SECTION (MOBILE) ==== */ /* ============================================================= */ @media (width: 360px) and (height: 780px) and (orientation: portrait) { .tp-portfolio-area .row { display: flex; flex-direction: column; margin-top: -138px !important; } .tp-portfolio-area .col-lg-7 { order: 1; width: 100%; } .tp-portfolio-area .col-xl-5, .tp-portfolio-area .col-lg-5 { order: 2; width: 100%; margin-top: -41px !important; } .tp-portfolio-ai-title.ml-80 { margin-left: 0 !important; text-align: center; } .tp-about-2-thumb.text-lg-end { text-align: center !important; } .tp-about-2-thumb img { max-width: 79% !important; height: auto !important; transform: scale(0.65) translateX(44px) !important; transform-origin: center; margin-right: 0 !important; margin-top: -51px !important; } .tp-section-ai-title { font-size: 36px !important; text-align: center; line-height: 1.2; } .tp-about-ai-para { font-size: 16px !important; text-align: center; padding-top: 17px !important; } .tp-portfolio-area .tp-header-btn { text-align: center; display: block !important; margin-top: -26px !important; padding-bottom: 27px !important; } } /* ============================================================= */ /* ========= 360×640 (Portrait) – PORTFOLIO SECTION (MOBILE) ==== */ /* ============================================================= */ @media (width: 360px) and (height: 640px) and (orientation: portrait) { .tp-portfolio-area .row { display: flex; flex-direction: column; margin-top: -130px !important; } .tp-portfolio-area .col-lg-7 { order: 1; width: 100%; } .tp-portfolio-area .col-xl-5, .tp-portfolio-area .col-lg-5 { order: 2; width: 100%; margin-top: -38px !important; } .tp-portfolio-ai-title.ml-80 { margin-left: 0 !important; text-align: center; } .tp-about-2-thumb.text-lg-end { text-align: center !important; } .tp-about-2-thumb img { max-width: 76% !important; height: auto !important; transform: scale(0.62) translateX(40px) !important; transform-origin: center; margin-right: 0 !important; padding-left:50px !important; margin-top: -48px !important; } .tp-section-ai-title { font-size: 34px !important; text-align: center; line-height: 1.2; } .tp-about-ai-para { font-size: 15px !important; text-align: center; padding-top: 15px !important; } .tp-portfolio-area .tp-header-btn { text-align: center; display: block !important; margin-top: -24px !important; padding-bottom: 25px !important; } } /* ============================================================= */ /* ========= 412×869 (Portrait) – PORTFOLIO SECTION (MOBILE) ==== */ /* ============================================================= */ @media (width: 412px) and (height: 869px) and (orientation: portrait) { .tp-portfolio-area .row { display: flex; flex-direction: column; margin-top: -152px !important; } .tp-portfolio-area .col-lg-7 { order: 1; width: 100%; } .tp-portfolio-area .col-xl-5, .tp-portfolio-area .col-lg-5 { order: 2; width: 100%; margin-top: -46px !important; } .tp-portfolio-ai-title.ml-80 { margin-left: 0 !important; text-align: center; } .tp-about-2-thumb.text-lg-end { text-align: center !important; } .tp-about-2-thumb img { max-width: 83% !important; height: auto !important; transform: scale(0.69) translateX(50px) !important; transform-origin: center; margin-right: 0 !important; margin-top: -56px !important; } .tp-section-ai-title { font-size: 39px !important; text-align: center; line-height: 1.2; } .tp-about-ai-para { font-size: 18px !important; text-align: center; padding-top: 19px !important; } .tp-portfolio-area .tp-header-btn { text-align: center; display: block !important; margin-top: -29px !important; padding-bottom: 31px !important; } } /* ============================================================= */ /* ========= 428×926 (Portrait) – PORTFOLIO SECTION (MOBILE) ==== */ /* ============================================================= */ @media (width: 428px) and (height: 926px) and (orientation: portrait) { .tp-portfolio-area .row { display: flex; flex-direction: column; margin-top: -157px !important; } .tp-portfolio-area .col-lg-7 { order: 1; width: 100%; } .tp-portfolio-area .col-xl-5, .tp-portfolio-area .col-lg-5 { order: 2; width: 100%; margin-top: -49px !important; } .tp-portfolio-ai-title.ml-80 { margin-left: 0 !important; text-align: center; } .tp-about-2-thumb.text-lg-end { text-align: center !important; } .tp-about-2-thumb img { max-width: 85% !important; height: auto !important; transform: scale(0.71) translateX(54px) !important; transform-origin: center; margin-right: 0 !important; margin-top: -59px !important; } .tp-section-ai-title { font-size: 41px !important; text-align: center; line-height: 1.2; } .tp-about-ai-para { font-size: 19px !important; text-align: center; padding-top: 20px !important; } .tp-portfolio-area .tp-header-btn { text-align: center; display: block !important; margin-top: -31px !important; padding-bottom: 33px !important; } } /* home page conact form faq */ /* ============================================================= */ /* ========= 390×844 (Portrait) – FAQ + CONTACT FORM SECTION ==== */ /* ============================================================= */ @media (width: 390px) and (height: 844px) and (orientation: portrait) { /* Stack: Contact Form first, FAQ below */ .faq-form-wrapper { display: flex !important; flex-direction: column !important; gap: 32px !important; align-items: center !important; padding: 0 8px !important; } .form-container { order: 1 !important; width: 100% !important; max-width: 100% !important; } .faq-container-1000 { order: 2 !important; width: 100% !important; max-width: 100% !important; } .al-faq-area { padding: 55px 0 85px !important; } .al-faq-title-box { margin-bottom: 55px !important; } .al-faq-form-content { margin-top: 0 !important; } /* Accordion Button & Icon */ .accordion-icon { width: 23px !important; height: 23px !important; margin-left: 7px !important; margin-top: -68px !important; } .accordion-icon::before { height: 2.4px !important; } .accordion-icon::after { width: 2.4px !important; } .accordion-buttons { gap: 9px !important; padding: 11px 0 !important; font-size: 17px !important; } /* Contact Form Box */ .al-faq-form-box { width: 100% !important; max-width: 380px !important; margin: 0 auto !important; } /* Inputs */ .al-faq-input input, .al-faq-input textarea { height: 55px !important; font-size: 16px !important; } .al-faq-input textarea { height: 120px !important; } /* Submit Button */ .tp-btn-wide-here { width: 100% !important; max-width: 300px !important; height: 48px !important; font-size: 16px !important; display: flex !important; align-items: center !important; justify-content: center !important; margin: 0 auto !important; } /* Typography */ .al-faq-form-title, .al-section-title { font-size: 38px !important; text-align: center !important; line-height: 1.2; } .al-faq-form-content p, .accordion-body p { font-size: 15px !important; } .accordion-body { padding: 14px 0 !important; } } /* ============================================================= */ /* ========= 360×800 (Portrait) – FAQ + CONTACT FORM SECTION ==== */ /* ============================================================= */ @media (width: 360px) and (height: 800px) and (orientation: portrait) { .faq-form-wrapper { display: flex !important; flex-direction: column !important; gap: 30px !important; align-items: center !important; padding: 0 6px !important; } .form-container { order: 1 !important; width: 100% !important; max-width: 100% !important; } .faq-container-1000 { order: 2 !important; width: 100% !important; max-width: 100% !important; } .al-faq-area { padding: 52px 0 80px !important; } .al-faq-title-box { margin-bottom: 52px !important; } .al-faq-form-content { margin-top: 0 !important; } .accordion-icon { width: 22px !important; height: 22px !important; margin-left: 6px !important; margin-top: -65px !important; } .accordion-icon::before { height: 2.3px !important; } .accordion-icon::after { width: 2.3px !important; } .accordion-buttons { gap: 8px !important; padding: 10px 0 !important; font-size: 16px !important; } .al-faq-form-box { width: 100% !important; max-width: 350px !important; margin: 0 auto !important; } .al-faq-input input, .al-faq-input textarea { height: 52px !important; font-size: 15px !important; } .al-faq-input textarea { height: 115px !important; } .tp-btn-wide-here { width: 100% !important; max-width: 280px !important; height: 46px !important; font-size: 15px !important; display: flex !important; align-items: center !important; justify-content: center !important; margin: 0 auto !important; } .al-faq-form-title, .al-section-title { font-size: 36px !important; text-align: center !important; line-height: 1.2; } .al-faq-form-content p, .accordion-body p { font-size: 14px !important; } .accordion-body { padding: 13px 0 !important; } } /* ============================================================= */ /* ========= 412×915 (Portrait) – FAQ + CONTACT FORM SECTION ==== */ /* ============================================================= */ @media (width: 412px) and (height: 915px) and (orientation: portrait) { .faq-form-wrapper { display: flex !important; flex-direction: column !important; gap: 34px !important; align-items: center !important; padding: 0 10px !important; } .form-container { order: 1 !important; width: 100% !important; max-width: 100% !important; } .faq-container-1000 { order: 2 !important; width: 100% !important; max-width: 100% !important; } .al-faq-area { padding: 58px 0 88px !important; } .al-faq-title-box { margin-bottom: 58px !important; } .al-faq-form-content { margin-top: 0 !important; } .accordion-icon { width: 24px !important; height: 24px !important; margin-left: 8px !important; margin-top: -70px !important; } .accordion-icon::before { height: 2.5px !important; } .accordion-icon::after { width: 2.5px !important; } .accordion-buttons { gap: 10px !important; padding: 12px 0 !important; font-size: 18px !important; } .al-faq-form-box { width: 100% !important; max-width: 400px !important; margin: 0 auto !important; } .al-faq-input input, .al-faq-input textarea { height: 57px !important; font-size: 17px !important; } .al-faq-input textarea { height: 125px !important; } .tp-btn-wide-here { width: 100% !important; max-width: 310px !important; height: 50px !important; font-size: 17px !important; display: flex !important; align-items: center !important; justify-content: center !important; margin: 0 auto !important; } .al-faq-form-title, .al-section-title { font-size: 40px !important; text-align: center !important; line-height: 1.2; } .al-faq-form-content p, .accordion-body p { font-size: 16px !important; } .accordion-body { padding: 15px 0 !important; } } /* ============================================================= */ /* ========= 414×896 (Portrait) – FAQ + CONTACT FORM SECTION ==== */ /* ============================================================= */ @media (width: 414px) and (height: 896px) and (orientation: portrait) { .faq-form-wrapper { display: flex !important; flex-direction: column !important; gap: 33px !important; align-items: center !important; padding: 0 10px !important; } .form-container { order: 1 !important; width: 100% !important; max-width: 100% !important; } .faq-container-1000 { order: 2 !important; width: 100% !important; max-width: 100% !important; } .al-faq-area { padding: 57px 0 87px !important; } .al-faq-title-box { margin-bottom: 57px !important; } .al-faq-form-content { margin-top: 0 !important; } .accordion-icon { width: 24px !important; height: 24px !important; margin-left: 8px !important; margin-top: -69px !important; } .accordion-icon::before { height: 2.5px !important; } .accordion-icon::after { width: 2.5px !important; } .accordion-buttons { gap: 10px !important; padding: 12px 0 !important; font-size: 18px !important; } .al-faq-form-box { width: 100% !important; max-width: 395px !important; margin: 0 auto !important; } .al-faq-input input, .al-faq-input textarea { height: 56px !important; font-size: 17px !important; } .al-faq-input textarea { height: 123px !important; } .tp-btn-wide-here { width: 100% !important; max-width: 308px !important; height: 49px !important; font-size: 17px !important; display: flex !important; align-items: center !important; justify-content: center !important; margin: 0 auto !important; } .al-faq-form-title, .al-section-title { font-size: 39px !important; text-align: center !important; line-height: 1.2; } .al-faq-form-content p, .accordion-body p { font-size: 16px !important; } .accordion-body { padding: 14px 0 !important; } } /* ============================================================= */ /* ========= 375×812 (Portrait) – FAQ + CONTACT FORM SECTION ==== */ /* ============================================================= */ @media (width: 375px) and (height: 812px) and (orientation: portrait) { .faq-form-wrapper { display: flex !important; flex-direction: column !important; gap: 31px !important; align-items: center !important; padding: 0 7px !important; } .form-container { order: 1 !important; width: 100% !important; max-width: 100% !important; } .faq-container-1000 { order: 2 !important; width: 100% !important; max-width: 100% !important; } .al-faq-area { padding: 53px 0 82px !important; } .al-faq-title-box { margin-bottom: 53px !important; } .al-faq-form-content { margin-top: 0 !important; } .accordion-icon { width: 22px !important; height: 22px !important; margin-left: 7px !important; margin-top: -66px !important; } .accordion-icon::before { height: 2.3px !important; } .accordion-icon::after { width: 2.3px !important; } .accordion-buttons { gap: 9px !important; padding: 11px 0 !important; font-size: 17px !important; } .al-faq-form-box { width: 100% !important; max-width: 360px !important; margin: 0 auto !important; } .al-faq-input input, .al-faq-input textarea { height: 53px !important; font-size: 15px !important; } .al-faq-input textarea { height: 118px !important; } .tp-btn-wide-here { width: 100% !important; max-width: 290px !important; height: 47px !important; font-size: 16px !important; display: flex !important; align-items: center !important; justify-content: center !important; margin: 0 auto !important; } .al-faq-form-title, .al-section-title { font-size: 37px !important; text-align: center !important; line-height: 1.2; } .al-faq-form-content p, .accordion-body p { font-size: 15px !important; } .accordion-body { padding: 13px 0 !important; } } /* ============================================================= */ /* ========= 375×667 (Portrait) – FAQ + CONTACT FORM SECTION ==== */ /* ============================================================= */ @media (width: 375px) and (height: 667px) and (orientation: portrait) { .faq-form-wrapper { display: flex !important; flex-direction: column !important; gap: 28px !important; align-items: center !important; padding: 0 6px !important; } .form-container { order: 1 !important; width: 100% !important; max-width: 100% !important; } .faq-container-1000 { order: 2 !important; width: 100% !important; max-width: 100% !important; } .al-faq-area { padding: 48px 0 75px !important; } .al-faq-title-box { margin-bottom: 48px !important; } .al-faq-form-content { margin-top: 0 !important; } .accordion-icon { width: 21px !important; height: 21px !important; margin-left: 6px !important; margin-top: -60px !important; } .accordion-icon::before { height: 2.2px !important; } .accordion-icon::after { width: 2.2px !important; } .accordion-buttons { gap: 8px !important; padding: 10px 0 !important; font-size: 16px !important; } .al-faq-form-box { width: 100% !important; max-width: 340px !important; margin: 0 auto !important; } .al-faq-input input, .al-faq-input textarea { height: 50px !important; font-size: 15px !important; } .al-faq-input textarea { height: 110px !important; } .tp-btn-wide-here { width: 100% !important; max-width: 270px !important; height: 45px !important; font-size: 15px !important; display: flex !important; align-items: center !important; justify-content: center !important; margin: 0 auto !important; } .al-faq-form-title, .al-section-title { font-size: 35px !important; text-align: center !important; line-height: 1.2; } .al-faq-form-content p, .accordion-body p { font-size: 14px !important; } .accordion-body { padding: 12px 0 !important; } } /* ============================================================= */ /* ========= 360×780 (Portrait) – FAQ + CONTACT FORM SECTION ==== */ /* ============================================================= */ @media (width: 360px) and (height: 780px) and (orientation: portrait) { .faq-form-wrapper { display: flex !important; flex-direction: column !important; gap: 29px !important; align-items: center !important; padding: 0 6px !important; } .form-container { order: 1 !important; width: 100% !important; max-width: 100% !important; } .faq-container-1000 { order: 2 !important; width: 100% !important; max-width: 100% !important; } .al-faq-area { padding: 51px 0 79px !important; } .al-faq-title-box { margin-bottom: 51px !important; } .al-faq-form-content { margin-top: 0 !important; } .accordion-icon { width: 22px !important; height: 22px !important; margin-left: 6px !important; margin-top: -64px !important; } .accordion-icon::before { height: 2.3px !important; } .accordion-icon::after { width: 2.3px !important; } .accordion-buttons { gap: 8px !important; padding: 10px 0 !important; font-size: 16px !important; } .al-faq-form-box { width: 100% !important; max-width: 345px !important; margin: 0 auto !important; } .al-faq-input input, .al-faq-input textarea { height: 51px !important; font-size: 15px !important; } .al-faq-input textarea { height: 113px !important; } .tp-btn-wide-here { width: 100% !important; max-width: 275px !important; height: 46px !important; font-size: 15px !important; display: flex !important; align-items: center !important; justify-content: center !important; margin: 0 auto !important; } .al-faq-form-title, .al-section-title { font-size: 36px !important; text-align: center !important; line-height: 1.2; } .al-faq-form-content p, .accordion-body p { font-size: 14px !important; } .accordion-body { padding: 13px 0 !important; } } /* ============================================================= */ /* ========= 360×640 (Portrait) – FAQ + CONTACT FORM SECTION ==== */ /* ============================================================= */ @media (width: 360px) and (height: 640px) and (orientation: portrait) { .faq-form-wrapper { display: flex !important; flex-direction: column !important; gap: 26px !important; align-items: center !important; padding: 0 5px !important; } .form-container { order: 1 !important; width: 100% !important; max-width: 100% !important; } .faq-container-1000 { order: 2 !important; width: 100% !important; max-width: 100% !important; } .al-faq-area { padding: 45px 0 70px !important; } .al-faq-title-box { margin-bottom: 45px !important; } .al-faq-form-content { margin-top: 0 !important; } .accordion-icon { width: 20px !important; height: 20px !important; margin-left: 5px !important; margin-top: -58px !important; } .accordion-icon::before { height: 2.1px !important; } .accordion-icon::after { width: 2.1px !important; } .accordion-buttons { gap: 7px !important; padding: 9px 0 !important; font-size: 15px !important; } .al-faq-form-box { width: 100% !important; max-width: 330px !important; margin: 0 auto !important; } .al-faq-input input, .al-faq-input textarea { height: 48px !important; font-size: 14px !important; } .al-faq-input textarea { height: 105px !important; } .tp-btn-wide-here { width: 100% !important; max-width: 260px !important; height: 44px !important; font-size: 14px !important; display: flex !important; align-items: center !important; justify-content: center !important; margin: 0 auto !important; } .al-faq-form-title, .al-section-title { font-size: 34px !important; text-align: center !important; line-height: 1.2; } .al-faq-form-content p, .accordion-body p { font-size: 13px !important; } .accordion-body { padding: 11px 0 !important; } } /* ============================================================= */ /* ========= 412×869 (Portrait) – FAQ + CONTACT FORM SECTION ==== */ /* ============================================================= */ @media (width: 412px) and (height: 869px) and (orientation: portrait) { .faq-form-wrapper { display: flex !important; flex-direction: column !important; gap: 33px !important; align-items: center !important; padding: 0 9px !important; } .form-container { order: 1 !important; width: 100% !important; max-width: 100% !important; } .faq-container-1000 { order: 2 !important; width: 100% !important; max-width: 100% !important; } .al-faq-area { padding: 56px 0 86px !important; } .al-faq-title-box { margin-bottom: 56px !important; } .al-faq-form-content { margin-top: 0 !important; } .accordion-icon { width: 24px !important; height: 24px !important; margin-left: 8px !important; margin-top: -68px !important; } .accordion-icon::before { height: 2.5px !important; } .accordion-icon::after { width: 2.5px !important; } .accordion-buttons { gap: 10px !important; padding: 12px 0 !important; font-size: 17px !important; } .al-faq-form-box { width: 100% !important; max-width: 390px !important; margin: 0 auto !important; } .al-faq-input input, .al-faq-input textarea { height: 56px !important; font-size: 16px !important; } .al-faq-input textarea { height: 122px !important; } .tp-btn-wide-here { width: 100% !important; max-width: 305px !important; height: 49px !important; font-size: 16px !important; display: flex !important; align-items: center !important; justify-content: center !important; margin: 0 auto !important; } .al-faq-form-title, .al-section-title { font-size: 39px !important; text-align: center !important; line-height: 1.2; } .al-faq-form-content p, .accordion-body p { font-size: 15px !important; } .accordion-body { padding: 14px 0 !important; } } /* ============================================================= */ /* ========= 428×926 (Portrait) – FAQ + CONTACT FORM SECTION ==== */ /* ============================================================= */ @media (width: 428px) and (height: 926px) and (orientation: portrait) { .faq-form-wrapper { display: flex !important; flex-direction: column !important; gap: 35px !important; align-items: center !important; padding: 0 11px !important; } .form-container { order: 1 !important; width: 100% !important; max-width: 100% !important; } .faq-container-1000 { order: 2 !important; width: 100% !important; max-width: 100% !important; } .al-faq-area { padding: 60px 0 90px !important; } .al-faq-title-box { margin-bottom: 60px !important; } .al-faq-form-content { margin-top: 0 !important; } .accordion-icon { width: 25px !important; height: 25px !important; margin-left: 9px !important; margin-top: -72px !important; } .accordion-icon::before { height: 2.6px !important; } .accordion-icon::after { width: 2.6px !important; } .accordion-buttons { gap: 11px !important; padding: 13px 0 !important; font-size: 18px !important; } .al-faq-form-box { width: 100% !important; max-width: 410px !important; margin: 0 auto !important; } .al-faq-input input, .al-faq-input textarea { height: 58px !important; font-size: 17px !important; } .al-faq-input textarea { height: 128px !important; } .tp-btn-wide-here { width: 100% !important; max-width: 320px !important; height: 51px !important; font-size: 17px !important; display: flex !important; align-items: center !important; justify-content: center !important; margin: 0 auto !important; } .al-faq-form-title, .al-section-title { font-size: 41px !important; text-align: center !important; line-height: 1.2; } .al-faq-form-content p, .accordion-body p { font-size: 16px !important; } .accordion-body { padding: 15px 0 !important; } } /* ============================================================= */ /* ============== NEW MOBILE RESOLUTIONS (SKIP OLD) ============ */ /* ============================================================= */ /* ====================== 320×568 (iPhone SE) ================== */ @media (width: 320px) and (height: 568px) and (orientation: portrait) { /* EVENT HERO */ .event-hero-gallery, .event-hero-card { display: none !important; } .event-hero-section { max-height: 480px !important; padding-top: 110px !important; padding-bottom: 12px !important; padding-left: 18px !important; } .tp-portfolio-revealing-slide-heading { font-size: 32px !important; } .event-hero-text .mobile-text { font-size: 14px !important; } .tp-btn-ai { font-size: 12px !important; padding: 7px 15px !important; } /* SERVICE SLIDER */ .tp-service-ai-content { padding-left: 12px !important; margin-left: -8px; } .col-lg-8 { margin-top: -55px !important; } .tp-service-slide .tp-service-ai-thumb img { height: 180px; } .fs-72 { font-size: 31px; } .fs-28 { font-size: 17px; } .tp-service-area { padding: 55px 0 75px; } .tp-text-ai-slider-wrap { transform: scale(0.38); margin-top: -38px !important; } /* PORTFOLIO */ .tp-portfolio-area .row { margin-top: -125px !important; } .tp-portfolio-area .col-xl-5, .tp-portfolio-area .col-lg-5 { margin-top: -35px !important; } .tp-about-2-thumb img { max-width: 74% !important; transform: scale(0.60) translateX(38px) !important; margin-top: -45px !important; } .tp-section-ai-title { font-size: 32px !important; } .tp-about-ai-para { font-size: 14px !important; padding-top: 14px !important; } /* FAQ + CONTACT */ .faq-form-wrapper { gap: 24px !important; padding: 0 4px !important; } .al-faq-area { padding: 40px 0 65px !important; } .al-faq-title-box { margin-bottom: 40px !important; } .accordion-icon { width: 19px !important; height: 19px !important; margin-top: -55px !important; } .al-faq-form-box { max-width: 300px !important; } .al-faq-input input, .al-faq-input textarea { height: 45px !important; font-size: 13px !important; } .tp-btn-wide-here { max-width: 240px !important; height: 42px !important; font-size: 13px !important; } .al-section-title { font-size: 32px !important; } } /* ====================== 414×736 (iPhone 6+/7+/8+) ============= */ @media (width: 414px) and (height: 736px) and (orientation: portrait) { /* EVENT HERO */ .event-hero-section { max-height: 560px !important; padding-top: 135px !important; padding-left: 26px !important; } .tp-portfolio-revealing-slide-heading { font-size: 38px !important; } .event-hero-text .mobile-text { font-size: 16px !important; } .tp-btn-ai { font-size: 14px !important; padding: 10px 20px !important; } /* SERVICE SLIDER */ .tp-service-ai-content { padding-left: 18px !important; margin-left: -14px; } .col-lg-8 { margin-top: -75px !important; } .tp-service-slide .tp-service-ai-thumb img { height: 235px; } .fs-72 { font-size: 38px; } .tp-service-area { padding: 75px 0 95px; } .tp-text-ai-slider-wrap { transform: scale(0.48); margin-top: -48px !important; } /* PORTFOLIO */ .tp-portfolio-area .row { margin-top: -150px !important; } .tp-portfolio-area .col-xl-5, .tp-portfolio-area .col-lg-5 { margin-top: -45px !important; } .tp-about-2-thumb img { max-width: 82% !important; transform: scale(0.68) translateX(48px) !important; margin-top: -55px !important; } .tp-section-ai-title { font-size: 38px !important; } .tp-about-ai-para { font-size: 17px !important; padding-top: 18px !important; } /* FAQ + CONTACT */ .faq-form-wrapper { gap: 32px !important; padding: 0 8px !important; } .al-faq-area { padding: 55px 0 85px !important; } .al-faq-title-box { margin-bottom: 55px !important; } .accordion-icon { width: 23px !important; height: 23px !important; margin-top: -68px !important; } .al-faq-form-box { max-width: 380px !important; } .al-faq-input input, .al-faq-input textarea { height: 55px !important; font-size: 16px !important; } .tp-btn-wide-here { max-width: 300px !important; height: 48px !important; font-size: 16px !important; } .al-section-title { font-size: 38px !important; } } /* ====================== 393×852 (iPhone 14 Pro) =============== */ @media (width: 393px) and (height: 852px) and (orientation: portrait) { /* EVENT HERO */ .event-hero-section { max-height: 585px !important; padding-top: 141px !important; padding-left: 25px !important; } .tp-portfolio-revealing-slide-heading { font-size: 38px !important; } .tp-btn-ai { font-size: 14px !important; } /* SERVICE SLIDER */ .tp-service-ai-content { padding-left: 18px !important; margin-left: -14px; } .col-lg-8 { margin-top: -76px !important; } .tp-service-slide .tp-service-ai-thumb img { height: 237px; } .tp-service-area { padding: 76px 0 96px; } /* PORTFOLIO */ .tp-portfolio-area .row { margin-top: -151px !important; } .tp-about-2-thumb img { max-width: 82% !important; transform: scale(0.68) translateX(48px) !important; margin-top: -56px !important; } .tp-section-ai-title { font-size: 38px !important; } /* FAQ + CONTACT */ .faq-form-wrapper { gap: 32px !important; padding: 0 8px !important; } .al-faq-area { padding: 56px 0 86px !important; } .al-faq-form-box { max-width: 380px !important; } .tp-btn-wide-here { max-width: 300px !important; height: 48px !important; } .al-section-title { font-size: 38px !important; } } /* ====================== 430×932 (iPhone 14/15 Pro Max) ======== */ @media (width: 430px) and (height: 932px) and (orientation: portrait) { /* EVENT HERO */ .event-hero-section { max-height: 625px !important; padding-top: 153px !important; padding-left: 30px !important; } .tp-portfolio-revealing-slide-heading { font-size: 41px !important; } .tp-btn-ai { font-size: 15px !important; padding: 12px 23px !important; } /* SERVICE SLIDER */ .tp-service-ai-content { padding-left: 21px !important; margin-left: -17px; } .col-lg-8 { margin-top: -85px !important; } .tp-service-slide .tp-service-ai-thumb img { height: 258px; } .fs-72 { font-size: 41px; } .tp-service-area { padding: 85px 0 110px; } .tp-text-ai-slider-wrap { transform: scale(0.54); margin-top: -54px !important; } /* PORTFOLIO */ .tp-portfolio-area .row { margin-top: -158px !important; } .tp-portfolio-area .col-xl-5, .tp-portfolio-area .col-lg-5 { margin-top: -50px !important; } .tp-about-2-thumb img { max-width: 85% !important; transform: scale(0.71) translateX(54px) !important; margin-top: -60px !important; } .tp-section-ai-title { font-size: 41px !important; } .tp-about-ai-para { font-size: 19px !important; padding-top: 20px !important; } /* FAQ + CONTACT */ .faq-form-wrapper { gap: 35px !important; padding: 0 11px !important; } .al-faq-area { padding: 60px 0 90px !important; } .al-faq-title-box { margin-bottom: 60px !important; } .accordion-icon { width: 25px !important; height: 25px !important; margin-top: -72px !important; } .al-faq-form-box { max-width: 410px !important; } .al-faq-input input, .al-faq-input textarea { height: 58px !important; font-size: 17px !important; } .tp-btn-wide-here { max-width: 320px !important; height: 51px !important; font-size: 17px !important; } .al-section-title { font-size: 41px !important; } } /* ====================== 360×740 (Galaxy S8/S9) ================ */ @media (width: 360px) and (height: 740px) and (orientation: portrait) { /* EVENT HERO */ .event-hero-section { max-height: 540px !important; padding-top: 130px !important; } .tp-portfolio-revealing-slide-heading { font-size: 35px !important; } /* SERVICE SLIDER */ .tp-service-ai-content { padding-left: 15px !important; } .col-lg-8 { margin-top: -68px !important; } .tp-service-slide .tp-service-ai-thumb img { height: 215px; } /* PORTFOLIO */ .tp-portfolio-area .row { margin-top: -135px !important; } .tp-about-2-thumb img { max-width: 78% !important; transform: scale(0.64) translateX(42px) !important; } /* FAQ + CONTACT */ .faq-form-wrapper { gap: 28px !important; } .al-faq-area { padding: 50px 0 78px !important; } .al-faq-form-box { max-width: 340px !important; } } /* ====================== 360×760 (Galaxy S10/S20) ============== */ @media (width: 360px) and (height: 760px) and (orientation: portrait) { /* Same as 360×740 but slightly taller */ .event-hero-section { max-height: 545px !important; padding-top: 132px !important; } .tp-portfolio-area .row { margin-top: -136px !important; } .al-faq-area { padding: 51px 0 79px !important; } } /* ====================== 360×770 (Galaxy S22 Ultra) =========== */ @media (width: 360px) and (height: 770px) and (orientation: portrait) { .event-hero-section { max-height: 550px !important; padding-top: 133px !important; } .tp-portfolio-area .row { margin-top: -137px !important; } .al-faq-area { padding: 52px 0 80px !important; } .tp-service-area { padding: 72px 0 92px; } } /* ===================================================== */ /* UNIVERSAL MOBILE – ALL PHONES (320px to 430px) */ /* Hides Desktop | Shows Mobile Layout */ /* ===================================================== */ @media (max-width: 430.98px) and (orientation: portrait) { /* === HIDE DESKTOP PARTS === */ .utsoraa-why-utsoraa .col-lg-5, .utsoraa-why-utsoraa .col-lg-7, .utsoraa-why-utsoraa .tp-portfolio-cst-list-wrap, .utsoraa-why-utsoraa .tp-portfolio-cst-img-wrapper { display: none !important; } /* === SHOW MOBILE LAYOUT === */ .mobile-only-layout { display: block !important; position: relative; margin-top: -147px !important; margin-left: 0 !important; width: 100% !important; z-index: 9999 !important; background: white !important; padding: 28px 14px !important; } .mobile-only-layout .mobile-heading { font-size: 38px !important; text-align: center !important; padding-left: 10px !important; padding-right: 10px !important; line-height: 1.2; } .mobile-only-layout .mobile-para { font-size: 18px !important; margin-bottom: 28px !important; line-height: 1.6; text-align: center; } .mobile-only-layout .mobile-divider { margin: 24px 0 !important; border-top: 1px solid black !important; } .mobile-slider-container { position: relative; height: 118px; overflow: hidden; margin-top: -38px !important; } .mobile-slide-item { position: absolute; top: 0; left: 0; width: 100%; opacity: 0; transform: translateX(100%); transition: all 0.5s ease-in-out; padding: 0 10px; } .mobile-slide-item.active { opacity: 1; transform: translateX(0); } .mobile-slide-item.prev { transform: translateX(-100%); margin-top: -88px !important; } .mobile-only-layout .item-title { font-size: 23px !important; margin-bottom: 9px !important; padding-top: 28px !important; font-weight: 600; } .mobile-only-layout .item-desc { font-size: 18px !important; color: #666 !important; line-height: 1.5; } .mobile-only-layout .mobile-pagination { margin-top: 28px !important; text-align: center; } .mobile-pagination .dot { cursor: pointer; display: inline-block; width: 8px; height: 8px; margin: 0 5px; background-color: #ccc; border-radius: 50%; transition: background-color 0.3s ease; } .mobile-pagination .dot.active { background-color: #021352; } } /* ===================================================== */ /* UNIVERSAL MOBILE – EVENT HERO SECTION (ALL PHONES) */ /* Hides Images | Shows Mobile Text | Centers Content */ /* ===================================================== */ @media (max-width: 430.98px) and (orientation: portrait) { /* === HIDE DESKTOP IMAGES === */ .event-hero-gallery, .event-hero-card { display: none !important; } /* === MOBILE LAYOUT FOR HERO === */ .event-hero-section { min-height: auto !important; max-height: 580px !important; padding: 135px 20px 18px !important; text-align: center !important; overflow: hidden !important; } .tp-portfolio-revealing-slide-heading { font-size: 38px !important; line-height: 1.2 !important; text-align: center !important; margin: 0 auto !important; padding: 0 10px !important; } .event-hero-text .mobile-text { display: inline !important; font-size: 16px !important; line-height: 1.5 !important; text-align: center !important; margin: 16px auto 24px !important; max-width: 90% !important; } .event-hero-text .desktop-text { display: none !important; } .tp-btn-ai { font-size: 14px !important; padding: 11px 22px !important; display: block !important; margin: 0 auto !important; width: fit-content !important; } } /* ===================================================== */ /* UNIVERSAL MOBILE – PORTFOLIO SECTION (ALL PHONES) */ /* Column Order | Centered | Scaled Image | Mobile Btn */ /* ===================================================== */ @media (max-width: 430.98px) and (orientation: portrait) { /* === MOBILE LAYOUT: COLUMN ORDER === */ .tp-portfolio-area .row { display: flex !important; flex-direction: column !important; margin-top: -14px !important; padding: 0 12px !important; } .tp-portfolio-area .col-lg-7 { order: 1 !important; width: 100% !important; margin-bottom: 20px !important; } .tp-portfolio-area .col-xl-5, .tp-portfolio-area .col-lg-5 { order: 2 !important; width: 100% !important; margin-top: -40px !important; } /* === CENTER TEXT & REMOVE LEFT MARGIN === */ .tp-portfolio-ai-title.ml-80 { margin-left: 0 !important; text-align: center !important; padding: 0 10px !important; } .tp-about-2-thumb.text-lg-end { text-align: center !important; } /* === SCALE & CENTER IMAGE === */ .tp-about-2-thumb img { max-width: 80% !important; height: auto !important; transform: scale(0.97) translateX(44px) !important; transform-origin: center !important; margin: -50px auto 0 !important; display: block !important; } /* === TITLE & PARAGRAPH === */ .tp-section-ai-title { font-size: 36px !important; text-align: center !important; line-height: 1.2 !important; margin: 0 auto 16px !important; padding: 0 10px !important; } .tp-about-ai-para { font-size: 18px !important; text-align: center !important; line-height: 1.6 !important; padding: 0 15px 18px !important; margin: 0 auto !important; max-width: 90% !important; } /* === CENTER BUTTON === */ .tp-portfolio-area .tp-header-btn { text-align: center !important; display: block !important; margin: -25px auto 0 !important; padding-bottom: 120px !important; padding-top: 60px !important; width: fit-content !important; } .tp-portfolio-area .tp-header-btn .tp-btn-ai, .tp-portfolio-area .tp-header-btn button { margin: 0 auto !important; display: inline-flex !important; } } /* ===================================================== */ /* UNIVERSAL MOBILE – FAQ + CONTACT FORM (ALL PHONES) */ /* Form Upar | FAQ Neeche | Centered | Responsive */ /* ===================================================== */ @media (max-width: 430.98px) and (orientation: portrait) { /* === MOBILE LAYOUT: FORM ON TOP, FAQ BELOW === */ .faq-form-wrapper { display: flex !important; flex-direction: column !important; gap: 28px !important; align-items: center !important; padding: 0 10px !important; width: 100% !important; } .form-container { order: 1 !important; width: 100% !important; max-width: 100% !important; } .faq-container-1000 { order: 2 !important; width: 100% !important; max-width: 100% !important; } /* === SECTION PADDING === */ .al-faq-area { padding: 50px 0 75px !important; } .al-faq-title-box { margin-bottom: 48px !important; } .al-faq-form-content { margin-top: 0 !important; } /* === ACCORDION ICON === */ .accordion-icon { width: 21px !important; height: 21px !important; margin-left: 6px !important; margin-top: -60px !important; } .accordion-icon::before { height: 2.2px !important; } .accordion-icon::after { width: 2.2px !important; } .accordion-buttons { gap: 8px !important; padding: 10px 0 !important; font-size: 16px !important; } /* === FORM BOX === */ .al-faq-form-box { width: 100% !important; max-width: 340px !important; margin: 0 auto !important; } .al-faq-input input, .al-faq-input textarea { height: 50px !important; font-size: 15px !important; width: 100% !important; padding: 0 12px !important; } .al-faq-input textarea { height: 110px !important; padding: 12px !important; } /* === SUBMIT BUTTON === */ .tp-btn-wide-here { width: 100% !important; max-width: 280px !important; height: 46px !important; font-size: 18px !important; display: flex !important; align-items: center !important; justify-content: center !important; margin: 0 auto !important; border-radius: 20 px !important; } /* === TITLES & TEXT === */ .al-faq-form-title, .al-section-title { font-size: 35px !important; text-align: center !important; line-height: 1.2 !important; margin: 0 auto 16px !important; padding: 0 10px !important; } .al-faq-form-content p, .accordion-body p { font-size: 14px !important; line-height: 1.6 !important; text-align: center !important; } .accordion-body { padding: 12px 0 !important; } } /* ===================================================== */ /* UNIVERSAL MOBILE – PORTFOLIO SECTION (ALL PHONES) */ /* Column Order | Centered | Scaled Image | Mobile Btn */ /* ===================================================== */ @media (max-width: 430.98px) and (orientation: portrait) { /* === MOBILE LAYOUT: COLUMN ORDER === */ .tp-portfolio-area .row { display: flex !important; flex-direction: column !important; margin-top: -145px !important; padding: 0 12px !important; padding-top:80px !important; } .tp-portfolio-area .col-lg-7 { order: 1 !important; width: 100% !important; margin-bottom: 18px !important; } .tp-portfolio-area .col-xl-5, .tp-portfolio-area .col-lg-5 { order: 2 !important; width: 100% !important; margin-top: -43px !important; } /* === CENTER TEXT & REMOVE LEFT MARGIN === */ .tp-portfolio-ai-title.ml-80 { margin-left: 0 !important; text-align: center !important; padding: 0 10px !important; } .tp-about-2-thumb.text-lg-end { text-align: center !important; } /* === SCALE & CENTER IMAGE === */ .tp-about-2-thumb img { max-width: 81% !important; height: auto !important; transform: scale(0.97) translateX(46px) !important; transform-origin: center !important; margin: -53px auto 0 !important; display: block !important; margin-left:30px !important; } /* === TITLE & PARAGRAPH === */ .tp-section-ai-title { font-size: 40px !important; text-align: center !important; line-height: 1.2 !important; margin: 0 auto 16px !important; padding: 0 10px !important; } .tp-about-ai-para { font-size: 18px !important; text-align: justify !important; line-height: 1.6 !important; padding: 0 15px 17px !important; margin: 0 auto !important; max-width: 90% !important; } /* === CENTER BUTTON === */ .tp-portfolio-area .tp-header-btn { text-align: center !important; display: block !important; margin: -27px auto 0 !important; width: fit-content !important; } .tp-portfolio-area .tp-header-btn .tp-btn-ai, .tp-portfolio-area .tp-header-btn button { margin: 0 auto !important; display: inline-flex !important; } } /* ===================================================== */ /* UNIVERSAL MOBILE – READ MORE + HERO SECTION (ALL PHONES) */ /* Hide Full Text | Show Read More | Responsive Text */ /* ===================================================== */ @media (max-width: 430.98px) and (orientation: portrait) { /* === CSS VARIABLES (SCALABLE) === */ .utsoraa-hero-section { --heading-fs: 38px; --heading-ml: -5px; --heading-mt: -48px; --para-fs: 17px; --para-mb: 6px; --para-ml: -5px; --para-pb: 28px; --thumb-ml: -18px; --thumb-mb: -48px; } /* === HEADING === */ .utsoraa-hero-section .tp-portfolio-revealing-slide-heading { font-size: var(--heading-fs) !important; text-align: center !important; margin-left: var(--heading-ml) !important; margin-top: var(--heading-mt) !important; line-height: 1.2 !important; padding: 0 10px !important; } /* === TITLE WRAP === */ .utsoraa-hero-section .tp-team-details-title-wrap { margin-left: 0 !important; text-align: center !important; } /* === THUMB (IMAGE) === */ .utsoraa-hero-section .tp-team-details-thumb { margin-left: var(--thumb-ml) !important; margin-bottom: var(--thumb-mb) !important; text-align: center !important; } .utsoraa-hero-section .tp-team-details-thumb img { max-width: 90% !important; height: auto !important; display: inline-block !important; } /* === PARAGRAPH === */ .utsoraa-hero-section .al-about-pg-content p { font-size: var(--para-fs) !important; margin-bottom: var(--para-mb) !important; text-align: justify !important; margin-left: var(--para-ml) !important; padding-bottom: var(--para-pb) !important; font-weight: 400 !important; /* 100px → 400 (valid) */ line-height: 1.6 !important; padding-left: 15px !important; padding-right: 15px !important; } /* === READ MORE LOGIC === */ #hidden-text-mobile { display: none !important; } .mobile-read-more { display: inline !important; font-size: 14px !important; color: #007bff !important; text-decoration: underline !important; cursor: pointer !important; background: none !important; border: none !important; padding: 0 !important; margin-left: 4px !important; font-weight: 500 !important; } .mobile-read-more:hover { color: #0056b3 !important; } /* === ROW & COL GUTTERS === */ .utsoraa-hero-section .row { --bs-gutter-x: 0 !important; margin-left: 0 !important; margin-right: 0 !important; } .utsoraa-hero-section [class*="col-"] { padding-left: 0 !important; padding-right: 0 !important; } /* === EXTRA: PREVENT OVERFLOW === */ .utsoraa-hero-section { overflow: hidden !important; padding-left: 12px !important; padding-right: 12px !important; } } /* ===================================================== */ /* UNIVERSAL MOBILE – TEXT SLIDER SEO (ALL PHONES) */ /* Responsive | Tight Spacing | Swipe-Friendly */ /* ===================================================== */ @media (max-width: 430.98px) and (max-height: 932px) and (orientation: portrait) { /* === SECTION PADDING === */ .al-text-slider-seo-area { padding: 32px 0 28px !important; overflow: hidden !important; } /* === TITLE === */ .al-text-slider-seo-title { font-size: 20px !important; line-height: 1.15 !important; text-align: center !important; margin: 0 auto 20px !important; padding: 0 15px !important; font-weight: 600 !important; } /* === SWIPER CONTAINER === */ .swiper-container, .al-text-slider-seo-active { padding: 0 12px !important; overflow: visible !important; } /* === SLIDES === */ .al-text-slider-seo-active .swiper-slide { width: auto !important; display: flex !important; justify-content: center !important; align-items: center !important; padding: 0 8px !important; box-sizing: border-box !important; } /* === TEXT INSIDE SLIDES === */ .al-text-slider-seo-active .swiper-slide p, .al-text-slider-seo-active .swiper-slide span, .al-text-slider-seo-active .swiper-slide div { font-size: 16px !important; line-height: 1.5 !important; text-align: center !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } /* === SWIPER NAVIGATION (if exists) === */ .swiper-button-next, .swiper-button-prev { width: 32px !important; height: 32px !important; margin-top: -16px !important; } /* === SWIPER PAGINATION === */ .swiper-pagination { bottom: 8px !important; } .swiper-pagination-bullet { width: 8px !important; height: 8px !important; margin: 0 4px !important; } } /* ===================================================== */ /* UNIVERSAL MOBILE – REMOVE ALL IMAGE ANIMATIONS */ /* NO TRANSITION | NO TRANSFORM | NO HOVER EFFECT */ /* ===================================================== */ @media (max-width: 430.98px) and (orientation: portrait) { /* === 1. REMOVE ALL TRANSITIONS FROM IMAGES === */ .al-about-pg-area img, .al-about-pg-area .al-about-pg-thumb, .al-about-pg-area .al-about-pg-thumb-2, .al-about-pg-area .al-about-pg-thumb img, .al-about-pg-area .al-about-pg-thumb-2 img, img, [class*="thumb"] img { transition: none !important; animation: none !important; transform: none !important; will-change: auto !important; } /* === 2. DISABLE HOVER EFFECTS (TOUCH FRIENDLY) === */ .al-about-pg-area img:hover, .al-about-pg-area .al-about-pg-thumb:hover, .al-about-pg-area .al-about-pg-thumb-2:hover, img:hover { transform: none !important; box-shadow: none !important; filter: none !important; opacity: 1 !important; } /* === 3. FORCE STATIC POSITION === */ .al-about-pg-area .al-about-pg-thumb, .al-about-pg-area .al-about-pg-thumb-2 { transform: none !important; margin-left: auto !important; margin-right: auto !important; position: relative !important; } /* === 4. REMOVE ANY JS/GSAP ANIMATIONS (IF ANY) === */ .al-about-pg-area [data-aos], .al-about-pg-area [style*="transition"], .al-about-pg-area [style*="transform"] { transition: none !important; animation: none !important; transform: none !important; } /* === 5. IMAGE 1 – STATIC & CLEAN === */ .al-about-pg-area .al-about-pg-thumb { width: 85% !important; height: 185px !important; margin: 0 auto !important; border-radius: 16px !important; overflow: hidden !important; display: block !important; margin-left: -50px !important; } /* === 6. IMAGE 2 – STATIC & SPACED === */ .al-about-pg-area .al-about-pg-thumb-2 { width: 80% !important; height: 265px !important; margin: 16px auto 0 !important; border-radius: 16px !important; overflow: hidden !important; display: block !important; margin-left: -50px !important; margin-top: -79px !important; } .al-about-pg-area .al-about-pg-thumb img, .al-about-pg-area .al-about-pg-thumb-2 img { width: 100% !important; height: 100% !important; object-fit: cover !important; border-radius: 16px !important; display: block !important; transform: none !important; } /* === 7. RINGS – STILL HIDDEN (NUCLEAR) === */ .tp-about-ai-ring, .tp-about-ai-ring-small, [class*="ring"] { display: none !important; visibility: hidden !important; opacity: 0 !important; width: 0 !important; height: 0 !important; position: absolute !important; left: -9999px !important; } /* === 8. PERFORMANCE BOOST === */ .al-about-pg-area img { image-rendering: -webkit-optimize-contrast; backface-visibility: hidden; } } /* ````````````````````````````````````````Join the crew Page responsive sart here for all```````````````````````````````````````````````````` */ /* ============================================================= */ /* ========= 390×844 (Portrait) – JOIN THE CREW HERO SECTION ===== */ /* WORKS WITH JS: SHOWS 2 TABS | ARROWS SLIDE | FONT FITTED */ /* ============================================================= */ @media only screen and (width: 390px) and (height: 844px) and (orientation: portrait) { /* === SECTION PADDING === */ .tp-portfolio-colum-spacing { padding-top: 180px !important; padding-bottom: 36px !important; } /* === HERO TITLE === */ .tp-hero-vp-title-pages { font-size: 105px !important; /* ← Fit for 390px */ line-height: 70% !important; letter-spacing: 0.5px !important; margin-left: -5px !important; text-align: center !important; display: block !important; padding-bottom: 50px !important; } /* === HERO CONTENT === */ .tp-hero-vp-content { margin-bottom: 26px !important; font-size: 15.5 px !important; padding: 0 16px !important; } /* === CONTAINER === */ .container-1824.containers, .container-1824 { padding: 0 13px !important; max-width: 100% !important; } /* === TAB WRAPPER === */ .tp-portfolio-inner-tab-wrap { position: relative !important; padding: 0 55px !important; /* ← Arrow ke liye space */ display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; overflow: hidden !important; } .tp-portfolio-inner-tab-wrap nav { width: 100% !important; display: flex !important; justify-content: center !important; } /* === NAV TABS – FIT 2 TABS IN 390px === */ .tp-portfolio-inner-tab-wrap nav .nav-tabs { display: flex !important; max-width: 300px !important; /* ← Was 265px → Now 290px */ gap: 12px !important; /* ← Kam gap for tight fit */ justify-content: center !important; /* ← 2 tabs fit exactly */ overflow: hidden !important; flex-wrap: nowrap !important; } /* === NAV LINK – JS WILL SHOW 2 AT A TIME === */ .tp-portfolio-inner-tab-wrap nav .nav-tabs .nav-link { font-size: 18px !important; /* ← Perfect fit */ padding: 9px 16px !important; /* ← Compact */ margin: 0 !important; border-radius: 25px !important; white-space: nowrap !important; flex: 1 !important; min-width: 0 !important; /* ← Allow shrink */ text-align: center !important; /* JS controls visibility via inline style */ /* Do NOT use display: none here — JS uses inline style */ } /* === ARROWS – VISIBLE & CLICKABLE === */ .tab-arrow { display: flex !important; position: absolute !important; top: 50% !important; transform: translateY(-50%) !important; background: white !important; border: 1px solid rgba(0, 0, 0, 0.2) !important; border-radius: 50% !important; width: 33px !important; height: 33px !important; align-items: center !important; justify-content: center !important; cursor: pointer !important; z-index: 10 !important; box-shadow: 0 2px 8px rgba(0,0,0,0.15) !important; transition: all 0.3s ease !important; opacity: 1 !important; pointer-events: all !important; } .tab-arrow:hover { background: #f5f5f5 !important; transform: translateY(-50%) scale(1.05) !important; } .tab-arrow-left { left: 3px !important; } .tab-arrow-right { right: 3px !important; } /* JS will control opacity via inline style */ /* No need for .disabled class in CSS */ .tab-arrow svg { width: 14px !important; height: 14px !important; } /* === PREVENT LAYOUT JUMP === */ .tp-portfolio-inner-tab-wrap::before, .tp-portfolio-inner-tab-wrap::after { content: ''; display: block; width: 33px; flex-shrink: 0; } } /* === DESKTOP: SHOW ALL TABS, HIDE ARROWS === */ @media only screen and (min-width: 431px) { .tab-arrow, .tab-arrow-left, .tab-arrow-right { display: none !important; } .tp-portfolio-inner-tab-wrap nav .nav-tabs .nav-link { display: inline-block !important; } } /* ============================================================= */ /* ========= MOBILE SPECIFIC – JOIN THE CREW HERO (ALL DEVICES) = */ /* SAME STYLE AS 390×844 | FONT + WIDTH SCALED PER DEVICE */ /* ============================================================= */ /* ——— 360×800 ——— */ @media only screen and (width: 360px) and (height: 800px) and (orientation: portrait) { .tp-portfolio-colum-spacing { padding: 170px 0 34px !important; } .tp-hero-vp-title-pages { font-size: 98px !important; padding-bottom: 48px !important; } .tp-hero-vp-content { margin-bottom: 24px !important; font-size: 15px !important; padding: 0 14px !important; } .container-1824.containers { padding: 0 12px !important; } .tp-portfolio-inner-tab-wrap { padding: 0 52px !important; } .tp-portfolio-inner-tab-wrap nav .nav-tabs { max-width: 275px !important; gap: 10px !important; } .tp-portfolio-inner-tab-wrap nav .nav-tabs .nav-link { font-size: 17px !important; padding: 8px 14px !important; } .tab-arrow { width: 32px !important; height: 32px !important; } .tab-arrow svg { width: 13px !important; height: 13px !important; } .tp-portfolio-inner-tab-wrap::before, .tp-portfolio-inner-tab-wrap::after { width: 32px; } } /* ——— 412×915 ——— */ @media only screen and (width: 412px) and (height: 915px) and (orientation: portrait) { .tp-portfolio-colum-spacing { padding: 185px 0 38px !important; } .tp-hero-vp-title-pages { font-size: 110px !important; padding-bottom: 52px !important; } .tp-hero-vp-content { margin-bottom: 28px !important; font-size: 16px !important; padding: 0 18px !important; } .container-1824.containers { padding: 0 15px !important; } .tp-portfolio-inner-tab-wrap { padding: 0 58px !important; } .tp-portfolio-inner-tab-wrap nav .nav-tabs { max-width: 315px !important; gap: 13px !important; } .tp-portfolio-inner-tab-wrap nav .nav-tabs .nav-link { font-size: 19px !important; padding: 10px 22px !important; } .tab-arrow { width: 36px !important; height: 36px !important; } .tab-arrow svg { width: 15px !important; height: 15px !important; } .tp-portfolio-inner-tab-wrap::before, .tp-portfolio-inner-tab-wrap::after { width: 36px; } } /* ——— 414×896 ——— */ @media only screen and (width: 414px) and (height: 896px) and (orientation: portrait) { .tp-portfolio-colum-spacing { padding: 182px 0 37px !important; } .tp-hero-vp-title-pages { font-size: 108px !important; padding-bottom: 51px !important; } .tp-hero-vp-content { margin-bottom: 27px !important; font-size: 15.8px !important; padding: 0 17px !important; } .container-1824.containers { padding: 0 14px !important; } .tp-portfolio-inner-tab-wrap { padding: 0 57px !important; } .tp-portfolio-inner-tab-wrap nav .nav-tabs { max-width: 312px !important; gap: 13px !important; } .tp-portfolio-inner-tab-wrap nav .nav-tabs .nav-link { font-size: 18.8px !important; padding: 10px 21px !important; } .tab-arrow { width: 35px !important; height: 35px !important; } .tab-arrow svg { width: 15px !important; height: 15px !important; } .tp-portfolio-inner-tab-wrap::before, .tp-portfolio-inner-tab-wrap::after { width: 35px; } } /* ——— 375×812 ——— */ @media only screen and (width: 375px) and (height: 812px) and (orientation: portrait) { .tp-portfolio-colum-spacing { padding: 172px 0 35px !important; } .tp-hero-vp-title-pages { font-size: 100px !important; padding-bottom: 49px !important; } .tp-hero-vp-content { margin-bottom: 25px !important; font-size: 15.2px !important; padding: 0 15px !important; } .container-1824.containers { padding: 0 13px !important; } .tp-portfolio-inner-tab-wrap { padding: 0 53px !important; } .tp-portfolio-inner-tab-wrap nav .nav-tabs { max-width: 285px !important; gap: 11px !important; } .tp-portfolio-inner-tab-wrap nav .nav-tabs .nav-link { font-size: 17.5px !important; padding: 9px 18px !important; } .tab-arrow { width: 33px !important; height: 33px !important; } .tab-arrow svg { width: 14px !important; height: 14px !important; } .tp-portfolio-inner-tab-wrap::before, .tp-portfolio-inner-tab-wrap::after { width: 33px; } } /* ——— 375×667 ——— */ @media only screen and (width: 375px) and (height: 667px) and (orientation: portrait) { .tp-portfolio-colum-spacing { padding: 150px 0 30px !important; } .tp-hero-vp-title-pages { font-size: 92px !important; padding-bottom: 44px !important; } .tp-hero-vp-content { margin-bottom: 22px !important; font-size: 14.5px !important; padding: 0 14px !important; } .container-1824.containers { padding: 0 12px !important; } .tp-portfolio-inner-tab-wrap { padding: 0 50px !important; } .tp-portfolio-inner-tab-wrap nav .nav-tabs { max-width: 270px !important; gap: 10px !important; } .tp-portfolio-inner-tab-wrap nav .nav-tabs .nav-link { font-size: 16.5px !important; padding: 8px 16px !important; } .tab-arrow { width: 31px !important; height: 31px !important; } .tab-arrow svg { width: 13px !important; height: 13px !important; } .tp-portfolio-inner-tab-wrap::before, .tp-portfolio-inner-tab-wrap::after { width: 31px; } } /* ——— 360×780 ——— */ @media only screen and (width: 360px) and (height: 780px) and (orientation: portrait) { .tp-portfolio-colum-spacing { padding: 168px 0 33px !important; } .tp-hero-vp-title-pages { font-size: 100px !important; padding-bottom: 47px !important; } .tp-hero-vp-content { margin-bottom: 23px !important; font-size: 14.8px !important; padding: 0 13px !important; } .container-1824.containers { padding: 0 11px !important; } .tp-portfolio-inner-tab-wrap { padding: 0 51px !important; } .tp-portfolio-inner-tab-wrap nav .nav-tabs { max-width: 272px !important; gap: 10px !important; } .tp-portfolio-inner-tab-wrap nav .nav-tabs .nav-link { font-size: 16.8px !important; padding: 8px 15px !important; } .tab-arrow { width: 32px !important; height: 32px !important; } .tab-arrow svg { width: 13px !important; height: 13px !important; } .tp-portfolio-inner-tab-wrap::before, .tp-portfolio-inner-tab-wrap::after { width: 32px; } } /* ——— 360×640 ——— */ @media only screen and (width: 360px) and (height: 640px) and (orientation: portrait) { .tp-portfolio-colum-spacing { padding: 140px 0 28px !important; } .tp-hero-vp-title-pages { font-size: 88px !important; padding-bottom: 42px !important; } .tp-hero-vp-content { margin-bottom: 20px !important; font-size: 14px !important; padding: 0 12px !important; } .container-1824.containers { padding: 0 10px !important; } .tp-portfolio-inner-tab-wrap { padding: 0 48px !important; } .tp-portfolio-inner-tab-wrap nav .nav-tabs { max-width: 260px !important; gap: 9px !important; } .tp-portfolio-inner-tab-wrap nav .nav-tabs .nav-link { font-size: 16px !important; padding: 7px 14px !important; } .tab-arrow { width: 30px !important; height: 30px !important; } .tab-arrow svg { width: 12px !important; height: 12px !important; } .tp-portfolio-inner-tab-wrap::before, .tp-portfolio-inner-tab-wrap::after { width: 30px; } } /* ——— 412×869 ——— */ @media only screen and (width: 412px) and (height: 869px) and (orientation: portrait) { .tp-portfolio-colum-spacing { padding: 178px 0 36px !important; } .tp-hero-vp-title-pages { font-size: 115px !important; padding-bottom: 50px !important; } .tp-hero-vp-content { margin-bottom: 26px !important; font-size: 15.7px !important; padding: 0 16px !important; } .container-1824.containers { padding: 0 14px !important; } .tp-portfolio-inner-tab-wrap { padding: 0 56px !important; } .tp-portfolio-inner-tab-wrap nav .nav-tabs { max-width: 308px !important; gap: 12px !important; } .tp-portfolio-inner-tab-wrap nav .nav-tabs .nav-link { font-size: 18.5px !important; padding: 9px 20px !important; } .tab-arrow { width: 35px !important; height: 35px !important; } .tab-arrow svg { width: 15px !important; height: 15px !important; } .tp-portfolio-inner-tab-wrap::before, .tp-portfolio-inner-tab-wrap::after { width: 35px; } } /* ——— 428×926 ——— */ @media only screen and (width: 428px) and (height: 926px) and (orientation: portrait) { .tp-portfolio-colum-spacing { padding: 188px 0 39px !important; } .tp-hero-vp-title-pages { font-size: 112px !important; padding-bottom: 53px !important; } .tp-hero-vp-content { margin-bottom: 29px !important; font-size: 16.2px !important; padding: 0 19px !important; } .container-1824.containers { padding: 0 16px !important; } .tp-portfolio-inner-tab-wrap { padding: 0 60px !important; } .tp-portfolio-inner-tab-wrap nav .nav-tabs { max-width: 325px !important; gap: 14px !important; } .tp-portfolio-inner-tab-wrap nav .nav-tabs .nav-link { font-size: 19.5px !important; padding: 11px 23px !important; } .tab-arrow { width: 37px !important; height: 37px !important; } .tab-arrow svg { width: 16px !important; height: 16px !important; } .tp-portfolio-inner-tab-wrap::before, .tp-portfolio-inner-tab-wrap::after { width: 37px; } } /* === DESKTOP: SHOW ALL TABS, HIDE ARROWS === */ @media only screen and (min-width: 431px) { .tab-arrow, .tab-arrow-left, .tab-arrow-right { display: none !important; } .tp-portfolio-inner-tab-wrap nav .nav-tabs .nav-link { display: inline-block !important; } } /* ===================================================== */ /* UNIVERSAL MOBILE – JOIN THE CREW HERO (ALL PHONES) */ /* WORKS WITH JS | 2 TABS VISIBLE | ARROWS SLIDE | SCALED */ /* ===================================================== */ @media (max-width: 430.98px) and (orientation: portrait) { /* === SECTION PADDING (BASE) === */ .tp-portfolio-colum-spacing { padding-top: 170px !important; padding-bottom: 36px !important; } /* === HERO TITLE (SCALED) === */ .tp-hero-vp-title-pages { font-size: 105px !important; line-height: 70% !important; letter-spacing: 0.5px !important; margin-left: -5px !important; text-align: center !important; display: block !important; padding-bottom: 50px !important; } /* === HERO CONTENT (SCALED) === */ .tp-hero-vp-content { margin-bottom: 26px !important; font-size: 15.5px !important; padding: 0 16px !important; } /* === CONTAINER (SCALED) === */ .container-1824.containers, .container-1824 { padding: 0 13px !important; max-width: 100% !important; } /* === TAB WRAPPER (SCALED) === */ .tp-portfolio-inner-tab-wrap { position: relative !important; padding: 0 55px !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; overflow: hidden !important; } .tp-portfolio-inner-tab-wrap nav { width: 100% !important; display: flex !important; justify-content: center !important; } /* === NAV TABS (SCALED FOR 2 TABS) === */ .tp-portfolio-inner-tab-wrap nav .nav-tabs { display: flex !important; max-width: 300px !important; gap: 12px !important; justify-content: center !important; overflow: hidden !important; flex-wrap: nowrap !important; } /* === NAV LINK (SCALED FONT) === */ .tp-portfolio-inner-tab-wrap nav .nav-tabs .nav-link { font-size: 18px !important; padding: 9px 16px !important; margin: 0 !important; border-radius: 25px !important; white-space: nowrap !important; flex: 1 !important; min-width: 0 !important; text-align: center !important; } /* === ARROWS (SCALED) === */ .tab-arrow { display: flex !important; position: absolute !important; top: 50% !important; transform: translateY(-50%) !important; background: white !important; border: 1px solid rgba(0, 0, 0, 0.2) !important; border-radius: 50% !important; width: 33px !important; height: 33px !important; align-items: center !important; justify-content: center !important; cursor: pointer !important; z-index: 10 !important; box-shadow: 0 2px 8px rgba(0,0,0,0.15) !important; transition: all 0.3s ease !important; opacity: 1 !important; pointer-events: all !important; } .tab-arrow:hover { background: #f5f5f5 !important; transform: translateY(-50%) scale(1.05) !important; } .tab-arrow-left { left: 3px !important; } .tab-arrow-right { right: 3px !important; } .tab-arrow.disabled { opacity: 0.3 !important; pointer-events: none !important; cursor: not-allowed !important; } .tab-arrow svg { width: 14px !important; height: 14px !important; } /* === PREVENT LAYOUT JUMP === */ .tp-portfolio-inner-tab-wrap::before, .tp-portfolio-inner-tab-wrap::after { content: ''; display: block; width: 33px; flex-shrink: 0; } /* === JS COMPATIBILITY === */ .tp-portfolio-inner-tab-wrap nav .nav-tabs .nav-link { /* JS will toggle inline styles - CSS doesn't interfere */ } } /* ============================================================= */ /* ========= 390×844 (Portrait) – JOIN THE CREW GRID SECTION ===== */ /* SAME AS 430x932 | RESPONSIVE | JS COMPATIBLE | MOBILE ONLY */ /* ============================================================= */ @media only screen and (width: 390px) and (height: 844px) and (orientation: portrait) { /* === GRID IMAGE === */ .tp-portfolio-grid-item .tp-portfolio-sa-thumb img { width: 100% !important; margin-left: -3px !important; /* ← Adjusted for 390px */ object-fit: cover !important; border-radius: 12px !important; } /* === ROW & GUTTER === */ .row { display: flex !important; flex-wrap: wrap !important; margin: 0 -8px !important; /* ← Slightly less gap */ } /* === COLUMN (2 PER ROW) === */ .col-xl-3 { flex: 0 0 50% !important; max-width: 50% !important; padding: 0 8px !important; /* ← Adjusted gap */ margin-bottom: -15px !important; /* ← Less row gap */ } /* === HIDE EXTRA ITEMS INITIALLY === */ .tp-portfolio-grid-item.mobile-hidden { display: none !important; } /* === TITLE STYLING === */ .tp-portfolio-cst-title, .fw-600.fs-28.tp-ff-dm.ml-20 { font-size: 17.5px !important; /* ← Slightly smaller */ margin-left: 8px !important; /* ← Less left margin */ font-weight: 600 !important; line-height: 1.3 !important; } /* === EXPLORE MORE CONTAINER === */ .explore-more-container { width: 100% !important; text-align: center !important; margin: 22px 0 !important; /* ← Adjusted margin */ display: block !important; } /* === EXPLORE MORE BUTTON === */ .explore-more-btn { padding: 13px 30px !important; border-radius: 100px !important; width: 210px !important; /* ← Smaller for 390px */ z-index: 1 !important; transition: all 0.4s ease !important; position: relative !important; background: #fff !important; border: none !important; cursor: pointer !important; font-size: 15.5px !important; /* ← Slightly smaller */ font-weight: 600 !important; color: #021352 !important; display: inline-block !important; margin: 0 auto !important; } .explore-more-btn::after { content: "" !important; position: absolute !important; top: -2px !important; bottom: -2px !important; left: -2px !important; right: -2px !important; z-index: -2 !important; border-radius: 101px !important; background-image: linear-gradient(90deg, #A70C7E 0%, #A70C7E 50%, #021352 100%) !important; background-size: 150% 150% !important; animation: sliderTitle3 2s ease-in-out 1s forwards infinite alternate !important; } .explore-more-btn::before { position: absolute !important; content: "" !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; background: #fff !important; z-index: -1 !important; border-radius: 100px !important; transition: all 0.4s ease !important; } .explore-more-btn:hover { background-color: transparent !important; color: white !important; } .explore-more-btn:hover::before { background: transparent !important; } @keyframes sliderTitle3 { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } /* === PAGE-SPECIFIC ADJUSTMENTS === */ .page-join .faq-form-wrapper { margin-top: -80px !important; /* ← Adjusted */ } .page-join .tp-testimonial-cst-item { margin-top: -145px !important; /* ← Adjusted */ } } /* === HIDE EXPLORE MORE ON DESKTOP === */ @media (min-width: 431px) { .explore-more-container { display: none !important; } } /* ===================================================== */ /* UNIVERSAL MOBILE – JOIN THE CREW GRID (ALL PHONES) */ /* PURE CSS | NO SCSS | 100% WORKING EXPLORE MORE */ /* ===================================================== */ @media (max-width: 430.98px) and (orientation: portrait) { /* GRID IMAGE */ .tp-portfolio-grid-item .tp-portfolio-sa-thumb img { width: 100% !important; margin-left: -3px !important; object-fit: cover !important; border-radius: 12px !important; } /* ROW & GUTTER */ .row { display: flex !important; flex-wrap: wrap !important; margin: 0 -8px !important; } /* 2 COLUMNS */ .col-xl-3 { flex: 0 0 50% !important; max-width: 50% !important; padding: 0 8px !important; margin-bottom: -15px !important; } /* HIDDEN JOBS */ .tp-portfolio-grid-item.mobile-hidden { display: none ; } /* TITLE */ .tp-portfolio-cst-title, .fw-600.fs-28.tp-ff-dm.ml-20 { font-size: 17.5px !important; margin-left: 8px !important; font-weight: 600 !important; } /* EXPLORE MORE CONTAINER */ .explore-more-container { display: block; text-align: center; margin: 22px auto; width: 100%; } /* BUTTON */ .explore-more-btn { display: inline-block ; padding: 13px 30px !important; width: 210px !important; font-size: 15.5px !important; font-weight: 600 !important; color: #021352 !important; background: white !important; border: none !important; border-radius: 100px !important; cursor: pointer !important; position: relative !important; z-index: 1 !important; transition: all 0.4s ease !important; box-shadow: 0 4px 15px rgba(0,0,0,0.1) !important; } /* GRADIENT BORDER */ .explore-more-btn::after { content: ""; position: absolute; top: -2px; left: -2px; right: -2px; bottom: -2px; background: linear-gradient(90deg, #A70C7E 0%, #A70C7E 50%, #021352 100%); background-size: 150% 150%; border-radius: 101px; z-index: -2; animation: gradientMove 2s ease-in-out infinite alternate; } .explore-more-btn::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: white; border-radius: 100px; z-index: -1; transition: all 0.4s ease; } .explore-more-btn:hover { color: white !important; } .explore-more-btn:hover::before { background: transparent !important; } @keyframes gradientMove { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } /* PAGE GAPS */ .page-join .faq-form-wrapper { margin-top: -80px !important; } .page-join .tp-testimonial-cst-item { margin-top: -145px !important; } } /* DESKTOP: HIDE BUTTON */ @media (min-width: 431px) { .explore-more-container { display: none !important; } } /* ````````````````````````````````````````Join the crew Page responsive ends here```````````````````````````````````````````````````` */ /* ````````````````````````````````````````What we do Page responsive start here```````````````````````````````````````````````````` */ /* ============================================================= */ /* ========= 390×844 (Portrait) – WHAT WE DO HERO SECTION ====== */ /* SAME AS 430px | AUTO SLIDE | NO JS CHANGE | MOBILE ONLY */ /* ============================================================= */ @media only screen and (width: 390px) and (height: 844px) and (orientation: portrait) { /* === ROW CONTAINER === */ .tp-hero-md-row-custom { display: flex !important; overflow: hidden !important; position: relative !important; height: 240px !important; /* ← Thoda kam */ margin: 0 -16px !important; padding: 0 16px !important; gap: 1px !important; scroll-snap-type: x mandatory !important; scroll-behavior: smooth !important; -webkit-overflow-scrolling: touch !important; padding-top: 50px !important; } .tp-hero-md-row-custom::-webkit-scrollbar { display: none !important; } /* === HERO AREA === */ .tp-hero-area { margin-bottom: -190px !important;/* ← Kam gap */ } /* === TITLE === */ .tp-hero-md-title { font-size: 40px !important; /* ← Kam */ text-align: center !important; margin-left: -8px !important; margin-bottom: 16px !important; line-height: 1.1 !important; } /* === PANEL COLUMN (DEFAULT) === */ .tp-hero-md-col-custom { flex-shrink: 0 !important; width: 76% !important; /* ← Fit in 390px */ max-width: 76% !important; height: 170px !important; /* ← Kam height */ margin-top: -45px !important; opacity: 0.7 !important; transform: scale(0.88) !important; transition: all 0.5s ease-in-out !important; scroll-snap-align: center !important; border-radius: 14px !important; overflow: hidden !important; box-shadow: 0 6px 18px rgba(0,0,0,0.1) !important; } /* === IMAGE === */ .tp-hero-md-panel-thumb img { width: 100% !important; height: 170px !important; object-fit: cover !important; display: block !important; border-radius: 14px !important; } /* === PARAGRAPH === */ .tp-hero-md-para { margin-bottom: -20px !important; /* Reduce paragraph bottom margin */ font-size: 18px !important; text-align: justify; padding-right: 30px; } /* === ACTIVE STATE === */ .tp-hero-md-col-custom.active { opacity: 1 !important; transform: scale(1) !important; z-index: 2 !important; } } /* ===================================================== */ /* UNIVERSAL MOBILE – WHAT WE DO HERO SECTION */ /* PURE CSS | AUTO SLIDE | NO JS CHANGE | MOBILE ONLY */ /* ===================================================== */ @media (max-width: 430.98px) and (orientation: portrait) { /* === ROW CONTAINER === */ .tp-hero-md-row-custom { display: flex !important; overflow: hidden !important; position: relative !important; height: 240px !important; margin: 0 -16px !important; padding: 0 16px !important; gap: 1px !important; scroll-snap-type: x mandatory !important; scroll-behavior: smooth !important; -webkit-overflow-scrolling: touch !important; padding-top: 50px !important; } .tp-hero-md-row-custom::-webkit-scrollbar { display: none !important; } /* === HERO AREA === */ .tp-hero-area { margin-bottom: -190px !important; } /* === TITLE === */ .tp-hero-md-title { font-size: 40px !important; text-align: center !important; margin-left: -8px !important; margin-bottom: 16px !important; line-height: 1.1 !important; } /* === PANEL COLUMN (DEFAULT) === */ .tp-hero-md-col-custom { flex-shrink: 0 !important; width: 76% !important; max-width: 76% !important; height: 170px !important; margin-top: -45px !important; opacity: 0.7 !important; transform: scale(0.88) !important; transition: all 0.5s ease-in-out !important; scroll-snap-align: center !important; border-radius: 14px !important; overflow: hidden !important; box-shadow: 0 6px 18px rgba(0,0,0,0.1) !important; } /* === IMAGE === */ .tp-hero-md-panel-thumb img { width: 100% !important; height: 170px !important; object-fit: cover !important; display: block !important; border-radius: 14px !important; } /* === PARAGRAPH === */ .tp-hero-md-para { margin-bottom: -20px !important; font-size: 18px !important; text-align: justify; padding-right: 30px; } /* === ACTIVE STATE === */ .tp-hero-md-col-custom.active { opacity: 1 !important; transform: scale(1) !important; z-index: 2 !important; } } /* ````````````````````````````````````````What we do Page responsive ends here```````````````````````````````````````````````````` */ /*````````````````````````````````````````Our secret sauce Page```````````````````````````````````````````````````` */ .tp-header-btnn { margin-left: -0!important; text-align: center; display: block !important; margin-top: 15px; } .tp-btn-aii{ background: linear-gradient(90deg, #021352 0%, #A70C7E 50%, #021352 100%); background-size: 300% 300%; animation: tpGradientMove 10s ease infinite; color: #fff !important; padding: 10px 45px; /* 👈 increase this to make button wider */ border-radius: 25px; font-weight: 600; font-size: 16px; border: none; transition: all 0.3s ease; cursor: pointer; margin-left: -450px !important ; } /* 👇 Gradient animation movement */ @keyframes tpGradientMove { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } /* Specific styles for 430x932 mobile devices ONLY */ @media only screen and (max-width: 430px) and (max-height: 932px) { .tp-team-area { padding-bottom: 60px !important; overflow: hidden; } .tp-team-it-shape { display: none; } .tp-about-it-blur { width: 250px; height: 250px; top: -30px; left: 50%; transform: translateX(-50%); filter: blur(120px); } .container-fluid.container-1524 { padding: 0 20px; } .tp-team-area .row.gx-50 { margin: 0; flex-direction: column; } .col-lg-5.col-md-8, .col-lg-7 { width: 100%; max-width: 100%; flex: 0 0 100%; padding: 0; } /* Header Content */ .tp-team-it-title-wrap { margin-bottom: 30px !important; text-align: center; padding: 20px 0; } .tp-portfolio-revealing-slide-heading { font-size: 36px !important; margin-left: 0 !important; line-height: 1.2 !important; text-align: center; width: 100%; margin-bottom: 15px !important; } .tp-section-it-para { font-size: 16px !important; margin-left: 0 !important; text-align: center; padding-top: 10px !important; line-height: 1.4 !important; margin-bottom: 25px !important; } .tp-header-btnn { margin-left: 0 !important; text-align: center; display: block !important; margin-top: 15px; } .tp-btn-aii{ background: linear-gradient(90deg, #021352 0%, #A70C7E 50%, #021352 100%); background-size: 300% 300%; animation: tpGradientMove 10s ease infinite; color: #fff !important; padding: 10px 45px; /* 👈 increase this to make button wider */ border-radius: 25px; font-weight: 600; font-size: 16px; border: none; transition: all 0.3s ease; cursor: pointer;margin-right: -490px !important; } /* 👇 Gradient animation movement */ @keyframes tpGradientMove { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } /* HIDE DESKTOP LAYOUT ON MOBILE */ .tp-team-it-item-right .row.gx-50 { display: none !important; } .tp-team-it-item-single { display: none; } /* SHOW MOBILE SLIDER */ .tp-team-slider-container { display: block !important; width: 100%; overflow: hidden; position: relative; margin-top: -20px !important; } .tp-team-slider-track { display: flex; transition: transform 0.5s ease-in-out; width: max-content; } .tp-team-slider-track .tp-team-it-item { flex: 0 0 320px; margin-right: 15px; margin-bottom: 0; } .tp-team-it-thumb { height: 200px; } .tp-team-it-thumb img { height: 200px; object-fit: cover; width: 100%; } .tp-team-it-content { padding: 20px !important; } .tp-team-it-content h3 { font-size: 18px !important; margin-bottom: 8px !important; } .tp-team-it-content span { font-size: 14px !important; line-height: 1.3 !important; } .mt-60 { margin-top: 0 !important; } /* Dot Pagination */ .tp-team-slider-pagination { display: flex !important; justify-content: center; align-items: center; gap: 8px; margin-top: 20px; padding-bottom: 10px; } .tp-team-slider-pagination .swiper-pagination-bullet { width: 8px; height: 8px; background: grey; border-radius: 50%; cursor: pointer; transition: all 0.3s ease; opacity: 0.6; } .tp-team-slider-pagination .swiper-pagination-bullet-active { background: #021352; opacity: 1; width: 10px; height: 10px; } } /* DESKTOP STYLES - Hide mobile elements */ @media only screen and (min-width: 431px) { .tp-team-slider-container { display: none !important; } .tp-team-slider-pagination { display: none !important; } /* Ensure desktop layout is visible */ .tp-team-it-item-right .row.gx-50 { display: flex !important; } .tp-team-it-item-single { display: block; } } /* our secrate sauce page seconfd section */ /* Specific styles for 430x932 mobile devices ONLY - FIXED VERSION */ @media only screen and (max-width: 430px) and (max-height: 932px) { /* Make all selectors specific to service section */ .tp-service-cst-slider-wrap { padding-top: 30px; padding-bottom: 30px; position: relative; } .tp-service-cst-slider-wrap .tp-service-cst-slider { margin-right: 0; padding: 0 15px; position: relative; } .tp-service-cst-slider-wrap .swiper-wrapper { padding-bottom: 40px; } .tp-service-cst-slider-wrap .tp-service-cst-item { margin-bottom: 20px; position: relative; } .tp-service-cst-slider-wrap .tp-service-cst-thumb { border-radius: 12px; position: relative; z-index: 1; } .tp-service-cst-slider-wrap .tp-service-cst-thumb img { border-radius: 12px; height: 250px; object-fit: cover; width: 100%; } .tp-service-cst-slider-wrap .tp-service-cst-content { position: relative !important; margin: 15px !important; margin-top: -110px !important; padding: 20px 15px 18px 15px !important; height: 100px !important; backdrop-filter: blur(50px); border-radius: 16px; z-index: 2; } .tp-service-cst-slider-wrap .tp-service-cst-content h5 { font-size: 22px !important; margin-bottom: 10px !important; } .tp-service-cst-slider-wrap .tp-service-cst-item-border { padding-bottom: 15px; margin-bottom: 15px; font-size: 14px !important; line-height: 1.4 !important; border: #fff !important; } .tp-service-cst-slider-wrap .tp-service-cst-item-border br { display: none; } .tp-service-cst-slider-wrap .tp-left-right { display: none !important; } /* Navigation buttons - ONLY for service slider */ .tp-service-cst-slider-wrap > .tp-service-cst-slider-nav { position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%); display: flex; justify-content: space-between; padding: 0 5px; z-index: 100 !important; pointer-events: none; margin-top: 0 !important; } .tp-service-cst-slider-wrap > .tp-service-cst-slider-nav button { width: 50px; height: 50px; border-radius: 50%; background: rgba(255, 255, 255, 0.95); border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; pointer-events: all; transition: all 0.3s ease; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); z-index: 101 !important; position: relative; font-size: 18px; font-weight: bold; color: #021352; } .tp-service-cst-slider-wrap > .tp-service-cst-slider-nav button.tp-service-cst-slider-prev { height: 50px !important; width: 50px !important; } .tp-service-cst-slider-wrap > .tp-service-cst-slider-nav button:hover { background: #021352; transform: scale(1.1); color: #fff; } /* Swiper pagination dots - ONLY for service slider */ .tp-service-cst-slider-wrap .tp-service-cst-slider .swiper-pagination { bottom: 0 !important; display: flex; justify-content: center; gap: 8px; z-index: 10; } .tp-service-cst-slider-wrap .tp-service-cst-slider .swiper-pagination-bullet { width: 8px; height: 8px; background: #E7EAEA; opacity: 0.6; } .tp-service-cst-slider-wrap .tp-service-cst-slider .swiper-pagination-bullet-active { background: #021352; opacity: 1; width: 10px; height: 10px; } /* Hover effects for mobile - ONLY for service items */ .tp-service-cst-slider-wrap .tp-service-cst-item:hover .tp-service-cst-content { background: #021352 !important; } .tp-service-cst-slider-wrap .tp-service-cst-item:hover .tp-service-cst-content h5, .tp-service-cst-slider-wrap .tp-service-cst-item:hover .tp-service-cst-content p, .tp-service-cst-slider-wrap .tp-service-cst-item:hover .tp-service-cst-content a { color: #ffffff !important; } } /* Hide mobile pagination on desktop - FIXED */ @media only screen and (min-width: 431px) { .tp-service-cst-slider-wrap .tp-service-cst-slider .swiper-pagination, .tp-service-cst-slider-wrap > .tp-service-cst-slider-nav { display: none !important; } } /* what wer do page second section second section */ /* Media Query for 430x932 - Using specific selectors */ @media (max-width: 430px) { /* Target only the specific container in this section */ .tp-service-cst-area .container-fluid.p-0 { padding:0 10px !important; margin: 0 5px !important; transform: translateX(20px) !important; } .tp-service-cst-area { margin-top: -120px !important; /* upar le jayega */ position: relative; z-index: 999; } /* Target only columns in this section */ .tp-service-cst-area .col-lg-5, .tp-service-cst-area .col-lg-7 { padding-left: 5px !important; padding-right: 5px !important; } /* Target only shape/image in this section */ .tp-service-cst-area .tp-service-cst-shape { margin-left: -10px !important; text-align: center !important; } .tp-service-cst-area .tp-service-cst-shape img { max-width: 80% !important; margin-left: -5px !important; } /* Target only main content in this section */ .tp-service-cst-area .tp-service-cst-info { margin-left: 0 !important; padding-left: 8px !important; transform: translateX(-10px) !important; } /* Target only headings in this section */ .tp-service-cst-area .tp-service-cst-info h2 { text-align: left !important; margin-right: -20px !important; transform: translateX(-5px) !important; font-size: 30px !important; line-height: 1.3 !important; } /* Target only paragraphs in this section */ .tp-service-cst-area .tp-service-cst-info p { text-align: left !important; margin-left: 5px !important; transform: translateX(-5px) !important; font-size: 18px !important; line-height: 1.5 !important; } /* Remove line breaks only in this section */ .tp-service-cst-area .tp-service-cst-info p br, .tp-service-cst-area .tp-service-cst-info h2 br { display: none !important; } /* Target only list in this section */ .tp-service-cst-area .tp-service-cst-info-list { margin-left: -5px !important; } .tp-service-cst-area .tp-service-cst-info-list ul li { transform: translateX(-8px) !important; margin-left: 5px !important; font-size: 18px !important; } /* Target only button in this section */ .tp-service-cst-area .tp-header-btn { text-align: center !important; transform: translateX(-15px) !important; margin-top: 20px !important; margin-bottom: 20px !important; } /* Target only animations in this section */ .tp-service-cst-area [data-fade-from="right"], .tp-service-cst-area [data-fade-from="left"] { transform: translateX(-5px) !important; animation: none !important; } } /* our sectret sause page new section third section */ @media only screen and (max-width: 430px) and (max-height: 932px) { .counter-section-430 .tp-counter-area { margin-top: -250px !important; padding-bottom: 40px !important; /* Niche ki space kam karega */ } .counter-section-430 .row { display: flex !important; flex-wrap: wrap !important; } .counter-section-430 .col-sm-6 { width: 50% !important; } .counter-section-430 .col-12 { width: 100% !important; } .counter-section-430 .tp-counter-cst-item { margin-bottom: 15px !important; text-align: center; } .counter-section-430 .tp-counter-cst-item-inner { flex-direction: column; align-items: center; justify-content: center; } .counter-section-430 .tp-counter-2-icon { margin-right: 0 !important; margin-bottom: 8px; } .counter-section-430 .tp-counter-2-icon svg { width: 40px !important; height: 35px !important; } .counter-section-430 .tp-ff-dm { font-size: 24px !important; line-height: 1; margin-bottom: 3px; } .counter-section-430 .fs-62 { font-size: 28px !important; } .counter-section-430 .fs-18 { font-size: 11px !important; } .counter-section-430 .tp-service-graph-wrap { padding-top: 20px !important; /* Graph ke upar ki space kam */ padding-bottom: 0px !important; /* Graph ke niche ki space kam */ } .counter-section-430 .tp-service-graph-wrap img { max-height: 100px !important; /* Graph image aur chota */ object-fit: contain; } .counter-section-430 .tp-counter-cst-item.borders::before { display: none; } .counter-section-430 .justify-content-end { justify-content: center !important; } .counter-section-430 .mr-25 { margin-right: 0 !important; } .counter-section-430 .mb-40 { margin-bottom: 50px !important; /* Counter items ke beech ki space kam */ } .counter-section-430 .mt-10 { margin-top: 5px !important; } /* Agar aur space kam karna ho to */ .counter-section-430 .container-fluid { padding-top: 10px !important; padding-bottom: 10px !important; } } /* ============================================================= */ /* ========= 430×932 (Portrait) – MOBILE UTSORAA SECTION ========= */ /* ============================================================= */ @media (max-width: 430px) { .mobile-only-layout-430x932 { display: block !important; padding: 60px 20px 80px !important; text-align: center; font-family: var(--tp-ff-heading, sans-serif); background: #fff; } .mobile-utsoraa-heading { font-size: 40px !important; font-weight: 700; line-height: 1.2; margin-bottom: 20px; color: black; } .mobile-utsoraa-para { font-size: 18px !important; line-height: 1.5; color: black; margin-bottom: 30px; } .mobile-utsoraa-para p{ font-size: 18px !important; line-height: 1.5; color: black; margin-bottom: 30px; } .mobile-utsoraa-divider { border: 0; height: 2px; background: black; margin: 5px 0; } .mobile-utsoraa-dividerr { border: 0; height: 2px; background: black; margin-top: -40px !important; } .mobile-utsoraa-slider-container { position: relative; height: 120px; overflow: hidden; margin: 20px 0; } .mobile-utsoraa-slide-item { position: absolute; top: 0; left: 0; width: 100%; opacity: 0; transform: translateX(100%); transition: all 0.4s ease; } .mobile-utsoraa-slide-item.active { opacity: 1; transform: translateX(0); } .mobile-utsoraa-item-title { font-size: 22px; font-weight: 600; color: black; margin-bottom: 10px; } .mobile-utsoraa-item-desc { font-size: 18px; color: rgba(2, 19, 82, 0.7); line-height: 1.4; } .mobile-utsoraa-pagination { display: flex; justify-content: center; gap: 10px; margin: 25px 0; } .mobile-utsoraa-dot { width: 8px; height: 8px; border-radius: 50%; background: grey; cursor: pointer; transition: all 0.3s ease; } .mobile-utsoraa-dot.active { background: #021352; transform: scale(1.2); } .mobile-utsoraa-btn { /* Remove the ::after and ::before pseudo-elements */ background: linear-gradient(90deg, #021352 0%, #A70C7E 50%, #021352 100%); background-size: 300% 300%; animation: tpGradientMove 10s ease infinite; width: 180px; color: #fff !important; padding: 14px 32px; /* Keep your existing padding */ border-radius: 100px; font-weight: 600; font-size: 15px; border: none; transition: all 0.3s ease; cursor: pointer; text-decoration: none; display: inline-block; position: relative; z-index: 1; margin-top: -20px; } /* Add the gradient animation keyframes */ @keyframes tpGradientMove { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .tp-portfolio-area.utsoraa-why-utsoraa { display: none !important; } /* Show only mobile layout */ .mobile-only-layout-430x932 { display: block !important; padding: 60px 20px 80px !important; text-align: center; font-family: var(--tp-ff-heading, sans-serif); background: #fff; } } /* Hide mobile layout on desktop */ @media (min-width: 992px) { .mobile-only-layout-430x932 { display: none !important; } } /* secrect sauce all mobiels */ /* ============================================================= */ /* ========= 390×844 (Portrait) – SERVICE SLIDER SECTION ======== */ /* SAME AS 430x932 | SWIPER | MOBILE ONLY | NO OVERFLOW */ /* ============================================================= */ @media only screen and (width: 390px) and (height: 844px) and (orientation: portrait) { /* === SLIDER WRAPPER === */ .tp-service-cst-slider-wrap { padding-top: 28px !important; padding-bottom: 28px !important; position: relative !important; } .tp-service-cst-slider-wrap .tp-service-cst-slider { margin-right: 0 !important; padding: 0 13px !important; position: relative !important; } .tp-service-cst-slider-wrap .swiper-wrapper { padding-bottom: 38px !important; } .tp-service-cst-slider-wrap .tp-service-cst-item { margin-bottom: 18px !important; position: relative !important; } /* === THUMB === */ .tp-service-cst-slider-wrap .tp-service-cst-thumb { border-radius: 11px !important; position: relative !important; z-index: 1 !important; } .tp-service-cst-slider-wrap .tp-service-cst-thumb img { border-radius: 11px !important; height: 235px !important; object-fit: cover !important; width: 100% !important; display: block !important; } /* === CONTENT CARD === */ .tp-service-cst-slider-wrap .tp-service-cst-content { position: relative !important; margin: 13px !important; margin-top: -105px !important; padding: 18px 13px 16px 13px !important; height: 95px !important; backdrop-filter: blur(45px) !important; border-radius: 15px !important; z-index: 2 !important; background: rgba(255, 255, 255, 0.88) !important; } .tp-service-cst-slider-wrap .tp-service-cst-content h5 { font-size: 20.5px !important; margin-bottom: 9px !important; line-height: 1.3 !important; } .tp-service-cst-slider-wrap .tp-service-cst-item-border { padding-bottom: 13px !important; margin-bottom: 13px !important; font-size: 13.5px !important; line-height: 1.45 !important; border-bottom: 1px solid #fff !important; } .tp-service-cst-slider-wrap .tp-service-cst-item-border br { display: none !important; } .tp-service-cst-slider-wrap .tp-left-right { display: none !important; } /* === NAVIGATION ARROWS === */ .tp-service-cst-slider-wrap > .tp-service-cst-slider-nav { position: absolute !important; top: 50% !important; left: 0 !important; right: 0 !important; transform: translateY(-50%) !important; display: flex !important; justify-content: space-between !important; padding: 0 4px !important; z-index: 100 !important; pointer-events: none !important; } .tp-service-cst-slider-wrap > .tp-service-cst-slider-nav button { width: 46px !important; height: 46px !important; border-radius: 50% !important; background: rgba(255, 255, 255, 0.95) !important; border: none !important; display: flex !important; align-items: center !important; justify-content: center !important; cursor: pointer !important; pointer-events: all !important; transition: all 0.3s ease !important; box-shadow: 0 2px 9px rgba(0, 0, 0, 0.28) !important; z-index: 101 !important; font-size: 17px !important; font-weight: bold !important; color: #021352 !important; } .tp-service-cst-slider-wrap > .tp-service-cst-slider-nav button:hover { background: #021352 !important; transform: scale(1.1) !important; color: #fff !important; } /* === PAGINATION DOTS === */ .tp-service-cst-slider-wrap .tp-service-cst-slider .swiper-pagination { bottom: 0 !important; display: flex !important; justify-content: center !important; gap: 7px !important; z-index: 10 !important; } .tp-service-cst-slider-wrap .tp-service-cst-slider .swiper-pagination-bullet { width: 7.5px !important; height: 7.5px !important; background: #E7EAEA !important; opacity: 0.6 !important; border-radius: 50% !important; } .tp-service-cst-slider-wrap .tp-service-cst-slider .swiper-pagination-bullet-active { background: #021352 !important; opacity: 1 !important; width: 9.5px !important; height: 9.5px !important; } /* === HOVER EFFECT (TOUCH-FRIENDLY) === */ .tp-service-cst-slider-wrap .tp-service-cst-item:active .tp-service-cst-content { background: #021352 !important; } .tp-service-cst-slider-wrap .tp-service-cst-item:active .tp-service-cst-content h5, .tp-service-cst-slider-wrap .tp-service-cst-item:active .tp-service-cst-content p, .tp-service-cst-slider-wrap .tp-service-cst-item:active .tp-service-cst-content a { color: #ffffff !important; } } /* === DESKTOP: HIDE MOBILE NAV & DOTS === */ @media only screen and (min-width: 431px) { .tp-service-cst-slider-wrap .tp-service-cst-slider .swiper-pagination, .tp-service-cst-slider-wrap > .tp-service-cst-slider-nav { display: none !important; } } @media only screen and (width: 360px) and (height: 800px) and (orientation: portrait) { .tp-service-cst-slider-wrap { padding: 25px 0 !important; } .tp-service-cst-slider-wrap .tp-service-cst-slider { padding: 0 11px !important; } .tp-service-cst-slider-wrap .swiper-wrapper { padding-bottom: 35px !important; } .tp-service-cst-slider-wrap .tp-service-cst-item { margin-bottom: 16px !important; } .tp-service-cst-slider-wrap .tp-service-cst-thumb { border-radius: 10px !important; } .tp-service-cst-slider-wrap .tp-service-cst-thumb img { height: 215px !important; border-radius: 10px !important; } .tp-service-cst-slider-wrap .tp-service-cst-content { margin: 11px !important; margin-top: -95px !important; padding: 16px 11px 14px !important; height: 88px !important; border-radius: 14px !important; } .tp-service-cst-slider-wrap .tp-service-cst-content h5 { font-size: 19px !important; margin-bottom: 8px !important; } .tp-service-cst-slider-wrap .tp-service-cst-item-border { padding-bottom: 11px !important; margin-bottom: 11px !important; font-size: 13px !important; } .tp-service-cst-slider-wrap > .tp-service-cst-slider-nav { padding: 0 3px !important; } .tp-service-cst-slider-wrap > .tp-service-cst-slider-nav button { width: 42px !important; height: 42px !important; font-size: 16px !important; } .tp-service-cst-slider-wrap .swiper-pagination { gap: 6px !important; } .tp-service-cst-slider-wrap .swiper-pagination-bullet { width: 7px !important; height: 7px !important; } .tp-service-cst-slider-wrap .swiper-pagination-bullet-active { width: 9px !important; height: 9px !important; } } @media only screen and (width: 412px) and (height: 915px) and (orientation: portrait) { .tp-service-cst-slider-wrap { padding: 29px 0 !important; } .tp-service-cst-slider-wrap .tp-service-cst-slider { padding: 0 14px !important; } .tp-service-cst-slider-wrap .swiper-wrapper { padding-bottom: 39px !important; } .tp-service-cst-slider-wrap .tp-service-cst-thumb img { height: 245px !important; border-radius: 11.5px !important; } .tp-service-cst-slider-wrap .tp-service-cst-content { margin: 14px !important; margin-top: -108px !important; padding: 19px 14px 17px !important; height: 98px !important; border-radius: 15.5px !important; } .tp-service-cst-slider-wrap .tp-service-cst-content h5 { font-size: 21.5px !important; margin-bottom: 9.5px !important; } .tp-service-cst-slider-wrap .tp-service-cst-item-border { padding-bottom: 14px !important; margin-bottom: 14px !important; font-size: 13.8px !important; } .tp-service-cst-slider-wrap > .tp-service-cst-slider-nav button { width: 48px !important; height: 48px !important; font-size: 17.5px !important; } .tp-service-cst-slider-wrap .swiper-pagination-bullet { width: 7.8px !important; height: 7.8px !important; } .tp-service-cst-slider-wrap .swiper-pagination-bullet-active { width: 9.8px !important; height: 9.8px !important; } } @media only screen and (width: 414px) and (height: 896px) and (orientation: portrait) { .tp-service-cst-slider-wrap { padding: 29px 0 !important; } .tp-service-cst-slider-wrap .tp-service-cst-slider { padding: 0 14px !important; } .tp-service-cst-slider-wrap .swiper-wrapper { padding-bottom: 39px !important; } .tp-service-cst-slider-wrap .tp-service-cst-thumb img { height: 245px !important; border-radius: 11.5px !important; } .tp-service-cst-slider-wrap .tp-service-cst-content { margin: 14px !important; margin-top: -108px !important; padding: 19px 14px 17px !important; height: 98px !important; border-radius: 15.5px !important; } .tp-service-cst-slider-wrap .tp-service-cst-content h5 { font-size: 21.5px !important; } .tp-service-cst-slider-wrap > .tp-service-cst-slider-nav button { width: 48px !important; height: 48px !important; } .tp-service-cst-slider-wrap .swiper-pagination-bullet-active { width: 9.8px !important; height: 9.8px !important; } } @media only screen and (width: 375px) and (height: 667px) and (orientation: portrait) { .tp-service-cst-slider-wrap { padding: 22px 0 !important; } .tp-service-cst-slider-wrap .tp-service-cst-slider { padding: 0 10px !important; } .tp-service-cst-slider-wrap .swiper-wrapper { padding-bottom: 32px !important; } .tp-service-cst-slider-wrap .tp-service-cst-thumb img { height: 195px !important; border-radius: 9px !important; } .tp-service-cst-slider-wrap .tp-service-cst-content { margin: 10px !important; margin-top: -85px !important; padding: 14px 10px 12px !important; height: 78px !important; border-radius: 13px !important; } .tp-service-cst-slider-wrap .tp-service-cst-content h5 { font-size: 18.5px !important; margin-bottom: 7px !important; } .tp-service-cst-slider-wrap > .tp-service-cst-slider-nav button { width: 40px !important; height: 40px !important; font-size: 15px !important; } .tp-service-cst-slider-wrap .swiper-pagination-bullet { width: 6.5px !important; height: 6.5px !important; } .tp-service-cst-slider-wrap .swiper-pagination-bullet-active { width: 8.5px !important; height: 8.5px !important; } } @media only screen and (width: 360px) and (height: 780px) and (orientation: portrait) { .tp-service-cst-slider-wrap { padding: 24px 0 !important; } .tp-service-cst-slider-wrap .tp-service-cst-slider { padding: 0 11px !important; } .tp-service-cst-slider-wrap .swiper-wrapper { padding-bottom: 34px !important; } .tp-service-cst-slider-wrap .tp-service-cst-thumb img { height: 210px !important; } .tp-service-cst-slider-wrap .tp-service-cst-content { margin-top: -92px !important; height: 85px !important; padding: 15px 11px 13px !important; } .tp-service-cst-slider-wrap .tp-service-cst-content h5 { font-size: 18.8px !important; } } @media only screen and (width: 360px) and (height: 640px) and (orientation: portrait) { .tp-service-cst-slider-wrap { padding: 20px 0 !important; } .tp-service-cst-slider-wrap .tp-service-cst-slider { padding: 0 9px !important; } .tp-service-cst-slider-wrap .swiper-wrapper { padding-bottom: 30px !important; } .tp-service-cst-slider-wrap .tp-service-cst-thumb img { height: 180px !important; border-radius: 8px !important; } .tp-service-cst-slider-wrap .tp-service-cst-content { margin: 9px !important; margin-top: -78px !important; padding: 13px 9px 11px !important; height: 72px !important; border-radius: 12px !important; } .tp-service-cst-slider-wrap .tp-service-cst-content h5 { font-size: 17.5px !important; margin-bottom: 6px !important; } .tp-service-cst-slider-wrap > .tp-service-cst-slider-nav button { width: 38px !important; height: 38px !important; font-size: 14px !important; } .tp-service-cst-slider-wrap .swiper-pagination-bullet { width: 6px !important; height: 6px !important; } .tp-service-cst-slider-wrap .swiper-pagination-bullet-active { width: 8px !important; height: 8px !important; } } @media only screen and (width: 412px) and (height: 869px) and (orientation: portrait) { .tp-service-cst-slider-wrap { padding: 28px 0 !important; } .tp-service-cst-slider-wrap .tp-service-cst-thumb img { height: 240px !important; } .tp-service-cst-slider-wrap .tp-service-cst-content { margin-top: -105px !important; height: 96px !important; } .tp-service-cst-slider-wrap .tp-service-cst-content h5 { font-size: 21px !important; } } @media only screen and (width: 428px) and (height: 926px) and (orientation: portrait) { .tp-service-cst-slider-wrap { padding: 30px 0 !important; } .tp-service-cst-slider-wrap .tp-service-cst-slider { padding: 0 15px !important; } .tp-service-cst-slider-wrap .tp-service-cst-thumb img { height: 255px !important; border-radius: 12px !important; } .tp-service-cst-slider-wrap .tp-service-cst-content { margin: 15px !important; margin-top: -112px !important; padding: 20px 15px 18px !important; height: 102px !important; border-radius: 16px !important; } .tp-service-cst-slider-wrap .tp-service-cst-content h5 { font-size: 22.5px !important; } .tp-service-cst-slider-wrap > .tp-service-cst-slider-nav button { width: 51px !important; height: 51px !important; } } /* 1400 × 900 — FULLY CONTROLLABLE BLOG CARD (Tumhara Final Code) */ @media (min-width: 1400px) and (max-width: 1499px) { /* ===== 1. BLOG SECTION LEFT-RIGHT MARGIN (andar kitna laana hai) ===== */ .tp-blog-area { padding-left: 90px !important; /* ← YAHAN BADLO = pura section andar/bahar */ padding-right: 90px !important; } .tp-blog-area .container-fluid.container-1824 { padding-left: 50px !important; padding-right: 50px !important; } /* ===== 2. IMAGE KI WIDTH & HEIGHT CONTROL ===== */ .tp-blog-area .tp-blog-ai-thumb img { width: 94% !important; /* ← YAHAN % BADLO = image chhoti/badi */ height: 400px !important; margin: 0 auto !important; display: block !important; padding: 0 20px !important; /* ← left-right se space */ border-radius: 16px !important; } .tp-blog-area .tp-blog-ai-thumb { padding: 18px 26px 0 26px !important; /* ← image ke aas-paas space */ } /* ===== 3. TEXT CARD (WHITE WALA) KI WIDTH & HEIGHT ===== */ .tp-blog-area .tp-blog-ai-content { padding: 48px 38px 40px 38px !important; margin: 0 22px 22px 22px !important; margin-top: -180px !important; /* ← YAHAN BADLO = card upar-niche shift */ } .tp-blog-area .tp-blog-md-content { height: 190px !important; width: 369px !important; /* ← YAHAN BADLO = text card ki height */ padding: 42px 38px !important; margin-top: -98px !important; /* ← card aur upar kheenchne ke liye */ margin-left: -3px !important; } /* ← MAIN HEADING (h2) KI HEIGHT & SPACING CONTROL */ .tp-blog-area .tp-testimonial-ai-title-wrap h2, .tp-blog-area .tp-section-md-title { font-size: 78px !important; /* ← title ka size (badhao ya ghatayo) */ line-height: 1.05 !important; /* ← YAHAN BADLO = dono lines ke beech ka gap */ /* 1.0 = bilkul chipka, 1.1 = thoda khula, 1.2 = zyada khula */ margin-bottom: 40px !important; /* ← heading ke niche kitna gap chahiye */ padding: 0 !important; } /* Agar line-height se bhi control na mile toh ye nuclear option */ .tp-blog-area .tp-testimonial-ai-title-wrap h2 br { display: block !important; content: "" !important; margin-top: 15px !important; /* ← "medical" aur "health experts" ke beech ka gap */ /* 10px = kam, 30px = zyada */ } /* Pura title wrap ki height bhi control kar sakte ho */ .tp-blog-area .tp-testimonial-ai-title-wrap { margin-bottom: 60px !important; /* ← pura heading block ke niche space */ padding-top: 20px !important; /* ← upar se kitna gap */ } /* ===== 5. BUTTON POSITION (left-right adjust) ===== */ .tp-btn-ai-blog { left: 170px !important; /* ← button ko left/right shift */ width: 200px !important; padding: 13px 28px !important; } }