/* ************************************************** © 2025 Onteva Inc. All rights reserved. ************************************************** Guidelines for Use: 1. This template is exclusively intended for deployment on the Onteva KIERO and Onteva ENTRO platforms. 2. Only the content within the tag should be utilized by carriers/agencies using the Onteva Platform; assets in the section (CSS and JS) are included for preview purposes only. 3. Onteva will not modify these files under any circumstances. 4. All JavaScript will be automatically removed from customized versions. 5. Images must be hosted in Onteva’s Public Blob Storage to be included. 6. Duplication is permitted only for the markup contained within the tag. 7. The template is not to be used for any other purpose, including but not limited to: - Email templates - Other platforms - Other websites If you need assistance, contact us at support@onteva.com - If you need to hire a designer, we can connect you with a third party Onteva Platform specialist. /************ TABLE OF CONTENTS *************** ----------------- 01. THEME CSS ----------------- 1.1 Theme Default 1.2 Common Classes 1.3 Default Spacing ----------------- 02. COMPONENTS css ----------------- 2.1 Back to top 2.2 Buttons 2.3 Animations 2.4 Preloader 2.5 Background 2.6 Nice Select 2.7 Pagination 2.8 Offcanvas 2.9 Breadcrumb 2.10 Accordion 2.11 Section Title 2.12 Search ----------------- 03. HEADER CSS ----------------- 3.1 Header Style 1 3.2 Header Style 2 3.3 Header Style 3 3.4 Header Style 4 --------------------------------- 04. MENU CSS --------------------------------- 4.1 Main menu css 4.2 Mobilemenu css --------------------------------- 05. BLOG CSS --------------------------------- 5.1 Postbox css 5.2 Recent Post css 5.3 Sidebar css 5.4 Blog css --------------------------------- 06. FOOTER CSS --------------------------------- 6.1 Footer Style 1 6.2 Footer Style 2 6.3 Footer Style 3 --------------------------------- 07. PAGES CSS --------------------------------- 7.1 About css 7.2 Award css 7.3 Brand css 7.4 contact css 7.5 funfact css 7.6 Slider css 7.7 price css 7.8 Services css 7.9 Testimonial css 7.10 Banner css 7.11 Choose css 7.12 Cta css 7.13 Discover css 7.14 Error css 7.15 Event css 7.16 Faq css 7.17 Featured css 7.18 Order css 7.19 Portfolio css 7.20 Team css 7.21 Video css 7.22 Text-slider css 7.23 Shop css 7.24 Cart css 7.25 Checkout css **********************************************/ /*----------------------------------------*/ /* 1.1 Theme Default /*----------------------------------------*/ @import url("https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap"); .back-to-top-wrapper, a, button, p, input, select, textarea, li, .transition-3 { -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } /* transform */ :root { /** @font family declaration */ --tp-ff-body: 'Manrope', sans-serif; --tp-ff-heading: 'Manrope', sans-serif; --tp-ff-p: 'Manrope', sans-serif; --tp-ff-fontawesome: "Font Awesome 6 Pro"; /** @color declaration */ --tp-common-white: #ffffff; --tp-common-black: #223645; --tp-grey-1: #f9f9f9; --tp-grey-2: #f5f5f5; --tp-text-body: #7a8a9e; --tp-text-body-2: #9ca6ae; --tp-theme-1: #e12454; --tp-border-1: #e6e6e6; } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } /*--------------------------------- typography css start ---------------------------------*/ body { font-size: 14px; line-height: 26px; font-weight: normal; color: var(--tp-text-body); font-family: var(--tp-ff-body); } img { max-width: 100%; } a { text-decoration: none; } h1, h2, h3, h4, h5, h6 { margin-top: 0px; font-weight: 500; line-height: 1.2; -webkit-transition: color 0.3s ease-out; -moz-transition: color 0.3s ease-out; -ms-transition: color 0.3s ease-out; -o-transition: color 0.3s ease-out; transition: color 0.3s ease-out; color: var(--tp-common-black); font-family: var(--tp-ff-heading); } h1 { font-size: 40px; } h2 { font-size: 36px; } h3 { font-size: 28px; } h4 { font-size: 24px; } h5 { font-size: 20px; } h6 { font-size: 16px; } ul { margin: 0px; padding: 0px; } p { font-size: 16px; font-weight: 500; margin-bottom: 15px; line-height: 1.9; font-family: var(--tp-ff-p); color: var(--tp-text-body); } a:not([href]):not([class]), a:not([href]):not([class]):hover { color: inherit; text-decoration: none; } a:focus, .button:focus { text-decoration: none; outline: none; } a:focus, a:hover { color: inherit; text-decoration: none; } a, button { color: inherit; outline: none; border: none; background: transparent; } button:hover { cursor: pointer; } button:focus { outline: 0; } .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; height: 56px; width: 100%; line-height: 56px; font-size: 14px; padding-left: 26px; padding-right: 26px; color: var(--tp-common-black); border: 1px solid var(--tp-common-black); background-color: 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-common-black); } input[type=text]::-moz-placeholder, input[type=email]::-moz-placeholder, input[type=tel]::-moz-placeholder, input[type=number]::-moz-placeholder, input[type=password]::-moz-placeholder, input[type=url]::-moz-placeholder, textarea::-moz-placeholder { /* Firefox 19+ */ color: var(--tp-common-black); } input[type=text]:-moz-placeholder, input[type=email]:-moz-placeholder, input[type=tel]:-moz-placeholder, input[type=number]:-moz-placeholder, input[type=password]:-moz-placeholder, input[type=url]:-moz-placeholder, textarea:-moz-placeholder { /* Firefox 4-18 */ color: var(--tp-common-black); } input[type=text]:-ms-input-placeholder, input[type=email]:-ms-input-placeholder, input[type=tel]:-ms-input-placeholder, input[type=number]:-ms-input-placeholder, input[type=password]:-ms-input-placeholder, input[type=url]:-ms-input-placeholder, textarea:-ms-input-placeholder { /* IE 10+ Edge*/ color: var(--tp-common-black); } input[type=text]::placeholder, input[type=email]::placeholder, input[type=tel]::placeholder, input[type=number]::placeholder, input[type=password]::placeholder, input[type=url]::placeholder, textarea::placeholder { /* MODERN BROWSER */ color: var(--tp-common-black); } input[type=text]:focus, input[type=email]:focus, input[type=tel]:focus, input[type=number]:focus, input[type=password]:focus, input[type=url]:focus, textarea:focus { border: 1px solid var(--tp-theme-1); } input[type=text]:focus::placeholder, input[type=email]:focus::placeholder, input[type=tel]:focus::placeholder, input[type=number]:focus::placeholder, input[type=password]:focus::placeholder, input[type=url]:focus::placeholder, textarea:focus::placeholder { opacity: 0; } textarea { line-height: 1.4; padding-top: 17px; padding-bottom: 17px; } input[type=color] { appearance: none; -moz-appearance: none; -webkit-appearance: none; background: none; border: 0; cursor: pointer; height: 100%; width: 100%; padding: 0; border-radius: 50%; } *::-moz-selection { background: var(--tp-common-black); color: var(--tp-common-white); text-shadow: none; } ::-moz-selection { background: var(--tp-common-black); color: var(--tp-common-white); text-shadow: none; } ::selection { background: var(--tp-common-black); color: var(--tp-common-white); text-shadow: none; } *::-moz-placeholder { color: var(--tp-common-black); font-size: 14px; opacity: 1; } *::placeholder { color: var(--tp-common-black); font-size: 14px; opacity: 1; } .z-index-1 { position: relative; z-index: 2; } /*--------------------------------- 1.2 Common Classes ---------------------------------*/ .w-img img { width: 100%; } .m-img img { max-width: 100%; } .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; } .gx-10 { --bs-gutter-x: 10px; } .gx-20 { --bs-gutter-x: 20px; } .gx-30 { --bs-gutter-x: 30px; } .gx-40 { --bs-gutter-x: 40px; } .gx-45 { --bs-gutter-x: 45px; } .gx-50 { --bs-gutter-x: 50px; } .gx-60 { --bs-gutter-x: 60px; } .gx-70 { --bs-gutter-x: 70px; } .gx-80 { --bs-gutter-x: 80px; } .gx-90 { --bs-gutter-x: 90px; } .gx-100 { --bs-gutter-x: 100px; } .overflow-y-visible { overflow-x: hidden; overflow-y: visible; } .p-relative { position: relative; } .p-absolute { position: absolute; } .include-bg { background-position: center; background-size: cover; background-repeat: no-repeat; } /* dropcap */ .tp-dropcap::first-letter { float: left; width: 65px; height: 85px; font-size: 90px; line-height: 0.8; font-weight: 500; margin-right: 5px; text-align: center; line-height: inherit; text-transform: capitalize; color: var(--tp-common-white); font-family: var(--tp-ff-body); } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tp-plr-rs { padding-top: 80px; padding-bottom: 80px; } } /*--------------------------------- 1.3 Default Spacing ---------------------------------*/ /*----------------------------------------*/ /* 2.1 Back to top /*----------------------------------------*/ .back-to-top-wrapper { position: fixed; right: 50px; bottom: 0; height: 44px; width: 44px; cursor: pointer; display: block; border-radius: 50%; z-index: 99; opacity: 0; visibility: hidden; } @media (max-width: 575px) { .back-to-top-wrapper { right: 20px; bottom: 20px; } } .back-to-top-wrapper.back-to-top-btn-show { visibility: visible; opacity: 1; bottom: 50px; } .back-to-top-btn { display: inline-block; width: 44px; height: 44px; line-height: 44px; text-align: center; background: var(--tp-theme-1); box-shadow: 0px 8px 16px rgba(3, 4, 28, 0.3); color: var(--tp-common-white); border-radius: 50%; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .back-to-top-btn svg { -webkit-transform: translateY(-2px); -moz-transform: translateY(-2px); -ms-transform: translateY(-2px); -o-transform: translateY(-2px); transform: translateY(-2px); } .back-to-top-btn:hover { -webkit-transform: translateY(-4px); -moz-transform: translateY(-4px); -ms-transform: translateY(-4px); -o-transform: translateY(-4px); transform: translateY(-4px); } /*----------------------------------------*/ /* 2.2 Buttons /*----------------------------------------*/ .tp-theme-btn { display: inline-block; font-weight: 700; font-size: 16px; padding: 17px 41px; border-radius: 50px; color: var(--tp-common-white); background-color: var(--tp-theme-1); -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tp-theme-btn { padding: 17px 35px; } } .tp-theme-btn.btn-black { padding: 11px 41px; color: var(--tp-common-white); background-color: var(--tp-common-black); } .tp-theme-btn.btn-black:hover { color: var(--tp-common-white); background-color: var(--tp-theme-1); } .tp-theme-btn.btn-white:hover { color: var(--tp-common-black); background-color: var(--tp-common-white); } .tp-theme-btn.black { color: var(--tp-common-white); background: var(--tp-common-black); } .tp-theme-btn.black:hover { color: var(--tp-common-black); background: var(--tp-common-white); } .tp-theme-btn.transparent-btn { color: var(--tp-theme-1); background: none; border: 1px solid var(--tp-border-1); } .tp-theme-btn.transparent-btn:hover { border: 1px solid var(--tp-common-black); } .tp-theme-btn.transparent-btn-2 { padding: 10px 40px; border: 1px solid #56646f; background: none; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .tp-theme-btn.transparent-btn-2:hover { border: 1px solid var(--tp-common-white); background-color: var(--tp-theme-1); } .tp-theme-btn:hover { color: var(--tp-common-white); background-color: var(--tp-common-black); } .tp-menu-btn { position: relative; z-index: 1; line-height: 1; font-size: 15px; font-weight: 700; overflow: hidden; width: 128px; padding: 14px 20px; letter-spacing: 0px; display: inline-block; transition: all 0.3s linear; background: var(--tp-theme-1); color: var(--tp-common-white); } .tp-menu-btn:hover { color: var(--tp-common-white); } .tp-menu-btn::after { position: absolute; content: ""; background-color: var(--tp-common-black); width: 100%; height: 0%; left: 50%; top: 50%; border-radius: 0px; transform: translate(-50%, -50%) rotate(-45deg); z-index: -1; transition: all 500ms ease; } .tp-menu-btn:hover:after { height: 380%; } .tp-menu-btn-green { background: var(--tp-theme-2); } .tp-menu-btn-black { background: var(--tp-common-black); } .tp-menu-btn-black::after { background: var(--tp-theme-primary); } /*----------------------------------------*/ /* 2.3 Animations /*----------------------------------------*/ @keyframes headerSlideDown { 0% { margin-top: -150px; } 100% { margin-top: 0; } } @-webkit-keyframes movingX { 0% { left: 100%; } 100% { left: -25%; } } @keyframes movingX { 0% { left: 100%; } 100% { left: -25%; } } @-webkit-keyframes spin-1 { 0% { transform: rotate(10deg); } 100% { transform: rotate(-10deg); } } @-moz-keyframes spin-1 { 0% { transform: rotate(10deg); } 100% { transform: rotate(-10deg); } } @-ms-keyframes spin-1 { 0% { transform: rotate(10deg); } 100% { transform: rotate(-10deg); } } @keyframes spin-1 { 0% { transform: rotate(10deg); } 100% { transform: rotate(-10deg); } } @keyframes moving { 0% { transform: translatey(0px); } 50% { transform: translatey(-20px); } 100% { transform: translatey(0px); } } @keyframes zoom { 0% { transform: scale(0.5); } 50% { transform: scale(1); } 100% { transform: scale(0.5); } } @keyframes pulse { 0% { -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4); } 70% { -webkit-box-shadow: 0 0 0 45px rgba(255, 255, 255, 0); } 100% { -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); } } @keyframes rotate2 { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes icon-bounce { 0%, 100%, 20%, 50%, 80% { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } 40% { -webkit-transform: translateY(-10px); -moz-transform: translateY(-10px); -ms-transform: translateY(-10px); -o-transform: translateY(-10px); transform: translateY(-10px); } 60% { -webkit-transform: translateY(-5px); -moz-transform: translateY(-5px); -ms-transform: translateY(-5px); -o-transform: translateY(-5px); transform: translateY(-5px); } } @keyframes tptranslateX2 { 0% { -webkit-transform: translateX(-30px); -moz-transform: translateX(-30px); -ms-transform: translateX(-30px); -o-transform: translateX(-30px); transform: translateX(-30px); } 100% { -webkit-transform: translatXY(20px); -moz-transform: translateX(20px); -ms-transform: translateX(20px); -o-transform: translateX(20px); transform: translateX(20px); } } @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 borderanimate2 { 0% { transform: translate(-50%, -50%) scale(0.8); } 60% { opacity: 1; } 100% { transform: translate(-50%, -50%) scale(2.5); opacity: 0; } } @keyframes tp-arrow { 49% { transform: translateX(30%); } 50% { opacity: 0; transform: translateX(-30%); } 51% { opacity: 1; } } @keyframes scroll1 { 0% { top: 0%; } 50% { top: 95%; } 100% { top: 0%; } } @keyframes dash { to { stroke-dashoffset: 0px; stroke-dasharray: 3000; } } /*----------------------------------------*/ /* 2.4 Preloader /*----------------------------------------*/ #loading { background-color: #fff; height: 100%; width: 100%; position: fixed; z-index: 999999; margin-top: 0px; top: 0px; } #loading-center { width: 100%; height: 100%; position: relative; } #loading-center-absolute { position: absolute; left: 50%; top: 50%; width: 25%; transform: translate(-50%, -50%); } @media only screen and (min-width: 1200px) and (max-width: 1399px) { #loading-center-absolute { width: 40%; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { #loading-center-absolute { width: 40%; } } @media only screen and (min-width: 768px) and (max-width: 991px) { #loading-center-absolute { width: 45%; } } @media only screen and (min-width: 576px) and (max-width: 767px) { #loading-center-absolute { width: 50%; } } @media (max-width: 575px) { #loading-center-absolute { width: 90%; } } #loading { background-color: #fff; height: 100%; width: 100%; position: fixed; z-index: 999999; margin-top: 0px; top: 0px; } #loading-center { width: 100%; height: 100%; position: relative; } #loading-center-absolute { position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .tp-preloader-logo { width: 180px; height: 180px; line-height: 180px; position: relative; text-align: center; margin: auto; } .tp-preloader-logo img { animation: zoom-in-zoom-out 1.5s ease-out infinite; } .tp-preloader-circle { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .tp-preloader-circle svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -webkit-animation: tp-rotate 5s linear infinite; -moz-animation: tp-rotate 5s linear infinite; -ms-animation: tp-rotate 5s linear infinite; -o-animation: tp-rotate 5s linear infinite; animation: tp-rotate 5s linear infinite; } .tp-preloader-circle svg circle:last-child { stroke: var(--tp-theme-1); stroke-dashoffset: 0; stroke-dasharray: 1128, 3150; -webkit-animation: tp-loading 4s linear infinite; -moz-animation: tp-loading 4s linear infinite; -ms-animation: tp-loading 4s linear infinite; -o-animation: tp-loading 4s linear infinite; animation: tp-loading 4s linear infinite; transform-origin: center center; } @-webkit-keyframes tp-loading { 0% { stroke-dashoffset: 0; stroke-dasharray: 0, 3150; } 100% { stroke-dashoffset: -1131; stroke-dasharray: 1128, 3138; } } @-moz-keyframes tp-loading { 0% { stroke-dashoffset: 0; stroke-dasharray: 0, 3150; } 100% { stroke-dashoffset: -1131; stroke-dasharray: 1128, 3138; } } @-ms-keyframes tp-loading { 0% { stroke-dashoffset: 0; stroke-dasharray: 0, 3150; } 100% { stroke-dashoffset: -1131; stroke-dasharray: 1128, 3138; } } @keyframes tp-loading { 0% { stroke-dashoffset: 0; stroke-dasharray: 0, 3150; } 100% { stroke-dashoffset: -1131; stroke-dasharray: 1128, 3138; } } @-webkit-keyframes tp-rotate { 0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } } @-moz-keyframes tp-rotate { 0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } } @-ms-keyframes tp-rotate { 0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes tp-rotate { 0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } } .tp-preloader-content { text-align: center; } .tp-preloader-title { font-size: 100px; font-weight: 500; line-height: 1; margin-bottom: 0px; } @media (max-width: 575px) { .tp-preloader-title { font-size: 70px; } } .tp-preloader-subtitle { font-size: 16px; margin-bottom: 0; color: var(--tp-common-black); } @keyframes zoom-in-zoom-out { 0% { transform: scale(1, 1); } 50% { transform: scale(1.1, 1.1); } 100% { transform: scale(1, 1); } } /*----------------------------------------*/ /* 2.7 Pagination /*----------------------------------------*/ .basic-pagination ul li { display: inline-block; margin-right: 8px; } .basic-pagination ul li a { width: 38px; height: 38px; line-height: 38px; text-align: center; display: block; color: var(--tp-common-black); background: var(--tp-grey-1); border-radius: 50%; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .basic-pagination ul li a:hover { color: var(--tp-common-white); background: var(--tp-common-black); } .basic-pagination ul li a .current { width: 100%; height: 100%; border-radius: 200px; display: inline-block; color: var(--tp-common-white); background: 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: 575px) { .basic-pagination { padding-bottom: 80px; } } .tp-pagination-number span { width: 60px; height: 60px; font-size: 18px; font-weight: 700; line-height: 60px; display: block; opacity: 1; text-align: center; color: var(--tp-common-white); background: transparent; } .tp-pagination-number span.swiper-pagination-bullet-active { background: #030024; } /*----------------------------------------*/ /* 2.5 Background /*----------------------------------------*/ .grey-bg { background-color: var(--tp-grey-1); } .grey-bg-2 { background-color: var(--tp-grey-2); } .theme-bg { background-color: var(--tp-theme-1); } .white-bg { background-color: var(--tp-common-white); } .black-bg { background-color: var(--tp-common-black); } [data-bg-color=footer-bg-grey] { background-color: var(--tp-footer-grey-1); } [data-bg-color=footer-bg-white] { background-color: var(--tp-common-white); } /*----------------------------------------*/ /* 2.6 Nice Select /*----------------------------------------*/ .nice-select { -webkit-tap-highlight-color: transparent; background-color: #fff; border-radius: 5px; border: solid 1px #e8e8e8; box-sizing: border-box; clear: both; cursor: pointer; display: block; float: left; font-family: inherit; font-size: 14px; font-weight: normal; height: 42px; line-height: 40px; outline: none; padding-left: 18px; padding-right: 30px; position: relative; text-align: left !important; -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; user-select: none; white-space: nowrap; width: auto; } .nice-select:hover { border-color: #dbdbdb; } .nice-select:active, .nice-select.open, .nice-select:focus { border-color: #999; } .nice-select::after { position: absolute; content: "\f107"; top: 50%; right: 0; font-family: var(--tp-ff-fontawesome); color: var(--tp-common-black); font-weight: 500; pointer-events: none; -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: var(--tp-common-white); 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: 0; pointer-events: none; position: absolute; top: 100%; right: 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; } @media (max-width: 575px) { .nice-select .list { right: -30px; } } .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; color: var(--tp-common-black); -webkit-transition: all 0.2s; transition: all 0.2s; } .nice-select .option.selected { font-weight: bold; } .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 /*----------------------------------------*/ .tp-offcanvas { position: fixed; background: #fff; width: 500px; right: 0; top: 0; padding: 50px 40px; height: 100%; opacity: 0; visibility: hidden; -webkit-transform: translateX(100%); -moz-transform: translateX(100%); -ms-transform: translateX(100%); -o-transform: translateX(100%); transform: translateX(100%); -webkit-transition: 0.3s 0.3s ease-out; -moz-transition: 0.3s 0.3s ease-out; -ms-transition: 0.3s 0.3s ease-out; -o-transition: 0.3s 0.3s ease-out; transition: 0.3s 0.3s ease-out; overflow-y: scroll; overscroll-behavior-y: contain; scrollbar-width: none; z-index: 999; } @media only screen and (max-width: 400px) { .tp-offcanvas { width: 100%; padding: 35px 30px; } } .tp-offcanvas-open { opacity: 1; visibility: visible; -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } .tp-offcanvas-close-toggle { font-size: 29px; color: var(--tp-heading-color); } .tp-offcanvas-close-toggle:hover { color: var(--tp-theme-1); } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 575px) { .tp-offcanvas-header { margin-bottom: 40px; } } .tp-offcanvas-title { font-size: 35px; } .tp-offcanvas-gallery { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-gap: 10px; } .tp-offcanvas-info span { font-size: 16px; display: block; margin-bottom: 5px; color: var(--tp-common-black); } .tp-offcanvas-sm-title { font-size: 25px; margin-bottom: 15px; } .tp-offcanvas-social a { font-size: 14px; width: 40px; height: 40px; line-height: 39px; text-align: center; border-radius: 40px; display: inline-block; color: var(--tp-heading-color); border: 1px solid rgba(2, 11, 24, 0.1); margin-right: 5px; } .tp-offcanvas-overlay { position: fixed; top: 0; left: 0; z-index: 888; width: 100%; height: 100%; visibility: hidden; opacity: 0; transition: 0.45s ease-in-out; background: rgba(24, 24, 24, 0.4); } .tp-offcanvas-overlay-open { opacity: 0.7; visibility: visible; } /*----------------------------------------*/ /* 2.9 Breadcrumb /*----------------------------------------*/ .breadcrumb-plr { padding-top: 186px; padding-bottom: 186px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .breadcrumb-plr { padding-top: 100px; padding-bottom: 100px; } } .breadcrumb-bg { background-size: cover; background-position: right; background-repeat: no-repeat; } @media (max-width: 575px) { .breadcrumb-bg { background-position: center; } } .breadcrumb-overlay::before { position: absolute; width: 100%; height: 100%; top: 0; left: 0px; opacity: 0.4; content: ""; background-color: #081d2d; } .breadcrumb-list { position: relative; font-size: 16px; padding: 10px 16px; display: inline-block; background: var(--tp-common-black); border-radius: 50px; } .breadcrumb-list span { font-weight: 700; padding-right: 10px; } .breadcrumb-list .dvdr::after { position: absolute; top: 50%; width: 6px; height: 6px; content: ""; display: inline-block; transform: translateY(-50%); background: var(--tp-common-white); border-radius: 50%; } .breadcrumb-sub-title { color: var(--tp-common-white); margin-left: 7px; } .breadcrumb-title { font-size: 60px; font-weight: 700; color: var(--tp-common-white); line-height: 1.3; } @media (max-width: 575px) { .breadcrumb-title { font-size: 50px; } } /*----------------------------------------*/ /* 2.10 Accordion /*----------------------------------------*/ .tp-faq-accordion-box .accordion-items { position: relative; margin-bottom: 20px; } .tp-faq-accordion-box .accordion-header { border-radius: 15px; background-color: white; box-shadow: 0px 4px 20px 0px rgba(16, 23, 40, 0.06); margin-bottom: -10px; } .tp-faq-accordion-box .accordion-icon { position: absolute; width: 25px; height: 25px; top: 17px; left: 30px; display: inline-block; background: var(--tp-theme-1); border-radius: 50%; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .tp-faq-accordion-box .accordion-icon::before { position: absolute; content: ""; width: 2px; height: 8px; left: 50%; top: 50%; transform: translate(-50%, -50%); background-color: #fff; border-radius: 2px; transition: 0.4s; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .tp-faq-accordion-box .accordion-icon::after { position: absolute; content: ""; width: 8px; height: 2px; left: 50%; top: 50%; transform: translate(-50%, -50%); background-color: #fff; border-radius: 2px; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .tp-faq-accordion-box .accordion-buttons { width: 100%; font-size: 16px; font-weight: 700; text-align: left; padding: 18px 0; padding-left: 74px; color: var(--tp-common-black); border-radius: 15px; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .tp-faq-accordion-box .accordion-buttons:not(.collapsed) { color: var(--tp-common-white); background: var(--tp-theme-1); } .tp-faq-accordion-box .accordion-buttons:not(.collapsed) .accordion-icon { background: var(--tp-common-white); } .tp-faq-accordion-box .accordion-buttons:not(.collapsed) .accordion-icon::before { background: var(--tp-common-black); transform: translate(-50%, -50%) rotate(90deg); } .tp-faq-accordion-box .accordion-buttons:not(.collapsed) .accordion-icon::after { background: var(--tp-common-black); } .tp-faq-accordion-box .accordion-body { border-radius: 0 0 15px 15px; background-color: white; box-shadow: 0px 4px 20px 0px rgba(16, 23, 40, 0.06); padding: 30px 27px 20px 27px; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .tp-faq-accordion-box .accordion-body p { margin: 0; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tp-faq-accordion-box .accordion-body p br { display: none; } } .tp-faq-2 .accordion-items { position: relative; } .tp-faq-2 .accordion-header { background-color: var(--tp-grey-1); box-shadow: none; } .tp-faq-2 .accordion-body { background-color: var(--tp-grey-1); box-shadow: none; } /*----------------------------------------*/ /* 2.11 Section Title /*----------------------------------------*/ .tp-section-title { font-weight: 800; font-size: 50px; display: inline-block; letter-spacing: -2px; color: var(--tp-common-black); } @media only screen and (min-width: 576px) and (max-width: 767px) { .tp-section-title { font-size: 35px; } } @media (max-width: 575px) { .tp-section-title { letter-spacing: -1px; } } .tp-section-subtitle { font-weight: 700; font-size: 16px; display: block; color: var(--tp-theme-1); margin-bottom: 10px; } .tp-section-subtitle.tp-subtitle-2 { display: inline-block; padding: 2px 10px; color: var(--tp-common-white); background: #030024; border-radius: 30px; } .tp-title-hover { background-size: 0% 1px, 0 1px; background-repeat: no-repeat; transition: background-size 0.4s linear; background-position: 100% 100%, 0 93%; background-image: linear-gradient(#fff, #fff), linear-gradient(#fff, #fff); } .tp-title-hover:hover { background-size: 0 1px, 100% 1px; } /*----------------------------------------*/ /* 2.12 Search /*----------------------------------------*/ .search-popup { padding: 70px; padding-top: 70px; padding-bottom: 100px; position: fixed; top: 0; left: 0; right: 0; width: 100%; height: 45%; background-color: rgba(0, 0, 0, 0.8); z-index: 99999; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); -webkit-transform: translateY(calc(-100% - 80px)); -moz-transform: translateY(calc(-100% - 80px)); -ms-transform: translateY(calc(-100% - 80px)); -o-transform: translateY(calc(-100% - 80px)); transform: translateY(calc(-100% - 80px)); -webkit-transition: transform 0.6s ease-in-out, opacity 0.6s ease-in-out; -moz-transition: transform 0.6s ease-in-out, opacity 0.6s ease-in-out; transition: transform 0.6s ease-in-out, opacity 0.6s ease-in-out; transition-delay: 0.7s; } .search-popup.search-opened { -webkit-transform: translateY(0%); -moz-transform: translateY(0%); -ms-transform: translateY(0%); -o-transform: translateY(0%); transform: translateY(0%); transition-delay: 0s; } .search-popup.search-opened .search-input { -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); transform: translateY(0px); opacity: 1; transition-delay: 0.3s; } .search-popup.search-opened .search-input::after { width: 100%; transition-delay: 0.5s; } .search-popup-2 { background-color: var(--tp-common-black-13); } .search-popup-2 .search-input .search-input-field ~ .search-focus-border { background-color: var(--tp-theme-8); } .search-popup-3 .search-input .search-input-field ~ .search-focus-border { background-color: var(--tp-theme-10); } .search-top { margin-bottom: 80px; } .search-input { position: relative; height: 80px; transition: all 0.3s ease-out 0s; transition-delay: 0.5s; opacity: 0; } .search-input::after { position: absolute; content: ""; left: 0; bottom: 0; width: 0%; height: 1px; background-color: rgba(255, 255, 255, 0.3); transition: all 0.3s ease-out 0s; transition-delay: 0.3s; } .search-input input { width: 100%; height: 100%; background-color: transparent; border: 0; outline: 0; font-size: 24px; color: var(--tp-common-white); border-bottom: 1px solid transparent; padding: 0; padding-right: 30px; } .search-input input::-webkit-input-placeholder { /* Chrome/Opera/Safari */ color: rgba(255, 255, 255, 0.5); font-size: 24px; } .search-input input::-moz-placeholder { /* Firefox 19+ */ color: rgba(255, 255, 255, 0.5); font-size: 24px; } .search-input input:-moz-placeholder { /* Firefox 4-18 */ color: rgba(255, 255, 255, 0.5); font-size: 24px; } .search-input input:-ms-input-placeholder { /* IE 10+ Edge*/ color: rgba(255, 255, 255, 0.5); font-size: 24px; } .search-input input::placeholder { /* MODERN BROWSER */ color: rgba(255, 255, 255, 0.5); font-size: 24px; } .search-input input:focus { border: 0; } .search-input button { position: absolute; top: 50%; right: 0; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); font-size: 18px; color: var(--tp-common-white); } .search-input .search-input-field ~ .search-focus-border { position: absolute; bottom: 0; left: auto; right: 0; width: 0; height: 1px; background-color: var(--tp-common-orange); -webkit-transition: 0.5s 0.3s ease-out; -moz-transition: 0.5s 0.3s ease-out; -ms-transition: 0.5s 0.3s ease-out; -o-transition: 0.5s 0.3s ease-out; transition: 0.5s 0.3s ease-out; } .search-input .search-input-field:focus ~ .search-focus-border { width: 100%; left: 0; right: auto; -webkit-transition: 0.5s 0.3s ease-out; -moz-transition: 0.5s 0.3s ease-out; -ms-transition: 0.5s 0.3s ease-out; -o-transition: 0.5s 0.3s ease-out; transition: 0.5s 0.3s ease-out; } .search-close-btn { font-size: 25px; color: rgba(255, 255, 255, 0.3); } .search-close-btn:hover { color: var(--tp-common-white); } /*----------------------------------------*/ /* 3.1 Header Style 1 /*----------------------------------------*/ .header-sticky { position: fixed; top: 0; left: 0; right: 0; opacity: 1; width: 100%; z-index: 99; visibility: visible; background-color: rgba(255, 255, 255, 0.95); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; -webkit-animation: 0.95s ease 0s normal forwards 1 running headerSlideDown; -khtml-animation: 0.95s ease 0s normal forwards 1 running headerSlideDown; -moz-animation: 0.95s ease 0s normal forwards 1 running headerSlideDown; -ms-animation: 0.95s ease 0s normal forwards 1 running headerSlideDown; -o-animation: 0.95s ease 0s normal forwards 1 running headerSlideDown; animation: 0.95s ease 0s normal forwards 1 running headerSlideDown; } .tp-header-top-wrapp { border-bottom: 1px solid var(--tp-border-1); } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tp-header-top-wrapp { border: none; } } .tp-header-shape-1 { position: absolute; right: 10%; bottom: 0; animation: spin-1 3000ms forwards infinite alternate; transform-origin: bottom right; } @media only screen and (min-width: 1700px) and (max-width: 1800px) { .tp-header-shape-1 { right: 7%; } } @media only screen and (min-width: 1600px) and (max-width: 1700px) { .tp-header-shape-1 { right: 5%; bottom: 14px; } } @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: 575px) { .tp-header-shape-1 { display: none; } } .tp-header-info { padding: 30px 0; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tp-header-info { padding: 15px 0; } } .tp-header-info-item:hover .tp-header-info-icon { color: var(--tp-common-white); background: var(--tp-common-black); animation: icon-bounce 0.8s ease-out infinite; } .tp-header-info-item:hover .tp-header-info-text span { color: var(--tp-theme-1); } .tp-header-info ul li { list-style: none; padding-right: 30px; margin-right: 25px; display: inline-block; border-right: 1px solid var(--tp-border-1); } .tp-header-info ul li:last-child { border: 0; } .tp-header-info-icon { width: 50px; height: 50px; font-size: 24px; line-height: 55px; text-align: center; color: var(--tp-common-white); display: inline-block; background: var(--tp-theme-1); border-radius: 50%; margin-right: 14px; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .tp-header-info-text span { font-size: 16px; font-weight: 500; } .tp-header-info-title { font-size: 20px; font-weight: 700; margin-bottom: 0; color: var(--tp-common-black); -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tp-header-bottom-right { padding: 10px 0; } } .tp-header-bottom-right ul li { display: inline-block; margin-left: 25px; } .tp-header-icon button span { font-size: 23px; display: inline-block; color: #223645; margin-top: 10px; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .tp-header-icon button span:hover { color: var(--tp-theme-1); } .tp-header-icon a { font-size: 23px; display: inline-block; color: var(--tp-common-black); margin-bottom: 0; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .tp-header-icon a:hover { color: var(--tp-theme-1); } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tp-header-1-one-page .tp-main-menu > nav > ul > li { margin-right: 50px; } } /*----------------------------------------*/ /* 3.2 Header Style 2 /*----------------------------------------*/ .header-sticky.header-2 { padding-right: 120px; padding-left: 120px; } @media only screen and (min-width: 1600px) and (max-width: 1700px) { .header-sticky.header-2 { padding-right: 70px; padding-left: 70px; } } @media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px) { .header-sticky.header-2 { padding-right: 50px; padding-left: 50px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .header-sticky.header-2 { padding-right: 10px; padding-left: 10px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .header-sticky.header-2 { padding: 10px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .header-sticky.header-2 { padding: 0; } } .tp-header-style-2-plr { padding-right: 120px; padding-left: 120px; } @media only screen and (min-width: 1600px) and (max-width: 1700px) { .tp-header-style-2-plr { padding-right: 70px; padding-left: 70px; } } @media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px) { .tp-header-style-2-plr { padding-right: 50px; padding-left: 50px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .tp-header-style-2-plr { padding-right: 10px; padding-left: 10px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tp-header-style-2-plr { padding: 10px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tp-header-style-2-plr { padding: 0; } } .tp-header-style-2 .tp-header-bottom-action { margin-left: 30px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .tp-header-style-2 .tp-header-bottom-action { margin-left: 15px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .tp-header-style-2 .tp-header-bottom-action { margin-left: 0; } } .tp-header-style-2 .tp-header-bottom-btn .tp-theme-btn { padding: 12px 43px; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tp-header-style-2 .tp-header-bottom-btn .tp-theme-btn { padding: 12px 30px; } } .tp-header-style-2 .tp-header-bottom-right ul li { -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .tp-header-style-2 .tp-header-bottom-right ul li:hover { color: var(--tp-theme-1); } .tp-header-style-2 .tp-header-bottom-right ul li:first-child { margin: 0; } .tp-header-style-2 .tp-header-info { padding: 11px 0; } .tp-header-style-2 .tp-header-info-text { font-size: 16px; color: var(--tp-common-white); margin-bottom: 0; } .tp-header-style-2 .tp-header-info-text a i { color: var(--tp-common-white); margin-right: 5px; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .tp-header-style-2 .tp-header-info-text:hover a { color: var(--tp-theme-1); } .tp-header-style-2 .tp-header-info-text:hover a i { color: var(--tp-common-white); } .tp-header-style-2 .tp-header-info-text.first-info a { position: relative; } .tp-header-style-2 .tp-header-info-text.first-info a::after { position: absolute; width: 100%; height: 1px; left: 0; bottom: 1.5px; content: ""; background: #596874; } .tp-header-style-2 .tp-header-info-center { margin-right: 60px; } @media only screen and (min-width: 1400px) and (max-width: 1599px) { .tp-header-style-2 .tp-header-info-center { margin-right: 30px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .tp-header-style-2 .tp-header-info-center { margin-right: 20px; } } .tp-header-style-2 .tp-header-info-bg { width: 600px; padding: 15px 0; background: #192b38; border-radius: 30px; } @media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px) { .tp-header-style-2 .tp-header-info-bg { width: auto; } } .tp-header-style-2 .tp-header-info-social { margin-left: 32px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .tp-header-style-2 .tp-header-info-social { margin-left: 20px; } } @media (max-width: 575px) { .tp-header-style-2 .tp-header-info-social { margin-left: 10px; } } .tp-header-style-2 .tp-header-info-social a { font-size: 16px; margin-right: 15px; padding: 20px 0; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .tp-header-style-2 .tp-header-info-social a:last-child { margin-right: 0; } .tp-header-style-2 .tp-header-info-social a:hover { color: var(--tp-common-white); } .tp-header-style-2 .tp-header-lang { position: absolute; width: 54px; right: -23px; top: 4px; font-size: 14px; font-weight: 500; padding: 1px 10px; color: var(--tp-common-black); background-color: var(--tp-common-white); cursor: pointer; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .tp-header-style-2 .tp-header-lang { right: 0; } } .tp-header-style-2 .tp-header-lang-thumb { width: 52px; height: 52px; margin-left: 30px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .tp-header-style-2 .tp-header-lang-thumb { margin-left: 15px; } } .tp-header-style-2 .tp-header-lang-list { position: absolute; top: 33px; right: -24px; z-index: 11; padding: 15px 15px; min-width: 100px; visibility: hidden; opacity: 0; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; background-color: var(--tp-common-white); } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .tp-header-style-2 .tp-header-lang-list { right: -15px; } } .tp-header-style-2 .tp-header-lang-list li { margin-left: 0; cursor: pointer; } .tp-header-style-2 .tp-header-lang-list.tp-lang-list-open { visibility: visible; opacity: 1; } .tp-header-style-2 .tp-header-lang-icon { position: absolute; top: 5px; right: -16px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .tp-header-style-2 .tp-header-lang-icon { right: -8px; } } .tp-header-style-2 .tp-header-lang-icon i { font-size: 12px; font-weight: 600; color: var(--tp-common-black); } .tp-header-style-2 .tp-header-top-wrapp { border: 0; } @media only screen and (min-width: 1600px) and (max-width: 1700px) { .tp-header-style-2 .tp-main-menu > nav > ul > li { margin-right: 60px; } } .tp-header-style-2 .tp-main-menu > nav > ul > li .tp-mega-menu { left: -170px; } @media only screen and (min-width: 1400px) and (max-width: 1599px) { .tp-header-style-2 .tp-main-menu > nav > ul > li { margin-right: 45px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .tp-header-style-2 .tp-main-menu > nav > ul > li { margin-right: 35px; } } .tp-header-style-2 .tp-main-menu > nav > ul > li > a { padding: 37px 0; } .tp-header-style-2 .tp-main-menu-bars { 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: 575px) { .tp-header-style-2 .tp-main-menu-bars { margin-top: 0; margin-left: 10px; } } /*----------------------------------------*/ /* 3.3 Header Style 3 /*----------------------------------------*/ .header-3.header-sticky { padding-right: 375px; padding-left: 375px; } @media only screen and (min-width: 1600px) and (max-width: 1700px) { .header-3.header-sticky { padding-right: 70px; padding-left: 70px; } } @media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px) { .header-3.header-sticky { padding-right: 50px; padding-left: 50px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .header-3.header-sticky { padding-right: 10px; padding-left: 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: 575px) { .header-3.header-sticky { padding: 10px; } } .tp-header-style-3 .tp-main-menu > nav > ul > li { margin-right: 46px; } .tp-header-style-3 .tp-main-menu > nav > ul > li .tp-mega-menu { left: -270px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .tp-header-style-3 .tp-main-menu > nav > ul > li .tp-mega-menu { left: -170px; } } .tp-header-style-3 .tp-main-menu > nav > ul > li > a { padding: 37px 0; } .tp-header-style-3 .tp-header-info-bg { width: auto; background: none; } .tp-header-style-3 .tp-header-info-social { margin-left: 0; } .tp-header-style-3 .tp-header-info-social a { margin-right: -4px; position: relative; padding: 14px 10px; } .tp-header-style-3 .tp-header-info-social a::before, .tp-header-style-3 .tp-header-info-social a::after { position: absolute; width: 1px; height: 100%; left: 0; top: 0; content: ""; background-color: #2e4352; } .tp-header-style-3 .tp-header-info-social a::after { left: auto; right: 0; } @media only screen and (min-width: 768px) and (max-width: 991px) { .tp-header-style-3 .tp-header-info-text { margin-right: 0; margin-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: 575px) { .tp-header-style-3 #header-sticky { padding: 10px 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: 575px) { .tp-header-style-3 .tp-header-bottom-right { padding: 0; } } .tp-header-3-one-page .tp-main-menu > nav > ul > li { margin-right: 36px; } /*----------------------------------------*/ /* 3.4 Header Style 4 /*----------------------------------------*/ .tp-header-4-one-page .tp-main-menu > nav > ul > li { margin-right: 65px; } @media only screen and (min-width: 1600px) and (max-width: 1700px) { .tp-header-4-one-page .tp-main-menu > nav > ul > li { margin-right: 45px; } } @media only screen and (min-width: 1400px) and (max-width: 1599px) { .tp-header-4-one-page .tp-main-menu > nav > ul > li { margin-right: 35px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .tp-header-4-one-page .tp-main-menu > nav > ul > li { margin-right: 25px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .tp-header-4.tp-footer-style-plr { padding-bottom: 80px; } } .tp-header-5 .tp-header-top-wrapp { border: 0; } .tp-header-5 .tp-header-info { padding: 24px 0; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tp-header-5 .tp-header-info { padding: 15px 0; } } .tp-header-5 .tp-header-info-btn .tp-theme-btn:hover { color: var(--tp-common-black); background: 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: 575px) { .tp-header-5 .tp-header-info-btn .tp-theme-btn:hover { color: var(--tp-common-white); background: var(--tp-common-black); } } .tp-header-5 .tp-main-menu > nav > ul > li > a { padding: 26px 0; } .tp-header-5 .tp-main-menu-bars { margin-top: 0; } @media (max-width: 575px) { .tp-header-5 .tp-main-menu-bars { margin-top: 0; } } .tp-header-5 .tp-main-menu-bars button { color: var(--tp-common-white); background-color: var(--tp-common-black); } .tp-header-5 .tp-main-menu-bars button:hover { color: var(--tp-common-white); background-color: var(--tp-theme-1); } .tp-header-5-one-page .tp-main-menu > nav > ul > li { margin-right: 65px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .tp-header-5-one-page .tp-main-menu > nav > ul > li { margin-right: 60px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tp-header-5-one-page .tp-main-menu > nav > ul > li { margin-right: 50px; } } /* HEADER CSS */ /*----------------------------------------*/ /* 4.1 Main menu css /*----------------------------------------*/ .tp-main-menu > nav > ul > li { position: relative; display: inline-block; margin-right: 60px; } @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-right: 60px; } } .tp-main-menu > nav > ul > li:hover > a { color: var(--tp-common-black); } .tp-main-menu > nav > ul > li .sub-menu { position: absolute; top: 100%; left: 0; padding: 10px 0; display: block; min-width: 220px; visibility: hidden; transform: scaleY(0); transform-origin: top center; background: var(--tp-common-white); border-top: 5px solid var(--tp-theme-1); box-shadow: 0px 10px 30px 0px rgba(25, 25, 26, 0.1); z-index: 6; transition: all 0.3s ease-out; } .tp-main-menu > nav > ul > li .sub-menu li { position: relative; display: block; } .tp-main-menu > nav > ul > li .sub-menu li > a { font-weight: 600; padding: 3px 20px; display: block; transition: all 0.5s ease; text-transform: capitalize; text-align: left; position: relative; font-size: 15px; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .tp-main-menu > nav > ul > li .sub-menu li > a::before { position: absolute; width: 0px; height: 2px; top: 50%; left: 20px; content: ""; opacity: 0; visibility: hidden; transform: translateY(-50%); background: var(--tp-theme-1); -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .tp-main-menu > nav > ul > li .sub-menu li .sub-menu { left: 100%; top: 0; } .tp-main-menu > nav > ul > li .sub-menu li:hover > a { padding-left: 40px; color: var(--tp-common-black); } .tp-main-menu > nav > ul > li .sub-menu li:hover > a::before { width: 15px; opacity: 1; visibility: visible; } .tp-main-menu > nav > ul > li .sub-menu li:hover > .sub-menu { transform: scaleY(1); visibility: visible; } .tp-main-menu > nav > ul > li .tp-mega-menu { position: absolute; width: 1170px; padding: 30px 30px 10px 30px; background-color: var(--tp-common-white); box-shadow: rgba(149, 157, 165, 0.4) 0px 8px 24px; margin: auto; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .tp-main-menu > nav > ul > li .tp-mega-menu { width: 1000px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tp-main-menu > nav > ul > li .tp-mega-menu { width: 940px; } } @media only screen and (min-width: 1400px) and (max-width: 1599px) { .tp-main-menu > nav > ul > li .tp-mega-menu.home-2 { left: -110px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .tp-main-menu > nav > ul > li .tp-mega-menu.home-2 { left: -250px; } } @media only screen and (min-width: 1600px) and (max-width: 1700px) { .tp-main-menu > nav > ul > li .tp-mega-menu.home-3 { left: -250px; } } @media 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 .tp-mega-menu.home-3 { left: -300px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .tp-main-menu > nav > ul > li .tp-mega-menu.home-4 { left: -295px; } } .tp-main-menu > nav > ul > li > a { position: relative; font-size: 18px; font-weight: 600; padding: 16px 0; display: block; color: var(--tp-text-body); -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .tp-main-menu > nav > ul > li > a.active { color: var(--tp-common-black); } .tp-main-menu > nav > ul > li:hover > .sub-menu, .tp-main-menu > nav > ul > li:hover .tp-mega-menu { transform: scaleY(1); visibility: visible; } .tp-main-menu-home nav ul li:hover > a { color: var(--tp-theme-1); } .tp-main-menu-home nav ul li .sub-menu.tp-mega-menu .homemenu-title a:hover { color: var(--tp-theme-1); } .tp-main-menu-bars { margin-left: 15px; } .tp-main-menu-bars button { font-size: 18px; padding: 10px 15px; border-radius: 5px; color: var(--tp-common-white); background-color: var(--tp-common-black); transition: 0.3s; } .tp-main-menu-bars button:hover { background-color: var(--tp-theme-1); } .homemenu { position: relative; padding: 0px 10px; margin-bottom: 20px; } .homemenu-thumb { position: relative; margin-bottom: 3px; } .homemenu-thumb img { width: 100%; } .homemenu-thumb::before { position: absolute; content: ""; top: 0; left: 0; height: 100%; width: 100%; background: rgba(38, 34, 33, 0.1); transition: all 0.3s 0s ease-out; } .homemenu-thumb:hover .homemenu-btn { transform: translateY(-50%); opacity: 1; visibility: visible; } .homemenu-thumb:hover .homemenu-btn .menu-btn::before { display: none; } .homemenu-thumb:hover .homemenu-btn .menu-btn.show-1 { transform: translateY(0); } .homemenu-thumb:hover .homemenu-btn .menu-btn.show-2 { transform: translateY(0); } .homemenu-thumb:hover::before { opacity: 1; } .homemenu-title a { padding: 0; font-size: 16px; font-weight: 600; color: var(--tp-common-black); } .homemenu-title a::before { width: 0; } .homemenu-title a:hover { color: var(--tp-theme-1); } .homemenu-title a:hover::before { width: 0; } .homemenu-btn { position: absolute; top: 50%; left: 0; right: 0; text-align: center; transform: translateY(-40%); transition: all 0.3s 0s ease-out; opacity: 0; } .homemenu-btn .tp-menu-btn { position: relative; font-size: 14px; text-transform: uppercase; padding: 15px 20px; width: 150px; overflow: hidden; display: inline-block; text-align: center; border-radius: 50px; color: var(--tp-common-white); } /*----------------------------------------*/ /* 4.2 Mobilemenu css /*----------------------------------------*/ .tp-offcanvas-menu ul { list-style: none; } .tp-offcanvas-menu ul li { position: relative; } .tp-offcanvas-menu ul li > a { padding: 8px 0; display: block; font-size: 16px; font-weight: 500; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .tp-offcanvas-menu ul li > a:hover { color: var(--tp-common-black); } .tp-offcanvas-menu ul li:not(:last-child) > a { border-bottom: 1px solid rgba(1, 15, 28, 0.1); } .tp-offcanvas-menu ul li.active > a { color: var(--tp-theme-color); } .tp-offcanvas-menu ul li.active > .tp-menu-close { color: var(--tp-common-black); border-color: var(--tp-theme-1); } .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); } .tp-offcanvas-menu ul li .sub-menu { display: none; padding-left: 10px; } .tp-offcanvas-menu ul li .sub-menu.tp-mega-menu { padding-left: 0; } .tp-menu-close { position: absolute; right: 0; top: 7.5px; border: 1px solid rgba(1, 15, 28, 0.12); height: 30px; width: 30px; text-align: center; font-size: 12px; line-height: 29px; -webkit-transition: 0.3s 0.3s ease-out; -moz-transition: 0.3s 0.3s ease-out; -ms-transition: 0.3s 0.3s ease-out; -o-transition: 0.3s 0.3s ease-out; transition: 0.3s 0.3s ease-out; } .tp-menu-close:hover { border: 1px solid var(--tp-common-black); } .tp-menu-close i { -webkit-transition: 0.3s 0.3s ease-out; -moz-transition: 0.3s 0.3s ease-out; -ms-transition: 0.3s 0.3s ease-out; -o-transition: 0.3s 0.3s ease-out; transition: 0.3s 0.3s ease-out; } /*----------------------------------------*/ /* 5.1 Postbox css /*----------------------------------------*/ @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .postbox-wrapper { padding-right: 0; } } .postbox-item { margin-bottom: 80px; } .postbox-item:last-child { margin-bottom: 0; } .postbox-thumb { position: relative; display: inline-block; margin-bottom: 30px; } .postbox-thumb img { width: 100%; border-radius: 15px; } .postbox-thumb span { position: absolute; right: 0; bottom: 0; padding: 10px 18px; font-size: 18px; font-weight: 700; text-align: center; background: var(--tp-theme-1); color: var(--tp-common-white); border-radius: 15px 0 15px 0; } .postbox-meta-content span { font-size: 16px; } @media (max-width: 575px) { .postbox-meta-content span { font-size: 13px; } } .postbox-meta-icon { font-size: 18px; margin-right: 8px; color: var(--tp-theme-1); } .postbox-title { font-size: 36px; font-weight: 800; color: var(--tp-common-black); -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 575px) { .postbox-title { font-size: 28px; } } .postbox-title:hover { color: var(--tp-theme-1); } .postbox-video { position: absolute; top: 50%; left: 0; right: 0; text-align: center; transform: translateY(-50%); margin: auto; } .postbox-video a { font-size: 22px; width: 80px; height: 80px; line-height: 80px; text-align: center; display: inline-block; color: var(--tp-common-black); background: var(--tp-common-white); border-radius: 50%; } .postbox-text p { margin-bottom: 30px; } .postbox-read-more a { border-radius: 15px; } .postbox-details-title { font-size: 30px; font-weight: 800; margin-bottom: 30px; color: var(--tp-common-black); } .postbox-details-list-thumb { margin-right: 30px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .postbox-details-list-thumb { margin-bottom: 30px; } } .postbox-details-list-thumb img { border-radius: 15px; } .postbox-details-list ul li { list-style: none; position: relative; padding-left: 28px; margin-bottom: 15px; color: var(--tp-common-black); } .postbox-details-list ul li:last-child { margin-bottom: 0; } .postbox-details-list ul li i { position: absolute; left: 0; top: 5px; } .postbox-details-tag-title { font-size: 22px; font-weight: 700; margin-right: 30px; color: var(--tp-common-black); } .postbox-details-tag a { border-radius: 30px !important; } @media only screen and (min-width: 576px) and (max-width: 767px) { .postbox-details-tag-content { margin-bottom: 10px; } } .postbox-details-social a { width: 38px; height: 38px; font-size: 16px; line-height: 38px; text-align: center; border-radius: 50%; margin-right: 10px; color: var(--tp-common-black); background: var(--tp-grey-1); -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .postbox-details-social a:last-child { margin-right: 0; } .postbox-details-social a:hover { color: var(--tp-common-white); background: var(--tp-common-black); } .postbox-details-share { padding-bottom: 30px; border-bottom: 1px solid var(--tp-border-1); } .postbox-comment-title { font-size: 36px; font-weight: 800; color: var(--tp-common-black); } @media (max-width: 575px) { .postbox-comment-title { font-size: 30px; } } .postbox-comment ul li { list-style: none; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .postbox-comment ul li.children { margin-left: 0; } } .postbox-comment-avater { flex: 0 0 auto; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .postbox-comment-avater { margin-right: 20px; } } @media (max-width: 575px) { .postbox-comment-avater { margin-bottom: 20px; } } .postbox-comment-name { font-size: 20px; font-weight: 800; color: var(--tp-common-black); } .postbox-comment-reply a { font-size: 14px; font-weight: 700; display: inline-block; color: var(--tp-common-black); -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .postbox-comment-reply a:hover { color: var(--tp-theme-1); } .postbox-comment-box { padding-bottom: 50px; margin-bottom: 30px; border-bottom: 1px solid var(--tp-border-1); } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .postbox-comment-from { margin-bottom: 40px; } } /*----------------------------------------*/ /* 5.2 Recent Post css /*----------------------------------------*/ .rc-post { padding: 15px; border-radius: 15px; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .rc-post { padding: 6px 10px; } } .rc-post:hover { background: var(--tp-common-white); box-shadow: 0px 6px 40px 0px rgba(0, 0, 0, 0.06); } .rc-post-thumb { margin-right: 15px; flex: 0 0 auto; } .rc-post-thumb a img { width: 70px; height: 72px; border-radius: 15px; } .rc-post-title { font-size: 16px; font-weight: 700; color: var(--tp-common-black); } @media only screen and (min-width: 992px) and (max-width: 1199px) { .rc-post-title { font-size: 14px; } } .rc-meta { margin-bottom: 5px; } .rc-meta i { font-size: 16px; color: var(--tp-theme-1); margin-right: 10px; } /*----------------------------------------*/ /* 5.3 Sidebar css /*----------------------------------------*/ .sidebar-widget { padding: 50px; background: var(--tp-grey-1); border-radius: 15px; } .sidebar-widget:not(:last-child) { margin-bottom: 30px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .sidebar-widget { padding: 40px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .sidebar-widget { padding: 30px; } } @media (max-width: 575px) { .sidebar-widget { padding: 20px; } } .sidebar-widget-title { font-size: 22px; font-weight: 700; line-height: 1.5; } .sidebar-widget-rc { padding: 30px; } @media (max-width: 575px) { .sidebar-widget-rc { padding: 20px; } } .sidebar-widget-content ul li { position: relative; display: block; } .sidebar-widget-content ul li a { font-size: 16px; font-weight: 700; padding: 20px 30px; color: var(--tp-common-black); display: block; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; border-radius: 15px; } .sidebar-widget-content ul li a i { position: absolute; right: 30px; top: 50%; transform: translateY(-50%); } .sidebar-widget-content ul li a:hover { color: var(--tp-theme-1); background: var(--tp-common-white); box-shadow: 0px 4px 20px 0px rgba(30, 22, 22, 0.06); } .sidebar-search-input { position: relative; } .sidebar-search-input input { border: 0; height: 58px; border: 1px solid transparent; border-radius: 15px; } .sidebar-search-input input::placeholder { color: #768a9e; } .sidebar-search-input button { position: absolute; right: 0; width: 58px; height: 58px; font-size: 16px; line-height: 58px; text-align: center; color: var(--tp-common-white); background: var(--tp-theme-1); border-radius: 0 15px 15px 0; } .tagcloud a { font-size: 14px; padding: 5px 13px; border-radius: 15px; margin-right: 8px; margin-bottom: 10px; display: inline-block; border: 1px solid var(--tp-border-1); -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .tagcloud a:hover { color: var(--tp-common-white); background-color: var(--tp-theme-1); border: 1px solid var(--tp-theme-1); } /*----------------------------------------*/ /* 5.4 Blog css /*----------------------------------------*/ @media (max-width: 575px) { .tp-blog-title-box .tp-section-title { font-size: 23px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .tp-blog-title-box .tp-section-title { font-size: 35px; } } .tp-blog-title { font-size: 20px; font-weight: 700; line-height: 1.4; margin: 0; display: inline; color: var(--tp-common-white); } .tp-blog-item { position: relative; border-radius: 15px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tp-blog-item { margin-bottom: 70px; } } .tp-blog-item:hover .tp-blog-meta { background: var(--tp-theme-1); } .tp-blog-item:hover .tp-blog-meta-date { color: var(--tp-common-white); } .tp-blog-item:hover .tp-blog-meta-action { color: var(--tp-common-white); } .tp-blog-item:hover .tp-blog-thumb img { transform: scale(1.2); } .tp-blog-thumb { overflow: hidden; border-radius: 15px; } .tp-blog-thumb img { width: 100%; border-radius: 15px; transition: 1.3s; } .tp-blog-categories { position: absolute; top: 30px; left: 30px; font-weight: 700; font-size: 14px; padding: 5px 22px; border-radius: 30px; display: inline-block; color: var(--tp-common-black); background: var(--tp-common-white); } .tp-blog-dsc { position: absolute; left: 0; right: 0; bottom: -1px; width: 310px; text-align: center; display: inline-block; padding: 25px 0 30px 0; background: var(--tp-common-black); margin: auto; border-radius: 15px 15px 0 0; } .tp-blog-meta { position: absolute; width: 310px; left: 0; right: 0; text-align: center; padding: 10px 30px; margin: auto; background: #f9f9f9; border-radius: 0 0 15px 15px; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .tp-blog-meta-date { border-right: 1px solid var(--tp-border-1); -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .tp-blog-meta-date span { font-weight: 500; padding: 0 50px 0 0; margin: 0; } .tp-blog-meta-action { font-weight: 700; color: var(--tp-common-black); -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .tp-blog-2-item { overflow: hidden; border-radius: 15px; background: var(--tp-common-white); background-color: white; box-shadow: 0px 0px 60px 0px rgba(32, 33, 82, 0.08); -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tp-blog-2-item { margin-bottom: 20px; } } .tp-blog-2-item:hover .tp-blog-2-thumb img { transform: scale(1.1); } .tp-blog-2-thumb { overflow: hidden; } .tp-blog-2-thumb img { width: 100%; transition: 1.3s; } .tp-blog-2-avater-thumb { margin-right: 10px; } .tp-blog-2-avater-thumb img { width: 40px; height: 40px; border-radius: 50%; } .tp-blog-2-avater-title { font-size: 16px; font-weight: 700; display: inline-block; color: var(--tp-common-black); margin-bottom: 0; } .tp-blog-2-avater-title span { color: var(--tp-border-1); margin-bottom: 0; } .tp-blog-2-meta-box { position: relative; padding: 10px 25px; border-radius: 15px 15px 0 0; background: var(--tp-common-white); } .tp-blog-2-meta-box::after { position: absolute; bottom: -20px; left: 35px; width: 20px; height: 20px; content: ""; z-index: 2; clip-path: polygon(100% 0, 0 0, 47% 100%); background: var(--tp-common-white); } .tp-blog-2-meta-icon { font-size: 18px; font-weight: 700; color: var(--tp-common-black); } .tp-blog-2-meta-icon i { color: var(--tp-theme-1); margin-right: 5px; } .tp-blog-2-content { padding: 22px 32px 30px 32px; } @media (max-width: 575px) { .tp-blog-2-content { padding: 20px; } } .tp-blog-2-title { font-size: 22px; font-weight: 700; display: inline-block; line-height: 1.4; color: var(--tp-common-black); -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } @media (max-width: 575px) { .tp-blog-2-title { font-size: 20px; } } .tp-blog-2-title:hover { color: var(--tp-theme-1); } @media (max-width: 575px) { .tp-blog-2-title-box .tp-section-title { font-size: 23px; } } .tp-blog-2-action a { display: flex; font-size: 16px; font-weight: 700; padding: 7px 30px; border-radius: 15px; align-items: center; color: var(--tp-common-black); justify-content: space-between; background: var(--tp-grey-1); -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .tp-blog-2-action a:hover { color: var(--tp-common-white); background-color: var(--tp-theme-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: 575px) { .tp-blog-3-wrapp .row [class*=col-]:last-child .tp-blog-item { margin-bottom: 0; } } .tp-blog-3-plr { padding-top: 100px; padding-bottom: 305px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tp-blog-3-plr { padding-bottom: 220px; } } @media only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px) { .tp-blog-3 .tp-blog-title-box { margin-bottom: 20px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tp-blog-3 .tp-blog-item { margin-bottom: 200px; } } @media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 575px) { .tp-blog-3 .tp-blog-item { margin-bottom: 150px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .tp-blog-3 .tp-blog-item { margin-bottom: 220px; } } .tp-blog-3 .tp-blog-item:hover .tp-blog-meta { background: none; } .tp-blog-3 .tp-blog-dsc { width: 330px; text-align: left; padding: 25px 25px 25px 25px; background: var(--tp-common-white); background-color: white; box-shadow: 0px 0px 40px 0px rgba(24, 11, 47, 0.04); bottom: -50%; border-radius: 15px; } @media only screen and (min-width: 576px) and (max-width: 767px) { .tp-blog-3 .tp-blog-dsc { width: 88%; bottom: -30%; } } @media (max-width: 575px) { .tp-blog-3 .tp-blog-dsc { bottom: -40%; } } .tp-blog-3 .tp-blog-dsc h4 { font-weight: 700; font-size: 24px; margin-bottom: 28px; color: var(--tp-common-black); -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .tp-blog-3 .tp-blog-dsc h4:hover { color: var(--tp-theme-1); } .tp-blog-3 .tp-blog-meta { position: static; width: auto; padding: 0; background: none; margin-bottom: 13px; } .tp-blog-3 .tp-blog-meta-date { border: 0; } .tp-blog-3 .tp-blog-meta-date span { font-weight: 700; padding: 0 25px 0 0; color: var(--tp-theme-1); } .tp-blog-3 .tp-blog-meta-cate { position: relative; } .tp-blog-3 .tp-blog-meta-cate::before { position: absolute; width: 6px; height: 6px; top: 50%; transform: translateY(-50%); left: -5px; content: ""; border-radius: 50%; background: #768a9e; } .tp-blog-3 .tp-blog-meta-cate span { font-weight: 500; margin-left: 22px; } .tp-blog-3 .tp-blog-action span { font-weight: 700; font-size: 14px; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .tp-blog-3 .tp-blog-action span i { margin-left: 6px; } .tp-blog-3 .tp-blog-action span:hover { color: var(--tp-theme-1); } .tp-blog-3 .tp-blog-action span:hover i { animation: tp-arrow 0.2s linear; } @media only screen and (min-width: 768px) and (max-width: 991px) { .tp-blog-4-title-box .tp-section-title { font-size: 45px; } } @media (max-width: 575px) { .tp-blog-4-title-box .tp-section-title { font-size: 24px; } } .tp-blog-4-meta { position: absolute; right: 30px; bottom: 30px; } .tp-blog-4-meta span { font-weight: 700; display: block; font-size: 18px; line-height: 1.2; text-align: center; border-radius: 15px; padding: 10px 16px 12px 16px; color: var(--tp-common-black); background: var(--tp-common-white); margin-bottom: 0; } .tp-blog-4 .tp-blog-2-title { -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tp-blog-4 .tp-blog-2-title { font-size: 20px; } } .tp-blog-4 .tp-blog-2-title:hover { color: var(--tp-theme-1); } .tp-blog-4 .tp-blog-2-action a:hover { color: var(--tp-common-white); background-color: var(--tp-common-black); } .tp-blog-5-item { padding: 30px; border-radius: 15px; margin-bottom: 30px; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .tp-blog-5-item:hover { background-color: white; box-shadow: 0px 0px 40px 0px rgba(34, 35, 63, 0.08); } .tp-blog-5-item:hover .tp-blog-5-thumb img { transform: scale(1.2); } .tp-blog-5-thumb { margin-right: 30px; flex: 0 0 auto; overflow: hidden; border-radius: 15px; } @media (max-width: 575px) { .tp-blog-5-thumb { margin-right: 0; margin-bottom: 30px; } } .tp-blog-5-thumb img { width: 180px; height: 146px; border-radius: 15px; transition: 1s; } @media (max-width: 575px) { .tp-blog-5-thumb img { width: 100%; height: auto; } } .tp-blog-5-cate { font-weight: 700; font-size: 14px; padding: 0 10px; margin-bottom: 15px; border-radius: 15px; display: inline-block; color: var(--tp-text-body-2); border: 1px solid var(--tp-border-1); } .tp-blog-5-meta { position: relative; font-size: 16px; font-weight: 600; margin-right: 40px; color: var(--tp-text-body-2); } .tp-blog-5-meta::after { position: absolute; width: 2px; height: 12px; top: 50%; left: 0; right: 0; margin: auto; text-align: center; content: ""; transform: translateY(-50%); background: var(--tp-text-body); } .tp-blog-5 .tp-blog-2-title { display: block; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tp-blog-inner { padding-bottom: 210px; } } .tp-blog-inner .tp-blog-item { margin-bottom: 195px; } @media only screen and (min-width: 576px) and (max-width: 767px) { .tp-blog-inner .tp-blog-dsc { bottom: -20%; } } .tp-blog-details-blockquote { position: relative; padding: 40px 48px 40px 100px; border-radius: 15px; background-color: white; box-shadow: 0px 0px 60px 0px rgba(67, 61, 79, 0.06); } @media (max-width: 575px) { .tp-blog-details-blockquote { padding: 40px 20px; } } .tp-blog-details-blockquote p { font-size: 22px; font-weight: 700; line-height: 1.4; 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) { .tp-blog-details-blockquote p { font-size: 17px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tp-blog-details-blockquote p { font-size: 16px; } } .tp-blog-details-blockquote .quote-icon { position: absolute; font-size: 36px; left: 50px; top: 45px; color: var(--tp-theme-1); } @media (max-width: 575px) { .tp-blog-details-blockquote .quote-icon { left: 10px; top: 20px; } } .tp-blog-details-blockquote .blockquote-info { position: relative; font-size: 14px; padding-left: 30px; } .tp-blog-details-blockquote .blockquote-info::before { position: absolute; width: 15px; height: 2px; top: 50%; left: 0; transform: translateY(-50%); content: ""; background: #768a9e; } .tp-blog-details-blockquote blockquote { margin-bottom: 0; } /*----------------------------------------*/ /* 6.1 Footer Style 1 /*----------------------------------------*/ .tp-footer-style-1 { margin-top: -71px; } .tp-footer-style-plr { padding-top: 220px; padding-bottom: 100px; } @media (max-width: 575px) { .tp-footer-style-plr { padding-bottom: 50px; } } @media (max-width: 575px) { .tp-footer-widget { margin-bottom: 40px; } } .tp-footer-widget-text { margin-bottom: 25px; } .tp-footer-widget-text p { font-weight: 600; margin-right: 40px; color: #9ca6ae; } .tp-footer-widget-contact { font-weight: 600; color: var(--tp-common-white); } .tp-footer-widget-contact a { font-size: 16px; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .tp-footer-widget-contact a:hover { color: var(--tp-theme-1); } .tp-footer-widget-mail a { font-size: 16px; font-weight: 600; color: #9ca6ae; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .tp-footer-widget-mail a:hover { color: var(--tp-theme-1); } .tp-footer-widget-title { font-size: 24px; font-weight: 700; line-height: 1.2; display: inline-block; color: var(--tp-common-white); margin-bottom: 50px; } @media (max-width: 575px) { .tp-footer-widget-title { margin-bottom: 30px; } } .tp-footer-widget-title-2 { margin-bottom: 20px; } .tp-footer-widget-menu ul li { list-style-type: none; margin-bottom: 12px; } .tp-footer-widget-menu ul li a { position: relative; font-size: 16px; color: #9ca6ae; font-weight: 600; display: inline-block; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .tp-footer-widget-menu ul li a::before { position: absolute; width: 7px; height: 7px; top: 50%; left: -15px; content: ""; opacity: 0; visibility: hidden; border-radius: 50%; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; transform: translateY(-50%); background: var(--tp-common-white); } .tp-footer-widget-menu ul li a:hover { padding-left: 15px; color: var(--tp-common-white); } .tp-footer-widget-menu ul li a:hover::before { opacity: 1; visibility: visible; left: 0; } .tp-footer-widget-newslater span { font-size: 16px; font-weight: 500; display: block; color: #9ca6ae; margin-bottom: 15px; } .tp-footer-widget-social ul li { list-style-type: none; display: inline-block; margin-right: 16px; } .tp-footer-widget-social ul li:last-child { margin-right: 0; } .tp-footer-widget-social ul li a { font-size: 16px; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .tp-footer-widget-social ul li a:hover { color: var(--tp-common-white); } .tp-footer-widget.footer-col-2 { margin-left: -38px; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tp-footer-widget.footer-col-2 { margin-left: 0; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) { .tp-footer-widget.footer-col-3 { margin-top: 30px; } } @media (max-width: 575px) { .tp-footer-widget.footer-col-3 { margin-left: 0; } } .tp-footer-widget.footer-col-4 { 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: 575px) { .tp-footer-widget.footer-col-4 { 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: 575px) { .tp-footer-widget.footer-col-4 { margin-top: 30px; } } .tp-footer-input { position: relative; } .tp-footer-input input { height: 48px; color: var(--tp-common-white); background: none; border: 1px solid #4f6473; border-radius: 15px; padding-left: 35px; padding-right: 70px; } .tp-footer-input input::placeholder { color: var(--tp-text-body); } .tp-footer-input input:focus { border: 1px solid var(--tp-theme-1); } .tp-footer-input-icon { position: absolute; top: 50%; transform: translateY(-50%); left: 15px; color: var(--tp-common-white); margin-right: 16px; } .tp-footer-input-action { position: absolute; width: 48px; height: 48px; right: 0; top: 50%; transform: translateY(-50%); color: var(--tp-common-white); background: var(--tp-theme-1); border-radius: 15px; } .tp-footer-input-action i { transform: rotate(-30deg); -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .tp-footer-input-action:hover i { animation: tp-arrow 0.2s linear; transform: rotate(0deg); } .tp-footer-inner-plr { margin-top: -80px; } .tp-copyright-style { background: #1c2e3c; } .tp-copyright-style-3 .tp-copyright-text p { color: var(--tp-text-body-2); margin-bottom: 0; } .tp-copyright-style-3 .tp-copyright-text p a { color: var(--tp-text-body-2); } .tp-copyright-style-3 .tp-copyright-privacy a { font-size: 16px; font-weight: 600; margin-right: 35px; color: var(--tp-text-body-2); } .tp-copyright-style-3 .tp-copyright-privacy a:last-child { margin-right: 0; } .tp-copyright-text p { font-weight: 500; } .tp-copyright-text p a { color: var(--tp-common-white); } /*----------------------------------------*/ /* 6.2 Footer Style 2 /*----------------------------------------*/ .tp-footer-3-wrapp { padding-top: 33px; padding-bottom: 33px; padding-left: 100px; padding-right: 100px; background: #314554; border-radius: 50px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .tp-footer-3-wrapp { padding-left: 30px; padding-right: 30px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tp-footer-3-wrapp { padding-left: 20px; padding-right: 20px; } } @media (max-width: 575px) { .tp-footer-3-wrapp { padding-bottom: 0; } } .tp-footer-3-menu ul li { display: inline-block; margin: 0 25px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tp-footer-3-menu ul li { margin: 0 15px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .tp-footer-3-menu ul li { margin: 0 4px; text-align: left; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tp-footer-3-menu ul li { margin: 0; display: block; margin-bottom: 6px; } } .tp-footer-3-menu ul li a { position: relative; font-size: 16px; font-weight: 600; padding: 44px 0; color: var(--tp-text-body-2); -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tp-footer-3-menu ul li a { padding: 36px 0; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .tp-footer-3-menu ul li a { padding: 40px 0; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tp-footer-3-menu ul li a { padding: 0 0; } } .tp-footer-3-menu ul li a::after { position: absolute; width: 0; height: 1px; bottom: 0; left: 0; content: ""; opacity: 0; visibility: hidden; background: var(--tp-common-white); -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .tp-footer-3-menu ul li a:hover { color: var(--tp-common-white); } .tp-footer-3-menu ul li a:hover::after { width: 100%; opacity: 1; visibility: visible; } .tp-footer-3-social a { font-size: 16px; margin-right: 20px; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .tp-footer-3-social a:last-child { margin-right: 0; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .tp-footer-3-social a { margin-right: 15px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tp-footer-3-social a { margin-right: 6px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .tp-footer-3-social a { margin-right: 4px; } } .tp-footer-3-social a:hover { color: var(--tp-common-white); } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tp-footer-widget.footer-col-3-1 { margin-bottom: 20px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tp-footer-widget.footer-col-3-2 { margin-bottom: 20px; } } .container-large { width: 1370px; margin: auto; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .container-large { width: 1170px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .container-large { width: 940px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .container-large { width: 740px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .container-large { width: 550px; } } @media (max-width: 575px) { .container-large { width: 320px; } } /*----------------------------------------*/ /* 6.3 Footer Style 3 /*----------------------------------------*/ @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tp-footer-4 .tp-footer-widget-text p br { display: none; } } .tp-footer-4 .tp-footer-widget-social ul li { margin-right: 5px; } .tp-footer-4 .tp-footer-widget-social ul li a { width: 34px; height: 34px; line-height: 34px; text-align: center; display: inline-block; border-radius: 50%; background: #2f4454; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .tp-footer-4 .tp-footer-widget-social ul li a:hover { color: var(--tp-common-black); background: var(--tp-common-white); } .tp-footer-4 .tp-footer-widget-info span { font-size: 16px; font-weight: 500; display: block; margin-bottom: 8px; } .tp-footer-4 .tp-footer-widget-info a { position: relative; font-weight: 500; font-size: 18px; color: var(--tp-common-white); display: inline-block; } .tp-footer-4 .tp-footer-widget-info a span { position: absolute; font-size: 12px; font-weight: 500; padding: 0 8px; display: inline-block; border-radius: 15px; background: var(--tp-theme-1); } .tp-footer-4 .tp-footer-widget-info a::after { position: absolute; width: 0; height: 1px; bottom: 0; left: 0; content: ""; opacity: 0; visibility: hidden; background: #9fa8ae; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .tp-footer-4 .tp-footer-widget-info a:hover::after { width: 100%; opacity: 1; visibility: visible; } .tp-footer-4 .tp-footer-widget-gellery-thumb { margin-right: 10px; } .tp-footer-4 .tp-footer-widget-gellery-thumb a { position: relative; width: 80px; height: 80px; display: inline-block; border-radius: 15px; } .tp-footer-4 .tp-footer-widget-gellery-thumb a span { position: absolute; left: 0; right: 0; top: 50%; text-align: center; color: var(--tp-common-white); transform: translateY(-50%); opacity: 0; visibility: hidden; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .tp-footer-4 .tp-footer-widget-gellery-thumb a::before { position: absolute; width: 100%; height: 100%; top: 0; left: 0; content: ""; background: var(--tp-theme-1); border-radius: 15px; transform: scale(0.5); opacity: 0; visibility: hidden; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .tp-footer-4 .tp-footer-widget-gellery-thumb a img { width: 100%; border-radius: 15px; } .tp-footer-4 .tp-footer-widget-gellery-thumb a:hover::before { opacity: 0.8; visibility: visible; transform: scale(1); } .tp-footer-4 .tp-footer-widget-gellery-thumb a:hover span { opacity: 1; visibility: visible; } .tp-footer-4 .tp-footer-widget.footer-col-4-2 { margin-left: -40px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tp-footer-4 .tp-footer-widget.footer-col-4-2 { display: flex; justify-content: center; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tp-footer-4 .tp-footer-widget.footer-col-4-2 { margin-left: 0; } } .tp-footer-4 .tp-footer-widget.footer-col-4-3 { margin-left: 10px; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tp-footer-4 .tp-footer-widget.footer-col-4-3 { margin-left: 0; } } /*----------------------------------------*/ /* 7.6 Slider css /*----------------------------------------*/ .tp-slider-overlay::before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0.6; content: ""; background-color: #030024; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tp-slider-bg { background-position: right; } } .tp-slider-1-plr { padding-top: 220px; padding-bottom: 220px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .tp-slider-1-plr { padding-top: 180px; padding-bottom: 180px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .tp-slider-1-plr { padding-top: 140px; padding-bottom: 140px; } } @media (max-width: 575px) { .tp-slider-1-plr { padding-top: 100px; padding-bottom: 100px; } } .tp-slider-1 .tp-slider-overlay::before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0.6; content: ""; background-color: #030024; display: none; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tp-slider-1 .tp-slider-overlay::before { display: block; } } .tp-slider-1-bg { position: absolute; top: 0; left: 0; height: 100%; width: 100%; background-position: center; background-size: cover; background-repeat: no-repeat; z-index: -1; -webkit-transform: scale(1); transform: scale(1); -webkit-transition: opacity 2500ms ease-in, -webkit-transform 7000ms ease; transition: opacity 2500ms ease-in, -webkit-transform 7000ms ease; transition: transform 7000ms ease, opacity 2500ms ease-in; transition: transform 7000ms ease, opacity 2500ms ease-in, -webkit-transform 7000ms ease; } .tp-slider-1-shape-1 { position: absolute; top: 0; left: 0; z-index: -1; } .tp-slider-1-shape-2 { position: absolute; right: -5px; bottom: -10px; } .tp-slider-1-shape-2 span { color: var(--tp-theme-1); } .tp-slider-1-shape-2 span svg path.line-1 { stroke: var(--tp-theme-1); stroke-dasharray: 2300; stroke-dashoffset: 3500; animation: dash 5s linear forwards infinite; } .tp-slider-1-content-wrapp { position: relative; z-index: 2; } .tp-slider-1-title { font-weight: 700; font-size: 80px; line-height: 1; letter-spacing: -2px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .tp-slider-1-title { font-size: 70px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .tp-slider-1-title { font-size: 55px; color: var(--tp-common-white); } } @media (max-width: 575px) { .tp-slider-1-title { font-size: 35px; color: var(--tp-common-white); } } .tp-slider-1-title span { color: var(--tp-theme-1); } .tp-slider-1-title-box { transform: translateY(-200px); opacity: 0; visibility: hidden; } .tp-slider-1-title-box p { color: #595959; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tp-slider-1-title-box p { color: var(--tp-common-white); } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tp-slider-1-title-box p br { display: none; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tp-slider-1-title-black { color: var(--tp-common-white); } } .tp-slider-1-action-box { transform: translateY(200px); opacity: 0; visibility: hidden; } @media (max-width: 575px) { .tp-slider-1-action-box .tp-theme-btn { margin-bottom: 20px; } } .tp-slider-1-info-item:hover .tp-slider-1-info-icon { color: var(--tp-common-white); background: var(--tp-common-black); border: 1px solid var(--tp-common-black); } .tp-slider-1-info-item:hover .tp-slider-1-info-title { color: var(--tp-theme-1); } .tp-slider-1-info-icon { font-size: 20px; width: 60px; height: 60px; line-height: 65px; text-align: center; color: var(--tp-theme-1); border: 1px solid var(--tp-border-1); background: var(--tp-common-white); border-radius: 50%; margin-right: 15px; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .tp-slider-1-info-icon.hero-call-icon { line-height: 60px; } .tp-slider-1-info-title { font-size: 18px; font-weight: 600; color: var(--tp-common-black); } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tp-slider-1-info-title { color: var(--tp-common-white); } } .tp-slider-1-shape-1 { transform: translateY(-200px); opacity: 0; visibility: hidden; z-index: 1; } .tp-slider-1-active .swiper-slide-active .tp-slider-1-bg { -webkit-transform: scale(1.15); transform: scale(1.15); } .tp-slider-1-active .swiper-slide-active .tp-slider-1-title-box { opacity: 1; visibility: visible; transform: translateY(0px); transition: all 3000ms ease; } .tp-slider-1-active .swiper-slide-active .tp-slider-1-action-box { opacity: 1; visibility: visible; transform: translateY(0px); transition: all 3000ms ease; } .tp-slider-1-active .swiper-slide-active .tp-slider-1-shape-1 { opacity: 1; visibility: visible; transform: translateY(0px); transition: all 3000ms ease; } .tp-slider-1-active .swiper-slide-active .tp-slider-2-shape-2 { opacity: 1; visibility: visible; transform: translateX(0px); transition: all 3000ms ease; } .tp-slider-1-active .swiper-slide-active .tp-slider-5-cta { opacity: 1; visibility: visible; transform: translateX(0px); transition: all 3000ms ease; } .tp-slider-1-active .swiper-slide-active .tp-slider-5-shape-1 { opacity: 1; visibility: visible; transform: translateX(0px); transition: all 3000ms ease; } .tp-slider-1-active .swiper-slide-active .tp-slider-5-shape-2 { opacity: 1; visibility: visible; transform: translateX(0px); transition: all 3000ms ease; } .tp-slider-2 .tp-slider-1-plr { padding-top: 210px; padding-bottom: 220px; } @media (max-width: 575px) { .tp-slider-2 .tp-slider-1-plr { padding-top: 100px; } } .tp-slider-2 .tp-slider-1-action-box a { margin-bottom: 0; } .tp-slider-2 .tp-slider-1-title-box p { color: #e0dddd; } .tp-slider-2 .tp-pagination-dots span { display: block; width: 16px; height: 16px; border: 2px solid; background: no-repeat; margin: 13px 0; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .tp-slider-2 .tp-pagination-dots span.swiper-pagination-bullet-active { border: 2px solid var(--tp-common-white); background: var(--tp-common-white); } .tp-slider-2-play-btn.tp-video-btn { width: 60px; height: 60px; } .tp-slider-2-play-btn.tp-video-btn a { display: inline-block; width: 60px; height: 60px; line-height: 60px; border: 1px solid; text-align: center; border-radius: 50%; font-size: 18px; color: var(--tp-common-white); } .tp-slider-2-shape-1 { position: absolute; top: 0; right: 0; z-index: -1; } .tp-slider-2-shape-2 { position: absolute; right: 0; bottom: 0; transform: translateX(200px); opacity: 0; visibility: hidden; } .tp-slider-2-featured-text { position: absolute; transform: rotate(-90deg); top: 47%; left: -1.5%; } @media only screen and (min-width: 1600px) and (max-width: 1700px) { .tp-slider-2-featured-text { left: -3%; } } @media only screen and (min-width: 1400px) and (max-width: 1599px) { .tp-slider-2-featured-text { left: -8%; } } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tp-slider-2-featured-text { display: none; } } .tp-slider-2-featured-text p { color: var(--tp-common-white); letter-spacing: -0.2px; } .tp-slider-2-featured-text p a { position: relative; display: inline-block; color: var(--tp-common-white); -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .tp-slider-2-featured-text p a::after { position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; content: ""; background: var(--tp-common-white); } .tp-slider-2-featured-text p a:hover { color: var(--tp-theme-1); } .tp-slider-2-number { position: absolute; left: 20%; bottom: -70px; } .tp-slider-2-number-text { font-weight: 700; font-size: 170px; color: #67677b; } .tp-slider-3 .tp-slider-overlay::before { opacity: 45%; background: #000d16; } .tp-slider-3-shape-1 { position: absolute; bottom: 0; } .tp-slider-3-arrow-box button { position: absolute; font-size: 20px; width: 120px; height: 70px; top: 42%; z-index: 5; transform: translateY(-42%); color: var(--tp-theme-1); } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tp-slider-3-arrow-box button { top: 80%; transform: translateY(-80%); } } .tp-slider-3-arrow-box button.prev { right: auto; left: 75px; color: var(--tp-common-black); } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .tp-slider-3-arrow-box button.prev { left: 30px; } } .tp-slider-3-arrow-box button.next { left: auto; right: 75px; color: var(--tp-common-white); } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .tp-slider-3-arrow-box button.next { right: 30px; } } .tp-slider-3-arrow-box button.icon-bg { background-size: cover; background-position: center; background-repeat: no-repeat; } .tp-slider-3-arrow-box button.icon-bg i { -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .tp-slider-3-arrow-box button.icon-bg:hover i { animation: tp-arrow 0.2s linear; } .tp-slider-3 .tp-slider-1-plr { padding-top: 250px; padding-bottom: 404px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) { .tp-slider-3 .tp-slider-1-plr { padding-top: 160px; padding-bottom: 230px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .tp-slider-3 .tp-slider-1-plr { padding-top: 100px; padding-bottom: 180px; } } @media (max-width: 575px) { .tp-slider-3 .tp-slider-1-plr { padding-top: 100px; padding-bottom: 100px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tp-slider-3 .tp-slider-1-bg { display: block; } } .tp-slider-3 .tp-slider-1-title { font-size: 90px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tp-slider-3 .tp-slider-1-title { font-size: 80px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .tp-slider-3 .tp-slider-1-title { font-size: 75px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .tp-slider-3 .tp-slider-1-title { font-size: 55px; } } @media (max-width: 575px) { .tp-slider-3 .tp-slider-1-title { font-size: 36px; } } @media (max-width: 575px) { .tp-slider-3 .tp-slider-1-action-box a { margin-right: 0; } } .tp-slider-3 .tp-slider-1-action-box a:not(:last-child) { background-color: var(--tp-common-black); color: var(--tp-common-white); } .tp-slider-3 .tp-slider-1-action-box a:not(:last-child):hover { color: var(--tp-common-black); background-color: var(--tp-common-white); } .tp-slider-5-shape-1 { position: absolute; top: 0; left: 0; transform: translateX(-200px); opacity: 0; visibility: hidden; z-index: 2; } .tp-slider-5-shape-2 { position: absolute; top: 0; right: 0; transform: translateX(200px); opacity: 0; visibility: hidden; z-index: 2; } .tp-slider-5 .tp-slider-1-plr { padding-top: 245px; padding-bottom: 250px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .tp-slider-5 .tp-slider-1-plr { padding-top: 180px; padding-bottom: 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: 576px) and (max-width: 767px), (max-width: 575px) { .tp-slider-5 .tp-slider-1-plr { padding-top: 120px; padding-bottom: 100px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tp-slider-5 .tp-slider-1-bg { display: block; } } .tp-slider-5 .tp-slider-1-shape-1 img { width: 100%; } .tp-slider-5 .tp-slider-1-title { font-size: 90px; letter-spacing: -3px; } @media only screen and (min-width: 576px) and (max-width: 767px) { .tp-slider-5 .tp-slider-1-title { font-size: 60px; } } @media (max-width: 575px) { .tp-slider-5 .tp-slider-1-title { font-size: 42px; letter-spacing: -2px; } } @media (max-width: 575px) { .tp-slider-5 .tp-slider-1-action-box a { margin-right: 0; } } .tp-slider-5-cta { position: absolute; right: -25%; bottom: -56%; z-index: 1; opacity: 0; visibility: hidden; transform: translateY(200px); } @media only screen and (min-width: 1700px) and (max-width: 1800px), only screen and (min-width: 1600px) and (max-width: 1700px) { .tp-slider-5-cta { right: -16%; } } @media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px) { .tp-slider-5-cta { right: 0; bottom: -35%; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .tp-slider-5-cta { bottom: -35%; } } .tp-slider-5-cta-title { font-size: 18px; display: block; transform: rotate(-90deg); color: var(--tp-common-white); margin-bottom: 48px; transition: 0.3s; } .tp-slider-5-cta-icon { width: 60px; height: 60px; font-size: 22px; line-height: 60px; text-align: center; border-radius: 50%; display: inline-block; color: var(--tp-common-white); border: 1px solid var(--tp-common-white); transition: 0.3s; } .tp-slider-5-cta:hover .tp-slider-5-cta-title { color: var(--tp-theme-1); } .tp-slider-5-cta:hover .tp-slider-5-cta-icon { color: var(--tp-common-white); border: 1px solid var(--tp-theme-1); } .tp-slider-5 .tp-header-info-text a { border: 1px solid rgba(255, 255, 255, 0.4); } .tp-slider-dots { position: absolute; top: 50%; right: 19%; z-index: 9; transform: translateY(-50%); } @media only screen and (min-width: 768px) and (max-width: 991px) { .tp-slider-dots { right: 8%; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tp-slider-dots { display: none; } } .tp-slider-number { position: absolute; top: 50%; transform: translateY(-50%); left: 120px; z-index: 9; } @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-slider-number { left: 30px; } } .tp-hero-1-title-box .tp-slider-1-title { color: var(--tp-common-black); margin-right: -32px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .tp-hero-1-title-box .tp-slider-1-title { font-size: 70px; margin-right: 0; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tp-hero-1-title-box .tp-slider-1-title { font-size: 50px; margin-right: 0; } } .tp-hero-1-title-box p { color: #7a8a9e; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tp-hero-1-title-box p br { display: none; } } .tp-hero-1-shape-1 { position: absolute; left: 0; bottom: 100px; z-index: 2; animation: moving 5s linear infinite; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tp-hero-1-shape-1 { bottom: 30px; } } .tp-hero-1-plr { padding-top: 230px; padding-bottom: 230px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) { .tp-hero-1-plr { padding-top: 160px; padding-bottom: 160px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .tp-hero-1-plr { padding-top: 120px; padding-bottom: 120px; } } @media (max-width: 575px) { .tp-hero-1-plr { padding-top: 100px; padding-bottom: 100px; } } .tp-hero-1-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-position: center; background-size: cover; background-repeat: no-repeat; } .tp-hero-1-thumb-box { top: 80px; right: -15%; z-index: 2; } @media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px) { .tp-hero-1-thumb-box { right: -11%; transform: scale(0.8); } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .tp-hero-1-thumb-box { top: 0; right: -6%; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tp-hero-1-thumb-box { top: 0; right: -10%; transform: scale(0.7); } } .tp-hero-1-thumb img { max-width: inherit; } .tp-hero-1-thumb-shape-box .thumb-shape-1 { position: absolute; top: 70px; left: -15px; animation: tpswing 1s forwards infinite alternate; } .tp-hero-1-thumb-shape-box .thumb-shape-2 { position: absolute; bottom: 100px; left: -100px; animation: spin-1 3000ms forwards infinite alternate; transform-origin: bottom left; } .tp-hero-1-thumb-shape-box .thumb-shape-3 { position: absolute; top: 20px; right: -16px; z-index: -1; animation: zoom 7s infinite; transform-origin: bottom center; } .tp-hero-1-thumb-shape-box .thumb-shape-4 { position: absolute; bottom: 100px; right: -110px; animation: spin-1 3000ms forwards infinite alternate; transform-origin: top right; } @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) { .tp-hero-1-thumb-shape-box .thumb-shape-4 { display: none; } } @media (max-width: 575px) { .tp-hero-1-action-box a { margin-bottom: 30px; } } .tp-hero-1-action-box .tp-slider-1-info-title { color: var(--tp-common-black); } /*----------------------------------------*/ /* 7.17 Featured css /*----------------------------------------*/ .tp-featured-shape { position: absolute; right: 0; bottom: -18px; animation: moving 3s infinite; } .tp-featured-item { position: relative; overflow: hidden; background: #344755; border-radius: 15px; z-index: 2; } .tp-featured-item::before { position: absolute; width: 100%; height: 100%; bottom: -98%; left: 0; content: ""; background: var(--tp-theme-1); z-index: -2; border-radius: 15px; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .tp-featured-item a { padding: 30px 45px; display: inline-block; } @media only screen and (min-width: 576px) and (max-width: 767px) { .tp-featured-item a { padding: 30px 19px; } } .tp-featured-item:hover .tp-featured-icon { background: #d41445; } .tp-featured-item:hover .tp-featured-icon span { color: var(--tp-common-white); } .tp-featured-item:hover::before { bottom: 0; } .tp-featured-icon { width: 120px; height: 120px; line-height: 125px; display: inline-block; border-radius: 50%; background: var(--tp-common-black); margin-bottom: 25px; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .tp-featured-icon span { font-size: 50px; color: var(--tp-theme-1); -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .tp-featured-title { font-weight: 700; font-size: 20px; color: var(--tp-common-white); } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 576px) and (max-width: 767px) { .tp-featured-title { font-size: 18px; } } .tp-featured-text p { font-weight: 500; color: var(--tp-common-white); } .tp-featured-text p a { color: var(--tp-theme-1); -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .tp-featured-text p a:hover { color: var(--tp-common-white); } .tp-featured-text p img { margin-top: -4px; } .tp-featured-2-bg { background-position: center; background-size: cover; background-repeat: no-repeat; } .tp-featured-2-item { padding: 50px; position: relative; border-radius: 15px; background-color: white; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .tp-featured-2-item:last-child { background: var(--tp-theme-1); } .tp-featured-2-item:last-child .tp-featured-2-icon { color: var(--tp-common-black); background-color: var(--tp-common-white); } .tp-featured-2-item:last-child .tp-featured-2-action a { color: var(--tp-theme-1); background-color: var(--tp-common-white); } .tp-featured-2-item:last-child .tp-featured-2-action a:hover { color: var(--tp-common-white); background-color: var(--tp-common-black); } @media (max-width: 575px) { .tp-featured-2-item { padding: 25px; } } .tp-featured-2-icon { width: 80px; height: 80px; flex: 0 0 auto; font-size: 40px; line-height: 85px; text-align: center; border-radius: 50%; margin-right: 30px; color: var(--tp-common-white); background: var(--tp-common-black); -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } @media (max-width: 575px) { .tp-featured-2-icon { margin-bottom: 30px; } } .tp-featured-2-title { font-size: 24px; font-weight: 700; color: var(--tp-common-black); -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .tp-featured-2-content p { margin-right: 10px; margin-bottom: 30px; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .tp-featured-2-content p { margin-right: 0; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tp-featured-2-content p { margin-right: 60px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .tp-featured-2-content p { font-size: 14px; margin-right: 10px; } } .tp-featured-2-btn { font-size: 14px; font-weight: 700; padding: 7px 24px; border-radius: 50px; display: inline-block; color: var(--tp-common-white); background: var(--tp-common-black); -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .tp-featured-2-btn:hover { color: var(--tp-common-white); background-color: var(--tp-theme-1); } .tp-featured-3-shape { position: absolute; left: 80px; bottom: 40px; animation: spin-1 3000ms forwards infinite alternate; transform-origin: bottom right; } @media only screen and (min-width: 1400px) and (max-width: 1599px) { .tp-featured-3-shape { left: 20px; } } .tp-featured-3-wrapp { position: relative; border-radius: 15px; background-color: white; box-shadow: 0px 0px 60px 0px rgba(34, 35, 63, 0.06); } .tp-featured-3-wrapp ul { list-style: none; text-align: center; display: grid; grid-template-columns: repeat(2, 1fr); } @media (max-width: 575px) { .tp-featured-3-wrapp ul { display: block; } } .tp-featured-3-wrapp ul li { border: 1px solid var(--tp-border-1); } @media (max-width: 575px) { .tp-featured-3-wrapp ul li { margin-top: -1px; } } .tp-featured-3-wrapp ul li:nth-child(n+1) { border-bottom: none; } @media (max-width: 575px) { .tp-featured-3-wrapp ul li:nth-child(n+1) { border: 1px solid var(--tp-border-1); } } .tp-featured-3-wrapp ul li:nth-child(n) { border-left: none; } @media (max-width: 575px) { .tp-featured-3-wrapp ul li:nth-child(n) { border: 1px solid var(--tp-border-1); } } .tp-featured-3-wrapp ul li:nth-child(-n+2) { border-top: none; } @media (max-width: 575px) { .tp-featured-3-wrapp ul li:nth-child(-n+2) { border: 1px solid var(--tp-border-1); } } .tp-featured-3-wrapp ul li:nth-child(2n) { border-right: none; } @media (max-width: 575px) { .tp-featured-3-wrapp ul li:nth-child(2n) { border: 1px solid var(--tp-border-1); } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tp-featured-3-wrapp { margin-bottom: 40px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .tp-featured-3-content-wrapp { margin-left: 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: 575px) { .tp-featured-3-content-wrapp { margin-left: 0; } } .tp-featured-3-mid-icon { position: absolute; left: 0; right: 0; top: 50%; text-align: center; transform: translateY(-50%); } .tp-featured-3-mid-icon span { width: 30px; height: 30px; line-height: 28px; text-align: center; border-radius: 50%; display: inline-block; color: var(--tp-common-black); background: var(--tp-grey-1); } .tp-featured-3-action a { width: 100%; text-align: center; } .tp-featured-3-title { font-size: 20px; font-weight: 700; margin-bottom: 0; transition: 0.3s; } .tp-featured-3-title-box .tp-section-title { font-weight: 700; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tp-featured-3-title-box .tp-section-title { font-size: 44px; } } @media (max-width: 575px) { .tp-featured-3-title-box .tp-section-title { font-size: 30px; } } .tp-featured-3-title:hover { color: var(--tp-theme-1); } .tp-featured-3-list p { line-height: 1.6; } .tp-featured-3-item { padding: 50px 10px 50px 10px; } .tp-featured-3-icon { 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: 575px) { .tp-featured-inner-item { margin-bottom: 40px; } } .tp-featured-inner-item:hover .tp-featured-inner-icon span { color: var(--tp-theme-1); } .tp-featured-inner-icon span { -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .tp-featured-inner-title { font-size: 24px; font-weight: 800; line-height: 1.1; } /*----------------------------------------*/ /* 7.1 About css /*----------------------------------------*/ .tp-about-thumb-shape { position: absolute; top: 30%; left: -28%; animation: spin-1 3000ms forwards infinite alternate; transform-origin: bottom left; } @media only screen and (min-width: 1400px) and (max-width: 1599px) { .tp-about-thumb-shape { left: -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: 575px) { .tp-about-thumb-shape { display: none; } } .tp-about-thumb img { width: 100%; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tp-about-thumb-box { transform: scale(0.8); } } .tp-about-thumb-box::before { position: absolute; width: 100%; height: 567px; left: -18px; top: 50%; transform: translateY(-50%); content: ""; background: var(--tp-common-black); border-radius: 15px; z-index: -1; } @media (max-width: 575px) { .tp-about-thumb-box::before { display: none; } } .tp-about-experience-box { position: absolute; padding: 15px 30px; top: 17px; right: -35px; display: inline-block; background: var(--tp-theme-1); border-radius: 15px 0 15px 15px; } .tp-about-experience-box::before { position: absolute; width: 35px; height: 20px; right: 0; top: -20px; content: ""; background: #c00a38; clip-path: polygon(0 16%, 0% 100%, 100% 100%); } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) { .tp-about-experience-box::before { right: 2px; } } .tp-about-experience-content p { font-weight: 700; color: var(--tp-common-white); line-height: 1.5; margin: 0; } .tp-about-experience-title { font-size: 50px; font-weight: 700; margin-bottom: 0; color: var(--tp-common-white); } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .tp-about-content-wrapp { margin-left: 70px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tp-about-content-wrapp { 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: 575px) { .tp-about-content-wrapp { margin-left: 0; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tp-about-title-box .tp-section-title { font-size: 35px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .tp-about-title-box .tp-section-title { font-size: 40px; } } @media (max-width: 575px) { .tp-about-title-box .tp-section-title { font-size: 28px; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tp-about-title-box p br { display: none; } } .tp-about-user-box { position: absolute; width: 306px; height: 110px; bottom: 96px; left: -130px; padding: 40px 50px; border-radius: 15px; background-color: white; animation: tptranslateY2 3s infinite alternate; box-shadow: 0px 0px 60px 0px rgba(4, 23, 26, 0.06); } @media only screen and (min-width: 1400px) and (max-width: 1599px) { .tp-about-user-box { left: -95px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .tp-about-user-box { left: 20px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tp-about-user-box { left: -13px; } } @media (max-width: 575px) { .tp-about-user-box { bottom: 40px; left: -35px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) { .tp-about-user-box { left: -90px; } } .tp-about-user-icon { margin-right: 20px; } .tp-about-user-content p { margin-bottom: 0; } .tp-about-user-title { font-weight: 700; font-size: 22px; color: var(--tp-common-black); } .tp-about-featured-item { align-items: center !important; } .tp-about-featured-item:hover .tp-about-featured-icon span { color: var(--tp-common-white); background: var(--tp-common-black); } .tp-about-featured-icon span { font-size: 46px; width: 80px; height: 80px; line-height: 90px; text-align: center; background: #f9f9f9; display: inline-block; color: var(--tp-theme-1); border-radius: 50%; margin-right: 30px; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } @media (max-width: 575px) { .tp-about-featured-icon span { margin-right: 20px; } } .tp-about-featured-title { font-weight: 700; font-size: 22px; margin-bottom: 13px; } .tp-about-featured-content p { line-height: 1.6; } @media (max-width: 575px) { .tp-about-featured-content p { display: none; } } .tp-about-search-box { position: absolute; width: 170px; height: 206px; right: 0; padding: 30px; border-radius: 15px; animation: moving 9s linear infinite; background-color: white; box-shadow: 0px 0px 40px 0px rgba(29, 0, 79, 0.04); } @media only screen and (min-width: 992px) and (max-width: 1199px), (max-width: 575px) { .tp-about-search-box { display: none; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .tp-about-search-box { right: 70px; } } .tp-about-search-title { font-weight: 700; font-size: 18px; color: var(--tp-theme-1); } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tp-about-review-box { margin-left: 20px; } } @media (max-width: 575px) { .tp-about-review-box { margin-left: 0; margin-top: 15px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .tp-about-review-box { margin: auto; } } .tp-about-review-title { font-weight: 800; font-size: 48px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tp-about-review-title { font-size: 31px; } } .tp-about-review-icon { padding: 4px 10px; color: var(--tp-common-white); background: var(--tp-theme-1); border-radius: 10px; margin-left: 14px; } .tp-about-notes-box { position: relative; padding: 20px 30px; overflow: hidden; border-radius: 15px; background-color: white; box-shadow: 0px 0px 40px 0px rgba(27, 19, 59, 0.06); } .tp-about-notes-box::before { position: absolute; width: 80px; height: 80px; top: -26px; left: -20px; content: ""; background-color: #ffdae3; border-radius: 50%; } .tp-about-notes-icon span { position: relative; font-size: 44px; margin-right: 30px; color: var(--tp-common-black); display: inline-block; margin-bottom: 0; } @media (max-width: 575px) { .tp-about-notes-icon span { margin-right: 15px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .tp-about-notes-icon span { margin-right: 30px; } } .tp-about-notes-text p { font-weight: 700; font-size: 18px; line-height: 1.3; color: var(--tp-theme-1); margin-right: 30px; margin-bottom: 0; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tp-about-notes-text p { font-size: 14px; } } @media (max-width: 575px) { .tp-about-notes-text p { font-size: 14px; margin-right: 0; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .tp-about-notes-text p { font-size: 18px; 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: 575px) { .tp-about-1 { padding-top: 0; padding-bottom: 80px; } } .tp-about-1 .tp-theme-btn { font-size: 16px; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tp-about-style-2 { padding-top: 0; } } .tp-about-style-2 .tp-about-thumb { left: -105px; } @media only screen and (min-width: 1400px) and (max-width: 1599px) { .tp-about-style-2 .tp-about-thumb { left: -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: 575px) { .tp-about-style-2 .tp-about-thumb { left: 0; } } .tp-about-style-2 .tp-about-thumb img { border-radius: 15px; } .tp-about-style-2 .tp-about-thumb-sm { position: absolute; bottom: -95px; right: -150px; } @media (max-width: 575px) { .tp-about-style-2 .tp-about-thumb-sm { position: static; margin-top: 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) { .tp-about-style-2 .tp-about-thumb-sm { right: 0; left: 0; text-align: center; } } .tp-about-style-2 .tp-about-thumb-sm img { width: 350px; height: 350px; } .tp-about-style-2 .tp-about-thumb-shape { top: auto; left: 8%; bottom: -26%; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .tp-about-style-2 .tp-about-thumb-shape { display: none; } } .tp-about-style-2 .tp-about-thumb-bg-shape { position: absolute; top: 50%; transform: translateY(-50%); left: -40%; z-index: -1; } .tp-about-style-2 .tp-about-thumb-box::before { display: none; } .tp-about-style-2 .tp-about-since-content { position: absolute; top: 50%; left: 0; right: 0; text-align: center; transform: translateY(-50%); } .tp-about-style-2 .tp-about-since-box { position: absolute; top: 70px; right: -120px; animation: moving 7s infinite; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .tp-about-style-2 .tp-about-since-box { right: -80px; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 576px) and (max-width: 767px) { .tp-about-style-2 .tp-about-since-box { right: -40px; } } .tp-about-style-2 .tp-about-since-title { font-size: 16px; font-weight: 700; color: var(--tp-common-black); } .tp-about-style-2 .tp-about-since-number { font-weight: 700; font-size: 36px; color: var(--tp-theme-1); } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .tp-about-style-2 .tp-about-content-wrapp { margin-left: 50px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tp-about-style-2 .tp-about-content-wrapp { margin-left: 10px; } } @media (max-width: 575px) { .tp-about-style-2 .tp-about-content-wrapp { margin-top: 0px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) { .tp-about-style-2 .tp-about-content-wrapp { margin-top: 70px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tp-about-2-title-box .tp-section-title { font-size: 35px; } } @media (max-width: 575px) { .tp-about-2-title-box .tp-section-title { font-size: 28px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .tp-about-2-title-box .tp-section-title { font-size: 45px; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tp-about-2-title-box p br { display: none; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tp-about-3.tp-plr-rs { padding-top: 0; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .tp-about-3-title-box .tp-section-title { font-size: 45px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .tp-about-3-title-box .tp-section-title { font-size: 54px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .tp-about-3-title-box .tp-section-title { font-size: 45px; } } @media (max-width: 575px) { .tp-about-3-title-box .tp-section-title { font-size: 31px; } } .tp-about-3 .tp-about-thumb { left: -21%; } @media only screen and (min-width: 1400px) and (max-width: 1599px) { .tp-about-3 .tp-about-thumb { left: -10%; } } @media only screen and (min-width: 1200px) 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-3 .tp-about-thumb { left: 0; } } .tp-about-3 .tp-about-thumb img { width: auto; border-radius: 15px; } .tp-about-3 .tp-about-thumb-1 { position: absolute; top: 0; right: -40px; } .tp-about-3 .tp-about-thumb-1 img { width: 295px; height: 315px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .tp-about-3 .tp-about-thumb-1 { right: -60px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .tp-about-3 .tp-about-thumb-1 { right: 0; } } .tp-about-3 .tp-about-thumb-2 { position: absolute; bottom: 0; right: -34px; } .tp-about-3 .tp-about-thumb-2 img { width: 290px; height: 290px; border-radius: 50%; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .tp-about-3 .tp-about-thumb-2 { right: -60px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .tp-about-3 .tp-about-thumb-2 { right: 0; } } @media (max-width: 575px) { .tp-about-3 .tp-about-author-box { margin-left: 0; margin-top: 20px; } } .tp-about-3 .tp-about-featured-box { position: relative; } .tp-about-3 .tp-about-featured-box::after { position: absolute; width: 1px; height: 100%; top: 0; right: -50px; content: ""; background: var(--tp-border-1); } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tp-about-3 .tp-about-featured-box::after { display: none; } } .tp-about-3 .tp-about-featured-icon span { width: 72px; height: 72px; font-size: 30px; line-height: 78px; color: var(--tp-common-black); } .tp-about-3 .tp-about-search-box { width: 240px; height: 100%; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tp-about-3 .tp-about-search-box { display: block; right: 30px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .tp-about-3 .tp-about-search-box { right: 100px; } } .tp-about-3 .tp-about-search-text p { line-height: 1.5; } .tp-about-3 .tp-about-search-review { color: var(--tp-theme-1); margin-bottom: 10px; } .tp-about-3 .tp-about-notes-box { background: none; box-shadow: none; padding: 0; margin-bottom: 50px; } .tp-about-3 .tp-about-notes-box::before { display: none; } .tp-about-3 .tp-about-notes-text p { font-size: 20px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .tp-about-3 .tp-about-notes-text p { font-size: 18px; } } .tp-about-3 .tp-about-author-avtr { margin-right: 20px; } .tp-about-3 .tp-about-author-avtr img { width: 60px; height: 60px; border-radius: 50%; } .tp-about-3 .tp-about-author-number { font-size: 20px; font-weight: 700; color: var(--tp-theme-1); -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .tp-about-3 .tp-about-author-number:hover { color: var(--tp-common-black); } .tp-about-3 .tp-about-author-number span { font-weight: 500; font-size: 16px; color: var(--tp-text-body); } .tp-about-4-shape { position: absolute; top: 100px; right: -30px; animation: rotate2 15s linear infinite; } @media (max-width: 575px) { .tp-about-4-shape { display: none; } } .tp-about-4 .tp-about-thumb { left: 0; } .tp-about-4 .tp-about-thumb > img { width: auto; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) { .tp-about-4 .tp-about-thumb > img { width: 100%; } } .tp-about-4 .tp-about-thumb-sm { bottom: auto; right: -5%; top: 61%; transform: translateY(-60%); } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .tp-about-4 .tp-about-thumb-sm { left: auto; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tp-about-4 .tp-about-thumb-sm { display: none; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .tp-about-4 .tp-about-thumb-sm { top: auto; right: 0; } } @media (max-width: 575px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) { .tp-about-4 .tp-about-thumb-sm { display: none; } } .tp-about-4 .tp-about-thumb-sm img { width: auto; height: auto; } @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) { .tp-about-4 .tp-about-thumb-sm img { width: auto; } } .tp-about-4 .tp-about-thumb-shape-1 { position: absolute; top: -50px; right: 150px; z-index: -1; animation: tptranslateY2 3s infinite alternate; } .tp-about-4 .tp-about-thumb-shape-1 img { border-radius: 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: 575px) { .tp-about-4 .tp-about-thumb-shape-1 { display: none; } } .tp-about-4 .tp-about-thumb-shape-2 { position: absolute; bottom: 50px; left: -100px; z-index: -1; animation: tptranslateX2 2s infinite alternate; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tp-about-4 .tp-about-thumb-shape-2 { display: none; } } .tp-about-4 .tp-about-thumb-shape-2 img { border-radius: 0; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) { .tp-about-4 .tp-about-thumb-box::before { display: none; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .tp-about-4 .tp-about-thumb-box { margin-bottom: 0; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) { .tp-about-4 .tp-about-content-wrapp { margin-top: 0; } } @media (max-width: 575px) { .tp-about-4 .tp-about-action-box a { margin-bottom: 20px; } } .tp-about-4-funfact { margin-left: -26px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tp-about-4-funfact { margin-left: 0; } } .tp-about-4-funfact-title { font-size: 30px; font-weight: 700; display: inline-block; transform: rotate(-90deg); } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tp-about-4-funfact-title { transform: rotate(0); } } .tp-about-4-funfact p { color: #7a8a9e; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tp-about-4-funfact p { margin-bottom: 5px; margin-left: 10px; } } .tp-about-4-review-box { position: relative; border-bottom: 1px solid var(--tp-border-1); } .tp-about-4-review-content { width: 72%; position: relative; padding-right: 20px; padding-bottom: 20px; } @media only screen and (min-width: 576px) and (max-width: 767px) { .tp-about-4-review-content { padding-bottom: 0; } } .tp-about-4-review-content::after { position: absolute; width: 1px; height: 100%; bottom: 0; right: 0; content: ""; background: var(--tp-border-1); } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tp-about-4-review-content::after { display: none; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tp-about-4-review-content { padding-right: 30px; } } .tp-about-4-review-icon span { color: var(--tp-theme-1); } .tp-about-4-reviewer-title { font-weight: 600; color: var(--tp-common-black); } .tp-about-4-reviewer-sign { margin-left: 60px; } @media (max-width: 575px) { .tp-about-4-reviewer-sign { margin-left: 0; } } .tp-about-4-dsc { margin-left: 50px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tp-about-4-dsc { margin-left: 30px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tp-about-4-dsc { margin-left: 0; padding-bottom: 20px; } } .tp-about-4-dsc p { font-size: 18px; font-weight: 700; line-height: 1.5; color: var(--tp-common-black); } .tp-about-5-plr { padding-top: 120px; padding-bottom: 235px; } @media only screen and (min-width: 576px) and (max-width: 767px) { .tp-about-5-plr { padding-top: 0; } } @media (max-width: 575px) { .tp-about-5-plr { padding-top: 80px; padding-bottom: 200px; } } .tp-about-5-button-box nav button { font-size: 22px; color: var(--tp-common-black); font-weight: 700; padding-left: 0; margin-right: 50px; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .tp-about-5-button-box nav button:hover { color: var(--tp-theme-1); } .tp-about-5-button-box nav button.active { color: var(--tp-theme-1); -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tp-about-5-button-box nav button { margin-right: 15px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .tp-about-5-button-box nav button { margin-right: 30px; } } @media (max-width: 575px) { .tp-about-5-button-box nav button { font-size: 18px; margin-right: 0; } } .tp-about-5-text { margin-right: 70px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tp-about-5-text { 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: 575px) { .tp-about-5-text p br { display: none; } } .tp-about-5 .tp-about-thumb { left: auto; right: 0; } .tp-about-5 .tp-about-thumb img { width: auto; } .tp-about-5 .tp-about-thumb-sm { bottom: -28%; right: auto; left: -150px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tp-about-5 .tp-about-thumb-sm { left: -100px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .tp-about-5 .tp-about-thumb-sm { bottom: -10%; } } .tp-about-5 .tp-about-thumb-sm img { width: auto; height: auto; } @media (max-width: 575px) { .tp-about-5 .tp-about-thumb-sm img { width: 100%; height: 100%; } } .tp-about-5 .tp-about-thumb-shape { left: auto; right: -80px; } @media only screen and (min-width: 1400px) and (max-width: 1599px) { .tp-about-5 .tp-about-thumb-shape { right: -60px; } } @media (max-width: 575px) { .tp-about-5 .tp-about-thumb-box { margin-left: 0; transform: scale(1); } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) { .tp-about-5 .tp-about-thumb-box::before { display: none; } } .tp-about-5 .tp-about-since-box { right: auto; left: -120px; top: 50px; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) { .tp-about-5 .tp-about-since-box { top: 30px; } } @media (max-width: 575px) { .tp-about-5 .tp-about-action-box { margin-bottom: 30px; } } .tp-about-5-shape { position: absolute; left: 0; bottom: 0; } @media (max-width: 575px) { .tp-about-5-shape { 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: 575px) { .tp-about-inner { padding-top: 120px; } } .tp-about-inner-bg-thumb { position: absolute; width: 44%; height: 100%; top: 0; background-size: cover; background-position: center; background-repeat: no-repeat; border-radius: 25px 0 0 25px; } .tp-about-inner-wrapp { margin: 0 -120px; border-radius: 25px; } @media only screen and (min-width: 1400px) and (max-width: 1599px) { .tp-about-inner-wrapp { margin: 0 -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: 575px) { .tp-about-inner-wrapp { margin: auto; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tp-about-inner-wrapp { padding-top: 30px; padding-bottom: 30px; } } .tp-about-inner .tp-about-content-wrapp { padding-right: 110px; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), (max-width: 575px) { .tp-about-inner .tp-about-content-wrapp { padding-right: 10px; 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: 575px) { .tp-about-inner .tp-about-content-wrapp { padding: 30px; margin: 0; } } @media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px) { .tp-about-inner .tp-about-title-box .tp-section-title { font-size: 45px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .tp-about-inner .tp-about-title-box .tp-section-title { font-size: 35px; } } @media (max-width: 575px) { .tp-about-inner .tp-about-title-box .tp-section-title { font-size: 20px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .tp-about-inner .tp-about-title-box p br { display: none; } } .tp-about-inner .tp-faq-service ul li { color: var(--tp-common-white); } .tp-about-inner .tp-header-info-item:hover .tp-header-info-icon { background: none; color: var(--tp-theme-1); border: 1px solid var(--tp-common-white); } .tp-about-inner .tp-header-info-item:hover .tp-header-info-title { color: var(--tp-theme-1); } .tp-about-inner .tp-header-info-item:hover .tp-header-info-text span { color: inherit; } .tp-about-inner .tp-header-info-icon { font-size: 20px; background: #192936; color: var(--tp-common-white); border: 1px solid #192936; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .tp-about-inner .tp-header-info-title { color: var(--tp-common-white); } /*----------------------------------------*/ /* 7.8 Services css /*----------------------------------------*/ @media (max-width: 575px) { .tp-service { padding-bottom: 120px; } } .tp-service-shape-1 { position: absolute; top: 0; left: 0; } @media only screen and (min-width: 1600px) and (max-width: 1700px) { .tp-service-shape-1 { left: -50px; } } @media only screen and (min-width: 1400px) and (max-width: 1599px) { .tp-service-shape-1 { left: -70px; } } .tp-service-shape-2 { position: absolute; top: 0; right: 0; } .tp-service-shape-3 { position: absolute; bottom: 0; left: 0; } .tp-service-wrapp .row [class*=col-]:last-child .tp-service-item::before { display: none; } .tp-service-wrapp .row [class*=col-]:last-child .tp-service-item::after { display: none; } .tp-service-item { position: relative; text-align: center; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tp-service-item { padding: 0 5px; margin-bottom: 40px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .tp-service-item { padding: 0 35px; margin-bottom: 40px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tp-service-item { padding: 0 10px; margin-bottom: 40px; } } .tp-service-item::before { position: absolute; width: 1px; height: 100%; top: 0; right: 0; content: ""; background: var(--tp-border-1); } @media (max-width: 575px) { .tp-service-item::before { display: none; } } .tp-service-item::after { position: absolute; width: 1px; height: 10px; top: 7%; right: 0; content: ""; background: var(--tp-theme-1); animation: scroll1 11s forwards infinite; } @media (max-width: 575px) { .tp-service-item::after { display: none; } } .tp-service-item-2::after { animation: scroll1 13s forwards infinite; } .tp-service-item-3::after { animation: scroll1 11s forwards infinite; } .tp-service-item:hover .tp-service-icon span { color: var(--tp-common-white); background: var(--tp-theme-1); } .tp-service-item:hover .tp-service-action a { color: var(--tp-theme-1); } .tp-service-item:hover .tp-service-action a i { animation: tp-arrow 0.2s linear; } .tp-service-item p { font-weight: 600; line-height: 1.6; } .tp-service-icon { position: absolute; top: -26px; right: 20px; } .tp-service-icon span { font-size: 48px; width: 100px; height: 100px; line-height: 110px; text-align: center; border-radius: 50%; display: inline-block; color: var(--tp-theme-1); background: var(--tp-common-white); -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .tp-service-title { font-weight: 700; font-size: 24px; margin-bottom: 15px; color: var(--tp-common-black); -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } @media only screen and (min-width: 576px) and (max-width: 767px) { .tp-service-title { font-size: 20px; } } .tp-service-title:hover { color: var(--tp-theme-1); } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tp-service-title-box .tp-section-title { font-size: 45px; } } @media (max-width: 575px) { .tp-service-title-box .tp-section-title { font-size: 24px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) { .tp-service-title-box .tp-section-title { font-size: 35px; } } .tp-service-action a { font-size: 14px; color: var(--tp-common-black); -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .tp-service-text:hover .tp-service-see { color: var(--tp-theme-1); } .tp-service-text p { font-size: 17px; font-weight: 600; color: var(--tp-common-black); } @media (max-width: 575px) { .tp-service-text p { font-size: 17px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .tp-service-text p { font-size: 14px; } } .tp-service-hurry { padding: 0px 10px; color: var(--tp-common-white); background: var(--tp-theme-1); border-radius: 30px; margin-right: 8px; } .tp-service-see { position: relative; } .tp-service-see::after { position: absolute; width: 100%; height: 1px; bottom: 0; left: 0; content: ""; background: var(--tp-common-black); -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .tp-service-help-box { top: 130px; z-index: 3; } .tp-service-help-item { position: relative; } @media only screen and (min-width: 576px) and (max-width: 767px) { .tp-service-help-item { margin-bottom: 30px; } } .tp-service-help-thumb { position: relative; } .tp-service-help-thumb::before { position: absolute; width: 100%; height: 100%; top: 0; left: 0; content: ""; border-radius: 15px; background-color: #030024; opacity: 0.502; } .tp-service-help-thumb img { width: 100%; border-radius: 15px; } .tp-service-help-button { position: absolute; top: 40px; left: 60px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 576px) and (max-width: 767px) { .tp-service-help-button { left: 40px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .tp-service-help-button { top: 20px; left: 30px; } } .tp-service-help-button span { font-weight: 700; font-size: 14px; padding: 7px 23px; display: inline-block; color: var(--tp-common-black); background: var(--tp-common-white); border-radius: 50px; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .tp-service-help-button span:hover { color: var(--tp-common-white); background: var(--tp-theme-1); } .tp-service-help-content { position: absolute; bottom: 30px; left: 60px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 576px) and (max-width: 767px) { .tp-service-help-content { bottom: 20px; left: 40px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .tp-service-help-content { bottom: 10px; left: 30px; } } .tp-service-help-action { font-weight: 600; font-size: 16px; color: #dfdfdf; display: block; margin-bottom: 8px; } .tp-service-help-title { font-weight: 800; font-size: 36px; display: inline-block; color: var(--tp-common-white); } @media only screen and (min-width: 768px) and (max-width: 991px) { .tp-service-help-title { font-size: 24px; } } .tp-service-2-shape-2 { width: 850px; height: 10px; display: inline-block; background: var(--tp-theme-1); position: absolute; bottom: 0; right: -40%; border-radius: 15px; } .tp-service-2-item { position: relative; overflow: hidden; background: var(--tp-common-white); border-radius: 15px; } .tp-service-2-item:hover .tp-service-2-number span { color: #f3f3f3; } .tp-service-2-item:hover .tp-service-2-thumb img { transform: scale(1.2); } .tp-service-2-thumb { overflow: hidden; } .tp-service-2-thumb img { width: 100%; border-radius: 15px 15px 0 0; transition: 1.3s; } .tp-service-2-content { padding: 30px 40px; background-color: white; box-shadow: 0px 0px 40px 0px rgba(60, 54, 87, 0.06); border-radius: 15px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .tp-service-2-content { padding: 30px; } } @media (max-width: 575px) { .tp-service-2-content { padding: 24px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .tp-service-2-content { padding: 40px; } } .tp-service-2-title { font-weight: 700; font-size: 24px; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .tp-service-2-title { font-size: 22px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tp-service-2-title { font-size: 18px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .tp-service-2-title { font-size: 20px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .tp-service-2-title-box p { font-size: 14px; } } .tp-service-2-title:hover { color: var(--tp-theme-1); } .tp-service-2-action a { font-weight: 700; padding: 5px 16px; display: inline-block; color: var(--tp-common-white); background: var(--tp-theme-1); border-radius: 30px; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .tp-service-2-action a:hover { background-color: var(--tp-common-black); } .tp-service-2-number { position: absolute; bottom: -20px; right: 30px; } .tp-service-2-number span { font-weight: 700; font-size: 80px; color: var(--tp-grey-1); -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .tp-service-2-active { margin: 0 -375px 0 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: 575px) { .tp-service-2-active { margin: 0; } } .tp-service-2 .tp-service-2-shape-1 { position: absolute; bottom: 0; left: 0; } .tp-service-2 .tp-service-hurry { background: var(--tp-common-black); } .tp-service-2 .tp-service-see { color: var(--tp-theme-1); } .tp-service-2 .tp-service-see::after { background: var(--tp-theme-1); } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tp-service-2 .tp-service-title-box { margin-bottom: 20px; } } .tp-service-3-plr { padding-bottom: 250px; } .tp-service-3 .tp-service-wrapp .row [class*=col-]:last-child .tp-service-item { border-right: 0; } .tp-service-3 .tp-service-wrapp .row [class*=col-]:last-child .tp-service-item::before { display: none; } .tp-service-3 .tp-service-wrapp .row [class*=col-]:last-child .tp-service-item::after { display: none; } .tp-service-3 .tp-service-wrapp .row [class*=col-]:last-child .tp-service-button { border-right: 0; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) { .tp-service-3 .tp-service-wrapp .row [class*=col-]:nth-child(2n+2) .tp-service-item { border-right: 0; } } .tp-service-3 .tp-service-item { border-right: 1px solid var(--tp-border-1); border-bottom: 1px solid var(--tp-border-1); } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) { .tp-service-3 .tp-service-item { padding: 0; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .tp-service-3 .tp-service-item { margin-bottom: 30px; } } .tp-service-3 .tp-service-item::before, .tp-service-3 .tp-service-item::after { display: none; } .tp-service-3 .tp-service-item:hover .tp-service-icon span i { bottom: 0; } .tp-service-3 .tp-service-content { padding: 0 30px 28px 30px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tp-service-3 .tp-service-content { padding: 0 10px 28px 10px; } } .tp-service-3 .tp-service-icon { position: static; } .tp-service-3 .tp-service-icon span { position: relative; font-size: 54px; width: 120px; height: 120px; line-height: 110px; background-image: -moz-linear-gradient(-96deg, #ebebeb 0%, #f2f2f2 15%, #f9f9f9 100%); background-image: -webkit-linear-gradient(-96deg, #ebebeb 0%, #f2f2f2 15%, #f9f9f9 100%); background-image: -ms-linear-gradient(-96deg, #ebebeb 0%, #f2f2f2 15%, #f9f9f9 100%); -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .tp-service-3 .tp-service-icon span i { position: absolute; left: 0; right: 0; bottom: -35px; text-align: center; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .tp-service-3 .tp-service-button { width: 100%; text-align: center; border-top: 1px solid var(--tp-border-1); -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .tp-service-3 .tp-service-button a { width: 100%; font-size: 16px; padding: 8px 0; font-weight: 700; color: var(--tp-common-black); display: inline-block; } .tp-service-3 .tp-service-button:hover { color: var(--tp-common-white); background: var(--tp-common-black); border-top: 1px solid var(--tp-common-black); } .tp-service-3 .tp-service-button:hover a { color: var(--tp-common-white); } .tp-service-4-shape-1 { position: absolute; left: 0; } .tp-service-4-shape-2 { position: absolute; top: 14%; right: 6%; animation: tptranslateY2 3s infinite alternate; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tp-service-4-shape-2 { display: none; } } .tp-service-4-shape-3 { position: absolute; bottom: 80px; left: 80px; animation: spin-1 3000ms forwards infinite alternate; transform-origin: bottom left; } @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-service-4-shape-3 { left: 40px; } } @media (max-width: 575px) { .tp-service-4-shape-3 { left: 20px; } } .tp-service-4-item { padding: 50px; border-radius: 15px; background: #2f4454; margin-bottom: 30px; } @media (max-width: 575px) { .tp-service-4-item { padding: 30px; } } .tp-service-4-item:hover .tp-service-4-thumb { opacity: 1; visibility: visible; transform: scale(1); } .tp-service-4-item:hover .tp-service-4-num-count::before { color: var(--tp-theme-1); } .tp-service-4-thumb { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: center; border-radius: 15px; visibility: hidden; opacity: 0; transform: scale(0.8); -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .tp-service-4-thumb::before { position: absolute; width: 100%; height: 100%; top: 0; left: 0; content: ""; opacity: 0.9; background: var(--tp-common-black); } .tp-service-4-icon-box { margin-right: 50px; } .tp-service-4-icon span { font-size: 64px; color: var(--tp-common-white); } .tp-service-4-title { font-size: 26px; font-weight: 700; margin-bottom: 15px; color: var(--tp-common-white); } @media only screen and (min-width: 576px) and (max-width: 767px) { .tp-service-4-title-box .tp-section-title { font-size: 40px; } } @media (max-width: 575px) { .tp-service-4-title-box .tp-section-title { font-size: 25px; } } .tp-service-4-title-box .tp-section-subtitle { color: var(--tp-text-body); } .tp-service-4-action { font-weight: 700; color: var(--tp-common-white); } .tp-service-4-action a { position: relative; font-size: 16px; display: inline-block; } .tp-service-4-action a:hover::after { width: 100%; } .tp-service-4-action a::after { position: absolute; width: 0; height: 1px; bottom: 4px; left: 0; content: ""; background: var(--tp-common-white); -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .tp-service-4-num-count { position: absolute; bottom: 10px; left: 2%; transform: rotate(-90deg); } @media (max-width: 575px) { .tp-service-4-num-count { left: auto; right: 0; } } .tp-service-4-num-count::before { font-size: 45px; color: #223645; font-weight: 900; text-align: center; display: inline-block; counter-increment: count; content: "0" counter(count); opacity: 1; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tp-service-5 { padding-top: 10px; padding-bottom: 80px; } } .tp-service-5-item { border-radius: 15px; } .tp-service-5-item:hover .tp-service-5-content { bottom: 0; opacity: 1; visibility: visible; } .tp-service-5-item:hover .tp-service-5-icon { bottom: 35%; transform: translateY(-35%); } @media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 575px) { .tp-service-5-item:hover .tp-service-5-icon { bottom: 28%; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .tp-service-5-item:hover .tp-service-5-icon { bottom: 25%; } } .tp-service-5-item:hover .tp-service-5-icon span { color: var(--tp-common-black); background-color: var(--tp-common-white); } .tp-service-5-item:hover .tp-service-5-title { top: 35px; } @media only screen and (min-width: 576px) and (max-width: 767px) { .tp-service-5-item:hover .tp-service-5-title { top: 60px; } } .tp-service-5-item a { width: 100%; height: 100%; display: inline-block; } .tp-service-5-thumb { position: relative; overflow: hidden; border-radius: 15px; } .tp-service-5-thumb img { width: 100%; border-radius: 15px; } .tp-service-5-title { position: absolute; left: 0; right: 0; top: -75%; opacity: 1; margin: auto; font-size: 22px; font-weight: 700; visibility: visible; text-align: center; display: inline-block; color: var(--tp-common-white); -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .tp-service-5-title { top: -60%; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .tp-service-5-title { top: -90%; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .tp-service-5-title { top: -115%; } } @media (max-width: 575px) { .tp-service-5-title { top: -100%; } } .tp-service-5-title:hover { color: var(--tp-theme-1); } @media only screen and (min-width: 576px) and (max-width: 767px) { .tp-service-5-title-box .tp-section-title { font-size: 40px; } } @media (max-width: 575px) { .tp-service-5-title-box .tp-section-title { font-size: 28px; } } .tp-service-5-content { position: absolute; width: 100%; bottom: -59%; opacity: 1; visibility: hidden; padding: 70px 15px 15px 15px; border-radius: 0 0 15px 15px; background: var(--tp-common-black); -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } @media only screen and (min-width: 576px) and (max-width: 767px) { .tp-service-5-content { padding: 100px 15px 60px 15px; } } .tp-service-5-icon { position: absolute; bottom: -38px; left: 0; right: 0; text-align: center; margin: auto; z-index: 2; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .tp-service-5-icon span { font-size: 48px; width: 90px; height: 90px; line-height: 95px; text-align: center; display: inline-block; color: var(--tp-common-white); background-color: var(--tp-theme-1); border-radius: 50%; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .tp-service-5-icon span:hover { color: var(--tp-theme-1); background-color: var(--tp-common-white); } .tp-service-5 .tp-service-2-active { padding-bottom: 50px; margin: 0; } .tp-service-5 .tp-section-meta-notes p { margin-bottom: 0; } .tp-service-5 .tp-section-meta-notes span { background: var(--tp-common-black); } .tp-service-inner-plr { padding-top: 300px; margin-top: -170px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tp-service-inner-plr { padding-top: 240px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tp-service-details-wrapper { margin-left: 0; } } .tp-service-details-widget { padding: 30px; border-radius: 15px; margin-bottom: 30px; background: var(--tp-grey-1); } .tp-service-details-link ul li { display: block; margin-bottom: 8px; } .tp-service-details-link ul li:last-child { margin-bottom: 0; } .tp-service-details-link ul li:hover a { color: var(--tp-common-white); background-color: var(--tp-common-black); border-bottom: 2px solid var(--tp-common-black); } .tp-service-details-link ul li:hover a i { color: var(--tp-common-white); background: var(--tp-theme-1); } .tp-service-details-link ul li a { position: relative; display: block; font-size: 16px; font-weight: 700; line-height: 2; padding: 11px 20px; border-radius: 15px; color: var(--tp-common-black); background: var(--tp-common-white); background-color: white; border-bottom: 2px solid var(--tp-border-1); box-shadow: 0px 2px 0px 0px rgba(200, 200, 200, 0.004); -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .tp-service-details-link ul li a i { position: absolute; font-size: 20px; width: 56px; height: 56px; top: 0; right: -1px; line-height: 56px; text-align: center; color: var(--tp-common-black); border-radius: 15px; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .tp-service-details-banner { padding: 40px; width: 100%; height: 360px; overflow: hidden; border-radius: 15px; background: var(--tp-common-white); box-shadow: 0px 0px 40px 0px rgba(17, 14, 35, 0.08); } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tp-service-details-banner { padding: 30px; } } .tp-service-details-banner h3 { font-size: 30px; font-weight: 700; line-height: 1; margin-bottom: 40px; color: var(--tp-common-black); } .tp-service-details-banner a { display: inline; } .tp-service-details-banner-shape { position: absolute; left: 0; bottom: 40px; animation: spin-1 3000ms forwards infinite alternate; transform-origin: bottom left; } .tp-service-details-banner-thumb { position: absolute; bottom: -50%; } @media only screen and (min-width: 768px) and (max-width: 991px) { .tp-service-details-banner-thumb { bottom: -100%; right: 0; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .tp-service-details-banner-thumb { bottom: auto; } } @media (max-width: 575px) { .tp-service-details-banner-thumb { bottom: -36%; } } .tp-service-details-download-title { font-size: 22px; font-weight: 700; line-height: 1.1; color: var(--tp-common-black); margin-bottom: 35px; } .tp-service-details-download-item { padding: 22px 30px; border-radius: 15px; background-color: white; box-shadow: 0px 4px 20px 0px rgba(30, 22, 22, 0.06); margin-bottom: 20px; } .tp-service-details-download-icon { margin-right: 20px; color: var(--tp-theme-1); } .tp-service-details-download-icon i { font-size: 40px; } .tp-service-details-download-content h3 { position: relative; font-size: 16px; font-weight: 700; line-height: 1; display: inline-block; color: var(--tp-common-black); margin-bottom: 0; } .tp-service-details-download-content h3::after { position: absolute; width: 0px; height: 1px; left: 0; bottom: -2px; content: ""; opacity: 0; visibility: hidden; background-color: var(--tp-border-1); -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .tp-service-details-download-content h3:hover::after { width: 100%; opacity: 1; visibility: visible; } .tp-service-details-download-content span { font-size: 14px; display: block; line-height: 1; margin: 0; padding: 0; } .tp-service-details-thumb img { border-radius: 15px; } .tp-service-details-title { font-size: 36px; font-weight: 800; color: var(--tp-common-black); } .tp-service-details-featured-item { 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: 575px) { .tp-service-details-featured-item { margin-bottom: 40px; } } .tp-service-details-featured-icon { margin-bottom: 25px; } .tp-service-details-featured-icon span { width: 100px; height: 100px; font-size: 50px; line-height: 100px; text-align: center; border-radius: 15px; display: inline-block; color: var(--tp-theme-1); background: var(--tp-grey-1); -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .tp-service-details-featured-icon span:hover { color: var(--tp-common-white); background-color: var(--tp-theme-1); } .tp-service-details-featured-title { font-size: 20px; font-weight: 700; line-height: 1.6; color: var(--tp-common-black); } .tp-service-details-notes { padding: 30px 40px; border-radius: 15px; background-color: white; box-shadow: 0px 4px 40px 0px rgba(30, 22, 22, 0.08); } .tp-service-details-notes p { font-size: 16px; font-weight: 700; margin-right: 50px; margin-bottom: 0; color: var(--tp-common-black); } .tp-service-details-list-item { margin-bottom: 30px; } .tp-service-details-list-icon span { font-size: 27px; width: 60px; height: 60px; line-height: 60px; text-align: center; display: inline-block; color: var(--tp-common-white); background: var(--tp-theme-1); border-radius: 50%; margin-right: 20px; } .tp-service-details-list-icon span.icon-2 { background: var(--tp-common-black); } .tp-service-details-list-text p { margin-bottom: 0; } .tp-service-details-faq .accordion-items.tp-faq-active .accordion-buttons { color: var(--tp-common-black); background: none; } .tp-service-details-faq .accordion-buttons:not(.collapsed) { color: var(--tp-common-black); padding-bottom: 0; background: none; } .tp-service-details-faq .accordion-buttons:not(.collapsed) .accordion-header { border-radius: 15px 15px 0 0; } .tp-service-details-faq .accordion-buttons:not(.collapsed) .accordion-icon { background: var(--tp-theme-1); } .tp-service-details-faq .accordion-buttons:not(.collapsed) .accordion-icon::after { background: var(--tp-common-white); } .tp-service-details-faq .accordion-body { box-shadow: 0px 4px 4px 0px rgba(16, 23, 40, 0.06); } .tp-service-details-faq .accordion-body p { margin-right: 35px; padding-top: 20px; border-top: 1px solid var(--tp-border-1); } .tp-service-details-faq .accordion-icon { background: var(--tp-common-black); } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tp-custom-arrow { margin-bottom: 40px; } } .tp-custom-arrow button { width: 60px; height: 60px; line-height: 60px; text-align: center; font-size: 20px; color: var(--tp-theme-1); border: 1px solid var(--tp-border-1); border-radius: 50%; margin-right: 16px; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .tp-custom-arrow button:last-child { margin: 0; } .tp-custom-arrow button:hover { border: 1px solid var(--tp-common-white); background-color: white; box-shadow: 0px 0px 40px 0px rgba(31, 20, 44, 0.06); } .tp-section-meta-notes p { font-size: 17px; font-weight: 500; display: inline-block; color: var(--tp-common-black); } @media (max-width: 575px) { .tp-section-meta-notes p { font-size: 17px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .tp-section-meta-notes p { font-size: 14px; } } .tp-section-meta-notes p span { display: inline-block; margin-right: 15px; } .tp-section-meta-notes p:hover .tp-section-meta-sm { color: var(--tp-theme-1); } .tp-section-meta-notes p:hover .tp-section-meta-sm::after { background-color: var(--tp-theme-1); } .tp-section-meta-sm { position: relative; color: var(--tp-common-black); } .tp-section-meta-sm::after { position: absolute; width: 100%; height: 1px; bottom: 0; left: 0; content: ""; background: var(--tp-common-black); -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .counter-row { counter-reset: count; } /*----------------------------------------*/ /* 7.19 Portfolio css /*----------------------------------------*/ .tp-portfolio-plr { padding-top: 245px; padding-bottom: 80px; } @media only screen and (min-width: 576px) and (max-width: 767px) { .tp-portfolio-plr { padding-bottom: 0px; } } @media (max-width: 575px) { .tp-portfolio-plr { padding-top: 100px; padding-bottom: 30px; } } .tp-portfolio-slider-plr { padding-right: 175px; padding-left: 175px; } @media only screen and (min-width: 1400px) and (max-width: 1599px) { .tp-portfolio-slider-plr { padding-right: 110px; padding-left: 110px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .tp-portfolio-slider-plr { padding-right: 50px; 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: 575px) { .tp-portfolio-slider-plr { padding-right: 30px; padding-left: 30px; } } .tp-portfolio-shape { position: absolute; top: 17%; right: 30px; animation: spin-1 3000ms forwards infinite alternate; transform-origin: bottom right; } .tp-portfolio-item { position: relative; overflow: hidden; border-radius: 15px; } .tp-portfolio-item:hover .tp-portfolio-content { left: 40px; opacity: 1; visibility: visible; } @media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px) { .tp-portfolio-item:hover .tp-portfolio-content { left: 20px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tp-portfolio-item:hover .tp-portfolio-content { left: 30px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tp-portfolio-item:hover .tp-portfolio-content { left: 15px; } } .tp-portfolio-item:hover .tp-portfolio-icon { right: -8px; opacity: 1; visibility: visible; } .tp-portfolio-item:hover .tp-portfolio-thumb a::before { opacity: 0.6; visibility: visible; } .tp-portfolio-item:hover .tp-portfolio-thumb img { filter: saturate(0); transform: scale(1.1); } .tp-portfolio-content { position: absolute; left: -40px; bottom: 30px; opacity: 0; visibility: hidden; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; z-index: 2; } .tp-portfolio-thumb { border-radius: 15px; } .tp-portfolio-thumb a { position: relative; display: inline-block; overflow: hidden; border-radius: 15px; } .tp-portfolio-thumb a::before { position: absolute; left: 0; top: 0; width: 100%; height: 100%; content: ""; border-radius: 15px; background-color: #030024; opacity: 0; visibility: hidden; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; z-index: 1; } .tp-portfolio-thumb img { width: 100%; border-radius: 15px; transition: 1.4s; } .tp-portfolio-icon { position: absolute; top: -10px; right: -20%; border-radius: 50%; border: 11px solid var(--tp-common-white); opacity: 0; visibility: hidden; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; z-index: 2; } .tp-portfolio-icon a { width: 48px; height: 48px; font-size: 14px; line-height: 50px; text-align: center; display: inline-block; color: var(--tp-common-white); background: var(--tp-theme-1); border-radius: 50%; } .tp-portfolio-title { font-size: 20px; font-weight: 600; display: inline; color: var(--tp-common-white); -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } @media only screen and (min-width: 768px) and (max-width: 991px) { .tp-portfolio-title-box .tp-section-title { margin-bottom: 20px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .tp-portfolio-title-box .tp-section-title { font-size: 35px; margin-bottom: 35px; } } @media (max-width: 575px) { .tp-portfolio-title-box .tp-section-title { font-size: 22px; margin-bottom: 35px; } } .tp-portfolio-title:hover { color: var(--tp-theme-1); } .tp-portfolio-subtitle { display: block; color: var(--tp-common-white); } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tp-portfolio-btn .tp-theme-btn { padding: 17px 28px; } } .tp-portfolio-2-space { margin-top: -130px; } .tp-portfolio-2-item a { position: relative; display: inline-block; } .tp-portfolio-2-item a::before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: ""; opacity: 0; visibility: hidden; background-color: #001321; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .tp-portfolio-2-item:hover a::before { opacity: 0.7; visibility: visible; } .tp-portfolio-2-item:hover .tp-portfolio-2-content { opacity: 1; visibility: visible; bottom: 40px; } .tp-portfolio-2-item:hover .tp-portfolio-2-icon { scale: 1; opacity: 1; visibility: visible; } .tp-portfolio-2-content { position: absolute; left: 0; right: 0; bottom: -100px; opacity: 0; visibility: hidden; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .tp-portfolio-2-thumb img { width: 100%; } .tp-portfolio-2-icon { position: absolute; width: 120px; height: 71px; top: 50%; left: 0; right: 0; transform: translateY(-50%); line-height: 71px; text-align: center; margin: auto; color: var(--tp-common-white); scale: 0.5; opacity: 0; visibility: hidden; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .tp-portfolio-2-icon span { font-size: 23px; } .tp-portfolio-2-title { font-size: 24px; font-weight: 700; margin-bottom: 0; display: inline-block; color: var(--tp-common-white); -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .tp-portfolio-2-title:hover { color: var(--tp-theme-1); } .tp-portfolio-2-categories { display: block; color: var(--tp-common-white); } .tp-portfolio-2-active { margin: 0 -195px; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tp-portfolio-2-active { margin: auto; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tp-portfolio-3 { padding-bottom: 60px; } } @media (max-width: 575px) { .tp-portfolio-3-title-box .tp-section-title { font-size: 23px; } } .tp-portfolio-3-thumb { width: 100%; } .tp-portfolio-3 .tp-portfolio-item::before, .tp-portfolio-3 .tp-portfolio-item::after { position: absolute; width: 265px; height: 265px; bottom: -150px; left: -150px; content: ""; border-radius: 50%; opacity: 0; visibility: hidden; background: var(--tp-common-black); -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .tp-portfolio-3 .tp-portfolio-item::after { left: auto; bottom: -180px; right: -170px; background: var(--tp-theme-1); } .tp-portfolio-3 .tp-portfolio-item:hover::before { bottom: -95px; left: -30px; opacity: 1; visibility: visible; } @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-portfolio-3 .tp-portfolio-item:hover::before { bottom: -116px; left: -70px; } } .tp-portfolio-3 .tp-portfolio-item:hover::after { bottom: -130px; right: -60px; opacity: 1; visibility: visible; } @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-portfolio-3 .tp-portfolio-item:hover::after { bottom: -150px; right: -100px; } } @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-portfolio-3 .tp-portfolio-item:hover .tp-portfolio-content { left: 20px; } } .tp-portfolio-3 .tp-portfolio-content { z-index: 2; } @media only screen and (min-width: 576px) and (max-width: 767px) { .tp-portfolio-3 .tp-portfolio-slider-plr { padding-right: 30px; padding-left: 30px; } } @media (max-width: 575px) { .tp-portfolio-3 .tp-portfolio-slider-plr { padding-right: 20px; padding-left: 20px; } } .tp-portfolio-3 .tp-portfolio-title:hover { color: var(--tp-common-white); } .tp-portfolio-inner .tp-portfolio-item { 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: 575px) { .tp-portfolio-details { padding-bottom: 120px; } } .tp-portfolio-details-wrapper { margin-bottom: 85px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tp-portfolio-details-wrapper { margin-right: 0; } } .tp-portfolio-details-wrapper p { line-height: 1.95; margin-bottom: 40px; } .tp-portfolio-details-thumb { margin-bottom: 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: 575px) { .tp-portfolio-details-thumb img { width: 100%; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .tp-portfolio-details-meta { margin-bottom: 15px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tp-portfolio-details-meta-left { margin-bottom: 40px; } } .tp-portfolio-details-meta-item { margin-right: 70px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tp-portfolio-details-meta-item { margin-right: 45px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tp-portfolio-details-meta-item { margin-right: 40px; margin-bottom: 30px; } } .tp-portfolio-details-meta-item p { font-weight: 400; font-size: 16px; line-height: 1.2; margin-bottom: 0; } .tp-portfolio-details-meta-title { font-weight: 700; font-size: 22px; color: var(--tp-common-black); } .tp-portfolio-details-meta-icon { font-size: 48px; margin-right: 22px; color: var(--tp-theme-1); } .tp-portfolio-details-btn a { padding: 14px 55px; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } @media only screen and (min-width: 576px) and (max-width: 767px) { .tp-portfolio-details-btn a { margin-top: 20px; } } .tp-portfolio-details-btn a:hover { background: var(--tp-common-black); } .tp-portfolio-details-title { font-weight: 800; font-size: 36px; margin-bottom: 15px; color: var(--tp-common-black); } @media (max-width: 575px) { .tp-portfolio-details-title { font-size: 26px; } } .tp-portfolio-details-list-title { font-weight: 600; font-size: 28px; margin-bottom: 18px; color: var(--tp-common-black); } .tp-portfolio-details-list ul li { position: relative; list-style: none; padding-left: 17px; margin-bottom: 10px; font-size: 16px; color: var(--tp-common-black); } .tp-portfolio-details-list ul li::before { position: absolute; width: 6px; height: 6px; top: 11px; left: 0; content: ""; background: var(--tp-theme-1); border-radius: 50px; } .tp-portfolio-details-info-box { padding: 40px 35px; border-radius: 15px; background: var(--tp-common-white); box-shadow: 0px 4px 24px rgba(0, 0, 0, 0.08); } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tp-portfolio-details-info-box { padding: 50px 15px; } } @media (max-width: 575px) { .tp-portfolio-details-info-box { padding: 40px 20px; } } .tp-portfolio-details-info-title { font-weight: 700; font-size: 22px; text-transform: capitalize; color: var(--tp-common-black); } .tp-portfolio-details-info-icon span { font-size: 40px; color: var(--tp-theme-1); margin-right: 12px; } .tp-portfolio-details-info-address { border-bottom: 1px solid rgba(21, 19, 19, 0.11); padding-bottom: 18px; margin-bottom: 30px; } .tp-portfolio-details-info-address p { font-weight: 400; font-size: 16px; text-transform: capitalize; color: #696969; line-height: 1.9; } .tp-portfolio-details-info-mail { border-bottom: 1px solid rgba(21, 19, 19, 0.11); padding-bottom: 18px; margin-bottom: 30px; } .tp-portfolio-details-info-mail-content span { margin-right: 10px; } .tp-portfolio-details-info-mail-text p { text-transform: capitalize; color: #696969; margin-bottom: 6px; } .tp-portfolio-details-info-open { margin-bottom: 30px; } .tp-portfolio-details-info-open-icon { width: 60px; height: 74px; text-align: center; line-height: 78px; border-radius: 10px; background-color: var(--tp-theme-1); margin-right: 15px; } .tp-portfolio-details-info-open-icon span { font-size: 30px; color: var(--tp-common-white); } .tp-portfolio-details-info-open-content p { font-size: 16px; line-height: 1.2; text-transform: capitalize; color: #696969; margin-bottom: 5px; } .tp-portfolio-details-info-social a { height: 38px; width: 38px; line-height: 38px; text-align: center; margin-right: 5px; border-radius: 50%; display: inline-block; color: var(--tp-common-black); border: 1px solid var(--tp-border-1); -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .tp-portfolio-details-info-social a { margin-right: 15px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tp-portfolio-details-info-social a { margin-right: 4px; } } @media (max-width: 575px) { .tp-portfolio-details-info-social a { margin-right: 10px; } } .tp-portfolio-details-info-social a:hover { color: var(--tp-common-white); background-color: var(--tp-common-black); border: 1px solid var(--tp-common-black); } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tp-portfolio-details-inner { padding-top: 80px; padding-bottom: 80px; } } /*----------------------------------------*/ /* 7.22 Text-slider css /*----------------------------------------*/ .tp-text-slider-text { font-weight: 600; font-size: 140px; color: rgba(34, 54, 69, 0.059); margin-bottom: 0; } .tp-text-slider-subtitle { position: absolute; left: 0; right: 0; top: 26%; text-align: center; } .tp-text-slider-subtitle h3 { font-weight: 600; font-size: 48px; color: var(--tp-theme-1); letter-spacing: -1.5px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tp-text-slider-subtitle h3 { font-size: 40px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) { .tp-text-slider-subtitle { top: 36%; } } .tp-text-slider-active .swiper-slide { width: auto; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tp-text-slider-1 { padding-bottom: 80px; } } .slide-transtion { -webkit-transition-timing-function: linear; transition-timing-function: linear; } /*----------------------------------------*/ /* 7.16 Faq css /*----------------------------------------*/ .tp-faq-thumb img { width: 100%; border-radius: 15px; } .tp-faq-thumb-icon { position: absolute; left: 40px; bottom: 60px; } .tp-faq-thumb-icon a { position: relative; width: 80px; height: 80px; font-size: 25px; line-height: 80px; text-align: center; display: inline-block; color: var(--tp-common-black); background: var(--tp-common-white); border-radius: 50%; z-index: 2; } .tp-faq-thumb-icon a::before { width: 60%; height: 60%; } .tp-faq-thumb-icon a::after { width: 45%; height: 45%; } .tp-faq-thumb-icon.tp-video-btn { width: 80px; height: 80px; } .tp-faq-shape-1 { position: absolute; bottom: 60px; right: 0; animation: spin-1 3000ms forwards infinite alternate; transform-origin: top right; } .tp-faq-service ul li { position: relative; list-style: none; font-weight: 700; padding-left: 30px; color: var(--tp-common-black); margin-bottom: 10px; } .tp-faq-service ul li span { font-size: 16px; } .tp-faq-service ul li i { position: absolute; color: var(--tp-theme-1); top: 7px; left: 0; } .tp-faq-title-box .tp-section-title { font-weight: 800; margin-right: -8px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tp-faq-title-box .tp-section-title { font-size: 45px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .tp-faq-title-box .tp-section-title { font-size: 40px; } } @media (max-width: 575px) { .tp-faq-title-box .tp-section-title { font-size: 35px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .tp-faq-title-box .tp-section-title { font-size: 32px; } } .tp-faq-shape { position: absolute; right: 0; bottom: 50px; } .tp-faq-content { margin-left: 78px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tp-faq-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: 575px) { .tp-faq-accordion-box { margin-bottom: 30px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .tp-faq-accordion-box .accordion-buttons { font-size: 16px; } } .tp-faq-action .tp-theme-btn { background-color: var(--tp-common-black); } @media (max-width: 575px) { .tp-faq-action .tp-theme-btn { margin-bottom: 20px; } } .tp-faq-action .tp-theme-btn:hover { background-color: var(--tp-theme-1); } .tp-faq-action .tp-header-info-item:hover .tp-header-info-title { color: var(--tp-theme-1); } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tp-faq-1 .tp-slider-1-info-title { color: var(--tp-common-black); } } .tp-faq-2-wrapp { margin-left: -30px; } @media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1600px) and (max-width: 1700px) { .tp-faq-2-wrapp { margin-left: -38px; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tp-faq-2-wrapp { margin: 0; } } @media (max-width: 575px) { .tp-faq-2-title-box .tp-section-title { font-size: 40px; } } .tp-faq-2-call-box { position: absolute; bottom: 50px; left: 50px; background-color: white; box-shadow: 0px 0px 60px 0px rgba(4, 23, 26, 0.06); border-radius: 15px; } .tp-faq-2-bg { position: absolute; top: 0; width: 35%; height: 100%; z-index: -1; background-size: cover; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tp-faq-2-bg { display: none; } } .tp-faq-2-thumb img { border-radius: 15px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tp-faq-2-thumb { text-align: center; margin-bottom: 40px; } } .tp-faq-2-shape { position: absolute; right: 150px; left: 0; top: -30px; width: 24px; z-index: -1; height: 247px; text-align: center; margin: auto; border-radius: 15px; background: var(--tp-grey-1); animation: tptranslateY2 3s infinite alternate; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tp-faq-2-shape { display: none; } } .tp-faq-2 .tp-faq-accordion-box .accordion-icon { background: var(--tp-common-black); } .tp-faq-2 .tp-faq-accordion-box .accordion-buttons:not(.collapsed) { background: var(--tp-common-black); } .tp-faq-inner-banner { padding: 13px 30px 0 100px; border-radius: 15px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .tp-faq-inner-banner { padding: 13px 30px 0 30px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .tp-faq-inner-banner { padding: 13px 30px 13px 30px; } } @media (max-width: 575px) { .tp-faq-inner-banner { padding: 13px 20px 13px 20px; } } .tp-faq-inner-banner-shape { z-index: 1; } .tp-faq-inner-banner-shape-2 { position: absolute; top: 0; z-index: -1; animation: rotate2 15s linear infinite; } .tp-faq-inner-search input { border: 1px solid var(--tp-border-1); border-radius: 15px; } .tp-faq-inner-search input::placeholder { color: var(--tp-text-body); } .tp-faq-inner-search input:focus { border: 1px solid var(--tp-theme-1); } .tp-faq-inner-search-icon { position: absolute; right: 20px; top: 16px; } .tp-faq-inner-search-icon button { font-size: 24px; display: inline-block; line-height: 0; margin-bottom: 0; color: var(--tp-common-black); } .tp-faq-inner-thumb { border-radius: 15px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tp-faq-inner-thumb { margin-bottom: 30px; } } .tp-faq-inner-thumb img { width: 100%; border-radius: 15px; } .tp-faq-inner-thumb-title { font-size: 30px; font-weight: 700; position: absolute; bottom: 15px; left: 30px; color: var(--tp-common-white); } .tp-faq-inner-thumb::before { position: absolute; width: 100%; height: 100%; top: 0; left: 0; opacity: 0.349; border-radius: 15px; content: ""; background-color: #122432; } .tp-faq-inner-accordion { margin-left: 80px; margin-right: 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: 575px) { .tp-faq-inner-accordion { margin: 0; } } .tp-faq-inner-accordion .accordion-buttons { color: var(--tp-common-black); background: none; } .tp-faq-inner-accordion .accordion-items { padding: 0; margin: 0; background: none; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) { .tp-faq-inner-accordion .accordion-items p { font-size: 14px; } } .tp-faq-inner-accordion .accordion-header { box-shadow: none; padding: 0; margin: 0; } .tp-faq-inner-accordion .accordion-buttons { padding: 0; } @media only screen and (min-width: 768px) and (max-width: 991px) { .tp-faq-inner-accordion .accordion-buttons { font-size: 16px; } } @media (max-width: 575px) { .tp-faq-inner-accordion .accordion-buttons { padding: 15px 15px 0 0; } } .tp-faq-inner-accordion .accordion-buttons:not(.collapsed) { color: var(--tp-common-black); background: none; } .tp-faq-inner-accordion .accordion-buttons:not(.collapsed) .accordion-icon { background: var(--tp-theme-1); } .tp-faq-inner-accordion .accordion-buttons:not(.collapsed) .accordion-icon::before { background: var(--tp-common-white); } .tp-faq-inner-accordion .accordion-buttons:not(.collapsed) .accordion-icon::after { background: var(--tp-common-white); } .tp-faq-inner-accordion .accordion-body { background: none; box-shadow: none; padding: 15px 0 0 0; margin: 0; } .tp-faq-inner-accordion .accordion-icon { left: auto; right: 30px; background: var(--tp-common-black); } @media (max-width: 575px) { .tp-faq-inner-accordion .accordion-icon { right: 0; } } .tp-faq-inner-accordion .accordion-icon::before { right: 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: 575px) { .tp-faq-inner-title-box .tp-section-title { font-size: 35px; margin-bottom: 0; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tp-faq-inner-title-box .tp-section-subtitle { margin-bottom: 0; } } .tp-call-box { padding: 20px; border-radius: 15px; background: var(--tp-common-white); } .tp-call-box:hover .tp-call-icon { animation: icon-bounce 0.8s ease-out infinite; } .tp-call-icon span { width: 60px; height: 60px; font-size: 20px; line-height: 68px; text-align: center; display: inline-block; color: var(--tp-common-white); background: var(--tp-common-black); border-radius: 50%; margin-right: 20px; margin-bottom: 0; } .tp-call-text { font-size: 16px; } .tp-call-number { font-size: 18px; font-weight: 700; color: var(--tp-common-black); } /*----------------------------------------*/ /* 7.11 Choose css /*----------------------------------------*/ @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tp-choose-1 { padding-top: 80px; padding-bottom: 80px; } } .tp-choose-bg-thumb { position: absolute; top: 0; left: 0; width: 50%; height: 100%; background-repeat: no-repeat; } @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-choose-bg-thumb { width: 45%; } } .tp-choose-video-action { position: absolute; top: 40px; right: 40px; } .tp-choose-video-action a { font-size: 24px; width: 80px; height: 80px; line-height: 80px; text-align: center; border-radius: 50%; display: inline-block; color: var(--tp-common-black); background-color: var(--tp-common-white); } .tp-choose-video-action.tp-video-btn a { color: var(--tp-common-black); } .tp-choose-line-shape { width: 16px; background: var(--tp-common-black); display: inline-block; height: 154px; position: absolute; top: 90px; right: -45px; border-radius: 30px; } .tp-choose-shape { position: absolute; bottom: 0; right: 0; } .tp-choose-shape-5 { position: absolute; top: 15%; right: 0; animation: tptranslateY2 3s infinite alternate; } .tp-choose-wrapp { margin-top: 20px; margin-left: 47px; } @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) { .tp-choose-wrapp { 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: 575px) { .tp-choose-wrapp { margin-left: 0; } } .tp-choose-title-box .tp-section-title { font-weight: 800; } @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) { .tp-choose-title-box .tp-section-title { font-size: 45px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .tp-choose-title-box .tp-section-title { font-size: 40px; } } @media (max-width: 575px) { .tp-choose-title-box .tp-section-title { font-size: 24px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .tp-choose-title-box .tp-section-title { font-size: 35px; } } @media (max-width: 575px) { .tp-choose-title-box p br { display: none; } } .tp-choose-progress .tp-progress-canva { position: relative; margin-right: 30px; } .tp-choose-progress .tp-progress-canva canvas { position: relative; z-index: 2; } .tp-choose-progress .tp-progress-canva input { color: #fff !important; height: 120px !important; width: 120px !important; border: 15px solid #182936 !important; border-radius: 50%; right: 0; bottom: 8px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tp-choose-progress .tp-progress-item { margin-bottom: 30px; } } .tp-choose-list { margin-right: 115px; } @media only screen and (min-width: 576px) and (max-width: 767px) { .tp-choose-list { margin-right: 70px; } } .tp-choose-list:last-child { margin-right: 0; } .tp-choose-list ul li { position: relative; font-size: 16px; font-weight: 600; list-style: none; color: var(--tp-common-white); padding-left: 25px; margin-bottom: 10px; } .tp-choose-list ul li i { position: absolute; left: 0; top: 7px; } .tp-choose-info { position: absolute; top: 32%; left: -87%; padding: 50px 60px; border-radius: 25px; background: var(--tp-common-white); } @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) { .tp-choose-info { left: -82%; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .tp-choose-info { left: -95%; } } .tp-choose-info-title { font-weight: 700; font-size: 24px; } .tp-choose-info-title span { font-style: italic; color: var(--tp-theme-1); text-decoration: underline; } .tp-choose-info-avtr { margin-right: 20px; } .tp-choose-info-avtr img { width: 54px; height: 54px; border-radius: 50%; } .tp-choose-info-avtr-title { font-size: 22px; font-weight: 700; margin-bottom: 0; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tp-choose-style-2 .tp-choose-wrapp { margin-left: 0; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tp-choose-style-2 .tp-choose-wrapp p br { display: none; } } .tp-choose-style-2 .tp-choose-bg-thumb { top: 16%; width: 775px; height: 525px; border-radius: 0 15px 15px 0; } @media only screen and (min-width: 1600px) and (max-width: 1700px) { .tp-choose-style-2 .tp-choose-bg-thumb { width: 680px; } } @media only screen and (min-width: 1400px) and (max-width: 1599px) { .tp-choose-style-2 .tp-choose-bg-thumb { width: 580px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .tp-choose-style-2 .tp-choose-bg-thumb { width: 500px; } } .tp-choose-style-2 .tp-choose-info { top: auto; bottom: 80px; left: -65%; padding: 37px 72px 22px 40px; background-color: white; box-shadow: 0px 0px 60px 0px rgba(22, 17, 85, 0.08); } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .tp-choose-style-2 .tp-choose-info { left: -66%; } } .tp-choose-style-2 .tp-choose-info p { line-height: 1.5; } .tp-choose-style-2 .tp-choose-info-icon { position: absolute; top: -30px; left: -30px; width: 62px; height: 62px; font-size: 25px; line-height: 62px; text-align: center; border-radius: 50%; color: var(--tp-common-white); background: var(--tp-theme-1); } .tp-choose-style-2 .tp-choose-info-icon i { margin-bottom: 0; } .tp-choose-style-2 .tp-choose-featured-item { border-radius: 15px; padding: 15px 60px 15px 20px; border: 1px solid var(--tp-border-1); -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .tp-choose-style-2 .tp-choose-featured-item:not(:last-child) { margin-bottom: 20px; } .tp-choose-style-2 .tp-choose-featured-item:hover { background-color: white; border: 1px solid var(--tp-common-white); box-shadow: 0px 0px 40px 0px rgba(25, 11, 59, 0.08); } .tp-choose-style-2 .tp-choose-featured-item:hover .tp-choose-featured-icon span { color: var(--tp-common-white); background: var(--tp-theme-1); } .tp-choose-style-2 .tp-choose-featured-title { font-weight: 700; font-size: 20px; display: inline-block; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tp-choose-style-2 .tp-choose-featured-title { margin-bottom: 0; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tp-choose-style-2 .tp-choose-featured-title br { display: none; } } .tp-choose-style-2 .tp-choose-featured-icon span { width: 60px; height: 60px; font-size: 22px; margin-bottom: 0; line-height: 60px; border-radius: 50%; text-align: center; margin-right: 15px; display: inline-block; color: var(--tp-theme-1); background: var(--tp-common-white); -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .tp-choose-shape-1 { position: absolute; bottom: 5px; z-index: -1; left: -46px; right: 0; text-align: center; margin: auto; } .tp-choose-shape-2 { position: absolute; top: 0; transform-origin: top right; animation: spin-1 3000ms forwards infinite alternate; } .tp-choose-shape-3 { position: absolute; top: 100px; right: 45px; z-index: -1; } .tp-choose-shape-4 { position: absolute; top: 100px; left: 0; } .tp-choose-shape-box .tp-about-user-box { left: auto; right: -50px; animation: moving 5s linear infinite; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .tp-choose-3-title-box .tp-section-title { font-size: 45px; } } @media (max-width: 575px) { .tp-choose-3-title-box .tp-section-title { font-size: 24px; } } .tp-choose-3-play a { position: relative; width: 100px; height: 100px; border-radius: 50%; text-align: center; display: inline-block; border: 10px solid var(--tp-common-white); background-color: white; box-shadow: 0px 0px 60px 0px rgba(30, 13, 54, 0.12); } .tp-choose-3-play a span { position: absolute; top: 0; left: 0; right: 0; line-height: 80px; display: block; text-align: center; font-size: 18px; color: var(--tp-common-white); } .tp-choose-3 .tp-choose-thumb-box { left: -120px; } @media only screen and (min-width: 1400px) and (max-width: 1599px) { .tp-choose-3 .tp-choose-thumb-box { left: -45px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tp-choose-3 .tp-choose-thumb-box { left: 0; transform: scale(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: 575px) { .tp-choose-3 .tp-choose-thumb-box { left: 0; right: 0; text-align: center; margin: auto; margin-bottom: 40px; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 575px) { .tp-choose-3 .tp-choose-shape-1 { left: -33px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .tp-choose-3 .tp-choose-shape-1 { left: -50px; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) { .tp-choose-3 .tp-choose-shape-2 { left: 18%; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tp-choose-3 .tp-choose-shape-2 { left: 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) { .tp-choose-3 .tp-choose-shape-3 { left: 0; right: -24%; } } @media only screen and (min-width: 992px) 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-choose-3 .tp-choose-shape-4 { right: 55%; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .tp-choose-3 .tp-choose-shape-4 { right: auto; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tp-choose-3 .tp-choose-shape-box .tp-about-user-box { right: 18%; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .tp-choose-3 .tp-choose-shape-box .tp-about-user-box { right: 8%; } } .tp-choose-3 .tp-choose-list ul li { color: var(--tp-common-black); margin-bottom: 0; } .tp-choose-3 .tp-choose-list ul li span { margin-bottom: -10px; margin-right: 6px; } .tp-choose-3 .tp-choose-list ul li span img { margin-bottom: 4px; } .tp-choose-3 .tp-choose-list ul li p { font-weight: 500; margin-bottom: 7px; display: inline-block; color: var(--tp-common-black); } .tp-choose-3-notes-icon { margin-right: 30px; } @media (max-width: 575px) { .tp-choose-3-notes-icon { margin-bottom: 20px; } } .tp-choose-3-notes-icon img { border-radius: 15px; } .tp-choose-3-notes-title { font-size: 24px; font-weight: 700; color: var(--tp-common-black); } @media only screen and (min-width: 576px) and (max-width: 767px) { .tp-choose-3-notes-title { font-size: 19px; } } @media (max-width: 575px) { .tp-choose-3-notes-title { font-size: 20px; } } .tp-choose-3-notes-number { font-size: 36px; font-weight: 700; color: var(--tp-theme-1); } .tp-choose-3-experience-box { padding: 14px 40px; border-left: 2px solid var(--tp-theme-1); } @media (max-width: 575px) { .tp-choose-3-experience-box { padding: 14px 26px; } } .tp-choose-3-experience-icon { font-size: 44px; color: var(--tp-theme-1); margin-right: 30px; } @media (max-width: 575px) { .tp-choose-3-experience-icon { margin-bottom: 10px; } } .tp-choose-3-experience-text { font-size: 18px; font-weight: 600; color: var(--tp-common-black); } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tp-choose-3-experience-text br { display: none; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tp-choose-3 .tp-choose-list ul li { padding-left: 0; } } @media only screen and (min-width: 1600px) and (max-width: 1700px) { .tp-choose-4-title-box .tp-section-title { font-size: 45px; } } @media (max-width: 575px) { .tp-choose-4-title-box .tp-section-title { font-size: 28px; } } @media only screen and (min-width: 1600px) and (max-width: 1700px) { .tp-choose-4 .tp-about-user-box { left: -80px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .tp-choose-4 .tp-about-user-box { left: -80px; bottom: 50px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) { .tp-choose-4 .tp-about-user-box { left: 40px; } } .tp-choose-4 .tp-service-hurry { background-color: var(--tp-common-black); } .tp-choose-4-num-count { margin-right: 30px; } .tp-choose-4-num-count::before { width: 60px; height: 60px; font-size: 24px; line-height: 60px; color: #223645; font-weight: 900; text-align: center; display: inline-block; counter-increment: count; content: "0" counter(count); background: var(--tp-grey-1); border-radius: 50%; opacity: 1; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .tp-choose-4-thumb { position: absolute; top: 0; right: 0; } .tp-choose-4-thumb-shape { position: absolute; right: 0; bottom: 0; } @media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px) { .tp-choose-4-thumb { width: 45%; } } @media only screen and (min-width: 992px) 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-choose-4-thumb { position: relative; text-align: center; padding-bottom: 50px; } } .tp-choose-4-fea-item { position: relative; display: inline-block; margin-bottom: 15px; } .tp-choose-4-fea-item::after { position: absolute; width: 1px; height: 164px; top: 50%; left: 30px; right: 0; content: ""; transform: translateY(-50%); background: var(--tp-border-1); z-index: -1; } .tp-choose-4-fea-item:nth-child(2n+1)::after { display: none; } .tp-choose-4-fea-item:hover .tp-choose-4-num-count::before { color: var(--tp-common-white); background-color: var(--tp-theme-1); } .tp-choose-4-fea-title { font-size: 22px; font-weight: 700; color: var(--tp-common-black); } .tp-choose-4-fea-text p { line-height: 1.5; } @media (max-width: 575px) { .tp-choose-4-fea-text p br { display: none; } } .tp-choose-5-plr { padding-top: 120px; padding-bottom: 210px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tp-choose-5-plr { padding-top: 80px; } } .tp-choose-5-thumb img { border-radius: 15px; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tp-choose-5-thumb img { width: 100%; } } .tp-choose-5-thumb-box { margin-left: -190px; } @media only screen and (min-width: 1600px) and (max-width: 1700px) { .tp-choose-5-thumb-box { margin-left: -100px; } } @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-choose-5-thumb-box { margin-left: 0; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .tp-choose-5-thumb-box { margin-bottom: 40px; margin-left: 0; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tp-choose-5-thumb-box { margin-bottom: 0; margin-left: 0; } } .tp-choose-5-thumb-sm { position: absolute; bottom: -45%; right: 50px; } .tp-choose-5-thumb-sm img { border-radius: 15px; } @media only screen and (min-width: 1400px) and (max-width: 1599px) { .tp-choose-5-thumb-sm { right: -50px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tp-choose-5-thumb-sm { bottom: -72%; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tp-choose-5-thumb-sm { display: none; } } .tp-choose-5-thumb-shape { position: absolute; left: 28%; bottom: -28%; animation: rotate2 10s linear infinite; } @media only screen and (min-width: 1600px) and (max-width: 1700px), only screen and (min-width: 1400px) and (max-width: 1599px) { .tp-choose-5-thumb-shape { left: 15%; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .tp-choose-5-thumb-shape { left: 4%; } } .tp-choose-5-shape { position: absolute; right: 14%; bottom: 3%; animation: spin-1 3000ms forwards infinite alternate; transform-origin: bottom right; } .tp-choose-5-shape-bg { position: absolute; top: 0; left: 0; height: 100%; } .tp-choose-5-shape img { width: 100%; height: 100%; } .tp-choose-5 .tp-choose-wrapp { margin-left: 0; } @media only screen and (min-width: 1400px) and (max-width: 1599px) { .tp-choose-5 .tp-choose-wrapp { margin-left: 55px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .tp-choose-5 .tp-choose-wrapp { margin-left: 30px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tp-choose-5 .tp-choose-wrapp { margin-left: 0px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tp-choose-5 .tp-choose-wrapp { margin-top: 50px; margin-bottom: 30px; } } .tp-choose-5 .tp-choose-featured-item { border: 0; padding: 0; margin-bottom: 30px; } .tp-choose-5 .tp-choose-featured-item:hover { border: 0; background: none; box-shadow: none; } .tp-choose-5 .tp-choose-featured-item:hover .tp-choose-featured-icon span { color: var(--tp-common-white); background: var(--tp-common-black); } .tp-choose-5 .tp-choose-featured-icon { margin-right: 8px; } .tp-choose-5 .tp-choose-featured-icon span { font-size: 36px; width: 72px; height: 72px; line-height: 78px; color: var(--tp-common-black); } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tp-choose-5 .tp-choose-featured-title { font-size: 16px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tp-choose-5 .tp-choose-title-box .tp-section-title { font-size: 40px; } } @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: 575px) { .tp-choose-5 .tp-choose-title-box p br { display: none; } } .tp-choose-5-action .tp-theme-btn { font-size: 16px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .tp-choose-5-action { margin-bottom: 40px; } } /*----------------------------------------*/ /* 7.9 Testimonial css /*----------------------------------------*/ .tp-testimonial-item { position: relative; border-radius: 15px; overflow: hidden; padding: 40px; background-color: white; box-shadow: 0px 0px 60px 0px rgba(27, 24, 61, 0.06); } @media (max-width: 575px) { .tp-testimonial-item { padding: 20px; } } .tp-testimonial-item:hover .tp-testimonial-shape-1 span { color: #e12454; } .tp-testimonial-item:hover .tp-testimonial-avater-icon span { color: var(--tp-common-white); background: var(--tp-theme-1); } .tp-testimonial-shape-1 { position: absolute; top: 0; left: 0; } .tp-testimonial-shape-1 span { color: #ffc2d1; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .tp-testimonial-shape-1 span svg { border-radius: 15px 0 0 0; } .tp-testimonial-shape-2 { position: absolute; bottom: 0; left: 16px; } .tp-testimonial-shape-2 span { color: #fae8ed; } @media (max-width: 575px) { .tp-testimonial-avater { margin-bottom: 30px; } } .tp-testimonial-avater-box { flex: 0 0 auto; margin-right: 30px; } .tp-testimonial-avater img { width: 130px; height: 130px; border-radius: 50%; } .tp-testimonial-avater-icon { position: absolute; top: 90px; } .tp-testimonial-avater-icon span { width: 50px; height: 50px; font-size: 20px; line-height: 50px; text-align: center; display: inline-block; color: var(--tp-common-black); background: var(--tp-common-white); border-radius: 50%; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .tp-testimonial-review span { color: var(--tp-theme-1); } .tp-testimonial-title { font-weight: 700; font-size: 24px; margin-right: 16px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .tp-testimonial-title-box .tp-section-title { font-size: 45px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tp-testimonial-title-box .tp-section-title { font-size: 40px; } } @media (max-width: 575px) { .tp-testimonial-title-box .tp-section-title { font-size: 24px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .tp-testimonial-title-box .tp-section-title { font-size: 35px; } } .tp-testimonial-design { color: var(--tp-theme-1); } .tp-testimonial-active { padding: 50px 0; } .tp-testimonial-inner .tp-testimonial-item { margin-bottom: 30px; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) { .tp-testimonial-inner .tp-testimonial-item { padding: 30px; } } .tp-testimonial-inner .tp-testimonial-avater-box { margin-bottom: 30px; } @media only screen and (min-width: 576px) and (max-width: 767px) { .tp-testimonial-inner .tp-testimonial-content { display: flex; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .tp-testimonial-inner .tp-testimonial-title { font-size: 18px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tp-testimonial-inner .tp-testimonial-title { font-size: 22px; } } @media (max-width: 575px) { .tp-testimonial-inner .tp-testimonial-title { font-size: 20px; } } .tp-testi-3-plr { padding-top: 225px; padding-bottom: 230px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tp-testi-3-plr { padding-top: 120px; } } .tp-testi-3-shape-1 { position: absolute; top: 0; } @media (max-width: 575px) { .tp-testi-3-shape-1 { top: -1px; } } .tp-testi-3-shape-2 { position: absolute; left: 0; } .tp-testi-3-shape-3 { position: absolute; right: 3%; top: 21%; animation: rotate2 15s linear infinite; } .tp-testi-3-satisfaction-number { font-size: 50px; font-weight: 700; margin-right: 25px; padding-right: 30px; color: var(--tp-common-white); border-right: 2px solid var(--tp-common-white); margin-bottom: 0; } .tp-testi-3-satisfaction-text p { line-height: 1.6; color: var(--tp-common-white); margin-bottom: 0; } .tp-testi-3-wrapp { width: 599px; margin-left: 105px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .tp-testi-3-wrapp { margin-left: 100px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tp-testi-3-wrapp { 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: 575px) { .tp-testi-3-wrapp { width: 100%; 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: 575px) { .tp-testi-3-content { margin-bottom: 40px; } } .tp-testi-3-item { background: var(--tp-common-white); border-radius: 15px; } .tp-testi-3-thumb { margin-right: 50px; flex: 0 0 auto; } @media only screen and (min-width: 576px) and (max-width: 767px) { .tp-testi-3-thumb { margin-right: 30px; } } @media (max-width: 575px) { .tp-testi-3-thumb { margin-right: 0; } } .tp-testi-3-thumb img { width: 230px; height: 325px; border-radius: 15px 0 0 15px; } @media (max-width: 575px) { .tp-testi-3-thumb img { width: 100%; border-radius: 15px 15px 0 0; } } .tp-testi-3-box-content { padding: 0 50px 0 0; } @media only screen and (min-width: 576px) and (max-width: 767px) { .tp-testi-3-box-content { padding: 0 20px 0 0; } } @media (max-width: 575px) { .tp-testi-3-box-content { padding: 30px; } } .tp-testi-3-review { margin-bottom: 15px; } .tp-testi-3-review i { color: var(--tp-theme-1); } @media only screen and (min-width: 576px) and (max-width: 767px) { .tp-testi-3-text p br { display: none; } } .tp-testi-3-title { font-size: 20px; font-weight: 700; color: var(--tp-common-black); margin-bottom: 0; } .tp-testi-3-title-box .tp-section-title { font-weight: 700; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .tp-testi-3-title-box .tp-section-title { font-size: 45px; } } @media only screen and (min-width: 992px) and (max-width: 1199px), (max-width: 575px) { .tp-testi-3-title-box .tp-section-title { font-size: 40px; } } .tp-testi-3-title-box .tp-section-subtitle { color: #9ca6ae; } .tp-testi-3-title-box p { font-weight: 500; color: #9ca6ae; } .tp-testi-3-designation { font-size: 16px; } .tp-testi-3-slide-dots { position: absolute; right: -65px; top: 50%; transform: translateY(-50%); } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .tp-testi-3-slide-dots { 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) { .tp-testi-3-slide-dots { right: 0; left: 0; top: auto; bottom: -18%; text-align: center; } } .tp-testi-3-slide-dots .tp-pagination-dots span { width: 14px; height: 14px; display: block; background: var(--tp-grey-1); margin: 10px 0; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s 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) { .tp-testi-3-slide-dots .tp-pagination-dots span { display: inline-block; margin: 0 8px; } } .tp-testi-3-slide-dots .tp-pagination-dots span.swiper-pagination-bullet-active { transform: scale(1.5); background: none; border-radius: 50%; border: 2px solid var(--tp-common-white); } .tp-testi-4-bg-shape { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-size: unset; background-position: center; background-repeat: no-repeat; } .tp-testi-4-shape-1 { position: absolute; bottom: 100px; animation: tptranslateY2 3s infinite alternate; } .tp-testi-4-shape-2 { position: absolute; top: 100px; right: 0; animation: spin-1 3000ms forwards infinite alternate; transform-origin: bottom right; } @media only screen and (min-width: 992px) 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-testi-4-shape-2 { top: 45px; } } .tp-testi-4-title-box .tp-section-title { margin-bottom: 0; } @media (max-width: 575px) { .tp-testi-4-title-box .tp-section-title { font-size: 30px; } } .tp-testi-4-thumb { flex: 0 0 auto; margin-right: 75px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .tp-testi-4-thumb { margin-right: 45px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tp-testi-4-thumb { margin-right: 0; margin-bottom: 30px; } } .tp-testi-4-thumb > img { width: 230px; height: 230px; border-radius: 50%; } .tp-testi-4-thumb-icon { position: absolute; top: 50%; left: -30px; transform: translateY(-50%); } .tp-testi-4-thumb-icon span { width: 80px; height: 80px; line-height: 80px; text-align: center; display: inline-block; border-radius: 50%; background: var(--tp-theme-1); } .tp-testi-4-logo { margin-bottom: 30px; } .tp-testi-4-text-box p { font-size: 18px; color: #7a8a9e; line-height: 1.5; margin-right: -63px; } .tp-testi-4-avtr-title { font-size: 24px; font-weight: 700; margin-right: 12px; display: inline-block; color: var(--tp-common-black); } .tp-testi-4-avtr-design { position: relative; font-size: 16px; margin-bottom: 0; padding-left: 20px; display: inline-block; color: var(--tp-theme-1); } .tp-testi-4-avtr-design::before { position: absolute; width: 10px; height: 1px; bottom: 8px; left: 0; content: ""; background: var(--tp-common-black); } .tp-testi-4-content { position: relative; padding: 40px 155px 55px 155px; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) { .tp-testi-4-content { padding: 75px 100px 55px 155px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tp-testi-4-content { padding: 75px 30px 55px 30px; } } .tp-testi-4-arrow-box { position: absolute; top: 50%; width: 100%; z-index: 2; 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: 575px) { .tp-testi-4-arrow-box { top: 100%; } } .tp-testi-4-arrow-box button { font-size: 24px; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .tp-testi-4-arrow-box button:hover { color: var(--tp-common-black); } .tp-testi-4-arrow-box button.prev { position: absolute; right: auto; left: -10%; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tp-testi-4-arrow-box button.prev { left: 0; } } .tp-testi-4-arrow-box button.next { position: absolute; left: auto; right: -10%; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tp-testi-4-arrow-box button.next { right: 0; } } @media (max-width: 575px) { .tp-testi-5 { padding-top: 0; } } .tp-testi-5-shape { position: absolute; right: 120px; bottom: 75px; animation: moving 3s infinite alternate; } @media only screen and (min-width: 1400px) and (max-width: 1599px) { .tp-testi-5-shape { right: 30px; } } .tp-testi-5-item { width: 470px !important; height: 180px !important; padding: 30px; border-radius: 15px; display: inline-flex !important; background-color: white; box-shadow: 0px 0px 40px 0px rgba(33, 38, 59, 0.08); margin-bottom: 20px; } @media (max-width: 575px) { .tp-testi-5-item { width: 325px !important; height: 340px !important; } } .tp-testi-5-item.slick-slide { float: none; } .tp-testi-5-item:nth-child(2n+2) { margin-right: 80px; } @media (max-width: 575px) { .tp-testi-5-item:nth-child(2n+2) { margin-right: 0; } } @media (max-width: 575px) { .tp-testi-5-item { width: auto; height: auto; margin-bottom: 20px; } } .tp-testi-5-title-box p { margin-right: 85px; } @media only screen and (min-width: 576px) and (max-width: 767px) { .tp-testi-5-title-box .tp-section-title { font-size: 50px; } } @media (max-width: 575px) { .tp-testi-5-title-box .tp-section-title { font-size: 35px; } } .tp-testi-5-content { text-align: left; } .tp-testi-5-avtr { margin-right: 20px; flex: 0 0 auto; } @media (max-width: 575px) { .tp-testi-5-avtr { margin-bottom: 20px; } } .tp-testi-5-avtr img { width: 120px; height: 120px; border-radius: 50%; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tp-testi-5-action { margin-bottom: 50px; } } /*----------------------------------------*/ /* 7.12 Cta css /*----------------------------------------*/ .tp-cta-plr { padding-top: 120px; padding-bottom: 220px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .tp-cta-plr { padding-bottom: 280px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .tp-cta-plr { padding-bottom: 270px; } } @media (max-width: 575px) { .tp-cta-plr { padding-top: 80px; padding-bottom: 250px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .tp-cta-title-box .tp-section-title { font-size: 40px; } } @media (max-width: 575px) { .tp-cta-title-box .tp-section-title { font-size: 35px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .tp-cta-title-box .tp-section-title { font-size: 30px; } } .tp-cta-title-box p { font-weight: 500; } @media only screen and (min-width: 576px) and (max-width: 767px) { .tp-cta-title-box p { font-size: 20px; } } .tp-cta-shape-1 { position: absolute; left: 12%; bottom: 30px; animation: spin-1 3000ms forwards infinite alternate; transform-origin: bottom left; } @media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px) { .tp-cta-shape-1 { bottom: 100px; } } .tp-cta-shape-2 { position: absolute; right: 4%; bottom: 30px; } @media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px) { .tp-cta-shape-2 { bottom: 100px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .tp-cta-shape-2 { right: 0; } } .tp-cta-bg { background-size: cover; background-position: center; background-repeat: no-repeat; } .tp-cta-aciton-1 { margin-right: 20px; } @media (max-width: 575px) { .tp-cta-aciton-1 { margin-bottom: 20px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .tp-cta-aciton-1 { margin-bottom: 0; } } .tp-cta-aciton-2 a { background-color: var(--tp-common-black); } .tp-cta-aciton-2 a:hover { background-color: var(--tp-theme-1); } .tp-cta-1 .tp-cta-aciton-1 a:hover { color: var(--tp-common-black); background-color: var(--tp-common-white); } .tp-cta-1 .tp-cta-aciton-2 a:hover { color: var(--tp-common-black); background-color: var(--tp-common-white); } .tp-cta-2-avater { margin-right: 15px; flex: 0 0 auto; } .tp-cta-2-avater img { width: 84px; height: 84px; border-radius: 50%; } .tp-cta-2-avater-title { font-size: 16px; margin-bottom: 0; } .tp-cta-2-avater-title span { font-weight: 700; color: var(--tp-theme-1); } .tp-cta-2-info-text p { margin: 0; padding: 0; font-weight: 500; color: #4f4f4f; } @media (max-width: 575px) { .tp-cta-2-info-text { margin-top: 30px; } } .tp-cta-2-wrapp { border-bottom: 1px solid var(--tp-border-1); padding: 0 30px 30px 30px; } @media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 575px) { .tp-cta-2-wrapp { padding: 0 0 30px 0; } } .tp-cta-3-style { margin-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: 575px) { .tp-cta-3-item { margin-bottom: 20px; } } .tp-cta-3-shape { position: absolute; top: 0; right: 0; } .tp-cta-3-icon { position: relative; margin-right: 25px; } .tp-cta-3-icon::before { position: absolute; width: 90px; height: 180px; bottom: -19px; content: ""; background: #2b404f; border-radius: 0 0 50px 50px; left: 0; rotate: 30deg; } .tp-cta-3-icon span { position: relative; font-size: 48px; color: var(--tp-theme-1); margin-bottom: 0; } .tp-cta-3-call { font-size: 24px; font-weight: 700; color: var(--tp-common-white); -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } @media (max-width: 575px) { .tp-cta-3-call { font-size: 18px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .tp-cta-3-call { font-size: 22px; } } .tp-cta-3-call:hover { color: var(--tp-theme-1); } .tp-cta-3-plr { padding-top: 60px; padding-bottom: 60px; border-radius: 15px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tp-cta-3-plr { padding-top: 50px; padding-bottom: 43px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tp-cta-3-info { margin-bottom: 20px; } } .tp-cta-3-info::after { position: absolute; width: 1px; height: 80px; right: -80px; bottom: -10px; content: ""; background: var(--tp-common-white); } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tp-cta-3-info::after { right: -40px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) { .tp-cta-3-info::after { display: none; } } .tp-cta-3-info p { font-size: 24px; font-weight: 700; line-height: 1.3; margin-bottom: 0; color: var(--tp-common-white); } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tp-cta-3-info p { font-size: 22px; } } @media (max-width: 575px) { .tp-cta-3-info p { font-size: 18px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .tp-cta-3-info p { font-size: 22px; } } .tp-cta-3-action .tp-theme-btn:hover { color: var(--tp-common-black); background-color: var(--tp-common-white); } .tp-cta-4 { padding-top: 130px; padding-bottom: 283px; } @media only screen and (min-width: 576px) and (max-width: 767px) { .tp-cta-4 { padding-top: 110px; padding-bottom: 180px; } } @media (max-width: 575px) { .tp-cta-4 { padding-top: 110px; padding-bottom: 150px; } } .tp-cta-4-overlay::before { position: absolute; width: 100%; height: 100%; top: 0; left: 0; content: ""; background-color: #223645; opacity: 0.8; } .tp-cta-4-shape { position: absolute; right: 0; top: 10%; animation: moving 5s linear infinite; transform: translateY(-10%); } .tp-cta-4-shape-2 { position: absolute; bottom: 0; } .tp-cta-4-title-box .tp-section-title { font-weight: 700; font-size: 60px; } @media (max-width: 575px) { .tp-cta-4-title-box .tp-section-title { font-size: 28px; } } .tp-cta-4-title-box .tp-section-subtitle { color: #9ca6ae; } @media (max-width: 575px) { .tp-cta-4-action-box a { margin-bottom: 20px; } } .tp-cta-4 .tp-header-info-item:hover .tp-header-info-text span { color: inherit; } .tp-cta-4 .tp-header-info-item:hover .tp-header-info-title { color: var(--tp-theme-1); } .tp-cta-4 .tp-header-info-title { color: var(--tp-common-white); } .tp-cta-4 .tp-header-info-text span { color: var(--tp-text-body-2); } .tp-cta-4 .tp-header-info-icon { width: 60px; height: 60px; line-height: 65px; color: var(--tp-theme-1); background: none; border: 1px solid var(--tp-border-1); } .tp-cta-5 .tp-cta-3-icon::before { background: #ea3462; } .tp-cta-5 .tp-cta-3-icon span { color: var(--tp-common-white); } .tp-cta-5 .tp-cta-3-call:hover { 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: 575px) { .tp-cta-6 .tp-section-title br { display: none; } } .tp-cta-6-overlay::before { position: absolute; width: 100%; height: 100%; top: 0; left: 0; content: ""; opacity: 0.6; background-color: #000d16; } .tp-cta-6-wrapp { padding: 138px 30px; margin: 0 60px; border: 1px solid var(--tp-border-1); } @media only screen and (min-width: 576px) and (max-width: 767px) { .tp-cta-6-wrapp { padding: 100px 30px; margin: 0 30px; } } @media (max-width: 575px) { .tp-cta-6-wrapp { padding: 30px 10px; margin: 0 0; } } @media (max-width: 575px) { .tp-cta-6-content .tp-section-title { font-size: 34px; } } .tp-cta-6-bg { background-position: center; background-size: cover; background-repeat: no-repeat; } .tp-cta-6-action .tp-theme-btn { font-size: 16px; } .tp-cta-inner .tp-cta-3-wrapp { border-radius: 15px; background-color: white; box-shadow: 0px 0px 60px 0px rgba(27, 31, 46, 0.08); } .tp-cta-inner .tp-cta-3-icon::before { display: none; } .tp-cta-inner .tp-cta-3-icon span { color: var(--tp-common-black); } .tp-cta-inner .tp-cta-3-action .tp-theme-btn:hover { color: var(--tp-common-white); background-color: var(--tp-common-black); } /*----------------------------------------*/ /* 7.5 funfact css /*----------------------------------------*/ .tp-funfact-wrapp { position: relative; border-radius: 25px; margin-top: -90px; background-color: white; box-shadow: 0px 0px 60px 0px rgba(29, 24, 51, 0.08); } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tp-funfact-wrapp { top: 60px; margin-top: -250px; } } .tp-funfact-wrapp .row [class*=col-]:last-child .tp-funfact-item { border-right: 0; } @media (max-width: 575px) { .tp-funfact-wrapp .row [class*=col-]:last-child .tp-funfact-item { border: 0; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) { .tp-funfact-wrapp .row [class*=col-]:nth-child(2n+2) .tp-funfact-item { border-right: 0; } } @media (max-width: 575px) { .tp-funfact-wrapp .row [class*=col-]:nth-child(2n+2) .tp-funfact-item { border: 0; } } .tp-funfact-item { padding: 40px; text-align: center; border-right: 1px solid var(--tp-border-1); } @media (max-width: 575px) { .tp-funfact-item { border: 0; } } .tp-funfact-item p { font-weight: 500; color: #000; margin: 0; } .tp-funfact-title { font-size: 50px; font-weight: 700; line-height: 1; color: var(--tp-theme-1); margin: 0; } .tp-funfact-title .purecounter { color: var(--tp-common-black); } .tp-funfact-title .black { color: var(--tp-common-black); } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tp-funfact-2 { padding-top: 0; } } .tp-funfact-2-shape { position: absolute; right: -50px; bottom: 50px; z-index: -1; animation: spin-1 3000ms forwards infinite alternate; transform-origin: bottom left; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) { .tp-funfact-2-shape { right: 0; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .tp-funfact-2 .tp-funfact-wrapp { margin: 0; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tp-funfact-2 .tp-funfact-wrapp { top: 0; margin: 0; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .tp-funfact-2 .tp-funfact-wrapp .row [class*=col-]:nth-child(2n+2) .tp-funfact-item { margin-bottom: 0; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .tp-funfact-2 .tp-funfact-wrapp .row [class*=col-]:nth-child(2n+2) .tp-funfact-item { border-right: 0; } } .tp-funfact-2 .tp-funfact-wrapp .row [class*=col-]:nth-child(1) .tp-funfact-item { border-radius: 25px 0 0 0; } .tp-funfact-2 .tp-funfact-wrapp .row [class*=col-]:nth-child(4) .tp-funfact-item { border-radius: 0 25px 0 0; } .tp-funfact-2 .tp-funfact-item { border-top: 2px solid var(--tp-common-white); -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .tp-funfact-2 .tp-funfact-item:hover { border-top: 2px solid var(--tp-theme-1); } @media only screen and (min-width: 768px) and (max-width: 991px) { .tp-funfact-2-title-box .tp-section-title { font-size: 48px; } } @media (max-width: 575px) { .tp-funfact-2-title-box .tp-section-title { font-size: 23px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tp-funfact-2-title-box p br { display: none; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tp-funfact-3 { padding-bottom: 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: 575px) { .tp-funfact-3-item { margin-bottom: 30px; } } .tp-funfact-3-number { font-size: 48px; font-weight: 800; margin-right: 20px; color: var(--tp-common-black); } .tp-funfact-3-title { font-size: 22px; font-weight: 700; color: var(--tp-common-black); margin-bottom: 0; } .tp-funfact-3-text p { margin-bottom: 0; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .tp-funfact-3-text p { font-size: 15px; } } @media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 575px) { .tp-funfact-3-text p { font-size: 14px; } } .tp-funfact-3-icon span { margin-bottom: 0; color: var(--tp-theme-1); } .tp-funfact-3-border { position: relative; } .tp-funfact-3-border::after { position: absolute; width: 1270px; height: 1px; bottom: -65px; left: -50px; content: ""; background: 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: 575px) { .tp-funfact-3-border::after { display: none; } } .tp-funfact-4 .tp-funfact-wrapp { background: var(--tp-theme-1); } .tp-funfact-4 .tp-funfact-item { border-right: 1px solid #ec4a73; } @media (max-width: 575px) { .tp-funfact-4 .tp-funfact-item { border: 0; border-bottom: 1px solid #ec4a73; } } .tp-funfact-4 .tp-funfact-item p { color: var(--tp-common-white); } .tp-funfact-4 .tp-funfact-title { color: var(--tp-common-white); } .tp-funfact-4 .tp-funfact-title span { color: var(--tp-common-white); } .tp-funfact-5 .tp-funfact-item { position: relative; } .tp-funfact-5 .tp-funfact-item::after { position: absolute; width: 0; height: 2px; left: 0; right: 0; margin: auto; text-align: center; bottom: 0; content: ""; background: var(--tp-theme-1); -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .tp-funfact-5 .tp-funfact-item:hover::after { width: 58%; } .tp-funfact-5 .tp-funfact-item p { color: var(--tp-text-body); } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tp-funfact-inner { padding-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: 575px) { .tp-funfact-inner .tp-funfact-item { padding-bottom: 0; } } .tp-funfact-inner .tp-funfact-item p { font-weight: 600; } .tp-funfact-inner .tp-funfact-box .row [class*=col-]:last-child .tp-funfact-item { border-right: 0; } @media (max-width: 575px) { .tp-funfact-inner .tp-funfact-box .row [class*=col-]:last-child .tp-funfact-item { border: 0; } } /*----------------------------------------*/ /* 7.4 contact css /*----------------------------------------*/ @media (max-width: 575px) { .tp-contact-title-box .tp-section-title { font-size: 30px; } } .tp-contact-bg { background-size: cover; background-position: center; background-repeat: no-repeat; } .tp-contact-shape-1 { position: absolute; right: 0; top: 14%; } @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: 575px) { .tp-contact-shape-1 { display: none; } } .tp-contact-shape-1 span { color: var(--tp-theme-1); } .tp-contact-shape-1 span svg path.line-1 { stroke: var(--tp-theme-1); stroke-dasharray: 2300; stroke-dashoffset: 3500; animation: dash 4s linear forwards; } .tp-contact-shape-2 { position: absolute; right: 0; bottom: 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: 768px) and (max-width: 991px), (max-width: 575px) { .tp-contact-shape-2 { display: none; } } .tp-contact-thumb-bg { position: absolute; left: 0; bottom: 0; width: 950px; height: 600px; background-repeat: no-repeat; } .tp-contact-box { position: relative; top: 108px; padding: 20px 0; margin-left: 46px; border-radius: 15px; background-color: white; box-shadow: 0px 0px 60px 0px rgba(4, 23, 26, 0.06); } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tp-contact-box { top: 30px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .tp-contact-box { top: 80px; margin: 46px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tp-contact-box { top: 30px; margin-left: 0; } } .tp-contact-box .tp-section-title { font-size: 30px; } @media (max-width: 575px) { .tp-contact-box .tp-section-title { font-size: 24px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .tp-contact-box .tp-section-title { font-size: 35px; } } .tp-contact-content { margin: 0 20px; padding: 48px 60px; border-radius: 15px; border: 1px solid var(--tp-border-1); } @media (max-width: 575px) { .tp-contact-content { padding: 48px 16px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .tp-contact-content { padding: 48px 60px; } } .tp-contact-form .postbox-comment-input { margin-bottom: 20px; } .tp-contact-form .postbox-comment-input input { border: 1px solid transparent; border-radius: 15px; background-color: var(--tp-grey-1); -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .tp-contact-form .postbox-comment-input input::placeholder { font-size: 16px; color: var(--tp-text-body); } .tp-contact-form .postbox-comment-input input:focus { border: 1px solid var(--tp-theme-1); } .tp-contact-form .postbox-comment-input textarea { border: 1px solid transparent; resize: none; height: 148px; border-radius: 15px; background-color: var(--tp-grey-1); -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .tp-contact-form .postbox-comment-input textarea::placeholder { font-size: 16px; color: var(--tp-text-body); } .tp-contact-form .postbox-comment-input textarea:focus { border: 1px solid var(--tp-theme-1); } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tp-contact-2 { padding-top: 80px; padding-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: 575px) { .tp-contact-2-title-box { margin-bottom: 60px; } } .tp-contact-2-title-box p { color: var(--tp-text-body-2); } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tp-contact-2-title-box p { font-size: 15px; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tp-contact-2-title-box p br { display: none; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .tp-contact-2-title-box .tp-section-title { font-size: 40px; } } .tp-contact-2-title-box .tp-header-info-icon { color: var(--tp-common-white); background: var(--tp-theme-1); border: 1px solid var(--tp-theme-1); } .tp-contact-2-text p { color: var(--tp-text-body-2); } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tp-contact-2-text p { font-size: 15px; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tp-contact-2-text p br { display: none; } } .tp-contact-2-input-box input, .tp-contact-2-input-box textarea { height: 60px; background: none; border-radius: 15px; margin-bottom: 20px; border: 1px solid #4c5b67; color: var(--tp-common-white); resize: none; } .tp-contact-2-input-box input::placeholder, .tp-contact-2-input-box textarea::placeholder { font-size: 16px; color: #9ca6ae; } .tp-contact-2-input-box input:focus, .tp-contact-2-input-box textarea:focus { border: 1px solid var(--tp-theme-1); } .tp-contact-2-input-box textarea { height: 140px; } .tp-contact-2 .tp-header-info-item:hover .tp-header-info-text span { color: inherit; } .tp-contact-2 .tp-header-info-item:hover .tp-header-info-title { color: var(--tp-theme-1); } .tp-contact-2 .tp-header-info-title { color: var(--tp-common-white); } .tp-contact-3-shape { position: absolute; top: 0; right: 0; } .tp-contact-3-shape-2 { position: absolute; width: 850px; height: 10px; bottom: 0; left: -30%; z-index: 2; border-radius: 0 15px 15px 0; background: var(--tp-common-black); } @media (max-width: 575px) { .tp-contact-3-title-box .tp-section-title { font-size: 40px; } } .tp-contact-3-fea-content { padding-bottom: 24px; margin-bottom: 30px; display: inline-block; border-bottom: 1px solid var(--tp-border-1); } .tp-contact-3-fea-content:hover .tp-contact-3-fea-icon { animation: icon-bounce 0.8s ease-out infinite; } .tp-contact-3-fea-content:hover .tp-contact-3-fea-icon span { color: var(--tp-theme-1); } .tp-contact-3-fea-content:hover .tp-contact-3-fea-text a { color: var(--tp-theme-1); } .tp-contact-3-fea-icon { margin-top: 7px; } .tp-contact-3-fea-icon span { font-size: 30px; margin-right: 26px; color: var(--tp-common-black); -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .tp-contact-3-fea-title { font-size: 16px; font-weight: 600; display: block; } .tp-contact-3-fea-text a { font-size: 22px; font-weight: 700; color: var(--tp-common-black); } .tp-contact-3-form { padding: 60px 80px; margin-left: 106px; border-radius: 15px; background-color: var(--tp-common-white); box-shadow: 0px 0px 60px 0px rgba(112, 99, 99, 0.08); } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 576px) and (max-width: 767px) { .tp-contact-3-form { padding: 60px 50px; margin-left: 0; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) { .tp-contact-3-form { margin-left: 0; } } @media (max-width: 575px) { .tp-contact-3-form { padding: 60px 30px; margin-left: 0; } } .tp-contact-3-form-title { font-size: 36px; font-weight: 800; color: var(--tp-common-black); } @media (max-width: 575px) { .tp-contact-3-form-title { font-size: 33px; } } .tp-contact-3-form .postbox-comment-input { position: relative; margin-bottom: 20px; } .tp-contact-3-form .postbox-comment-input input, .tp-contact-3-form .postbox-comment-input textarea { border: 0; resize: none; padding-left: 0; background: none; padding-right: 30px; border-bottom: 1px solid var(--tp-border-1); } .tp-contact-3-form .postbox-comment-input input::placeholder, .tp-contact-3-form .postbox-comment-input textarea::placeholder { font-size: 16px; color: var(--tp-text-body-2); } .tp-contact-3-form .postbox-comment-input input:focus, .tp-contact-3-form .postbox-comment-input textarea:focus { border-bottom: 1px solid var(--tp-theme-1); } .tp-contact-3-form .postbox-comment-input textarea { height: 115px; margin-bottom: 15px; } .tp-contact-3-form .postbox-comment-input span { position: absolute; top: 15px; right: 0; font-size: 16px; color: var(--tp-common-black); margin-bottom: 0; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .tp-contact-3-form .postbox-comment-input span:hover { color: var(--tp-theme-1); } .tp-contact-3-form .tp-contact-action button { width: 100%; border-radius: 15px; background: var(--tp-common-black); -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .tp-contact-3-form .tp-contact-action button:hover { background-color: var(--tp-theme-1); } .tp-contact-3-form-privacy { color: var(--tp-text-body-2); line-height: 1.5; } @media (max-width: 575px) { .tp-contact-3-form-privacy br { display: none; } } .tp-contact-3-form-privacy a { position: relative; font-weight: 700; display: inline-block; color: var(--tp-common-black); } .tp-contact-3-form-privacy a::after { position: absolute; width: 100%; height: 1px; bottom: 2px; left: 0; content: ""; background: var(--tp-common-black); } .tp-contact-3-text { font-size: 180px; font-weight: 800; line-height: 0.7; color: var(--tp-common-white); } .tp-contact-3-text-bottom { position: absolute; bottom: 0; } .tp-contact-input { margin-bottom: 30px; } .tp-contact-input input, .tp-contact-input textarea { font-size: 16px; border: 0; resize: none; padding: 30px; border-radius: 15px; border: 1px solid transparent; background: var(--tp-grey-1); } .tp-contact-input input::placeholder, .tp-contact-input textarea::placeholder { font-size: 16px; color: #8799aa; } .tp-contact-input input:focus, .tp-contact-input textarea:focus { border: 1px solid var(--tp-theme-1); } .tp-contact-input textarea { height: 148px; } .tp-contact-cart { padding: 60px 70px; margin-left: 35px; border-radius: 15px; background: var(--tp-common-black); } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .tp-contact-cart { padding: 47px 70px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tp-contact-cart { margin-left: 0; } } @media (max-width: 575px) { .tp-contact-cart { padding: 40px; } } .tp-contact-cart-title { position: relative; font-size: 20px; font-weight: 600; display: inline-block; margin-bottom: 30px; } .tp-contact-cart-title::after { position: absolute; width: 100%; height: 1px; bottom: -5px; left: 0; content: ""; background: var(--tp-common-white); } .tp-contact-cart-info a { display: block; line-height: 1.3; color: var(--tp-common-white); } .tp-contact-cart-social span { color: var(--tp-common-white); margin-right: 24px; } .tp-contact-cart-social ul li { display: inline-block; } .tp-contact-cart-social ul li a { font-size: 16px; margin-right: 16px; color: var(--tp-common-white); } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tp-contact-inner { padding-bottom: 80px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tp-contact-inner-thumb { margin-bottom: 40px; } } .tp-contact-inner-thumb img { border-radius: 15px; } .tp-contact-form-inner .tp-contact-form-wrap { margin: 0 75px; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tp-contact-form-inner .tp-contact-form-wrap { margin: 0 20px; } } .tp-map { margin-top: -140px; } .tp-map-wrap { position: relative; height: 640px; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tp-map-wrap { height: 400px; } } .tp-map-wrap iframe { width: 100%; height: 100%; } /*----------------------------------------*/ /* 7.2 Award css /*----------------------------------------*/ .tp-award-title { font-size: 24px; font-weight: 700; } @media (max-width: 575px) { .tp-award-title { font-size: 18px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .tp-award-title { font-size: 24px; } } .tp-award-icon span { font-size: 55px; display: inline-block; color: var(--tp-theme-1); margin-right: 30px; } @media (max-width: 575px) { .tp-award-icon span { margin-right: 14px; } } .tp-award-text p { font-weight: 500; } .tp-award-2-item { text-align: center; height: 212px; padding: 35px 0 15px 0; border-radius: 15px; border: 1px solid var(--tp-border-1); background-color: white; box-shadow: 0px 10px 60px 0px rgba(20, 17, 49, 0.08); } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tp-award-2-item { margin-bottom: 20px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tp-award-2-title-box { margin-bottom: 30px; } } @media (max-width: 575px) { .tp-award-2-title-box .tp-section-title { font-size: 35px; } } @media (max-width: 575px) { .tp-award-2-title-box p br { display: none; } } .tp-award-2-logo { margin-bottom: 35px; } .tp-award-2-logo img { width: auto; } .tp-award-2-content { width: 100%; padding-top: 12px; border-top: 1px solid var(--tp-border-1); } .tp-award-2-content p { margin-bottom: 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: 575px) { .tp-award-3-action { margin-bottom: 30px; float: right !important; } } .tp-award-3-action a { background-color: var(--tp-common-black); } .tp-award-3-action a:hover { background-color: var(--tp-theme-1); } @media (max-width: 575px) { .tp-award-3-action { margin-bottom: 40px; } } /*----------------------------------------*/ /* 7.7 price css /*----------------------------------------*/ @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tp-price-action { margin-bottom: 50px; } } .tp-price-action .tp-theme-btn { padding: 16px 42px; color: var(--tp-common-black); } .tp-price-action .tp-theme-btn:hover { color: var(--tp-common-white); } .tp-price-item { padding: 53px 60px 45px 60px; border-radius: 15px; background: var(--tp-common-white); border: 1px solid var(--tp-border-1); background-color: white; box-shadow: 0px 0px 60px 0px rgba(24, 21, 51, 0.08); } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tp-price-item { margin-bottom: 20px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .tp-price-item { padding: 45px; margin-bottom: 20px; } } @media (max-width: 575px) { .tp-price-item { padding: 45px; margin-bottom: 20px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .tp-price-item { margin-bottom: 20px; padding: 53px 60px 45px 60px; } } @media (max-width: 575px) { .tp-price-item { margin-bottom: 20px; } } .tp-price-item.active .tp-price-btn { background: var(--tp-theme-1); } .tp-price-title { font-weight: 700; font-size: 30px; } @media (max-width: 575px) { .tp-price-title-box .tp-section-title { font-size: 40px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .tp-price-title-box .tp-section-title { font-size: 50px; } } @media (max-width: 575px) { .tp-price-title-box p br { display: none; } } .tp-price-value { position: relative; font-weight: 700; font-size: 50px; } .tp-price-value span { position: absolute; font-weight: 700; font-size: 30px; top: 5px; left: -17px; } .tp-price-value-box { margin-left: 30px; } .tp-price-categories { font-size: 16px; text-align: left; margin-left: 12px; line-height: 1.7; } .tp-price-categories-list.price-list-3 span { color: var(--tp-common-black); } .tp-price-categories-list.price-list-3 span i { color: var(--tp-common-black); } .tp-price-btn { width: 100%; font-size: 14px; font-weight: 700; padding: 20px 0px; display: inline-block; color: var(--tp-common-white); background: var(--tp-common-black); border-radius: 15px; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .tp-price-btn:hover { color: var(--tp-common-white); background: var(--tp-theme-1); } .tp-price-categories-list ul li { position: relative; font-size: 16px; font-weight: 500; list-style: none; padding-left: 24px; padding-bottom: 15px; margin-bottom: 13px; color: var(--tp-common-black); border-bottom: 1px solid var(--tp-border-1); } .tp-price-categories-list ul li i { position: absolute; top: 7px; left: 0; } .tp-price-categories-list ul li span { color: var(--tp-text-body); margin-bottom: 0; } .tp-price-categories-list ul li span i { color: var(--tp-theme-1); } .tp-price-inner-plr { padding-bottom: 260px; } @media only screen and (min-width: 576px) and (max-width: 767px) { .tp-price-inner-plr { padding-bottom: 180px; } } @media (max-width: 575px) { .tp-price-inner-plr { padding-bottom: 120px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tp-price-inner .tp-price-item { margin-bottom: 20px; } } /*----------------------------------------*/ /* 7.15 Event css /*----------------------------------------*/ .tp-events-thumb { flex: 0 0 auto; } .tp-events-thumb img { -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; border-radius: 15px 0 0 15px; } @media (max-width: 575px) { .tp-events-thumb img { width: 100%; border-radius: 15px 15px 0 0; } } .tp-events-content { padding: 40px 30px; border-radius: 0 15px 15px 0; background-color: white; box-shadow: 0px 0px 60px 0px rgba(24, 21, 51, 0.08); } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tp-events-content { padding: 67px 30px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tp-events-content { padding: 47px 30px; border-radius: 0 0 15px 15px; } } @media (max-width: 575px) { .tp-events-content { padding: 47px 15px; border-radius: 0 0 15px 15px; } } .tp-events-btn { padding: 4px 20px; font-size: 14px; font-weight: 700; border-radius: 50px; display: inline-block; background: var(--tp-theme-1); color: var(--tp-common-white); -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .tp-events-btn:hover { color: var(--tp-common-white); background: var(--tp-common-black); } .tp-events-title { font-size: 20px; font-weight: 700; margin-bottom: 20px; display: inline-block; color: var(--tp-common-black); -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .tp-events-title { font-size: 18px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .tp-events-title { font-size: 17px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tp-events-title-box { margin-bottom: 20px; } } @media (max-width: 575px) { .tp-events-title-box .tp-section-title { font-size: 27px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tp-events-title-box p { font-size: 14px; } } .tp-events-title:hover { color: var(--tp-theme-1); } .tp-events-meta { font-size: 16px; font-weight: 700; color: var(--tp-common-black); } .tp-events-active { padding: 50px 0; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tp-events-arrow.tp-custom-arrow { margin-bottom: 0; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tp-events.tp-plr-rs { padding-top: 0; } } /*----------------------------------------*/ /* 7.20 Team css /*----------------------------------------*/ @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tp-team.tp-plr-rs { padding-bottom: 0; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tp-team-wrapp { margin-bottom: 0; } } .tp-team-item { padding: 40px 55px; border-radius: 15px; border: 1px solid var(--tp-border-1); -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .tp-team-item { padding: 40px 30px; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tp-team-item { padding: 40px 20px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tp-team-item { margin-bottom: 20px; } } .tp-team-item:hover { border-radius: 15px; transform: translateY(-6px); border: 1px solid transparent; background-color: white; box-shadow: 0px 0px 70px 0px rgba(84, 79, 73, 0.12); } .tp-team-thumb { text-align: center; margin-bottom: 30px; } .tp-team-thumb img { width: 150px; height: 150px; border-radius: 50%; } .tp-team-content { padding-bottom: 25px; margin-bottom: 25px; border-bottom: 1px solid var(--tp-border-1); } .tp-team-title { font-size: 20px; font-weight: 700; margin-bottom: 3px; display: inline-block; color: var(--tp-common-black); -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .tp-team-title:hover { color: var(--tp-theme-1); } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tp-team-title-box { margin-bottom: 15px; } } @media (max-width: 575px) { .tp-team-title-box .tp-section-title { font-size: 26px; } } .tp-team-designation { font-size: 16px; font-weight: 500; display: block; } .tp-team-social ul li { display: inline-block; margin-right: 20px; } .tp-team-social ul li:last-child { margin-right: 0; } .tp-team-social ul li a { font-size: 16px; } .tp-team-social ul li a .fb { color: #1877f2; } .tp-team-social ul li a .inst { color: #943925; } .tp-team-social ul li a .tw { color: #1c96e8; } .tp-team-social ul li a .pnt { color: #df0022; } .tp-team-notes { position: relative; } .tp-team-notes::before, .tp-team-notes::after { position: absolute; width: 270px; height: 1px; top: 50%; left: 0; content: ""; transform: translateY(-50%); background: var(--tp-border-1); } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .tp-team-notes::before, .tp-team-notes::after { width: 226px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tp-team-notes::before, .tp-team-notes::after { width: 136px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tp-team-notes::before, .tp-team-notes::after { display: none; } } .tp-team-notes::after { left: auto; right: 0; } .tp-team-notes-content { padding: 15px 100px; border-radius: 30px; display: inline-block; border: 1px solid var(--tp-border-1); } @media only screen and (min-width: 576px) and (max-width: 767px) { .tp-team-notes-content { padding: 10px 30px; } } @media (max-width: 575px) { .tp-team-notes-content { display: none; } } .tp-team-notes-title { font-size: 16px; font-weight: 600; margin-bottom: 0; color: var(--tp-common-black); } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tp-team-2.tp-plr-rs { padding-top: 0; } } .tp-team-2 .tp-team-item { border: 0; padding: 0 30px 30px 33px; background-color: white; box-shadow: 0px 0px 40px 0px rgba(16, 12, 33, 0.08); border-radius: 15px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tp-team-2 .tp-team-item { padding: 0 13px 30px 15px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tp-team-2 .tp-team-item { margin-bottom: 80px; text-align: center; } } .tp-team-2 .tp-team-item:hover .tp-team-thumb img { transform: scale(1.2); } .tp-team-2 .tp-team-thumb { position: relative; text-align: center; margin-bottom: 5px; overflow: hidden; display: inline-block; border-radius: 15px; margin-top: -50px; } .tp-team-2 .tp-team-thumb img { width: 100%; height: auto; border-radius: 15px; transition: 1.3s; } .tp-team-2 .tp-team-content { padding: 0; margin: 20px; border: 0; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) { .tp-team-2 .tp-team-title { font-size: 18px; } } .tp-team-2 .tp-team-title:hover { color: var(--tp-theme-1); } .tp-team-2 .tp-team-social ul li a { transition: 0.3s; } .tp-team-2 .tp-team-social ul li a:hover { color: var(--tp-theme-1); } .tp-team-3-item:hover .tp-team-3-thumb img { transform: scale(1.1); } .tp-team-3-thumb { overflow: hidden; border-radius: 15px; } .tp-team-3-thumb img { width: 100%; border-radius: 15px; transition: 1.3s; } .tp-team-3-content { position: absolute; width: 286px; bottom: -50px; left: 0; right: 0; text-align: center; margin: auto; padding: 24px 30px; border-radius: 15px; background: #fff; box-shadow: 0px 0px 40px 0px rgba(22, 25, 52, 0.08); } .tp-team-3-title { font-size: 20px; font-weight: 700; display: inline-block; color: var(--tp-common-black); margin-bottom: 0; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .tp-team-3-title:hover { color: var(--tp-theme-1); } .tp-team-3-title-box .tp-section-title { font-weight: 700; } @media (max-width: 575px) { .tp-team-3-title-box .tp-section-title { font-size: 28px; } } .tp-team-3-subtitle { display: block; font-weight: 600; text-align: left; } .tp-team-3-social-box { position: absolute; right: -20px; z-index: 1; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tp-team-3-social-box { right: 20px; } } .tp-team-3-social-box:hover .tp-team-3-social-link { opacity: 1; height: 180px; visibility: visible; } .tp-team-3-social-box:hover .tp-team-3-social-icon span { transform: rotate(-360deg); } .tp-team-3-social-icon { position: relative; } .tp-team-3-social-icon span { width: 48px; height: 48px; cursor: pointer; font-size: 16px; line-height: 48px; border-radius: 50%; text-align: center; display: inline-block; color: var(--tp-common-white); background: var(--tp-common-black); -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .tp-team-3-social-link { position: absolute; left: 0; right: 0; bottom: 0; height: 0; padding: 16px 0 60px 16px; opacity: 0; visibility: hidden; border-radius: 30px; background: var(--tp-theme-1); transition: 0.3s; z-index: -1; } .tp-team-3-social-link ul li { display: block; text-align: left; } .tp-team-3-social-link ul li a { font-size: 17px; color: var(--tp-border-1); -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .tp-team-3-social-link ul li a:hover { color: var(--tp-common-white); } .tp-team-3-active { padding-top: 0; padding-bottom: 80px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tp-team-3-active { margin: 0 -5px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tp-team-4 { padding-bottom: 80px; } } .tp-team-4-item { padding: 40px 56px; border-radius: 15px; background-color: white; box-shadow: 0px 4px 60px 0px rgba(22, 23, 26, 0.08); } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tp-team-4-item { padding: 15px 20px 25px 20px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .tp-team-4-item { padding: 40px 35px; margin-bottom: 20px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tp-team-4-item { margin-bottom: 20px; } } @media (max-width: 575px) { .tp-team-4-item { padding: 40px 30px; } } .tp-team-4-item:hover .tp-team-4-thumb a::before { opacity: 0.4; visibility: visible; transform: scale(1); } .tp-team-4-item:hover .tp-team-4-thumb::after { border: 15px solid var(--tp-theme-1); border-bottom: 0; } .tp-team-4-thumb { width: 260px; height: 260px; border-radius: 50%; } .tp-team-4-thumb > a { position: relative; display: inline-block; } .tp-team-4-thumb > a::before { position: absolute; width: 100%; height: 100%; top: 0; left: 0; opacity: 0; visibility: hidden; border-radius: 50%; content: ""; transform: scale(0.5); background-color: #000d16; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .tp-team-4-thumb::after { position: absolute; width: 285px; height: 58%; top: 0; left: -12px; content: ""; border-top-left-radius: 290px; border-top-right-radius: 290px; border: 15px solid #f6dbe4; border-bottom: 0; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .tp-team-4-thumb img { width: 260px; height: 260px; border-radius: 50%; } @media only screen and (min-width: 576px) and (max-width: 767px) { .tp-team-4-thumb { text-align: center; margin: auto; margin-bottom: 40px; } } .tp-team-4-social-box { position: absolute; left: 0; right: 0; bottom: -15px; margin: auto; text-align: center; z-index: 2; } .tp-team-4-social-icon { display: inline-block; } .tp-team-4-social-icon span { width: 38px; height: 38px; cursor: pointer; line-height: 38px; border-radius: 50%; text-align: center; display: inline-block; color: var(--tp-common-white); background: var(--tp-theme-1); -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .tp-team-4-social-icon span:hover { transform: rotate(360deg); } .tp-team-4-social-icon:hover .tp-team-4-social-link { opacity: 1; visibility: visible; margin-bottom: 10px; } .tp-team-4-social-link { opacity: 0; margin-bottom: 0; visibility: hidden; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .tp-team-4-social-link ul li { margin-right: 22px; display: inline-block; } .tp-team-4-social-link ul li:last-child { margin-right: 0; } .tp-team-4-social-link ul li a { font-size: 16px; display: inline-block; color: var(--tp-common-white); -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .tp-team-4-social-link ul li a:hover { color: var(--tp-theme-1); } .tp-team-inner .tp-team-3-item { margin-bottom: 90px; } .tp-team-details-wrapp { padding: 0 100px; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tp-team-details-wrapp { padding: 0; } } .tp-team-details-thumb { background: #fbdaca; border-radius: 15px 0 0 15px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tp-team-details-thumb { border-radius: 15px 15px 0 0px; } } .tp-team-details-thumb-content { padding: 47px 35px 47px 45px; background-color: white; box-shadow: 0px 4px 80px 0px rgba(30, 22, 22, 0.06); border-radius: 0 15px 15px 0; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .tp-team-details-thumb-content { padding: 60px 28px 60px 30px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tp-team-details-thumb-content { padding: 30px 35px 36px 30px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .tp-team-details-thumb-content { padding: 20px 20px 45px 20px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .tp-team-details-thumb-content { padding: 30px 20px 45px 35px; } } @media (max-width: 575px) { .tp-team-details-thumb-content { padding: 20px 20px 45px 20px; } } .tp-team-details-title { font-size: 40px; font-weight: 700; color: var(--tp-common-black); } .tp-team-details-social ul li { display: inline-block; margin-right: 6px; } .tp-team-details-social ul li a { width: 38px; height: 38px; line-height: 35px; text-align: center; border-radius: 50%; display: inline-block; border: 1px solid var(--tp-border-1); -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .tp-team-details-social ul li a:hover { color: var(--tp-common-white); background: var(--tp-theme-1); border: 1px solid var(--tp-theme-1); } .tp-team-details-subtitle { font-size: 36px; font-weight: 700; color: var(--tp-common-black); } .tp-team-details-list ul li { position: relative; padding-left: 16px; display: block; margin-bottom: 7px; } .tp-team-details-list ul li::before { position: absolute; width: 6px; height: 6px; left: 0; top: 10px; content: ""; background: var(--tp-text-body); border-radius: 50%; } .tp-team-author-info span { font-size: 18px; display: inline-block; color: var(--tp-theme-1); margin-bottom: 20px; } .tp-team-author-info-title { font-size: 16px; font-weight: 600; margin-bottom: 10px; color: var(--tp-common-black); display: flex; } .tp-team-author-info-title span { font-weight: 400; color: var(--tp-text-body); margin-left: 20px; } @media (max-width: 575px) { .tp-team-author-info-title span { margin-left: 10px; } } .tp-team-author-info-title b { min-width: 135px; display: inline-block; font-weight: 600; } /*----------------------------------------*/ /* 7.3 Brand css /*----------------------------------------*/ .tp-brand-logo { text-align: center; opacity: 0.25; } .tp-brand-active .swiper-slide-active .tp-brand-logo { opacity: 1; } .tp-brand-2-space { padding-bottom: 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: 576px) and (max-width: 767px), (max-width: 575px) { .tp-brand-2-space { padding-bottom: 120px; } } .tp-brand-3 .tp-brand-logo { opacity: 1; } /*----------------------------------------*/ /* 7.10 Banner css /*----------------------------------------*/ .tp-banner-item { overflow: hidden; border-radius: 15px; background-color: white; box-shadow: 0px 0px 60px 0px rgba(34, 34, 67, 0.08); -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tp-banner-item { margin-bottom: 20px; } } .tp-banner-item:hover { background: var(--tp-theme-1); } .tp-banner-item:hover .tp-banner-content::after { background: var(--tp-theme-1); } .tp-banner-item:hover .tp-banner-title { color: var(--tp-common-white); } .tp-banner-space { margin-top: -120px; } .tp-banner-content { position: relative; padding: 0 40px 0 60px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tp-banner-content { padding: 0 30px 0 30px; } } .tp-banner-content::after { position: absolute; width: 30px; height: 30px; right: -30px; top: 50%; content: ""; transform: translateY(-50%); background: var(--tp-common-white); clip-path: polygon(100% 50%, 0 0, 0 100%); -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .tp-banner-title { font-size: 30px; font-weight: 700; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tp-banner-title { font-size: 24px; } } .tp-banner-thumb img { max-width: inherit; border-radius: 0 15px 15px 0; } /*----------------------------------------*/ /* 7.21 Video css /*----------------------------------------*/ .tp-video-height { min-height: 600px; margin-top: -100px; } @media (max-width: 575px) { .tp-video-height { padding: 0; margin: 0; } } .tp-video-bg { width: 100%; height: 100%; background-size: cover; background-position: center; background-repeat: no-repeat; } .tp-video-space { padding-top: 220px; } @media only screen and (min-width: 576px) and (max-width: 767px) { .tp-video-space { padding-top: 80px; } } @media (max-width: 575px) { .tp-video-space { padding-top: 80px; padding-bottom: 80px; } } .tp-video-overlay::before { position: absolute; width: 100%; height: 100%; top: 0; left: 0; content: ""; opacity: 0.6; background-color: #071621; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tp-video-title-box { margin-bottom: 40px; } } @media (max-width: 575px) { .tp-video-title-box .tp-section-title { font-size: 38px; } } @media (max-width: 575px) { .tp-video-title-box .tp-section-title br { display: none; } } .tp-video-btn a { position: relative; width: 98px; height: 98px; font-size: 24px; line-height: 98px; text-align: center; display: inline-block; color: var(--tp-common-white); border: 1px solid var(--tp-common-white); border-radius: 50%; z-index: 2; } .tp-video-btn a::before, .tp-video-btn a::after { content: ""; top: 50%; left: 50%; transform: translate(-50%, -50%); height: 80%; width: 80%; position: absolute; border-radius: 50%; border: 1px solid rgba(255, 255, 253, 0.45); animation: borderanimate2 2s linear infinite; z-index: -1; } .tp-video-btn a::after { height: 75%; width: 75%; background-color: rgba(211, 211, 211, 0.4); animation: borderanimate2 3s linear infinite; } .tp-video-shape { position: absolute; right: 170px; bottom: 50px; animation: spin-1 3000ms forwards infinite alternate; transform-origin: top left; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tp-video-shape { right: auto; bottom: -30px; left: 140px; transform: rotate(-201deg); } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tp-video-inner { padding-bottom: 80px; } } .tp-video-inner-height { height: 700px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .tp-video-inner-height { height: 600px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tp-video-inner-height { height: 500px; } } .tp-video-inner-wrapp { margin: 0 -120px; } @media only screen and (min-width: 1400px) and (max-width: 1599px) { .tp-video-inner-wrapp { margin: 0 -50px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .tp-video-inner-wrapp { margin: 0 -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: 575px) { .tp-video-inner-wrapp { margin: auto; } } .tp-video-inner-overlay::after { position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0.4; content: ""; border-radius: 15px; background-color: #223645; z-index: -1; } .tp-video-inner-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-repeat: no-repeat; background-position: center; z-index: -2; border-radius: 15px; } .tp-video-inner-text { position: absolute; bottom: -40px; font-size: 150px; font-weight: 800; font-style: italic; color: var(--tp-common-white); text-wrap: nowrap; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tp-video-inner-text { bottom: -27px; font-size: 90px; } } .tp-video-inner-icon a { position: absolute; width: 120px; height: 120px; font-size: 24px; line-height: 120px; top: 50%; left: 0; right: 0; border-radius: 50%; text-align: center; margin: auto; display: inline-block; color: var(--tp-common-black); transform: translateY(-50%); background: var(--tp-common-white); z-index: 2; } .tp-video-inner-icon a::before { background: rgba(255, 255, 255, 0.4); } .tp-video-inner-icon a::after { background: rgba(255, 255, 255, 0.4); } /*----------------------------------------*/ /* 7.13 Discover css /*----------------------------------------*/ .tp-discover .tp-section-meta-notes p { font-weight: 500; color: var(--tp-common-white); } .tp-discover .tp-section-meta-notes:hover .tp-section-meta-sm { color: var(--tp-common-white); } .tp-discover .tp-section-meta-notes:hover .tp-section-meta-sm::after { width: 100%; } .tp-discover .tp-section-meta-sm { color: var(--tp-common-white); } .tp-discover .tp-section-meta-sm::after { background: var(--tp-common-white); } /*----------------------------------------*/ /* 7.14 Error css /*----------------------------------------*/ @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tp-error { padding-bottom: 90px; } } .tp-error-title { font-size: 360px; font-weight: 700; color: var(--tp-common-black); } @media only screen and (min-width: 768px) and (max-width: 991px) { .tp-error-title { font-size: 320px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .tp-error-title { font-size: 180px; } } @media (max-width: 575px) { .tp-error-title { font-size: 140px; } } .tp-error-title span { margin-left: 12px; margin-bottom: 0; display: inline-block; animation: moving 3s infinite; } @media only screen and (min-width: 576px) and (max-width: 767px) { .tp-error-title span { width: 30%; } } @media (max-width: 575px) { .tp-error-title span { width: 40%; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .tp-error-title-box .tp-section-title { font-size: 45px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .tp-error-title-box .tp-section-title { font-size: 30px; } } @media (max-width: 575px) { .tp-error-title-box .tp-section-title { font-size: 22px; } } /*----------------------------------------*/ /* 7.23 Shop css /*----------------------------------------*/ .tp-product-item:hover .tp-product-thumb img { transform: scale(1.2); } .tp-product-item:hover .tp-product-thumb-icon { bottom: 35px; opacity: 1; visibility: visible; } .tp-product-wrap span { font-size: 15px; font-weight: 600; color: var(--tp-common-black); } .tp-product-filter span { font-weight: 600; font-size: 15px; color: var(--tp-common-black); } .tp-product-filter .nice-select { padding-left: 5px; border: none; color: var(--tp-theme-1); border: none; background-color: transparent; padding-right: 15px; } .tp-product-badge { position: absolute; top: 20px; left: 30px; font-weight: 700; font-size: 12px; color: var(--tp-common-white); padding: 6px 13px; background: var(--tp-theme-1); border-radius: 5px; line-height: 1; } .tp-product-thumb { border: 1px solid #ECEFF4; border-radius: 5px; } .tp-product-thumb img { width: 100%; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .tp-product-thumb-icon { position: absolute; bottom: -50px; left: 0; right: 0; margin: 0 auto; text-align: center; opacity: 0; visibility: hidden; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .tp-product-thumb-icon a { margin: 0 5px; height: 45px; width: 45px; line-height: 45px; border-radius: 50%; display: inline-block; background-color: var(--tp-common-black); font-size: 14px; color: var(--tp-common-white); -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .tp-product-thumb-icon a:hover { color: var(--tp-common-white); background-color: var(--tp-theme-1); } .tp-product-content p { font-size: 18px; font-weight: 500; color: #777B83; margin-bottom: 6px; } .tp-product-title { font-size: 18px; font-weight: 500; display: block; } .tp-product-title a { color: var(--tp-common-black); } .tp-product-title a:hover { color: var(--tp-theme-1); } .tp-product-review i { color: #F7931E; } .tp-product-details-wrapper { margin-left: 21px; } .tp-product-details-wrapper.has-sticky { position: sticky; top: 120px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tp-product-details-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: 575px) { .tp-product-details-wrapper { margin-left: 0; margin-top: 50px; } } .tp-product-details-wrapper > p { font-size: 15px; line-height: 1.7; } .tp-product-details-wrapper > p span { font-weight: 500; color: var(--tp-theme-1); } .tp-product-details-nav-main-thumb { position: relative; } .tp-product-details-thumb-wrapper { position: sticky; top: 100px; margin-right: 20px; } .tp-product-details-thumb-wrapper .nav-tabs { margin-top: 10px; border: none; } .tp-product-details-thumb-wrapper .nav-tabs .nav-link { width: 78px; height: 100px; position: relative; padding: 0 0; margin-right: 5px; } @media (max-width: 575px) { .tp-product-details-thumb-wrapper .nav-tabs .nav-link { margin-right: 10px; margin-bottom: 10px; } } .tp-product-details-thumb-wrapper .nav-tabs .nav-link:not(:last-child) { margin-bottom: 10px; } .tp-product-details-thumb-wrapper .nav-tabs .nav-link::after { position: absolute; content: ""; width: 100%; height: 100%; background-color: transparent; border: 1px solid transparent; top: 0; left: 0; } .tp-product-details-thumb-wrapper .nav-tabs .nav-link.active::after, .tp-product-details-thumb-wrapper .nav-tabs .nav-link:hover::after { border-color: var(--tp-common-black); } .tp-product-details-thumb-wrapper .nav-tabs .nav-link img { width: 100%; height: 100%; object-fit: cover; } .tp-product-details-thumb-wrapper .nav-tabs .nav-link .nav-video-btn { position: absolute; top: 0; right: 0; width: 24px; height: 24px; background-color: var(--tp-common-black); color: var(--tp-common-white); font-size: 15px; } .tp-product-details-thumb-slider { position: sticky; top: 120px; } .tp-product-details-thumb-slider:hover .tp-product-details-thumb-arrow button { visibility: visible; opacity: 1; left: 20px; } .tp-product-details-thumb-slider:hover .tp-product-details-thumb-arrow button.tp-product-details-thumb-slider-5-button-next { left: auto; right: 20px; } .tp-product-details-thumb-arrow button { position: absolute; top: 50%; left: 0px; z-index: 1; width: 40px; height: 40px; line-height: 36px; text-align: center; border-radius: 50%; margin: 0 5px; background-color: var(--tp-common-white); color: var(--tp-common-black); box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.01); visibility: hidden; opacity: 0; } .tp-product-details-thumb-arrow button.tp-product-details-thumb-slider-5-button-next { left: auto; right: 0; } .tp-product-details-thumb-arrow button:hover { background-color: var(--tp-theme-1); color: var(--tp-common-white); box-shadow: none; } .tp-product-details-thumb-video-btn { position: absolute; top: 50%; 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%); color: var(--tp-common-black); border-radius: 50%; display: inline-block; width: 80px; height: 80px; line-height: 80px; text-align: center; background-color: var(--tp-common-white); -webkit-animation: tp-pulse-2 2s infinite; -moz-animation: tp-pulse-2 2s infinite; -ms-animation: tp-pulse-2 2s infinite; -o-animation: tp-pulse-2 2s infinite; animation: tp-pulse-2 2s infinite; } .tp-product-details-thumb-video-btn:hover { color: var(--tp-common-white); background-color: var(--tp-theme-1); } .tp-product-details-thumb-gallery-item img { width: 100%; } .tp-product-details-category span { font-size: 16px; line-height: 1; } .tp-product-details-category span a:hover { color: var(--tp-theme-1); } .tp-product-details-title { font-size: 32px; font-weight: 500; line-height: 1; margin-bottom: 15px; } .tp-product-details-stock { margin-right: 12px; } .tp-product-details-stock span { display: inline-block; font-size: 15px; color: var(--tp-theme-1); background-color: rgba(9, 137, 255, 0.06); line-height: 1; padding: 4px 12px; } .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-price { font-weight: 500; font-size: 24px; letter-spacing: -0.02em; color: var(--tp-common-black); } .tp-product-details-price.new-price { color: var(--tp-common-black); } .tp-product-details-price.old-price { font-weight: 400; font-size: 16px; text-decoration-line: line-through; color: #767A7D; } .tp-product-details-action-title { font-size: 16px; font-weight: 400; margin-bottom: 13px; } .tp-product-details-quantity .tp-product-quantity { width: 122px; border-radius: 0; } .tp-product-details-quantity .tp-cart-plus, .tp-product-details-quantity .tp-cart-minus { width: 24px; height: 24px; line-height: 24px; text-align: center; border-radius: 50%; left: 14px; } .tp-product-details-quantity .tp-cart-plus:hover, .tp-product-details-quantity .tp-cart-minus:hover { background-color: var(--tp-common-white); color: var(--tp-theme-1); } .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; background-color: #F3F5F6; border: 0; border-radius: 0; font-size: 16px; color: var(--tp-common-black); } .tp-product-details-add-to-cart-btn { font-size: 16px; color: var(--tp-common-black); text-align: center; padding: 9px 30px; border: 1px solid #E0E2E3; } .tp-product-details-add-to-cart-btn:hover { background-color: var(--tp-theme-1); border-color: var(--tp-theme-1); color: var(--tp-common-white); } .tp-product-details-buy-now-btn { display: inline-block; font-size: 16px; font-weight: 500; padding: 10px 30px; background-color: var(--tp-theme-1); color: var(--tp-common-white); } .tp-product-details-buy-now-btn:hover { background-color: var(--tp-common-black); color: var(--tp-common-white); } .tp-product-details-action-wrapper { margin-bottom: 17px; } .tp-product-details-action-sm { padding-bottom: 9px; border-bottom: 1px solid #EAEBED; margin-bottom: 25px; } .tp-product-details-action-sm-btn { font-size: 16px; margin-bottom: 10px; } .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; } .tp-product-details-action-sm-btn:hover { color: var(--tp-theme-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; color: var(--tp-common-black); line-height: 1.4; margin-right: 6px; } .tp-product-details-query-item p { font-size: 15px; margin-bottom: 0; line-height: 1.4; } .tp-product-details-social { margin-bottom: 22px; } .tp-product-details-social span { font-size: 15px; color: var(--tp-common-black); margin-right: 2px; } .tp-product-details-social a { display: inline-block; width: 38px; height: 38px; line-height: 38px; text-align: center; border: 1px solid #E6E7E8; border-radius: 50%; } .tp-product-details-social a:hover { background-color: var(--tp-theme-1); border-color: var(--tp-theme-1); color: var(--tp-common-white); } .tp-product-details-msg ul li { list-style: none; position: relative; font-size: 15px; padding-left: 25px; } .tp-product-details-msg ul li::after { position: absolute; content: url("../img/icon/check-3.svg"); top: 4px; left: 0; width: 18px; height: 18px; line-height: 16px; text-align: center; color: var(--tp-common-white); } .tp-product-details-payment { background-color: #F3F5F6; padding: 18px 30px; } .tp-product-details-payment p { font-size: 16px; line-height: 1; margin-bottom: 0; margin-right: 46px; flex: 0 0 auto; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tp-product-details-payment p { margin-right: 10px; } } @media (max-width: 575px) { .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: 500; margin-bottom: 13px; } @media only screen and (min-width: 576px) and (max-width: 767px) { .tp-product-details-desc-title { font-size: 30px; } } @media (max-width: 575px) { .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: 575px) { .tp-product-details-desc-title-2 { font-size: 25px; } } .tp-product-details-desc-content { margin-bottom: 25px; padding-right: 45px; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), (max-width: 575px) { .tp-product-details-desc-content { padding-right: 0; } } @media (max-width: 575px) { .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: 16px; line-height: 1.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: 575px) { .tp-product-details-desc-content-2 { padding-right: 0; padding-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: 575px) { .tp-product-details-desc-content-2.pt-75 { padding-top: 25px; } } .tp-product-details-desc-content-2 p { font-size: 16px; line-height: 1.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: 575px) { .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: 575px) { .tp-product-details-desc-fact-content span { font-size: 25px; } } .tp-product-details-desc-fact-content p { font-size: 22px; } @media (max-width: 575px) { .tp-product-details-desc-fact-content p { font-size: 20px; } } .tp-product-details-additional-info { padding-top: 60px; } @media (max-width: 575px) { .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 { border: 1px solid #E0E2E3; width: 100%; } .tp-product-details-additional-info table tr:not(:last-child) { border-bottom: 1px solid #ECEDED; } .tp-product-details-additional-info table tr td { padding: 12px 34px; } .tp-product-details-additional-info table tr td:first-child { font-size: 16px; color: var(--tp-common-black); background-color: #F9F9F9; width: 306px; } .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 #E0E2E3; padding: 35px 43px 33px 40px; } @media (max-width: 575px) { .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; } .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; } .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; } .tp-product-details-review-rating-item > span { color: #A0A2A4; font-size: 15px; margin-right: 10px; } .tp-product-details-review-rating-bar { width: 260px; background-color: #EDEEEE; height: 10px; position: relative; margin-right: 12px; } @media (max-width: 575px) { .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; } .tp-product-details-review-title { font-size: 24px; font-weight: 500; margin-bottom: 22px; } @media (max-width: 575px) { .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; } .tp-product-details-review-avater-title { font-size: 16px; font-weight: 500; margin-bottom: 9px; display: inline-block; } .tp-product-details-review-avater-meta { font-size: 14px; position: relative; padding-left: 11px; margin-left: 3px; } .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; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tp-product-details-review-form { margin-top: 50px; } } .tp-product-details-review-form > p { font-size: 16px; margin-bottom: 8px; } .tp-product-details-review-form-title { font-size: 24px; font-weight: 500; margin-bottom: 4px; } .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; } .tp-product-details-review-form-rating-icon span { font-size: 12px; color: #FFB21D; } .tp-product-details-review-input-wrapper { margin-bottom: 11px; } .tp-product-details-review-input-box { position: relative; } .tp-product-details-review-input-box:not(:last-child) { margin-bottom: 20px; } .tp-product-details-review-input input { font-size: 16px; height: 56px; background: var(--tp-grey-1); border: 1px solid transparent; border: 1px solid var(--tp-border-1); border-radius: 15px; } .tp-product-details-review-input input::placeholder { font-size: 16px; color: var(--tp-text-body); } .tp-product-details-review-input textarea { height: 165px; resize: none; border: 1px solid var(--tp-border-1); background: var(--tp-grey-1); border-radius: 15px; } .tp-product-details-review-input textarea:focus { border: 1px solid var(--tp-theme-1); } .tp-product-details-review-input textarea::placeholder { font-size: 16px; color: var(--tp-text-body); } .tp-product-details-review-input-title label { font-size: 14px; color: var(--tp-common-black); position: absolute; top: -7px; left: 20px; padding: 0 5px; background-color: var(--tp-common-white); line-height: 1; } .tp-product-details-review-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-product-details-review-input-eye .open-eye { display: none; } .tp-product-details-review-input-eye:hover { cursor: pointer; } .tp-product-details-review-input-eye:hover span { color: var(--tp-common-black); } .tp-product-details-review-remeber input { display: none; } .tp-product-details-review-remeber input:checked ~ label::after { background-color: var(--tp-theme-1); border-color: var(--tp-theme-1); } .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; } .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; } .tp-product-details-review-remeber label::before { position: absolute; content: url("../img/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); } .tp-product-details-review-remeber label a:hover { color: var(--tp-theme-1); } .tp-product-details-review-remeber label:hover { cursor: pointer; } .tp-product-details-review-btn { font-size: 16px; font-weight: 500; color: var(--tp-common-white); padding: 9px 45px; background-color: var(--tp-theme-1); -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; border-radius: 15px; } .tp-product-details-review-btn:hover { background-color: var(--tp-common-black); } .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: 575px) { .tp-product-details-tab-nav .nav-tabs { padding-bottom: 0; } } .tp-product-details-tab-nav .nav-tabs .nav-link { font-size: 20px; color: #A0A2A4; padding-left: 9px; padding-right: 7px; position: relative; border: none; } .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: 575px) { .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); } } @media (max-width: 575px) { .tp-product-details-tab-nav .nav-tabs span#productTabMarker { display: none !important; } } .tp-product-details-tab-line { position: absolute; bottom: 0; height: 1px; background-color: var(--tp-common-black); display: block; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .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-1); height: 100%; display: inline-block; } .tp-product-details-wishlist-btn { display: inline-block; width: 46px; height: 46px; line-height: 46px; text-align: center; 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-product-details-countdown { padding: 10px 20px; border: 1px solid var(--tp-pink-1); background-color: rgba(253, 75, 107, 0.05); } .tp-product-details-countdown-title { font-size: 18px; font-weight: 500; color: var(--tp-pink-1); margin-bottom: 0; } @media (max-width: 575px) { .tp-product-details-countdown-title { margin-bottom: 7px; } } .tp-product-details-countdown-time ul { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; } .tp-product-details-countdown-time ul li { list-style: none; font-size: 16px; font-weight: 500; color: var(--tp-pink-1); position: relative; } .tp-product-details-countdown-time ul li:not(:last-child) { margin-right: 24px; } .tp-product-details-countdown-time ul li:not(:last-child)::after, .tp-product-details-countdown-time ul li:not(:last-child)::before { position: absolute; content: ""; right: -13px; top: 7px; width: 3px; height: 3px; border-radius: 50%; background-color: var(--tp-pink-1); } .tp-product-details-countdown-time ul li:not(:last-child)::before { top: 15px; } .tp-product-quantity { width: 100px; position: relative; border-radius: 20px; } .tp-cart-plus, .tp-cart-minus { display: inline-block; text-align: center; font-size: 16px; color: var(--tp-common-black); -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; position: absolute; top: 50%; left: 12px; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } .tp-cart-plus svg, .tp-cart-minus svg { -webkit-transform: translateY(-1px); -moz-transform: translateY(-1px); -ms-transform: translateY(-1px); -o-transform: translateY(-1px); transform: translateY(-1px); } .tp-cart-plus:hover, .tp-cart-minus:hover { cursor: pointer; color: var(--tp-theme-1); } .tp-cart-plus.tp-cart-plus, .tp-cart-minus.tp-cart-plus { left: auto; right: 12px; } .tp-cart-plus.tp-cart-plus::after, .tp-cart-minus.tp-cart-plus::after { left: 0; right: auto; } .tp-product-details-quantity .tp-cart-input[type=text] { height: 46px; line-height: 46px; background-color: #F3F5F6; border: 0; border-radius: 0; font-size: 16px; color: var(--tp-common-black); text-align: center; } /*----------------------------------------*/ /* 7.24 Cart css /*----------------------------------------*/ .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: 575px) { .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: 575px) { .tp-cart-list { margin-right: 0; } } .tp-cart-list .table > :not(caption) > * > * { padding: 20px 12px; 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: 575px) { .tp-cart-list table { width: 960px; } } .tp-cart-list thead th { font-weight: 500; font-size: 15px; color: var(--tp-heading-primary); border: 0 !important; padding-top: 9px !important; padding-bottom: 9px !important; background-color: #E0E2E3; } .tp-cart-list tr td { border-color: #E0E2E3; } .tp-cart-list tr td .tp-cart-action-btn { font-weight: 400; font-size: 16px; color: #818487; } .tp-cart-list tr td .tp-cart-action-btn svg { margin-top: -3px; margin-right: 3px; } .tp-cart-list tr td .tp-cart-action-btn:hover { color: #FF1826; } .tp-cart-list tbody tr:first-child td { padding-top: 30px !important; } .tp-cart-img { width: 100px; margin-right: 20px; } .tp-cart-img img { width: 84px; height: 84px; object-fit: cover; } .tp-cart-title a { font-weight: 500; font-size: 16px; color: var(--tp-heading-primary); } .tp-cart-title a:hover { color: var(--tp-theme-1); } .tp-cart-price { width: 126px; } .tp-cart-price span { font-size: 16px; color: var(--tp-heading-primary); } .tp-cart-quantity { width: 180px; } .tp-cart-quantity .tp-product-quantity { width: 160px; } .tp-cart-quantity .tp-cart-input[type=text] { height: 60px; width: 100%; text-align: center; font-size: 20px; border: 1px solid transparent; background-color: #f6f7f8; padding: 0 45px; line-height: 1.5; color: var(--tp-heading-primary); } .tp-cart-quantity .tp-cart-plus, .tp-cart-quantity .tp-cart-minus { width: 60px; height: 60px; line-height: 62px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tp-cart-coupon { margin-bottom: 20px; } } .tp-cart-coupon-input-box label { font-size: 14px; color: var(--tp-common-black); margin-bottom: 7px; } .tp-cart-coupon-input input { background: #FFFFFF; border: 1px solid #D6D9DC; height: 54px; line-height: 46px; margin-right: 10px; max-width: 282px; } .tp-cart-coupon-input input::placeholder { color: #818487; font-size: 16px; } .tp-cart-coupon-input input:focus { border-color: var(--tp-theme-primary); } .tp-cart-coupon-input button { font-weight: 500; font-size: 16px; color: var(--tp-common-white); background-color: var(--tp-common-black); padding: 14px 30px; } .tp-cart-coupon-input button:hover { color: var(--tp-common-white); background-color: var(--tp-theme-1); } .tp-cart-update-btn { font-weight: 500; font-size: 16px; color: var(--tp-heading-primary); background-color: var(--tp-common-white); padding: 15px 29px; border: 1px solid rgba(0, 0, 0, 0.1); } .tp-cart-update-btn:hover { background-color: var(--tp-theme-1); border-color: var(--tp-theme-1); color: var(--tp-common-white); } .tp-cart-checkout-wrapper { background: var(--tp-common-white); box-shadow: 0px 30px 70px rgba(1, 15, 28, 0.1); padding: 36px 24px 28px; margin-left: -24px; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tp-cart-checkout-wrapper { margin-top: 50px; margin-left: 0; } } .tp-cart-checkout-top { padding-bottom: 13px; margin-bottom: 19px; border-bottom: 1px solid #E0E2E3; } .tp-cart-checkout-top span { font-size: 20px; color: var(--tp-common-black); font-weight: 500; } .tp-cart-checkout-shipping { padding-bottom: 16px; border-bottom: 1px solid #E0E2E3; margin-bottom: 15px; } .tp-cart-checkout-shipping-title { font-weight: 500; font-size: 20px; margin-bottom: 7px; font-family: var(--tp-ff-body); color: var(--tp-common-black); } .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-theme-1); } .tp-cart-checkout-shipping-option input:checked + label::before { opacity: 1; visibility: visible; } .tp-cart-checkout-shipping-option label { font-weight: 400; font-size: 15px; color: var(--tp-theme-primary); position: relative; padding-left: 25px; } .tp-cart-checkout-shipping-option label:hover { cursor: pointer; } .tp-cart-checkout-shipping-option label span { color: var(--tp-theme-1); } .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; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .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-theme-1); visibility: hidden; opacity: 0; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .tp-cart-checkout-total { margin-bottom: 25px; } .tp-cart-checkout-total span { font-weight: 500; font-size: 18px; color: var(--tp-common-black); } .tp-cart-checkout-btn { font-size: 16px; font-weight: 500; color: var(--tp-common-white); background-color: var(--tp-common-black); display: inline-block; padding: 14px 30px; text-align: center; } .tp-cart-checkout-btn:hover { background-color: var(--tp-theme-1); color: var(--tp-common-white); } .tp-cart-add-to-cart .tp-btn { padding: 13px 28px; font-weight: 500; } /*----------------------------------------*/ /* 7.25 Checkout css /*----------------------------------------*/ .tp-checkout-verify-item { margin-bottom: 40px; } .tp-checkout-verify-item:not(:last-child) { margin-bottom: 14px; } .tp-checkout-verify-reveal { font-size: 14px; color: var(--tp-common-black); margin-bottom: 0; display: inline-block; border: 1px dashed #AAB0B2; padding: 8px 26px; width: 100%; } .tp-checkout-verify-reveal button { color: var(--tp-theme-1); position: relative; } .tp-checkout-verify-reveal button::after { position: absolute; content: ""; left: 0; bottom: 4px; width: 100%; height: 1px; background-color: var(--tp-theme-1); } .tp-checkout-btn { display: inline-block; font-size: 16px; font-weight: 500; color: var(--tp-common-white); background-color: var(--tp-common-black); height: 50px; line-height: 50px; padding: 0 30px; text-align: center; } .tp-checkout-btn:hover { background-color: var(--tp-theme-1); color: var(--tp-common-white); } .tp-checkout-input { margin-bottom: 20px; } .tp-checkout-input label { font-weight: 500; color: var(--tp-common-black); margin-bottom: 5px; } .tp-checkout-input label span { color: red; } .tp-checkout-input input, .tp-checkout-input textarea { width: 100%; background: #FFFFFF; border: 1px solid #D5D8DB; color: var(--tp-common-black); height: 60px; } .tp-checkout-input input:focus, .tp-checkout-input textarea:focus { border-color: var(--tp-theme-1); } .tp-checkout-input textarea { height: 200px; resize: none; } .tp-checkout-input .nice-select { height: 50px; line-height: 48px; border-radius: 0; border: 1px solid #D5D8DB; color: var(--tp-common-black); float: none; padding: 0 26px; } .tp-checkout-input .nice-select::after { right: 26px; } .tp-checkout-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); } .tp-checkout-input .nice-select .list { margin-top: 0; border-radius: 0; 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); width: 100%; padding: 12px 0; } .tp-checkout-input .nice-select .list .option { line-height: 1.2; min-height: inherit; padding-top: 5px; padding-bottom: 5px; } .tp-checkout-input .nice-select .list .option:hover { color: var(--tp-theme-1); } .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: var(--tp-theme-1); border-color: var(--tp-theme-1); } .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; } .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; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .tp-checkout-option label::before { position: absolute; content: url("../img/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.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .tp-checkout-option label a:hover { color: var(--tp-theme-1); } .tp-checkout-option label:hover { cursor: pointer; } .tp-checkout-bill-area { padding: 45px 40px 24px; background-color: var(--tp-grey-1); } @media (max-width: 575px) { .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-body); color: var(--tp-common-black); } .tp-checkout-place { padding: 34px 30px 30px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tp-checkout-place { padding: 35px 20px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tp-checkout-place { margin-top: 50px; } } .tp-checkout-place-title { font-size: 26px; font-weight: 600; margin-right: 37px; font-family: var(--tp-ff-body); color: var(--tp-common-black); } .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: var(--tp-theme-1); } .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); } .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; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .tp-checkout-payment-item label::before { position: absolute; content: ""; left: 3px; top: 8px; width: 10px; height: 10px; border-radius: 50%; background-color: var(--tp-theme-1); visibility: hidden; opacity: 0; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .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); } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tp-checkout-payment-item label img { margin-left: 4px; } } @media (max-width: 575px) { .tp-checkout-payment-item label img { margin-top: 20px; margin-left: 0px; } } .tp-checkout-payment-item label a { margin-top: 20px; position: relative; } @media only screen and (min-width: 768px) and (max-width: 991px) { .tp-checkout-payment-item label a { margin-top: 0; margin-left: 20px; } } .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: var(--tp-common-white); -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 { background-color: var(--tp-common-white); padding: 19px 30px; margin-left: 27px; font-size: 14px; line-height: 1.57; color: #55585B; margin-bottom: 0; } .tp-checkout-agree { margin-bottom: 24px; } .tp-return-customer { display: none; margin-top: 14px; padding: 40px 40px; background-color: var(--tp-grey-1); } @media (max-width: 575px) { .tp-return-customer { padding: 40px 30px; } } .tp-return-customer-input { margin-bottom: 20px; } .tp-return-customer-input label { font-weight: 500; color: var(--tp-common-black); margin-bottom: 5px; } .tp-return-customer-input label span { color: red; } .tp-return-customer-input input { width: 100%; background: #FFFFFF; border: 1px solid #D5D8DB; color: var(--tp-common-black); height: 60px; } .tp-return-customer-input input:focus { border-color: var(--tp-theme-1); } .tp-return-customer-remeber input { display: none; } .tp-return-customer-remeber input:checked ~ label::after { background-color: var(--tp-theme-1); border-color: var(--tp-theme-1); } .tp-return-customer-remeber input:checked ~ label::before { visibility: visible; opacity: 1; } .tp-return-customer-remeber label { font-size: 15px; color: #55585B; position: relative; padding-left: 26px; z-index: 1; } .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; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .tp-return-customer-remeber label::before { position: absolute; content: url("../img/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.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .tp-return-customer-remeber label a:hover { color: var(--tp-theme-1); } .tp-return-customer-remeber label:hover { cursor: pointer; } .tp-return-customer-forgot a { font-weight: 400; font-size: 15px; color: var(--tp-theme-1); position: relative; display: inline-block; } .tp-return-customer-forgot a::after { position: absolute; content: ""; left: auto; right: 0; bottom: 4px; width: 0%; height: 1px; background-color: var(--tp-theme-1); } .tp-return-customer-forgot a:hover::after { left: 0; right: auto; width: 100%; } .tp-checkout-country.nice-select { border-radius: 0; width: 100%; background: #FFFFFF; border: 1px solid #D5D8DB; color: var(--tp-common-black); height: 60px; } .tp-checkout-country.nice-select:focus { border-color: var(--tp-theme-1); } .tp-checkout-country.nice-select::after { top: 30px; } .tp-checkout-country.tp-checkout-input .nice-select .list { margin-top: 2px; } .tp-checkout-country.doctor-name span { line-height: 4.2; } /*----------------------------------------*/ /* 7.18 Order css /*----------------------------------------*/ .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: 575px) { .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: 1px solid var(--tp-border-1); border-radius: 50%; } .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: 575px) { .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: 575px) { .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); } .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-body); color: var(--tp-common-black); } .tp-order-info-list ul li.tp-order-info-list-desc p { font-size: 15px; margin-bottom: 0; } .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-theme-1); } .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: var(--tp-theme-1); } .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-theme-1); } .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; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .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-theme-1); visibility: hidden; opacity: 0; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .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.10 Login css /*----------------------------------------*/ .tp-login-wrapper { box-shadow: 0px 30px 70px rgba(1, 15, 28, 0.1); padding: 50px 60px 70px; background-color: var(--tp-common-white); } @media (max-width: 575px) { .tp-login-wrapper { padding-left: 20px; padding-right: 20px; } } .tp-login-title { font-weight: 500; font-size: 30px; margin-bottom: 4px; } .tp-login-top p { font-weight: 400; font-size: 16px; color: #49535B; } .tp-login-top p a { color: var(--tp-theme-1); position: relative; display: inline-block; } .tp-login-top p a::after { position: absolute; content: ""; left: auto; right: 0; bottom: 4px; width: 0%; height: 1px; background-color: var(--tp-theme-1); -webkit-transition: 0.3s 0.3s ease-out; -moz-transition: 0.3s 0.3s ease-out; -ms-transition: 0.3s 0.3s ease-out; -o-transition: 0.3s 0.3s ease-out; transition: 0.3s 0.3s ease-out; } .tp-login-top p a:hover::after { left: 0; right: auto; width: 100%; } .tp-login-option-item { margin-bottom: 10px; } .tp-login-option-item:not(:last-child) { margin-right: 10px; } .tp-login-option-item.has-google a { width: 252px; } .tp-login-option-item.has-google a img { margin-right: 7px; } .tp-login-option-item a { display: inline-block; width: 98px; height: 56px; line-height: 54px; text-align: center; border: 1px solid #E0E2E3; font-size: 16px; color: #041226; } .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 a:hover { border-color: var(--tp-theme-1); } .tp-login-mail { position: relative; z-index: 1; } .tp-login-mail p { font-size: 15px; color: #55585B; margin-bottom: 0; padding: 0 20px; position: relative; display: inline-block; background-color: var(--tp-common-white); } .tp-login-mail p a:hover { color: var(--tp-theme-1); } .tp-login-mail::after { position: absolute; content: ""; left: 0; right: 0; bottom: 12px; width: 100%; height: 1px; background-color: #E0E2E3; -webkit-transition: 0.3s 0.3s ease-out; -moz-transition: 0.3s 0.3s ease-out; -ms-transition: 0.3s 0.3s ease-out; -o-transition: 0.3s 0.3s ease-out; transition: 0.3s 0.3s ease-out; z-index: -1; } .tp-login-input-wrapper { margin-bottom: 14px; } .tp-login-input-box { position: relative; } .tp-login-input-box:not(:last-child) { margin-bottom: 34px; } .tp-login-input input { font-weight: 500; height: 56px; background: #FFFFFF; border: 1px solid #E0E2E3; font-size: 16px; color: var(--tp-common-black); border-radius: 15px; } .tp-login-input input::placeholder { color: #95999D; } .tp-login-input input:focus { border-color: var(--tp-theme-1); } .tp-login-input-title label { font-size: 14px; color: var(--tp-heading-primary); position: absolute; top: -7px; left: 20px; padding: 0 5px; background-color: var(--tp-common-white); line-height: 1; } .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 .open-eye { display: none; } .tp-login-input-eye span { -webkit-transition: 0.3s 0.3s ease-out; -moz-transition: 0.3s 0.3s ease-out; -ms-transition: 0.3s 0.3s ease-out; -o-transition: 0.3s 0.3s ease-out; transition: 0.3s 0.3s ease-out; } .tp-login-input-eye:hover { cursor: pointer; } .tp-login-input-eye:hover span { color: var(--tp-common-black); } .tp-login-remeber input { display: none; } .tp-login-remeber input:checked ~ label::after { background-color: var(--tp-theme-1); border-color: var(--tp-theme-1); } .tp-login-remeber input:checked ~ label::before { visibility: visible; opacity: 1; } .tp-login-remeber label { font-size: 15px; color: #55585B; position: relative; padding-left: 26px; z-index: 1; } .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; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .tp-login-remeber label::before { position: absolute; content: url("../img/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.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .tp-login-remeber label a:hover { color: var(--tp-theme-1); } .tp-login-remeber label:hover { cursor: pointer; } .tp-login-forgot a { font-weight: 400; font-size: 15px; color: var(--tp-theme-1); position: relative; display: inline-block; } .tp-login-forgot a::after { position: absolute; content: ""; left: auto; right: 0; bottom: 4px; width: 0%; height: 1px; background-color: var(--tp-theme-1); -webkit-transition: 0.3s 0.3s ease-out; -moz-transition: 0.3s 0.3s ease-out; -ms-transition: 0.3s 0.3s ease-out; -o-transition: 0.3s 0.3s ease-out; transition: 0.3s 0.3s ease-out; } .tp-login-forgot a:hover::after { left: 0; right: auto; width: 100%; } .tp-login-btn { font-weight: 500; font-size: 16px; color: var(--tp-common-white); background-color: var(--tp-theme-1); padding: 14px 30px; text-align: center; display: inline-block; } .tp-login-btn:hover { color: var(--tp-common-white); background-color: var(--tp-common-black); } .tp-login-shape-1, .tp-login-shape-2, .tp-login-shape-3, .tp-login-shape-4 { position: absolute; z-index: -1; } .tp-login-shape-1 { top: 15%; left: 22%; animation: bannerAnimationTwo 6s infinite linear; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .tp-login-shape-1 { left: 8%; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tp-login-shape-1 { left: 4%; } } .tp-login-shape-2 { bottom: 15%; right: 14%; animation: tpswing 2s ease-in-out 0.1s forwards infinite alternate; transform-origin: bottom right; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .tp-login-shape-2 { right: 15%; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tp-login-shape-2 { right: 8%; } } .tp-login-shape-3 { top: 7%; right: 22%; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .tp-login-shape-3 { right: 15%; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tp-login-shape-3 { right: 10%; } } .tp-login-shape-4 { bottom: 27%; right: 20%; } @media only screen and (min-width: 1400px) and (max-width: 1599px) { .tp-login-shape-4 { right: 10%; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .tp-login-shape-4 { right: 3%; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tp-login-shape-4 { right: -6%; } } /*----------------------------------------*/ /* KIERO STYLES /*----------------------------------------*/ :root { --light-theme-color: color-mix(in srgb, var(--tp-theme-1), white 92%); --light-theme-color2: color-mix(in srgb, var(--tp-theme-1), white 85%); --tp-theme-1-semi: color-mix(in srgb, var(--tp-theme-1), white 30%); /* 10% darker */ /* Very light version of the theme color */ } .bg-primary { background-color: var(--tp-theme-1) !important; } a { cursor: pointer !important; } .w100 { width: 100% !important; display: block; } /* btn-primary styles */ .btn-primary { background-color: var(--tp-theme-1); border-color: var(--tp-theme-1); } .btn-primary:hover { background-color: var(--tp-theme-1); border-color: var(--tp-theme-1); opacity: 0.9; /* Optional: Add a hover effect */ } .btn-primary:active { background-color: var(--tp-theme-1) !important; /* Override Bootstrap's active state */ border-color: var(--tp-theme-1) !important; opacity: 0.9; /* Optional: Add an active state effect */ } /* btn-outline-primary styles */ .btn-outline-primary { color: var(--tp-theme-1); border-color: var(--tp-theme-1); background-color: transparent; } .btn-outline-primary:hover { color: #fff; /* Text color on hover */ background-color: var(--tp-theme-1); border-color: var(--tp-theme-1); } .btn-outline-primary:active { color: #fff !important; /* Ensure text color remains white */ background-color: var(--tp-theme-1) !important; /* Override Bootstrap's active state */ border-color: var(--tp-theme-1) !important; } .text-primary { color: var(--tp-theme-1) !important } /* Custom class for the select element */ .custom-select { background-color: #f9f9f9; /* Light background */ border: none; /* No borders */ font-size: 18px; /* Font size */ padding: 10px 40px 10px 10px; /* Padding (extra on the right for the arrow) */ border-radius: 5px; /* Slightly rounded corners for a modern look */ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */ appearance: none; /* Remove default arrow */ -webkit-appearance: none; /* For Safari */ -moz-appearance: none; /* For Firefox */ cursor: pointer; /* Change cursor to pointer */ outline: none; /* Remove default focus outline */ width: 100%; /* Full width (adjust as needed) */ max-width: 300px; /* Optional: Set a max width */ } .tier-select { background-color: #f9f9f9; /* Light background */ border: none; /* No borders */ font-size: 18px; /* Font size */ padding: 10px 40px 10px 10px; /* Padding (extra on the right for the arrow) */ border-radius: 5px; /* Slightly rounded corners for a modern look */ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */ appearance: none; /* Remove default arrow */ -webkit-appearance: none; /* For Safari */ -moz-appearance: none; /* For Firefox */ cursor: pointer; /* Change cursor to pointer */ outline: none; /* Remove default focus outline */ width: auto !important; /* Full width (adjust as needed) */ /* Optional: Set a max width */ } /* Custom dropdown arrow with FontAwesome */ .custom-select-wrapper { position: relative; display: inline-block; width: 100%; max-width: 300px; } .custom-select-wrapper::after { font-family: "Font Awesome 6 Pro"; /* Use your FontAwesome Pro font */ content: "\f078"; /* Unicode for the "chevron-down" icon */ position: absolute; top: 50%; right: 15px; transform: translateY(-50%); pointer-events: none; /* Ensure clicks go to the select element */ font-size: 14px; color: #666; /* Arrow color */ font-weight: 900; /* Use the solid style (adjust as needed) */ } /* Container for radio buttons */ .radio-group { display: flex; gap: 20px; /* Space between radio buttons */ flex-wrap: wrap; /* Wrap to the next line if needed */ } /* Custom radio button styling */ .custom-radio { display: flex; align-items: center; gap: 10px; /* Space between radio button and label */ cursor: pointer; font-size: 14px; /* Match the dropdown font size */ color: #333; /* Text color */ } /* Hide the default radio button */ .custom-radio input[type="radio"] { opacity: 0; position: absolute; } /* Custom radio button circle */ .custom-radio .radio-circle { width: 20px; height: 20px; border: 2px solid var(--tp-theme-1, #666); /* Use --tp-theme-1, fallback to #666 */ border-radius: 50%; /* Make it round */ position: relative; transition: all 0.2s ease; /* Smooth transition */ } /* Inner dot for selected radio button */ .custom-radio .radio-circle::after { content: ""; width: 10px; height: 10px; background-color: var(--tp-theme-1, #007bff); /* Use --tp-theme-1, fallback to #007bff */ border-radius: 50%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0); /* Start hidden */ transition: transform 0.2s ease; /* Smooth transition */ } /* Style when radio button is checked */ .custom-radio input[type="radio"]:checked+.radio-circle { border-color: var(--tp-theme-1, #007bff); /* Use --tp-theme-1, fallback to #007bff */ } .custom-radio input[type="radio"]:checked+.radio-circle::after { transform: translate(-50%, -50%) scale(1); /* Show inner dot */ } /* Hover effect */ .custom-radio:hover .radio-circle { border-color: var(--tp-theme-1, #007bff); /* Use --tp-theme-1, fallback to #007bff */ } .ontevaShadow { background-color: white; border-radius: 15px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); padding: 30px !important; } .plan-card { background-color: white; border-radius: 15px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); overflow: hidden; width: 100%; /* Make it take up 100% of the container */ max-width: none; /* Remove the max-width constraint */ /* Adjust margin if needed */ } .plan-header { background: linear-gradient(to bottom, var(--tp-theme-1), color-mix(in srgb, var(--tp-theme-1) 80%, white 20%)); color: white !important; padding: 20px; text-align: center; position: relative; } .plan-header h2 { font-size: 17px !important; } .plan-header-white { padding: 20px; text-align: center; position: relative; background-color: rgb(251, 251, 251); } .summary-header { text-align: left !important; } .plan-header::after { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 5px; background: linear-gradient(to bottom, transparent, white); } .plan-header h2 { margin: 0; font-size: 24px; color: white !important; font-weight: bold; } .plan-subtitle { margin: 5px 0 0; font-size: 18px; color: white !important; font-weight: 500; } .plan-price { padding-left: 20px; padding-right: 20px; text-align: center; color: white !important; background-color: var(--tp-theme-1-light); } .price { font-size: 45px; font-weight: bold; color: white !important; margin: 0; } .price-description { font-size: 14px; color: var(--text-color); margin: 10px 0 0; } .plan-actions { display: flex; flex-direction: column; gap: 10px; padding: 20px; } .empty-cart-message { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 200px; padding: 20px; text-align: center; } .empty-cart-icon { font-size: 48px; /* Big cart icon */ margin-bottom: 16px; } .empty-cart-text { font-size: 20px; font-weight: bold; color: #343a40; /* Dark gray text */ margin-bottom: 8px; } .empty-cart-subtext { font-size: 14px; color: #6c757d; /* Light gray text */ } /* Product List Container */ .product-list {} /* Product Item */ .product-item { display: flex; align-items: flex-start; /* Align items to the top */ justify-content: space-between; margin-bottom: 12px; /* Space between items */ } .plan-features { padding: 20px; } .plan-features { padding-bottom: 10px; position: relative } .plan-features::after { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 10px; background: linear-gradient(to bottom, var(--tp-theme-1), color-mix(in srgb, var(--tp-theme-1) 80%, white 20%)); } .plan-features-simple { padding: 20px; } .plan-features-simple { padding-bottom: 10px; position: relative } .plan-features-simple::after { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 10px; background: white; } /* Product Details */ .product-details { flex: 1; /* Take up remaining space */ } /* Product Levels */ .product-level { font-size: 16px; color: #343a40; /* Dark gray text */ } .product-level-1 { font-weight: bold; /* Bold for Level 1 */ font-size: 15px; color: var(--tp-theme-1); /* Use theme color for Level 1 */ } .product-level-2 { font-size: 13px; color: #495057; /* Slightly lighter gray for Level 2 */ } .product-level-3 { font-size: 11px; color: #6c757d; /* Light gray for Level 3 */ } /* Product Price */ .product-price { font-size: 18px; font-weight: bold; color: var(--tp-theme-1); /* Use theme color for price */ margin-left: 16px; /* Space between details and price */ } /* Modify Link */ .modify-link { font-size: 14px; /* Smaller font */ color: var(--tp-theme-1); /* Use theme color for link */ text-decoration: underline; display: inline-block; /* Make it inline-block for padding */ transition: color 0.3s ease; } .modify-link:hover { color: #0056b3; /* Darker shade of theme color on hover */ text-decoration: underline; /* Add underline on hover */ } .sticky-summary { /* position: sticky; top: 80px; height: 100vh; */ } .product-list.with-scroll { max-height: 60vh; /* Adjust this value to control the height of the scrollable area */ overflow-y: auto; /* Enable vertical scrolling */ padding-right: 10px; /* Add some padding to prevent content from touching the scrollbar */ } /* Optional: Style the scrollbar */ .product-list.with-scroll::-webkit-scrollbar { width: 8px; /* Width of the scrollbar */ } .product-list.with-scroll::-webkit-scrollbar-track { background: #f1f1f1; /* Color of the scrollbar track */ border-radius: 4px; } .product-list.with-scroll::-webkit-scrollbar-thumb { background: #888; /* Color of the scrollbar thumb */ border-radius: 4px; } .product-list.with-scroll::-webkit-scrollbar-thumb:hover { background: #555; /* Color of the scrollbar thumb on hover */ } .no-bullets { list-style-type: none; /* Remove bullet points */ padding-left: 0; /* Remove default padding */ } .no-bullets li { display: flex; /* Use flexbox for alignment */ align-items: center; /* Vertically center the icon and text */ margin-bottom: 0.5em; /* Add some space between list items */ } .no-bullets li i { margin-right: 0.5em; /* Add space between the icon and text */ font-size: 1em; /* Adjust icon size if needed */ } /* Loading Overlay */ .loading-overlay { position: fixed; /* Cover the entire screen */ top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black */ display: flex; justify-content: center; /* Center horizontally */ align-items: center; /* Center vertically */ z-index: 1000; /* Ensure it's on top of everything */ } /* Spinner */ .spinner { border: 4px solid rgba(255, 255, 255, 0.3); /* Light gray border */ border-top: 4px solid #ffffff; /* White border for the spinner */ border-radius: 50%; /* Circular shape */ width: 40px; height: 40px; animation: spin 1s linear infinite; /* Spin animation */ } /* Spin Animation */ @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* Ensure form-control and form-select have the same height */ .form-control { height: 50px !important; /* Adjust this value to match your form-control height */ padding: 20px !important; /* Adjust padding if needed to match form-control */ line-height: 1.5 !important; /* Ensure text alignment matches */ border-radius: 25px !important; /* Match border-radius if necessary */ border: 1px solid #f1f1f1 !important; /* Add a default border */ outline: none !important; /* Remove the default focus outline */ } .form-select { height: 50px !important; /* Adjust this value to match your form-control height */ padding: 10px !important; /* Adjust padding if needed to match form-control */ padding-left: 20px !important; line-height: 1.5 !important; /* Ensure text alignment matches */ border-radius: 25px !important; /* Match border-radius if necessary */ border: 1px solid #f1f1f1 !important; /* Add a default border */ outline: none !important; /* Remove the default focus outline */ } /* Change placeholder color to a light color */ .form-control::placeholder { color: #a0a0a0 !important; /* Light gray color for placeholders */ opacity: 1 !important; /* Ensure the placeholder is fully visible */ } /* For select elements, you might need to style the default option as a placeholder */ .form-select option[disabled] { color: #a0a0a0 !important; /* Light gray color for disabled options (acts as placeholder) */ } /* Explicitly target password inputs */ input[type="password"].form-control { border: 1px solid #f1f1f1 !important; /* Add a default border */ background-color: white; /* Ensure the background is white */ } textarea.form-control { border: 1px solid #f1f1f1 !important; /* Add a default border */ background-color: white; height: 200px !important; /* Ensure the background is white */ } /* Optional: Add focus styles for better UX */ .form-control:focus { border-color: var(--tp-theme-1); /* Change border color on focus */ } .password-container { position: relative; } .password-toggle { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); cursor: pointer; color: #666; /* Adjust the color as needed */ } .password-toggle:hover { color: #000; /* Change color on hover */ } .top-nav { width: 100%; background-color: color-mix(in srgb, var(--tp-theme-1), white 95%); display: flex; justify-content: center; align-items: center; padding-top: 25px; /* Subtle border */ } .steps-container { display: flex; justify-content: space-between; width: auto; position: relative; } .steps-container::before { content: ''; position: absolute; top: 20px; left: 50%; width: calc(100% - 100px); height: 2px; background-color: var(--tp-theme-1); z-index: 0; transform: translateX(-50%); } .step-icon { width: 40px; height: 40px; border-radius: 50%; display: flex; justify-content: center; align-items: center; font-size: 16px; font-weight: bold; margin: 0 auto 5px; background-color: var(--light-theme-color); color: var(--tp-theme-1); border: 2px solid var(--tp-theme-1); } .step-ok { background-color: var(--tp-theme-1); color: white; border-color: var(--tp-theme-1); } @media (max-width: 768px) { .step-label, .step-description { display: none; } .step { min-width: 60px; width: 60px; } } .step { text-align: center; flex: 1; position: relative; z-index: 1; width: 140px; } .step-description { font-size: 10px; color: #666; padding-left: 15px; padding-right: 15px; } .swal2-popup { position: relative; background: radial-gradient(circle at top right, var(--light-theme-color2) 0%, white 80%); padding: 20px !important; } .primary-light-background { background: var(--light-theme-color2) !important; } .swal2-title { font-size: 20px !important; margin-bottom: 0px !important; color: var(--tp-theme-1) !important; } .swal2-html-container { font-size: 13px !important; } .swal2-icon { width: 40px !important; /* Sets icon size */ height: 40px !important; margin: 10px auto 20px !important; /* Adjusts spacing around the icon */ } .icon-size { font-size: 20px !important; color: var(--tp-theme-1) } .swal2-icon .swal2-icon-content { font-size: 24px !important; /* Adjusts the size of the icon content (e.g., Font Awesome icons) */ } /* Global SweetAlert2 button styles */ .swal2-popup .swal2-styled { font-size: 12px !important; /* Smaller font size */ padding: 8px 16px !important; /* Smaller padding */ border-radius: 4px !important; /* Smaller border radius */ border: none !important; /* Remove border */ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important; /* Subtle shadow */ transition: background-color 0.3s ease, transform 0.2s ease !important; /* Smooth transitions */ } /* Confirm button (OK) */ .swal2-popup .swal2-confirm { background-color: var(--tp-theme-1) !important; /* Base color */ color: #fff !important; /* Text color */ } /* Confirm button hover state */ .swal2-popup .swal2-confirm:hover { background-color: color-mix(in srgb, var(--tp-theme-1), black 10%) !important; /* Darker shade */ transform: translateY(-1px); /* Slight lift on hover */ } /* Confirm button active state */ .swal2-popup .swal2-confirm:active { background-color: color-mix(in srgb, var(--tp-theme-1), black 20%) !important; /* Even darker shade */ transform: translateY(0); /* Reset lift */ } /* Confirm button focus state */ .swal2-popup .swal2-confirm:focus { background-color: color-mix(in srgb, var(--tp-theme-1), black 15%) !important; /* Darker shade */ box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1) !important; /* Focus ring */ } /* Cancel button */ .swal2-popup .swal2-cancel { background-color: #6c757d !important; /* Gray color for cancel */ color: #fff !important; /* Text color */ } /* Cancel button hover state */ .swal2-popup .swal2-cancel:hover { background-color: #5a6268 !important; /* Darker gray for hover */ transform: translateY(-1px); /* Slight lift on hover */ } /* Cancel button active state */ .swal2-popup .swal2-cancel:active { background-color: #545b62 !important; /* Even darker gray for active */ transform: translateY(0); /* Reset lift */ } /* Cancel button focus state */ .swal2-popup .swal2-cancel:focus { background-color: #5a6268 !important; /* Darker gray for focus */ box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1) !important; /* Focus ring */ } /* Deny button */ .swal2-popup .swal2-deny { background-color: #dc3545 !important; /* Red color for deny */ color: #fff !important; /* Text color */ } /* Deny button hover state */ .swal2-popup .swal2-deny:hover { background-color: #c82333 !important; /* Darker red for hover */ transform: translateY(-1px); /* Slight lift on hover */ } /* Deny button active state */ .swal2-popup .swal2-deny:active { background-color: #bd2130 !important; /* Even darker red for active */ transform: translateY(0); /* Reset lift */ } /* Deny button focus state */ .swal2-popup .swal2-deny:focus { background-color: #c82333 !important; /* Darker red for focus */ box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1) !important; /* Focus ring */ } /* Change the color of the info icon */ .swal2-icon.swal2-info { color: var(--tp-theme-1) !important; /* Use your theme color */ border-color: var(--tp-theme-1) !important; /* Optional: Change border color */ } /* The styles for the parent container (usually the overlay for the lightbox) */ .lightbox-container { display: flex; justify-content: center; align-items: center; position: fixed; width: 100%; height: 100%; top: 0; left: 0; background-color: rgba(0, 0, 0, 0.5); /* semi-transparent black background */ z-index: 1050; } /* The styles for the content div */ .lightbox-content { /* or any desired width */ background: white; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); z-index: 1051; border-radius: 10px; } .lightbox-header { background: linear-gradient(to bottom, var(--tp-theme-1), color-mix(in srgb, var(--tp-theme-1) 80%, white 20%)); color: white !important; border-top-left-radius: 10px; border-top-right-radius: 10px; border-bottom-left-radius: 0; border-bottom-right-radius: 0; padding: 20px; } .lightbox-body { overflow-y: auto; overflow-x: hidden; } .custom-bg { background-color: var(--light-theme-color) !important; } .bg-theme-light { background-color: var(--light-theme-color) !important; } .comparison-container { overflow-y: auto; } .comparison-table { width: 100%; border-collapse: collapse; table-layout: fixed; box-shadow: 6px 6px 10px -2px rgba(0, 0, 0, 0.1); } .comparison-table .sticky-top { position: sticky; background-color: white; } .comparison-table td { padding: 4px; border: 1px solid var(--light-theme-color); background-color: white; } .first-column { background-color: var(--light-theme-color2) !important; /* color: white;*/ padding-left: 20px !important; width: 400px; max-width: 400px; } .comparison-table td:not(.first-column) { width: calc((100% - 250px) / var(--num-columns)); } .comparison-primary .main-grid-text { font-size: 13px; margin: 0; line-height: 1.2; } .comparison-primary .main-grid-text small { font-size: 10px; display: block; margin: 0; line-height: 1.2; color: #999999; } .table-pricing { font-size: 18px; font-weight: 700; margin: 0; color: var(--tp-theme-1); } .comparison-primary .full-text-1 { font-size: 15px; font-weight: 700; margin: 0; } .comparison-primary .full-text-2 { font-size: 13px; font-weight: 500; margin: 0; } .comparison-primary { padding: 20px !important; background-color: var(--tp-theme-1-semi) !important; color: white; } .comparison-primary h5 { font-size: 18px; font-weight: bold; color: white; } .comparison-primary .subtext { font-size: 13px; color: var(--light-theme-color); } .comparison-secondary { background-color: white; } .comparison-header { height: 80px !important; } .comparison-header-plan { background-color: var(--tp-theme-1) !important; color: white; text-align: center !important; } /* Mobile Styles */ @media (max-width: 768px) { .comparison-table { display: block; width: 100%; border: none; box-shadow: none; } .comparison-table tbody { display: block; width: 100%; } .comparison-table tr { display: flex; flex-direction: column; width: 100%; margin-bottom: 20px; border: 1px solid #ccc; border-radius: 8px; overflow: hidden; box-sizing: border-box; } .comparison-table td { display: block; width: 100% !important; max-width: 100% !important; text-align: left; padding: 10px 15px; border: none; border-bottom: 1px solid #eee; box-sizing: border-box; } .comparison-table td.comparison-value-cell { display: block; } .comparison-table td.comparison-value-cell::before { content: attr(data-label); display: block; margin-bottom: 5px; } .comparison-header, .comparison-header-plan { display: none; } /* Special handling for full-width rows */ .comparison-table td[colspan] { width: 100% !important; } } .light-step { color: #cccccc } /* Hide the default checkbox */ .custom-checkbox input[type="checkbox"] { opacity: 0; position: absolute; } /* Custom checkbox design */ .custom-checkbox label { position: relative; padding-left: 30px; /* Space for the custom checkbox */ cursor: pointer; } /* Custom checkbox box */ .custom-checkbox label::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; border: 2px solid var(--tp-theme-1); /* Use your theme color */ border-radius: 4px; /* Slightly rounded corners */ background-color: white; transition: all 0.3s ease; } /* Custom checkbox checkmark */ .custom-checkbox label::after { content: ""; position: absolute; left: 5px; top: 50%; transform: translateY(-50%) scale(0); /* Hide by default */ width: 10px; height: 10px; background-color: var(--tp-theme-1); /* Use your theme color */ border-radius: 2px; /* Match the box's rounded corners */ transition: all 0.3s ease; } /* When the checkbox is checked, show the checkmark */ .custom-checkbox input[type="checkbox"]:checked+label::after { transform: translateY(-50%) scale(1); /* Show the checkmark */ } /* When the checkbox is checked, change the box border color */ .custom-checkbox input[type="checkbox"]:checked+label::before { border-color: var(--tp-theme-1); /* Use your theme color */ } /* Disabled state */ .custom-checkbox input[type="checkbox"]:disabled+label { opacity: 0.6; cursor: not-allowed; } .custom-checkbox input[type="checkbox"]:disabled+label::before { border-color: #ccc; /* Gray out the border */ background-color: #f5f5f5; /* Light gray background */ } .tp-theme-btn:hover:not(:disabled) { /* Darker color on hover */ } .tp-theme-btn:disabled { background-color: #e5e5e5; cursor: not-allowed; pointer-events: none; } .onteva-form-button { font-size: 14px !important; padding: 12px !important } .form-control-small { height: 40px !important; /* Reduced height */ padding: 15px !important; /* Reduced padding */ line-height: 1.3 !important; /* Adjusted line-height */ border-radius: 20px !important; /* Adjusted border-radius */ border: 1px solid #f1f1f1 !important; outline: none !important; width: auto !important; min-width: 150px !important } .form-select-small { height: 40px !important; /* Reduced height */ padding: 8px !important; /* Reduced padding */ padding-left: 15px !important; /* Adjusted left padding */ line-height: 1.3 !important; /* Adjusted line-height */ border-radius: 20px !important; /* Adjusted border-radius */ border: 1px solid #f1f1f1 !important; outline: none !important; width: auto !important; min-width: 150px !important } .underline { text-decoration: underline !important } .alert-custom { padding: 1rem; border: 1px solid var(--light-theme-color); border-radius: 0.25rem; background-color: var(--light-theme-color); color: var(--tp-theme-1); font-size: 1rem; line-height: 1.5; margin-bottom: 1rem; } .alert-white { padding: 1rem; border: 1px solid white; border-radius: 0.25rem; background-color: white; font-size: 1rem; line-height: 1.5; margin-bottom: 1rem; } .toggle-switch-with-text { display: flex; align-items: flex-start; /* Align items to the top */ gap: 10px; /* Space between toggle switch and text */ } .toggle-switch { position: relative; display: inline-block; width: 50px; /* Width of the switch */ height: 26px; /* Height of the switch */ flex-shrink: 0; /* Prevent the toggle switch from shrinking */ } .toggle-switch-input { opacity: 0; width: 0; height: 0; } .toggle-switch-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; /* Default background color */ transition: 0.4s; border-radius: 26px; /* Rounded corners */ } .toggle-switch-slider:before { position: absolute; content: ""; height: 20px; /* Size of the circle */ width: 20px; left: 3px; /* Position of the circle */ bottom: 3px; background-color: white; /* Color of the circle */ transition: 0.4s; border-radius: 50%; /* Make it round */ } .toggle-switch-input:checked+.toggle-switch-slider { background-color: var(--tp-theme-1); /* Use your custom color */ } .toggle-switch-input:checked+.toggle-switch-slider:before { transform: translateX(24px); /* Move the circle to the right */ } .toggle-switch-input:disabled+.toggle-switch-slider { background-color: #e0e0e0; /* Disabled state */ cursor: not-allowed; } .toggle-switch-input:disabled+.toggle-switch-slider:before { background-color: #f5f5f5; /* Disabled state */ } .toggle-switch-text { font-size: 14px; /* Adjust text size */ line-height: 1.4; /* Improve readability for multi-line text */ } .btn-error { color: white; background-color: #e12454; } .tp-theme-btn.btn-error:hover { color: #e12454; background-color: white; } .btn-w { color: var(--tp-theme-1); background-color: white; } .btn-w:hover { color: white; background-color: var(--tp-theme-1); } .subtitle { font-size: 26px; font-weight: 800; color: var(--tp-common-black); } .tp-section-title { font-weight: 800 !important; font-size: 42px !important; display: inline-block; letter-spacing: -1px; } .tp-contact-3-form-title { font-size: 26px !important } .logo-img { max-width: 200px; max-height: 80px; height: auto; width: auto; display: block; } .lightbox-close-btn { position: absolute; top: 10px; right: 10px; z-index: 1001; cursor: pointer; font-size: 18px; } .equal-row { display: flex; flex-wrap: wrap; } .equal-row > .col { display: flex; flex-direction: column; }